Bump up release version to 3.2.3

Updates weekly survey [MAILPOET-1224]

.circleci/apache/mailpoet.loc.conf

@@ -1,6 +1,4 @@
-Listen 8080
+<VirtualHost *:80>
-
-<VirtualHost *:8080>
   UseCanonicalName Off
   ServerName mailpoet.loc
   DocumentRoot /home/circleci/mailpoet/wordpress
@@ -8,6 +6,9 @@ Listen 8080
   LogLevel notice
 
   <Directory /home/circleci/mailpoet/wordpress>
+    Options Indexes FollowSymLinks
+    AllowOverride All
+    RewriteEngine On
     Require all granted
   </Directory>
 </VirtualHost>

.circleci/config.yml

@@ -81,6 +81,7 @@ jobs:
               curl -sS https://getcomposer.org/installer | php
               php composer.phar install
               ./do install
+              ./do compile:all --env production
       - save_cache:
           key: composer-{{ checksum "composer.json" }}-{{ checksum "composer.lock" }}
           paths:
@@ -94,9 +95,9 @@ jobs:
           command: |
               docker-compose run codeception --steps --debug -vvv --html --xml
       - store_artifacts:
-          path: ~/mailpoet/tests/acceptance-tests/_output
+          path: tests/_output
       - store_test_results:
-          path: ~/mailpoet/tests/acceptance-tests/_output
+          path: tests/_output
   php7:
     working_directory: /home/circleci/mailpoet
     docker:
@@ -119,7 +120,38 @@ jobs:
       - run:
           name: "PHP Unit tests"
           command: |
-            WP_TEST_PATH="/home/circleci/mailpoet/wordpress" ./do t:u --xml
+            ./do t:u --xml
+      - store_test_results:
+          path: tests/_output
+      - store_artifacts:
+          path: tests/_output
+          destination: codeception
+      - store_artifacts:
+          path: /tmp/fake-mailer/
+          destination: fake-mailer
+  php7_multisite:
+    working_directory: /home/circleci/mailpoet
+    docker:
+      - image: circleci/php:7.1-apache-browsers
+      - image: circleci/mysql:5.7
+    environment:
+      TZ: /usr/share/zoneinfo/Etc/UTC
+    steps:
+      - checkout
+      - run:
+          name: "Set up virtual host"
+          command: echo 127.0.0.1 mailpoet.loc | sudo tee -a /etc/hosts
+      - restore_cache:
+          key: composer-{{ checksum "composer.json" }}-{{ checksum "composer.lock" }}
+      - restore_cache:
+          key: npm-{{ checksum "package.json" }}
+      - run:
+          name: "Set up test environment"
+          command: source ./.circleci/setup.bash && setup php7_multisite
+      - run:
+          name: "PHP Unit tests"
+          command: |
+            ./do t:multisite-unit --xml
       - store_test_results:
           path: tests/_output
       - store_artifacts:
@@ -134,4 +166,5 @@ workflows:
     jobs:
       - qa_js_php5
       - php7
+      - php7_multisite      
       - acceptance_tests

.circleci/setup.bash

@@ -2,8 +2,11 @@
 
 function setup {
 	local version=$1
+	local wp_cli_wordpress_path="--path=wordpress"
+	local wp_cli_allow_root="--allow-root"
+
 	# install PHP dependencies for WordPress
-	if [[ $version == "php7" ]]; then
+	if [[ $version == "php7" ]] || [[ $version == "php7_multisite" ]]; then
 		echo "deb http://packages.dotdeb.org jessie all" | sudo tee -a /etc/apt/sources.list.d/dotdeb.list
 		echo "deb-src http://packages.dotdeb.org jessie all" | sudo tee -a /etc/apt/sources.list.d/dotdeb.list
 		wget -qO - http://www.dotdeb.org/dotdeb.gpg | sudo apt-key add -
@@ -15,34 +18,66 @@ function setup {
 		sudo apt-get install mysql-client php5-mysql zlib1g-dev
 		sudo docker-php-ext-install mysql mysqli pdo pdo_mysql zip
 	fi
+
 	# Add a fake sendmail mailer
 	sudo cp ./.circleci/fake-sendmail.php /usr/local/bin/
+
 	# configure Apache
 	sudo cp ./.circleci/mailpoet_php.ini /usr/local/etc/php/conf.d/
 	sudo cp ./.circleci/apache/mailpoet.loc.conf /etc/apache2/sites-available
+	sudo a2dissite 000-default.conf
 	sudo a2ensite mailpoet.loc
 	sudo a2enmod rewrite
 	sudo service apache2 restart
+
 	# Install NodeJS+NPM
 	curl -sL https://deb.nodesource.com/setup_6.x | sudo -E bash -
 	sudo apt-get install nodejs build-essential
+
 	# install plugin dependencies
 	curl -sS https://getcomposer.org/installer | php
 	./composer.phar install
 	./do install
-	# Set up Wordpress
+
+	# Set up WordPress
 	mysql -h 127.0.0.1 -u root -e "create database wordpress"
 	curl -O https://raw.githubusercontent.com/wp-cli/builds/gh-pages/phar/wp-cli.phar
 	chmod +x wp-cli.phar
-	./wp-cli.phar core download --allow-root --path=wordpress
+	sudo mv wp-cli.phar /usr/local/bin/wp
+	wp core download $wp_cli_wordpress_path $wp_cli_allow_root
+
 	# Generate `wp-config.php` file with debugging enabled
-	echo "define(\"WP_DEBUG\", true);" | ./wp-cli.phar core config --allow-root --dbname=wordpress --dbuser=root --dbhost=127.0.0.1 --path=wordpress --extra-php
+	echo "define(\"WP_DEBUG\", true);" | wp core config --dbname=wordpress --dbuser=root --dbhost=127.0.0.1 --extra-php $wp_cli_wordpress_path $wp_cli_allow_root
+
+	# Change default table prefix
+	sed -i "s/\$table_prefix = 'wp_';/\$table_prefix = 'mp_';/" ./wordpress/wp-config.php
+
 	# Install WordPress
-	./wp-cli.phar core install --allow-root --admin_name=admin --admin_password=admin --admin_email=admin@mailpoet.loc --url=http://mailpoet.loc:8080 --title=WordPress --path=wordpress
+    if [[ $version == "php7_multisite" ]]; then
+        # Configure multisite environment
+    	wp core multisite-install --admin_name=admin --admin_password=admin --admin_email=admin@mailpoet.loc --url=http://mailpoet.loc --title="WordPress MultiSite" $wp_cli_wordpress_path $wp_cli_allow_root
+    	cp ./.circleci/wordpress/.htaccess ./wordpress/
+
+    	# Add a second blog
+    	wp site create --slug=php7_multisite $wp_cli_wordpress_path $wp_cli_allow_root
+    	echo "WP_TEST_MULTISITE_SLUG=php7_multisite" >> .env
+    	echo "WP_TEST_PATH_MULTISITE=/home/circleci/mailpoet/wordpress" >> .env
+    	echo "HTTP_HOST=mailpoet.loc" >> .env
+
+    	# Add a third dummy blog
+        wp site create --slug=dummy_multisite $wp_cli_wordpress_path $wp_cli_allow_root
+    else
+    	wp core install --admin_name=admin --admin_password=admin --admin_email=admin@mailpoet.loc --url=http://mailpoet.loc --title="WordPress Single" $wp_cli_wordpress_path $wp_cli_allow_root
+    	echo "WP_TEST_PATH=/home/circleci/mailpoet/wordpress" >> .env
+    fi
+
 	# Softlink plugin to plugin path
 	ln -s ../../.. wordpress/wp-content/plugins/mailpoet
-	./wp-cli.phar plugin activate mailpoet --path=wordpress
+
-	# Create .env file with correct path to WP installation
+	# Activate plugin
-	# TODO: Remove this line after PR gets merged and CircleCI env variables change
+	if [[ $version == "php7_multisite" ]]; then
-	echo "WP_TEST_PATH=\"/home/circleci/mailpoet/wordpress\"" > .env
+	    wp plugin activate mailpoet --url=http://mailpoet.loc/php7_multisite/ $wp_cli_wordpress_path $wp_cli_allow_root
+	else
+	    wp plugin activate mailpoet $wp_cli_wordpress_path $wp_cli_allow_root
+	fi
 }

.circleci/wordpress/.htaccess

@@ -0,0 +1,12 @@
+RewriteEngine On
+RewriteBase /
+RewriteRule ^index\.php$ - [L]
+
+RewriteRule ^([_0-9a-zA-Z-]+/)?wp-admin$ $1wp-admin/ [R=301,L]
+
+RewriteCond %{REQUEST_FILENAME} -f [OR]
+RewriteCond %{REQUEST_FILENAME} -d
+RewriteRule ^ - [L]
+RewriteRule ^([_0-9a-zA-Z-]+/)?(wp-(content|admin|includes).*) $2 [L]
+RewriteRule ^([_0-9a-zA-Z-]+/)?(.*\.php)$ $2 [L]
+RewriteRule . index.php [L]

.env.sample

@@ -1,4 +1,6 @@
 WP_TEST_PATH="/var/www/wordpress"
+WP_TEST_PATH_MULTISITE="/var/www/wordpress"
+WP_TEST_MULTISITE_SLUG=""
 WP_TEST_ENABLE_NETWORK_TESTS="true"
 WP_TEST_IMPORT_MAILCHIMP_API=""
 WP_TEST_IMPORT_MAILCHIMP_LISTS="" // (separated with comma)
@@ -17,3 +19,4 @@ WP_TEST_MAILER_SMTP_PASSWORD=""
 WP_SVN_USERNAME=""
 WP_SVN_PASSWORD=""
 WP_TRANSIFEX_API_TOKEN=""
+HTTP_HOST="" // URL of your site (used for multisite env and equals to DOMAIN_CURRENT_SITE from wp-config.php)

.eslintrc.es5.json

@@ -9,85 +9,48 @@
   },
   "rules": {
     "import/no-amd": 0,
-
-
-
-
-
-    "space-before-function-paren": 0,
     "prefer-arrow-callback": 0,
-    "no-undef": 0,
-    "key-spacing": 0,
     "radix": 0,
     "no-alert": 0,
-    "block-scoped-var": 0,
     "guard-for-in": 0,
     "no-prototype-builtins": 0,
     "no-restricted-syntax": 0,
-    "newline-per-chained-call": 0,
     "no-useless-concat": 0,
-    "no-multi-spaces": 0,
     "no-nested-ternary": 0,
-    "semi-spacing": 0,
     "no-sequences": 0,
     "no-useless-return": 0,
     "array-callback-return": 0,
     "new-cap": 0,
     "no-continue": 0,
     "no-new": 0,
-    "space-unary-ops": 0,
     "no-redeclare": 0,
     "no-console": 0,
     "no-empty": 0,
-    "no-extra-semi": 0,
     "no-useless-escape": 0,
     "wrap-iife": 0,
-    "no-unused-expressions": 0,
-    "block-spacing": 0,
-    "computed-property-spacing": 0,
     "no-plusplus": 0,
-    "array-bracket-spacing": 0,
-    "lines-around-directive": 0,
-    "no-unreachable": 0,
     "default-case": 0,
     "no-lonely-if": 0,
-    "space-before-blocks": 0,
-    "no-unneeded-ternary": 0,
     "no-mixed-operators": 0,
     "eqeqeq": 0,
-    "space-in-parens": 0,
-    "semi": 0,
     "max-len": 0,
-    "no-trailing-spaces": 0,
     "global-require": 0,
     "no-throw-literal": 0,
     "no-extra-bind": 0,
-    "one-var-declaration-per-line": 0,
     "consistent-return": 0,
     "no-shadow": 0,
     "no-underscore-dangle": 0,
     "brace-style": 0,
     "no-else-return": 0,
     "no-use-before-define": 0,
-    "one-var": 0,
     "camelcase": 0,
-    "spaced-comment": 0,
-    "quotes": 0,
     "padded-blocks": 0,
-    "object-curly-spacing": 0,
     "strict": 0,
-    "vars-on-top": 0,
-    "no-var": 0,
     "space-infix-ops": 0,
-    "no-unused-vars": 0,
     "object-shorthand": 0,
     "new-parens": 0,
-    "keyword-spacing": 0,
     "eol-last": 0,
     "dot-notation": 0,
-    "linebreak-style": 0,
-    "indent": 0,
-    "quote-props": 0,
     "prefer-template": 0,
     "func-names": 0
   }

.eslintrc.es6.json

@@ -10,87 +10,48 @@
       "jsx": true
     }
   },
+  "settings": {
+    "import/resolver": "webpack"
+  },
   "rules": {
+    // Exceptions
     "comma-dangle": ["error", "always-multiline"],
-
+    "no-script-url": 0,
-
+    // Temporary
-
     "import/no-amd": 0,
-
     "react/no-multi-comp": 0,
     "react/sort-comp": 0,
     "react/jsx-max-props-per-line": 0,
     "react/prop-types": 0,
     "react/jsx-first-prop-new-line": 0,
-    "react/jsx-indent-props": 0,
     "react/no-is-mounted": 0,
     "react/jsx-no-target-blank": 0,
     "react/no-render-return-value": 0,
     "react/jsx-boolean-value": 0,
-    "react/jsx-indent": 0,
     "react/jsx-no-bind": 0,
     "react/no-array-index-key": 0,
     "react/self-closing-comp": 0,
-    "react/jsx-tag-spacing": 0,
     "react/jsx-closing-bracket-location": 0,
     "react/no-string-refs": 0,
-    "react/jsx-curly-spacing": 0,
     "react/no-did-mount-set-state": 0,
     "react/prefer-stateless-function": 0,
-
     "jsx-a11y/label-has-for": 0,
     "jsx-a11y/no-static-element-interactions": 0,
     "jsx-a11y/alt-text": 0,
-
     "func-names": 0,
     "object-shorthand": 0,
     "no-bitwise": 0,
     "arrow-body-style": 0,
     "prefer-template": 0,
-    "keyword-spacing": 0,
     "default-case": 0,
-    "quote-props": 0,
     "array-callback-return": 0,
     "consistent-return": 0,
-    "no-unreachable": 0,
-    "no-extra-semi": 0,
-    "import/no-unresolved": 0,
     "import/extensions": 0,
     "import/no-extraneous-dependencies": 0,
     "camelcase": 0,
-    "template-curly-spacing": 0,
-    "quotes": 0,
     "eqeqeq": 0,
-    "no-lonely-if": 0,
     "space-unary-ops": 0,
-    "block-scoped-var": 0,
-    "no-extra-bind": 0,
-    "no-multi-spaces": 0,
-    "class-methods-use-this": 0,
-    "key-spacing": 0,
-    "no-multiple-empty-lines": 0,
-    "space-in-parens": 0,
-    "no-case-declarations": 0,
-    "array-bracket-spacing": 0,
-    "newline-per-chained-call": 0,
-    "no-else-return": 0,
-    "max-len": 0,
-    "no-useless-concat": 0,
-    "no-unused-expressions": 0,
-    "no-sequences": 0,
-    "no-extra-boolean-cast": 0,
-    "dot-notation": 0,
-    "no-shadow": 0,
-    "one-var": 0,
-    "no-alert": 0,
-    "one-var-declaration-per-line": 0,
-    "no-script-url": 0,
-    "wrap-iife": 0,
-    "vars-on-top": 0,
     "space-infix-ops": 0,
-    "no-irregular-whitespace": 0,
+    "no-irregular-whitespace": 0
-    "padded-blocks": 0,
-    "no-underscore-dangle": 0,
-    "no-undef": 0
   }
 }

.eslintrc.tests.json

@@ -8,37 +8,9 @@
     "ecmaVersion": 6
   },
   "rules": {
-    "import/no-amd": 0,
+    // Exceptions
-
-
-
-    "no-undef": 0,
-    "one-var": 0,
-    "indent": 0,
-    "linebreak-style": 0,
-    "no-whitespace-before-property": 0,
-    "object-property-newline": 0,
-    "global-require": 0,
-    "semi": 0,
-    "keyword-spacing": 0,
-    "no-bitwise": 0,
-    "newline-per-chained-call": 0,
-    "no-spaced-func": 0,
-    "func-call-spacing": 0,
-    "max-len": 0,
-    "space-unary-ops": 0,
-    "quotes": 0,
-    "no-unused-vars": 0,
-    "no-unused-expressions": 0,
-    "no-underscore-dangle": 0,
-    "quote-props": 0,
-    "no-shadow": 0,
-    "padded-blocks": 0,
-    "vars-on-top": 0,
-    "space-before-blocks": 0,
-    "object-curly-spacing": 0,
-    "one-var-declaration-per-line": 0,
     "func-names": 0,
-    "space-before-function-paren": 0
+    // Temporary
+    "no-underscore-dangle": 0
   }
 }

.gitignore

@@ -2,6 +2,7 @@
 TODO
 composer.phar
 /vendor
+/vendor_backup
 tests/_output/*
 tests/_support/_generated/*
 node_modules

RoboFile.php

@@ -90,6 +90,7 @@ class RoboFile extends \Robo\Tasks {
 
     $css_files = array(
       'assets/css/src/admin.styl',
+      'assets/css/src/admin-global.styl',
       'assets/css/src/newsletter_editor/newsletter_editor.styl',
       'assets/css/src/public.styl',
       'assets/css/src/rtl.styl',
@@ -152,23 +153,34 @@ class RoboFile extends \Robo\Tasks {
     return $this->_exec('./tasks/transifex_init.sh');
   }
 
-  function testUnit($opts=['file' => null, 'xml' => false]) {
+  function testUnit($opts=['file' => null, 'xml' => false, 'multisite' => false]) {
     $this->loadEnv();
-    $this->_exec('vendor/bin/codecept build -c codeception.unit.yml');
 
-    $command = 'vendor/bin/codecept run unit -c codeception.unit.yml -f '.(($opts['file']) ? $opts['file'] : '');
+    $command = 'vendor/bin/codecept run unit -c codeception.unit.yml';
+
+    if($opts['multisite']) {
+      $command = 'MULTISITE=true ' . $command;
+    }
+
+    if($opts['file']) {
+      $command .= ' -f ' . $opts['file'];
+    }
 
     if($opts['xml']) {
       $command .= ' --xml';
     }
+
     return $this->_exec($command);
   }
 
+  function testMultisiteUnit($opts=['file' => null, 'xml' => false, 'multisite' => true]) {
+    return $this->testUnit($opts);
+  }
+
   function testCoverage($opts=['file' => null, 'xml' => false]) {
     $this->loadEnv();
-    $this->_exec('vendor/bin/codecept build -c codeception.unit.yml');
     $command = join(' ', array(
-      'vendor/bin/codecept run -c codeception.unit.yml ',
+      'vendor/bin/codecept run unit -c codeception.unit.yml ',
       (($opts['file']) ? $opts['file'] : ''),
       '--coverage',
       ($opts['xml']) ? '--coverage-xml' : '--coverage-html'
@@ -290,15 +302,16 @@ class RoboFile extends \Robo\Tasks {
   }
 
   function svnPublish($opts = ['force' => false]) {
-    $this->loadWPFunctions();
+    $this->loadEnv();
 
     $svn_dir = ".mp_svn";
-    $plugin_data = get_plugin_data('mailpoet.php', false, false);
+    $plugin_version = $this->getPluginVersion('mailpoet.php');
-    $plugin_version = $plugin_data['Version'];
+    $plugin_dist_name = 'mailpoet';
-    $plugin_dist_name = sanitize_title_with_dashes($plugin_data['Name']);
-    $plugin_dist_name = explode('-', $plugin_dist_name);
-    $plugin_dist_name = $plugin_dist_name[0];
     $plugin_dist_file = $plugin_dist_name . '.zip';
+
+    if(!$plugin_version) {
+      throw new \Exception('Could not parse plugin version, check the plugin header');
+    }
     $this->say('Publishing version: ' . $plugin_version);
 
     // Sanity checks
@@ -417,13 +430,9 @@ class RoboFile extends \Robo\Tasks {
     $dotenv->load();
   }
 
-  protected function loadWPFunctions() {
+  protected function getPluginVersion($file) {
-    $this->loadEnv();
+    $data = file_get_contents($file);
-    define('ABSPATH', getenv('WP_TEST_PATH') . '/');
+    preg_match('/^[ \t*]*Version:(.*)$/mi', $data, $m);
-    define('WPINC', 'wp-includes');
+    return !empty($m[1]) ? trim($m[1]) : false;
-    require_once(ABSPATH . WPINC . '/functions.php');
-    require_once(ABSPATH . WPINC . '/formatting.php');
-    require_once(ABSPATH . WPINC . '/plugin.php');
-    require_once(ABSPATH . 'wp-admin/includes/plugin.php');
   }
 }

assets/css/src/admin-global.styl

@@ -0,0 +1,15 @@
+@import 'nib'
+
+@require 'icons'
+
+/*
+Style for Members plugin
+*/
+
+.members-tab-title
+  .mailpoet-icon-logo
+    vertical-align: middle;
+    height: 20px;
+    width: 20px;
+    font-size: 20px;
+    margin-right: 3px;

assets/css/src/admin.styl

@@ -27,3 +27,5 @@
 @require 'pages_custom'
 
 @require 'mp2migrator'
+
+@require '../../../node_modules/react-confirm-alert/src/react-confirm-alert.css'

assets/css/src/icons.styl

@@ -0,0 +1,24 @@
+icon-font-path ?= "../fonts"
+
+@font-face
+  font-family 'mailpoet'
+  src url(icon-font-path + '/mailpoet.ttf?mx0b6n') format('truetype'), url(icon-font-path + '/mailpoet.woff?mx0b6n') format('woff'), url(icon-font-path + '/mailpoet.svg?mx0b6n#mailpoet') format('svg')
+  font-weight normal
+  font-style normal
+
+[class^="mailpoet-icon-"], [class*=" mailpoet-icon-"]
+  font-family 'mailpoet' !important
+  speak none
+  font-style normal
+  font-weight normal
+  font-variant normal
+  text-transform none
+  line-height 1
+
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing antialiased
+  -moz-osx-font-smoothing grayscale
+
+.mailpoet-icon-logo
+  &:before
+    content "\e900"

assets/css/src/newsletter_editor/components/resize.styl

@@ -48,3 +48,41 @@ $resize-handle-z-index = 2
 
   .mailpoet_resize_handle
     display: inline-block
+
+
+.mailpoet_image_resize_handle_container
+  position: absolute
+  bottom: 0
+  right: 0
+  width: 20px
+  height: 20px
+
+.mailpoet_image_resize_handle
+  position: relative
+  background: $resize-handle-background-color
+  border-radius(3px)
+  display: inline-block
+  width: 20px
+  height: 20px
+  cursor: nwse-resize
+  z-index: $resize-handle-z-index
+
+  .mailpoet_image_resize_handle_text,
+  .mailpoet_image_resize_handle_icon
+    pointer-events: none
+
+.mailpoet_image_resize_handle_icon
+  position: absolute
+  top: 0
+  right: 0
+
+  & > svg
+    width: 100%
+    height: 100%
+    fill: $resize-handle-font-color
+
+.mailpoet_block.mailpoet_image_resize_active > .mailpoet_block_highlight
+  border: 1px dashed $resize-active-color
+
+  .mailpoet_image_resize_handle
+    display: inline-block

assets/css/src/newsletter_editor/contentBlocks/base.styl

@@ -23,9 +23,11 @@ $block-text-line-height = $text-line-height
     border: 1px solid $transparent-color
 
   &:hover > .mailpoet_block_highlight
-  &.mailpoet_highlight > .mailpoet_block_highlight
     border: 1px dashed $block-hover-highlight-color
     
+  &.mailpoet_highlight > .mailpoet_block_highlight
+    border: 1px dashed $block-hover-highlight-color !important
+
 .mailpoet_content
   position: relative
   line-height: $block-text-line-height

assets/css/src/newsletter_editor/contentBlocks/image.styl

@@ -3,14 +3,19 @@
   img
     vertical-align: bottom
     max-width: 100%
-    width: auto
     height: auto
 
   &.mailpoet_full_image
     padding-left: 0
     padding-right: 0
+    margin: auto
     margin-bottom: 0
 
-  .mailpoet_content a:hover
+  .mailpoet_content 
+    margin: auto
+    max-width: 100%
+    min-width: 36px
+    
+    a:hover
       cursor: all-scroll
 

assets/css/src/newsletter_editor/mixins/transitions.styl

@@ -2,7 +2,7 @@ animation-slide-open-downwards($max-height = 2000px)
   transition: all 250ms cubic-bezier(0.420, 0.000, 0.580, 1.000) /* ease-in-out */
   max-height: $max-height
   opacity: 1
-  overflow-y: hidden
+  overflow-y: inherit
 
   &.mailpoet_closed
     max-height: 0px

assets/css/src/pages_custom.styl

@@ -33,3 +33,6 @@ Custom styles for MailPoet pages.
 
   p.top-space-triple
     margin-top: 3em
+
+  p.mailpoet-top-text
+    margin-right: 0

assets/css/src/settings.styl

@@ -62,6 +62,15 @@
     margin-bottom: 2em
     margin-top: 2em
 
+  .sending-free-plan-button
+    background: #FF5301
+    border-color: #e64c03
+    text-shadow: 0 -1px 1px #e64c03
+    box-shadow: 0 1px 0 #e64c03
+    margin: 10px 0
+    strong
+      text-transform: uppercase
+
   .mailpoet_success_item::before
     content '✔ '
 

assets/fonts/mailpoet.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
+<svg xmlns="http://www.w3.org/2000/svg">
+<metadata>Generated by IcoMoon</metadata>
+<defs>
+<font id="mailpoet" horiz-adv-x="1024">
+<font-face units-per-em="1024" ascent="960" descent="-64" />
+<missing-glyph horiz-adv-x="1024" />
+<glyph unicode="&#x20;" horiz-adv-x="0" d="" />
+<glyph unicode="&#xe900;" glyph-name="optimised" horiz-adv-x="972" d="M230.188 949.695c-21.982-3.361-41.376-14.741-48.618-28.188l-5.948-11.637 0.517-265.588c0.776-263.779 0.776-265.847 6.206-273.088 11.12-15.258 40.601-22.24 68.79-16.551 16.551 3.621 25.861 9.827 32.584 21.723 3.879 7.499 4.397 23.791 5.689 185.161l1.293 176.628 60.514-161.111c33.102-88.702 63.875-168.612 68.013-177.404 13.707-29.481 35.687-41.376 72.151-39.049 21.206 1.293 39.308 9.827 47.584 22.499 3.361 5.172 35.947 91.806 72.41 192.662s67.237 185.42 68.53 187.49c1.551 2.587 2.587-69.307 2.587-185.937v-190.335l5.948-11.379c8.533-16.809 20.172-21.982 49.652-21.982 27.929 0.259 39.825 4.914 49.911 20.172l6.982 10.603v530.401l-5.689 9.31c-12.671 20.43-50.17 31.033-91.806 25.601-34.394-4.138-53.79-16.292-66.72-41.118-2.587-5.172-35.947-101.89-73.961-214.902s-69.824-206.367-70.6-207.403c-1.034-1.034-32.326 86.115-69.824 193.954-37.757 107.581-71.892 205.075-76.030 216.453-10.086 26.118-25.601 42.929-45.514 48.877-17.326 5.172-46.807 6.982-64.652 4.138zM54.854 243.443c-20.172-3.879-43.963-19.136-51.204-33.619-6.206-11.379-4.914-32.843 2.587-47.841 23.533-46.807 71.634-86.892 126.717-104.736 17.068-5.689 23.274-5.948 120.252-7.499 97.235-1.551 102.926-1.81 116.373-7.241 29.739-11.896 51.204-35.687 61.807-68.013 3.621-11.12 13.964-21.206 25.861-25.344 4.914-1.551 18.361-2.844 29.739-2.844 16.809 0 23.533 1.293 32.584 5.689 11.896 6.206 13.964 9.31 26.895 38.791 11.896 27.671 39.567 49.652 70.858 56.117 8.533 1.81 47.067 2.844 100.856 2.844 99.563 0 113.786 2.068 151.801 20.689 49.652 24.567 96.978 77.84 101.373 113.529 3.104 26.118-17.326 49.394-51.204 58.187-25.601 6.465-41.635-0.517-54.825-24.050-11.12-19.655-29.998-38.015-47.841-46.29l-14.741-6.982-99.563-1.551c-90.77-1.293-101.373-2.068-120.252-6.982-27.154-7.499-58.444-23.016-80.427-40.084l-17.844-13.964-16.809 13.964c-20.689 16.809-51.462 32.584-78.875 39.825-19.136 5.172-28.705 5.948-120.252 7.241l-99.563 1.551-15.775 7.241c-18.102 8.533-32.584 21.982-48.36 45.773-16.034 24.567-26.895 29.998-50.17 25.601z" />
+</font></defs></svg>

assets/js/src/ajax.js

@@ -2,11 +2,10 @@ function requestFailed(errorMessage, xhr) {
   if (xhr.responseJSON) {
     return xhr.responseJSON;
   }
-  var message = errorMessage.replace("%d", xhr.status);
   return {
     errors: [
       {
-        message: message
+        message: errorMessage.replace('%d', xhr.status)
       }
     ]
   };
@@ -35,7 +34,7 @@ define('ajax', ['mailpoet', 'jquery', 'underscore'], function(mp, jQuery, _) {
 
       // set default url
       if (this.options.url === null) {
-          this.options.url = ajaxurl;
+        this.options.url = window.ajaxurl;
       }
 
       // set default token
@@ -54,11 +53,13 @@ define('ajax', ['mailpoet', 'jquery', 'underscore'], function(mp, jQuery, _) {
       };
     },
     request: function (method, options) {
+      var params;
+      var deferred;
       // set options
       this.init(options);
 
       // set request params
-        var params = this.getParams();
+      params = this.getParams();
 
       // remove null values from the data object
       if (_.isObject(params.data)) {
@@ -68,7 +69,7 @@ define('ajax', ['mailpoet', 'jquery', 'underscore'], function(mp, jQuery, _) {
       }
 
       // ajax request
-        var deferred = jQuery.post(
+      deferred = jQuery.post(
           this.options.url,
           params,
           null,

assets/js/src/analytics_event.js

@@ -18,7 +18,7 @@
 var eventsCache = [];
 
 function track(name, data) {
-  if (typeof window.mixpanel.track !== "function") {
+  if (typeof window.mixpanel.track !== 'function') {
     window.mixpanel.init(window.mixpanelTrackingId);
   }
   window.mixpanel.track(name, data);
@@ -38,20 +38,11 @@ function exportMixpanel(mp) {
 function trackCachedEvents() {
   eventsCache.map(function (event) {
     if (window.mailpoet_analytics_enabled || event.forced) {
-      window.mixpanel.track(event.name, event.data)
+      window.mixpanel.track(event.name, event.data);
     }
   });
 }
 
-function initializeMixpanelWhenLoaded() {
-  if (typeof window.mixpanel === "object") {
-    exportMixpanel(MailPoet);
-    trackCachedEvents();
-  } else {
-    setTimeout(initializeMixpanelWhenLoaded, 100);
-  }
-}
-
 function cacheEvent(forced, name, data) {
   eventsCache.push({
     name: name,
@@ -65,6 +56,15 @@ define(
   function (mp, _) {
     var MailPoet = mp;
 
+    function initializeMixpanelWhenLoaded() {
+      if (typeof window.mixpanel === 'object') {
+        exportMixpanel(MailPoet);
+        trackCachedEvents();
+      } else {
+        setTimeout(initializeMixpanelWhenLoaded, 100);
+      }
+    }
+
     MailPoet.trackEvent = _.partial(cacheEvent, false);
     MailPoet.forceTrackEvent = _.partial(cacheEvent, true);
 

assets/js/src/date.js

@@ -43,9 +43,10 @@ define('date',
       },
       format: function (date, opts) {
         var options = opts || {};
+        var momentDate;
         this.init(options);
 
-      var momentDate = Moment(date, this.convertFormat(options.parseFormat));
+        momentDate = Moment(date, this.convertFormat(options.parseFormat));
         if (options.offset === 0) momentDate = momentDate.utc();
         return momentDate.format(this.convertFormat(this.options.format));
       },
@@ -71,6 +72,11 @@ define('date',
         });
       },
       convertFormat: function (format) {
+        var replacements;
+        var convertedFormat;
+        var escapeToken;
+        var index;
+        var token;
         var format_mappings = {
           date: {
             d: 'DD',
@@ -140,12 +146,11 @@ define('date',
 
         if (!format || format.length <= 0) return format;
 
-      var replacements = format_mappings['date'];
+        replacements = format_mappings['date'];
+        convertedFormat = [];
+        escapeToken = false;
 
-      var convertedFormat = [];
+        for (index = 0, token = ''; format.charAt(index); index += 1) {
-      var escapeToken = false;
-
-      for(var index = 0, token = ''; format.charAt(index); index += 1){
           token = format.charAt(index);
           if (escapeToken === true) {
             convertedFormat.push('[' + token + ']');

assets/js/src/form/fields/date.jsx

@@ -143,28 +143,28 @@ define([
       switch (dateType) {
         case 'year_month_day':
           value = {
-            'year': this.state.year,
+            year: this.state.year,
-            'month': this.state.month,
+            month: this.state.month,
-            'day': this.state.day,
+            day: this.state.day,
           };
           break;
 
         case 'year_month':
           value = {
-            'year': this.state.year,
+            year: this.state.year,
-            'month': this.state.month,
+            month: this.state.month,
           };
           break;
 
         case 'month':
           value = {
-            'month': this.state.month,
+            month: this.state.month,
           };
           break;
 
         case 'year':
           value = {
-            'year': this.state.year,
+            year: this.state.year,
           };
           break;
       }
@@ -212,7 +212,6 @@ define([
               year={this.state.year}
               placeholder={this.props.field.year_placeholder}
             />);
-            break;
 
           case 'MM':
             return (<FormFieldDateMonth
@@ -224,7 +223,6 @@ define([
               monthNames={monthNames}
               placeholder={this.props.field.month_placeholder}
             />);
-            break;
 
           case 'DD':
             return (<FormFieldDateDay
@@ -235,7 +233,6 @@ define([
               day={this.state.day}
               placeholder={this.props.field.day_placeholder}
             />);
-            break;
         }
       });
 
@@ -245,7 +242,7 @@ define([
         </div>
       );
     }
-  };
+  }
 
   return FormFieldDate;
 });

assets/js/src/form/fields/field.jsx

@@ -7,6 +7,7 @@ define([
   'form/fields/checkbox.jsx',
   'form/fields/selection.jsx',
   'form/fields/date.jsx',
+  'jquery',
 ],
 (
   React,
@@ -16,7 +17,8 @@ define([
   FormFieldRadio,
   FormFieldCheckbox,
   FormFieldSelection,
-  FormFieldDate
+  FormFieldDate,
+  jQuery
 ) => {
   const FormField = React.createClass({
     renderField: function (data, inline = false) {
@@ -30,7 +32,7 @@ define([
       let field = false;
       let dataField = data.field;
 
-      if(data.field['field'] !== undefined) {
+      if (data.field.field !== undefined) {
         dataField = jQuery.merge(dataField, data.field.field);
       }
 
@@ -75,19 +77,18 @@ define([
             { description }
           </span>
         );
-      } else {
+      }
       return (
         <div key={'field-' + (data.index || 0)}>
           { field }
           { description }
         </div>
       );
-      }
     },
     render: function () {
       let field = false;
 
-      if(this.props.field['fields'] !== undefined) {
+      if (this.props.field.fields !== undefined) {
         field = this.props.field.fields.map((subfield, index) => {
           return this.renderField({
             index: index,

assets/js/src/form/fields/select.jsx

@@ -17,7 +17,7 @@ const FormFieldSelect = React.createClass({
       );
     }
 
-    if (this.props.field['filter'] !== undefined) {
+    if (this.props.field.filter !== undefined) {
       filter = this.props.field.filter;
     }
 
@@ -43,7 +43,6 @@ const FormFieldSelect = React.createClass({
 
     const options = keys.map(
       (value, index) => {
-
         if (filter !== false && filter(this.props.item, value) === false) {
           return;
         }

assets/js/src/form/fields/selection.jsx

@@ -60,13 +60,10 @@ define([
         templateResult: function (item) {
           if (item.element && item.element.selected) {
             return null;
-          } else {
+          } else if (item.title) {
-            if(item.title) {
             return item.title;
-            } else {
+          }
           return item.text;
-            }
-          }
         },
       });
 
@@ -86,8 +83,8 @@ define([
       this.setState({ select2: true });
     },
     getSelectedValues: function () {
-      if(this.props.field['selected'] !== undefined) {
+      if (this.props.field.selected !== undefined) {
-        return this.props.field['selected'](this.props.item);
+        return this.props.field.selected(this.props.item);
       } else if (this.props.item !== undefined && this.props.field.name !== undefined) {
         if (this.allowMultipleValues()) {
           if (Array.isArray(this.props.item[this.props.field.name])) {
@@ -106,7 +103,7 @@ define([
         let items = window['mailpoet_' + this.props.field.endpoint];
 
 
-        if(this.props.field['filter'] !== undefined) {
+        if (this.props.field.filter !== undefined) {
           items = items.filter(this.props.field.filter);
         }
 
@@ -116,6 +113,7 @@ define([
       }
     },
     handleChange: function (e) {
+      let value;
       if (this.props.onValueChange !== undefined) {
         if (this.props.field.multiple) {
           value = jQuery('#' + this.refs.select.id).val();
@@ -132,19 +130,19 @@ define([
       }
     },
     getLabel: function (item) {
-      if(this.props.field['getLabel'] !== undefined) {
+      if (this.props.field.getLabel !== undefined) {
         return this.props.field.getLabel(item, this.props.item);
       }
       return item.name;
     },
     getSearchLabel: function (item) {
-      if(this.props.field['getSearchLabel'] !== undefined) {
+      if (this.props.field.getSearchLabel !== undefined) {
         return this.props.field.getSearchLabel(item, this.props.item);
       }
       return null;
     },
     getValue: function (item) {
-      if(this.props.field['getValue'] !== undefined) {
+      if (this.props.field.getValue !== undefined) {
         return this.props.field.getValue(item, this.props.item);
       }
       return item.id;
@@ -153,11 +151,10 @@ define([
     // this function may be used to transform the placeholder value into
     // desired value.
     transformChangedValue: function (value) {
-      if(typeof this.props.field['transformChangedValue'] === 'function') {
+      if (typeof this.props.field.transformChangedValue === 'function') {
         return this.props.field.transformChangedValue.call(this, value);
-      } else {
-        return value;
       }
+      return value;
     },
     render: function () {
       const options = this.state.items.map((item, index) => {

assets/js/src/form/fields/text.jsx

@@ -11,7 +11,7 @@ const FormFieldText = React.createClass({
       <input
         type="text"
         disabled={
-          (this.props.field['disabled'] !== undefined)
+          (this.props.field.disabled !== undefined)
           ? this.props.field.disabled(this.props.item)
           : false
         }

assets/js/src/form/form.jsx

@@ -5,15 +5,16 @@ define(
     'classnames',
     'react-router',
     'form/fields/field.jsx',
+    'jquery',
   ],
   (
     React,
     MailPoet,
     classNames,
     Router,
-    FormField
+    FormField,
+    jQuery
   ) => {
-
     const Form = React.createClass({
       contextTypes: {
         router: React.PropTypes.object.isRequired,
@@ -42,7 +43,7 @@ define(
             this.loadItem(this.props.params.id);
           } else {
             this.setState({
-              item: jQuery('.mailpoet_form').serializeObject(),
+              item: jQuery('.mailpoet_form').mailpoetSerializeObject(),
             });
           }
         }
@@ -99,7 +100,7 @@ define(
         // only get values from displayed fields
         const item = {};
         this.props.fields.map((field) => {
-          if(field['fields'] !== undefined) {
+          if (field.fields !== undefined) {
             field.fields.map((subfield) => {
               item[subfield.name] = this.state.item[subfield.name];
             });
@@ -140,7 +141,7 @@ define(
       handleValueChange: function (e) {
         if (this.props.onChange) {
           return this.props.onChange(e);
-        } else {
+        }
         const item = this.state.item;
         const field = e.target.name;
 
@@ -150,7 +151,6 @@ define(
           item: item,
         });
         return true;
-        }
       },
       render: function () {
         let errors;
@@ -166,7 +166,7 @@ define(
 
         const formClasses = classNames(
           'mailpoet_form',
-          { 'mailpoet_form_loading': this.state.loading || this.props.loading }
+          { mailpoet_form_loading: this.state.loading || this.props.loading }
         );
 
         let beforeFormContent = false;

assets/js/src/form_editor/form_editor.js

@@ -4,8 +4,13 @@
  * company: Wysija
  * framework: prototype 1.7.2
  */
+
 'use strict';
 
+var Observable;
+var WysijaHistory;
+var WysijaForm;
+
 Event.cacheDelegated = {};
 Object.extend(document, (function () {
   var cache = Event.cacheDelegated;
@@ -24,23 +29,26 @@ Object.extend(document, (function() {
   function findWrapper(selector, eventName, handler) {
     var c = getWrappersForSelector(selector, eventName);
     return c.find(function (wrapper) {
-      return wrapper.handler === handler
+      return wrapper.handler === handler;
     });
   }
 
   function destroyWrapper(selector, eventName, handler) {
+    var wrapper;
     var c = getCacheForSelector(selector);
     if (!c[eventName]) return false;
-    var wrapper = findWrapper(selector, eventName, handler)
+    wrapper = findWrapper(selector, eventName, handler);
     c[eventName] = c[eventName].without(wrapper);
     return wrapper;
   }
 
   function createWrapper(selector, eventName, handler, context) {
-    var wrapper, c = getWrappersForSelector(selector, eventName);
+    var wrapper;
+    var element;
+    var c = getWrappersForSelector(selector, eventName);
     if (c.pluck('handler').include(handler)) return false;
     wrapper = function (event) {
-      var element = event.findElement(selector);
+      element = event.findElement(selector);
       if (element) handler.call(context || element, event, element);
     };
     wrapper.handler = handler;
@@ -48,13 +56,14 @@ Object.extend(document, (function() {
     return wrapper;
   }
   return {
-    delegate: function(selector, eventName, handler, context) {
+    delegate: function (selector, eventName) {
       var wrapper = createWrapper.apply(null, arguments);
       if (wrapper) document.observe(eventName, wrapper);
       return document;
     },
-    stopDelegating: function(selector, eventName, handler) {
+    stopDelegating: function (selector, eventName) {
       var length = arguments.length;
+      var wrapper;
       switch (length) {
         case 2:
           getWrappersForSelector(selector, eventName).each(function (wrapper) {
@@ -72,15 +81,15 @@ Object.extend(document, (function() {
           });
           break;
         default:
-          var wrapper = destroyWrapper.apply(null, arguments);
+          wrapper = destroyWrapper.apply(null, arguments);
           if (wrapper) document.stopObserving(eventName, wrapper);
       }
       return document;
     }
-  }
+  };
 })());
 
-var Observable = (function() {
+Observable = (function () {
   function getEventName(nameA, namespace) {
     var name = nameA.substring(2);
     if (namespace) name = namespace + ':' + name;
@@ -88,9 +97,9 @@ var Observable = (function() {
   }
 
   function getHandlers(klass) {
-    var proto = klass.prototype,
+    var proto = klass.prototype;
-      namespace = proto.namespace;
+    var namespace = proto.namespace;
-    return Object.keys(proto).grep(/^on/).inject($H(), function(handlers, name) {
+    return Object.keys(proto).grep(/^on/).inject(window.$H(), function (handlers, name) {
       if (name === 'onDomLoaded') return handlers;
       handlers.set(getEventName(name, namespace), getWrapper(proto[name], klass));
       return handlers;
@@ -100,20 +109,26 @@ var Observable = (function() {
   function getWrapper(handler, klass) {
     return function (event) {
       return handler.call(new klass(this), event, event.memo);
-    }
+    };
   }
 
   function onDomLoad(selector, klass) {
-    $$(selector).each(function(element) {
+    window.$$(selector).each(function (element) {
       new klass(element).onDomLoaded();
     });
   }
   return {
     observe: function (selector) {
+      var klass = this;
       if (!this.handlers) this.handlers = {};
       if (this.handlers[selector]) return;
-      var klass = this;
+      if (this.prototype.onDomLoaded) {
-      if(this.prototype.onDomLoaded) document.loaded ? onDomLoad(selector, klass) : document.observe('dom:loaded', onDomLoad.curry(selector, klass));
+        if (document.loaded) {
+          onDomLoad(selector, klass);
+        } else {
+          document.observe('dom:loaded', onDomLoad.curry(selector, klass));
+        }
+      }
       this.handlers[selector] = getHandlers(klass).each(function (handler) {
         document.delegate(selector, handler.key, handler.value);
       });
@@ -125,40 +140,41 @@ var Observable = (function() {
       });
       delete this.handlers[selector];
     }
-  }
+  };
 })();
 
 // override droppables
-Object.extend(Droppables, {
+Object.extend(window.Droppables, {
-  deactivate: Droppables.deactivate.wrap(function(proceed, drop, draggable) {
+  deactivate: window.Droppables.deactivate.wrap(function (proceed, drop, draggable) {
     if (drop.onLeave) drop.onLeave(draggable, drop.element);
     return proceed(drop);
   }),
-  activate: Droppables.activate.wrap(function(proceed, drop, draggable) {
+  activate: window.Droppables.activate.wrap(function (proceed, drop, draggable) {
     if (drop.onEnter) drop.onEnter(draggable, drop.element);
     return proceed(drop);
   }),
   show: function (point, element) {
+    var drop;
+    var affected = [];
     if (!this.drops.length) return;
-    var drop, affected = [];
     this.drops.each(function (drop) {
-      if(Droppables.isAffected(point, element, drop)) affected.push(drop);
+      if (window.Droppables.isAffected(point, element, drop)) affected.push(drop);
     });
-    if(affected.length > 0) drop = Droppables.findDeepestChild(affected);
+    if (affected.length > 0) drop = window.Droppables.findDeepestChild(affected);
     if (this.last_active && this.last_active !== drop) this.deactivate(this.last_active, element);
     if (drop) {
-      Position.within(drop.element, point[0], point[1]);
+      window.Position.within(drop.element, point[0], point[1]);
-      if(drop.onHover) drop.onHover(element, drop.element, Position.overlap(drop.overlap, drop.element));
+      if (drop.onHover) drop.onHover(element, drop.element, window.Position.overlap(drop.overlap, drop.element));
-      if(drop !== this.last_active) Droppables.activate(drop, element);
+      if (drop !== this.last_active) window.Droppables.activate(drop, element);
     }
   },
-  displayArea: function(draggable) {
+  displayArea: function () {
     if (!this.drops.length) return;
 
     // hide controls when displaying drop areas.
     WysijaForm.hideBlockControls();
 
-    this.drops.each(function(drop, iterator) {
+    this.drops.each(function (drop) {
       if (drop.element.hasClassName('block_placeholder')) {
         drop.element.addClassName('active');
       }
@@ -166,7 +182,7 @@ Object.extend(Droppables, {
   },
   hideArea: function () {
     if (!this.drops.length) return;
-    this.drops.each(function(drop, iterator) {
+    this.drops.each(function (drop) {
       if (drop.element.hasClassName('block_placeholder')) {
         drop.element.removeClassName('active');
       } else if (drop.element.hasClassName('image_placeholder')) {
@@ -188,7 +204,7 @@ Object.extend(Droppables, {
         - set a maximum number of items to be stored
 
 */
-var WysijaHistory = {
+WysijaHistory = {
   container: 'mailpoet_form_history',
   size: 30,
   enqueue: function (element) {
@@ -198,41 +214,41 @@ var WysijaHistory = {
     // check if the field is unique
     if (parseInt(clone.readAttribute('wysija_unique'), 10) === 1) {
       // check if the field is already in the queue
-      $(WysijaHistory.container).select('[wysija_name="' + clone.readAttribute('wysija_name') + '"]').invoke('remove');
+      window.$(WysijaHistory.container).select('[wysija_name="' + clone.readAttribute('wysija_name') + '"]').invoke('remove');
     }
 
     // check history size
-    if($(WysijaHistory.container).select('> div').length >= WysijaHistory.size) {
+    if (window.$(WysijaHistory.container).select('> div').length >= WysijaHistory.size) {
       // remove oldest element (last in the list)
-      $(WysijaHistory.container).select('> div').last().remove();
+      window.$(WysijaHistory.container).select('> div').last().remove();
     }
 
     // store block in history
-    $(WysijaHistory.container).insert({
+    window.$(WysijaHistory.container).insert({
       top: clone
     });
   },
   dequeue: function () {
     // pop last block off the history
-    var block = $(WysijaHistory.container).select('div').first();
+    var block = window.$(WysijaHistory.container).select('div').first();
 
     if (block !== undefined) {
       // insert block back into the editor
-      $(WysijaForm.options.body).insert({
+      window.$(WysijaForm.options.body).insert({
         top: block
       });
     }
   },
   clear: function () {
-    $(WysijaHistory.container).innerHTML = '';
+    window.$(WysijaHistory.container).innerHTML = '';
   },
   remove: function (field) {
-    $(WysijaHistory.container).select('[wysija_name="' + field + '"]').invoke('remove');
+    window.$(WysijaHistory.container).select('[wysija_name="' + field + '"]').invoke('remove');
   }
 };
 
 /* MailPoet Form */
-var WysijaForm = {
+WysijaForm = {
   version: '0.7',
   options: {
     container: 'mailpoet_form_container',
@@ -271,31 +287,32 @@ var WysijaForm = {
   },
   loading: function (is_loading) {
     if (is_loading) {
-      $(WysijaForm.options.editor).addClassName('loading');
+      window.$(WysijaForm.options.editor).addClassName('loading');
-      $(WysijaForm.options.toolbar).addClassName('loading');
+      window.$(WysijaForm.options.toolbar).addClassName('loading');
     } else {
-      $(WysijaForm.options.editor).removeClassName('loading');
+      window.$(WysijaForm.options.editor).removeClassName('loading');
-      $(WysijaForm.options.toolbar).removeClassName('loading');
+      window.$(WysijaForm.options.toolbar).removeClassName('loading');
     }
   },
   loadStatic: function (blocks) {
-    $A(blocks).each(function(block) {
+    window.$A(blocks).each(function (block) {
       // create block
-      WysijaForm.Block.create(block, $('block_placeholder'));
+      WysijaForm.Block.create(block, window.$('block_placeholder'));
     });
   },
   load: function (data) {
+    var settings_elements;
     if (data === undefined) return;
 
     // load body
     if (data.body !== undefined) {
-      $A(data.body).each(function(block) {
+      window.$A(data.body).each(function (block) {
         // create block
-        WysijaForm.Block.create(block, $('block_placeholder'));
+        WysijaForm.Block.create(block, window.$('block_placeholder'));
       });
 
       // load settings
-      var settings_elements = $('mailpoet_form_settings').getElements();
+      settings_elements = window.$('mailpoet_form_settings').getElements();
       settings_elements.each(function (setting) {
         // skip lists
         if (setting.name === 'segments') {
@@ -304,7 +321,7 @@ var WysijaForm = {
           // if the input value is equal to the one stored in the settings
           if (setting.value === data.settings[setting.name]) {
             // check selected value
-            $(setting).checked = true;
+            window.$(setting).checked = true;
           }
         } else if (data.settings[setting.name] !== undefined) {
           if (typeof data.settings[setting.name] === 'string') {
@@ -317,12 +334,12 @@ var WysijaForm = {
     }
   },
   save: function () {
-    var position = 1,
+    var position = 1;
-      data = {
+    var data = {
-        'name': $F('mailpoet_form_name'),
+      name: window.$F('mailpoet_form_name'),
-        'settings': $('mailpoet_form_settings').serialize(true),
+      settings: window.$('mailpoet_form_settings').serialize(true),
-        'body': [],
+      body: [],
-        'styles': (MailPoet.CodeEditor !== undefined) ? MailPoet.CodeEditor.getValue() : null
+      styles: (window.MailPoet.CodeEditor !== undefined) ? window.MailPoet.CodeEditor.getValue() : null
     };
     // body
     WysijaForm.getBlocks().each(function (b) {
@@ -394,33 +411,35 @@ var WysijaForm = {
     return data;
   },
   toggleWidgets: function () {
-    $$('a[wysija_unique="1"]').invoke('removeClassName', 'disabled');
+    var hasSegmentSelection;
+    window.$$('a[wysija_unique="1"]').invoke('removeClassName', 'disabled');
 
     // loop through each unique field already inserted in the editor and disable its toolbar equivalent
-    $$('#' + WysijaForm.options.editor + ' [wysija_unique="1"]').map(function(element) {
+    window.$$('#' + WysijaForm.options.editor + ' [wysija_unique="1"]').map(function (element) {
-      var field = $$('#' + WysijaForm.options.toolbar + ' [wysija_id="' + element.readAttribute('wysija_id') + '"]');
+      var field = window.$$('#' + WysijaForm.options.toolbar + ' [wysija_id="' + element.readAttribute('wysija_id') + '"]');
       if (field.length > 0) {
         field.first().addClassName('disabled');
       }
     });
 
-    var hasSegmentSelection = WysijaForm.hasSegmentSelection();
+    hasSegmentSelection = WysijaForm.hasSegmentSelection();
 
     if (hasSegmentSelection) {
-      $('mailpoet_form_segments').writeAttribute('required', false).disable();
+      window.$('mailpoet_form_segments').writeAttribute('required', false).disable();
-      $('mailpoet_settings_segment_selection').hide();
+      window.$('mailpoet_settings_segment_selection').hide();
     } else {
-      $('mailpoet_form_segments').writeAttribute('required', true).enable();
+      window.$('mailpoet_form_segments').writeAttribute('required', true).enable();
-      $('mailpoet_settings_segment_selection').show();
+      window.$('mailpoet_settings_segment_selection').show();
     }
   },
   hasSegmentSelection: function () {
-    return ($$('#' + WysijaForm.options.editor + ' [wysija_id="segments"]').length > 0);
+    return (window.$$('#' + WysijaForm.options.editor + ' [wysija_id="segments"]').length > 0);
   },
   isSegmentSelectionValid: function () {
-    var segment_selection = $$('#' + WysijaForm.options.editor + ' [wysija_id="segments"]')[0];
+    var segment_selection = window.$$('#' + WysijaForm.options.editor + ' [wysija_id="segments"]')[0];
+    var block;
     if (segment_selection !== undefined) {
-      var block = WysijaForm.get(segment_selection).block.getData();
+      block = WysijaForm.get(segment_selection).block.getData();
       return (
         (block.params.values !== undefined)
         &&
@@ -430,10 +449,12 @@ var WysijaForm = {
     return false;
   },
   setBlockPositions: function (event, target) {
+    var index = 1;
+    var block_placeholder;
+    var previous_placeholder;
     // release dragging lock
     WysijaForm.locks.dragging = false;
 
-    var index = 1;
     WysijaForm.getBlocks().each(function (container) {
       container.setPosition(index++);
       // remove z-index value to avoid issues when resizing images
@@ -446,7 +467,7 @@ var WysijaForm = {
 
     if (target !== undefined) {
       // get placeholders (previous placeholder matches the placeholder linked to the next block)
-      var block_placeholder = $(target.element.readAttribute('wysija_placeholder')),
+      block_placeholder = window.$(target.element.readAttribute('wysija_placeholder'));
       previous_placeholder = target.element.previous('.block_placeholder');
 
       if (block_placeholder !== null) {
@@ -468,64 +489,59 @@ var WysijaForm = {
     WysijaForm.scroll = document.viewport.getScrollOffsets();
   },
   hideSettings: function () {
-    $(WysijaForm.options.container).select('.wysija_settings').invoke('hide');
+    window.$(WysijaForm.options.container).select('.wysija_settings').invoke('hide');
   },
   setSettingsPosition: function () {
     // get viewport offsets and dimensions
-    var viewportHeight = document.viewport.getHeight(),
+    var viewportHeight = document.viewport.getHeight();
-      blockPadding = 5;
 
-    $(WysijaForm.options.container).select('.wysija_settings').each(function(element) {
+    window.$(WysijaForm.options.container).select('.wysija_settings').each(function (element) {
       // get parent dimensions and position
-      var parentDim = element.up('.mailpoet_form_block').getDimensions(),
+      var parentDim = element.up('.mailpoet_form_block').getDimensions();
-        parentPos = element.up('.mailpoet_form_block').cumulativeOffset(),
+      var parentPos = element.up('.mailpoet_form_block').cumulativeOffset();
-        is_visible = (parentPos.top <= (WysijaForm.scroll.top + viewportHeight)) ? true : false,
+      var is_visible = (parentPos.top <= (WysijaForm.scroll.top + viewportHeight));
-        buttonMargin = 5,
+      var buttonMargin = 5;
-        relativeTop = buttonMargin;
+      var relativeTop = buttonMargin;
 
       if (is_visible) {
-        // desired position is set to center of viewport
-        var absoluteTop = parseInt(WysijaForm.scroll.top + ((viewportHeight / 2) - (element.getHeight() / 2)), 10),
-          parentTop = parseInt(parentPos.top - blockPadding, 10),
-          parentBottom = parseInt(parentPos.top + parentDim.height - blockPadding, 10);
-
         // always center
         relativeTop = parseInt((parentDim.height / 2) - (element.getHeight() / 2), 10);
       }
       // set position for button
-      $(element).setStyle({
+      window.$(element).setStyle({
         left: parseInt((parentDim.width / 2) - (element.getWidth() / 2)) + 'px',
         top: relativeTop + 'px'
       });
     });
   },
   initToolbarPosition: function () {
-    if(WysijaForm.toolbar.top === null) WysijaForm.toolbar.top = parseInt($(WysijaForm.options.container).positionedOffset().top);
+    if (WysijaForm.toolbar.top === null) WysijaForm.toolbar.top = parseInt(window.$(WysijaForm.options.container).positionedOffset().top);
     if (WysijaForm.toolbar.y === null) WysijaForm.toolbar.y = parseInt(WysijaForm.toolbar.top);
 
-    if(isRtl) {
+    if (window.isRtl) {
       if (WysijaForm.toolbar.left === null) WysijaForm.toolbar.left = 0;
     } else {
-      if(WysijaForm.toolbar.left === null) WysijaForm.toolbar.left = parseInt($(WysijaForm.options.container).positionedOffset().left);
+      if (WysijaForm.toolbar.left === null) WysijaForm.toolbar.left = parseInt(window.$(WysijaForm.options.container).positionedOffset().left);
     }
-    if(WysijaForm.toolbar.x === null) WysijaForm.toolbar.x = parseInt(WysijaForm.toolbar.left + $(WysijaForm.options.container).getDimensions().width + 15);
+    if (WysijaForm.toolbar.x === null) WysijaForm.toolbar.x = parseInt(WysijaForm.toolbar.left + window.$(WysijaForm.options.container).getDimensions().width + 15);
 
   },
   setToolbarPosition: function () {
+    var position;
     WysijaForm.initToolbarPosition();
 
-    var position = {
+    position = {
       top: WysijaForm.toolbar.y + 'px',
       visibility: 'visible'
     };
 
-    if(isRtl) {
+    if (window.isRtl) {
       position.right = WysijaForm.toolbar.x + 'px';
     } else {
       position.left = WysijaForm.toolbar.x + 'px';
     }
 
-    $(WysijaForm.options.toolbar).setStyle(position);
+    window.$(WysijaForm.options.toolbar).setStyle(position);
   },
   updateToolbarPosition: function () {
     // init toolbar position (updates scroll and toolbar y)
@@ -537,31 +553,31 @@ var WysijaForm = {
     if (WysijaForm.scroll.top >= (WysijaForm.toolbar.top - 20)) {
       WysijaForm.toolbar.y = parseInt(20 + WysijaForm.scroll.top);
       // start effect
-      WysijaForm.toolbar.effect = new Effect.Move(WysijaForm.options.toolbar, {
+      WysijaForm.toolbar.effect = new window.Effect.Move(WysijaForm.options.toolbar, {
         x: WysijaForm.toolbar.x,
         y: WysijaForm.toolbar.y,
         mode: 'absolute',
         duration: 0.2
       });
     } else {
-      $(WysijaForm.options.toolbar).setStyle({
+      window.$(WysijaForm.options.toolbar).setStyle({
         left: WysijaForm.toolbar.x + 'px',
         top: WysijaForm.toolbar.top + 'px'
       });
     }
   },
   blockDropOptions: {
-    accept: $w('mailpoet_form_field'), // acceptable items (classes array)
+    accept: window.$w('mailpoet_form_field'), // acceptable items (classes array)
     onEnter: function (draggable, droppable) {
-      $(droppable).addClassName('hover');
+      window.$(droppable).addClassName('hover');
     },
     onLeave: function (draggable, droppable) {
-      $(droppable).removeClassName('hover');
+      window.$(droppable).removeClassName('hover');
     },
     onDrop: function (draggable, droppable) {
       // custom data for images
       droppable.fire('wjfe:item:drop', WysijaForm.getFieldData(draggable));
-      $(droppable).removeClassName('hover');
+      window.$(droppable).removeClassName('hover');
     }
   },
   hideControls: function () {
@@ -572,26 +588,28 @@ var WysijaForm = {
     }
   },
   hideTools: function () {
-    $$('.wysija_tools').invoke('hide');
+    window.$$('.wysija_tools').invoke('hide');
     WysijaForm.locks.showingTools = false;
   },
   instances: {},
   get: function (element, typ) {
     var type = typ;
+    var id;
+    var instance;
     if (type === undefined) type = 'block';
     // identify element
-    var id = element.identify();
+    id = element.identify();
-    var instance = WysijaForm.instances[id] || new WysijaForm[type.capitalize().camelize()](id);
+    instance = WysijaForm.instances[id] || new WysijaForm[type.capitalize().camelize()](id);
 
     WysijaForm.instances[id] = instance;
     return instance;
   },
   makeDroppable: function () {
-    Droppables.add('block_placeholder', WysijaForm.blockDropOptions);
+    window.Droppables.add('block_placeholder', WysijaForm.blockDropOptions);
   },
   makeSortable: function () {
-    var body = $(WysijaForm.options.body);
+    var body = window.$(WysijaForm.options.body);
-    Sortable.create(body, {
+    window.Sortable.create(body, {
       tag: 'div',
       only: 'mailpoet_form_block',
       scroll: window,
@@ -599,15 +617,15 @@ var WysijaForm = {
       constraint: 'vertical'
 
     });
-    Draggables.removeObserver(body);
+    window.Draggables.removeObserver(body);
-    Draggables.addObserver({
+    window.Draggables.addObserver({
       element: body,
       onStart: WysijaForm.startBlockPositions,
       onEnd: WysijaForm.setBlockPositions
     });
   },
   hideBlockControls: function () {
-    $$('.wysija_controls').invoke('hide');
+    window.$$('.wysija_controls').invoke('hide');
     this.getBlockElements().invoke('removeClassName', 'hover');
   },
   getBlocks: function () {
@@ -616,7 +634,7 @@ var WysijaForm = {
     });
   },
   getBlockElements: function () {
-    return $(WysijaForm.options.container).select('.mailpoet_form_block');
+    return window.$(WysijaForm.options.container).select('.mailpoet_form_block');
   },
   startBlockPositions: function (event, target) {
     if (target.element.hasClassName('mailpoet_form_block')) {
@@ -629,8 +647,8 @@ var WysijaForm = {
   },
   encodeURIComponent: function (str) {
     // check if it's a url and if so, prevent encoding of protocol
-    var regexp = new RegExp(/^http[s]?:\/\//),
+    var regexp = new RegExp(/^http[s]?:\/\//);
-      protocol = regexp.exec(str);
+    var protocol = regexp.exec(str);
 
     if (protocol === null) {
       // this is not a url so encode the whole thing
@@ -664,19 +682,19 @@ var WysijaForm = {
   }
 };
 
-WysijaForm.DraggableItem = Class.create({
+WysijaForm.DraggableItem = window.Class.create({
   initialize: function (element) {
-    this.elementType = $(element).readAttribute('wysija_type');
+    this.elementType = window.$(element).readAttribute('wysija_type');
-    this.element = $(element).down() || $(element);
+    this.element = window.$(element).down() || window.$(element);
     this.clone = this.cloneElement();
     this.insert();
   },
-  STYLES: new Template('position: absolute; top: #{top}px; left: #{left}px;'),
+  STYLES: new window.Template('position: absolute; top: #{top}px; left: #{left}px;'),
   cloneElement: function () {
-    var clone = this.element.clone(),
+    var clone = this.element.clone();
-      offset = this.element.cumulativeOffset(),
+    var offset = this.element.cumulativeOffset();
-      list = this.getList(),
+    var list = this.getList();
-      styles = this.STYLES.evaluate({
+    var styles = this.STYLES.evaluate({
       top: offset.top - list.scrollTop,
       left: offset.left - list.scrollLeft
     });
@@ -694,27 +712,27 @@ WysijaForm.DraggableItem = Class.create({
     return this.element.up('ul');
   },
   insert: function () {
-    $$("body")[0].insert(this.clone);
+    window.$$('body')[0].insert(this.clone);
   },
   onMousedown: function (event) {
-    var draggable = new Draggable(this.clone, {
+    var draggable = new window.Draggable(this.clone, {
       scroll: window,
       onStart: function () {
-        Droppables.displayArea(draggable);
+        window.Droppables.displayArea(draggable);
       },
       onEnd: function (drag) {
         drag.destroy();
         drag.element.remove();
-        Droppables.hideArea();
+        window.Droppables.hideArea();
       },
       starteffect: function (element) {
-        new Effect.Opacity(element, {
+        new window.Effect.Opacity(element, {
           duration: 0.2,
           from: element.getOpacity(),
           to: 0.7
         });
       },
-      endeffect: Prototype.emptyFunction
+      endeffect: window.Prototype.emptyFunction
     });
     draggable.initDrag(event);
     draggable.startDrag(event);
@@ -724,12 +742,12 @@ WysijaForm.DraggableItem = Class.create({
 Object.extend(WysijaForm.DraggableItem, Observable).observe('a[class="mailpoet_form_field"]');
 
 
-WysijaForm.Block = Class.create({
+WysijaForm.Block = window.Class.create({
   /* Invoked on load */
   initialize: function (element) {
     info('block -> init');
 
-    this.element = $(element);
+    this.element = window.$(element);
     this.block = new WysijaForm.Widget(this.element);
 
     // enable block placeholder
@@ -755,21 +773,23 @@ WysijaForm.Block = Class.create({
       this.element.addClassName('hover');
       try {
         this.getControls().show();
-      } catch(e) {;
+      } catch (e) {
       }
     }
   },
   makeBlockDroppable: function () {
+    var block_placeholder;
     if (this.isBlockDroppableEnabled() === false) {
-      var block_placeholder = this.getBlockDroppable();
+      block_placeholder = this.getBlockDroppable();
-      Droppables.add(block_placeholder.identify(), WysijaForm.blockDropOptions);
+      window.Droppables.add(block_placeholder.identify(), WysijaForm.blockDropOptions);
       block_placeholder.addClassName('enabled');
     }
   },
   removeBlockDroppable: function () {
+    var block_placeholder;
     if (this.isBlockDroppableEnabled()) {
-      var block_placeholder = this.getBlockDroppable();
+      block_placeholder = this.getBlockDroppable();
-      Droppables.remove(block_placeholder.identify());
+      window.Droppables.remove(block_placeholder.identify());
       block_placeholder.removeClassName('enabled');
     }
   },
@@ -785,7 +805,7 @@ WysijaForm.Block = Class.create({
   createBlockDroppable: function () {
     info('block -> createBlockDroppable');
     this.element.insert({
-      before: '<div class=\"block_placeholder\">' + $('block_placeholder').innerHTML + '</div>'
+      before: '<div class=\"block_placeholder\">' + window.$('block_placeholder').innerHTML + '</div>'
     });
     return this.element.previous('.block_placeholder');
   },
@@ -800,6 +820,7 @@ WysijaForm.Block = Class.create({
     return this.element.down('.wysija_controls');
   },
   setupControls: function () {
+    var block;
     // enable controls
     this.controls = this.getControls();
 
@@ -850,9 +871,8 @@ WysijaForm.Block = Class.create({
       if (this.settingsButton !== null) {
         this.settingsButton.observe('click', function (event) {
           // TODO: refactor
-          var block = $(event.target).up('.mailpoet_form_block') || null;
+          block = window.$(event.target).up('.mailpoet_form_block') || null;
           if (block !== null) {
-            var field = WysijaForm.getFieldData(block);
             this.editSettings();
           }
         }.bind(this));
@@ -866,7 +886,7 @@ WysijaForm.Block = Class.create({
     // save block in history
     WysijaHistory.enqueue(this.element);
 
-    Effect.Fade(this.element.identify(), {
+    window.Effect.Fade(this.element.identify(), {
       duration: 0.2,
       afterFinish: function (effect) {
         // remove placeholder
@@ -898,20 +918,25 @@ WysijaForm.Block = Class.create({
 /* Invoked on item dropped */
 WysijaForm.Block.create = function (createBlock, target) {
   var block = createBlock;
-  if($('form_template_' + block.type) === null) {
+  var body;
+  var block_template;
+  var template;
+  var output;
+  var settings_segments;
+  if (window.$('form_template_' + block.type) === null) {
     return false;
   }
 
-  var body = $(WysijaForm.options.body),
+  body = window.$(WysijaForm.options.body);
-    block_template = Handlebars.compile($('form_template_block').innerHTML),
+  block_template = window.Handlebars.compile(window.$('form_template_block').innerHTML);
-    template = Handlebars.compile($('form_template_' + block.type).innerHTML),
+  template = window.Handlebars.compile(window.$('form_template_' + block.type).innerHTML);
   output = '';
 
   if (block.type === 'segment') {
     if (block.params.values === undefined) {
-      var settings_segments = jQuery('#mailpoet_form_segments').val();
+      settings_segments = window.jQuery('#mailpoet_form_segments').val();
       if (settings_segments !== null && settings_segments.length > 0) {
-        block.params.values = mailpoet_segments.filter(function(segment) {
+        block.params.values = window.mailpoet_segments.filter(function (segment) {
           return (settings_segments.indexOf(segment.id) !== -1);
         });
       }
@@ -929,14 +954,13 @@ WysijaForm.Block.create = function(createBlock, target) {
   }
 
   // if the drop target was the bottom placeholder
-  var element = null;
   if (target.identify() === 'block_placeholder') {
     // insert block at the bottom
-    element = body.insert(output);
+    body.insert(output);
     // block = body.childElements().last();
   } else {
     // insert block before the drop target
-    element = target.insert({
+    target.insert({
       before: output
     });
     // block = target.previous('.mailpoet_form_block');
@@ -966,10 +990,10 @@ document.observe('wjfe:item:drop', function(event) {
 });
 
 /* Form Widget */
-WysijaForm.Widget = Class.create(WysijaForm.Block, {
+WysijaForm.Widget = window.Class.create(WysijaForm.Block, {
   initialize: function (element) {
     info('widget -> init');
-    this.element = $(element);
+    this.element = window.$(element);
     return this;
   },
   setup: function () {
@@ -977,8 +1001,8 @@ WysijaForm.Widget = Class.create(WysijaForm.Block, {
     this.setupControls();
   },
   save: function () {
-    info('widget -> save');
     var data = this.getData();
+    info('widget -> save');
 
     if (data.element !== undefined) {
       delete data.element;
@@ -987,8 +1011,8 @@ WysijaForm.Widget = Class.create(WysijaForm.Block, {
     return data;
   },
   setData: function (data) {
-    var current_data = this.getData(),
+    var current_data = this.getData();
-      params = $H(current_data.params).merge(data.params).toObject();
+    var params = window.$H(current_data.params).merge(data.params).toObject();
 
     // update type if it changed
     if (data.type !== undefined && data.type !== current_data.type) {
@@ -1013,26 +1037,30 @@ WysijaForm.Widget = Class.create(WysijaForm.Block, {
     this.removeBlock();
   },
   redraw: function (data) {
+    var options;
+    var block_template;
+    var template;
+    var params;
     // set parameters
     this.setData(data);
-    var options = this.getData();
+    options = this.getData();
     // redraw block
-    var block_template = Handlebars.compile($('form_template_block').innerHTML),
+    block_template = window.Handlebars.compile(window.$('form_template_block').innerHTML);
-      template = Handlebars.compile($('form_template_' + options.type).innerHTML),
+    template = window.Handlebars.compile(window.$('form_template_' + options.type).innerHTML);
-      data = $H(options).merge({
+    params = window.$H(options).merge({
       template: template(options)
     }).toObject();
-    this.element.replace(block_template(data));
+    this.element.replace(block_template(params));
 
     WysijaForm.init();
   },
   editSettings: function () {
-    MailPoet.Modal.popup({
+    window.MailPoet.Modal.popup({
-      title: MailPoet.I18n.t('editFieldSettings'),
+      title: window.MailPoet.I18n.t('editFieldSettings'),
-      template: jQuery('#form_template_field_settings').html(),
+      template: window.jQuery('#form_template_field_settings').html(),
       data: this.getData(),
       onSuccess: function () {
-        var data = jQuery('#form_field_settings').serializeObject();
+        var data = window.jQuery('#form_field_settings').mailpoetSerializeObject();
         this.redraw(data);
       }.bind(this)
     });
@@ -1054,8 +1082,8 @@ function info(value) {
       var noop = function () {};
       var methods = ['assert', 'clear', 'count', 'debug', 'dir', 'dirxml', 'error', 'exception', 'group', 'groupCollapsed', 'groupEnd', 'info', 'log', 'markTimeline', 'profile', 'profileEnd', 'markTimeline', 'table', 'time', 'timeEnd', 'timeStamp', 'trace', 'warn'];
       var length = methods.length;
-      window.console = {};
       var console = {};
+      window.console = {};
       while (length--) {
         console[methods[length]] = noop;
       }

assets/js/src/forms/forms.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { Router, Route, IndexRoute, useRouterHistory } from 'react-router';
 import { createHashHistory } from 'history';
-import FormList from 'forms/list.jsx';
+import FormList from './list.jsx';
 
 const history = useRouterHistory(createHashHistory)({ queryKey: false });
 

assets/js/src/forms/list.jsx

@@ -1,7 +1,8 @@
 import React from 'react';
-import Listing from 'listing/listing.jsx';
 import classNames from 'classnames';
 import MailPoet from 'mailpoet';
+import jQuery from 'jquery';
+import Listing from '../listing/listing.jsx';
 
 const columns = [
   {
@@ -128,7 +129,7 @@ const FormList = React.createClass({
       endpoint: 'forms',
       action: 'create',
     }).done((response) => {
-      window.location = mailpoet_form_edit_url + response.data.id;
+      window.location = window.mailpoet_form_edit_url + response.data.id;
     }).fail((response) => {
       if (response.errors.length > 0) {
         MailPoet.Notice.error(
@@ -145,7 +146,7 @@ const FormList = React.createClass({
       'has-row-actions'
     );
 
-    let segments = mailpoet_segments.filter((segment) => {
+    let segments = window.mailpoet_segments.filter((segment) => {
       return (jQuery.inArray(segment.id, form.segments) !== -1);
     }).map((segment) => {
       return segment.name;
@@ -190,7 +191,7 @@ const FormList = React.createClass({
         </h1>
 
         <Listing
-          limit={ mailpoet_listing_per_page }
+          limit={window.mailpoet_listing_per_page}
           location={this.props.location}
           params={this.props.params}
           messages={messages}

assets/js/src/handlebars_helpers.js

@@ -1,34 +1,36 @@
 define('handlebars_helpers', ['handlebars'], function (Handlebars) {
   // Handlebars helpers
   Handlebars.registerHelper('concat', function () {
-      var size = (arguments.length - 1),
+    var size = (arguments.length - 1);
-          output = '';
+    var output = '';
-      for(var i = 0; i < size; i++) {
+    var i;
+    for (i = 0; i < size; i++) {
       output += arguments[i];
-      };
+    }
     return output;
   });
 
-  Handlebars.registerHelper('number_format', function(value, block) {
+  Handlebars.registerHelper('number_format', function (value) {
     return Number(value).toLocaleString();
   });
   Handlebars.registerHelper('date_format', function (timestamp, block) {
+    var f;
     if (window.moment) {
       if (timestamp === undefined || isNaN(timestamp) || timestamp <= 0) {
         return;
       }
 
       // set date format
-          var f = block.hash.format || "MMM Do, YYYY";
+      f = block.hash.format || 'MMM Do, YYYY';
       // check if we passed a timestamp
       if (parseInt(timestamp, 10) == timestamp) {
-              return moment.unix(timestamp).format(f);
+        return window.moment.unix(timestamp).format(f);
       } else {
-              return moment.utc(timestamp).format(f);
+        return window.moment.utc(timestamp).format(f);
       }
     } else {
       return timestamp;
-    };
+    }
   });
 
   Handlebars.registerHelper('cycle', function (value, block) {
@@ -59,26 +61,25 @@ define('handlebars_helpers', ['handlebars'], function(Handlebars) {
       case '||':
         return (v1 || v2) ? options.fn(this) : options.inverse(this);
       case 'in':
-              var values = v2.split(',');
         return (v2.indexOf(v1) !== -1) ? options.fn(this) : options.inverse(this);
       default:
         return options.inverse(this);
     }
   });
 
-  Handlebars.registerHelper('nl2br', function(value, block) {
+  Handlebars.registerHelper('nl2br', function (value) {
-      return value.gsub("\n", "<br />");
+    return value.gsub('\n', '<br />');
   });
 
-  Handlebars.registerHelper('json_encode', function(value, block) {
+  Handlebars.registerHelper('json_encode', function (value) {
     return JSON.stringify(value);
   });
 
-  Handlebars.registerHelper('json_decode', function(value, block) {
+  Handlebars.registerHelper('json_decode', function (value) {
     return JSON.parse(value);
   });
-  Handlebars.registerHelper('url', function(value, block) {
+  Handlebars.registerHelper('url', function (value) {
-      var url = window.location.protocol + "//" + window.location.host + window.location.pathname;
+    var url = window.location.protocol + '//' + window.location.host + window.location.pathname;
 
     return url + value;
   });
@@ -90,16 +91,17 @@ define('handlebars_helpers', ['handlebars'], function(Handlebars) {
       return value;
     }
   });
-  Handlebars.registerHelper('lookup', function(obj, field, options) {
+  Handlebars.registerHelper('lookup', function (obj, field) {
     return obj && obj[field];
   });
 
 
-  Handlebars.registerHelper('rsa_key', function(value, block) {
+  Handlebars.registerHelper('rsa_key', function (value) {
+    var lines;
     // extract all lines into an array
     if (value === undefined) return '';
 
-      var lines = value.trim().split("\n");
+    lines = value.trim().split('\n');
 
       // remove header & footer
     lines.shift();
@@ -109,7 +111,7 @@ define('handlebars_helpers', ['handlebars'], function(Handlebars) {
     return lines.join('');
   });
 
-  Handlebars.registerHelper('trim', function(value, block) {
+  Handlebars.registerHelper('trim', function (value) {
     if (value === null || value === undefined) return '';
     return value.trim();
   });
@@ -126,10 +128,10 @@ define('handlebars_helpers', ['handlebars'], function(Handlebars) {
    */
   Handlebars.registerHelper('ellipsis', function (str, limit, append) {
     var strAppend = append;
+    var sanitized = str.replace(/(<([^>]+)>)/g, '');
     if (strAppend === undefined) {
       strAppend = '';
     }
-      var sanitized = str.replace(/(<([^>]+)>)/g, '');
     if (sanitized.length > limit) {
       return sanitized.substr(0, limit - strAppend.length) + strAppend;
     } else {
@@ -148,10 +150,10 @@ define('handlebars_helpers', ['handlebars'], function(Handlebars) {
       case 'Courier New': return new Handlebars.SafeString("'Courier New', Courier, 'Lucida Sans Typewriter', 'Lucida Typewriter', monospace");
       case 'Georgia': return new Handlebars.SafeString("Georgia, Times, 'Times New Roman', serif");
       case 'Lucida': return new Handlebars.SafeString("'Lucida Sans Unicode', 'Lucida Grande', sans-serif");
-      case 'Tahoma': return new Handlebars.SafeString("Tahoma, Verdana, Segoe, sans-serif");
+      case 'Tahoma': return new Handlebars.SafeString('Tahoma, Verdana, Segoe, sans-serif');
       case 'Times New Roman': return new Handlebars.SafeString("'Times New Roman', Times, Baskerville, Georgia, serif");
       case 'Trebuchet MS': return new Handlebars.SafeString("'Trebuchet MS', 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Tahoma, sans-serif");
-      case 'Verdana': return new Handlebars.SafeString("Verdana, Geneva, sans-serif");
+      case 'Verdana': return new Handlebars.SafeString('Verdana, Geneva, sans-serif');
       default: return font;
     }
   });

assets/js/src/help-tooltip.js

@@ -1,6 +1,7 @@
 define('helpTooltip', ['mailpoet', 'react', 'react-dom', 'help-tooltip.jsx'],
   function (mp, React, ReactDOM, TooltipComponent) {
     'use strict';
+
     var MailPoet = mp;
 
     MailPoet.helpTooltip = {

assets/js/src/help-tooltip.jsx

@@ -6,16 +6,16 @@ function Tooltip(props) {
   let tooltipId = props.tooltipId;
   let tooltip = props.tooltip;
   // tooltip ID must be unique, defaults to tooltip text
-  if(!props.tooltipId && typeof props.tooltip === "string") {
+  if (!props.tooltipId && typeof props.tooltip === 'string') {
     tooltipId = props.tooltip;
   }
 
-  if(typeof props.tooltip === "string") {
+  if (typeof props.tooltip === 'string') {
     tooltip = (<span
       style={{
-        pointerEvents: "all",
+        pointerEvents: 'all',
-        maxWidth: "400",
+        maxWidth: '400',
-        display: "inline-block",
+        display: 'inline-block',
       }}
     >
       {ReactHtmlParser(props.tooltip)}
@@ -26,7 +26,7 @@ function Tooltip(props) {
     <span className={props.className}>
       <span
         style={{
-          cursor: "pointer",
+          cursor: 'pointer',
         }}
         className="tooltip dashicons dashicons-editor-help"
         data-event="click"

assets/js/src/help/help.jsx

@@ -17,7 +17,6 @@ const App = React.createClass({
 const container = document.getElementById('help_container');
 
 if (container) {
-
   ReactDOM.render((
     <Router history={history}>
       <Route path="/" component={App}>
@@ -28,5 +27,4 @@ if(container) {
       </Route>
     </Router>
   ), container);
-
 }

assets/js/src/help/knowledge_base.jsx

@@ -4,7 +4,6 @@ import MailPoet from 'mailpoet';
 import Tabs from './tabs.jsx';
 
 function KnowledgeBase() {
-
   return (
     <div>
 
@@ -24,6 +23,6 @@ function KnowledgeBase() {
       <a target="_blank" href="http://beta.docs.mailpoet.com/" className="button button-primary">{MailPoet.I18n.t('knowledgeBaseButton')}</a>
     </div>
   );
-};
+}
 
 module.exports = KnowledgeBase;

assets/js/src/help/system_info.jsx

@@ -17,15 +17,14 @@ function printData(data) {
     return (<textarea
       readOnly={true}
       onFocus={handleFocus}
-      value={printableData.join("\n")}
+      value={printableData.join('\n')}
       style={{
-        width: "100%",
+        width: '100%',
-        height: "400px",
+        height: '400px',
       }}
     />);
-  } else {
-    return (<p>{MailPoet.I18n.t('systemInfoDataError')}</p>);
   }
+  return (<p>{MailPoet.I18n.t('systemInfoDataError')}</p>);
 }
 
 function KnowledgeBase() {
@@ -35,13 +34,13 @@ function KnowledgeBase() {
 
       <Tabs tab="systemInfo" />
 
-      <div className="mailpoet_notice notice inline notice-success" style={{ marginTop: "1em" }}>
+      <div className="mailpoet_notice notice inline notice-success" style={{ marginTop: '1em' }}>
         <p>{MailPoet.I18n.t('systemInfoIntro')}</p>
       </div>
 
       {printData(data)}
     </div>
   );
-};
+}
 
 module.exports = KnowledgeBase;

assets/js/src/help/tabs.jsx

@@ -17,7 +17,6 @@ const tabs = [
 ];
 
 function Tabs(props) {
-
   const tabLinks = tabs.map((tab, index) => {
     const tabClasses = classNames(
       'nav-tab',
@@ -38,9 +37,9 @@ function Tabs(props) {
       { tabLinks }
     </h2>
   );
-};
+}
 
 Tabs.propTypes = { tab: React.PropTypes.string };
-Tabs.defaultProps = { tab: "knowledgeBase" };
+Tabs.defaultProps = { tab: 'knowledgeBase' };
 
 module.exports = Tabs;

assets/js/src/helpscout.js

@@ -1,3 +0,0 @@
-define([], function() {
-  !function(e, o, n){window.HSCW=o, window.HS=n, n.beacon=n.beacon||{};var t=n.beacon;t.userConfig={}, t.readyQueue=[], t.config=function(e){this.userConfig=e}, t.ready=function(e){this.readyQueue.push(e)}, o.config={docs:{enabled:!0, baseUrl:"//mailpoet3.helpscoutdocs.com/"}, contact:{enabled:!0, formId:"aa21ca80-a4f5-11e6-91aa-0a5fecc78a4d"}};var r=e.getElementsByTagName("script")[0], c=e.createElement("script");c.type="text/javascript", c.async=!0, c.src="https://djtflbt20bdde.cloudfront.net/", r.parentNode.insertBefore(c, r)}(document, window.HSCW||{}, window.HS||{});
-});

assets/js/src/i18n.js

@@ -5,6 +5,7 @@ define('i18n',
     mp
 ) {
     'use strict';
+
     var MailPoet = mp;
 
     var translations = {};
@@ -14,7 +15,7 @@ define('i18n',
         translations[key] = value;
       },
       t: function (key) {
-      return translations[key] || 'TRANSLATION "%$1s" NOT FOUND'.replace("%$1s", key);
+        return translations[key] || 'TRANSLATION "%$1s" NOT FOUND'.replace('%$1s', key);
       },
       all: function () {
         return translations;

assets/js/src/iframe.js

@@ -1,5 +1,6 @@
 define('iframe', ['mailpoet'], function (mp) {
   'use strict';
+
   var MailPoet = mp;
   MailPoet.Iframe = {
     marginY: 20,
@@ -17,7 +18,7 @@ define('iframe', ['mailpoet'], function(mp) {
 
       iframe.style.height = (
         parseInt(i, 10) + this.marginY
-      ) + "px";
+      ) + 'px';
     }
   };
 

assets/js/src/jquery.serialize_object.js

@@ -23,21 +23,21 @@ define(
      * Dual licensed under the MIT and GPL licenses.
      * http://benalman.com/about/license/
      */
-    $.fn.serializeObject = function(coerce) {
+    $.fn.mailpoetSerializeObject = function (coerce) {
-      var obj = {},
+      var obj = {};
-        coerce_types = { 'true': !0, 'false': !1, 'null': null };
+      var coerce_types = { true: !0, false: !1, null: null };
 
       // Iterate over all name=value pairs.
       $.each(this.serializeArray(), function (j, v) {
-        var key = v.name,
+        var key = v.name;
-          val = v.value,
+        var val = v.value;
-          cur = obj,
+        var cur = obj;
-          i = 0,
+        var i = 0;
 
         // If key is more complex than 'foo', like 'a[]' or 'a[b][c]', split it
         // into its component parts.
-          keys = key.split( '][' ),
+        var keys = key.split('][');
-          keys_last = keys.length - 1;
+        var keys_last = keys.length - 1;
 
         // If the first keys part contains [ and the last ends with ], then []
         // are correctly balanced.

assets/js/src/listing/bulk_actions.jsx

@@ -21,7 +21,7 @@ define([
         const action = this.getSelectedAction();
 
         // action on select callback
-        if(action !== null && action['onSelect'] !== undefined) {
+        if (action !== null && action.onSelect !== undefined) {
           this.setState({
             extra: action.onSelect(e),
           });
@@ -41,14 +41,14 @@ define([
         ? this.props.selected_ids
         : [];
 
-      const data = (action['getData'] !== undefined)
+      const data = (action.getData !== undefined)
         ? action.getData()
         : {};
 
       data.action = this.state.action;
 
       let onSuccess = function () {};
-      if(action['onSuccess'] !== undefined) {
+      if (action.onSuccess !== undefined) {
         onSuccess = action.onSuccess;
       }
 
@@ -56,7 +56,7 @@ define([
         const promise = this.props.onBulkAction(selected_ids, data);
         if (promise !== false) {
           promise.then(onSuccess);
-        };
+        }
       }
 
       this.setState({
@@ -67,8 +67,8 @@ define([
     getSelectedAction: function () {
       const selected_action = this.refs.action.value;
       if (selected_action.length > 0) {
-        const action = this.props.bulk_actions.filter((action) => {
+        const action = this.props.bulk_actions.filter((act) => {
-          return (action.name === selected_action);
+          return (act.name === selected_action);
         });
 
         if (action.length > 0) {

assets/js/src/listing/groups.jsx

@@ -1,5 +1,4 @@
 define(['react', 'classnames'], (React, classNames) => {
-
   const ListingGroups = React.createClass({
     handleSelect: function (group) {
       return this.props.onSelectGroup(group);
@@ -11,7 +10,7 @@ define(['react', 'classnames'], (React, classNames) => {
         }
 
         const classes = classNames(
-            { 'current' : (group.name === this.props.group) }
+            { current: (group.name === this.props.group) }
           );
 
         return (

assets/js/src/listing/header.jsx

@@ -62,9 +62,9 @@ const ListingColumn = React.createClass({
     const classes = classNames(
       'manage-column',
       { 'column-primary': this.props.column.is_primary },
-      { 'sortable': this.props.column.sortable },
+      { sortable: this.props.column.sortable },
       this.props.column.sorted,
-      { 'sorted': (this.props.sort_by === this.props.column.name) }
+      { sorted: (this.props.sort_by === this.props.column.name) }
     );
     let label;
 

assets/js/src/listing/listing.jsx

@@ -186,7 +186,7 @@ const ListingItem = React.createClass({
     const row_classes = classNames({ 'is-expanded': this.state.expanded });
 
     return (
-      <tr className={ row_classes }>
+      <tr className={row_classes} data-automation-id={'listing_item_' + this.props.item.id}>
         { checkbox }
         { this.props.onRenderItem(this.props.item, actions) }
       </tr>
@@ -223,10 +223,10 @@ const ListingItems = React.createClass({
           </tr>
         </tbody>
       );
-    } else {
+    }
     const select_all_classes = classNames(
         'mailpoet_select_all',
-        { 'mailpoet_hidden': (
+      { mailpoet_hidden: (
             this.props.selection === false
             || (this.props.count <= this.props.limit)
           ),
@@ -276,14 +276,13 @@ const ListingItems = React.createClass({
               selection={this.props.selection}
               is_selectable={this.props.is_selectable}
               item_actions={this.props.item_actions}
-                group={ this.props.group }
+              group={this.props.group}
               key={`item-${renderItem.id}-${index}`}
               item={renderItem} />
           );
         })}
       </tbody>
     );
-    }
   },
 });
 
@@ -321,14 +320,13 @@ const Listing = React.createClass({
     if (params.splat) {
       params.splat.split('/').map((param) => {
         const [key, value] = this.getParam(param);
+        const filters = {};
         switch (key) {
           case 'filter':
-            const filters = {};
             value.split('&').map((pair) => {
               const [k, v] = pair.split('=');
               filters[k] = v;
-            }
+            });
-            );
 
             state.filter = filters;
             break;
@@ -414,9 +412,8 @@ const Listing = React.createClass({
     if (base_url !== null) {
       base_url = this.setBaseUrlParams(base_url);
       return `/${base_url}/${params}`;
-    } else {
-      return `/${ params }`;
     }
+    return `/${params}`;
   },
   setBaseUrlParams: function (base_url) {
     let ret = base_url;
@@ -514,7 +511,7 @@ const Listing = React.createClass({
     }).done((response) => {
       if (
         this.props.messages !== undefined
-        && this.props.messages['onRestore'] !== undefined
+        && this.props.messages.onRestore !== undefined
       ) {
         this.props.messages.onRestore(response);
       }
@@ -542,7 +539,7 @@ const Listing = React.createClass({
     }).done((response) => {
       if (
         this.props.messages !== undefined
-        && this.props.messages['onTrash'] !== undefined
+        && this.props.messages.onTrash !== undefined
       ) {
         this.props.messages.onTrash(response);
       }
@@ -570,7 +567,7 @@ const Listing = React.createClass({
     }).done((response) => {
       if (
         this.props.messages !== undefined
-        && this.props.messages['onDelete'] !== undefined
+        && this.props.messages.onDelete !== undefined
       ) {
         this.props.messages.onDelete(response);
       }
@@ -658,8 +655,8 @@ const Listing = React.createClass({
     });
   },
   handleSelectItem: function (id, is_checked) {
-    let selected_ids = this.state.selected_ids,
+    let selected_ids = this.state.selected_ids;
-      selection = false;
+    let selection = false;
 
     if (is_checked) {
       selected_ids = jQuery.merge(selected_ids, [id]);
@@ -783,7 +780,7 @@ const Listing = React.createClass({
       'widefat',
       'fixed',
       'striped',
-      { 'mailpoet_listing_loading': this.state.loading }
+      { mailpoet_listing_loading: this.state.loading }
     );
 
     // search

assets/js/src/listing/pages.jsx

@@ -7,7 +7,6 @@ define([
     classNames,
     MailPoet
   ) => {
-
   const ListingPages = React.createClass({
     getInitialState: function () {
       return {
@@ -59,7 +58,7 @@ define([
     render: function () {
       if (this.props.count === 0) {
         return false;
-      } else {
+      }
       let pagination = false;
       let firstPage = (
         <span aria-hidden="true" className="tablenav-pages-navspan">«</span>
@@ -146,7 +145,7 @@ define([
                 name="paged"
                 id="current-page-selector"
                 className="current-page" />
-                &nbsp;{MailPoet.I18n.t('pageOutOf')}&nbsp;
+              {MailPoet.I18n.t('pageOutOf')}&nbsp;
               <span className="total-pages">
                 {Math.ceil(this.props.count / this.props.limit).toLocaleString()}
               </span>
@@ -177,7 +176,6 @@ define([
           { pagination }
         </div>
       );
-      }
     },
   });
 

assets/js/src/listing/search.jsx

@@ -5,12 +5,11 @@ define([
     MailPoet,
     React
   ) => {
-
   const ListingSearch = React.createClass({
     handleSearch: function (e) {
       e.preventDefault();
       this.props.onSearch(
-        this.refs.search.value
+        this.refs.search.value.trim()
       );
     },
     componentWillReceiveProps: function (nextProps) {
@@ -19,7 +18,7 @@ define([
     render: function () {
       if (this.props.search === false) {
         return false;
-      } else {
+      }
       return (
         <form name="search" onSubmit={this.handleSearch}>
           <p className="search-box">
@@ -39,7 +38,6 @@ define([
           </p>
         </form>
       );
-      }
     },
   });
 

assets/js/src/modal.js

@@ -1,6 +1,7 @@
 define('modal', ['mailpoet', 'jquery'],
   function (mp, jQuery) {
     'use strict';
+
     var MailPoet = mp;
     /** *************************************************************************
     MailPoet Modal:
@@ -111,11 +112,11 @@ define('modal', ['mailpoet', 'jquery'],
         if (this.renderer === 'html') {
           return function () { return template; };
         } else {
-          return Handlebars.compile(template);
+          return window.Handlebars.compile(template);
         }
-        return false;
       },
       init: function (options) {
+        var modal;
         if (this.initialized === true) {
           this.close();
         }
@@ -134,7 +135,7 @@ define('modal', ['mailpoet', 'jquery'],
         if (this.options.type !== null) {
           // insert modal depending on its type
           if (this.options.type === 'popup') {
-            var modal = this.compileTemplate(
+            modal = this.compileTemplate(
               this.templates[this.options.type]
             );
             // create modal
@@ -178,7 +179,7 @@ define('modal', ['mailpoet', 'jquery'],
 
         return this;
       },
-      initOverlay: function(toggle) {
+      initOverlay: function () {
         if (jQuery('#mailpoet_modal_overlay').length === 0) {
             // insert overlay into the DOM
           jQuery('body').append(this.templates.overlay);
@@ -309,7 +310,6 @@ define('modal', ['mailpoet', 'jquery'],
       setDimensions: function () {
         switch (this.options.type) {
           case 'popup':
-              console.log(this.options)
               // set popup dimensions
             jQuery('#mailpoet_popup').css({
               width: this.options.width,
@@ -344,20 +344,21 @@ define('modal', ['mailpoet', 'jquery'],
         return this;
       },
       setPosition: function () {
+        var screenWidth;
+        var screenHeight;
+        var modalWidth;
+        var modalHeight;
         switch (this.options.type) {
           case 'popup':
-              var screenWidth = jQuery(window).width(),
+            screenWidth = jQuery(window).width();
-              screenHeight = jQuery(window).height(),
+            screenHeight = jQuery(window).height();
-              modalWidth = jQuery('.mailpoet_'+ this.options.type +'_wrapper').width(),
+            modalWidth = jQuery('.mailpoet_'+ this.options.type +'_wrapper').width();
             modalHeight = jQuery('.mailpoet_'+ this.options.type +'_wrapper').height();
 
-              var top = Math.max(48, parseInt((screenHeight / 2) - (modalHeight / 2))),
-              left = Math.max(0, parseInt((screenWidth / 2) - (modalWidth / 2)));
-
             // set position of popup depending on screen dimensions.
             jQuery('#mailpoet_popup').css({
-                top: top,
+              top: Math.max(48, parseInt((screenHeight / 2) - (modalHeight / 2))),
-                left: left
+              left: Math.max(0, parseInt((screenWidth / 2) - (modalWidth / 2)))
             });
             break;
           case 'panel':
@@ -385,9 +386,6 @@ define('modal', ['mailpoet', 'jquery'],
           // remember the previously focused element
         this.prevFocus = jQuery(':focus');
 
-          // add a flag on the body so that we can prevent scrolling
-          jQuery('body').addClass('mailpoet_modal_opened');
-
           // show popup
         jQuery('#mailpoet_' + this.options.type).show();
 
@@ -437,7 +435,7 @@ define('modal', ['mailpoet', 'jquery'],
             .removeClass('mailpoet_modal_highlight');
         return this;
       },
-        hideModal: function(callback) {
+      hideModal: function () {
           // set modal as closed
         this.opened = false;
 
@@ -447,12 +445,9 @@ define('modal', ['mailpoet', 'jquery'],
            // remove class on highlighted elements
         this.highlightOff();
 
-          // remove class from body to let it be scrollable
-          jQuery('body').removeClass('mailpoet_modal_opened');
-
         return this;
       },
-        showOverlay: function(force) {
+      showOverlay: function () {
         jQuery('#mailpoet_modal_overlay').show();
         return this;
       },

assets/js/src/mp2migrator.js

@@ -1,5 +1,6 @@
 define('mp2migrator', ['mailpoet', 'jquery'], function (mp, jQuery) {
   'use strict';
+
   var MailPoet = mp;
   MailPoet.MP2Migrator = {
 
@@ -11,7 +12,7 @@ define('mp2migrator', ['mailpoet', 'jquery'], function(mp, jQuery) {
       clearTimeout(MailPoet.MP2Migrator.displayLogs_timeout);
       clearTimeout(MailPoet.MP2Migrator.updateProgressbar_timeout);
       clearTimeout(MailPoet.MP2Migrator.update_wordpress_info_timeout);
-      setTimeout(MailPoet.MP2Migrator.updateDisplay, 1000)
+      setTimeout(MailPoet.MP2Migrator.updateDisplay, 1000);
     },
 
     stopLogger: function () {
@@ -25,11 +26,11 @@ define('mp2migrator', ['mailpoet', 'jquery'], function(mp, jQuery) {
 
     displayLogs: function () {
       jQuery.ajax({
-        url: mailpoet_mp2_migrator.log_file_url,
+        url: window.mailpoet_mp2_migrator.log_file_url,
         cache: false
       }).done(function (result) {
-        jQuery("#logger").html('');
+        jQuery('#logger').html('');
-        result.split("\n").forEach(function (resultRow) {
+        result.split('\n').forEach(function (resultRow) {
           var row = resultRow;
           if (row.substr(0, 7) === '[ERROR]' || row.substr(0, 9) === '[WARNING]' || row === MailPoet.I18n.t('import_stopped_by_user')) {
             row = '<span class="error_msg">' + row + '</span>'; // Mark the errors in red
@@ -39,10 +40,10 @@ define('mp2migrator', ['mailpoet', 'jquery'], function(mp, jQuery) {
             jQuery('#import-actions').hide();
             jQuery('#upgrade-completed').show();
           }
-          jQuery("#logger").append(row + "<br />\n");
+          jQuery('#logger').append(row + '<br />\n');
 
         });
-        jQuery("#logger").append('<span class="error_msg">' + MailPoet.MP2Migrator.fatal_error + '</span>' + "<br />\n");
+        jQuery('#logger').append('<span class="error_msg">' + MailPoet.MP2Migrator.fatal_error + '</span>' + '<br />\n');
       }).always(function () {
         if (MailPoet.MP2Migrator.is_logging) {
           MailPoet.MP2Migrator.displayLogs_timeout = setTimeout(MailPoet.MP2Migrator.displayLogs, 1000);
@@ -52,7 +53,7 @@ define('mp2migrator', ['mailpoet', 'jquery'], function(mp, jQuery) {
 
     updateProgressbar: function () {
       jQuery.ajax({
-        url: mailpoet_mp2_migrator.progress_url,
+        url: window.mailpoet_mp2_migrator.progress_url,
         cache: false,
         dataType: 'json'
       }).always(function (result) {

assets/js/src/newsletter_editor/App.js

@@ -1,12 +1,8 @@
 define([
   'backbone',
   'backbone.marionette',
-    'backbone.radio',
+  'backbone.radio'
-    'jquery',
+], function (Backbone, Marionette, BackboneRadio) {
-    'underscore',
-    'handlebars',
-    'handlebars_helpers'
-  ], function(Backbone, Marionette, BackboneRadio, jQuery, _, Handlebars) {
   var Radio = BackboneRadio;
 
   var AppView = Marionette.View.extend({

assets/js/src/newsletter_editor/behaviors/ColorPickerBehavior.js

@@ -8,19 +8,39 @@ define([
   'newsletter_editor/behaviors/BehaviorsLookup',
   'mailpoet',
   'spectrum'
-  ], function(Marionette, BehaviorsLookup, MailPoet, Spectrum) {
+], function (Marionette, BehaviorsLookup, MailPoet) {
   var BL = BehaviorsLookup;
 
   BL.ColorPickerBehavior = Marionette.Behavior.extend({
     onRender: function () {
-      this.view.$('.mailpoet_color').spectrum({
+      var that = this;
+      var preferredFormat = 'hex6';
+      this.view.$('.mailpoet_color').each(function () {
+        var $input = that.view.$(this);
+        var updateColorInput = function (color) {
+          if (color && color.getAlpha() > 0) {
+            $input.val(color.toString(preferredFormat));
+          } else {
+            $input.val('');
+          }
+          $input.trigger('change');
+        };
+        $input.spectrum({
           clickoutFiresChange: true,
           showInput: true,
           showInitial: true,
-        preferredFormat: "hex6",
+          showPalette: true,
+          showSelectionPalette: true,
+          palette: [],
+          localStorageKey: 'newsletter_editor.spectrum.palette',
+          preferredFormat: preferredFormat,
           allowEmpty: true,
           chooseText: MailPoet.I18n.t('selectColor'),
-        cancelText: MailPoet.I18n.t('cancelColorSelection')
+          cancelText: MailPoet.I18n.t('cancelColorSelection'),
+          change: updateColorInput,
+          move: updateColorInput,
+          hide: updateColorInput
+        });
       });
     }
   });

assets/js/src/newsletter_editor/behaviors/ContainerDropZoneBehavior.js

@@ -1,3 +1,4 @@
+
 /**
  * ContainerDropZoneBehavior
  *
@@ -24,11 +25,11 @@ define([
         this.addDropZone();
       }
     },
-    addDropZone: function(_event) {
+    addDropZone: function () {
-      var that = this,
+      var that = this;
-        view = this.view,
+      var view = this.view;
-        domElement = that.$el.get(0),
+      var domElement = that.$el.get(0);
-        acceptableElementSelector;
+      var acceptableElementSelector;
 
       // TODO: Extract this limitation code to be controlled from containers
       if (this.view.renderOptions.depth === 0) {
@@ -46,11 +47,11 @@ define([
       interact(domElement).dropzone({
         accept: acceptableElementSelector,
         overlap: 'pointer', // Mouse pointer denotes location of a droppable
-        ondragenter: function(event) {
+        ondragenter: function () {
           // 1. Visually mark block as active for dropping
           view.$el.addClass('mailpoet_drop_active');
         },
-        ondragleave: function(event) {
+        ondragleave: function () {
           // 1. Remove visual markings of active dropping container
           // 2. Remove visual markings of drop position visualization
           that.cleanup();
@@ -67,15 +68,21 @@ define([
             view.$el,
             view.model.get('orientation'),
             view.model.get('blocks').length
-            ),
+          );
-            element = view.$el,
+          var element = view.$el;
-            markerWidth = '',
+          var markerWidth = '';
-            markerHeight = '',
+          var markerHeight = '';
-            containerOffset = element.offset(),
+          var containerOffset = element.offset();
-            viewCollection = that.getCollection(),
+          var viewCollection = that.getCollection();
-            marker, targetModel, targetView, targetElement,
+          var marker;
-            topOffset, leftOffset, isLastBlockInsertion,
+          var targetModel;
-            $targetBlock, margin;
+          var targetView;
+          var targetElement;
+          var topOffset;
+          var leftOffset;
+          var isLastBlockInsertion;
+          var $targetBlock;
+          var margin;
 
           if (dropPosition === undefined) return;
 
@@ -182,10 +189,14 @@ define([
             view.$el,
             view.model.get('orientation'),
             view.model.get('blocks').length
-            ),
+          );
-            droppableModel = event.draggable.getDropModel(),
+          var droppableModel = event.draggable.getDropModel();
-            viewCollection = that.getCollection(),
+          var viewCollection = that.getCollection();
-            droppedView, droppedModel, index, tempCollection, tempCollection2;
+          var droppedView;
+          var index;
+          var tempCollection;
+          var tempCollection2;
+          var tempModel;
 
           if (dropPosition === undefined) return;
 
@@ -195,7 +206,8 @@ define([
 
             if (view.model.get('orientation') === 'horizontal' && droppableModel.get('type') !== 'container') {
               // Regular blocks always need to be inserted into columns - vertical containers
-              tempCollection = new (EditorApplication.getBlockTypeModel('container'))({
+
+              tempCollection = new (window.EditorApplication.getBlockTypeModel('container'))({
                 orientation: 'vertical'
               });
               tempCollection.get('blocks').add(droppableModel);
@@ -208,9 +220,9 @@ define([
           } else {
             // Special insertion by replacing target block with collection
             // and inserting dropModel into that
-            var tempModel = viewCollection.at(dropPosition.index);
+            tempModel = viewCollection.at(dropPosition.index);
 
-            tempCollection = new (EditorApplication.getBlockTypeModel('container'))({
+            tempCollection = new (window.EditorApplication.getBlockTypeModel('container'))({
               orientation: (view.model.get('orientation') === 'vertical') ? 'horizontal' : 'vertical'
             });
 
@@ -218,19 +230,19 @@ define([
 
             if (tempCollection.get('orientation') === 'horizontal') {
               if (dropPosition.position === 'before') {
-                tempCollection2 = new (EditorApplication.getBlockTypeModel('container'))({
+                tempCollection2 = new (window.EditorApplication.getBlockTypeModel('container'))({
                   orientation: 'vertical'
                 });
                 tempCollection2.get('blocks').add(droppableModel);
                 tempCollection.get('blocks').add(tempCollection2);
               }
-              tempCollection2 = new (EditorApplication.getBlockTypeModel('container'))({
+              tempCollection2 = new (window.EditorApplication.getBlockTypeModel('container'))({
                 orientation: 'vertical'
               });
               tempCollection2.get('blocks').add(tempModel);
               tempCollection.get('blocks').add(tempCollection2);
               if (dropPosition.position === 'after') {
-                tempCollection2 = new (EditorApplication.getBlockTypeModel('container'))({
+                tempCollection2 = new (window.EditorApplication.getBlockTypeModel('container'))({
                   orientation: 'vertical'
                 });
                 tempCollection2.get('blocks').add(droppableModel);
@@ -270,28 +282,32 @@ define([
       this.view.$('.mailpoet_drop_marker').remove();
     },
     getDropPosition: function (eventX, eventY, is_unsafe) {
-      var SPECIAL_AREA_INSERTION_WIDTH = 0.00, // Disable special insertion. Default: 0.3
+      var SPECIAL_AREA_INSERTION_WIDTH = 0.00; // Disable special insertion. Default: 0.3
 
-        element = this.view.$el,
+      var element = this.view.$el;
-        orientation = this.view.model.get('orientation'),
+      var orientation = this.view.model.get('orientation');
 
-        elementOffset = element.offset(),
+      var elementOffset = element.offset();
-        elementPageX = elementOffset.left,
+      var elementPageX = elementOffset.left;
-        elementPageY = elementOffset.top,
+      var elementPageY = elementOffset.top;
-        elementWidth = element.outerWidth(true),
+      var elementWidth = element.outerWidth(true);
-        elementHeight = element.outerHeight(true),
+      var elementHeight = element.outerHeight(true);
 
-        relativeX = eventX - elementPageX,
+      var relativeX = eventX - elementPageX;
-        relativeY = eventY - elementPageY,
+      var relativeY = eventY - elementPageY;
 
-        relativeOffset, elementLength,
+      var relativeOffset;
+      var elementLength;
 
-        canAcceptNormalInsertion = this._canAcceptNormalInsertion(),
+      var canAcceptNormalInsertion = this._canAcceptNormalInsertion();
-        canAcceptSpecialInsertion = this._canAcceptSpecialInsertion(),
+      var canAcceptSpecialInsertion = this._canAcceptSpecialInsertion();
 
-        insertionType, index, position, indexAndPosition;
+      var insertionType;
+      var index;
+      var position;
+      var indexAndPosition;
 
-      unsafe = !!is_unsafe;
+      var unsafe = !!is_unsafe;
 
       if (this.getCollection().length === 0) {
         return {
@@ -357,12 +373,14 @@ define([
       // target element if event happens on the second half of the element.
       // Halves depend on orientation.
 
-      var index = this._computeCellIndex(eventX, eventY),
+      var index = this._computeCellIndex(eventX, eventY);
       // TODO: Handle case when there are no children, container is empty
-        targetView = this.getChildren().findByModel(this.getCollection().at(index)),
+      var targetView = this.getChildren().findByModel(this.getCollection().at(index));
-        orientation = this.view.model.get('orientation'),
+      var orientation = this.view.model.get('orientation');
-        element = targetView.$el,
+      var element = targetView.$el;
-        eventOffset, closeOffset, elementDimension;
+      var eventOffset;
+      var closeOffset;
+      var elementDimension;
 
       if (orientation === 'vertical') {
         eventOffset = eventY;
@@ -392,11 +410,12 @@ define([
       return this._computeCellIndex(eventX, eventY);
     },
     _computeCellIndex: function (eventX, eventY) {
-      var orientation = this.view.model.get('orientation'),
+      var orientation = this.view.model.get('orientation');
-        eventOffset = (orientation === 'vertical') ? eventY : eventX,
+      var eventOffset = (orientation === 'vertical') ? eventY : eventX;
-        resultView = this.getChildren().find(function(view) {
+      var resultView = this.getChildren().find(function (view) {
-          var element = view.$el,
+        var element = view.$el;
-            closeOffset, farOffset;
+        var closeOffset;
+        var farOffset;
 
         if (orientation === 'vertical') {
           closeOffset = element.offset().top;
@@ -415,16 +434,16 @@ define([
       return index;
     },
     _canAcceptNormalInsertion: function () {
-      var orientation = this.view.model.get('orientation'),
+      var orientation = this.view.model.get('orientation');
-        depth = this.view.renderOptions.depth,
+      var depth = this.view.renderOptions.depth;
-        childCount = this.getChildren().length;
+      var childCount = this.getChildren().length;
       // Note that depth is zero indexed. Root container has depth=0
       return orientation === 'vertical' || (orientation === 'horizontal' && depth === 1 && childCount < this.options.columnLimit);
     },
     _canAcceptSpecialInsertion: function () {
-      var orientation = this.view.model.get('orientation'),
+      var orientation = this.view.model.get('orientation');
-        depth = this.view.renderOptions.depth,
+      var depth = this.view.renderOptions.depth;
-        childCount = this.getChildren().length;
+      var childCount = this.getChildren().length;
       return depth === 0 || (depth === 1 && orientation === 'horizontal' && childCount <= this.options.columnLimit);
     },
     getCollectionView: function () {

assets/js/src/newsletter_editor/behaviors/DraggableBehavior.js

@@ -28,12 +28,12 @@ define([
         throw "Missing 'drop' function for DraggableBehavior";
       },
 
-      onDrop: function(model, view) {},
+      onDrop: function () {},
-      testAttachToInstance: function(model, view) { return true; }
+      testAttachToInstance: function () { return true; }
     },
     onRender: function () {
-      var that = this,
+      var that = this;
-          interactable;
+      var interactable;
 
       // Give instances more control over whether Draggable should be applied
       if (!this.options.testAttachToInstance(this.view.model, this.view)) return;
@@ -49,16 +49,19 @@ define([
 
         onstart: function (startEvent) {
           var event = startEvent;
+          var centerXOffset;
+          var centerYOffset;
+          var tempClone;
+          var clone;
+          var $clone;
 
           if (that.options.cloneOriginal === true) {
             // Use substitution instead of a clone
-            var tempClone = (_.isFunction(that.options.onDragSubstituteBy)) ? that.options.onDragSubstituteBy(that) : undefined,
+            tempClone = (_.isFunction(that.options.onDragSubstituteBy)) ? that.options.onDragSubstituteBy(that) : undefined;
             // Or use a clone
-              clone = tempClone ? tempClone : event.target.cloneNode(true),
+            clone = tempClone || event.target.cloneNode(true);
-
+            jQuery(event.target);
-              $original = jQuery(event.target),
+            $clone = jQuery(clone);
-              $clone = jQuery(clone),
-              centerXOffset, centerYOffset, parentOffset;
 
             $clone.addClass('mailpoet_droppable_active');
             $clone.css('position', 'absolute');
@@ -85,10 +88,10 @@ define([
         },
         // call this function on every dragmove event
         onmove: function (event) {
-          var target = event.target,
+          var target = event.target;
           // keep the dragged position in the data-x/data-y attributes
-            x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
+          var x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx;
-            y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
+          var y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
 
           // translate the element
           target.style.transform = 'translate(' + x + 'px, ' + y + 'px)';

assets/js/src/newsletter_editor/behaviors/HighlightContainerBehavior.js

@@ -0,0 +1,26 @@
+/**
+ * Highlight Container Behavior
+ *
+ * Highlights a container block when hovering over its tools
+ */
+define([
+  'backbone.marionette',
+  'newsletter_editor/behaviors/BehaviorsLookup'
+], function (Marionette, BehaviorsLookup) {
+  var BL = BehaviorsLookup;
+
+  BL.HighlightContainerBehavior = Marionette.Behavior.extend({
+    events: {
+      'mouseenter @ui.tools': 'enableHighlight',
+      'mouseleave @ui.tools': 'disableHighlight'
+    },
+    enableHighlight: function () {
+      this.$el.addClass('mailpoet_highlight');
+    },
+    disableHighlight: function () {
+      if (!this.view._isBeingEdited) {
+        this.$el.removeClass('mailpoet_highlight');
+      }
+    }
+  });
+});

assets/js/src/newsletter_editor/behaviors/HighlightEditingBehavior.js

@@ -11,13 +11,15 @@ define([
 
   BL.HighlightEditingBehavior = Marionette.Behavior.extend({
     modelEvents: {
-      'startEditing': 'enableHighlight',
+      startEditing: 'enableHighlight',
-      'stopEditing': 'disableHighlight'
+      stopEditing: 'disableHighlight'
     },
     enableHighlight: function () {
+      this.view._isBeingEdited = true;
       this.$el.addClass('mailpoet_highlight');
     },
     disableHighlight: function () {
+      this.view._isBeingEdited = false;
       this.$el.removeClass('mailpoet_highlight');
     }
   });

assets/js/src/newsletter_editor/behaviors/ResizableBehavior.js

@@ -14,13 +14,20 @@ define([
     defaults: {
       elementSelector: null,
       resizeHandleSelector: true, // true will use edges of the element itself
-      transformationFunction: function(y) { return y; },
+      transformationFunction: function (y) { return y; }, // for blocks that use the default onResize function
       minLength: 0,
-      modelField: 'styles.block.height'
+      maxLength: Infinity,
+      modelField: 'styles.block.height',
+      onResize: function (event) {
+        var currentLength = parseFloat(this.view.model.get(this.options.modelField));
+        var newLength = currentLength + this.options.transformationFunction(event.dy);
+        newLength = Math.min(this.options.maxLength, Math.max(this.options.minLength, newLength));
+        this.view.model.set(this.options.modelField, newLength + 'px');
+      }
     },
     events: {
-      "mouseenter": 'showResizeHandle',
+      mouseenter: 'showResizeHandle',
-      "mouseleave": 'hideResizeHandle'
+      mouseleave: 'hideResizeHandle'
     },
     onRender: function () {
       this.attachResize();
@@ -30,8 +37,8 @@ define([
       }
     },
     attachResize: function () {
-      var domElement = (this.options.elementSelector === null) ? this.view.$el.get(0) : this.view.$(this.options.elementSelector).get(0),
+      var domElement = (this.options.elementSelector === null) ? this.view.$el.get(0) : this.view.$(this.options.elementSelector).get(0);
-          that = this;
+      var that = this;
       interact(domElement).resizable({
         // axis: 'y',
         edges: {
@@ -40,17 +47,15 @@ define([
           right: false,
           bottom: (typeof this.options.resizeHandleSelector === 'string') ? this.view.$(this.options.resizeHandleSelector).get(0) : this.options.resizeHandleSelector
         }
-      }).on('resizestart', function(event) {
+      })
+      .on('resizestart', function () {
         that.isBeingResized = true;
         that.$el.addClass('mailpoet_resize_active');
       }).on('resizemove', function (event) {
-        var currentLength = parseFloat(that.view.model.get(that.options.modelField)),
+        var onResize = that.options.onResize.bind(that);
-          newLength = currentLength + that.options.transformationFunction(event.dy);
+        return onResize(event);
-
+      })
-        if (newLength < that.options.minLength) newLength = that.options.minLength;
+      .on('resizeend', function () {
-
-        that.view.model.set(that.options.modelField, newLength + 'px');
-      }).on('resizeend', function(event) {
         that.isBeingResized = null;
         that.$el.removeClass('mailpoet_resize_active');
       });

assets/js/src/newsletter_editor/behaviors/SortableBehavior.js

@@ -16,7 +16,7 @@ define([
 
       if (_.isFunction(this.$el.sortable)) {
         this.$el.sortable({
-          cursor: "move",
+          cursor: 'move',
           start: function (event, ui) {
             ui.item.data('previousIndex', ui.item.index());
           },
@@ -24,9 +24,9 @@ define([
             ui.item.removeData('previousIndex');
           },
           update: function (event, ui) {
-            var previousIndex = ui.item.data('previousIndex'),
+            var previousIndex = ui.item.data('previousIndex');
-              newIndex = ui.item.index(),
+            var newIndex = ui.item.index();
-              model = collection.at(previousIndex);
+            var model = collection.at(previousIndex);
 
             // Replicate DOM changes. Move target model to a new position
             // within the collection

assets/js/src/newsletter_editor/behaviors/TextEditorBehavior.js

@@ -13,12 +13,12 @@ define([
   BL.TextEditorBehavior = Marionette.Behavior.extend({
     defaults: {
       selector: '.mailpoet_content',
-      toolbar1: "bold italic link unlink forecolor mailpoet_shortcodes",
+      toolbar1: 'bold italic link unlink forecolor mailpoet_shortcodes',
-      toolbar2: "",
+      toolbar2: '',
-      validElements: "p[class|style],span[class|style],a[href|class|title|target|style],strong[class|style],em[class|style],strike,br",
+      validElements: 'p[class|style],span[class|style],a[href|class|title|target|style],strong[class|style],em[class|style],strike,br',
-      invalidElements: "script",
+      invalidElements: 'script',
       blockFormats: 'Paragraph=p',
-      plugins: "link textcolor colorpicker mailpoet_shortcodes",
+      plugins: 'link textcolor colorpicker mailpoet_shortcodes',
       configurationFilter: function (originalConfig) { return originalConfig; }
     },
     onDomRefresh: function () {
@@ -34,13 +34,15 @@ define([
         toolbar1: this.options.toolbar1,
         toolbar2: this.options.toolbar2,
 
+        browser_spellcheck: true,
+
         valid_elements: this.options.validElements,
         invalid_elements: this.options.invalidElements,
         block_formats: this.options.blockFormats,
         relative_urls: false,
         remove_script_host: false,
         convert_urls: true,
-        urlconverter_callback: function(url, node, on_save, name) {
+        urlconverter_callback: function (url) {
           if (url.match(/\[.+\]/g)) {
             // Do not convert URLs with shortcodes
             return url;
@@ -55,7 +57,7 @@ define([
         plugins: this.options.plugins,
 
         setup: function (editor) {
-          editor.on('change', function(e) {
+          editor.on('change', function () {
             that.view.triggerMethod('text:editor:change', editor.getContent());
           });
 
@@ -63,18 +65,18 @@ define([
             editor.focus();
             if (that._isActivationClick) {
               editor.selection.setRng(
-                  tinymce.dom.RangeUtils.getCaretRangeFromPoint(e.clientX, e.clientY, editor.getDoc())
+                  window.tinymce.dom.RangeUtils.getCaretRangeFromPoint(e.clientX, e.clientY, editor.getDoc())
               );
               that._isActivationClick = false;
             }
           });
 
-          editor.on('focus', function(e) {
+          editor.on('focus', function () {
             that.view.triggerMethod('text:editor:focus');
             that._isActivationClick = true;
           });
 
-          editor.on('blur', function(e) {
+          editor.on('blur', function () {
             that.view.triggerMethod('text:editor:blur');
           });
         }

assets/js/src/newsletter_editor/blocks/automatedLatestContent.js

@@ -28,10 +28,10 @@ define([
   jQuery
   ) {
 
-  "use strict";
+  'use strict';
 
-  var Module = {},
+  var Module = {};
-      base = BaseBlock;
+  var base = BaseBlock;
 
   Module.ALCSupervisor = SuperModel.extend({
     initialize: function () {
@@ -43,12 +43,13 @@ define([
       );
     },
     refresh: function () {
+      var blocks;
       var models = App.findModels(function (model) {
         return model.get('type') === 'automatedLatestContent';
       }) || [];
 
       if (models.length === 0) return;
-      var blocks = _.map(models, function(model) {
+      blocks = _.map(models, function (model) {
         return model.toJSON();
       });
 
@@ -60,8 +61,8 @@ define([
       _.each(
         _.zip(models, renderedBlocks),
         function (args) {
-          var model = args[0],
+          var model = args[0];
-              contents = args[1];
+          var contents = args[1];
           model.trigger('refreshPosts', contents);
         }
       );
@@ -128,14 +129,14 @@ define([
   });
 
   Module.AutomatedLatestContentBlockView = base.BlockView.extend({
-    className: "mailpoet_block mailpoet_automated_latest_content_block mailpoet_droppable_block",
+    className: 'mailpoet_block mailpoet_automated_latest_content_block mailpoet_droppable_block',
     initialize: function () {
       function replaceButtonStylesHandler(data) {
-        this.model.set({"readMoreButton": data});
+        this.model.set({ readMoreButton: data });
       }
-      App.getChannel().on("replaceAllButtonStyles", replaceButtonStylesHandler.bind(this));
+      App.getChannel().on('replaceAllButtonStyles', replaceButtonStylesHandler.bind(this));
     },
-    getTemplate: function() { return templates.automatedLatestContentBlock; },
+    getTemplate: function () { return window.templates.automatedLatestContentBlock; },
     regions: {
       toolsRegion: '.mailpoet_tools',
       postsRegion: '.mailpoet_automated_latest_content_block_posts'
@@ -143,15 +144,15 @@ define([
     modelEvents: _.extend(
       _.omit(base.BlockView.prototype.modelEvents, 'change'),
       {
-        'postsChanged': 'render'
+        postsChanged: 'render'
       }),
     events: _.extend(base.BlockView.prototype.events, {
       'click .mailpoet_automated_latest_content_block_overlay': 'showSettings'
     }),
     onDragSubstituteBy: function () { return Module.AutomatedLatestContentWidgetView; },
     onRender: function () {
-      var ContainerView = App.getBlockTypeView('container'),
+      var ContainerView = App.getBlockTypeView('container');
-        renderOptions = {
+      var renderOptions = {
         disableTextEditor: true,
         disableDragAndDrop: true,
         emptyContainerMessage: MailPoet.I18n.t('noPostsToDisplay')
@@ -168,31 +169,31 @@ define([
 
   // Sidebar view container
   Module.AutomatedLatestContentBlockSettingsView = base.BlockSettingsView.extend({
-    getTemplate: function() { return templates.automatedLatestContentBlockSettings; },
+    getTemplate: function () { return window.templates.automatedLatestContentBlockSettings; },
     events: function () {
       return {
-        "click .mailpoet_automated_latest_content_hide_display_options": 'toggleDisplayOptions',
+        'click .mailpoet_automated_latest_content_hide_display_options': 'toggleDisplayOptions',
-        "click .mailpoet_automated_latest_content_show_display_options": 'toggleDisplayOptions',
+        'click .mailpoet_automated_latest_content_show_display_options': 'toggleDisplayOptions',
-        "click .mailpoet_automated_latest_content_select_button": 'showButtonSettings',
+        'click .mailpoet_automated_latest_content_select_button': 'showButtonSettings',
-        "click .mailpoet_automated_latest_content_select_divider": 'showDividerSettings',
+        'click .mailpoet_automated_latest_content_select_divider': 'showDividerSettings',
-        "change .mailpoet_automated_latest_content_read_more_type": 'changeReadMoreType',
+        'change .mailpoet_automated_latest_content_read_more_type': 'changeReadMoreType',
-        "change .mailpoet_automated_latest_content_display_type": 'changeDisplayType',
+        'change .mailpoet_automated_latest_content_display_type': 'changeDisplayType',
-        "change .mailpoet_automated_latest_content_title_format": 'changeTitleFormat',
+        'change .mailpoet_automated_latest_content_title_format': 'changeTitleFormat',
-        "change .mailpoet_automated_latest_content_title_as_links": _.partial(this.changeBoolField, 'titleIsLink'),
+        'change .mailpoet_automated_latest_content_title_as_links': _.partial(this.changeBoolField, 'titleIsLink'),
-        "change .mailpoet_automated_latest_content_show_divider": _.partial(this.changeBoolField, 'showDivider'),
+        'change .mailpoet_automated_latest_content_show_divider': _.partial(this.changeBoolField, 'showDivider'),
-        "input .mailpoet_automated_latest_content_show_amount": _.partial(this.changeField, "amount"),
+        'input .mailpoet_automated_latest_content_show_amount': _.partial(this.changeField, 'amount'),
-        "change .mailpoet_automated_latest_content_content_type": _.partial(this.changeField, "contentType"),
+        'change .mailpoet_automated_latest_content_content_type': _.partial(this.changeField, 'contentType'),
-        "change .mailpoet_automated_latest_content_include_or_exclude": _.partial(this.changeField, "inclusionType"),
+        'change .mailpoet_automated_latest_content_include_or_exclude': _.partial(this.changeField, 'inclusionType'),
-        "change .mailpoet_automated_latest_content_title_alignment": _.partial(this.changeField, "titleAlignment"),
+        'change .mailpoet_automated_latest_content_title_alignment': _.partial(this.changeField, 'titleAlignment'),
-        "change .mailpoet_automated_latest_content_image_full_width": _.partial(this.changeBoolField, "imageFullWidth"),
+        'change .mailpoet_automated_latest_content_image_full_width': _.partial(this.changeBoolField, 'imageFullWidth'),
-        "change .mailpoet_automated_latest_content_featured_image_position": _.partial(this.changeField, "featuredImagePosition"),
+        'change .mailpoet_automated_latest_content_featured_image_position': _.partial(this.changeField, 'featuredImagePosition'),
-        "change .mailpoet_automated_latest_content_show_author": _.partial(this.changeField, "showAuthor"),
+        'change .mailpoet_automated_latest_content_show_author': _.partial(this.changeField, 'showAuthor'),
-        "input .mailpoet_automated_latest_content_author_preceded_by": _.partial(this.changeField, "authorPrecededBy"),
+        'input .mailpoet_automated_latest_content_author_preceded_by': _.partial(this.changeField, 'authorPrecededBy'),
-        "change .mailpoet_automated_latest_content_show_categories": _.partial(this.changeField, "showCategories"),
+        'change .mailpoet_automated_latest_content_show_categories': _.partial(this.changeField, 'showCategories'),
-        "input .mailpoet_automated_latest_content_categories": _.partial(this.changeField, "categoriesPrecededBy"),
+        'input .mailpoet_automated_latest_content_categories': _.partial(this.changeField, 'categoriesPrecededBy'),
-        "input .mailpoet_automated_latest_content_read_more_text": _.partial(this.changeField, "readMoreText"),
+        'input .mailpoet_automated_latest_content_read_more_text': _.partial(this.changeField, 'readMoreText'),
-        "change .mailpoet_automated_latest_content_sort_by": _.partial(this.changeField, "sortBy"),
+        'change .mailpoet_automated_latest_content_sort_by': _.partial(this.changeField, 'sortBy'),
-        "click .mailpoet_done_editing": "close"
+        'click .mailpoet_done_editing': 'close'
       };
     },
     onRender: function () {
@@ -213,12 +214,13 @@ define([
           },
           transport: function (options, success, failure) {
             var taxonomies;
+            var termsPromise;
             var promise = CommunicationComponent.getTaxonomies(
               that.model.get('contentType')
             ).then(function (tax) {
               taxonomies = tax;
               // Fetch available terms based on the list of taxonomies already fetched
-              var promise = CommunicationComponent.getTerms({
+              termsPromise = CommunicationComponent.getTerms({
                 search: options.data.term,
                 taxonomies: _.keys(taxonomies)
               }).then(function (terms) {
@@ -227,7 +229,7 @@ define([
                   terms: terms
                 };
               });
-              return promise;
+              return termsPromise;
             });
 
             promise.then(success);
@@ -264,9 +266,9 @@ define([
         }
       }).trigger('change');
     },
-    toggleDisplayOptions: function(event) {
+    toggleDisplayOptions: function () {
-      var el = this.$('.mailpoet_automated_latest_content_display_options'),
+      var el = this.$('.mailpoet_automated_latest_content_display_options');
-        showControl = this.$('.mailpoet_automated_latest_content_show_display_options');
+      var showControl = this.$('.mailpoet_automated_latest_content_show_display_options');
       if (el.hasClass('mailpoet_closed')) {
         el.removeClass('mailpoet_closed');
         showControl.addClass('mailpoet_hidden');
@@ -275,7 +277,7 @@ define([
         showControl.removeClass('mailpoet_hidden');
       }
     },
-    showButtonSettings: function(event) {
+    showButtonSettings: function () {
       var buttonModule = ButtonBlock;
       (new buttonModule.ButtonBlockSettingsView({
         model: this.model.get('readMoreButton'),
@@ -286,7 +288,7 @@ define([
         }
       })).render();
     },
-    showDividerSettings: function(event) {
+    showDividerSettings: function () {
       var dividerModule = DividerBlock;
       (new dividerModule.DividerBlockSettingsView({
         model: this.model.get('divider'),
@@ -349,8 +351,8 @@ define([
       this.changeField('titleFormat', event);
     },
     _updateContentTypes: function (postTypes) {
-      var select = this.$('.mailpoet_automated_latest_content_content_type'),
+      var select = this.$('.mailpoet_automated_latest_content_content_type');
-          selectedValue = this.model.get('contentType');
+      var selectedValue = this.model.get('contentType');
 
       select.find('option').remove();
       _.each(postTypes, function (type) {
@@ -364,7 +366,7 @@ define([
   });
 
   Module.AutomatedLatestContentWidgetView = base.WidgetView.extend({
-    getTemplate: function() { return templates.automatedLatestContentInsertion; },
+    getTemplate: function () { return window.templates.automatedLatestContentInsertion; },
     behaviors: {
       DraggableBehavior: {
         cloneOriginal: true,
@@ -378,7 +380,7 @@ define([
     }
   });
 
-  App.on('before:start', function(App, options) {
+  App.on('before:start', function (App) {
     App.registerBlockType('automatedLatestContent', {
       blockModel: Module.AutomatedLatestContentBlockModel,
       blockView: Module.AutomatedLatestContentBlockView
@@ -391,7 +393,7 @@ define([
     });
   });
 
-  App.on('start', function(App, options) {
+  App.on('start', function (App) {
     var Application = App;
     Application._ALCSupervisor = new Module.ALCSupervisor();
     Application._ALCSupervisor.refresh();

assets/js/src/newsletter_editor/blocks/base.js

@@ -12,17 +12,16 @@ define([
   'jquery',
   'mailpoet',
   'modal'
-  ], function(App, Marionette, SuperModel, _, jQuery, MailPoet, Modal) {
+], function (App, Marionette, SuperModel, _, jQuery, MailPoet) {
 
-  "use strict";
+  'use strict';
 
-  var Module = {},
+  var Module = {};
-      AugmentedView = Marionette.View.extend({});
+  var AugmentedView = Marionette.View.extend({});
 
   Module.BlockModel = SuperModel.extend({
     stale: [], // Attributes to be removed upon saving
     initialize: function () {
-      var that = this;
       this.on('change', function () {
         App.getChannel().trigger('autoSave');
       });
@@ -50,13 +49,13 @@ define([
       toolsRegion: '> .mailpoet_tools'
     },
     modelEvents: {
-      'change': 'render',
+      change: 'render',
-      'delete': 'deleteBlock',
+      delete: 'deleteBlock',
-      'duplicate': 'duplicateBlock'
+      duplicate: 'duplicateBlock'
     },
     events: {
-      "mouseenter": "showTools",
+      mouseenter: 'showTools',
-      "mouseleave": "hideTools"
+      mouseleave: 'hideTools'
     },
     behaviors: {
       DraggableBehavior: {
@@ -68,7 +67,8 @@ define([
           options.dragBehavior.view.model.destroy();
         },
         onDragSubstituteBy: function (behavior) {
-          var WidgetView, node;
+          var WidgetView;
+          var node;
           // When block is being dragged, display the widget icon instead.
           // This will create an instance of block's widget view and
           // use it's rendered DOM element instead of the content block
@@ -98,13 +98,13 @@ define([
       this.on('dom:refresh', this.showBlock, this);
       this._isFirstRender = true;
     },
-    showTools: function(_event) {
+    showTools: function () {
       if (!this.showingToolsDisabled) {
         this.$('> .mailpoet_tools').addClass('mailpoet_display_tools');
         this.toolsView.triggerMethod('showTools');
       }
     },
-    hideTools: function(e) {
+    hideTools: function () {
       this.$('> .mailpoet_tools').removeClass('mailpoet_display_tools');
       this.toolsView.triggerMethod('hideTools');
     },
@@ -178,13 +178,13 @@ define([
   });
 
   Module.BlockToolsView = AugmentedView.extend({
-    getTemplate: function() { return templates.genericBlockTools; },
+    getTemplate: function () { return window.templates.genericBlockTools; },
     events: {
-      "click .mailpoet_edit_block": "changeSettings",
+      'click .mailpoet_edit_block': 'changeSettings',
-      "click .mailpoet_delete_block_activate": "showDeletionConfirmation",
+      'click .mailpoet_delete_block_activate': 'showDeletionConfirmation',
-      "click .mailpoet_delete_block_cancel": "hideDeletionConfirmation",
+      'click .mailpoet_delete_block_cancel': 'hideDeletionConfirmation',
-      "click .mailpoet_delete_block_confirm": "deleteBlock",
+      'click .mailpoet_delete_block_confirm': 'deleteBlock',
-      "click .mailpoet_duplicate_block": "duplicateBlock"
+      'click .mailpoet_duplicate_block': 'duplicateBlock'
     },
     // Markers of whether these particular tools will be used for this instance
     tools: {
@@ -240,8 +240,9 @@ define([
       ColorPickerBehavior: {}
     },
     initialize: function (params) {
+      var panelParams;
       this.model.trigger('startEditing');
-      var panelParams = {
+      panelParams = {
         element: this.$el,
         template: '',
         position: 'right',
@@ -262,7 +263,7 @@ define([
         model: this.model.toJSON()
       };
     },
-    close: function(event) {
+    close: function () {
       this.destroy();
     },
     changeField: function (field, event) {
@@ -275,7 +276,7 @@ define([
       this.model.set(field, jQuery(event.target).val() + suffix);
     },
     changeBoolField: function (field, event) {
-      this.model.set(field, (jQuery(event.target).val() === 'true') ? true : false);
+      this.model.set(field, (jQuery(event.target).val() === 'true'));
     },
     changeBoolCheckboxField: function (field, event) {
       this.model.set(field, (!!jQuery(event.target).prop('checked')));
@@ -298,7 +299,7 @@ define([
     behaviors: {
       DraggableBehavior: {
         drop: function () {
-          throw "Unsupported operation";
+          throw 'Unsupported operation';
         }
       }
     }

assets/js/src/newsletter_editor/blocks/button.js

@@ -9,10 +9,10 @@ define([
   'jquery'
 ], function (App, BaseBlock, MailPoet, _, jQuery) {
 
-  "use strict";
+  'use strict';
 
-  var Module = {},
+  var Module = {};
-      base = BaseBlock;
+  var base = BaseBlock;
 
   Module.ButtonBlockModel = base.BlockModel.extend({
     defaults: function () {
@@ -41,8 +41,8 @@ define([
   });
 
   Module.ButtonBlockView = base.BlockView.extend({
-    className: "mailpoet_block mailpoet_button_block mailpoet_droppable_block",
+    className: 'mailpoet_block mailpoet_button_block mailpoet_droppable_block',
-    getTemplate: function() { return templates.buttonBlock; },
+    getTemplate: function () { return window.templates.buttonBlock; },
     onDragSubstituteBy: function () { return Module.ButtonWidgetView; },
     behaviors: _.extend({}, base.BlockView.prototype.behaviors, {
       ShowSettingsBehavior: {}
@@ -65,37 +65,37 @@ define([
   });
 
   Module.ButtonBlockSettingsView = base.BlockSettingsView.extend({
-    getTemplate: function() { return templates.buttonBlockSettings; },
+    getTemplate: function () { return window.templates.buttonBlockSettings; },
     events: function () {
       return {
-        "input .mailpoet_field_button_text": _.partial(this.changeField, "text"),
+        'input .mailpoet_field_button_text': _.partial(this.changeField, 'text'),
-        "input .mailpoet_field_button_url": _.partial(this.changeField, "url"),
+        'input .mailpoet_field_button_url': _.partial(this.changeField, 'url'),
-        "change .mailpoet_field_button_alignment": _.partial(this.changeField, "styles.block.textAlign"),
+        'change .mailpoet_field_button_alignment': _.partial(this.changeField, 'styles.block.textAlign'),
-        "change .mailpoet_field_button_font_color": _.partial(this.changeColorField, "styles.block.fontColor"),
+        'change .mailpoet_field_button_font_color': _.partial(this.changeColorField, 'styles.block.fontColor'),
-        "change .mailpoet_field_button_font_family": _.partial(this.changeField, "styles.block.fontFamily"),
+        'change .mailpoet_field_button_font_family': _.partial(this.changeField, 'styles.block.fontFamily'),
-        "change .mailpoet_field_button_font_size": _.partial(this.changeField, "styles.block.fontSize"),
+        'change .mailpoet_field_button_font_size': _.partial(this.changeField, 'styles.block.fontSize'),
-        "change .mailpoet_field_button_background_color": _.partial(this.changeColorField, "styles.block.backgroundColor"),
+        'change .mailpoet_field_button_background_color': _.partial(this.changeColorField, 'styles.block.backgroundColor'),
-        "change .mailpoet_field_button_border_color": _.partial(this.changeColorField, "styles.block.borderColor"),
+        'change .mailpoet_field_button_border_color': _.partial(this.changeColorField, 'styles.block.borderColor'),
-        "change .mailpoet_field_button_font_weight": "changeFontWeight",
+        'change .mailpoet_field_button_font_weight': 'changeFontWeight',
 
-        "input .mailpoet_field_button_border_width": _.partial(this.updateValueAndCall, '.mailpoet_field_button_border_width_input', _.partial(this.changePixelField, "styles.block.borderWidth").bind(this)),
+        'input .mailpoet_field_button_border_width': _.partial(this.updateValueAndCall, '.mailpoet_field_button_border_width_input', _.partial(this.changePixelField, 'styles.block.borderWidth').bind(this)),
-        "change .mailpoet_field_button_border_width": _.partial(this.updateValueAndCall, '.mailpoet_field_button_border_width_input', _.partial(this.changePixelField, "styles.block.borderWidth").bind(this)),
+        'change .mailpoet_field_button_border_width': _.partial(this.updateValueAndCall, '.mailpoet_field_button_border_width_input', _.partial(this.changePixelField, 'styles.block.borderWidth').bind(this)),
-        "input .mailpoet_field_button_border_width_input": _.partial(this.updateValueAndCall, '.mailpoet_field_button_border_width', _.partial(this.changePixelField, "styles.block.borderWidth").bind(this)),
+        'input .mailpoet_field_button_border_width_input': _.partial(this.updateValueAndCall, '.mailpoet_field_button_border_width', _.partial(this.changePixelField, 'styles.block.borderWidth').bind(this)),
 
-        "input .mailpoet_field_button_border_radius": _.partial(this.updateValueAndCall, '.mailpoet_field_button_border_radius_input', _.partial(this.changePixelField, "styles.block.borderRadius").bind(this)),
+        'input .mailpoet_field_button_border_radius': _.partial(this.updateValueAndCall, '.mailpoet_field_button_border_radius_input', _.partial(this.changePixelField, 'styles.block.borderRadius').bind(this)),
-        "change .mailpoet_field_button_border_radius": _.partial(this.updateValueAndCall, '.mailpoet_field_button_border_radius_input', _.partial(this.changePixelField, "styles.block.borderRadius").bind(this)),
+        'change .mailpoet_field_button_border_radius': _.partial(this.updateValueAndCall, '.mailpoet_field_button_border_radius_input', _.partial(this.changePixelField, 'styles.block.borderRadius').bind(this)),
-        "input .mailpoet_field_button_border_radius_input": _.partial(this.updateValueAndCall, '.mailpoet_field_button_border_radius', _.partial(this.changePixelField, "styles.block.borderRadius").bind(this)),
+        'input .mailpoet_field_button_border_radius_input': _.partial(this.updateValueAndCall, '.mailpoet_field_button_border_radius', _.partial(this.changePixelField, 'styles.block.borderRadius').bind(this)),
 
-        "input .mailpoet_field_button_width": _.partial(this.updateValueAndCall, '.mailpoet_field_button_width_input', _.partial(this.changePixelField, "styles.block.width").bind(this)),
+        'input .mailpoet_field_button_width': _.partial(this.updateValueAndCall, '.mailpoet_field_button_width_input', _.partial(this.changePixelField, 'styles.block.width').bind(this)),
-        "change .mailpoet_field_button_width": _.partial(this.updateValueAndCall, '.mailpoet_field_button_width_input', _.partial(this.changePixelField, "styles.block.width").bind(this)),
+        'change .mailpoet_field_button_width': _.partial(this.updateValueAndCall, '.mailpoet_field_button_width_input', _.partial(this.changePixelField, 'styles.block.width').bind(this)),
-        "input .mailpoet_field_button_width_input": _.partial(this.updateValueAndCall, '.mailpoet_field_button_width', _.partial(this.changePixelField, "styles.block.width").bind(this)),
+        'input .mailpoet_field_button_width_input': _.partial(this.updateValueAndCall, '.mailpoet_field_button_width', _.partial(this.changePixelField, 'styles.block.width').bind(this)),
 
-        "input .mailpoet_field_button_line_height": _.partial(this.updateValueAndCall, '.mailpoet_field_button_line_height_input', _.partial(this.changePixelField, "styles.block.lineHeight").bind(this)),
+        'input .mailpoet_field_button_line_height': _.partial(this.updateValueAndCall, '.mailpoet_field_button_line_height_input', _.partial(this.changePixelField, 'styles.block.lineHeight').bind(this)),
-        "change .mailpoet_field_button_line_height": _.partial(this.updateValueAndCall, '.mailpoet_field_button_line_height_input', _.partial(this.changePixelField, "styles.block.lineHeight").bind(this)),
+        'change .mailpoet_field_button_line_height': _.partial(this.updateValueAndCall, '.mailpoet_field_button_line_height_input', _.partial(this.changePixelField, 'styles.block.lineHeight').bind(this)),
-        "input .mailpoet_field_button_line_height_input": _.partial(this.updateValueAndCall, '.mailpoet_field_button_line_height', _.partial(this.changePixelField, "styles.block.lineHeight").bind(this)),
+        'input .mailpoet_field_button_line_height_input': _.partial(this.updateValueAndCall, '.mailpoet_field_button_line_height', _.partial(this.changePixelField, 'styles.block.lineHeight').bind(this)),
 
-        "click .mailpoet_field_button_replace_all_styles": "applyToAll",
+        'click .mailpoet_field_button_replace_all_styles': 'applyToAll',
-        "click .mailpoet_done_editing": "close"
+        'click .mailpoet_done_editing': 'close'
       };
     },
     templateContext: function () {
@@ -121,7 +121,7 @@ define([
   });
 
   Module.ButtonWidgetView = base.WidgetView.extend({
-    getTemplate: function() { return templates.buttonInsertion; },
+    getTemplate: function () { return window.templates.buttonInsertion; },
     behaviors: {
       DraggableBehavior: {
         cloneOriginal: true,
@@ -132,7 +132,7 @@ define([
     }
   });
 
-  App.on('before:start', function(App, options) {
+  App.on('before:start', function (App) {
     App.registerBlockType('button', {
       blockModel: Module.ButtonBlockModel,
       blockView: Module.ButtonBlockView

assets/js/src/newsletter_editor/blocks/container.js

@@ -12,11 +12,11 @@ define([
   'newsletter_editor/blocks/base'
 ], function (Backbone, Marionette, _, jQuery, App, BaseBlock) {
 
-  "use strict";
+  'use strict';
 
-  var Module = {},
+  var Module = {};
-      base = BaseBlock,
+  var base = BaseBlock;
-      BlockCollection;
+  var BlockCollection;
 
   BlockCollection = Backbone.Collection.extend({
     model: base.BlockModel,
@@ -24,7 +24,6 @@ define([
       this.on('add change remove', function () { App.getChannel().trigger('autoSave'); });
     },
     parse: function (response) {
-      var self = this;
       return _.map(response, function (block) {
         var Type = App.getBlockTypeModel(block.type);
         // TODO: If type has no registered model, use a backup one
@@ -66,7 +65,7 @@ define([
       return response;
     },
     getChildren: function () {
-      var models = this.get('blocks').map(function(model, index, list) {
+      var models = this.get('blocks').map(function (model) {
         return [model, model.getChildren()];
       });
 
@@ -103,9 +102,9 @@ define([
       }
     }),
     className: 'mailpoet_block mailpoet_container_block mailpoet_droppable_block mailpoet_droppable_layout_block',
-    getTemplate: function() { return templates.containerBlock; },
+    getTemplate: function () { return window.templates.containerBlock; },
     events: _.extend({}, base.BlockView.prototype.events, {
-      "click .mailpoet_newsletter_layer_selector": "toggleEditingLayer"
+      'click .mailpoet_newsletter_layer_selector': 'toggleEditingLayer'
     }),
     ui: {
       tools: '> .mailpoet_tools'
@@ -121,7 +120,8 @@ define([
           options.dragBehavior.view.model.destroy();
         },
         onDragSubstituteBy: function (behavior) {
-          var WidgetView, node;
+          var WidgetView;
+          var node;
           // When block is being dragged, display the widget icon instead.
           // This will create an instance of block's widget view and
           // use it's rendered DOM element instead of the content block
@@ -138,7 +138,8 @@ define([
           // for root and column containers.
           return view.renderOptions.depth === 1;
         }
-      }
+      },
+      HighlightContainerBehavior: {}
     }),
     onDragSubstituteBy: function () {
       // For two and three column layouts display their respective widgets,
@@ -189,18 +190,18 @@ define([
       }
     },
     toggleEditingLayer: function (event) {
-      var that = this,
+      var that = this;
-        $toggleButton = this.$('> .mailpoet_tools .mailpoet_newsletter_layer_selector'),
+      var $toggleButton = this.$('> .mailpoet_tools .mailpoet_newsletter_layer_selector');
-        $overlay = jQuery('.mailpoet_layer_overlay'),
+      var $overlay = jQuery('.mailpoet_layer_overlay');
-        $container = this.$('> .mailpoet_container'),
+      var $container = this.$('> .mailpoet_container');
-        enableContainerLayer = function() {
+      var enableContainerLayer = function () {
         that.$el.addClass('mailpoet_container_layer_active');
         $toggleButton.addClass('mailpoet_container_layer_active');
         $container.addClass('mailpoet_layer_highlight');
         $overlay.click(disableContainerLayer);
         $overlay.show();
-        },
+      };
-        disableContainerLayer = function() {
+      var disableContainerLayer = function () {
         that.$el.removeClass('mailpoet_container_layer_active');
         $toggleButton.removeClass('mailpoet_container_layer_active');
         $container.removeClass('mailpoet_layer_highlight');
@@ -217,7 +218,7 @@ define([
   });
 
   Module.ContainerBlockEmptyView = Marionette.View.extend({
-    getTemplate: function() { return templates.containerEmpty; },
+    getTemplate: function () { return window.templates.containerEmpty; },
     initialize: function (options) {
       this.renderOptions = _.defaults(options.renderOptions || {}, {});
     },
@@ -234,11 +235,11 @@ define([
   });
 
   Module.ContainerBlockSettingsView = base.BlockSettingsView.extend({
-    getTemplate: function() { return templates.containerBlockSettings; },
+    getTemplate: function () { return window.templates.containerBlockSettings; },
     events: function () {
       return {
-        "change .mailpoet_field_container_background_color": _.partial(this.changeColorField, "styles.block.backgroundColor"),
+        'change .mailpoet_field_container_background_color': _.partial(this.changeColorField, 'styles.block.backgroundColor'),
-        "click .mailpoet_done_editing": "close"
+        'click .mailpoet_done_editing': 'close'
       };
     },
     regions: {
@@ -266,7 +267,7 @@ define([
   });
 
   Module.ContainerBlockColumnSettingsView = Marionette.View.extend({
-    getTemplate: function() { return templates.containerBlockColumnSettings; },
+    getTemplate: function () { return window.templates.containerBlockColumnSettings; },
     initialize: function (options) {
       this.columnNumber = (options.columnIndex || 0) + 1;
     },
@@ -280,7 +281,7 @@ define([
 
   Module.OneColumnContainerWidgetView = base.WidgetView.extend({
     className: base.WidgetView.prototype.className + ' mailpoet_droppable_layout_block',
-    getTemplate: function() { return templates.oneColumnLayoutInsertion; },
+    getTemplate: function () { return window.templates.oneColumnLayoutInsertion; },
     behaviors: {
       DraggableBehavior: {
         cloneOriginal: true,
@@ -298,7 +299,7 @@ define([
 
   Module.TwoColumnContainerWidgetView = base.WidgetView.extend({
     className: base.WidgetView.prototype.className + ' mailpoet_droppable_layout_block',
-    getTemplate: function() { return templates.twoColumnLayoutInsertion; },
+    getTemplate: function () { return window.templates.twoColumnLayoutInsertion; },
     behaviors: {
       DraggableBehavior: {
         cloneOriginal: true,
@@ -317,7 +318,7 @@ define([
 
   Module.ThreeColumnContainerWidgetView = base.WidgetView.extend({
     className: base.WidgetView.prototype.className + ' mailpoet_droppable_layout_block',
-    getTemplate: function() { return templates.threeColumnLayoutInsertion; },
+    getTemplate: function () { return window.templates.threeColumnLayoutInsertion; },
     behaviors: {
       DraggableBehavior: {
         cloneOriginal: true,
@@ -335,7 +336,7 @@ define([
     }
   });
 
-  App.on('before:start', function(App, options) {
+  App.on('before:start', function (App) {
     App.registerBlockType('container', {
       blockModel: Module.ContainerBlockModel,
       blockView: Module.ContainerBlockView

assets/js/src/newsletter_editor/blocks/divider.js

@@ -5,14 +5,13 @@ define([
   'newsletter_editor/App',
   'newsletter_editor/blocks/base',
   'underscore',
-    'jquery',
+  'jquery'
-    'mailpoet'
+], function (App, BaseBlock, _, jQuery) {
-  ], function(App, BaseBlock, _, jQuery, MailPoet) {
 
-  "use strict";
+  'use strict';
 
-  var Module = {},
+  var Module = {};
-      base = BaseBlock;
+  var base = BaseBlock;
 
   Module.DividerBlockModel = base.BlockModel.extend({
     defaults: function () {
@@ -32,8 +31,8 @@ define([
   });
 
   Module.DividerBlockView = base.BlockView.extend({
-    className: "mailpoet_block mailpoet_divider_block mailpoet_droppable_block",
+    className: 'mailpoet_block mailpoet_divider_block mailpoet_droppable_block',
-    getTemplate: function() { return templates.dividerBlock; },
+    getTemplate: function () { return window.templates.dividerBlock; },
     modelEvents: _.omit(base.BlockView.prototype.modelEvents, 'change'),
     behaviors: _.defaults({
       ResizableBehavior: {
@@ -49,8 +48,8 @@ define([
     }, base.BlockView.prototype.behaviors),
     onDragSubstituteBy: function () { return Module.DividerWidgetView; },
     initialize: function () {
-      base.BlockView.prototype.initialize.apply(this, arguments);
       var that = this;
+      base.BlockView.prototype.initialize.apply(this, arguments);
 
       // Listen for attempts to change all dividers in one go
       this._replaceDividerHandler = function (data) { that.model.set(data); that.model.trigger('applyToAll'); };
@@ -84,19 +83,19 @@ define([
   });
 
   Module.DividerBlockSettingsView = base.BlockSettingsView.extend({
-    getTemplate: function() { return templates.dividerBlockSettings; },
+    getTemplate: function () { return window.templates.dividerBlockSettings; },
     events: function () {
       return {
-        "click .mailpoet_field_divider_style": 'changeStyle',
+        'click .mailpoet_field_divider_style': 'changeStyle',
 
-        "input .mailpoet_field_divider_border_width": _.partial(this.updateValueAndCall, '.mailpoet_field_divider_border_width_input', _.partial(this.changePixelField, "styles.block.borderWidth").bind(this)),
+        'input .mailpoet_field_divider_border_width': _.partial(this.updateValueAndCall, '.mailpoet_field_divider_border_width_input', _.partial(this.changePixelField, 'styles.block.borderWidth').bind(this)),
-        "change .mailpoet_field_divider_border_width": _.partial(this.updateValueAndCall, '.mailpoet_field_divider_border_width_input', _.partial(this.changePixelField, "styles.block.borderWidth").bind(this)),
+        'change .mailpoet_field_divider_border_width': _.partial(this.updateValueAndCall, '.mailpoet_field_divider_border_width_input', _.partial(this.changePixelField, 'styles.block.borderWidth').bind(this)),
-        "input .mailpoet_field_divider_border_width_input": _.partial(this.updateValueAndCall, '.mailpoet_field_divider_border_width', _.partial(this.changePixelField, "styles.block.borderWidth").bind(this)),
+        'input .mailpoet_field_divider_border_width_input': _.partial(this.updateValueAndCall, '.mailpoet_field_divider_border_width', _.partial(this.changePixelField, 'styles.block.borderWidth').bind(this)),
 
-        "change .mailpoet_field_divider_border_color": _.partial(this.changeColorField, "styles.block.borderColor"),
+        'change .mailpoet_field_divider_border_color': _.partial(this.changeColorField, 'styles.block.borderColor'),
-        "change .mailpoet_field_divider_background_color": _.partial(this.changeColorField, "styles.block.backgroundColor"),
+        'change .mailpoet_field_divider_background_color': _.partial(this.changeColorField, 'styles.block.backgroundColor'),
-        "click .mailpoet_button_divider_apply_to_all": "applyToAll",
+        'click .mailpoet_button_divider_apply_to_all': 'applyToAll',
-        "click .mailpoet_done_editing": "close"
+        'click .mailpoet_done_editing': 'close'
       };
     },
     modelEvents: function () {
@@ -119,7 +118,7 @@ define([
     repaintDividerStyleOptions: function () {
       this.$('.mailpoet_field_divider_style > div').css('border-top-color', this.model.get('styles.block.borderColor'));
     },
-    applyToAll: function(event) {
+    applyToAll: function () {
       App.getChannel().trigger('replaceAllDividers', this.model.toJSON());
     },
     updateValueAndCall: function (fieldToUpdate, callable, event) {
@@ -129,7 +128,7 @@ define([
   });
 
   Module.DividerWidgetView = base.WidgetView.extend({
-    getTemplate: function() { return templates.dividerInsertion; },
+    getTemplate: function () { return window.templates.dividerInsertion; },
     behaviors: {
       DraggableBehavior: {
         cloneOriginal: true,
@@ -139,7 +138,7 @@ define([
       }
     }
   });
-  App.on('before:start', function(App, options) {
+  App.on('before:start', function (App) {
     App.registerBlockType('divider', {
       blockModel: Module.DividerBlockModel,
       blockView: Module.DividerBlockView

assets/js/src/newsletter_editor/blocks/footer.js

@@ -4,13 +4,14 @@
 define([
   'newsletter_editor/App',
   'newsletter_editor/blocks/base',
-    'underscore'
+  'underscore',
-  ], function(App, BaseBlock, _) {
+  'mailpoet'
+], function (App, BaseBlock, _, MailPoet) {
 
-  "use strict";
+  'use strict';
 
-  var Module = {},
+  var Module = {};
-      base = BaseBlock;
+  var base = BaseBlock;
 
   Module.FooterBlockModel = base.BlockModel.extend({
     defaults: function () {
@@ -37,8 +38,8 @@ define([
   });
 
   Module.FooterBlockView = base.BlockView.extend({
-    className: "mailpoet_block mailpoet_footer_block mailpoet_droppable_block",
+    className: 'mailpoet_block mailpoet_footer_block mailpoet_droppable_block',
-    getTemplate: function() { return templates.footerBlock; },
+    getTemplate: function () { return window.templates.footerBlock; },
     modelEvents: _.extend({
       'change:styles.block.backgroundColor change:styles.text.fontColor change:styles.text.fontFamily change:styles.text.fontSize change:styles.text.textAlign change:styles.link.fontColor change:styles.link.textDecoration': 'render'
     }, _.omit(base.BlockView.prototype.modelEvents, 'change')),
@@ -75,19 +76,19 @@ define([
   });
 
   Module.FooterBlockSettingsView = base.BlockSettingsView.extend({
-    getTemplate: function() { return templates.footerBlockSettings; },
+    getTemplate: function () { return window.templates.footerBlockSettings; },
     events: function () {
       return {
-        "change .mailpoet_field_footer_text_color": _.partial(this.changeColorField, "styles.text.fontColor"),
+        'change .mailpoet_field_footer_text_color': _.partial(this.changeColorField, 'styles.text.fontColor'),
-        "change .mailpoet_field_footer_text_font_family": _.partial(this.changeField, "styles.text.fontFamily"),
+        'change .mailpoet_field_footer_text_font_family': _.partial(this.changeField, 'styles.text.fontFamily'),
-        "change .mailpoet_field_footer_text_size": _.partial(this.changeField, "styles.text.fontSize"),
+        'change .mailpoet_field_footer_text_size': _.partial(this.changeField, 'styles.text.fontSize'),
-        "change #mailpoet_field_footer_link_color": _.partial(this.changeColorField, "styles.link.fontColor"),
+        'change #mailpoet_field_footer_link_color': _.partial(this.changeColorField, 'styles.link.fontColor'),
-        "change #mailpoet_field_footer_link_underline": function(event) {
+        'change #mailpoet_field_footer_link_underline': function (event) {
           this.model.set('styles.link.textDecoration', (event.target.checked) ? event.target.value : 'none');
         },
-        "change .mailpoet_field_footer_background_color": _.partial(this.changeColorField, "styles.block.backgroundColor"),
+        'change .mailpoet_field_footer_background_color': _.partial(this.changeColorField, 'styles.block.backgroundColor'),
-        "change .mailpoet_field_footer_alignment": _.partial(this.changeField, "styles.text.textAlign"),
+        'change .mailpoet_field_footer_alignment': _.partial(this.changeField, 'styles.text.textAlign'),
-        "click .mailpoet_done_editing": "close"
+        'click .mailpoet_done_editing': 'close'
       };
     },
     templateContext: function () {
@@ -98,7 +99,7 @@ define([
   });
 
   Module.FooterWidgetView = base.WidgetView.extend({
-    getTemplate: function() { return templates.footerInsertion; },
+    getTemplate: function () { return window.templates.footerInsertion; },
     behaviors: {
       DraggableBehavior: {
         cloneOriginal: true,
@@ -109,7 +110,7 @@ define([
     }
   });
 
-  App.on('before:start', function(App, options) {
+  App.on('before:start', function (App) {
     App.registerBlockType('footer', {
       blockModel: Module.FooterBlockModel,
       blockView: Module.FooterBlockView

assets/js/src/newsletter_editor/blocks/header.js

@@ -4,13 +4,14 @@
 define([
   'newsletter_editor/App',
   'newsletter_editor/blocks/base',
-    'underscore'
+  'underscore',
-  ], function(App, BaseBlock, _) {
+  'mailpoet'
+], function (App, BaseBlock, _, MailPoet) {
 
-  "use strict";
+  'use strict';
 
-  var Module = {},
+  var Module = {};
-      base = BaseBlock;
+  var base = BaseBlock;
 
   Module.HeaderBlockModel = base.BlockModel.extend({
     defaults: function () {
@@ -37,8 +38,8 @@ define([
   });
 
   Module.HeaderBlockView = base.BlockView.extend({
-    className: "mailpoet_block mailpoet_header_block mailpoet_droppable_block",
+    className: 'mailpoet_block mailpoet_header_block mailpoet_droppable_block',
-    getTemplate: function() { return templates.headerBlock; },
+    getTemplate: function () { return window.templates.headerBlock; },
     modelEvents: _.extend({
       'change:styles.block.backgroundColor change:styles.text.fontColor change:styles.text.fontFamily change:styles.text.fontSize change:styles.text.textAlign change:styles.link.fontColor change:styles.link.textDecoration': 'render'
     }, _.omit(base.BlockView.prototype.modelEvents, 'change')),
@@ -75,19 +76,19 @@ define([
   });
 
   Module.HeaderBlockSettingsView = base.BlockSettingsView.extend({
-    getTemplate: function() { return templates.headerBlockSettings; },
+    getTemplate: function () { return window.templates.headerBlockSettings; },
     events: function () {
       return {
-        "change .mailpoet_field_header_text_color": _.partial(this.changeColorField, "styles.text.fontColor"),
+        'change .mailpoet_field_header_text_color': _.partial(this.changeColorField, 'styles.text.fontColor'),
-        "change .mailpoet_field_header_text_font_family": _.partial(this.changeField, "styles.text.fontFamily"),
+        'change .mailpoet_field_header_text_font_family': _.partial(this.changeField, 'styles.text.fontFamily'),
-        "change .mailpoet_field_header_text_size": _.partial(this.changeField, "styles.text.fontSize"),
+        'change .mailpoet_field_header_text_size': _.partial(this.changeField, 'styles.text.fontSize'),
-        "change #mailpoet_field_header_link_color": _.partial(this.changeColorField, "styles.link.fontColor"),
+        'change #mailpoet_field_header_link_color': _.partial(this.changeColorField, 'styles.link.fontColor'),
-        "change #mailpoet_field_header_link_underline": function(event) {
+        'change #mailpoet_field_header_link_underline': function (event) {
           this.model.set('styles.link.textDecoration', (event.target.checked) ? event.target.value : 'none');
         },
-        "change .mailpoet_field_header_background_color": _.partial(this.changeColorField, "styles.block.backgroundColor"),
+        'change .mailpoet_field_header_background_color': _.partial(this.changeColorField, 'styles.block.backgroundColor'),
-        "change .mailpoet_field_header_alignment": _.partial(this.changeField, "styles.text.textAlign"),
+        'change .mailpoet_field_header_alignment': _.partial(this.changeField, 'styles.text.textAlign'),
-        "click .mailpoet_done_editing": "close"
+        'click .mailpoet_done_editing': 'close'
       };
     },
     templateContext: function () {
@@ -98,7 +99,7 @@ define([
   });
 
   Module.HeaderWidgetView = base.WidgetView.extend({
-    getTemplate: function() { return templates.headerInsertion; },
+    getTemplate: function () { return window.templates.headerInsertion; },
     behaviors: {
       DraggableBehavior: {
         cloneOriginal: true,
@@ -109,7 +110,7 @@ define([
     }
   });
 
-  App.on('before:start', function(App, options) {
+  App.on('before:start', function (App) {
     App.registerBlockType('header', {
       blockModel: Module.HeaderBlockModel,
       blockView: Module.HeaderBlockView

assets/js/src/newsletter_editor/blocks/image.js

@@ -5,14 +5,15 @@ define([
   'newsletter_editor/App',
   'newsletter_editor/blocks/base',
   'underscore',
-    'mailpoet'
+  'mailpoet',
-  ], function(App, BaseBlock, _, MailPoet) {
+  'jquery'
+], function (App, BaseBlock, _, MailPoet, jQuery) {
 
-  "use strict";
+  'use strict';
 
-  var Module = {},
+  var Module = {};
-      base = BaseBlock,
+  var base = BaseBlock;
-      ImageWidgetView;
+  var ImageWidgetView;
 
   Module.ImageBlockModel = base.BlockModel.extend({
     defaults: function () {
@@ -34,8 +35,8 @@ define([
   });
 
   Module.ImageBlockView = base.BlockView.extend({
-    className: "mailpoet_block mailpoet_image_block mailpoet_droppable_block",
+    className: 'mailpoet_block mailpoet_image_block mailpoet_droppable_block',
-    getTemplate: function() { return templates.imageBlock; },
+    getTemplate: function () { return window.templates.imageBlock; },
     onDragSubstituteBy: function () { return Module.ImageWidgetView; },
     templateContext: function () {
       return _.extend({
@@ -43,17 +44,28 @@ define([
       }, base.BlockView.prototype.templateContext.apply(this));
     },
     behaviors: _.extend({}, base.BlockView.prototype.behaviors, {
-      ShowSettingsBehavior: {}
+      ResizableBehavior: {
+        elementSelector: '.mailpoet_image',
+        resizeHandleSelector: '.mailpoet_image_resize_handle',
+        onResize: function (event) {
+          var corner = this.$('.mailpoet_image').offset();
+          var width = event.pageX - corner.left;
+          this.view.model.set('width', width + 'px');
+        }
+      },
+      ShowSettingsBehavior: {
+        ignoreFrom: '.mailpoet_image_resize_handle'
+      }
     }),
     onRender: function () {
       this.toolsView = new Module.ImageBlockToolsView({ model: this.model });
       this.showChildView('toolsRegion', this.toolsView);
-
       if (this.model.get('fullWidth')) {
         this.$el.addClass('mailpoet_full_image');
       } else {
         this.$el.removeClass('mailpoet_full_image');
       }
+      this.$('.mailpoet_content').css('width', this.model.get('width'));
     }
   });
 
@@ -72,18 +84,41 @@ define([
         tooltip: MailPoet.I18n.t('helpTooltipDesignerIdealWidth')
       });
     },
-    getTemplate: function() { return templates.imageBlockSettings; },
+    getTemplate: function () { return window.templates.imageBlockSettings; },
     events: function () {
       return {
-        "input .mailpoet_field_image_link": _.partial(this.changeField, "link"),
+        'input .mailpoet_field_image_link': _.partial(this.changeField, 'link'),
-        "input .mailpoet_field_image_address": 'changeAddress',
+        'input .mailpoet_field_image_address': 'changeAddress',
-        "input .mailpoet_field_image_alt_text": _.partial(this.changeField, "alt"),
+        'input .mailpoet_field_image_alt_text': _.partial(this.changeField, 'alt'),
-        "change .mailpoet_field_image_full_width": _.partial(this.changeBoolCheckboxField, "fullWidth"),
+        'change .mailpoet_field_image_full_width': _.partial(this.changeBoolCheckboxField, 'fullWidth'),
-        "change .mailpoet_field_image_alignment": _.partial(this.changeField, "styles.block.textAlign"),
+        'change .mailpoet_field_image_alignment': _.partial(this.changeField, 'styles.block.textAlign'),
-        "click .mailpoet_field_image_select_another_image": "showMediaManager",
+        'click .mailpoet_field_image_select_another_image': 'showMediaManager',
-        "click .mailpoet_done_editing": "close"
+        'click .mailpoet_done_editing': 'close',
+        'input .mailpoet_field_image_width': _.partial(this.updateValueAndCall, '.mailpoet_field_image_width_input', _.partial(this.changePixelField, 'width').bind(this)),
+        'change .mailpoet_field_image_width': _.partial(this.updateValueAndCall, '.mailpoet_field_image_width_input', _.partial(this.changePixelField, 'width').bind(this)),
+        'input .mailpoet_field_image_width_input': _.partial(this.updateValueAndCall, '.mailpoet_field_image_width', _.partial(this.changePixelField, 'width').bind(this))
       };
     },
+    modelEvents: function () {
+      return {
+        'change:maxWidth': 'updateMaxWidth',
+        'change:width': 'updateWidth'
+      };
+    },
+    updateValueAndCall: function (fieldToUpdate, callable, event) {
+      this.$(fieldToUpdate).val(jQuery(event.target).val());
+      callable(event);
+    },
+    updateMaxWidth: function () {
+      var maxWidth = parseInt(this.model.get('maxWidth'));
+      this.$('.mailpoet_field_image_width').attr('max', maxWidth);
+      this.$('.mailpoet_field_image_width_input').attr('max', maxWidth);
+    },
+    updateWidth: function () {
+      var width = parseInt(this.model.get('width'));
+      this.$('.mailpoet_field_image_width').val(width);
+      this.$('.mailpoet_field_image_width_input').val(width);
+    },
     initialize: function (options) {
       base.BlockSettingsView.prototype.initialize.apply(this, arguments);
 
@@ -92,16 +127,19 @@ define([
       }
     },
     showMediaManager: function () {
+      var that = this;
+      var MediaManager;
+      var theFrame;
       if (this._mediaManager) {
         this._mediaManager.resetSelections();
         this._mediaManager.open();
         return;
       }
 
-      var MediaManager = wp.media.view.MediaFrame.Select.extend({
+      MediaManager = window.wp.media.view.MediaFrame.Select.extend({
 
         initialize: function () {
-          wp.media.view.MediaFrame.prototype.initialize.apply(this, arguments);
+          window.wp.media.view.MediaFrame.prototype.initialize.apply(this, arguments);
 
           _.defaults(this.options, {
             multiple: true,
@@ -123,7 +161,7 @@ define([
         },
 
         createQuery: function (options) {
-          var query = wp.media.query(options);
+          var query = window.wp.media.query(options);
           return query;
         },
 
@@ -133,7 +171,7 @@ define([
           // Add the default states.
           this.states.add([
             // Main states.
-            new wp.media.controller.Library({
+            new window.wp.media.controller.Library({
               id: 'insert',
               title: 'Add images',
               priority: 20,
@@ -155,12 +193,13 @@ define([
             })
           ]);
 
-          if(wp.media.view.settings.post.featuredImageId) {
+          if (window.wp.media.view.settings.post.featuredImageId) {
-            this.states.add(new wp.media.controller.FeaturedImage());
+            this.states.add(new window.wp.media.controller.FeaturedImage());
           }
         },
 
         bindHandlers: function () {
+          var handlers;
           // from Select
           this.on('router:create:browse', this.createRouter, this);
           this.on('router:render:browse', this.browseRouter, this);
@@ -175,9 +214,9 @@ define([
 
           this.on('updateExcluded', this.browseContent, this);
 
-          var handlers = {
+          handlers = {
             content: {
-                'embed': 'embedContent',
+              embed: 'embedContent',
               'edit-selection': 'editSelectionContent'
             },
             toolbar: {
@@ -193,13 +232,13 @@ define([
         },
 
         uploadContent: function () {
-          wp.media.view.MediaFrame.Select.prototype.uploadContent.apply(this, arguments);
+          window.wp.media.view.MediaFrame.Select.prototype.uploadContent.apply(this, arguments);
           this.$el.addClass('hide-toolbar');
         },
 
         // Content
         embedContent: function () {
-          var view = new wp.media.view.Embed({
+          var view = new window.wp.media.view.Embed({
             controller: this,
             model: this.state()
           }).render();
@@ -209,11 +248,11 @@ define([
         },
 
         editSelectionContent: function () {
-          var state = this.state(),
+          var state = this.state();
-            selection = state.get('selection'),
+          var selection = state.get('selection');
-            view;
+          var view;
 
-          view = new wp.media.view.AttachmentsBrowser({
+          view = new window.wp.media.view.AttachmentsBrowser({
             controller: this,
             collection: selection,
             selection: selection,
@@ -222,7 +261,7 @@ define([
             search: false,
             dragInfo: true,
 
-            AttachmentView: wp.media.view.Attachment.EditSelection
+            AttachmentView: window.wp.media.view.Attachment.EditSelection
           }).render();
 
           view.toolbar.set('backToLibrary', {
@@ -242,7 +281,7 @@ define([
         selectionStatusToolbar: function (view) {
           var editable = this.state().get('editable');
 
-          view.set('selection', new wp.media.view.Selection({
+          view.set('selection', new window.wp.media.view.Selection({
             controller: this,
             collection: this.state().get('selection'),
             priority: -40,
@@ -267,8 +306,8 @@ define([
             requires: { selection: true },
 
             click: function () {
-              var state = controller.state(),
+              var state = controller.state();
-                selection = state.get('selection');
+              var selection = state.get('selection');
 
               controller.close();
               state.trigger('insert', selection).reset();
@@ -278,7 +317,7 @@ define([
 
         mainEmbedToolbar: function (toolbar) {
           var tbar = toolbar;
-          tbar.view = new wp.media.view.Toolbar.Embed({
+          tbar.view = new window.wp.media.view.Toolbar.Embed({
             controller: this,
             text: 'Add images'
           });
@@ -286,7 +325,7 @@ define([
 
       });
 
-      var theFrame = new MediaManager({
+      theFrame = new MediaManager({
         id: 'mailpoet-media-manager',
         frame: 'select',
         title: 'Select image',
@@ -299,39 +338,35 @@ define([
         button: {
           text: 'Select'
         }
-        }),
+      });
-        that = this;
       this._mediaManager = theFrame;
 
       this._mediaManager.on('insert', function () {
         // Append media manager image selections to Images tab
         var selection = theFrame.state().get('selection');
         selection.each(function (attachment) {
-          var sizes = attachment.get('sizes'),
+          var sizes = attachment.get('sizes');
           // Following advice from Becs, the target width should
           // be a double of one column width to render well on
           // retina screen devices
-            targetImageWidth = 1320,
+          var targetImageWidth = 1320;
-
-            // For main image use the size, that's closest to being 660px in width
-            sizeKeys = _.keys(sizes),
 
           // Pick the width that is closest to target width
-            increasingByWidthDifference = _.sortBy(
+          var increasingByWidthDifference = _.sortBy(
             _.keys(sizes),
             function (size) { return Math.abs(targetImageWidth - sizes[size].width); }
-            ),
+          );
-            bestWidth = sizes[_.first(increasingByWidthDifference)].width,
+          var bestWidth = sizes[_.first(increasingByWidthDifference)].width;
-            imagesOfBestWidth = _.filter(_.values(sizes), function(size) { return size.width === bestWidth; }),
+          var imagesOfBestWidth = _.filter(_.values(sizes), function (size) { return size.width === bestWidth; });
 
           // Maximize the height if there are multiple images with same width
-            mainSize = _.max(imagesOfBestWidth, function(size) { return size.height; });
+          var mainSize = _.max(imagesOfBestWidth, function (size) { return size.height; });
 
           that.model.set({
             height: mainSize.height + 'px',
             width: mainSize.width + 'px',
             src: mainSize.url,
-            alt: (attachment.get('alt') !== "" && attachment.get('alt') !== undefined) ? attachment.get('alt') : attachment.get('title')
+            alt: (attachment.get('alt') !== '' && attachment.get('alt') !== undefined) ? attachment.get('alt') : attachment.get('title')
           });
           // Rerender settings view due to changes from outside of settings view
           that.render();
@@ -363,7 +398,7 @@ define([
   });
 
   ImageWidgetView = base.WidgetView.extend({
-    getTemplate: function() { return templates.imageInsertion; },
+    getTemplate: function () { return window.templates.imageInsertion; },
     behaviors: {
       DraggableBehavior: {
         cloneOriginal: true,
@@ -378,7 +413,7 @@ define([
   });
   Module.ImageWidgetView = ImageWidgetView;
 
-  App.on('before:start', function(App, options) {
+  App.on('before:start', function (App) {
     App.registerBlockType('image', {
       blockModel: Module.ImageBlockModel,
       blockView: Module.ImageBlockView

assets/js/src/newsletter_editor/blocks/posts.js

@@ -37,10 +37,15 @@ define([
   DividerBlock
   ) {
 
-  "use strict";
+  'use strict';
 
-  var Module = {},
+  var Module = {};
-      base = BaseBlock;
+  var base = BaseBlock;
+  var PostsDisplayOptionsSettingsView;
+  var SinglePostSelectionSettingsView;
+  var EmptyPostSelectionSettingsView;
+  var PostSelectionSettingsView;
+  var PostsSelectionCollectionView;
 
   Module.PostsBlockModel = base.BlockModel.extend({
     stale: ['_selectedPosts', '_availablePosts', '_transformedPosts'],
@@ -89,10 +94,9 @@ define([
       };
     },
     initialize: function () {
-      var that = this,
+      var POST_REFRESH_DELAY_MS = 500;
-        POST_REFRESH_DELAY_MS = 500,
+      var refreshAvailablePosts = _.debounce(this.fetchAvailablePosts.bind(this), POST_REFRESH_DELAY_MS);
-        refreshAvailablePosts = _.debounce(this.fetchAvailablePosts.bind(this), POST_REFRESH_DELAY_MS),
+      var refreshTransformedPosts = _.debounce(this._refreshTransformedPosts.bind(this), POST_REFRESH_DELAY_MS);
-        refreshTransformedPosts = _.debounce(this._refreshTransformedPosts.bind(this), POST_REFRESH_DELAY_MS);
 
       // Attach Radio.Requests API primarily for highlighting
       _.extend(this, Radio.Requests);
@@ -120,9 +124,9 @@ define([
       });
     },
     _loadMorePosts: function () {
-      var that = this,
+      var that = this;
-        postCount = this.get('_availablePosts').length,
+      var postCount = this.get('_availablePosts').length;
-        nextOffset = this.get('offset') + Number(this.get('amount'));
+      var nextOffset = this.get('offset') + Number(this.get('amount'));
 
       if (postCount === 0 || postCount < nextOffset) {
         // No more posts to load
@@ -141,8 +145,8 @@ define([
       });
     },
     _refreshTransformedPosts: function () {
-      var that = this,
+      var that = this;
-        data = this.toJSON();
+      var data = this.toJSON();
 
       data.posts = this.get('_selectedPosts').pluck('ID');
 
@@ -158,10 +162,9 @@ define([
       });
     },
     _insertSelectedPosts: function () {
-      var that = this,
+      var data = this.toJSON();
-        data = this.toJSON(),
+      var index = this.collection.indexOf(this);
-        index = this.collection.indexOf(this),
+      var collection = this.collection;
-        collection = this.collection;
 
       data.posts = this.get('_selectedPosts').pluck('ID');
 
@@ -176,8 +179,8 @@ define([
   });
 
   Module.PostsBlockView = base.BlockView.extend({
-    className: "mailpoet_block mailpoet_posts_block mailpoet_droppable_block",
+    className: 'mailpoet_block mailpoet_posts_block mailpoet_droppable_block',
-    getTemplate: function() { return templates.postsBlock; },
+    getTemplate: function () { return window.templates.postsBlock; },
     modelEvents: {}, // Forcefully disable all events
     regions: _.extend({
       postsRegion: '.mailpoet_posts_block_posts'
@@ -190,12 +193,14 @@ define([
       this.model.reply('blockView', this.notifyAboutSelf, this);
     },
     onRender: function () {
+      var ContainerView;
+      var renderOptions;
       if (!this.getRegion('toolsRegion').hasView()) {
         this.showChildView('toolsRegion', this.toolsView);
       }
       this.trigger('showSettings');
 
-      var ContainerView = App.getBlockTypeView('container'),
+      ContainerView = App.getBlockTypeView('container');
       renderOptions = {
         disableTextEditor: true,
         disableDragAndDrop: true,
@@ -216,7 +221,7 @@ define([
   });
 
   Module.PostsBlockSettingsView = base.BlockSettingsView.extend({
-    getTemplate: function() { return templates.postsBlockSettings; },
+    getTemplate: function () { return window.templates.postsBlockSettings; },
     regions: {
       selectionRegion: '.mailpoet_settings_posts_selection',
       displayOptionsRegion: '.mailpoet_settings_posts_display_options'
@@ -237,8 +242,8 @@ define([
       this.displayOptionsView = new PostsDisplayOptionsSettingsView({ model: this.model });
     },
     onRender: function () {
-      var that = this,
+      var that = this;
-        blockView = this.model.request('blockView');
+      this.model.request('blockView');
 
       this.showChildView('selectionRegion', this.selectionView);
       this.showChildView('displayOptionsRegion', this.displayOptionsView);
@@ -283,7 +288,7 @@ define([
     }
   });
 
-  var PostsSelectionCollectionView = Marionette.CollectionView.extend({
+  PostsSelectionCollectionView = Marionette.CollectionView.extend({
     className: 'mailpoet_post_scroll_container',
     childView: function () { return SinglePostSelectionSettingsView; },
     emptyView: function () { return EmptyPostSelectionSettingsView; },
@@ -296,7 +301,7 @@ define([
       this.blockModel = options.blockModel;
     },
     events: {
-      'scroll': 'onPostsScroll'
+      scroll: 'onPostsScroll'
     },
     onPostsScroll: function (event) {
       var $postsBox = jQuery(event.target);
@@ -307,8 +312,8 @@ define([
     }
   });
 
-  var PostSelectionSettingsView = Marionette.View.extend({
+  PostSelectionSettingsView = Marionette.View.extend({
-    getTemplate: function() { return templates.postSelectionPostsBlockSettings; },
+    getTemplate: function () { return window.templates.postSelectionPostsBlockSettings; },
     regions: {
       posts: '.mailpoet_post_selection_container'
     },
@@ -326,17 +331,18 @@ define([
           this.$('.mailpoet_post_scroll_container').scrollTop(0);
         }
       },
-      'loadingMorePosts': function() {
+      loadingMorePosts: function () {
         this.$('.mailpoet_post_selection_loading').css('visibility', 'visible');
       },
-      'morePostsLoaded': function() {
+      morePostsLoaded: function () {
         this.$('.mailpoet_post_selection_loading').css('visibility', 'hidden');
       }
     },
     onRender: function () {
+      var postsView;
       // Dynamically update available post types
       CommunicationComponent.getPostTypes().done(_.bind(this._updateContentTypes, this));
-      var postsView = new PostsSelectionCollectionView({
+      postsView = new PostsSelectionCollectionView({
         collection: this.model.get('_availablePosts'),
         blockModel: this.model
       });
@@ -358,12 +364,13 @@ define([
           },
           transport: function (options, success, failure) {
             var taxonomies;
+            var termsPromise;
             var promise = CommunicationComponent.getTaxonomies(
               that.model.get('contentType')
             ).then(function (tax) {
               taxonomies = tax;
               // Fetch available terms based on the list of taxonomies already fetched
-              var promise = CommunicationComponent.getTerms({
+              termsPromise = CommunicationComponent.getTerms({
                 search: options.data.term,
                 taxonomies: _.keys(taxonomies)
               }).then(function (terms) {
@@ -372,7 +379,7 @@ define([
                   terms: terms
                 };
               });
-              return promise;
+              return termsPromise;
             });
 
             promise.then(success);
@@ -413,8 +420,8 @@ define([
       this.model.set(field, jQuery(event.target).val());
     },
     _updateContentTypes: function (postTypes) {
-      var select = this.$('.mailpoet_settings_posts_content_type'),
+      var select = this.$('.mailpoet_settings_posts_content_type');
-          selectedValue = this.model.get('contentType');
+      var selectedValue = this.model.get('contentType');
 
       select.find('option').remove();
       _.each(postTypes, function (type) {
@@ -427,12 +434,12 @@ define([
     }
   });
 
-  var EmptyPostSelectionSettingsView = Marionette.View.extend({
+  EmptyPostSelectionSettingsView = Marionette.View.extend({
-    getTemplate: function() { return templates.emptyPostPostsBlockSettings; }
+    getTemplate: function () { return window.templates.emptyPostPostsBlockSettings; }
   });
 
-  var SinglePostSelectionSettingsView = Marionette.View.extend({
+  SinglePostSelectionSettingsView = Marionette.View.extend({
-    getTemplate: function() { return templates.singlePostPostsBlockSettings; },
+    getTemplate: function () { return window.templates.singlePostPostsBlockSettings; },
     events: function () {
       return {
         'change .mailpoet_select_post_checkbox': 'postSelectionChange'
@@ -448,8 +455,8 @@ define([
       this.blockModel = options.blockModel;
     },
     postSelectionChange: function (event) {
-      var checkBox = jQuery(event.target),
+      var checkBox = jQuery(event.target);
-        selectedPostsCollection = this.blockModel.get('_selectedPosts');
+      var selectedPostsCollection = this.blockModel.get('_selectedPosts');
       if (checkBox.prop('checked')) {
         selectedPostsCollection.add(this.model);
       } else {
@@ -458,29 +465,29 @@ define([
     }
   });
 
-  var PostsDisplayOptionsSettingsView = base.BlockSettingsView.extend({
+  PostsDisplayOptionsSettingsView = base.BlockSettingsView.extend({
-    getTemplate: function() { return templates.displayOptionsPostsBlockSettings; },
+    getTemplate: function () { return window.templates.displayOptionsPostsBlockSettings; },
     events: function () {
       return {
-        "click .mailpoet_posts_select_button": 'showButtonSettings',
+        'click .mailpoet_posts_select_button': 'showButtonSettings',
-        "click .mailpoet_posts_select_divider": 'showDividerSettings',
+        'click .mailpoet_posts_select_divider': 'showDividerSettings',
-        "change .mailpoet_posts_read_more_type": 'changeReadMoreType',
+        'change .mailpoet_posts_read_more_type': 'changeReadMoreType',
-        "change .mailpoet_posts_display_type": 'changeDisplayType',
+        'change .mailpoet_posts_display_type': 'changeDisplayType',
-        "change .mailpoet_posts_title_format": 'changeTitleFormat',
+        'change .mailpoet_posts_title_format': 'changeTitleFormat',
-        "change .mailpoet_posts_title_as_links": _.partial(this.changeBoolField, 'titleIsLink'),
+        'change .mailpoet_posts_title_as_links': _.partial(this.changeBoolField, 'titleIsLink'),
-        "change .mailpoet_posts_show_divider": _.partial(this.changeBoolField, 'showDivider'),
+        'change .mailpoet_posts_show_divider': _.partial(this.changeBoolField, 'showDivider'),
-        "input .mailpoet_posts_show_amount": _.partial(this.changeField, "amount"),
+        'input .mailpoet_posts_show_amount': _.partial(this.changeField, 'amount'),
-        "change .mailpoet_posts_content_type": _.partial(this.changeField, "contentType"),
+        'change .mailpoet_posts_content_type': _.partial(this.changeField, 'contentType'),
-        "change .mailpoet_posts_include_or_exclude": _.partial(this.changeField, "inclusionType"),
+        'change .mailpoet_posts_include_or_exclude': _.partial(this.changeField, 'inclusionType'),
-        "change .mailpoet_posts_title_alignment": _.partial(this.changeField, "titleAlignment"),
+        'change .mailpoet_posts_title_alignment': _.partial(this.changeField, 'titleAlignment'),
-        "change .mailpoet_posts_image_full_width": _.partial(this.changeBoolField, "imageFullWidth"),
+        'change .mailpoet_posts_image_full_width': _.partial(this.changeBoolField, 'imageFullWidth'),
-        "change .mailpoet_posts_featured_image_position": _.partial(this.changeField, "featuredImagePosition"),
+        'change .mailpoet_posts_featured_image_position': _.partial(this.changeField, 'featuredImagePosition'),
-        "change .mailpoet_posts_show_author": _.partial(this.changeField, "showAuthor"),
+        'change .mailpoet_posts_show_author': _.partial(this.changeField, 'showAuthor'),
-        "input .mailpoet_posts_author_preceded_by": _.partial(this.changeField, "authorPrecededBy"),
+        'input .mailpoet_posts_author_preceded_by': _.partial(this.changeField, 'authorPrecededBy'),
-        "change .mailpoet_posts_show_categories": _.partial(this.changeField, "showCategories"),
+        'change .mailpoet_posts_show_categories': _.partial(this.changeField, 'showCategories'),
-        "input .mailpoet_posts_categories": _.partial(this.changeField, "categoriesPrecededBy"),
+        'input .mailpoet_posts_categories': _.partial(this.changeField, 'categoriesPrecededBy'),
-        "input .mailpoet_posts_read_more_text": _.partial(this.changeField, "readMoreText"),
+        'input .mailpoet_posts_read_more_text': _.partial(this.changeField, 'readMoreText'),
-        "change .mailpoet_posts_sort_by": _.partial(this.changeField, "sortBy")
+        'change .mailpoet_posts_sort_by': _.partial(this.changeField, 'sortBy')
       };
     },
     templateContext: function () {
@@ -488,7 +495,7 @@ define([
         model: this.model.toJSON()
       };
     },
-    showButtonSettings: function(event) {
+    showButtonSettings: function () {
       var buttonModule = ButtonBlock;
       (new buttonModule.ButtonBlockSettingsView({
         model: this.model.get('readMoreButton'),
@@ -499,7 +506,7 @@ define([
         }
       })).render();
     },
-    showDividerSettings: function(event) {
+    showDividerSettings: function () {
       var dividerModule = DividerBlock;
       (new dividerModule.DividerBlockSettingsView({
         model: this.model.get('divider'),
@@ -564,7 +571,7 @@ define([
   });
 
   Module.PostsWidgetView = base.WidgetView.extend({
-    getTemplate: function() { return templates.postsInsertion; },
+    getTemplate: function () { return window.templates.postsInsertion; },
     behaviors: {
       DraggableBehavior: {
         cloneOriginal: true,
@@ -575,7 +582,7 @@ define([
     }
   });
 
-  App.on('before:start', function(App, options) {
+  App.on('before:start', function (App) {
     App.registerBlockType('posts', {
       blockModel: Module.PostsBlockModel,
       blockView: Module.PostsBlockView

assets/js/src/newsletter_editor/blocks/social.js

@@ -11,14 +11,15 @@ define([
   'jquery'
 ], function (App, BaseBlock, Backbone, Marionette, SuperModel, _, jQuery) {
 
-  "use strict";
+  'use strict';
 
-  var Module = {},
+  var Module = {};
-      base = BaseBlock,
+  var base = BaseBlock;
-      SocialBlockSettingsIconSelectorView,
+  var SocialBlockSettingsIconSelectorView;
-      SocialBlockSettingsIconView,
+  var SocialBlockSettingsIconView;
-      SocialBlockSettingsIconCollectionView,
+  var SocialBlockSettingsIconCollectionView;
-      SocialBlockSettingsStylesView;
+  var SocialBlockSettingsStylesView;
+  var SocialIconView;
 
   Module.SocialIconModel = SuperModel.extend({
     defaults: function () {
@@ -33,12 +34,12 @@ define([
         text: defaultValues.get('title')
       };
     },
-    initialize: function(options) {
+    initialize: function () {
       var that = this;
       // Make model swap to default values for that type when iconType changes
       this.on('change:iconType', function () {
-        var defaultValues = App.getConfig().get('socialIcons').get(that.get('iconType')),
+        var defaultValues = App.getConfig().get('socialIcons').get(that.get('iconType'));
-          iconSet = that.collection.iconBlockModel.getIconSet();
+        var iconSet = that.collection.iconBlockModel.getIconSet();
         this.set({
           link: defaultValues.get('defaultLink'),
           image: iconSet.get(that.get('iconType')),
@@ -83,11 +84,11 @@ define([
     }
   });
 
-  var SocialIconView = Marionette.View.extend({
+  SocialIconView = Marionette.View.extend({
     tagName: 'span',
-    getTemplate: function() { return templates.socialIconBlock; },
+    getTemplate: function () { return window.templates.socialIconBlock; },
     modelEvents: {
-      'change': 'render'
+      change: 'render'
     },
     templateContext: function () {
       var allIconSets = App.getAvailableStyles().get('socialIconSets');
@@ -105,7 +106,7 @@ define([
 
   Module.SocialBlockView = base.BlockView.extend({
     className: 'mailpoet_block mailpoet_social_block mailpoet_droppable_block',
-    getTemplate: function() { return templates.socialBlock; },
+    getTemplate: function () { return window.templates.socialBlock; },
     regions: _.extend({}, base.BlockView.prototype.regions, {
       icons: '.mailpoet_social'
     }),
@@ -121,7 +122,7 @@ define([
       this.showChildView('toolsRegion', this.toolsView);
       this.showChildView('icons', new Module.SocialIconCollectionView({
         collection: this.model.get('icons')
-      }))
+      }));
     }
   });
 
@@ -131,14 +132,14 @@ define([
 
   // Sidebar view container
   Module.SocialBlockSettingsView = base.BlockSettingsView.extend({
-    getTemplate: function() { return templates.socialBlockSettings; },
+    getTemplate: function () { return window.templates.socialBlockSettings; },
     regions: {
       iconRegion: '#mailpoet_social_icons_selection',
       stylesRegion: '#mailpoet_social_icons_styles'
     },
     events: function () {
       return {
-        "click .mailpoet_done_editing": "close"
+        'click .mailpoet_done_editing': 'close'
       };
     },
     initialize: function () {
@@ -155,14 +156,14 @@ define([
 
   // Single icon settings view, used by the selector view
   SocialBlockSettingsIconView = Marionette.View.extend({
-    getTemplate: function() { return templates.socialSettingsIcon; },
+    getTemplate: function () { return window.templates.socialSettingsIcon; },
     events: function () {
       return {
-        "click .mailpoet_delete_block": "deleteIcon",
+        'click .mailpoet_delete_block': 'deleteIcon',
-        "change .mailpoet_social_icon_field_type": _.partial(this.changeField, "iconType"),
+        'change .mailpoet_social_icon_field_type': _.partial(this.changeField, 'iconType'),
-        "input .mailpoet_social_icon_field_image": _.partial(this.changeField, "image"),
+        'input .mailpoet_social_icon_field_image': _.partial(this.changeField, 'image'),
-        "input .mailpoet_social_icon_field_link": this.changeLink,
+        'input .mailpoet_social_icon_field_link': this.changeLink,
-        "input .mailpoet_social_icon_field_text": _.partial(this.changeField, "text")
+        'input .mailpoet_social_icon_field_text': _.partial(this.changeField, 'text')
       };
     },
     modelEvents: {
@@ -175,10 +176,10 @@ define([
       }
     },
     templateContext: function () {
-      var icons = App.getConfig().get('socialIcons'),
+      var icons = App.getConfig().get('socialIcons');
       // Construct icon type list of format [{iconType: 'type', title: 'Title'}, ...]
-        availableIconTypes = _.map(_.keys(icons.attributes), function(key) { return { iconType: key, title: icons.get(key).get('title') }; }),
+      var availableIconTypes = _.map(_.keys(icons.attributes), function (key) { return { iconType: key, title: icons.get(key).get('title') }; });
-        allIconSets = App.getAvailableStyles().get('socialIconSets');
+      var allIconSets = App.getAvailableStyles().get('socialIconSets');
       return _.extend({}, base.BlockView.prototype.templateContext.apply(this, arguments), {
         iconTypes: availableIconTypes,
         currentType: icons.get(this.model.get('iconType')).toJSON(),
@@ -212,9 +213,9 @@ define([
 
   // Select icons section container view
   SocialBlockSettingsIconSelectorView = Marionette.View.extend({
-    getTemplate: function() { return templates.socialSettingsIconSelector; },
+    getTemplate: function () { return window.templates.socialSettingsIconSelector; },
     regions: {
-      'icons': '#mailpoet_social_icon_selector_contents'
+      icons: '#mailpoet_social_icon_selector_contents'
     },
     events: {
       'click .mailpoet_add_social_icon': 'addSocialIcon'
@@ -235,9 +236,9 @@ define([
   });
 
   SocialBlockSettingsStylesView = Marionette.View.extend({
-    getTemplate: function() { return templates.socialSettingsStyles; },
+    getTemplate: function () { return window.templates.socialSettingsStyles; },
     modelEvents: {
-      'change': 'render'
+      change: 'render'
     },
     events: {
       'click .mailpoet_social_icon_set': 'changeSocialIconSet'
@@ -263,7 +264,7 @@ define([
   });
 
   Module.SocialWidgetView = base.WidgetView.extend({
-    getTemplate: function() { return templates.socialInsertion; },
+    getTemplate: function () { return window.templates.socialInsertion; },
     behaviors: {
       DraggableBehavior: {
         cloneOriginal: true,
@@ -297,7 +298,7 @@ define([
     }
   });
 
-  App.on('before:start', function(App, options) {
+  App.on('before:start', function (App) {
     App.registerBlockType('social', {
       blockModel: Module.SocialBlockModel,
       blockView: Module.SocialBlockView

assets/js/src/newsletter_editor/blocks/spacer.js

@@ -7,10 +7,10 @@ define([
   'underscore'
 ], function (App, BaseBlock, _) {
 
-  "use strict";
+  'use strict';
 
-  var Module = {},
+  var Module = {};
-      base = BaseBlock;
+  var base = BaseBlock;
 
   Module.SpacerBlockModel = base.BlockModel.extend({
     defaults: function () {
@@ -27,8 +27,8 @@ define([
   });
 
   Module.SpacerBlockView = base.BlockView.extend({
-    className: "mailpoet_block mailpoet_spacer_block mailpoet_droppable_block",
+    className: 'mailpoet_block mailpoet_spacer_block mailpoet_droppable_block',
-    getTemplate: function() { return templates.spacerBlock; },
+    getTemplate: function () { return window.templates.spacerBlock; },
     behaviors: _.defaults({
       ResizableBehavior: {
         elementSelector: '.mailpoet_spacer',
@@ -66,17 +66,17 @@ define([
   });
 
   Module.SpacerBlockSettingsView = base.BlockSettingsView.extend({
-    getTemplate: function() { return templates.spacerBlockSettings; },
+    getTemplate: function () { return window.templates.spacerBlockSettings; },
     events: function () {
       return {
-        "change .mailpoet_field_spacer_background_color": _.partial(this.changeColorField, "styles.block.backgroundColor"),
+        'change .mailpoet_field_spacer_background_color': _.partial(this.changeColorField, 'styles.block.backgroundColor'),
-        "click .mailpoet_done_editing": "close"
+        'click .mailpoet_done_editing': 'close'
       };
     }
   });
 
   Module.SpacerWidgetView = base.WidgetView.extend({
-    getTemplate: function() { return templates.spacerInsertion; },
+    getTemplate: function () { return window.templates.spacerInsertion; },
     behaviors: {
       DraggableBehavior: {
         cloneOriginal: true,
@@ -87,7 +87,7 @@ define([
     }
   });
 
-  App.on('before:start', function(App, options) {
+  App.on('before:start', function (App) {
     App.registerBlockType('spacer', {
       blockModel: Module.SpacerBlockModel,
       blockView: Module.SpacerBlockView

assets/js/src/newsletter_editor/blocks/text.js

@@ -4,13 +4,14 @@
 define([
   'newsletter_editor/App',
   'newsletter_editor/blocks/base',
-    'underscore'
+  'underscore',
-  ], function(App, BaseBlock, _) {
+  'mailpoet'
+], function (App, BaseBlock, _, MailPoet) {
 
-  "use strict";
+  'use strict';
 
-  var Module = {},
+  var Module = {};
-      base = BaseBlock;
+  var base = BaseBlock;
 
   Module.TextBlockModel = base.BlockModel.extend({
     defaults: function () {
@@ -22,17 +23,17 @@ define([
   });
 
   Module.TextBlockView = base.BlockView.extend({
-    className: "mailpoet_block mailpoet_text_block mailpoet_droppable_block",
+    className: 'mailpoet_block mailpoet_text_block mailpoet_droppable_block',
-    getTemplate: function() { return templates.textBlock; },
+    getTemplate: function () { return window.templates.textBlock; },
     modelEvents: _.omit(base.BlockView.prototype.modelEvents, 'change'), // Prevent rerendering on model change due to text editor redrawing
     behaviors: _.extend({}, base.BlockView.prototype.behaviors, {
       TextEditorBehavior: {
-        toolbar1: "formatselect bold italic forecolor | link unlink",
+        toolbar1: 'formatselect bold italic forecolor | link unlink',
-        toolbar2: "alignleft aligncenter alignright alignjustify | bullist numlist blockquote | code mailpoet_shortcodes",
+        toolbar2: 'alignleft aligncenter alignright alignjustify | bullist numlist blockquote | code mailpoet_shortcodes',
-        validElements: "p[class|style],span[class|style],a[href|class|title|target|style],h1[class|style],h2[class|style],h3[class|style],ol[class|style],ul[class|style],li[class|style],strong[class|style],em[class|style],strike,br,blockquote[class|style],table[class|style],tr[class|style],th[class|style],td[class|style]",
+        validElements: 'p[class|style],span[class|style],a[href|class|title|target|style],h1[class|style],h2[class|style],h3[class|style],ol[class|style],ul[class|style],li[class|style],strong[class|style],em[class|style],strike,br,blockquote[class|style],table[class|style],tr[class|style],th[class|style],td[class|style]',
-        invalidElements: "script",
+        invalidElements: 'script',
         blockFormats: 'Heading 1=h1;Heading 2=h2;Heading 3=h3;Paragraph=p',
-        plugins: "link lists code textcolor colorpicker mailpoet_shortcodes paste",
+        plugins: 'link lists code textcolor colorpicker mailpoet_shortcodes paste',
         configurationFilter: function (originalSettings) {
           return _.extend({}, originalSettings, {
             mailpoet_shortcodes: App.getConfig().get('shortcodes').toJSON(),
@@ -78,11 +79,11 @@ define([
   });
 
   Module.TextBlockSettingsView = base.BlockSettingsView.extend({
-    getTemplate: function() { return templates.textBlockSettings; }
+    getTemplate: function () { return window.templates.textBlockSettings; }
   });
 
   Module.TextWidgetView = base.WidgetView.extend({
-    getTemplate: function() { return templates.textInsertion; },
+    getTemplate: function () { return window.templates.textInsertion; },
     behaviors: {
       DraggableBehavior: {
         cloneOriginal: true,
@@ -93,7 +94,7 @@ define([
     }
   });
 
-  App.on('before:start', function(App, options) {
+  App.on('before:start', function (App) {
     App.registerBlockType('text', {
       blockModel: Module.TextBlockModel,
       blockView: Module.TextBlockView

assets/js/src/newsletter_editor/communicationsFix.js

@@ -7,15 +7,15 @@
  */
 
 (function (root, factory) {
+  var Marionette = require('backbone.marionette');
+  var Radio = require('backbone.radio');
+  var _ = require('underscore');
   if (typeof define === 'function' && define.amd) {
     define(['backbone.marionette', 'backbone.radio', 'underscore'], function (Marionette, Radio, _) {
       return factory(Marionette, Radio, _);
     });
   }
   else if (typeof exports !== 'undefined') {
-    var Marionette = require('backbone.marionette');
-    var Radio = require('backbone.radio');
-    var _ = require('underscore');
     module.exports = factory(Marionette, Radio, _);
   }
   else {
@@ -23,6 +23,7 @@
   }
 }(this, function (Marionette, Radio, _) {
   'use strict';
+
   var MarionetteApplication = Marionette.Application;
   MarionetteApplication.prototype._initChannel = function () {
     this.channelName = _.result(this, 'channelName') || 'global';

assets/js/src/newsletter_editor/components/communication.js

@@ -98,7 +98,7 @@ define([
     });
   };
 
-  App.on('start', function(App, options) {
+  App.on('start', function () {
     // Prefetch post types
     Module.getPostTypes();
   });

assets/js/src/newsletter_editor/components/content.js

@@ -4,7 +4,7 @@ define([
   'underscore',
   'mailpoet'
 ], function (App, SuperModel, _, MailPoet) {
-  "use strict";
+  'use strict';
 
   var Module = {};
 
@@ -13,7 +13,7 @@ define([
   // handled by other components.
   Module.NewsletterModel = SuperModel.extend({
     whitelisted: ['id', 'subject', 'preheader'],
-    initialize: function(options) {
+    initialize: function () {
       this.on('change', function () {
         App.getChannel().trigger('autoSave');
       });
@@ -34,14 +34,14 @@ define([
     if (type in Module._blockTypes) {
       return Module._blockTypes[type].blockModel;
     } else {
-      throw "Block type not supported: " + type;
+      throw 'Block type not supported: ' + type;
     }
   };
   Module.getBlockTypeView = function (type) {
     if (type in Module._blockTypes) {
       return Module._blockTypes[type].blockView;
     } else {
-      throw "Block type not supported: " + type;
+      throw 'Block type not supported: ' + type;
     }
   };
 

assets/js/src/newsletter_editor/components/heading.js

@@ -3,15 +3,16 @@ define([
   'backbone',
   'backbone.marionette',
   'underscore',
-    'jquery'
+  'jquery',
-  ], function(App, Backbone, Marionette, _, jQuery) {
+  'mailpoet'
+], function (App, Backbone, Marionette, _, jQuery, MailPoet) {
 
-  "use strict";
+  'use strict';
 
   var Module = {};
 
   Module.HeadingView = Marionette.View.extend({
-    getTemplate: function() { return templates.heading; },
+    getTemplate: function () { return window.templates.heading; },
     templateContext: function () {
       return {
         model: this.model.toJSON()
@@ -19,8 +20,8 @@ define([
     },
     events: function () {
       return {
-        'keyup .mailpoet_input_title': _.partial(this.changeField, "subject"),
+        'keyup .mailpoet_input_title': _.partial(this.changeField, 'subject'),
-        'keyup .mailpoet_input_preheader': _.partial(this.changeField, "preheader")
+        'keyup .mailpoet_input_preheader': _.partial(this.changeField, 'preheader')
       };
     },
     changeField: function (field, event) {
@@ -28,12 +29,12 @@ define([
     }
   });
 
-  App.on('start', function(App, options) {
+  App.on('start', function (App) {
     App._appView.showChildView('headingRegion', new Module.HeadingView({ model: App.getNewsletter() }));
     MailPoet.helpTooltip.show(document.getElementById('tooltip-designer-subject-line'), {
       tooltipId: 'tooltip-designer-subject-line-ti',
       tooltip: MailPoet.I18n.t('helpTooltipDesignerSubjectLine'),
-      place: "right"
+      place: 'right'
     });
     MailPoet.helpTooltip.show(document.getElementById('tooltip-designer-preheader'), {
       tooltipId: 'tooltip-designer-preheader-ti',

assets/js/src/newsletter_editor/components/save.js

@@ -8,7 +8,9 @@ define([
   'jquery',
   'blob',
   'file-saver',
-    'html2canvas'
+  'html2canvas',
+  'underscore',
+  'jquery'
 ], function (
   App,
   CommunicationComponent,
@@ -19,13 +21,15 @@ define([
   jQuery,
   Blob,
   FileSaver,
-    html2canvas
+  html2canvas,
+  _,
+  $
 ) {
 
-  "use strict";
+  'use strict';
 
-  var Module = {},
+  var Module = {};
-      saveTimeout;
+  var saveTimeout;
 
   // Save editor contents to server
   Module.save = function () {
@@ -65,15 +69,6 @@ define([
     });
   };
 
-  // For getting a promise after triggering save event
-  Module.saveAndProvidePromise = function(saveResult) {
-    var result = saveResult;
-    var promise = Module.save();
-    if (saveResult !== undefined) {
-      result.promise = promise;
-    }
-  };
-
   Module.getThumbnail = function (element, options) {
     var promise = html2canvas(element, options || {});
 
@@ -81,10 +76,9 @@ define([
       // Temporary workaround for html2canvas-alpha2.
       // Removes 1px left transparent border from resulting canvas.
 
-      var oldContext = oldCanvas.getContext('2d'),
+      var newCanvas = document.createElement('canvas');
-          newCanvas = document.createElement("canvas"),
+      var newContext = newCanvas.getContext('2d');
-          newContext = newCanvas.getContext("2d"),
+      var leftBorderWidth = 1;
-          leftBorderWidth = 1;
 
       newCanvas.width = oldCanvas.width;
       newCanvas.height = oldCanvas.height;
@@ -100,8 +94,7 @@ define([
   };
 
   Module.saveTemplate = function (options) {
-    var that = this,
+    var promise = jQuery.Deferred();
-        promise = jQuery.Deferred();
 
     promise.then(function (thumbnail) {
       var data = _.extend(options || {}, {
@@ -127,7 +120,6 @@ define([
   };
 
   Module.exportTemplate = function (options) {
-    var that = this;
     return Module.getThumbnail(
       jQuery('#mailpoet_editor_content > .mailpoet_block').get(0)
     ).then(function (thumbnail) {
@@ -148,7 +140,7 @@ define([
   };
 
   Module.SaveView = Marionette.View.extend({
-    getTemplate: function() { return templates.save; },
+    getTemplate: function () { return window.templates.save; },
     events: {
       'click .mailpoet_save_button': 'save',
       'click .mailpoet_save_show_options': 'toggleSaveOptions',
@@ -160,7 +152,7 @@ define([
       'click .mailpoet_save_export': 'toggleExportTemplate',
       'click .mailpoet_export_template': 'exportTemplate'
     },
-    initialize: function(options) {
+    initialize: function () {
       App.getChannel().on('beforeEditorSave', this.beforeSave, this);
       App.getChannel().on('afterEditorSave', this.afterSave, this);
     },
@@ -169,13 +161,13 @@ define([
     },
     save: function () {
       this.hideOptionContents();
-      App.getChannel().trigger('save');
+      App.getChannel().request('save');
     },
     beforeSave: function () {
       // TODO: Add a loading animation instead
       this.$('.mailpoet_autosaved_at').text(MailPoet.I18n.t('saving'));
     },
-    afterSave: function(json, response) {
+    afterSave: function (json) {
       this.validateNewsletter(json);
       // Update 'Last saved timer'
       this.$('.mailpoet_editor_last_saved').removeClass('mailpoet_hidden');
@@ -197,9 +189,9 @@ define([
       this.$('.mailpoet_save_as_template_container').addClass('mailpoet_hidden');
     },
     saveAsTemplate: function () {
-      var templateName = this.$('.mailpoet_save_as_template_name').val(),
+      var templateName = this.$('.mailpoet_save_as_template_name').val();
-          templateDescription = this.$('.mailpoet_save_as_template_description').val(),
+      var templateDescription = this.$('.mailpoet_save_as_template_description').val();
-          that = this;
+      var that = this;
 
       if (templateName === '') {
         MailPoet.Notice.error(
@@ -253,9 +245,9 @@ define([
       this.$('.mailpoet_export_template_container').addClass('mailpoet_hidden');
     },
     exportTemplate: function () {
-      var templateName = this.$('.mailpoet_export_template_name').val(),
+      var templateName = this.$('.mailpoet_export_template_name').val();
-          templateDescription = this.$('.mailpoet_export_template_description').val(),
+      var templateDescription = this.$('.mailpoet_export_template_description').val();
-          that = this;
+      var that = this;
 
       if (templateName === '') {
         MailPoet.Notice.error(
@@ -289,19 +281,23 @@ define([
     next: function () {
       this.hideOptionContents();
       if (!this.$('.mailpoet_save_next').hasClass('button-disabled')) {
+        Module._cancelAutosave();
+        Module.save().done(function () {
           window.location.href = App.getConfig().get('urls.send');
+        });
       }
     },
     validateNewsletter: function (jsonObject) {
+      var contents;
       if (!App._contentContainer.isValid()) {
         this.showValidationError(App._contentContainer.validationError);
         return;
       }
 
-      var contents = JSON.stringify(jsonObject);
+      contents = JSON.stringify(jsonObject);
       if (App.getConfig().get('validation.validateUnsubscribeLinkPresent') &&
-          contents.indexOf("[link:subscription_unsubscribe_url]") < 0 &&
+          contents.indexOf('[link:subscription_unsubscribe_url]') < 0 &&
-          contents.indexOf("[link:subscription_unsubscribe]") < 0) {
+          contents.indexOf('[link:subscription_unsubscribe]') < 0) {
         this.showValidationError(MailPoet.I18n.t('unsubscribeLinkMissing'));
         return;
       }
@@ -326,19 +322,27 @@ define([
     // may be requested
     var AUTOSAVE_DELAY_DURATION = 1000;
 
-    // Cancel save timer if another change happens before it completes
+    Module._cancelAutosave();
-    if (saveTimeout) clearTimeout(saveTimeout);
     saveTimeout = setTimeout(function () {
-      App.getChannel().trigger('save');
+      App.getChannel().request('save').always(function () {
-      clearTimeout(saveTimeout);
+        Module._cancelAutosave();
-      saveTimeout = undefined;
+      });
     }, AUTOSAVE_DELAY_DURATION);
   };
 
+  Module._cancelAutosave = function () {
+    if (!saveTimeout) return;
+
+    clearTimeout(saveTimeout);
+    saveTimeout = undefined;
+  };
+
   Module.beforeExitWithUnsavedChanges = function (e) {
+    var message;
+    var event;
     if (saveTimeout) {
-      var message = MailPoet.I18n.t('unsavedChangesWillBeLost');
+      message = MailPoet.I18n.t('unsavedChangesWillBeLost');
-      var event = e || window.event;
+      event = e || window.event;
 
       if (event) {
         event.returnValue = message;
@@ -348,17 +352,17 @@ define([
     }
   };
 
-  App.on('before:start', function(App, options) {
+  App.on('before:start', function (App) {
     var Application = App;
-    Application.save = Module.saveAndProvidePromise;
+    Application.save = Module.save;
     Application.getChannel().on('autoSave', Module.autoSave);
 
     window.onbeforeunload = Module.beforeExitWithUnsavedChanges;
 
-    Application.getChannel().on('save', function(saveResult) { Application.save(saveResult); });
+    Application.getChannel().reply('save', Application.save);
   });
 
-  App.on('start', function(App, options) {
+  App.on('start', function (App) {
     var saveView = new Module.SaveView();
     App._appView.showChildView('bottomRegion', saveView);
   });

assets/js/src/newsletter_editor/components/sidebar.js

@@ -6,8 +6,7 @@ define([
   'backbone.marionette',
   'backbone.supermodel',
   'underscore',
-    'jquery',
+  'jquery'
-    'sticky-kit'
 ], function (
   App,
   CommunicationComponent,
@@ -16,14 +15,13 @@ define([
   Marionette,
   SuperModel,
   _,
-    jQuery,
+  jQuery
-    StickyKit
   ) {
 
-  "use strict";
+  'use strict';
 
   var Module = {};
-
+  var SidebarView;
   // Widget handlers for use to create new content blocks via drag&drop
   Module._contentWidgets = new (Backbone.Collection.extend({
     model: SuperModel.extend({
@@ -52,8 +50,8 @@ define([
   Module.registerLayoutWidget = function (widget) { return Module._layoutWidgets.add(widget); };
   Module.getLayoutWidgets = function () { return Module._layoutWidgets; };
 
-  var SidebarView = Marionette.View.extend({
+  SidebarView = Marionette.View.extend({
-    getTemplate: function() { return templates.sidebar; },
+    getTemplate: function () { return window.templates.sidebar; },
     regions: {
       contentRegion: '.mailpoet_content_region',
       layoutRegion: '.mailpoet_layout_region',
@@ -62,14 +60,14 @@ define([
     },
     events: {
       'click .mailpoet_sidebar_region h3, .mailpoet_sidebar_region .handlediv': function (event) {
-        var $openRegion = this.$el.find('.mailpoet_sidebar_region:not(.closed)'),
+        var $openRegion = this.$el.find('.mailpoet_sidebar_region:not(.closed)');
-          $targetRegion = this.$el.find(event.target).closest('.mailpoet_sidebar_region');
+        var $targetRegion = this.$el.find(event.target).closest('.mailpoet_sidebar_region');
 
         $openRegion.find('.mailpoet_region_content').velocity(
           'slideUp',
           {
             duration: 250,
-            easing: "easeOut",
+            easing: 'easeOut',
             complete: function () {
               $openRegion.addClass('closed');
             }.bind(this)
@@ -81,7 +79,7 @@ define([
             'slideDown',
             {
               duration: 250,
-              easing: "easeIn",
+              easing: 'easeIn',
               complete: function () {
                 $targetRegion.removeClass('closed');
               }
@@ -90,7 +88,7 @@ define([
         }
       }
     },
-    initialize: function(options) {
+    initialize: function () {
       jQuery(window)
         .on('resize', this.updateHorizontalScroll.bind(this))
         .on('scroll', this.updateHorizontalScroll.bind(this));
@@ -113,9 +111,8 @@ define([
       // position of the sidebar would be scrollable and not fixed
       // partially out of visible screen
       this.$el.parent().each(function () {
-        var calculated_left, self;
+        var calculated_left;
-
+        var self = jQuery(this);
-        self = jQuery(this);
 
         if (self.css('position') === 'fixed') {
           calculated_left = self.parent().offset().left - jQuery(window).scrollLeft();
@@ -147,7 +144,7 @@ define([
    * Responsible for rendering draggable content widgets
    */
   Module.SidebarWidgetsView = Marionette.View.extend({
-    getTemplate: function() { return templates.sidebarContent; },
+    getTemplate: function () { return window.templates.sidebarContent; },
     regions: {
       widgets: '.mailpoet_region_content'
     },
@@ -167,53 +164,53 @@ define([
    * Responsible for rendering draggable layout widgets
    */
   Module.SidebarLayoutWidgetsView = Module.SidebarWidgetsView.extend({
-    getTemplate: function() { return templates.sidebarLayout; }
+    getTemplate: function () { return window.templates.sidebarLayout; }
   });
 
   /**
    * Responsible for managing global styles
    */
   Module.SidebarStylesView = Marionette.View.extend({
-    getTemplate: function() { return templates.sidebarStyles; },
+    getTemplate: function () { return window.templates.sidebarStyles; },
     behaviors: {
       ColorPickerBehavior: {}
     },
     events: function () {
       return {
-        "change #mailpoet_text_font_color": _.partial(this.changeColorField, 'text.fontColor'),
+        'change #mailpoet_text_font_color': _.partial(this.changeColorField, 'text.fontColor'),
-        "change #mailpoet_text_font_family": function(event) {
+        'change #mailpoet_text_font_family': function (event) {
           this.model.set('text.fontFamily', event.target.value);
         },
-        "change #mailpoet_text_font_size": function(event) {
+        'change #mailpoet_text_font_size': function (event) {
           this.model.set('text.fontSize', event.target.value);
         },
-        "change #mailpoet_h1_font_color": _.partial(this.changeColorField, 'h1.fontColor'),
+        'change #mailpoet_h1_font_color': _.partial(this.changeColorField, 'h1.fontColor'),
-        "change #mailpoet_h1_font_family": function(event) {
+        'change #mailpoet_h1_font_family': function (event) {
           this.model.set('h1.fontFamily', event.target.value);
         },
-        "change #mailpoet_h1_font_size": function(event) {
+        'change #mailpoet_h1_font_size': function (event) {
           this.model.set('h1.fontSize', event.target.value);
         },
-        "change #mailpoet_h2_font_color": _.partial(this.changeColorField, 'h2.fontColor'),
+        'change #mailpoet_h2_font_color': _.partial(this.changeColorField, 'h2.fontColor'),
-        "change #mailpoet_h2_font_family": function(event) {
+        'change #mailpoet_h2_font_family': function (event) {
           this.model.set('h2.fontFamily', event.target.value);
         },
-        "change #mailpoet_h2_font_size": function(event) {
+        'change #mailpoet_h2_font_size': function (event) {
           this.model.set('h2.fontSize', event.target.value);
         },
-        "change #mailpoet_h3_font_color": _.partial(this.changeColorField, 'h3.fontColor'),
+        'change #mailpoet_h3_font_color': _.partial(this.changeColorField, 'h3.fontColor'),
-        "change #mailpoet_h3_font_family": function(event) {
+        'change #mailpoet_h3_font_family': function (event) {
           this.model.set('h3.fontFamily', event.target.value);
         },
-        "change #mailpoet_h3_font_size": function(event) {
+        'change #mailpoet_h3_font_size': function (event) {
           this.model.set('h3.fontSize', event.target.value);
         },
-        "change #mailpoet_a_font_color": _.partial(this.changeColorField, 'link.fontColor'),
+        'change #mailpoet_a_font_color': _.partial(this.changeColorField, 'link.fontColor'),
-        "change #mailpoet_a_font_underline": function(event) {
+        'change #mailpoet_a_font_underline': function (event) {
           this.model.set('link.textDecoration', (event.target.checked) ? event.target.value : 'none');
         },
-        "change #mailpoet_newsletter_background_color": _.partial(this.changeColorField, 'wrapper.backgroundColor'),
+        'change #mailpoet_newsletter_background_color': _.partial(this.changeColorField, 'wrapper.backgroundColor'),
-        "change #mailpoet_background_color": _.partial(this.changeColorField, 'body.backgroundColor')
+        'change #mailpoet_background_color': _.partial(this.changeColorField, 'body.backgroundColor')
       };
     },
     templateContext: function () {
@@ -238,7 +235,7 @@ define([
   });
 
   Module.SidebarPreviewView = Marionette.View.extend({
-    getTemplate: function() { return templates.sidebarPreview; },
+    getTemplate: function () { return window.templates.sidebarPreview; },
     events: {
       'click .mailpoet_show_preview': 'showPreview',
       'click #mailpoet_send_preview': 'sendPreview'
@@ -271,7 +268,7 @@ define([
           previewUrl: response.meta.preview_url
         });
 
-        var view = this.previewView.render();
+        this.previewView.render();
         this.previewView.$el.css('height', '100%');
 
         MailPoet.Modal.popup({
@@ -321,13 +318,10 @@ define([
       MailPoet.Modal.loading(true);
 
       // save before sending
-      var saveResult = {promise: null};
+      App.getChannel().request('save').always(function () {
-      App.getChannel().trigger('save', saveResult);
-
-      saveResult.promise.always(function() {
         CommunicationComponent.previewNewsletter(data).always(function () {
           MailPoet.Modal.loading(false);
-        }).done(function(response) {
+        }).done(function () {
           MailPoet.Notice.success(
             MailPoet.I18n.t('newsletterPreviewSent'),
             { scroll: true }
@@ -349,7 +343,7 @@ define([
   });
 
   Module.NewsletterPreviewView = Marionette.View.extend({
-    getTemplate: function() { return templates.newsletterPreview; },
+    getTemplate: function () { return window.templates.newsletterPreview; },
     initialize: function (options) {
       this.previewUrl = options.previewUrl;
       this.width = '100%';
@@ -366,7 +360,7 @@ define([
     }
   });
 
-  App.on('before:start', function(App, options) {
+  App.on('before:start', function (App) {
     var Application = App;
     Application.registerWidget = Module.registerWidget;
     Application.getWidgets = Module.getWidgets;
@@ -374,9 +368,8 @@ define([
     Application.getLayoutWidgets = Module.getLayoutWidgets;
   });
 
-  App.on('start', function(App, options) {
+  App.on('start', function (App) {
-    var stylesModel = App.getGlobalStyles(),
+    var sidebarView = new SidebarView();
-      sidebarView = new SidebarView();
 
     App._appView.showChildView('sidebarRegion', sidebarView);
 

assets/js/src/newsletter_editor/components/styles.js

@@ -1,10 +1,11 @@
 define([
   'newsletter_editor/App',
   'backbone.marionette',
-    'backbone.supermodel'
+  'backbone.supermodel',
-  ], function(App, Marionette, SuperModel) {
+  'underscore'
+], function (App, Marionette, SuperModel, _) {
 
-  "use strict";
+  'use strict';
 
   var Module = {};
 
@@ -47,9 +48,9 @@ define([
   });
 
   Module.StylesView = Marionette.View.extend({
-    getTemplate: function() { return templates.styles; },
+    getTemplate: function () { return window.templates.styles; },
     modelEvents: {
-      'change': 'render'
+      change: 'render'
     },
     serializeData: function () {
       return this.model.toJSON();
@@ -70,17 +71,19 @@ define([
 
   App.on('before:start', function (App, options) {
     var Application = App;
+    var body;
+    var globalStyles;
     // Expose style methods to global application
     Application.getGlobalStyles = Module.getGlobalStyles;
     Application.setGlobalStyles = Module.setGlobalStyles;
     Application.getAvailableStyles = Module.getAvailableStyles;
 
-    var body = options.newsletter.body;
+    body = options.newsletter.body;
-    var globalStyles = (_.has(body, 'globalStyles')) ? body.globalStyles : {};
+    globalStyles = (_.has(body, 'globalStyles')) ? body.globalStyles : {};
     this.setGlobalStyles(globalStyles);
   });
 
-  App.on('start', function(App, options) {
+  App.on('start', function (App) {
     var stylesView = new Module.StylesView({ model: App.getGlobalStyles() });
     App._appView.showChildView('stylesRegion', stylesView);
   });

assets/js/src/newsletter_editor/tinymce/mailpoet_shortcodes/plugin.js

@@ -10,12 +10,12 @@
 
 /* jshint unused:false */
 /* global tinymce:true */
-tinymce.PluginManager.add('mailpoet_shortcodes', function(editor, url) {
+tinymce.PluginManager.add('mailpoet_shortcodes', function (editor) {
   var appendLabelAndClose = function (shortcode) {
     editor.insertContent(shortcode);
     editor.windowManager.close();
-    },
+  };
-    generateOnClickFunc = function(shortcode) {
+  var generateOnClickFunc = function (shortcode) {
     return function () {
       appendLabelAndClose(shortcode);
     };
@@ -24,17 +24,19 @@ tinymce.PluginManager.add('mailpoet_shortcodes', function(editor, url) {
   editor.addButton('mailpoet_shortcodes', {
     icon: 'mailpoet_shortcodes',
     onclick: function () {
-      var shortcodes = [],
+      var shortcodes = [];
-        configShortcodes = editor.settings.mailpoet_shortcodes;
+      var configShortcodes = editor.settings.mailpoet_shortcodes;
+      var segment;
+      var i;
 
-      for (var segment in configShortcodes) {
+      for (segment in configShortcodes) {
         if (configShortcodes.hasOwnProperty(segment)) {
           shortcodes.push({
             type: 'label',
             text: segment
           });
 
-          for (var i = 0; i < configShortcodes[segment].length; i += 1) {
+          for (i = 0; i < configShortcodes[segment].length; i += 1) {
             shortcodes.push({
               type: 'button',
               text: configShortcodes[segment][i].text,
@@ -46,8 +48,8 @@ tinymce.PluginManager.add('mailpoet_shortcodes', function(editor, url) {
 
       // Open window
       editor.windowManager.open({
-        height: parseInt(editor.getParam("plugin_mailpoet_shortcodes_height", 400)),
+        height: parseInt(editor.getParam('plugin_mailpoet_shortcodes_height', 400)),
-        width: parseInt(editor.getParam("plugin_mailpoet_shortcodes_width", 450)),
+        width: parseInt(editor.getParam('plugin_mailpoet_shortcodes_width', 450)),
         autoScroll: true,
         title: editor.settings.mailpoet_shortcodes_window_title,
         body: shortcodes,

assets/js/src/newsletter_editor/widgets/ImageAndTextWidgetView.js

@@ -1,27 +0,0 @@
-/**
- * A sample implementation of template widgets.
- * A draggable widget, on drop creates a container with (image|text) block.
- */
-ImageAndTextTemplateWidgetView = EditorApplication.module('blocks.base').WidgetView.extend({
-  getTemplate: function() { return templates.imageAndTextInsertion; },
-  className: 'mailpoet_droppable_block mailpoet_droppable_widget',
-  behaviors: {
-    DraggableBehavior: {
-      drop: function() {
-        return new (EditorApplication.getBlockTypeModel('container'))({
-          type: 'container',
-          orientation: 'horizontal',
-          blocks: [
-            {
-              type: 'image'
-            },
-            {
-              type: 'text',
-              text: 'Some random text'
-            }
-          ]
-        }, {parse: true});
-      }
-    }
-  }
-});

assets/js/src/newsletters/badges/stats.jsx

@@ -49,7 +49,7 @@ const stats = {
 };
 
 class StatsBadge extends React.Component {
-  getBadgeType(stat, rate) {
+  static getBadgeType(stat, rate) {
     const len = stat.badgeRanges.length;
     for (let i = 0; i < len; i += 1) {
       if (rate > stat.badgeRanges[i]) {
@@ -70,7 +70,7 @@ class StatsBadge extends React.Component {
       return null;
     }
 
-    const badgeType = this.getBadgeType(stat, rate);
+    const badgeType = StatsBadge.getBadgeType(stat, rate);
     const badge = badges[badgeType] || null;
     if (!badge) {
       return null;

assets/js/src/newsletters/breadcrumb.jsx

@@ -41,12 +41,12 @@ define(
       render: function () {
         const steps = this.state.steps.map((step, index) => {
           const stepClasses = classNames(
-            { 'mailpoet_current': (this.props.step === step.name) }
+            { mailpoet_current: (this.props.step === step.name) }
           );
 
           let label = step.label;
 
-          if(step['link'] !== undefined && this.props.step !== step.name) {
+          if (step.link !== undefined && this.props.step !== step.name) {
             label = (
               <Link to={step.link}>{ step.label }</Link>
             );

assets/js/src/newsletters/listings/mixins.jsx

@@ -9,7 +9,7 @@ import jQuery from 'jquery';
 import Hooks from 'wp-js-hooks';
 import StatsBadge from 'newsletters/badges/stats.jsx';
 
-const _QueueMixin = {
+const QueueMixin = {
   pauseSending: function (newsletter) {
     MailPoet.Ajax.post({
       api_version: window.mailpoet_api_version,
@@ -59,7 +59,7 @@ const _QueueMixin = {
       return (
         <span>{MailPoet.I18n.t('paused')}</span>
       );
-    } else {
+    }
     if (newsletter.queue.status === 'scheduled') {
       return (
         <span>
@@ -69,7 +69,7 @@ const _QueueMixin = {
     }
     const progressClasses = classNames(
         'mailpoet_progress',
-        { 'mailpoet_progress_complete': newsletter.queue.status === 'completed' }
+        { mailpoet_progress_complete: newsletter.queue.status === 'completed' }
       );
 
       // calculate percentage done
@@ -84,8 +84,8 @@ const _QueueMixin = {
         <span>
           {
               MailPoet.I18n.t('newsletterQueueCompleted')
-              .replace("%$1d", newsletter.queue.count_processed)
+              .replace('%$1d', parseInt(newsletter.queue.count_processed, 10).toLocaleString())
-              .replace("%$2d", newsletter.queue.count_total)
+              .replace('%$2d', parseInt(newsletter.queue.count_total, 10).toLocaleString())
             }
         </span>
         );
@@ -120,7 +120,7 @@ const _QueueMixin = {
       percentage = MailPoet.I18n.t('noSubscribers');
     } else {
       progress_bar_width = percentage;
-        percentage += "%";
+      percentage += '%';
     }
 
     return (
@@ -128,7 +128,7 @@ const _QueueMixin = {
         <div className={progressClasses}>
           <span
             className="mailpoet_progress_bar"
-                style={ { width: progress_bar_width + "%" } }
+            style={{ width: progress_bar_width + '%' }}
               ></span>
           <span className="mailpoet_progress_label">
             { percentage }
@@ -139,11 +139,17 @@ const _QueueMixin = {
         </p>
       </div>
     );
-    }
   },
 };
 
-const _StatisticsMixin = {
+const trackStatsCTAClicked = function () {
+  MailPoet.trackEvent(
+    'User has clicked a CTA to view detailed stats',
+    { 'MailPoet Free version': window.mailpoet_version }
+  );
+};
+
+const StatisticsMixin = {
   renderStatistics: function (newsletter, is_sent, current_time) {
     let sent = is_sent;
     if (sent === undefined) {
@@ -159,6 +165,7 @@ const _StatisticsMixin = {
     }
 
     let params = {};
+    Hooks.addFilter('mailpoet_newsletters_listing_stats_before', this.addStatsCTALink);
     params = Hooks.applyFilters('mailpoet_newsletters_listing_stats_before', params, newsletter);
 
     // welcome emails provide explicit total_sent value
@@ -179,11 +186,11 @@ const _StatisticsMixin = {
     const percentage_opened_display = MailPoet.Num.toLocaleFixed(percentage_opened, 1);
     const percentage_unsubscribed_display = MailPoet.Num.toLocaleFixed(percentage_unsubscribed, 1);
 
-    let show_stats_timeout,
+    let show_stats_timeout;
-      newsletter_date,
+    let newsletter_date;
-      sent_hours_ago,
+    let sent_hours_ago;
-      too_early_for_stats,
+    let too_early_for_stats;
-      show_kb_link;
+    let show_kb_link;
     if (current_time !== undefined) {
       // standard emails and post notifications:
       // display green box for newsletters that were just sent
@@ -239,7 +246,7 @@ const _StatisticsMixin = {
         <div>
           <span className="mailpoet_stats_text">
             { percentage_opened_display }%,
-            { " " }
+            { ' ' }
             { percentage_clicked_display }%
             <span className="mailpoet_stat_hidden">
               , { percentage_unsubscribed_display }%
@@ -282,6 +289,20 @@ const _StatisticsMixin = {
 
     if (total_sent > 0 && params.link) {
       // wrap content in a link
+      if (params.externalLink) {
+        return (
+          <div>
+            <a
+              key={`stats-${newsletter.id}`}
+              href={params.link}
+              onClick={params.onClick || null}
+            >
+              {content}
+            </a>
+            {after_content}
+          </div>
+        );
+      }
       return (
         <div>
           <Link
@@ -303,9 +324,40 @@ const _StatisticsMixin = {
       </div>
     );
   },
+  addStatsCTAAction: function (actions) {
+    if (window.mailpoet_premium_active) {
+      return actions;
+    }
+    actions.unshift({
+      name: 'stats',
+      link: function () {
+        return (
+          <a href={'admin.php?page=mailpoet-premium'} onClick={trackStatsCTAClicked}>
+            {MailPoet.I18n.t('statsListingActionTitle')}
+          </a>
+        );
+      },
+      display: function (newsletter) {
+        // welcome emails provide explicit total_sent value
+        const count_processed = newsletter.queue && newsletter.queue.count_processed;
+        return ~~(newsletter.total_sent || count_processed) > 0;
+      },
+    });
+    return actions;
+  },
+  addStatsCTALink: function (params) {
+    if (window.mailpoet_premium_active) {
+      return params;
+    }
+    const newParams = params;
+    newParams.link = 'admin.php?page=mailpoet-premium';
+    newParams.externalLink = true;
+    newParams.onClick = trackStatsCTAClicked;
+    return newParams;
+  },
 };
 
-const _MailerMixin = {
+const MailerMixin = {
   checkMailerStatus: function (state) {
     if (state.meta.mta_log.error && state.meta.mta_log.status === 'paused') {
       MailPoet.Notice.error(
@@ -327,7 +379,7 @@ const _MailerMixin = {
       MailPoet.I18n.t('mailerCheckSettingsNotice'),
       /\[link\](.*?)\[\/link\]/g,
       match => (
-        <a href={`?page=mailpoet-settings#mta`}>{ match }</a>
+        <a href={'?page=mailpoet-settings#mta'} key="check-sending">{ match }</a>
       )
     );
     if (state.meta.mta_log.error.operation === 'send') {
@@ -374,8 +426,6 @@ const _MailerMixin = {
 };
 
 
-
+export { QueueMixin };
-
+export { StatisticsMixin };
-export { _QueueMixin as QueueMixin };
+export { MailerMixin };
-export { _StatisticsMixin as StatisticsMixin };
-export { _MailerMixin as MailerMixin };

assets/js/src/newsletters/listings/notification.jsx

@@ -185,7 +185,7 @@ const NewsletterListNotification = React.createClass({
     return (
       <select
         data-id={newsletter.id}
-        defaultValue={ newsletter.status }
+        defaultValue={newsletter.status}
         onChange={this.updateStatus}
       >
         <option value="active">{ MailPoet.I18n.t('active') }</option>
@@ -195,12 +195,14 @@ const NewsletterListNotification = React.createClass({
   },
   renderSettings: function (newsletter) {
     let sendingFrequency;
-    let sendingToSegments;
 
     // get list of segments' name
     const segments = newsletter.segments.map((segment) => {
       return segment.name;
     });
+    const sendingToSegments = MailPoet.I18n.t('ifNewContentToSegments').replace(
+      '%$1s', segments.join(', ')
+    );
 
     // check if the user has specified segments to send to
     if (segments.length === 0) {
@@ -209,10 +211,7 @@ const NewsletterListNotification = React.createClass({
           { MailPoet.I18n.t('sendingToSegmentsNotSpecified') }
         </span>
       );
-    } else {
+    }
-      sendingToSegments = MailPoet.I18n.t('ifNewContentToSegments').replace(
-        '%$1s', segments.join(', ')
-      );
 
     // set sending frequency
     switch (newsletter.options.intervalType) {
@@ -252,7 +251,7 @@ const NewsletterListNotification = React.createClass({
         sendingFrequency = MailPoet.I18n.t('sendImmediately');
         break;
     }
-    }
+
 
     return (
       <span>
@@ -266,13 +265,12 @@ const NewsletterListNotification = React.createClass({
       return (
         MailPoet.I18n.t('notSentYet')
       );
-    } else {
+    }
     return (
       <Link
         to={`/notification/history/${newsletter.id}`}
         >{ MailPoet.I18n.t('viewHistory') }</Link>
     );
-    }
   },
   renderItem: function (newsletter, actions) {
     const rowClasses = classNames(
@@ -311,13 +309,13 @@ const NewsletterListNotification = React.createClass({
     return (
       <div>
         <h1 className="title">
-          {MailPoet.I18n.t('pageTitle')} <Link className="page-title-action" to="/new">{MailPoet.I18n.t('new')}</Link>
+          {MailPoet.I18n.t('pageTitle')} <Link className="page-title-action" to="/new" data-automation-id="new_email">{MailPoet.I18n.t('new')}</Link>
         </h1>
 
         <ListingTabs tab="notification" />
 
         <Listing
-          limit={ mailpoet_listing_per_page }
+          limit={window.mailpoet_listing_per_page}
           location={this.props.location}
           params={this.props.params}
           endpoint="newsletters"

assets/js/src/newsletters/listings/notification_history.jsx

@@ -13,7 +13,7 @@ import {
   MailerMixin,
 } from 'newsletters/listings/mixins.jsx';
 
-const mailpoet_tracking_enabled = (!!(window['mailpoet_tracking_enabled']));
+const mailpoet_tracking_enabled = (!!(window.mailpoet_tracking_enabled));
 
 const columns = [
   {
@@ -52,6 +52,7 @@ let newsletter_actions = [
   },
 ];
 
+Hooks.addFilter('mailpoet_newsletters_listings_notification_history_actions', StatisticsMixin.addStatsCTAAction);
 newsletter_actions = Hooks.applyFilters('mailpoet_newsletters_listings_notification_history_actions', newsletter_actions);
 
 const NewsletterListNotificationHistory = React.createClass({
@@ -99,7 +100,7 @@ const NewsletterListNotificationHistory = React.createClass({
     return (
       <div>
         <h1 className="title">
-          {MailPoet.I18n.t('pageTitle')} <Link className="page-title-action" to="/new">{MailPoet.I18n.t('new')}</Link>
+          {MailPoet.I18n.t('pageTitle')} <Link className="page-title-action" to="/new" data-automation-id="new_email">{MailPoet.I18n.t('new')}</Link>
         </h1>
 
         <ListingTabs tab="notification" />
@@ -110,7 +111,7 @@ const NewsletterListNotificationHistory = React.createClass({
         >{MailPoet.I18n.t('backToPostNotifications')}</Link>
 
         <Listing
-          limit={ mailpoet_listing_per_page }
+          limit={window.mailpoet_listing_per_page}
           location={this.props.location}
           params={this.props.params}
           endpoint="newsletters"

assets/js/src/newsletters/listings/standard.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Link } from 'react-router';
+import { confirmAlert } from 'react-confirm-alert';
 import classNames from 'classnames';
 import MailPoet from 'mailpoet';
 import Hooks from 'wp-js-hooks';
@@ -13,7 +14,7 @@ import {
   MailerMixin,
 } from 'newsletters/listings/mixins.jsx';
 
-const mailpoet_tracking_enabled = (!!(window['mailpoet_tracking_enabled']));
+const mailpoet_tracking_enabled = (!!(window.mailpoet_tracking_enabled));
 
 const messages = {
   onTrash: (response) => {
@@ -98,13 +99,23 @@ const bulk_actions = [
 ];
 
 const confirmEdit = (newsletter) => {
+  const redirectToEditing = () => {
+    window.location.href = `?page=mailpoet-newsletter-editor&id=${newsletter.id}`;
+  };
   if (
     !newsletter.queue
     || newsletter.status != 'sending'
     || newsletter.queue.status !== null
-    || window.confirm(MailPoet.I18n.t('confirmEdit'))
   ) {
-    window.location.href = `?page=mailpoet-newsletter-editor&id=${ newsletter.id }`;
+    redirectToEditing();
+  } else {
+    confirmAlert({
+      title: MailPoet.I18n.t('confirmTitle'),
+      message: MailPoet.I18n.t('confirmEdit'),
+      confirmLabel: MailPoet.I18n.t('confirmLabel'),
+      cancelLabel: MailPoet.I18n.t('cancelLabel'),
+      onConfirm: redirectToEditing,
+    });
   }
 };
 
@@ -157,6 +168,7 @@ let newsletter_actions = [
   },
 ];
 
+Hooks.addFilter('mailpoet_newsletters_listings_standard_actions', StatisticsMixin.addStatsCTAAction);
 newsletter_actions = Hooks.applyFilters('mailpoet_newsletters_listings_standard_actions', newsletter_actions);
 
 const NewsletterListStandard = React.createClass({
@@ -210,6 +222,7 @@ const NewsletterListStandard = React.createClass({
             onClick={() => MailPoet.trackEvent('Emails > Add New',
               { 'MailPoet Free version': window.mailpoet_version }
             )}
+            data-automation-id="new_email"
           >
             {MailPoet.I18n.t('new')}
           </Link>
@@ -218,7 +231,7 @@ const NewsletterListStandard = React.createClass({
         <ListingTabs tab="standard" />
 
         <Listing
-          limit={ mailpoet_listing_per_page }
+          limit={window.mailpoet_listing_per_page}
           location={this.props.location}
           params={this.props.params}
           endpoint="newsletters"

assets/js/src/newsletters/listings/tabs.jsx

@@ -46,7 +46,7 @@ const ListingTabs = React.createClass({
     });
 
     return (
-      <h2 className="nav-tab-wrapper">
+      <h2 className="nav-tab-wrapper" data-automation-id="newsletters_listing_tabs">
         { tabs }
       </h2>
     );

assets/js/src/newsletters/listings/welcome.jsx

@@ -13,7 +13,7 @@ import Hooks from 'wp-js-hooks';
 
 const mailpoet_roles = window.mailpoet_roles || {};
 const mailpoet_segments = window.mailpoet_segments || {};
-const mailpoet_tracking_enabled = (!!(window['mailpoet_tracking_enabled']));
+const mailpoet_tracking_enabled = (!!(window.mailpoet_tracking_enabled));
 
 const messages = {
   onTrash: (response) => {
@@ -124,6 +124,7 @@ let newsletter_actions = [
   },
 ];
 
+Hooks.addFilter('mailpoet_newsletters_listings_welcome_notification_actions', StatisticsMixin.addStatsCTAAction);
 newsletter_actions = Hooks.applyFilters('mailpoet_newsletters_listings_welcome_notification_actions', newsletter_actions);
 
 const NewsletterListWelcome = React.createClass({
@@ -165,7 +166,7 @@ const NewsletterListWelcome = React.createClass({
         <p>
           <select
             data-id={newsletter.id}
-            defaultValue={ newsletter.status }
+            defaultValue={newsletter.status}
             onChange={this.updateStatus}
           >
             <option value="active">{ MailPoet.I18n.t('active') }</option>
@@ -179,6 +180,7 @@ const NewsletterListWelcome = React.createClass({
   renderSettings: function (newsletter) {
     let sendingEvent;
     let sendingDelay;
+    let segment;
 
     // set sending event
     switch (newsletter.options.event) {
@@ -195,8 +197,8 @@ const NewsletterListWelcome = React.createClass({
 
       case 'segment':
         // get segment
-        const segment = _.find(mailpoet_segments, (segment) => {
+        segment = _.find(mailpoet_segments, (seg) => {
-          return (~~(segment.id) === ~~(newsletter.options.segment));
+          return (~~(seg.id) === ~~(newsletter.options.segment));
         });
 
         if (segment === undefined) {
@@ -205,11 +207,11 @@ const NewsletterListWelcome = React.createClass({
               { MailPoet.I18n.t('sendingToSegmentsNotSpecified') }
             </span>
           );
-        } else {
+        }
         sendingEvent = MailPoet.I18n.t('welcomeEventSegment').replace(
             '%$1s', segment.name
           );
-        }
+
         break;
     }
 
@@ -289,13 +291,13 @@ const NewsletterListWelcome = React.createClass({
     return (
       <div>
         <h1 className="title">
-          { MailPoet.I18n.t('pageTitle') } <Link className="page-title-action" to="/new">{ MailPoet.I18n.t('new') }</Link>
+          { MailPoet.I18n.t('pageTitle') } <Link className="page-title-action" to="/new" data-automation-id="new_email">{ MailPoet.I18n.t('new') }</Link>
         </h1>
 
         <ListingTabs tab="welcome" />
 
         <Listing
-          limit={ mailpoet_listing_per_page }
+          limit={window.mailpoet_listing_per_page}
           location={this.props.location}
           params={this.props.params}
           endpoint="newsletters"

assets/js/src/newsletters/newsletters.jsx

@@ -37,7 +37,8 @@ if(container) {
         {/* Listings */}
         <Route path="standard(/)**" params={{ tab: 'standard' }} component={NewsletterListStandard} />
         <Route path="welcome(/)**" component={NewsletterListWelcome} />
-        <Route path="notification/history/:parent_id(/)**" component={ NewsletterListNotificationHistory } />
+        <Route path="notification/history/:parent_id(/)**"
+          component={NewsletterListNotificationHistory} />
         <Route path="notification(/)**" component={NewsletterListNotification} />
         {/* Newsletter: type selection */}
         <Route path="new" component={NewsletterTypes} />

assets/js/src/newsletters/scheduling/common.jsx

@@ -4,19 +4,19 @@ import MailPoet from 'mailpoet';
 const timeFormat = window.mailpoet_time_format || 'H:i';
 
 // welcome emails
-const _timeDelayValues = {
+const timeDelayValues = {
-  'immediate': MailPoet.I18n.t('delayImmediately'),
+  immediate: MailPoet.I18n.t('delayImmediately'),
-  'hours': MailPoet.I18n.t('delayHoursAfter'),
+  hours: MailPoet.I18n.t('delayHoursAfter'),
-  'days': MailPoet.I18n.t('delayDaysAfter'),
+  days: MailPoet.I18n.t('delayDaysAfter'),
-  'weeks': MailPoet.I18n.t('delayWeeksAfter'),
+  weeks: MailPoet.I18n.t('delayWeeksAfter'),
 };
 
-const _intervalValues = {
+const intervalValues = {
-  'daily': MailPoet.I18n.t('daily'),
+  daily: MailPoet.I18n.t('daily'),
-  'weekly': MailPoet.I18n.t('weekly'),
+  weekly: MailPoet.I18n.t('weekly'),
-  'monthly': MailPoet.I18n.t('monthly'),
+  monthly: MailPoet.I18n.t('monthly'),
-  'nthWeekDay': MailPoet.I18n.t('monthlyEvery'),
+  nthWeekDay: MailPoet.I18n.t('monthlyEvery'),
-  'immediately': MailPoet.I18n.t('immediately'),
+  immediately: MailPoet.I18n.t('immediately'),
 };
 
 // notification emails
@@ -24,7 +24,7 @@ const SECONDS_IN_DAY = 86400;
 const TIME_STEP_SECONDS = 3600;
 const numberOfTimeSteps = SECONDS_IN_DAY / TIME_STEP_SECONDS;
 
-const _timeOfDayValues = _.object(_.map(
+const timeOfDayValues = _.object(_.map(
   _.times(numberOfTimeSteps, (step) => {
     return step * TIME_STEP_SECONDS;
   }), (seconds) => {
@@ -35,7 +35,7 @@ const _timeOfDayValues = _.object(_.map(
 })
 );
 
-const _weekDayValues = {
+const weekDayValues = {
   0: MailPoet.I18n.t('sunday'),
   1: MailPoet.I18n.t('monday'),
   2: MailPoet.I18n.t('tuesday'),
@@ -46,7 +46,7 @@ const _weekDayValues = {
 };
 
 const NUMBER_OF_DAYS_IN_MONTH = 28;
-const _monthDayValues = _.object(
+const monthDayValues = _.object(
   _.map(
     _.times(NUMBER_OF_DAYS_IN_MONTH, (day) => {
       return day;
@@ -60,23 +60,23 @@ const _monthDayValues = _.object(
     if (labels[day] !== undefined) {
       label = labels[day];
     } else {
-      label = MailPoet.I18n.t('nth').replace("%$1d", day + 1);
+      label = MailPoet.I18n.t('nth').replace('%$1d', day + 1);
     }
     return [day + 1, label];
   }
   )
 );
 
-const _nthWeekDayValues = {
+const nthWeekDayValues = {
-  '1': MailPoet.I18n.t('first'),
+  1: MailPoet.I18n.t('first'),
-  '2': MailPoet.I18n.t('second'),
+  2: MailPoet.I18n.t('second'),
-  '3': MailPoet.I18n.t('third'),
+  3: MailPoet.I18n.t('third'),
-  'L': MailPoet.I18n.t('last'),
+  L: MailPoet.I18n.t('last'),
 };
 
-export { _timeDelayValues as timeDelayValues };
+export { timeDelayValues };
-export { _intervalValues as intervalValues };
+export { intervalValues };
-export { _timeOfDayValues as timeOfDayValues };
+export { timeOfDayValues };
-export { _weekDayValues as weekDayValues };
+export { weekDayValues };
-export { _monthDayValues as monthDayValues };
+export { monthDayValues };
-export { _nthWeekDayValues as nthWeekDayValues };
+export { nthWeekDayValues };

assets/js/src/newsletters/send.jsx

@@ -10,6 +10,7 @@ define(
     'newsletters/send/welcome.jsx',
     'newsletters/breadcrumb.jsx',
     'help-tooltip.jsx',
+    'jquery',
   ],
   (
     React,
@@ -21,9 +22,9 @@ define(
     NotificationNewsletterFields,
     WelcomeNewsletterFields,
     Breadcrumb,
-    HelpTooltip
+    HelpTooltip,
+    jQuery
   ) => {
-
     const NewsletterSend = React.createClass({
       contextTypes: {
         router: React.PropTypes.object.isRequired,
@@ -93,7 +94,7 @@ define(
         if (!this.isValid()) {
           jQuery('#mailpoet_newsletter').parsley().validate();
         } else {
-          this._save(e).done(() => {
+          this.saveNewsletter(e).done(() => {
             this.setState({ loading: true });
           }).done((response) => {
             switch (response.data.type) {
@@ -107,30 +108,30 @@ define(
                     id: this.props.params.id,
                     status: 'active',
                   },
-                }).done((response) => {
+                }).done((response2) => {
                   // redirect to listing based on newsletter type
                   this.context.router.push(`/${this.state.item.type || ''}`);
                   const opts = this.state.item.options;
                   // display success message depending on newsletter type
-                  if (response.data.type === 'welcome') {
+                  if (response2.data.type === 'welcome') {
                     MailPoet.Notice.success(
                       MailPoet.I18n.t('welcomeEmailActivated')
                     );
                     MailPoet.trackEvent('Emails > Welcome email activated', {
                       'MailPoet Free version': window.mailpoet_version,
                       'List type': opts.event,
-                      'Delay': opts.afterTimeNumber + ' ' + opts.afterTimeType,
+                      Delay: opts.afterTimeNumber + ' ' + opts.afterTimeType,
                     });
-                  } else if (response.data.type === 'notification') {
+                  } else if (response2.data.type === 'notification') {
                     MailPoet.Notice.success(
                       MailPoet.I18n.t('postNotificationActivated')
                     );
                     MailPoet.trackEvent('Emails > Post notifications activated', {
                       'MailPoet Free version': window.mailpoet_version,
-                      'Frequency': opts.intervalType,
+                      Frequency: opts.intervalType,
                     });
                   }
-                }).fail(this._showError);
+                }).fail(this.showError);
               default:
                 return MailPoet.Ajax.post({
                   api_version: window.mailpoet_api_version,
@@ -139,11 +140,11 @@ define(
                   data: {
                     newsletter_id: this.props.params.id,
                   },
-                }).done((response) => {
+                }).done((response2) => {
                   // redirect to listing based on newsletter type
                   this.context.router.push(`/${this.state.item.type || ''}`);
 
-                  if (response.data.status === 'scheduled') {
+                  if (response2.data.status === 'scheduled') {
                     MailPoet.Notice.success(
                       MailPoet.I18n.t('newsletterHasBeenScheduled')
                     );
@@ -160,9 +161,11 @@ define(
                       'MailPoet Free version': window.mailpoet_version,
                     });
                   }
-                }).fail(this._showError);
+                }).fail(this.showError);
             }
-          }).fail(this._showError).always(() => {
+          })
+          .fail(this.showError)
+          .always(() => {
             this.setState({ loading: false });
           });
         }
@@ -173,7 +176,7 @@ define(
         if (!this.isValid()) {
           jQuery('#mailpoet_newsletter').parsley().validate();
         } else {
-          this._save(e).done(() => {
+          this.saveNewsletter(e).done(() => {
             this.setState({ loading: true });
           }).done(() => {
             MailPoet.Ajax.post({
@@ -196,7 +199,9 @@ define(
                 );
               }
             });
-          }).fail(this._showError).always(() => {
+          })
+          .fail(this.showError)
+          .always(() => {
             this.setState({ loading: false });
           });
         }
@@ -205,27 +210,27 @@ define(
       handleSave: function (e) {
         e.preventDefault();
 
-        this._save(e).done(() => {
+        this.saveNewsletter(e).done(() => {
           MailPoet.Notice.success(
             MailPoet.I18n.t('newsletterUpdated')
           );
         }).done(() => {
           this.context.router.push(`/${this.state.item.type || ''}`);
-        }).fail(this._showError);
+        }).fail(this.showError);
       },
       handleRedirectToDesign: function (e) {
         e.preventDefault();
         const redirectTo = e.target.href;
 
-        this._save(e).done(() => {
+        this.saveNewsletter(e).done(() => {
           MailPoet.Notice.success(
             MailPoet.I18n.t('newsletterUpdated')
           );
         }).done(() => {
           window.location = redirectTo;
-        }).fail(this._showError);
+        }).fail(this.showError);
       },
-      _save: function () {
+      saveNewsletter: function () {
         const data = this.state.item;
         data.queue = undefined;
         this.setState({ loading: true });
@@ -249,7 +254,7 @@ define(
           this.setState({ loading: false });
         });
       },
-      _showError: (response) => {
+      showError: (response) => {
         if (response.errors.length > 0) {
           MailPoet.Notice.error(
             response.errors.map((error) => { return error.message; }),
@@ -279,6 +284,7 @@ define(
           }
           return newField;
         });
+        const sendButtonOptions = this.getSendButtonOptions();
         return (
           <div>
             <h1>{MailPoet.I18n.t('finalNewsletterStep')}</h1>
@@ -307,7 +313,7 @@ define(
                       type="button"
                       onClick={this.handleSend}
                       value={MailPoet.I18n.t('send')}
-                  {...this.getSendButtonOptions()}
+                      {...sendButtonOptions}
                   />
                 }
                 &nbsp;
@@ -324,10 +330,12 @@ define(
                   {MailPoet.I18n.t('goBackToDesign')}
                 </a>.
               </p>
+              { !isPaused && sendButtonOptions.disabled && sendButtonOptions.disabled === 'disabled' && (
                 <HelpTooltip
                   tooltip={MailPoet.I18n.t('helpTooltipSendEmail')}
                   tooltipId="helpTooltipSendEmail"
                 />
+              ) }
             </Form>
           </div>
         );

assets/js/src/newsletters/send/notification.jsx

@@ -11,7 +11,6 @@ define(
     Scheduling,
     _
   ) => {
-
     let fields = [
       {
         name: 'subject',
@@ -40,7 +39,7 @@ define(
         endpoint: 'segments',
         multiple: true,
         filter: function (segment) {
-          return !!(!segment.deleted_at);
+          return !segment.deleted_at;
         },
         getLabel: function (segment) {
           return segment.name + ' (' + parseInt(segment.subscribers, 10).toLocaleString() + ')';

assets/js/src/newsletters/send/standard.jsx

@@ -13,11 +13,10 @@ define(
     MailPoet,
     Hooks
   ) => {
-
     const jQuery = jq;
 
     const currentTime = window.mailpoet_current_time || '00:00';
-    const defaultDateTime = window.mailpoet_current_date + ' ' + '00:00:00';
+    const defaultDateTime = window.mailpoet_current_date + ' 00:00:00';
     const timeOfDayItems = window.mailpoet_schedule_time_of_day;
     const dateDisplayFormat = window.mailpoet_date_display_format;
     const dateStorageFormat = window.mailpoet_date_storage_format;
@@ -195,16 +194,16 @@ define(
     });
 
     const DateTime = React.createClass({
-      _DATE_TIME_SEPARATOR: " ",
+      DATE_TIME_SEPARATOR: ' ',
       getInitialState: function () {
-        return this._buildStateFromProps(this.props);
+        return this.buildStateFromProps(this.props);
       },
       componentWillReceiveProps: function (nextProps) {
-        this.setState(this._buildStateFromProps(nextProps));
+        this.setState(this.buildStateFromProps(nextProps));
       },
-      _buildStateFromProps: function (props) {
+      buildStateFromProps: function (props) {
         const value = props.value || defaultDateTime;
-        const [date, time] = value.split(this._DATE_TIME_SEPARATOR);
+        const [date, time] = value.split(this.DATE_TIME_SEPARATOR);
         return {
           date: date,
           time: time,
@@ -229,7 +228,7 @@ define(
         }
       },
       getDateTime: function () {
-        return [this.state.date, this.state.time].join(this._DATE_TIME_SEPARATOR);
+        return [this.state.date, this.state.time].join(this.DATE_TIME_SEPARATOR);
       },
       render: function () {
         return (
@@ -254,7 +253,7 @@ define(
     });
 
     const StandardScheduling = React.createClass({
-      _getCurrentValue: function () {
+      getCurrentValue: function () {
         return _.defaults(
           this.props.item[this.props.field.name] || {},
           {
@@ -264,7 +263,7 @@ define(
         );
       },
       handleValueChange: function (event) {
-        const oldValue = this._getCurrentValue();
+        const oldValue = this.getCurrentValue();
         const newValue = {};
         newValue[event.target.name] = event.target.value;
 
@@ -281,7 +280,7 @@ define(
         return this.handleValueChange(changeEvent);
       },
       isScheduled: function () {
-        return this._getCurrentValue().isScheduled === '1';
+        return this.getCurrentValue().isScheduled === '1';
       },
       getDateValidation: function () {
         return {
@@ -298,7 +297,7 @@ define(
             <span id="mailpoet_scheduling">
               <DateTime
                 name="scheduledAt"
-                value={this._getCurrentValue().scheduledAt}
+                value={this.getCurrentValue().scheduledAt}
                 onChange={this.handleValueChange}
                 disabled={this.props.field.disabled}
                 dateValidation={this.getDateValidation()} />
@@ -348,7 +347,7 @@ define(
         endpoint: 'segments',
         multiple: true,
         filter: function (segment) {
-          return !!(!segment.deleted_at);
+          return !segment.deleted_at;
         },
         getLabel: function (segment) {
           return segment.name + ' (' + parseInt(segment.subscribers, 10).toLocaleString() + ')';
@@ -437,7 +436,7 @@ define(
 
         if (newsletterOptions.status === 'sent'
             || newsletterOptions.status === 'sending') {
-          options['disabled'] = 'disabled';
+          options.disabled = 'disabled';
         }
 
         return options;

assets/js/src/newsletters/send/welcome.jsx

@@ -9,8 +9,6 @@ define(
     Hooks,
     Scheduling
   ) => {
-
-
     let fields = [
       {
         name: 'subject',

assets/js/src/newsletters/templates.jsx

@@ -1,22 +1,10 @@
-define(
+import React from 'react';
-  [
+import _ from 'underscore';
-    'react',
+import MailPoet from 'mailpoet';
-    'underscore',
+import { confirmAlert } from 'react-confirm-alert';
-    'mailpoet',
+import classNames from 'classnames';
-    'react-router',
+import Breadcrumb from 'newsletters/breadcrumb.jsx';
-    'classnames',
+import HelpTooltip from 'help-tooltip.jsx';
-    'newsletters/breadcrumb.jsx',
-    'help-tooltip.jsx',
-  ],
-  (
-    React,
-    _,
-    MailPoet,
-    Router,
-    classNames,
-    Breadcrumb,
-    HelpTooltip
-  ) => {
 
 const ImportTemplate = React.createClass({
   saveTemplate: function (saveTemplate) {
@@ -57,9 +45,9 @@ define(
     const reader = new FileReader();
     const saveTemplate = this.saveTemplate;
 
-        reader.onload = (e) => {
+    reader.onload = (evt) => {
       try {
-            saveTemplate(JSON.parse(e.target.result));
+        saveTemplate(JSON.parse(evt.target.result));
         MailPoet.trackEvent('Emails > Template imported', {
           'MailPoet Free version': window.mailpoet_version,
         });
@@ -122,7 +110,7 @@ define(
                 MailPoet.I18n.t('mailpoetGuideTemplateTitle'),
               description:
                 MailPoet.I18n.t('mailpoetGuideTemplateDescription'),
-                  readonly: "1",
+              readonly: '1',
             },
           ];
         }
@@ -175,13 +163,7 @@ define(
   },
   handleDeleteTemplate: function (template) {
     this.setState({ loading: true });
-        if(
+    const onConfirm = () => {
-          window.confirm(
-            (
-              MailPoet.I18n.t('confirmTemplateDeletion')
-            ).replace("%$1s", template.name)
-          )
-        ) {
       MailPoet.Ajax.post({
         api_version: window.mailpoet_api_version,
         endpoint: 'newsletterTemplates',
@@ -199,9 +181,18 @@ define(
           );
         }
       });
-        } else {
+    };
+    const onCancel = () => {
       this.setState({ loading: false });
-        }
+    };
+    confirmAlert({
+      title: MailPoet.I18n.t('confirmTitle'),
+      message: MailPoet.I18n.t('confirmTemplateDeletion').replace('%$1s', template.name),
+      confirmLabel: MailPoet.I18n.t('confirmLabel'),
+      cancelLabel: MailPoet.I18n.t('cancelLabel'),
+      onConfirm: onConfirm,
+      onCancel: onCancel,
+    });
   },
   handleShowTemplate: function (template) {
     MailPoet.Modal.popup({
@@ -258,12 +249,13 @@ define(
                
             <a
               className="button button-primary"
+              data-automation-id={'select_template_' + index}
               onClick={this.handleSelectTemplate.bind(null, template)}
               >
               {MailPoet.I18n.t('select')}
             </a>
           </div>
-              { (template.readonly === "1") ? false : deleteLink }
+          { (template.readonly === '1') ? false : deleteLink }
         </li>
       );
     });
@@ -271,7 +263,7 @@ define(
     const boxClasses = classNames(
       'mailpoet_boxes',
       'clearfix',
-          { 'mailpoet_boxes_loading': this.state.loading }
+      { mailpoet_boxes_loading: this.state.loading }
     );
 
     return (
@@ -290,6 +282,4 @@ define(
   },
 });
 
-    return NewsletterTemplates;
+export default NewsletterTemplates;
-  }
-);

assets/js/src/newsletters/types.jsx

@@ -53,22 +53,22 @@ define(
       render: function () {
         let types = [
           {
-            'id': 'standard',
+            id: 'standard',
-            'title': MailPoet.I18n.t('regularNewsletterTypeTitle'),
+            title: MailPoet.I18n.t('regularNewsletterTypeTitle'),
-            'description': MailPoet.I18n.t('regularNewsletterTypeDescription'),
+            description: MailPoet.I18n.t('regularNewsletterTypeDescription'),
-            'action': function () {
+            action: function () {
               return (
-                <a className="button button-primary" onClick={ this.createNewsletter.bind(null, 'standard') }>
+                <a className="button button-primary" data-automation-id="create_standard" onClick={this.createNewsletter.bind(null, 'standard')}>
                   {MailPoet.I18n.t('create')}
                 </a>
               );
             }.bind(this)(),
           },
           {
-            'id': 'welcome',
+            id: 'welcome',
-            'title': MailPoet.I18n.t('welcomeNewsletterTypeTitle'),
+            title: MailPoet.I18n.t('welcomeNewsletterTypeTitle'),
-            'description': MailPoet.I18n.t('welcomeNewsletterTypeDescription'),
+            description: MailPoet.I18n.t('welcomeNewsletterTypeDescription'),
-            'action': function () {
+            action: (function () {
               return (
                 <div>
                   <a href="?page=mailpoet-premium" target="_blank">
@@ -76,15 +76,15 @@ define(
                   </a>
                 </div>
               );
-            }(),
+            }()),
           },
           {
-            'id': 'notification',
+            id: 'notification',
-            'title': MailPoet.I18n.t('postNotificationNewsletterTypeTitle'),
+            title: MailPoet.I18n.t('postNotificationNewsletterTypeTitle'),
-            'description': MailPoet.I18n.t('postNotificationNewsletterTypeDescription'),
+            description: MailPoet.I18n.t('postNotificationNewsletterTypeDescription'),
-            'action': function () {
+            action: function () {
               return (
-                <a className="button button-primary" onClick={ this.setupNewsletter.bind(null, 'notification') }>
+                <a className="button button-primary" data-automation-id="create_notification" onClick={this.setupNewsletter.bind(null, 'notification')}>
                   {MailPoet.I18n.t('setUp')}
                 </a>
               );