Bump up release version to 3.0.1

Fixing Shortcodes issue [MAILPOET-1104]

.circle_ci/fake-sendmail.rb

@@ -1,8 +0,0 @@
-#!/usr/bin/ruby
-path = "/tmp"
-Dir.mkdir(path) if !File.exists?(path)
-File.open("#{path}/mailpoet-#{Time.now.to_f}.txt", "w") do |f|
-    sleep 5
-    f.puts ARGV.inspect
-    $stdin.each_line { |line| f.puts line }
-end

.circle_ci/mailpoet_php.ini

@@ -1,3 +0,0 @@
-; For Unix only.  You may supply arguments as well (default: "sendmail -t -i").
-; http://php.net/sendmail-path
-sendmail_path = /home/ubuntu/mailpoet/.circle_ci/fake-sendmail.rb

.circleci/apache/mailpoet.loc.conf

@@ -3,11 +3,11 @@ Listen 8080
 <VirtualHost *:8080>
   UseCanonicalName Off
   ServerName mailpoet.loc
-  DocumentRoot /home/ubuntu/mailpoet/wordpress
+  DocumentRoot /home/circleci/mailpoet/wordpress
   DirectoryIndex index.php
   LogLevel notice
 
-  <Directory /home/ubuntu/mailpoet/wordpress>
+  <Directory /home/circleci/mailpoet/wordpress>
     Require all granted
   </Directory>
 </VirtualHost>

.circleci/config.yml

@@ -0,0 +1,137 @@
+version: 2
+jobs:
+  qa_js_php5:
+    working_directory: /home/circleci/mailpoet
+    docker:
+      - image: circleci/php:5.6.30-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 php5
+      - save_cache:
+          key: composer-{{ checksum "composer.json" }}-{{ checksum "composer.lock" }}
+          paths:
+            - vendor
+      - save_cache:
+          key: npm-{{ checksum "package.json" }}
+          paths:
+            - node_modules
+      - run:
+          name: "QA Scripts"
+          command: ./do qa
+      - run:
+          name: "Preparing test results folder"
+          command: mkdir test-results
+      - run:
+          name: "JS tests"
+          command: |
+            mkdir test-results/mocha
+            ./do t:j test-results/mocha/junit.xml
+      - run:
+          name: "PHP Unit tests"
+          command: |
+            WP_TEST_PATH="/home/circleci/mailpoet/wordpress" ./do t:u --xml
+      - store_test_results:
+          path: test-results/mocha
+      - store_artifacts:
+          path: test-results/mocha
+          destination: mocha
+      - store_test_results:
+          path: tests/_output
+      - store_artifacts:
+          path: tests/_output
+          destination: codeception
+      - store_artifacts:
+          path: /tmp/fake-mailer/
+          destination: fake-mailer
+  acceptance_tests:
+    working_directory: /home/circleci/mailpoet
+    machine: true
+    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: |
+              sudo apt-get update
+              sudo apt-get install circleci-php-5.6.23
+              sudo rm /usr/bin/php
+              sudo ln -s /opt/circleci/php/5.6.23/bin/php /usr/bin/php
+              # 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
+              php composer.phar install
+              ./do install
+      - save_cache:
+          key: composer-{{ checksum "composer.json" }}-{{ checksum "composer.lock" }}
+          paths:
+            - vendor
+      - save_cache:
+          key: npm-{{ checksum "package.json" }}
+          paths:
+            - node_modules
+      - run:
+          name: Run acceptance tests
+          command: |
+              docker-compose run codeception --steps --debug -vvv --html --xml
+      - store_artifacts:
+          path: ~/mailpoet/tests/acceptance-tests/_output
+      - store_test_results:
+          path: ~/mailpoet/tests/acceptance-tests/_output
+  php7:
+    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
+      - run:
+          name: "PHP Unit tests"
+          command: |
+            WP_TEST_PATH="/home/circleci/mailpoet/wordpress" ./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
+workflows:
+  version: 2
+  build_and_test:
+    jobs:
+      - qa_js_php5
+      - php7
+      - acceptance_tests

.circleci/fake-sendmail.php

@@ -0,0 +1,17 @@
+#!/usr/local/bin/php
+<?php
+$path = "/tmp/fake-mailer";
+if(!file_exists($path)) {
+  mkdir($path);
+}
+$filename = $path . '/mailpoet-' . microtime(true) . '.txt';
+$file_handle = fopen($filename, "w");
+
+$call_arguments = print_r($argv, true) . "\n";
+fwrite($file_handle, $call_arguments);
+
+while($line = fgets(STDIN)) {
+  fwrite($file_handle, $line);
+}
+
+fclose($file_handle);

.circleci/mailpoet_php.ini

@@ -0,0 +1,9 @@
+; For Unix only.  You may supply arguments as well (default: "sendmail -t -i").
+; http://php.net/sendmail-path
+sendmail_path = /usr/local/bin/fake-sendmail.php
+
+[Date]
+; Defines the default timezone used by the date functions
+; http://php.net/date.timezone
+date.timezone = UTC
+

.circleci/setup.bash

@@ -0,0 +1,48 @@
+#!/usr/bin/env bash
+
+function setup {
+	local version=$1
+	# install PHP dependencies for WordPress
+	if [[ $version == "php7" ]]; 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 -
+		sudo apt-get update
+		sudo apt-get install mysql-client php7.0-mysql zlib1g-dev
+		sudo docker-php-ext-install mysqli pdo pdo_mysql zip
+	else
+		sudo apt-get update
+		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 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
+	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
+	# 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
+	# 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
+	# 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
+	# TODO: Remove this line after PR gets merged and CircleCI env variables change
+	echo "WP_TEST_PATH=\"/home/circleci/mailpoet/wordpress\"" > .env
+}

.env.sample

@@ -16,3 +16,4 @@ WP_TEST_MAILER_SMTP_LOGIN=""
 WP_TEST_MAILER_SMTP_PASSWORD=""
 WP_SVN_USERNAME=""
 WP_SVN_PASSWORD=""
+WP_TRANSIFEX_API_TOKEN=""

.eslintignore

@@ -0,0 +1,3 @@
+**/vendor/**
+**/testBundles/**
+assets/js/src/newsletter_editor/tinymce/wplink/plugin.js

.eslintrc.es5.json

@@ -0,0 +1,62 @@
+{
+  "extends": "airbnb/legacy",
+  "env": {
+    "amd": true,
+    "browser": true
+  },
+  "parserOptions": {
+    "ecmaVersion": 5
+  },
+  "rules": {
+    "import/no-amd": 0,
+    "prefer-arrow-callback": 0,
+    "radix": 0,
+    "no-alert": 0,
+    "block-scoped-var": 0,
+    "guard-for-in": 0,
+    "no-prototype-builtins": 0,
+    "no-restricted-syntax": 0,
+    "no-useless-concat": 0,
+    "no-nested-ternary": 0,
+    "no-sequences": 0,
+    "no-useless-return": 0,
+    "array-callback-return": 0,
+    "new-cap": 0,
+    "no-continue": 0,
+    "no-new": 0,
+    "no-redeclare": 0,
+    "no-console": 0,
+    "no-empty": 0,
+    "no-useless-escape": 0,
+    "wrap-iife": 0,
+    "no-plusplus": 0,
+    "default-case": 0,
+    "no-lonely-if": 0,
+    "no-mixed-operators": 0,
+    "eqeqeq": 0,
+    "max-len": 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,
+    "padded-blocks": 0,
+    "strict": 0,
+    "vars-on-top": 0,
+    "no-var": 0,
+    "no-unused-vars": 0,
+    "object-shorthand": 0,
+    "new-parens": 0,
+    "eol-last": 0,
+    "dot-notation": 0,
+    "prefer-template": 0,
+    "func-names": 0
+  }
+}

.eslintrc.es6.json

@@ -0,0 +1,71 @@
+{
+  "extends": "airbnb",
+  "env": {
+    "amd": true,
+    "browser": true
+  },
+  "parserOptions": {
+    "ecmaVersion": 6,
+    "ecmaFeatures": {
+      "jsx": true
+    }
+  },
+  "settings": {
+    "import/resolver": "webpack"
+  },
+  "rules": {
+    "comma-dangle": ["error", "always-multiline"],
+    "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/no-is-mounted": 0,
+    "react/jsx-no-target-blank": 0,
+    "react/no-render-return-value": 0,
+    "react/jsx-boolean-value": 0,
+    "react/jsx-no-bind": 0,
+    "react/no-array-index-key": 0,
+    "react/self-closing-comp": 0,
+    "react/jsx-closing-bracket-location": 0,
+    "react/no-string-refs": 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,
+    "default-case": 0,
+    "array-callback-return": 0,
+    "consistent-return": 0,
+    "import/extensions": 0,
+    "import/no-extraneous-dependencies": 0,
+    "camelcase": 0,
+    "eqeqeq": 0,
+    "no-lonely-if": 0,
+    "block-scoped-var": 0,
+    "no-extra-bind": 0,
+    "class-methods-use-this": 0,
+    "no-case-declarations": 0,
+    "no-else-return": 0,
+    "max-len": 0,
+    "no-useless-concat": 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,
+    "padded-blocks": 0,
+    "no-underscore-dangle": 0
+  }
+}

.eslintrc.tests.json

@@ -0,0 +1,32 @@
+{
+  "extends": "airbnb/legacy",
+  "env": {
+    "amd": true,
+    "mocha": true
+  },
+  "parserOptions": {
+    "ecmaVersion": 6
+  },
+  "rules": {
+    "import/no-amd": 0,
+    "one-var": 0,
+    "no-whitespace-before-property": 0,
+    "global-require": 0,
+    "keyword-spacing": 0,
+    "no-bitwise": 0,
+    "no-spaced-func": 0,
+    "func-call-spacing": 0,
+    "max-len": 0,
+    "space-unary-ops": 0,
+    "no-unused-vars": 0,
+    "no-underscore-dangle": 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
+  }
+}

.gitignore

@@ -1,21 +1,23 @@
-.DS_Store
-TODO
-composer.phar
-/vendor
-tests/_output/*
-tests/acceptance.suite.yml
-tests/_support/_generated/*
-node_modules
-.env
-npm-debug.log
-!tasks/**
-/views/cache/**
-temp
-.idea
-mailpoet.zip
-tests/javascript/testBundles
-assets/css/*.css
-assets/js/*.js
-.vagrant
-lang
-.mp_svn
+.DS_Store
+TODO
+composer.phar
+/vendor
+tests/_output/*
+tests/_support/_generated/*
+node_modules
+.env
+npm-debug.log
+!tasks/**
+/views/cache/**
+temp
+.idea
+mailpoet.zip
+tests/javascript/testBundles
+assets/css/*.css
+assets/css/*.json
+assets/js/*.js
+assets/js/*.json
+.vagrant
+lang
+.mp_svn
+/nbproject/

.tx/config

@@ -0,0 +1,9 @@
+[main]
+host = https://www.transifex.com
+
+[mp3.mailpoet]
+source_file = lang/mailpoet.pot
+file_filter = lang/mailpoet-<lang>.po
+source_lang = en_US
+type = PO
+minimum_perc = 75

CONTRIBUTING.md

@@ -5,30 +5,32 @@
 - CamelCase for classes.
 - camelCase for methods.
 - snake_case for variables and class properties.
-- Max line length at 80 chars.
-- Classes can be no longer than 100 LOC.
-- Methods can be no longer than 5 LOC.
-- Pass no more than 4 parameters/hash keys into a method.
 - Composition over Inheritance.
-- Comments are a code smell.
-- Routes can instantiate only one object.
+- Comments are a code smell. If you need to use a comment - see if same idea can be achieved by more clearly expressing code.
 - Require other classes with 'use' at the beginning of the class file.
 - Do not specify 'public' if method is public, it's implicit.
 - Always use guard clauses.
+- Ensure compatibility with PHP 5.3 and newer versions.
+- Cover your code in tests.
+
+Recommendations:
+- Max line length at 80 chars.
+- Keep classes under 100 LOC.
+- Keep methods under 10 LOC.
+- Pass no more than 4 parameters/hash keys into a method.
+- Keep Pull Requests small, under 100 LOC changed.
 
 ## Git flow.
 - Do not commit to master.
 - Open a short-living feature branch.
 - Open a pull request.
-- Add close #issue in pull request description.
+- Add Jira issue reference in the title of the Pull Request.
 - Work on the pull request.
-- Wait for confirmation before merging to master.
-- No one will accept a pull request that doesn't have 100% test coverage.
+- Wait for review and confirmation from another developer before merging to master.
 - Commit title no more than 80 chars, empty line after.
 - Commit description as long as you want, 80 chars wrap.
-- Keep the GitHub open issues count at less than 10.
 
 ## Issues creation.
+- Issues are managed on Jira.
 - Discuss issues on public Slack chats, discuss code in pull requests.
-- Organize features on Trello.
-- Open a small github issue only when it has been discussed.
+- Open a small Jira issue only when it has been discussed.

Dockerfile

@@ -0,0 +1,39 @@
+FROM php:5.6-cli
+
+ENV COMPOSER_ALLOW_SUPERUSER=1
+
+RUN apt-get update && \
+    apt-get -y install \
+            git \
+            zlib1g-dev \
+            libssl-dev \
+            mysql-client \
+            sudo less  \
+        --no-install-recommends && \
+    apt-get clean && \
+    rm -rf /var/lib/apt/lists/* /tmp/* /var/tmp/* && \
+    docker-php-ext-install bcmath zip mysqli pdo pdo_mysql && \
+    echo "date.timezone = UTC" >> /usr/local/etc/php/php.ini && \
+    curl -sS https://getcomposer.org/installer | php -- \
+        --filename=composer \
+        --install-dir=/usr/local/bin && \
+    composer global require --optimize-autoloader "hirak/prestissimo" && \
+    curl -O https://raw.githubusercontent.com/wp-cli/builds/gh-pages/phar/wp-cli.phar && \
+    chmod +x wp-cli.phar && \
+    mv wp-cli.phar /usr/local/bin/wp
+
+# Prepare application
+WORKDIR /repo
+
+# Install vendor
+COPY ./composer.json /repo/composer.json
+
+# Add source-code
+COPY . /repo
+
+WORKDIR /wp-core/wp-content/plugins/mailpoet
+ENV WP_TEST_PATH=/wp-core
+
+ADD docker-entrypoint.sh /
+
+RUN ["chmod", "+x", "/docker-entrypoint.sh"]

README.md

@@ -46,11 +46,26 @@ $ ./do compile:all
 $ ./do test:unit
 ```
 
+- JS tests (using Mocha):
+```sh
+$ ./do test:javascript
+```
+
 - Debug tests:
 ```sh
 $ ./do test:debug
 ```
 
+- Code linters and quality checkers:
+```sh
+$ ./do qa
+```
+
+- Javascript linter:
+```sh
+$ ./do lint:javascript
+```
+
 # CSS
 - [Stylus](https://learnboost.github.io/stylus/)
 - [Nib extension](http://tj.github.io/nib/)
@@ -109,6 +124,7 @@ Once javascript is compiled with `./do compile:javascript`, your module will be
 ```php
 __()
 _n()
+_x()
 ```
 
 ```html
@@ -129,19 +145,56 @@ _n()
 
 You can use Twig i18n functions in Handlebars, just load your template from a Twig view.
 
+# Build
+
+To build a plugin , run `./build.sh`.
+
+Some build process steps are described below (their dependencies etc.).
+
+## packtranslations step
+
+This step imports translations from Transifex and generates MO files. It requires:
+* `tx` client: https://docs.transifex.com/client/installing-the-client
+* `msgfmt` command (from Gettext package)
+Finally , a `WP_TRANSIFEX_API_TOKEN` environment variable should be initialized with a valid key.
+
 # Publish
 
-Before you run a publishing command, you need to:
+The `publish` command currently does the following:
+* Pushes translations POT file to Transifex;
+* Publishes the release in SVN.
+
+Before you run it, you need to:
 1. Ensure there is an up-to-date local copy of MailPoet SVN repository in `.mp_svn` directory by running `./do svn:checkout`.
 2. Have all your features merged in Git `master`, your `mailpoet.php` and `readme.txt` tagged with a new version.
 3. Run `./build.sh` to produce a `mailpoet.zip` distributable archive.
 
-Everything's ready? Then run `./do svn:publish`.
+Everything's ready? Then run `./do publish`.
 If the job goes fine, you'll get a message like this:
 ```
 Go to '.mp_svn' and run 'svn ci -m "Release 3.0.0-beta.9"' to publish the
 release
+
+Run 'svn copy ...' to tag the release
 ```
 It's quite literal: you can review the changes to be pushed and if you're satisfied, run the suggested command to finish the release publishing process.
 
-If you're confident, execute `./do svn:publish --force` and your release will be published to the remote SVN repository without manual intervention (automatically). For easier authentication you might want to set `WP_SVN_USERNAME` and `WP_SVN_PASSWORD` environment variables.
+If you're confident, execute `./do publish --force` and your release will be published to the remote SVN repository without manual intervention (automatically). For easier authentication you might want to set `WP_SVN_USERNAME` and `WP_SVN_PASSWORD` environment variables.
+
+# Acceptance testing
+
+We are using Gravity Flow plugin's setup as an example for our acceptance test suite: https://www.stevenhenty.com/learn-acceptance-testing-deeply/
+
+From the article above:
+
+_Windows users only: enable hard drive sharing in the Docker settings._
+
+The browser runs in a docker container. You can use a VNC client to watch the test run, follow instructions in official 
+repo: https://github.com/SeleniumHQ/docker-selenium
+If you’re on a Mac, you can open vnc://localhost:5900 in Safari to watch the tests running in Chrome. If you’re on Windows, you’ll need a VNC client. Password: secret.
+
+
+To run tests:
+```sh
+$ ./do test:acceptance
+```

RoboFile.php

@@ -1,7 +1,6 @@
 <?php
 
 class RoboFile extends \Robo\Tasks {
-
   function install() {
     return $this->taskExecStack()
       ->stopOnFail()
@@ -67,18 +66,28 @@ class RoboFile extends \Robo\Tasks {
     $this->_exec('./node_modules/webpack/bin/webpack.js --watch');
   }
 
-  function compileAll() {
-    $collection = $this->collection();
-    $collection->add(array($this, 'compileJs'));
-    $collection->add(array($this, 'compileCss'));
+  function compileAll($opts = ['env' => null]) {
+    $collection = $this->collectionBuilder();
+    $collection->addCode(function() use ($opts) {
+      return call_user_func(array($this, 'compileJs'), $opts);
+    });
+    $collection->addCode(function() use ($opts) {
+      return call_user_func(array($this, 'compileCss'), $opts);
+    });
     return $collection->run();
   }
 
-  function compileJs() {
-    return $this->_exec('./node_modules/webpack/bin/webpack.js --bail');
+  function compileJs($opts = ['env' => null]) {
+    $env = ($opts['env']) ?
+      sprintf('./node_modules/cross-env/dist/bin/cross-env.js NODE_ENV="%s"', $opts['env']) :
+      null;
+    return $this->_exec($env . ' ./node_modules/webpack/bin/webpack.js --bail');
   }
 
-  function compileCss() {
+  function compileCss($opts = ['env' => null]) {
+    // Clean up folder from previous files
+    array_map('unlink', glob("assets/css/*.*"));
+
     $css_files = array(
       'assets/css/src/admin.styl',
       'assets/css/src/newsletter_editor/newsletter_editor.styl',
@@ -87,7 +96,7 @@ class RoboFile extends \Robo\Tasks {
       'assets/css/src/importExport.styl'
     );
 
-    return $this->_exec(join(' ', array(
+    $compilation_result = $this->_exec(join(' ', array(
       './node_modules/stylus/bin/stylus',
       '--include ./node_modules',
       '--include-css',
@@ -95,6 +104,25 @@ class RoboFile extends \Robo\Tasks {
       join(' ', $css_files),
       '-o assets/css/'
     )));
+
+    // Create manifest file
+    $manifest = [];
+    foreach(glob('assets/css/*.css') as $style) {
+      // Hash and rename styles if production environment
+      if($opts['env'] === 'production') {
+        $hashed_style = sprintf(
+          '%s.%s.css',
+          pathinfo($style)['filename'],
+          substr(md5_file($style), 0, 8)
+        );
+        $manifest[basename($style)] = $hashed_style;
+        rename($style, str_replace(basename($style), $hashed_style, $style));
+      } else {
+        $manifest[basename($style)] = basename($style);
+      }
+    }
+    file_put_contents('assets/css/manifest.json', json_encode($manifest, JSON_PRETTY_PRINT));
+    return $compilation_result;
   }
 
   function makepot() {
@@ -104,11 +132,30 @@ class RoboFile extends \Robo\Tasks {
     );
   }
 
+  function pushpot() {
+    return $this->collectionBuilder()
+      ->addCode(array($this, 'txinit'))
+      ->taskExec('tx push -s')
+      ->run();
+  }
+
+  function packtranslations() {
+    return $this->collectionBuilder()
+      ->addCode(array($this, 'txinit'))
+      ->taskExec('./tasks/pack_translations.sh')
+      ->run();
+  }
+
+  function txinit() {
+    // Define WP_TRANSIFEX_API_TOKEN env. variable
+    $this->loadEnv();
+    return $this->_exec('./tasks/transifex_init.sh');
+  }
+
   function testUnit($opts=['file' => null, 'xml' => false]) {
     $this->loadEnv();
-    $this->_exec('vendor/bin/codecept build');
 
-    $command = 'vendor/bin/codecept run unit -f '.(($opts['file']) ? $opts['file'] : '');
+    $command = 'vendor/bin/codecept run unit -c codeception.unit.yml -f '.(($opts['file']) ? $opts['file'] : '');
 
     if($opts['xml']) {
       $command .= ' --xml';
@@ -118,9 +165,8 @@ class RoboFile extends \Robo\Tasks {
 
   function testCoverage($opts=['file' => null, 'xml' => false]) {
     $this->loadEnv();
-    $this->_exec('vendor/bin/codecept build');
     $command = join(' ', array(
-      'vendor/bin/codecept run',
+      'vendor/bin/codecept run unit -c codeception.unit.yml ',
       (($opts['file']) ? $opts['file'] : ''),
       '--coverage',
       ($opts['xml']) ? '--coverage-xml' : '--coverage-html'
@@ -151,24 +197,35 @@ class RoboFile extends \Robo\Tasks {
     return $this->_exec($command);
   }
 
-  function testDebug() {
-    $this->_exec('vendor/bin/codecept build');
+  function testDebug($opts=['file' => null, 'xml' => false]) {
     $this->loadEnv();
-    return $this->_exec('vendor/bin/codecept run unit --debug');
+    $this->_exec('vendor/bin/codecept build -c codeception.unit.yml');
+
+    $command = 'vendor/bin/codecept run unit -c codeception.unit.yml --debug -f '.(($opts['file']) ? $opts['file'] : '');
+
+    if($opts['xml']) {
+      $command .= ' --xml';
+    }
+    return $this->_exec($command);
+  }
+
+  function testAcceptance() {
+    return $this->_exec('COMPOSE_HTTP_TIMEOUT=200 docker-compose run codeception --steps --debug -vvv');
   }
 
   function testFailed() {
     $this->loadEnv();
-    $this->_exec('vendor/bin/codecept build');
-    return $this->_exec('vendor/bin/codecept run -g failed');
+    $this->_exec('vendor/bin/codecept build -c codeception.unit.yml');
+    return $this->_exec('vendor/bin/codecept run -c codeception.unit.yml -g failed');
   }
 
   function qa() {
-    $collection = $this->collection();
-    $collection->add(array($this, 'qaLint'));
-    $collection->add(function() {
+    $collection = $this->collectionBuilder();
+    $collection->addCode(array($this, 'qaLint'));
+    $collection->addCode(function() {
       return $this->qaCodeSniffer('all');
     });
+    $collection->addCode(array($this, 'qaLintJavascript'));
     return $collection->run();
   }
 
@@ -176,24 +233,58 @@ class RoboFile extends \Robo\Tasks {
     return $this->_exec('./tasks/php_lint.sh lib/ tests/ mailpoet.php');
   }
 
+  function qaLintJavascript() {
+    return $this->_exec('npm run lint');
+  }
+
   function qaCodeSniffer($severity='errors') {
     if ($severity === 'all') {
       $severityFlag = '-w';
     } else {
       $severityFlag = '-n';
     }
-    return $this->_exec(
-      './vendor/bin/phpcs '.
-      '--standard=./tasks/code_sniffer/MailPoet '.
-      '--ignore=./lib/Util/Sudzy/*,./lib/Util/CSS.php,./lib/Util/XLSXWriter.php,'.
-      './lib/Config/PopulatorData/Templates/* '.
-      'lib/ '.
-      $severityFlag
-    );
+    return $this->collectionBuilder()
+      ->taskExec(
+        './vendor/bin/phpcs '.
+        '--standard=./tasks/code_sniffer/MailPoet '.
+        '--runtime-set testVersion 5.3-7.0 '.
+        '--ignore=./lib/Util/Sudzy/*,./lib/Util/CSS.php,./lib/Util/XLSXWriter.php,'.
+        './lib/Util/pQuery/*,./lib/Config/PopulatorData/Templates/* '.
+        'lib/ '.
+        $severityFlag
+      )
+      ->taskExec(
+        './vendor/bin/phpcs '.
+        '--standard=./tasks/code_sniffer/MailPoet '.
+        '--runtime-set testVersion 5.4-7.0 '.
+        '--ignore=./tests/unit/_bootstrap.php '.
+        'tests/unit/ '.
+        $severityFlag
+      )
+      ->run();
   }
 
   function svnCheckout() {
-    return $this->_exec('svn co https://plugins.svn.wordpress.org/mailpoet/ .mp_svn');
+    $svn_dir = ".mp_svn";
+
+    $collection = $this->collectionBuilder();
+
+    // Clean up the SVN dir for faster shallow checkout
+    if(file_exists($svn_dir)) {
+      $collection->taskExecStack()
+        ->exec('rm -rf ' . $svn_dir);
+    }
+
+    $collection->taskFileSystemStack()
+        ->mkdir($svn_dir);
+
+    return $collection->taskExecStack()
+      ->stopOnFail()
+      ->dir($svn_dir)
+      ->exec('svn co https://plugins.svn.wordpress.org/mailpoet/ -N .')
+      ->exec('svn up trunk')
+      ->exec('svn up assets')
+      ->run();
   }
 
   function svnPublish($opts = ['force' => false]) {
@@ -203,8 +294,9 @@ class RoboFile extends \Robo\Tasks {
     $plugin_data = get_plugin_data('mailpoet.php', false, false);
     $plugin_version = $plugin_data['Version'];
     $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';
-
     $this->say('Publishing version: ' . $plugin_version);
 
     // Sanity checks
@@ -219,58 +311,69 @@ class RoboFile extends \Robo\Tasks {
       return;
     }
 
-    $collection = $this->collection();
+    $collection = $this->collectionBuilder();
 
     // Clean up tmp dirs if the previous run was halted
     if(file_exists("$svn_dir/trunk_new") || file_exists("$svn_dir/trunk_old")) {
-      $this->taskFileSystemStack()
+      $collection->taskFileSystemStack()
         ->stopOnFail()
-        ->remove(array("$svn_dir/trunk_new", "$svn_dir/trunk_old"))
-        ->addToCollection($collection);
+        ->remove(array("$svn_dir/trunk_new", "$svn_dir/trunk_old"));
     }
 
     // Extract the distributable zip to tmp trunk dir
-    $this->taskExtract($plugin_dist_file)
+    $collection->taskExtract($plugin_dist_file)
       ->to("$svn_dir/trunk_new")
-      ->preserveTopDirectory(false)
-      ->addToCollection($collection);
+      ->preserveTopDirectory(false);
 
     // Rename current trunk
     if(file_exists("$svn_dir/trunk")) {
-      $this->taskFileSystemStack()
-        ->rename("$svn_dir/trunk", "$svn_dir/trunk_old")
-        ->addToCollection($collection);
+      $collection->taskFileSystemStack()
+        ->rename("$svn_dir/trunk", "$svn_dir/trunk_old");
     }
 
     // Replace old trunk with a new one
-    $this->taskFileSystemStack()
+    $collection->taskFileSystemStack()
       ->stopOnFail()
       ->rename("$svn_dir/trunk_new", "$svn_dir/trunk")
-      ->remove("$svn_dir/trunk_old")
-      ->addToCollection($collection);
+      ->remove("$svn_dir/trunk_old");
+
+    // Add new repository assets
+    $collection->taskFileSystemStack()
+      ->mirror('./plugin_repository/assets', "$svn_dir/assets_new");
+
+    // Rename current assets folder
+    if(file_exists("$svn_dir/assets")) {
+      $collection->taskFileSystemStack()
+        ->rename("$svn_dir/assets", "$svn_dir/assets_old");
+    }
+
+    // Replace old assets with new ones
+    $collection->taskFileSystemStack()
+      ->stopOnFail()
+      ->rename("$svn_dir/assets_new", "$svn_dir/assets")
+      ->remove("$svn_dir/assets_old");
 
     // Windows compatibility
     $awkCmd = '{print " --force \""$2"\""}';
     // Mac OS X compatibility
     $xargsFlag = (stripos(PHP_OS, 'Darwin') !== false) ? '' : '-r';
 
-    $this->taskExecStack()
+    $collection->taskExecStack()
       ->stopOnFail()
       // Set SVN repo as working directory
       ->dir($svn_dir)
       // Remove files from SVN repo that have already been removed locally
       ->exec("svn st | grep ^! | awk '$awkCmd' | xargs $xargsFlag svn rm")
       // Recursively add files to SVN that haven't been added yet
-      ->exec("svn add --force * --auto-props --parents --depth infinity -q")
-      // Tag the release
-      ->exec("svn cp trunk tags/$plugin_version")
-      ->addToCollection($collection);
+      ->exec("svn add --force * --auto-props --parents --depth infinity -q");
 
     $result = $collection->run();
 
     if($result->wasSuccessful()) {
       // Run or suggest release command depending on a flag
+      $repo_url = "https://plugins.svn.wordpress.org/$plugin_dist_name";
       $release_cmd = "svn ci -m \"Release $plugin_version\"";
+      $tag_cmd = "svn copy $repo_url/trunk $repo_url/tags/$plugin_version -m \"Tag $plugin_version\"";
       if(!empty($opts['force'])) {
         $svn_login = getenv('WP_SVN_USERNAME');
         $svn_password = getenv('WP_SVN_PASSWORD');
@@ -283,17 +386,30 @@ class RoboFile extends \Robo\Tasks {
           ->stopOnFail()
           ->dir($svn_dir)
           ->exec($release_cmd)
+          ->exec($tag_cmd)
           ->run();
       } else {
         $this->yell(
           "Go to '$svn_dir' and run '$release_cmd' to publish the release"
         );
+        $this->yell(
+          "Run '$tag_cmd' to tag the release"
+        );
       }
     }
 
     return $result;
   }
 
+  public function publish($opts = ['force' => false]) {
+    return $this->collectionBuilder()
+      ->addCode(array($this, 'pushpot'))
+      ->addCode(function () use ($opts) {
+        return $this->svnPublish($opts);
+      })
+      ->run();
+  }
+
   protected function loadEnv() {
     $dotenv = new Dotenv\Dotenv(__DIR__);
     $dotenv->load();

assets/css/src/admin.styl

@@ -22,3 +22,8 @@
 @require 'progress_bar'
 
 @require 'subscribers'
+
+@require 'pages'
+@require 'pages_custom'
+
+@require 'mp2migrator'

assets/css/src/common.styl

@@ -17,6 +17,13 @@ a:focus
 .mailpoet_hidden
   display: none
 
+// add margins to a div
+.mailpoet_spaced_block
+  margin: 1em 0
+
+.mailpoet_centered
+  text-align: center
+
 // select 2
 .select2-container
   width: 25em !important

assets/css/src/listing/newsletters.styl

@@ -1,3 +1,53 @@
+$excellent-badge-color = #2993ab
+$good-badge-color = #f0b849
+$bad-badge-color = #d54e21
+$green-badge-color = #55bd56
+
 #newsletters_container
   h2.nav-tab-wrapper
-    margin-bottom: 1rem
+    margin-bottom: 1rem
+
+.mailpoet_stats_text
+  font-size: 14px
+  font-weight: 600;
+
+.mailpoet_stat
+
+  &_excellent
+    color: $excellent-badge-color
+
+  &_good
+    color: $good-badge-color
+
+  &_bad
+    color: $bad-badge-color
+
+  &_hidden
+    display: none
+
+  &_link_small
+    text-decoration: underline !important
+    font-size: 0.75rem
+
+.mailpoet_badge
+  padding: 4px 6px 3px 6px
+  color: #FFFFFF
+  margin-right: 4px
+  text-transform: uppercase
+  font-size: 0.5625rem
+  font-weight: 500
+  border-radius: 3px
+  letter-spacing: 1px
+  vertical-align: middle
+
+  &_excellent
+    background: $excellent-badge-color
+
+  &_good
+    background: $good-badge-color
+
+  &_bad
+    background: $bad-badge-color
+
+  &_green
+    background: $green-badge-color

assets/css/src/modal.styl

@@ -45,7 +45,6 @@ body.mailpoet_modal_opened
   position: absolute
   z-index: 25
   top: 48px
-  padding-bottom: 48px
   margin: 0
 
 .mailpoet_popup_wrapper
@@ -54,6 +53,7 @@ body.mailpoet_modal_opened
   position: relative
   width: 100%
   z-index: 0
+  height: 96%
 
 .mailpoet_overlay_hidden .mailpoet_popup_wrapper
   border: 1px solid #333
@@ -75,6 +75,7 @@ body.mailpoet_modal_opened
 
 .mailpoet_popup_body
   padding: 10px 10px 10px 10px
+  height: 92%
 
 // modal panel
 #mailpoet_modal_overlay.mailpoet_panel_overlay

assets/css/src/mp2migrator.styl

@@ -0,0 +1,33 @@
+#logger
+  width: 100%
+  height: 300px
+  background-color: transparent
+  border: 0
+  border-top: 1px #aba9a9 solid
+  padding: 2px
+  overflow: scroll
+  resize: both
+  font-size: 0.85em
+  margin-top: 20px
+
+#progressbar
+  width: 50%
+  background-color: #d8d8d8
+  border-radius: 5px
+
+progressbar_color = #fecf23
+progressbar_gradient_to_color = #fd9215
+
+.ui-progressbar .ui-progressbar-value
+  height: 100%
+  background-color: progressbar_color
+  background-image: linear-gradient(to bottom, progressbar_color, progressbar_gradient_to_color)
+  border-radius: 3px
+  box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset
+  border 0
+
+.mailpoet_progress_label
+  font-size: 15px
+
+.error_msg
+  color: #f00

assets/css/src/newsletter_editor/common.styl

@@ -179,6 +179,28 @@ select.mailpoet_font-size
   width: 100%
   box-sizing: border-box
 
+.tooltip-help-designer-subject-line div, .tooltip-help-designer-preheader div
+  z-index: 100001
+
+.tooltip-help-send-preview
+  position: absolute
+  right: 15px
+
+.tooltip-help-designer-ideal-width
+  color: #656565
+  text-transform: none
+  margin-left: 5px
+  font-weight: normal
+
+.tooltip-help-designer-styles
+  position: absolute
+  top: 40px
+
+.tooltip-help-designer-full-width .dashicons
+  line-height 34px
+.tooltip-help-designer-full-width span
+  line-height 1.4em
+
 .mailpoet_button_primary
   border-color: $button-primary-border-color
   background-color: $button-primary-background-color

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

@@ -62,3 +62,9 @@ $draggable-widget-z-index = 2
   background-color: $primary-active-color
   box-shadow(inset 1px 2px 1px $primary-inset-shadow-color)
   color: $white-color
+
+.mailpoet_droppable_block
+  cursor: move
+
+  &.mailpoet_ignore_drag
+    cursor: auto

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,12 +23,10 @@ $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_block:last-child
-  margin-bottom: 0
+    
+  &.mailpoet_highlight > .mailpoet_block_highlight
+    border: 1px dashed $block-hover-highlight-color !important
 
 .mailpoet_content
   position: relative

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
-    cursor: all-scroll
+  .mailpoet_content 
+    margin: auto
+    max-width: 100%
+    min-width: 36px
+    
+    a:hover
+      cursor: all-scroll
 

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

@@ -18,6 +18,7 @@
 .mailpoet_settings_posts_display_options
 .mailpoet_settings_posts_selection
   animation-slide-open-downwards()
+  overflow-x: hidden
 
 .mailpoet_settings_posts_show_display_options,
 .mailpoet_settings_posts_show_post_selection
@@ -26,7 +27,12 @@
 
 .mailpoet_post_selection_container
   margin-top: 20px
-  margin-bottom: 20px
+  margin-bottom: 0
+
+.mailpoet_post_scroll_container
+  overflow-y: scroll
+  overflow-x: hidden
+  max-height: 400px
 
 .mailpoet_settings_posts_single_post
   border-radius(1px)
@@ -45,3 +51,6 @@
   .mailpoet_select_post_checkbox
     margin-left: 10px
     margin-right: 8px
+
+.mailpoet_post_selection_loading
+  color: #999

assets/css/src/newsletter_editor/libraryOverrides.styl

@@ -127,10 +127,8 @@ body
   background-color: $primary-background-color
   border: 1px solid $content-border-color
 
-#mailpoet_modal_close
-  display: none
-
 .wrap > .mailpoet_notice,
+.notice
 .update-nag
   margin-left: 2px + 15px !important
 

assets/css/src/pages.styl

@@ -0,0 +1,228 @@
+/*
+Based on /wp-admin/css/about.css of WP 4.7.
+This is to make MailPoet pages independent of the WordPress
+About page styles that may differ across WP versions.
+Please add custom styles to pages_custom.styl
+*/
+
+.mailpoet-about-wrap
+  position: relative
+  margin: 25px 40px 0 20px
+  max-width: 1050px /* readability */
+  font-size: 15px
+
+  div.updated, div.error, .notice
+    display: none !important
+
+  hr
+    border: 0
+    height: 0
+    margin: 0
+    border-top: 1px solid rgba(0, 0, 0, 0.1)
+
+  img
+    margin: 0
+    max-width: 100%
+    height: auto
+    vertical-align: middle
+
+  .mailpoet-logo
+    position: absolute
+    top: .2em
+    right: 0;
+
+  .nav-tab
+    padding-right: 15px
+    padding-left: 15px
+    font-size: 18px
+
+  p
+    line-height: 1.5
+    font-size: 14px
+
+  .feature-section p
+    max-width: 55em
+    margin-left: auto
+    margin-right: auto
+
+  h1
+    margin: 0.2em 200px 0 0
+    padding: 0
+    color: #32373c
+    line-height: 1.2em
+    font-size: 2.8em
+    font-weight: 400
+
+  h2
+    margin: 40px 0 .6em
+    font-size: 2.7em
+    line-height: 1.3
+    font-weight: 300
+    text-align: center
+
+  h3
+    margin: 1.25em 0 .6em
+    font-size: 1.4em
+    line-height: 1.5
+
+  h4
+    color: #23282d
+
+  .about-description
+  .about-text
+    margin-top: 1.4em
+    font-weight: 400
+    line-height: 1.6em
+    font-size: 19px
+
+  .about-text
+    margin: 1em 200px 1em 0
+    min-height: 60px
+    color: #555d66
+
+  [class$=col]
+    .col
+      float: left
+      position: relative
+
+  .two-col
+    .col
+      margin-right: 4.799999999%
+      width: 47.6%
+
+  .two-col
+    img
+      margin-bottom: 1.5em
+
+  .feature-section
+    &.two-col
+      .col
+        display: inline-block
+        float: none
+        margin-top: 1em
+        margin-right: 4.799999999%
+        width: calc( 47.6% - 4px )
+        vertical-align: top
+
+  .three-col
+    .col
+      margin-right: 4.999999999%
+      width: 29.95%
+
+  .two-col .col:nth-of-type(2n)
+  .three-col .col:nth-of-type(3n)
+    margin-right: 0
+
+  .feature-section
+    &.two-col
+      h3
+        margin-top: 0
+
+  .feature-section
+    h4
+      margin: 1.4em 0 0.6em 0
+      font-size: 1em
+
+  .feature-section
+    p
+      margin-top: 0.6em
+
+  .lead-description
+    font-size: 1.5em
+    text-align: center
+
+  .two-col-text
+    column-count: 2
+    column-gap: 40px
+
+  .two-col-text
+    p:first-of-type
+      margin-top: 0
+
+  .headline-feature
+    &.feature-video
+      position: relative
+      margin: 40px 0
+      padding-bottom: 56.25%
+      width: 100%
+      max-width: 100%
+      height: 0
+      text-align: center
+
+  .feature-video
+    embed
+      position: absolute
+      top: 0
+      left: 0
+      width: 100%
+      height: 100%
+
+  .featured-image
+    text-align: center
+
+  .feature-section
+    overflow: hidden
+    padding: 0 0 40px
+
+  .feature-section
+    &.no-heading
+      padding-top: 35px
+
+  .headline-feature
+    margin: 0 auto
+    max-width: 80%
+
+  .feature-section
+    .media-container
+      overflow: hidden
+
+  .feature-section
+    img
+      margin-bottom: 1em
+
+  .embed-container
+    text-align: center
+
+  .embed-container
+    iframe
+      max-width: 100%
+
+  .wp-embedded-content
+    max-width: 100%
+
+  .feature-section
+    .col
+      margin-top: 40px
+
+  .changelog
+    margin-bottom: 40px
+
+  .changelog
+    &.feature-section
+      .col
+        margin-top: 40px
+
+  @media screen and (max-width: 782px)
+    .two-col-text
+      column-count: 1
+    .three-col img
+      display: block
+      margin: 0 auto
+
+  @media only screen and (max-width: 500px)
+    margin-right: 20px
+    margin-left: 10px
+    h1
+    .about-text
+      margin-right: 0
+    .about-text
+      margin-bottom: 0.25em
+    .mailpoet-logo
+      position: relative
+      margin: 1em 0
+      width: 100%
+      text-align: center
+    .two-col .col
+    .three-col .col
+      width: 100% !important
+      float: none !important

assets/css/src/pages_custom.styl

@@ -0,0 +1,38 @@
+/*
+Custom styles for MailPoet pages.
+*/
+
+.mailpoet-about-wrap
+
+  .videoWrapper
+    position: relative
+    padding-bottom: 56.25% /* 16:9 */
+    /*padding-top: 25px*/
+    height: 0
+
+    iframe
+      position: absolute
+      top: 0
+      left: 0
+      width: 100%
+      height: 100%
+
+
+  .mailpoet_video
+    border: 1px solid rgba(0, 0, 0, 0.1)
+
+  #mailpoet-changelog ul
+    list-style: disc
+    padding-left: 20px
+
+  h2.mailpoet-feature-top
+    margin: 50px auto
+
+  a.button.go-to-plugin
+    margin-top: 2em
+
+  p.top-space-triple
+    margin-top: 3em
+
+  p.mailpoet-top-text
+    margin-right: 0

assets/css/src/progress_bar.styl

@@ -4,6 +4,7 @@
   padding: 0
   width: 100%
   margin: 0
+  margin-bottom: 10px
   border-radius: 5px
   position: relative
 
@@ -25,5 +26,5 @@
 
 .mailpoet_progress_complete
   .mailpoet_progress_bar
-    background-color: #fecf23
-    background-image: linear-gradient(top, #fecf23, #fd9215)
+    background-color: hsla(191, 78%, 80%, 1)
+    background-image: linear-gradient(top,  hsla(191, 78%, 80%, 1), hsla(191, 76%, 67%, 1))

assets/css/src/settings.styl

@@ -9,29 +9,38 @@
   // sending methods
   .mailpoet_sending_methods
     margin 25px 0 0 0
-    li
-      float left
-      position relative
-      padding 15px 15px 0 15px
+    display flex
+    flex-direction row
+    justify-content flex-start
+    > li
+      flex-grow 1
+      flex-shrink 1
+      display flex
+      flex-direction column
+      flex-basis 0
       margin 0 25px 25px 0
-      width 300px
-      height 250px
       border 1px solid #dedede
       background-color #fff
+      max-width 500px
+      .mailpoet_sending_method_description
+        padding: 25px
+        flex-grow 1
+        flex-shrink 0
+    > li:last-child
+      margin-right 0
     h3
       text-align center
       height 54px
-      line-height 54px
       font-size 1.5em
     .mailpoet_description
       font-size 14px
     .mailpoet_status
+      display flex
+      flex-direction row
+      justify-content space-between
+      align-items center
       background-color #2f2f2f
       color #fff
-      position absolute
-      bottom 0
-      left 0
-      right 0
       text-overflow ellipsis
       padding 15px
       span
@@ -39,18 +48,34 @@
         font-weight bold
     .mailpoet_active
       .mailpoet_status
+        background-color #088b00
         span
           visibility visible
       #mailpoet_mta_activate
         visibility hidden
-    .mailpoet_actions
-      bottom 15px
-      color #fff
-      padding 0
-      position absolute
-      right 15px
-      .button-secondary
-        margin 0 -6px -4px 0
+
+  .tooltip.dashicons.dashicons-editor-help
+    line-height: 1.4
+
+  ul.sending-method-benefits
+    list-style-type: none
+    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 '✔ '
+
+  .mailpoet_error_item::before
+    content '✗ '
 
   // responsive
   @media screen and (max-width: 782px)
@@ -58,8 +83,10 @@
       width auto
 
     .mailpoet_sending_methods
-      li
-        float none
-        width auto
+      flex-flow: row wrap
+      justify-content: space-around
+      > li
         margin-right 0
+        flex-basis auto
+
 

assets/js/lib/analytics.js

@@ -1,8 +1,15 @@
-(function(e,b){if(!b.__SV){var a,f,i,g;window.mixpanel=b;b._i=[];b.init=function(a,e,d){function f(b,h){var a=h.split(".");2==a.length&&(b=b[a[0]],h=a[1]);b[h]=function(){b.push([h].concat(Array.prototype.slice.call(arguments,0)))}}var c=b;"undefined"!==typeof d?c=b[d]=[]:d="mixpanel";c.people=c.people||[];c.toString=function(b){var a="mixpanel";"mixpanel"!==d&&(a+="."+d);b||(a+=" (stub)");return a};c.people.toString=function(){return c.toString(1)+".people (stub)"};i="disable time_event track track_pageview track_links track_forms register register_once alias unregister identify name_tag set_config people.set people.set_once people.increment people.append people.union people.track_charge people.clear_charges people.delete_user".split(" ");
-for(g=0;g<i.length;g++)f(c,i[g]);b._i.push([a,e,d])};b.__SV=1.2;a=e.createElement("script");a.type="text/javascript";a.async=!0;a.src="undefined"!==typeof MIXPANEL_CUSTOM_LIB_URL?MIXPANEL_CUSTOM_LIB_URL:"file:"===e.location.protocol&&"//cdn.mxpnl.com/libs/mixpanel-2-latest.min.js".match(/^\/\//)?"https://cdn.mxpnl.com/libs/mixpanel-2-latest.min.js":"//cdn.mxpnl.com/libs/mixpanel-2-latest.min.js";f=e.getElementsByTagName("script")[0];f.parentNode.insertBefore(a,f)}})(document,window.mixpanel||[]);
+(function(e,a){if(!a.__SV){var b=window;try{var c,l,i,j=b.location,g=j.hash;c=function(a,b){return(l=a.match(RegExp(b+"=([^&]*)")))?l[1]:null};g&&c(g,"state")&&(i=JSON.parse(decodeURIComponent(c(g,"state"))),"mpeditor"===i.action&&(b.sessionStorage.setItem("_mpcehash",g),history.replaceState(i.desiredHash||"",e.title,j.pathname+j.search)))}catch(m){}var k,h;window.mixpanel=a;a._i=[];a.init=function(b,c,f){function e(b,a){var c=a.split(".");2==c.length&&(b=b[c[0]],a=c[1]);b[a]=function(){b.push([a].concat(Array.prototype.slice.call(arguments,
+  0)))}}var d=a;"undefined"!==typeof f?d=a[f]=[]:f="mixpanel";d.people=d.people||[];d.toString=function(b){var a="mixpanel";"mixpanel"!==f&&(a+="."+f);b||(a+=" (stub)");return a};d.people.toString=function(){return d.toString(1)+".people (stub)"};k="disable time_event track track_pageview track_links track_forms register register_once alias unregister identify name_tag set_config reset people.set people.set_once people.increment people.append people.union people.track_charge people.clear_charges people.delete_user".split(" ");
+  for(h=0;h<k.length;h++)e(d,k[h]);a._i.push([b,c,f])};a.__SV=1.2;b=e.createElement("script");b.type="text/javascript";b.async=!0;b.src="undefined"!==typeof MIXPANEL_CUSTOM_LIB_URL?MIXPANEL_CUSTOM_LIB_URL:"file:"===e.location.protocol&&"//cdn.mxpnl.com/libs/mixpanel-2-latest.min.js".match(/^\/\//)?"https://cdn.mxpnl.com/libs/mixpanel-2-latest.min.js":"//cdn.mxpnl.com/libs/mixpanel-2-latest.min.js";c=e.getElementsByTagName("script")[0];c.parentNode.insertBefore(b,c)}})(document,window.mixpanel||[]);
 
-mixpanel.init("f683d388fb25fcf331f1b2b5c4449798");
+window.mixpanelTrackingId = "8cce373b255e5a76fb22d57b85db0c92";
+
+if (mailpoet_analytics_enabled) {
+
+  mixpanel.init(window.mixpanelTrackingId);
+
+  if (mailpoet_analytics_data != null) {
+    mixpanel.track('MailPoet 3', mailpoet_analytics_data);
+  }
 
-if (typeof mailpoet_analytics_data === 'object') {
-  mixpanel.track('Wysija Usage', mailpoet_analytics_data || {});
 }

assets/js/src/admin.js

@@ -1,12 +1,12 @@
-define('admin', [
-    'jquery'
-  ],
-  function(jQuery) {
-    jQuery(function($) {
-      // dom ready
-      $(function() {
-
-      });
-    });
-  }
-);
+define('admin', [
+  'jquery'
+],
+  function (jQuery) {
+    jQuery(function ($) {
+      // dom ready
+      $(function () {
+
+      });
+    });
+  }
+);

assets/js/src/ajax.js

@@ -1,72 +1,86 @@
-define('ajax', ['mailpoet', 'jquery', 'underscore'], function(MailPoet, jQuery, _) {
-  'use strict';
-  MailPoet.Ajax = {
-      version: 0.5,
-      options: {},
-      defaults: {
-        url: null,
-        endpoint: null,
-        action: null,
-        token: null,
-        data: {}
-      },
-      post: function(options) {
-        return this.request('post', options);
-      },
-      init: function(options) {
-        // merge options
-        this.options = jQuery.extend({}, this.defaults, options);
-
-        // set default url
-        if(this.options.url === null) {
-          this.options.url = ajaxurl;
-        }
-
-        // set default token
-        if(this.options.token === null) {
-          this.options.token = window.mailpoet_token;
-        }
-      },
-      getParams: function() {
-        return {
-          action: 'mailpoet',
-          token: this.options.token,
-          endpoint: this.options.endpoint,
-          method: this.options.action,
-          data: this.options.data || {}
-        }
-      },
-      request: function(method, options) {
-        // set options
-        this.init(options);
-
-        // set request params
-        var params = this.getParams();
-        var deferred = jQuery.Deferred();
-
-        // remove null values from the data object
-        if (_.isObject(params.data)) {
-          params.data = _.pick(params.data, function(value) {
-            return (value !== null)
-          })
-        }
-
-        // ajax request
-        deferred = jQuery.post(
-          this.options.url,
-          params,
-          null,
-          'json'
-        ).then(function(data) {
-          return data;
-        }, function(xhr) {
-          return xhr.responseJSON;
-        });
-
-        // clear options
-        this.options = {};
-
-        return deferred;
-      }
-  };
-});
+function requestFailed(errorMessage, xhr) {
+  if (xhr.responseJSON) {
+    return xhr.responseJSON;
+  }
+  var message = errorMessage.replace('%d', xhr.status);
+  return {
+    errors: [
+      {
+        message: message
+      }
+    ]
+  };
+}
+
+define('ajax', ['mailpoet', 'jquery', 'underscore'], function (mp, jQuery, _) {
+  var MailPoet = mp;
+
+  MailPoet.Ajax = {
+    version: 0.5,
+    options: {},
+    defaults: {
+      url: null,
+      api_version: null,
+      endpoint: null,
+      action: null,
+      token: null,
+      data: {}
+    },
+    post: function (options) {
+      return this.request('post', options);
+    },
+    init: function (options) {
+      // merge options
+      this.options = jQuery.extend({}, this.defaults, options);
+
+      // set default url
+      if (this.options.url === null) {
+        this.options.url = window.ajaxurl;
+      }
+
+      // set default token
+      if (this.options.token === null) {
+        this.options.token = window.mailpoet_token;
+      }
+    },
+    getParams: function () {
+      return {
+        action: 'mailpoet',
+        api_version: this.options.api_version,
+        token: this.options.token,
+        endpoint: this.options.endpoint,
+        method: this.options.action,
+        data: this.options.data || {}
+      };
+    },
+    request: function (method, options) {
+        // set options
+      this.init(options);
+
+        // set request params
+      var params = this.getParams();
+
+        // remove null values from the data object
+      if (_.isObject(params.data)) {
+        params.data = _.pick(params.data, function (value) {
+          return (value !== null);
+        });
+      }
+
+        // ajax request
+      var deferred = jQuery.post(
+          this.options.url,
+          params,
+          null,
+          'json'
+        ).then(function (data) {
+          return data;
+        }, _.partial(requestFailed, MailPoet.I18n.t('ajaxFailedErrorMessage')));
+
+        // clear options
+      this.options = {};
+
+      return deferred;
+    }
+  };
+});

assets/js/src/analytics_event.js

@@ -0,0 +1,73 @@
+/*
+ * This creates two functions and adds them to MailPoet object
+ * - `trackEvent` which should be used in normal circumstances.
+ *   This function tracks an event and sends it to mixpanel.
+ *   This function does nothing if analytics is disabled.
+ * - `forceTrackEvent` which sends given event to analytics
+ *   even if it has been disabled.
+ *
+ */
+
+/**
+ *  This is to cache events which are triggered before the mixpanel
+ *  library is loaded. This might happen if an event is tracked
+ *  on page load and the mixpanel library takes a long time to load.
+ *  After it is loaded all events are posted.
+ * @type {Array.Object}
+ */
+var eventsCache = [];
+
+function track(name, data) {
+  if (typeof window.mixpanel.track !== 'function') {
+    window.mixpanel.init(window.mixpanelTrackingId);
+  }
+  window.mixpanel.track(name, data);
+}
+
+function exportMixpanel(mp) {
+  var MailPoet = mp;
+  MailPoet.forceTrackEvent = track;
+
+  if (window.mailpoet_analytics_enabled) {
+    MailPoet.trackEvent = track;
+  } else {
+    MailPoet.trackEvent = function () {};
+  }
+}
+
+function trackCachedEvents() {
+  eventsCache.map(function (event) {
+    if (window.mailpoet_analytics_enabled || event.forced) {
+      window.mixpanel.track(event.name, event.data);
+    }
+  });
+}
+
+function cacheEvent(forced, name, data) {
+  eventsCache.push({
+    name: name,
+    data: data,
+    forced: forced
+  });
+}
+
+define(
+  ['mailpoet', 'underscore'],
+  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);
+
+    initializeMixpanelWhenLoaded();
+  }
+);

assets/js/src/date.js

@@ -3,164 +3,167 @@ define('date',
     'mailpoet',
     'jquery',
     'moment'
-  ], function(
-    MailPoet,
+  ], function (
+    mp,
     jQuery,
     Moment
 ) {
-  'use strict';
+    'use strict';
 
-  MailPoet.Date = {
-    version: 0.1,
-    options: {},
-    defaults: {
-      offset: 0,
-      format: 'F, d Y H:i:s'
-    },
-    init: function(options) {
-      options = options || {};
+    var MailPoet = mp;
+
+    MailPoet.Date = {
+      version: 0.1,
+      options: {},
+      defaults: {
+        offset: 0,
+        format: 'F, d Y H:i:s'
+      },
+      init: function (opts) {
+        var options = opts || {};
 
       // set UTC offset
-      if (
+        if (
         options.offset === undefined
         && window.mailpoet_date_offset !== undefined
       ) {
-        options.offset = window.mailpoet_date_offset;
-      }
+          options.offset = window.mailpoet_date_offset;
+        }
       // set date format
-      if (
+        if (
         options.format === undefined
         && window.mailpoet_date_format !== undefined
       ) {
-        options.format = window.mailpoet_date_format;
-      }
-      // merge options
-      this.options = jQuery.extend({}, this.defaults, options);
-
-      return this;
-    },
-    format: function(date, options) {
-      options = options || {};
-      this.init(options);
-
-      var date = Moment(date, this.convertFormat(options.parseFormat));
-      if (options.offset === 0) date = date.utc();
-      return date.format(this.convertFormat(this.options.format));
-    },
-    toDate: function(date, options) {
-      options = options || {};
-      this.init(options);
-
-      return Moment(date, this.convertFormat(options.parseFormat)).toDate();
-    },
-    short: function(date) {
-      return this.format(date, {
-        format: 'F, j Y'
-      });
-    },
-    full: function(date) {
-      return this.format(date, {
-        format: 'F, j Y H:i:s'
-      });
-    },
-    time: function(date) {
-      return this.format(date, {
-        format: 'H:i:s'
-      });
-    },
-    convertFormat: function(format) {
-      var format_mappings = {
-        date: {
-          d: 'DD',
-          D: 'ddd',
-          j: 'D',
-          l: 'dddd',
-          N: 'E',
-          S: 'o',
-          w: 'e',
-          z: 'DDD',
-          W: 'W',
-          F: 'MMMM',
-          m: 'MM',
-          M: 'MMM',
-          n: 'M',
-          t: '', // no equivalent
-          L: '', // no equivalent
-          o: 'YYYY',
-          Y: 'YYYY',
-          y: 'YY',
-          a: 'a',
-          A: 'A',
-          B: '', // no equivalent
-          g: 'h',
-          G: 'H',
-          h: 'hh',
-          H: 'HH',
-          i: 'mm',
-          s: 'ss',
-          u: 'SSS',
-          e: 'zz', // deprecated since version 1.6.0 of moment.js
-          I: '', // no equivalent
-          O: '', // no equivalent
-          P: '', // no equivalent
-          T: '', // no equivalent
-          Z: '', // no equivalent
-          c: '', // no equivalent
-          r: '', // no equivalent
-          U: 'X'
-        },
-        strftime: {
-          a: 'ddd',
-          A: 'dddd',
-          b: 'MMM',
-          B: 'MMMM',
-          d: 'DD',
-          e: 'D',
-          F: 'YYYY-MM-DD',
-          H: 'HH',
-          I: 'hh',
-          j: 'DDDD',
-          k: 'H',
-          l: 'h',
-          m: 'MM',
-          M: 'mm',
-          p: 'A',
-          S: 'ss',
-          u: 'E',
-          w: 'd',
-          W: 'WW',
-          y: 'YY',
-          Y: 'YYYY',
-          z: 'ZZ',
-          Z: 'z'
+          options.format = window.mailpoet_date_format;
         }
-      };
+      // merge options
+        this.options = jQuery.extend({}, this.defaults, options);
 
-      if (!format || format.length <= 0) return format;
+        return this;
+      },
+      format: function (date, opts) {
+        var options = opts || {};
+        this.init(options);
 
-      var replacements = format_mappings['date'];
+        var momentDate = Moment(date, this.convertFormat(options.parseFormat));
+        if (options.offset === 0) momentDate = momentDate.utc();
+        return momentDate.format(this.convertFormat(this.options.format));
+      },
+      toDate: function (date, opts) {
+        var options = opts || {};
+        this.init(options);
 
-      var convertedFormat = [];
-      var escapeToken = false;
+        return Moment(date, this.convertFormat(options.parseFormat)).toDate();
+      },
+      short: function (date) {
+        return this.format(date, {
+          format: 'F, j Y'
+        });
+      },
+      full: function (date) {
+        return this.format(date, {
+          format: 'F, j Y H:i:s'
+        });
+      },
+      time: function (date) {
+        return this.format(date, {
+          format: 'H:i:s'
+        });
+      },
+      convertFormat: function (format) {
+        var format_mappings = {
+          date: {
+            d: 'DD',
+            D: 'ddd',
+            j: 'D',
+            l: 'dddd',
+            N: 'E',
+            S: 'o',
+            w: 'e',
+            z: 'DDD',
+            W: 'W',
+            F: 'MMMM',
+            m: 'MM',
+            M: 'MMM',
+            n: 'M',
+            t: '', // no equivalent
+            L: '', // no equivalent
+            o: 'YYYY',
+            Y: 'YYYY',
+            y: 'YY',
+            a: 'a',
+            A: 'A',
+            B: '', // no equivalent
+            g: 'h',
+            G: 'H',
+            h: 'hh',
+            H: 'HH',
+            i: 'mm',
+            s: 'ss',
+            u: 'SSS',
+            e: 'zz', // deprecated since version 1.6.0 of moment.js
+            I: '', // no equivalent
+            O: '', // no equivalent
+            P: '', // no equivalent
+            T: '', // no equivalent
+            Z: '', // no equivalent
+            c: '', // no equivalent
+            r: '', // no equivalent
+            U: 'X'
+          },
+          strftime: {
+            a: 'ddd',
+            A: 'dddd',
+            b: 'MMM',
+            B: 'MMMM',
+            d: 'DD',
+            e: 'D',
+            F: 'YYYY-MM-DD',
+            H: 'HH',
+            I: 'hh',
+            j: 'DDDD',
+            k: 'H',
+            l: 'h',
+            m: 'MM',
+            M: 'mm',
+            p: 'A',
+            S: 'ss',
+            u: 'E',
+            w: 'd',
+            W: 'WW',
+            y: 'YY',
+            Y: 'YYYY',
+            z: 'ZZ',
+            Z: 'z'
+          }
+        };
 
-      for(var index = 0, token = ''; token = format.charAt(index); index++){
-        if (escapeToken === true) {
-          convertedFormat.push('['+token+']');
-          escapeToken = false;
-        } else {
-          if (token === '\\') {
-            // Slash escapes the next symbol to be treated as literal
-            escapeToken = true;
-            continue;
-          } else if (replacements[token] !== undefined) {
-            convertedFormat.push(replacements[token]);
+        if (!format || format.length <= 0) return format;
+
+        var replacements = format_mappings['date'];
+
+        var convertedFormat = [];
+        var escapeToken = false;
+
+        for (var index = 0, token = ''; format.charAt(index); index += 1) {
+          token = format.charAt(index);
+          if (escapeToken === true) {
+            convertedFormat.push('[' + token + ']');
+            escapeToken = false;
           } else {
-            convertedFormat.push('['+token+']');
+            if (token === '\\') {
+            // Slash escapes the next symbol to be treated as literal
+              escapeToken = true;
+              continue;
+            } else if (replacements[token] !== undefined) {
+              convertedFormat.push(replacements[token]);
+            } else {
+              convertedFormat.push('[' + token + ']');
+            }
           }
         }
-      }
 
-      return convertedFormat.join('');
-    }
-  };
-});
+        return convertedFormat.join('');
+      }
+    };
+  });

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

@@ -1,15 +1,15 @@
 define([
-  'react'
+  'react',
 ],
-function(
+(
   React
-) {
+) => {
   const FormFieldCheckbox = React.createClass({
-    onValueChange: function(e) {
+    onValueChange: function (e) {
       e.target.value = this.refs.checkbox.checked ? '1' : '0';
       return this.props.onValueChange(e);
     },
-    render: function() {
+    render: function () {
       if (this.props.field.values === undefined) {
         return false;
       }
@@ -20,15 +20,15 @@ function(
       const options = Object.keys(this.props.field.values).map(
         (value, index) => {
           return (
-            <p key={ 'checkbox-' + index }>
+            <p key={'checkbox-' + index}>
               <label>
                 <input
                   ref="checkbox"
                   type="checkbox"
                   value="1"
-                  checked={ isChecked }
-                  onChange={ this.onValueChange }
-                  name={ this.props.field.name }
+                  checked={isChecked}
+                  onChange={this.onValueChange}
+                  name={this.props.field.name}
                 />
                 { this.props.field.values[value] }
               </label>
@@ -42,8 +42,8 @@ function(
           { options }
         </div>
       );
-    }
+    },
   });
 
   return FormFieldCheckbox;
-});
+});

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

@@ -1,10 +1,10 @@
 define([
   'react',
   'moment',
-], function(
+], (
   React,
   Moment
-) {
+) => {
   class FormFieldDateYear extends React.Component {
     render() {
       const yearsRange = 100;
@@ -12,24 +12,24 @@ define([
 
       if (this.props.placeholder !== undefined) {
         years.push((
-          <option value="" key={ 0 }>{ this.props.placeholder }</option>
+          <option value="" key={0}>{ this.props.placeholder }</option>
         ));
       }
 
       const currentYear = Moment().year();
-      for (let i = currentYear; i >= currentYear - yearsRange; i--) {
+      for (let i = currentYear; i >= currentYear - yearsRange; i -= 1) {
         years.push((
           <option
-            key={ i }
-            value={ i }
+            key={i}
+            value={i}
          >{ i }</option>
         ));
       }
       return (
         <select
-          name={ `${this.props.name}[year]` }
-          value={ this.props.year }
-          onChange={ this.props.onValueChange }
+          name={`${this.props.name}[year]`}
+          value={this.props.year}
+          onChange={this.props.onValueChange}
         >
           { years }
         </select>
@@ -43,23 +43,23 @@ define([
 
       if (this.props.placeholder !== undefined) {
         months.push((
-          <option value="" key={ 0 }>{ this.props.placeholder }</option>
+          <option value="" key={0}>{ this.props.placeholder }</option>
         ));
       }
 
-      for (let i = 1; i <= 12; i++) {
+      for (let i = 1; i <= 12; i += 1) {
         months.push((
           <option
-            key={ i }
-            value={ i }
+            key={i}
+            value={i}
          >{ this.props.monthNames[i - 1] }</option>
         ));
       }
       return (
         <select
-          name={ `${this.props.name}[month]` }
-          value={ this.props.month }
-          onChange={ this.props.onValueChange }
+          name={`${this.props.name}[month]`}
+          value={this.props.month}
+          onChange={this.props.onValueChange}
         >
           { months }
         </select>
@@ -73,24 +73,24 @@ define([
 
       if (this.props.placeholder !== undefined) {
         days.push((
-          <option value="" key={ 0 }>{ this.props.placeholder }</option>
+          <option value="" key={0}>{ this.props.placeholder }</option>
         ));
       }
 
-      for (let i = 1; i <= 31; i++) {
+      for (let i = 1; i <= 31; i += 1) {
         days.push((
           <option
-            key={ i }
-            value={ i }
+            key={i}
+            value={i}
           >{ i }</option>
         ));
       }
 
       return (
         <select
-          name={ `${this.props.name}[day]` }
-          value={ this.props.day }
-          onChange={ this.props.onValueChange }
+          name={`${this.props.name}[day]`}
+          value={this.props.day}
+          onChange={this.props.onValueChange}
         >
           { days }
         </select>
@@ -104,13 +104,13 @@ define([
       this.state = {
         year: '',
         month: '',
-        day: ''
-      }
+        day: '',
+      };
     }
     componentDidMount() {
       this.extractDateParts();
     }
-    componentDidUpdate(prevProps, prevState) {
+    componentDidUpdate(prevProps) {
       if (
         (this.props.item !== undefined && prevProps.item !== undefined)
         && (this.props.item.id !== prevProps.item.id)
@@ -123,7 +123,7 @@ define([
         ? this.props.item[this.props.field.name].trim()
         : '';
 
-      if(value === '') {
+      if (value === '') {
         return;
       }
 
@@ -132,7 +132,7 @@ define([
       this.setState({
         year: dateTime.format('YYYY'),
         month: dateTime.format('M'),
-        day: dateTime.format('D')
+        day: dateTime.format('D'),
       });
     }
     formatValue() {
@@ -140,33 +140,33 @@ define([
 
       let value;
 
-      switch(dateType) {
+      switch (dateType) {
         case 'year_month_day':
           value = {
-            'year': this.state.year,
-            'month': this.state.month,
-            'day': this.state.day
+            year: this.state.year,
+            month: this.state.month,
+            day: this.state.day,
           };
-        break;
+          break;
 
         case 'year_month':
           value = {
-            'year': this.state.year,
-            'month': this.state.month
+            year: this.state.year,
+            month: this.state.month,
           };
-        break;
+          break;
 
         case 'month':
           value = {
-            'month': this.state.month
+            month: this.state.month,
           };
-        break;
+          break;
 
         case 'year':
           value = {
-            'year': this.state.year
+            year: this.state.year,
           };
-        break;
+          break;
       }
 
       return value;
@@ -181,16 +181,16 @@ define([
         field = matches[1];
         property = matches[2];
 
-        let value = ~~(e.target.value);
+        const value = ~~(e.target.value);
 
         this.setState({
-          [`${property}`]: value
+          [`${property}`]: value,
         }, () => {
           this.props.onValueChange({
             target: {
               name: field,
-              value: this.formatValue()
-            }
+              value: this.formatValue(),
+            },
           });
         });
       }
@@ -201,43 +201,40 @@ define([
       const dateType = this.props.field.params.date_type;
       const dateSelects = dateFormats[dateType][0].split('/');
 
-      const fields = dateSelects.map(type => {
-        switch(type) {
+      const fields = dateSelects.map((type) => {
+        switch (type) {
           case 'YYYY':
             return (<FormFieldDateYear
-              onValueChange={ this.onValueChange.bind(this) }
-              ref={ 'year' }
-              key={ 'year' }
-              name={ this.props.field.name }
-              year={ this.state.year }
-              placeholder={ this.props.field.year_placeholder }
+              onValueChange={this.onValueChange.bind(this)}
+              ref={'year'}
+              key={'year'}
+              name={this.props.field.name}
+              year={this.state.year}
+              placeholder={this.props.field.year_placeholder}
             />);
-          break;
 
           case 'MM':
             return (<FormFieldDateMonth
-              onValueChange={ this.onValueChange.bind(this) }
-              ref={ 'month' }
-              key={ 'month' }
-              name={ this.props.field.name }
-              month={ this.state.month }
-              monthNames={ monthNames }
-              placeholder={ this.props.field.month_placeholder }
+              onValueChange={this.onValueChange.bind(this)}
+              ref={'month'}
+              key={'month'}
+              name={this.props.field.name}
+              month={this.state.month}
+              monthNames={monthNames}
+              placeholder={this.props.field.month_placeholder}
             />);
-          break;
 
           case 'DD':
             return (<FormFieldDateDay
-              onValueChange={ this.onValueChange.bind(this) }
-              ref={ 'day' }
-              key={ 'day' }
-              name={ this.props.field.name }
-              day={ this.state.day }
-              placeholder={ this.props.field.day_placeholder }
+              onValueChange={this.onValueChange.bind(this)}
+              ref={'day'}
+              key={'day'}
+              name={this.props.field.name}
+              day={this.state.day}
+              placeholder={this.props.field.day_placeholder}
             />);
-          break;
         }
-       });
+      });
 
       return (
         <div>
@@ -245,7 +242,7 @@ define([
         </div>
       );
     }
-  };
+  }
 
   return FormFieldDate;
-});
+});

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

@@ -7,8 +7,9 @@ define([
   'form/fields/checkbox.jsx',
   'form/fields/selection.jsx',
   'form/fields/date.jsx',
+  'jquery',
 ],
-function(
+(
   React,
   FormFieldText,
   FormFieldTextarea,
@@ -16,91 +17,93 @@ function(
   FormFieldRadio,
   FormFieldCheckbox,
   FormFieldSelection,
-  FormFieldDate
-) {
-  var FormField = React.createClass({
-    renderField: function(data, inline = false) {
-      var description = false;
-      if(data.field.description) {
+  FormFieldDate,
+  jQuery
+) => {
+  const FormField = React.createClass({
+    renderField: function (data, inline = false) {
+      let description = false;
+      if (data.field.description) {
         description = (
           <p className="description">{ data.field.description }</p>
         );
       }
 
-      var field = false;
+      let field = false;
+      let dataField = data.field;
 
-      if(data.field['field'] !== undefined) {
-        data.field = jQuery.merge(data.field, data.field.field);
+      if (data.field['field'] !== undefined) {
+        dataField = jQuery.merge(dataField, data.field.field);
       }
 
-      switch(data.field.type) {
+      switch (dataField.type) {
         case 'text':
           field = (<FormFieldText {...data} />);
-        break;
+          break;
 
         case 'textarea':
           field = (<FormFieldTextarea {...data} />);
-        break;
+          break;
 
         case 'select':
           field = (<FormFieldSelect {...data} />);
-        break;
+          break;
 
         case 'radio':
           field = (<FormFieldRadio {...data} />);
-        break;
+          break;
 
         case 'checkbox':
           field = (<FormFieldCheckbox {...data} />);
-        break;
+          break;
 
         case 'selection':
           field = (<FormFieldSelection {...data} />);
-        break;
+          break;
 
         case 'date':
           field = (<FormFieldDate {...data} />);
-        break;
+          break;
 
         case 'reactComponent':
           field = (<data.field.component {...data} />);
-        break;
+          break;
       }
 
-      if(inline === true) {
+      if (inline === true) {
         return (
-          <span key={ 'field-' + (data.index || 0) }>
+          <span key={'field-' + (data.index || 0)}>
             { field }
             { description }
           </span>
         );
       } else {
         return (
-          <div key={ 'field-' + (data.index || 0) }>
+          <div key={'field-' + (data.index || 0)}>
             { field }
             { description }
           </div>
         );
       }
     },
-    render: function() {
-      var field = false;
+    render: function () {
+      let field = false;
 
-      if(this.props.field['fields'] !== undefined) {
-        field = this.props.field.fields.map(function(subfield, index) {
+      if (this.props.field['fields'] !== undefined) {
+        field = this.props.field.fields.map((subfield, index) => {
           return this.renderField({
             index: index,
             field: subfield,
             item: this.props.item,
-            onValueChange: this.props.onValueChange || false
+            onValueChange: this.props.onValueChange || false,
           });
-        }.bind(this));
+        });
       } else {
         field = this.renderField(this.props);
       }
 
-      var tip = false;
-      if(this.props.field.tip) {
+      let tip = false;
+      if (this.props.field.tip) {
         tip = (
           <p className="description">{ this.props.field.tip }</p>
         );
@@ -110,7 +113,7 @@ function(
         <tr>
           <th scope="row">
             <label
-              htmlFor={ 'field_'+this.props.field.name }
+              htmlFor={'field_' + this.props.field.name}
             >
               { this.props.field.label }
               { tip }
@@ -121,7 +124,7 @@ function(
           </td>
         </tr>
       );
-    }
+    },
   });
 
   return FormField;

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

@@ -1,11 +1,11 @@
 define([
-  'react'
+  'react',
 ],
-function(
+(
   React
-) {
+) => {
   const FormFieldRadio = React.createClass({
-    render: function() {
+    render: function () {
       if (this.props.field.values === undefined) {
         return false;
       }
@@ -14,14 +14,14 @@ function(
       const options = Object.keys(this.props.field.values).map(
         (value, index) => {
           return (
-            <p key={ 'radio-' + index }>
+            <p key={'radio-' + index}>
               <label>
                 <input
                   type="radio"
-                  checked={ selected_value === value }
-                  value={ value }
-                  onChange={ this.props.onValueChange }
-                  name={ this.props.field.name } />
+                  checked={selected_value === value}
+                  value={value}
+                  onChange={this.props.onValueChange}
+                  name={this.props.field.name} />
                 { this.props.field.values[value] }
               </label>
             </p>
@@ -34,8 +34,8 @@ function(
           { options }
         </div>
       );
-    }
+    },
   });
 
   return FormFieldRadio;
-});
+});

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

@@ -1,5 +1,5 @@
-import React from 'react'
-import _ from 'underscore'
+import React from 'react';
+import _ from 'underscore';
 
 const FormFieldSelect = React.createClass({
   render() {
@@ -33,12 +33,12 @@ const FormFieldSelect = React.createClass({
         _.map(
           _.sortBy(
             _.pairs(this.props.field.values),
-            (item) => sortBy(item[0], item[1])
+            item => sortBy(item[0], item[1])
           ),
-          (item) => item[0]
+          item => item[0]
         );
     } else {
-      keys = Object.keys(this.props.field.values)
+      keys = Object.keys(this.props.field.values);
     }
 
     const options = keys.map(
@@ -50,8 +50,8 @@ const FormFieldSelect = React.createClass({
 
         return (
           <option
-            key={ 'option-' + index }
-            value={ value }>
+            key={'option-' + index}
+            value={value}>
             { this.props.field.values[value] }
           </option>
         );
@@ -60,17 +60,17 @@ const FormFieldSelect = React.createClass({
 
     return (
       <select
-        name={ this.props.field.name }
-        id={ 'field_'+this.props.field.name }
-        value={ this.props.item[this.props.field.name] }
-        onChange={ this.props.onValueChange }
+        name={this.props.field.name}
+        id={'field_' + this.props.field.name}
+        value={this.props.item[this.props.field.name]}
+        onChange={this.props.onValueChange}
         {...this.props.field.validation}
       >
         {placeholder}
         {options}
       </select>
     );
-  }
+  },
 });
 
 module.exports = FormFieldSelect;

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

@@ -2,80 +2,80 @@ define([
   'react',
   'react-dom',
   'jquery',
-  'select2'
+  'select2',
 ],
-function(
+(
   React,
   ReactDOM,
   jQuery
-) {
-  var Selection = React.createClass({
-    getInitialState: function() {
+) => {
+  const Selection = React.createClass({
+    getInitialState: function () {
       return {
         items: [],
-        select2: false
+        select2: false,
       };
     },
-    componentWillMount: function() {
+    componentWillMount: function () {
       this.loadCachedItems();
     },
-    allowMultipleValues: function() {
+    allowMultipleValues: function () {
       return (this.props.field.multiple === true);
     },
-    isSelect2Initialized: function() {
+    isSelect2Initialized: function () {
       return (this.state.select2 === true);
     },
-    componentDidMount: function() {
-      if(this.allowMultipleValues()) {
+    componentDidMount: function () {
+      if (this.allowMultipleValues()) {
         this.setupSelect2();
       }
     },
-    componentDidUpdate: function(prevProps, prevState) {
-      if(
+    componentDidUpdate: function (prevProps) {
+      if (
         (this.props.item !== undefined && prevProps.item !== undefined)
         && (this.props.item.id !== prevProps.item.id)
       ) {
-        jQuery('#'+this.refs.select.id)
+        jQuery('#' + this.refs.select.id)
           .val(this.getSelectedValues())
           .trigger('change');
       }
     },
-    componentWillUnmount: function() {
-      if(this.allowMultipleValues()) {
+    componentWillUnmount: function () {
+      if (this.allowMultipleValues()) {
         this.destroySelect2();
       }
     },
-    destroySelect2: function() {
-      if(this.isSelect2Initialized()) {
-        jQuery('#'+this.refs.select.id).select2('destroy');
+    destroySelect2: function () {
+      if (this.isSelect2Initialized()) {
+        jQuery('#' + this.refs.select.id).select2('destroy');
       }
     },
-    setupSelect2: function() {
-      if(this.isSelect2Initialized()) {
+    setupSelect2: function () {
+      if (this.isSelect2Initialized()) {
         return;
       }
 
-      var select2 = jQuery('#'+this.refs.select.id).select2({
+      const select2 = jQuery('#' + this.refs.select.id).select2({
         width: (this.props.width || ''),
-        templateResult: function(item) {
-          if(item.element && item.element.selected) {
+        templateResult: function (item) {
+          if (item.element && item.element.selected) {
             return null;
           } else {
-            if(item.title) {
+            if (item.title) {
               return item.title;
             } else {
               return item.text;
             }
           }
-        }
+        },
       });
 
-      var hasRemoved = false;
-      select2.on('select2:unselecting', function(e) {
+      let hasRemoved = false;
+      select2.on('select2:unselecting', () => {
         hasRemoved = true;
       });
-      select2.on('select2:opening', function(e) {
-        if(hasRemoved === true) {
+      select2.on('select2:opening', (e) => {
+        if (hasRemoved === true) {
           hasRemoved = false;
           e.preventDefault();
         }
@@ -85,13 +85,13 @@ function(
 
       this.setState({ select2: true });
     },
-    getSelectedValues: function() {
-      if(this.props.field['selected'] !== undefined) {
+    getSelectedValues: function () {
+      if (this.props.field['selected'] !== undefined) {
         return this.props.field['selected'](this.props.item);
-      } else if(this.props.item !== undefined && this.props.field.name !== undefined) {
+      } else if (this.props.item !== undefined && this.props.field.name !== undefined) {
         if (this.allowMultipleValues()) {
           if (Array.isArray(this.props.item[this.props.field.name])) {
-            return this.props.item[this.props.field.name].map(function(item) {
+            return this.props.item[this.props.field.name].map((item) => {
               return item.id;
             });
           }
@@ -101,50 +101,51 @@ function(
       }
       return null;
     },
-    loadCachedItems: function() {
-      if(typeof(window['mailpoet_'+this.props.field.endpoint]) !== 'undefined') {
-        var items = window['mailpoet_'+this.props.field.endpoint];
+    loadCachedItems: function () {
+      if (typeof (window['mailpoet_' + this.props.field.endpoint]) !== 'undefined') {
+        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);
         }
 
         this.setState({
-          items: items
+          items: items,
         });
       }
     },
-    handleChange: function(e) {
-      if(this.props.onValueChange !== undefined) {
-        if(this.props.field.multiple) {
-          value = jQuery('#'+this.refs.select.id).val();
+    handleChange: function (e) {
+      let value;
+      if (this.props.onValueChange !== undefined) {
+        if (this.props.field.multiple) {
+          value = jQuery('#' + this.refs.select.id).val();
         } else {
           value = e.target.value;
         }
-        var transformedValue = this.transformChangedValue(value);
+        const transformedValue = this.transformChangedValue(value);
         this.props.onValueChange({
-         target: {
+          target: {
             value: transformedValue,
-            name: this.props.field.name
-          }
+            name: this.props.field.name,
+          },
         });
       }
     },
-    getLabel: function(item) {
-      if(this.props.field['getLabel'] !== undefined) {
+    getLabel: function (item) {
+      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) {
+    getSearchLabel: function (item) {
+      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) {
+    getValue: function (item) {
+      if (this.props.field['getValue'] !== undefined) {
         return this.props.field.getValue(item, this.props.item);
       }
       return item.id;
@@ -152,24 +153,24 @@ function(
     // When it's impossible to represent the desired value in DOM,
     // this function may be used to transform the placeholder value into
     // desired value.
-    transformChangedValue: function(value) {
-      if(typeof this.props.field['transformChangedValue'] === 'function') {
+    transformChangedValue: function (value) {
+      if (typeof this.props.field['transformChangedValue'] === 'function') {
         return this.props.field.transformChangedValue.call(this, value);
       } else {
         return value;
       }
     },
-    render: function() {
+    render: function () {
       const options = this.state.items.map((item, index) => {
-        let label = this.getLabel(item);
-        let searchLabel = this.getSearchLabel(item);
-        let value = this.getValue(item);
+        const label = this.getLabel(item);
+        const searchLabel = this.getSearchLabel(item);
+        const value = this.getValue(item);
 
         return (
           <option
-            key={ 'option-'+index }
-            value={ value }
-            title={ searchLabel }
+            key={'option-' + index}
+            value={value}
+            title={searchLabel}
           >
             { label }
           </option>
@@ -178,15 +179,16 @@ function(
 
       return (
         <select
-          id={ this.props.field.id || this.props.field.name }
+          id={this.props.field.id || this.props.field.name}
           ref="select"
-          data-placeholder={ this.props.field.placeholder }
-          multiple={ this.props.field.multiple }
-          defaultValue={ this.getSelectedValues() }
+          disabled={this.props.field.disabled}
+          data-placeholder={this.props.field.placeholder}
+          multiple={this.props.field.multiple}
+          defaultValue={this.getSelectedValues()}
           {...this.props.field.validation}
         >{ options }</select>
       );
-    }
+    },
   });
 
   return Selection;

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

@@ -1,4 +1,4 @@
-import React from 'react'
+import React from 'react';
 
 const FormFieldText = React.createClass({
   render() {
@@ -15,21 +15,21 @@ const FormFieldText = React.createClass({
           ? this.props.field.disabled(this.props.item)
           : false
         }
-        className={ (this.props.field.size) ? '' : 'regular-text' }
+        className={(this.props.field.size) ? '' : 'regular-text'}
         size={
           (this.props.field.size !== 'auto' && this.props.field.size > 0)
           ? this.props.field.size
           : false
         }
-        name={ this.props.field.name }
-        id={ 'field_'+this.props.field.name }
-        value={ value }
-        placeholder={ this.props.field.placeholder }
-        onChange={ this.props.onValueChange }
+        name={this.props.field.name}
+        id={'field_' + this.props.field.name}
+        value={value}
+        placeholder={this.props.field.placeholder}
+        onChange={this.props.onValueChange}
         {...this.props.field.validation}
       />
     );
-  }
+  },
 });
 
-module.exports = FormFieldText;
+module.exports = FormFieldText;

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

@@ -1,26 +1,26 @@
 define([
-  'react'
+  'react',
 ],
-function(
+(
   React
-) {
-  var FormFieldTextarea = React.createClass({
-    render: function() {
+) => {
+  const FormFieldTextarea = React.createClass({
+    render: function () {
       return (
         <textarea
           type="text"
           className="regular-text"
-          name={ this.props.field.name }
-          id={ 'field_'+this.props.field.name }
-          value={ this.props.item[this.props.field.name] }
-          placeholder={ this.props.field.placeholder }
-          defaultValue={ this.props.field.defaultValue }
-          onChange={ this.props.onValueChange }
+          name={this.props.field.name}
+          id={'field_' + this.props.field.name}
+          value={this.props.item[this.props.field.name]}
+          placeholder={this.props.field.placeholder}
+          defaultValue={this.props.field.defaultValue}
+          onChange={this.props.onValueChange}
           {...this.props.field.validation}
         />
       );
-    }
+    },
   });
 
   return FormFieldTextarea;
-});
+});

assets/js/src/form/form.jsx

@@ -4,54 +4,56 @@ define(
     'mailpoet',
     'classnames',
     'react-router',
-    'form/fields/field.jsx'
+    'form/fields/field.jsx',
+    'jquery',
   ],
-  function(
+  (
     React,
     MailPoet,
     classNames,
     Router,
-    FormField
-  ) {
+    FormField,
+    jQuery
+  ) => {
 
-    var Form = React.createClass({
+    const Form = React.createClass({
       contextTypes: {
-        router: React.PropTypes.object.isRequired
+        router: React.PropTypes.object.isRequired,
       },
-      getDefaultProps: function() {
+      getDefaultProps: function () {
         return {
           params: {},
         };
       },
-      getInitialState: function() {
+      getInitialState: function () {
         return {
           loading: false,
           errors: [],
-          item: {}
+          item: {},
         };
       },
-      getValues: function() {
+      getValues: function () {
         return this.props.item ? this.props.item : this.state.item;
       },
-      getErrors: function() {
+      getErrors: function () {
         return this.props.errors ? this.props.errors : this.state.errors;
       },
-      componentDidMount: function() {
-        if(this.isMounted()) {
-          if(this.props.params.id !== undefined) {
+      componentDidMount: function () {
+        if (this.isMounted()) {
+          if (this.props.params.id !== undefined) {
             this.loadItem(this.props.params.id);
           } else {
             this.setState({
-              item: jQuery('.mailpoet_form').serializeObject()
+              item: jQuery('.mailpoet_form').serializeObject(),
             });
           }
         }
       },
-      componentWillReceiveProps: function(props) {
-        if(props.params.id === undefined) {
+      componentWillReceiveProps: function (props) {
+        if (props.params.id === undefined) {
           this.setState({
             loading: false,
-            item: {}
+            item: {},
           });
           if (props.item === undefined) {
             this.refs.form.reset();
@@ -60,35 +62,36 @@ define(
           this.loadItem(props.params.id);
         }
       },
-      loadItem: function(id) {
+      loadItem: function (id) {
         this.setState({ loading: true });
 
         MailPoet.Ajax.post({
+          api_version: window.mailpoet_api_version,
           endpoint: this.props.endpoint,
           action: 'get',
           data: {
-            id: id
-          }
+            id: id,
+          },
         }).done((response) => {
           this.setState({
             loading: false,
-            item: response.data
+            item: response.data,
           });
-        }).fail((response) => {
+        }).fail(() => {
           this.setState({
             loading: false,
-            item: {}
-          }, function() {
+            item: {},
+          }, function () {
             this.context.router.push('/new');
           });
         });
       },
-      handleSubmit: function(e) {
+      handleSubmit: function (e) {
         e.preventDefault();
 
         // handle validation
-        if(this.props.isValid !== undefined) {
-          if(this.props.isValid() === false) {
+        if (this.props.isValid !== undefined) {
+          if (this.props.isValid() === false) {
             return;
           }
         }
@@ -96,78 +99,80 @@ define(
         this.setState({ loading: true });
 
         // only get values from displayed fields
-        var item = {};
-        this.props.fields.map(function(field) {
-          if(field['fields'] !== undefined) {
-            field.fields.map(function(subfield) {
+        const item = {};
+        this.props.fields.map((field) => {
+          if (field['fields'] !== undefined) {
+            field.fields.map((subfield) => {
               item[subfield.name] = this.state.item[subfield.name];
-            }.bind(this));
+            });
           } else {
             item[field.name] = this.state.item[field.name];
           }
-        }.bind(this));
+        });
         // set id if specified
-        if(this.props.params.id !== undefined) {
+        if (this.props.params.id !== undefined) {
           item.id = this.props.params.id;
         }
 
         MailPoet.Ajax.post({
+          api_version: window.mailpoet_api_version,
           endpoint: this.props.endpoint,
           action: 'save',
-          data: item
+          data: item,
         }).always(() => {
           this.setState({ loading: false });
-        }).done((response) => {
-          if(this.props.onSuccess !== undefined) {
+        }).done(() => {
+          if (this.props.onSuccess !== undefined) {
             this.props.onSuccess();
           } else {
             this.context.router.push('/');
           }
 
-          if(this.props.params.id !== undefined) {
+          if (this.props.params.id !== undefined) {
             this.props.messages.onUpdate();
           } else {
             this.props.messages.onCreate();
           }
         }).fail((response) => {
-          if(response.errors.length > 0) {
+          if (response.errors.length > 0) {
             this.setState({ errors: response.errors });
           }
         });
       },
-      handleValueChange: function(e) {
+      handleValueChange: function (e) {
         if (this.props.onChange) {
           return this.props.onChange(e);
         } else {
-          var item = this.state.item,
-            field = e.target.name;
+          const item = this.state.item;
+          const field = e.target.name;
 
           item[field] = e.target.value;
 
           this.setState({
-            item: item
+            item: item,
           });
           return true;
         }
       },
-      render: function() {
-        if(this.getErrors() !== undefined) {
-          var errors = this.getErrors().map(function(error, index) {
+      render: function () {
+        let errors;
+        if (this.getErrors() !== undefined) {
+          errors = this.getErrors().map((error, index) => {
             return (
-              <p key={ 'error-'+index } className="mailpoet_error">
+              <p key={'error-' + index} className="mailpoet_error">
                 { error.message }
               </p>
             );
           });
         }
 
-        var formClasses = classNames(
+        const formClasses = classNames(
           'mailpoet_form',
-          { 'mailpoet_form_loading': this.state.loading || this.props.loading }
+          { mailpoet_form_loading: this.state.loading || this.props.loading }
         );
 
-        var beforeFormContent = false;
-        var afterFormContent = false;
+        let beforeFormContent = false;
+        let afterFormContent = false;
 
         if (this.props.beforeFormContent !== undefined) {
           beforeFormContent = this.props.beforeFormContent(this.getValues());
@@ -177,18 +182,27 @@ define(
           afterFormContent = this.props.afterFormContent(this.getValues());
         }
 
-        var fields = this.props.fields.map(function(field, i) {
+        const fields = this.props.fields.map((field, i) => {
+          // Compose an onChange handler from the default and custom one
+          let onValueChange = this.handleValueChange;
+          if (field.onBeforeChange) {
+            onValueChange = (e) => {
+              field.onBeforeChange(e);
+              return this.handleValueChange(e);
+            };
+          }
+
           return (
             <FormField
-              field={ field }
-              item={ this.getValues() }
-              onValueChange={ this.handleValueChange }
-              key={ 'field-'+i } />
+              field={field}
+              item={this.getValues()}
+              onValueChange={onValueChange}
+              key={'field-' + i} />
           );
-        }.bind(this));
+        });
 
-        var actions = false;
-        if(this.props.children) {
+        let actions = false;
+        if (this.props.children) {
           actions = this.props.children;
         } else {
           actions = (
@@ -204,9 +218,9 @@ define(
           <div>
             { beforeFormContent }
             <form
-              id={ this.props.id }
+              id={this.props.id}
               ref="form"
-              className={ formClasses }
+              className={formClasses}
               onSubmit={
                 (this.props.onSubmit !== undefined)
                 ? this.props.onSubmit
@@ -226,7 +240,7 @@ define(
             { afterFormContent }
           </div>
         );
-      }
+      },
     });
 
     return Form;

assets/js/src/forms/forms.jsx

@@ -1,26 +1,26 @@
-import React from 'react'
-import ReactDOM from 'react-dom'
-import { Router, Route, IndexRoute, Link, useRouterHistory } from 'react-router'
-import { createHashHistory } from 'history'
-import FormList from 'forms/list.jsx'
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Router, Route, IndexRoute, useRouterHistory } from 'react-router';
+import { createHashHistory } from 'history';
+import FormList from './list.jsx';
 
 const history = useRouterHistory(createHashHistory)({ queryKey: false });
 
 const App = React.createClass({
   render() {
-    return this.props.children
-  }
+    return this.props.children;
+  },
 });
 
 const container = document.getElementById('forms_container');
 
-if(container) {
+if (container) {
   ReactDOM.render((
-    <Router history={ history }>
-      <Route path="/" component={ App }>
-        <IndexRoute component={ FormList } />
-        <Route path="*" component={ FormList } />
+    <Router history={history}>
+      <Route path="/" component={App}>
+        <IndexRoute component={FormList} />
+        <Route path="*" component={FormList} />
       </Route>
     </Router>
   ), container);
-}
+}

assets/js/src/forms/list.jsx

@@ -1,29 +1,28 @@
-import React from 'react'
-import ReactDOM from 'react-dom'
-import { Router, Link } from 'react-router'
-import Listing from 'listing/listing.jsx'
-import classNames from 'classnames'
-import MailPoet from 'mailpoet'
+import React from 'react';
+import classNames from 'classnames';
+import MailPoet from 'mailpoet';
+import jQuery from 'jquery';
+import Listing from '../listing/listing.jsx';
 
 const columns = [
   {
     name: 'name',
     label: MailPoet.I18n.t('formName'),
-    sortable: true
+    sortable: true,
   },
   {
     name: 'segments',
-    label: MailPoet.I18n.t('segments')
+    label: MailPoet.I18n.t('segments'),
   },
   {
     name: 'signups',
-    label: MailPoet.I18n.t('signups')
+    label: MailPoet.I18n.t('signups'),
   },
   {
     name: 'created_at',
     label: MailPoet.I18n.t('createdOn'),
-    sortable: true
-  }
+    sortable: true,
+  },
 ];
 
 const messages = {
@@ -71,37 +70,38 @@ const messages = {
       ).replace('%$1d', count.toLocaleString());
     }
     MailPoet.Notice.success(message);
-  }
+  },
 };
 
 const bulk_actions = [
   {
     name: 'trash',
-    label: MailPoet.I18n.t('trash'),
-    onSuccess: messages.onTrash
-  }
+    label: MailPoet.I18n.t('moveToTrash'),
+    onSuccess: messages.onTrash,
+  },
 ];
 
 const item_actions = [
   {
     name: 'edit',
     label: MailPoet.I18n.t('edit'),
-    link: function(item) {
+    link: function (item) {
       return (
-        <a href={ `admin.php?page=mailpoet-form-editor&id=${item.id}` }>{MailPoet.I18n.t('edit')}</a>
+        <a href={`admin.php?page=mailpoet-form-editor&id=${item.id}`}>{MailPoet.I18n.t('edit')}</a>
       );
-    }
+    },
   },
   {
     name: 'duplicate',
     label: MailPoet.I18n.t('duplicate'),
-    onClick: function(item, refresh) {
+    onClick: function (item, refresh) {
       return MailPoet.Ajax.post({
+        api_version: window.mailpoet_api_version,
         endpoint: 'forms',
         action: 'duplicate',
         data: {
-          id: item.id
-        }
+          id: item.id,
+        },
       }).done((response) => {
         MailPoet.Notice.success(
           (MailPoet.I18n.t('formDuplicated')).replace('%$1s', response.data.name)
@@ -110,44 +110,45 @@ const item_actions = [
       }).fail((response) => {
         if (response.errors.length > 0) {
           MailPoet.Notice.error(
-            response.errors.map(function(error) { return error.message; }),
+            response.errors.map((error) => { return error.message; }),
             { scroll: true }
           );
         }
       });
-    }
+    },
   },
   {
-    name: 'trash'
-  }
+    name: 'trash',
+  },
 ];
 
 const FormList = React.createClass({
   createForm() {
     MailPoet.Ajax.post({
+      api_version: window.mailpoet_api_version,
       endpoint: 'forms',
-      action: 'create'
+      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(
-          response.errors.map(function(error) { return error.message; }),
+          response.errors.map((error) => { return error.message; }),
           { scroll: true }
         );
       }
     });
   },
   renderItem(form, actions) {
-    let row_classes = classNames(
+    const row_classes = classNames(
       'manage-column',
       'column-primary',
       'has-row-actions'
     );
 
-    let segments = mailpoet_segments.filter(function(segment) {
+    let segments = window.mailpoet_segments.filter((segment) => {
       return (jQuery.inArray(segment.id, form.segments) !== -1);
-    }).map(function(segment) {
+    }).map((segment) => {
       return segment.name;
     }).join(', ');
 
@@ -157,11 +158,11 @@ const FormList = React.createClass({
 
     return (
       <div>
-        <td className={ row_classes }>
+        <td className={row_classes}>
           <strong>
             <a
               className="row-title"
-              href={ `admin.php?page=mailpoet-form-editor&id=${form.id}` }
+              href={`admin.php?page=mailpoet-form-editor&id=${form.id}`}
             >{ form.name }</a>
           </strong>
           { actions }
@@ -185,25 +186,25 @@ const FormList = React.createClass({
           {MailPoet.I18n.t('pageTitle')} <a
             className="page-title-action"
             href="javascript:;"
-            onClick={ this.createForm }
+            onClick={this.createForm}
           >{MailPoet.I18n.t('new')}</a>
         </h1>
 
         <Listing
-          limit={ mailpoet_listing_per_page }
-          location={ this.props.location }
-          params={ this.props.params }
-          messages={ messages }
-          search={ false }
+          limit={window.mailpoet_listing_per_page}
+          location={this.props.location}
+          params={this.props.params}
+          messages={messages}
+          search={false}
           endpoint="forms"
-          onRenderItem={ this.renderItem }
-          columns={ columns }
-          bulk_actions={ bulk_actions }
-          item_actions={ item_actions }
+          onRenderItem={this.renderItem}
+          columns={columns}
+          bulk_actions={bulk_actions}
+          item_actions={item_actions}
         />
       </div>
     );
-  }
+  },
 });
 
 module.exports = FormList;

assets/js/src/handlebars_helpers.js

@@ -1,117 +1,117 @@
-define('handlebars_helpers', ['handlebars'], function(Handlebars) {
+define('handlebars_helpers', ['handlebars'], function (Handlebars) {
   // Handlebars helpers
-  Handlebars.registerHelper('concat', function() {
-      var size = (arguments.length - 1),
-          output = '';
-      for(var i = 0; i < size; i++) {
-          output += arguments[i];
-      };
-      return output;
+  Handlebars.registerHelper('concat', function () {
+    var size = (arguments.length - 1),
+      output = '';
+    for (var i = 0; i < size; i++) {
+      output += arguments[i];
+    }
+    return output;
   });
 
-  Handlebars.registerHelper('number_format', function(value, block) {
-      return Number(value).toLocaleString();
+  Handlebars.registerHelper('number_format', function (value, block) {
+    return Number(value).toLocaleString();
   });
-  Handlebars.registerHelper('date_format', function(timestamp, block) {
-    if(window.moment) {
-          if(timestamp === undefined || isNaN(timestamp) || timestamp <= 0) {
-              return;
-          }
+  Handlebars.registerHelper('date_format', function (timestamp, block) {
+    if (window.moment) {
+      if (timestamp === undefined || isNaN(timestamp) || timestamp <= 0) {
+        return;
+      }
 
           // set date format
-          var f = block.hash.format || "MMM Do, YYYY";
+      var f = block.hash.format || 'MMM Do, YYYY';
           // check if we passed a timestamp
-          if(parseInt(timestamp, 10) == timestamp) {
-              return moment.unix(timestamp).format(f);
-          } else {
-              return moment.utc(timestamp).format(f);
-          }
+      if (parseInt(timestamp, 10) == timestamp) {
+        return window.moment.unix(timestamp).format(f);
+      } else {
+        return window.moment.utc(timestamp).format(f);
+      }
     } else {
       return timestamp;
-    };
+    }
   });
 
-  Handlebars.registerHelper('cycle', function(value, block) {
+  Handlebars.registerHelper('cycle', function (value, block) {
     var values = value.split(' ');
     return values[block.data.index % (values.length + 1)];
   });
 
   Handlebars.registerHelper('ifCond', function (v1, operator, v2, options) {
-      switch (operator) {
-          case '==':
-              return (v1 == v2) ? options.fn(this) : options.inverse(this);
-          case '===':
-              return (v1 === v2) ? options.fn(this) : options.inverse(this);
-          case '!=':
-              return (v1 != v2) ? options.fn(this) : options.inverse(this);
-          case '!==':
-              return (v1 !== v2) ? options.fn(this) : options.inverse(this);
-          case '<':
-              return (v1 < v2) ? options.fn(this) : options.inverse(this);
-          case '<=':
-              return (v1 <= v2) ? options.fn(this) : options.inverse(this);
-          case '>':
-              return (v1 > v2) ? options.fn(this) : options.inverse(this);
-          case '>=':
-              return (v1 >= v2) ? options.fn(this) : options.inverse(this);
-          case '&&':
-              return (v1 && v2) ? options.fn(this) : options.inverse(this);
-          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);
-      }
+    switch (operator) {
+      case '==':
+        return (v1 == v2) ? options.fn(this) : options.inverse(this);
+      case '===':
+        return (v1 === v2) ? options.fn(this) : options.inverse(this);
+      case '!=':
+        return (v1 != v2) ? options.fn(this) : options.inverse(this);
+      case '!==':
+        return (v1 !== v2) ? options.fn(this) : options.inverse(this);
+      case '<':
+        return (v1 < v2) ? options.fn(this) : options.inverse(this);
+      case '<=':
+        return (v1 <= v2) ? options.fn(this) : options.inverse(this);
+      case '>':
+        return (v1 > v2) ? options.fn(this) : options.inverse(this);
+      case '>=':
+        return (v1 >= v2) ? options.fn(this) : options.inverse(this);
+      case '&&':
+        return (v1 && v2) ? options.fn(this) : options.inverse(this);
+      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) {
-      return value.gsub("\n", "<br />");
+  Handlebars.registerHelper('nl2br', function (value, block) {
+    return value.gsub('\n', '<br />');
   });
 
-  Handlebars.registerHelper('json_encode', function(value, block) {
-      return JSON.stringify(value);
+  Handlebars.registerHelper('json_encode', function (value, block) {
+    return JSON.stringify(value);
   });
 
-  Handlebars.registerHelper('json_decode', function(value, block) {
-      return JSON.parse(value);
+  Handlebars.registerHelper('json_decode', function (value, block) {
+    return JSON.parse(value);
   });
-  Handlebars.registerHelper('url', function(value, block) {
-      var url = window.location.protocol + "//" + window.location.host + window.location.pathname;
+  Handlebars.registerHelper('url', function (value, block) {
+    var url = window.location.protocol + '//' + window.location.host + window.location.pathname;
 
-      return url + value;
+    return url + value;
   });
-  Handlebars.registerHelper('emailFromMailto', function(value) {
-      var mailtoMatchingRegex = /^mailto\:/i;
-      if (typeof value === 'string' && value.match(mailtoMatchingRegex)) {
-          return value.replace(mailtoMatchingRegex, '');
-      } else {
-          return value;
-      }
+  Handlebars.registerHelper('emailFromMailto', function (value) {
+    var mailtoMatchingRegex = /^mailto\:/i;
+    if (typeof value === 'string' && value.match(mailtoMatchingRegex)) {
+      return value.replace(mailtoMatchingRegex, '');
+    } else {
+      return value;
+    }
   });
-  Handlebars.registerHelper('lookup', function(obj, field, options) {
-      return obj && obj[field];
+  Handlebars.registerHelper('lookup', function (obj, field, options) {
+    return obj && obj[field];
   });
 
 
-  Handlebars.registerHelper('rsa_key', function(value, block) {
+  Handlebars.registerHelper('rsa_key', function (value, block) {
       // extract all lines into an array
-      if(value === undefined) return '';
+    if (value === undefined) return '';
 
-      var lines = value.trim().split("\n");
+    var lines = value.trim().split('\n');
 
       // remove header & footer
-      lines.shift();
-      lines.pop();
+    lines.shift();
+    lines.pop();
 
       // return concatenated lines
-      return lines.join('');
+    return lines.join('');
   });
 
-  Handlebars.registerHelper('trim', function(value, block) {
-      if(value === null || value === undefined) return '';
-      return value.trim();
+  Handlebars.registerHelper('trim', function (value, block) {
+    if (value === null || value === undefined) return '';
+    return value.trim();
   });
 
   /**
@@ -125,32 +125,33 @@ define('handlebars_helpers', ['handlebars'], function(Handlebars) {
    * @return {String}          The truncated string.
    */
   Handlebars.registerHelper('ellipsis', function (str, limit, append) {
-      if (append === undefined) {
-          append = '';
-      }
-      var sanitized = str.replace(/(<([^>]+)>)/g, '');
-      if (sanitized.length > limit) {
-          return sanitized.substr(0, limit - append.length) + append;
-      } else {
-          return sanitized;
-      }
+    var strAppend = append;
+    if (strAppend === undefined) {
+      strAppend = '';
+    }
+    var sanitized = str.replace(/(<([^>]+)>)/g, '');
+    if (sanitized.length > limit) {
+      return sanitized.substr(0, limit - strAppend.length) + strAppend;
+    } else {
+      return sanitized;
+    }
   });
 
   Handlebars.registerHelper('getNumber', function (string) {
-      return parseInt(string, 10);
+    return parseInt(string, 10);
   });
 
-  Handlebars.registerHelper('fontWithFallback', function(font) {
-    switch(font) {
+  Handlebars.registerHelper('fontWithFallback', function (font) {
+    switch (font) {
       case 'Arial': return new Handlebars.SafeString("Arial, 'Helvetica Neue', Helvetica, sans-serif");
       case 'Comic Sans MS': return new Handlebars.SafeString("'Comic Sans MS', 'Marker Felt-Thin', Arial, sans-serif");
       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

@@ -0,0 +1,22 @@
+define('helpTooltip', ['mailpoet', 'react', 'react-dom', 'help-tooltip.jsx'],
+  function (mp, React, ReactDOM, TooltipComponent) {
+    'use strict';
+
+    var MailPoet = mp;
+
+    MailPoet.helpTooltip = {
+      show: function (domContainerNode, opts) {
+
+        ReactDOM.render(React.createElement(
+          TooltipComponent, {
+            tooltip: opts.tooltip,
+            tooltipId: opts.tooltipId,
+            place: opts.place
+          }
+        ), domContainerNode);
+      }
+    };
+
+  }
+);
+

assets/js/src/help-tooltip.jsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import ReactTooltip from 'react-tooltip';
+import ReactHtmlParser from 'react-html-parser';
+
+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') {
+    tooltipId = props.tooltip;
+  }
+
+  if (typeof props.tooltip === 'string') {
+    tooltip = (<span
+      style={{
+        pointerEvents: 'all',
+        maxWidth: '400',
+        display: 'inline-block',
+      }}
+    >
+      {ReactHtmlParser(props.tooltip)}
+    </span>);
+  }
+
+  return (
+    <span className={props.className}>
+      <span
+        style={{
+          cursor: 'pointer',
+        }}
+        className="tooltip dashicons dashicons-editor-help"
+        data-event="click"
+        data-tip
+        data-for={tooltipId}
+      >
+      </span>
+      <ReactTooltip
+        globalEventOff="click"
+        multiline={true}
+        id={tooltipId}
+        efect="solid"
+        place={props.place}
+        >
+        {tooltip}
+      </ReactTooltip>
+    </span>
+  );
+}
+
+Tooltip.propTypes = {
+  tooltipId: React.PropTypes.string,
+  tooltip: React.PropTypes.node.isRequired,
+  place: React.PropTypes.string,
+  className: React.PropTypes.string,
+};
+
+Tooltip.defaultProps = {
+  tooltipId: undefined,
+  place: undefined,
+  className: undefined,
+};
+
+module.exports = Tooltip;

assets/js/src/help/help.jsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Router, Route, IndexRedirect, useRouterHistory } from 'react-router';
+import { createHashHistory } from 'history';
+
+import KnowledgeBase from 'help/knowledge_base.jsx';
+import SystemInfo from 'help/system_info.jsx';
+
+const history = useRouterHistory(createHashHistory)({ queryKey: false });
+
+const App = React.createClass({
+  render() {
+    return this.props.children;
+  },
+});
+
+const container = document.getElementById('help_container');
+
+if (container) {
+
+  ReactDOM.render((
+    <Router history={history}>
+      <Route path="/" component={App}>
+        <IndexRedirect to="knowledgeBase" />
+        {/* Pages */}
+        <Route path="knowledgeBase(/)**" params={{ tab: 'knowledgeBase' }} component={KnowledgeBase} />
+        <Route path="systemInfo(/)**" params={{ tab: 'systemInfo' }} component={SystemInfo} />
+      </Route>
+    </Router>
+  ), container);
+
+}

assets/js/src/help/knowledge_base.jsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import MailPoet from 'mailpoet';
+
+import Tabs from './tabs.jsx';
+
+function KnowledgeBase() {
+
+  return (
+    <div>
+
+      <Tabs tab="knowledgeBase" />
+
+      <p>{MailPoet.I18n.t('knowledgeBaseIntro')}</p>
+      <ul>
+        <li><a target="_blank" href="http://beta.docs.mailpoet.com/category/116-common-problems">Common Problems</a></li>
+        <li><a target="_blank" href="http://beta.docs.mailpoet.com/category/165-newsletters">Newsletters</a></li>
+        <li><a target="_blank" href="http://beta.docs.mailpoet.com/category/156-migration-questions">Migration Questions</a></li>
+        <li><a target="_blank" href="http://beta.docs.mailpoet.com/category/149-sending-methods">Sending Methods</a></li>
+        <li><a target="_blank" href="http://beta.docs.mailpoet.com/category/139-subscription-forms">Subscription Forms</a></li>
+        <li><a target="_blank" href="http://beta.docs.mailpoet.com/category/114-getting-started">Getting Started</a></li>
+        <li><a target="_blank" href="http://beta.docs.mailpoet.com/category/123-newsletter-designer">Newsletter Designer</a></li>
+        <li><a target="_blank" href="http://beta.docs.mailpoet.com/category/121-subscribers-and-lists">Subscribers and Lists</a></li>
+      </ul>
+      <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

@@ -0,0 +1,47 @@
+import React from 'react';
+import MailPoet from 'mailpoet';
+import _ from 'underscore';
+
+import Tabs from './tabs.jsx';
+
+function handleFocus(event) {
+  event.target.select();
+}
+
+function printData(data) {
+  if (_.isObject(data)) {
+    const printableData = Object.keys(data).map((key) => {
+      return `${key}: ${data[key]}`;
+    });
+
+    return (<textarea
+      readOnly={true}
+      onFocus={handleFocus}
+      value={printableData.join('\n')}
+      style={{
+        width: '100%',
+        height: '400px',
+      }}
+    />);
+  } else {
+    return (<p>{MailPoet.I18n.t('systemInfoDataError')}</p>);
+  }
+}
+
+function KnowledgeBase() {
+  const data = window.help_scout_data;
+  return (
+    <div>
+
+      <Tabs tab="systemInfo" />
+
+      <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

@@ -0,0 +1,46 @@
+import React from 'react';
+import { Link } from 'react-router';
+import classNames from 'classnames';
+import MailPoet from 'mailpoet';
+
+const tabs = [
+  {
+    name: 'knowledgeBase',
+    label: MailPoet.I18n.t('tabKnowledgeBaseTitle'),
+    link: '/knowledgeBase',
+  },
+  {
+    name: 'systemInfo',
+    label: MailPoet.I18n.t('tabSystemInfoTitle'),
+    link: '/systemInfo',
+  },
+];
+
+function Tabs(props) {
+
+  const tabLinks = tabs.map((tab, index) => {
+    const tabClasses = classNames(
+      'nav-tab',
+      { 'nav-tab-active': (props.tab === tab.name) }
+    );
+
+    return (
+      <Link
+        key={'tab-' + index}
+        className={tabClasses}
+        to={tab.link}
+      >{ tab.label }</Link>
+    );
+  });
+
+  return (
+    <h2 className="nav-tab-wrapper">
+      { tabLinks }
+    </h2>
+  );
+}
+
+Tabs.propTypes = { tab: React.PropTypes.string };
+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

@@ -1,23 +1,25 @@
 define('i18n',
   [
     'mailpoet'
-  ], function(
-    MailPoet
+  ], function (
+    mp
 ) {
-  'use strict';
+    'use strict';
 
-  var translations = {};
+    var MailPoet = mp;
 
-  MailPoet.I18n = {
-    add: function(key, value) {
-      translations[key] = value;
-    },
-    t: function(key) {
-      return translations[key] || 'TRANSLATION "%$1s" NOT FOUND'.replace("%$1s", key);
-    },
-    all: function() {
-      return translations;
-    }
-  };
+    var translations = {};
 
-});
+    MailPoet.I18n = {
+      add: function (key, value) {
+        translations[key] = value;
+      },
+      t: function (key) {
+        return translations[key] || 'TRANSLATION "%$1s" NOT FOUND'.replace('%$1s', key);
+      },
+      all: function () {
+        return translations;
+      }
+    };
+
+  });

assets/js/src/iframe.js

@@ -1,21 +1,24 @@
-define('iframe', ['mailpoet', 'jquery'], function(MailPoet, jQuery) {
+define('iframe', ['mailpoet'], function (mp) {
   'use strict';
+
+  var MailPoet = mp;
   MailPoet.Iframe = {
     marginY: 20,
-    autoSize: function(iframe) {
-      if(!iframe) return;
+    autoSize: function (iframe) {
+      if (!iframe) return;
 
       this.setSize(
         iframe,
         iframe.contentWindow.document.body.scrollHeight
       );
     },
-    setSize: function(iframe, i) {
-      if(!iframe) return;
+    setSize: function (sizeIframe, i) {
+      var iframe = sizeIframe;
+      if (!iframe) return;
 
       iframe.style.height = (
-        parseInt(i) + this.marginY
-      ) + "px";
+        parseInt(i, 10) + this.marginY
+      ) + 'px';
     }
   };
 

assets/js/src/jquery.serialize_object.js

@@ -2,9 +2,10 @@ define(
   [
     'jquery'
   ],
-  function(
-    $
+  function (
+    jQuery
   ) {
+    var $ = jQuery;
     // Combination of jQuery.deparam and jQuery.serializeObject by Ben Alman.
     /*!
      * jQuery BBQ: Back Button & Query Library - v1.2.1 - 2/17/2010
@@ -22,12 +23,12 @@ define(
      * Dual licensed under the MIT and GPL licenses.
      * http://benalman.com/about/license/
      */
-    $.fn.serializeObject = function(coerce) {
+    $.fn.serializeObject = function (coerce) {
       var obj = {},
-        coerce_types = { 'true': !0, 'false': !1, 'null': null };
+        coerce_types = { true: !0, false: !1, null: null };
 
       // Iterate over all name=value pairs.
-      $.each( this.serializeArray(), function(j,v){
+      $.each(this.serializeArray(), function (j, v) {
         var key = v.name,
           val = v.value,
           cur = obj,
@@ -35,18 +36,18 @@ define(
 
           // If key is more complex than 'foo', like 'a[]' or 'a[b][c]', split it
           // into its component parts.
-          keys = key.split( '][' ),
+          keys = key.split(']['),
           keys_last = keys.length - 1;
 
         // If the first keys part contains [ and the last ends with ], then []
         // are correctly balanced.
-        if ( /\[/.test( keys[0] ) && /\]$/.test( keys[ keys_last ] ) ) {
+        if (/\[/.test(keys[0]) && /\]$/.test(keys[keys_last])) {
           // Remove the trailing ] from the last keys part.
-          keys[ keys_last ] = keys[ keys_last ].replace( /\]$/, '' );
+          keys[keys_last] = keys[keys_last].replace(/\]$/, '');
 
           // Split first keys part into two parts on the [ and add them back onto
           // the beginning of the keys array.
-          keys = keys.shift().split('[').concat( keys );
+          keys = keys.shift().split('[').concat(keys);
 
           keys_last = keys.length - 1;
         } else {
@@ -55,14 +56,14 @@ define(
         }
 
         // Coerce values.
-        if ( coerce ) {
-          val = val && !isNaN(val)            ? +val              // number
-            : val === 'undefined'             ? undefined         // undefined
+        if (coerce) {
+          val = val && !isNaN(val) ? +val              // number
+            : val === 'undefined' ? undefined         // undefined
             : coerce_types[val] !== undefined ? coerce_types[val] // true, false, null
             : val;                                                // string
         }
 
-        if ( keys_last ) {
+        if (keys_last) {
           // Complex key, build deep object structure based on a few rules:
           // * The 'cur' pointer starts at the object top-level.
           // * [] = array push (n is set to array length), [n] = array if n is
@@ -72,25 +73,26 @@ define(
           //   object or array based on the type of the next keys part.
           // * Move the 'cur' pointer to the next level.
           // * Rinse & repeat.
-          for ( ; i <= keys_last; i++ ) {
+          for (; i <= keys_last; i++) {
             key = keys[i] === '' ? cur.length : keys[i];
-            cur = cur[key] = i < keys_last
-              ? cur[key] || ( keys[i+1] && isNaN( keys[i+1] ) ? {} : [] )
+            cur[key] = i < keys_last
+              ? cur[key] || (keys[i + 1] && isNaN(keys[i + 1]) ? {} : [])
               : val;
+            cur = cur[key];
           }
 
         } else {
           // Simple key, even simpler rules, since only scalars and shallow
           // arrays are allowed.
 
-          if ( $.isArray( obj[key] ) ) {
+          if ($.isArray(obj[key])) {
             // val is already an array, so push on the next value.
-            obj[key].push( val );
+            obj[key].push(val);
 
-          } else if ( obj[key] !== undefined ) {
+          } else if (obj[key] !== undefined) {
             // val isn't an array, but since a second value has been specified,
             // convert val into an array.
-            obj[key] = [ obj[key], val ];
+            obj[key] = [obj[key], val];
 
           } else {
             // val is a scalar.

assets/js/src/listing/bulk_actions.jsx

@@ -1,84 +1,84 @@
 define([
   'react',
-  'mailpoet'
+  'mailpoet',
 ],
-function(
+(
   React,
   MailPoet
-) {
-  var ListingBulkActions = React.createClass({
-    getInitialState: function() {
+) => {
+  const ListingBulkActions = React.createClass({
+    getInitialState: function () {
       return {
         action: false,
-        extra: false
-      }
+        extra: false,
+      };
     },
-    handleChangeAction: function(e) {
+    handleChangeAction: function (e) {
       this.setState({
         action: e.target.value,
-        extra: false
-      }, function() {
-        var action = this.getSelectedAction();
+        extra: false,
+      }, () => {
+        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)
+            extra: action.onSelect(e),
           });
         }
-      }.bind(this));
+      });
     },
-    handleApplyAction: function(e) {
+    handleApplyAction: function (e) {
       e.preventDefault();
 
-      var action = this.getSelectedAction();
+      const action = this.getSelectedAction();
 
-      if(action === null) {
+      if (action === null) {
         return;
       }
 
-      var selected_ids = (this.props.selection !== 'all')
+      const selected_ids = (this.props.selection !== 'all')
         ? this.props.selected_ids
         : [];
 
-      var data = (action['getData'] !== undefined)
+      const data = (action['getData'] !== undefined)
         ? action.getData()
         : {};
 
       data.action = this.state.action;
 
-      var onSuccess = function() {};
-      if(action['onSuccess'] !== undefined) {
+      let onSuccess = function () {};
+      if (action['onSuccess'] !== undefined) {
         onSuccess = action.onSuccess;
       }
 
-      if(data.action) {
+      if (data.action) {
         const promise = this.props.onBulkAction(selected_ids, data);
         if (promise !== false) {
           promise.then(onSuccess);
-        };
+        }
       }
 
       this.setState({
         action: false,
-        extra: false
+        extra: false,
       });
     },
-    getSelectedAction: function() {
-      var selected_action = this.refs.action.value;
-      if(selected_action.length > 0) {
-        var action = this.props.bulk_actions.filter(function(action) {
+    getSelectedAction: function () {
+      const selected_action = this.refs.action.value;
+      if (selected_action.length > 0) {
+        const action = this.props.bulk_actions.filter((action) => {
           return (action.name === selected_action);
         });
 
-        if(action.length > 0) {
+        if (action.length > 0) {
           return action[0];
         }
       }
       return null;
     },
-    render: function() {
-      if(this.props.bulk_actions.length === 0) {
+    render: function () {
+      if (this.props.bulk_actions.length === 0) {
         return null;
       }
 
@@ -93,29 +93,29 @@ function(
           <select
             name="bulk_actions"
             ref="action"
-            value={ this.state.action }
+            value={this.state.action}
             onChange={this.handleChangeAction}
           >
             <option value="">{MailPoet.I18n.t('bulkActions')}</option>
-            { this.props.bulk_actions.map(function(action, index) {
+            { this.props.bulk_actions.map((action, index) => {
               return (
                 <option
-                  value={ action.name }
-                  key={ 'action-' + index }
+                  value={action.name}
+                  key={'action-' + index}
                 >{ action.label }</option>
               );
-            }.bind(this)) }
+            }) }
           </select>
           <input
-            onClick={ this.handleApplyAction }
+            onClick={this.handleApplyAction}
             type="submit"
             defaultValue={MailPoet.I18n.t('apply')}
             className="button action" />
 
-            { this.state.extra }
+          { this.state.extra }
         </div>
       );
-    }
+    },
   });
 
   return ListingBulkActions;

assets/js/src/listing/filters.jsx

@@ -1,27 +1,30 @@
 define([
   'react',
   'jquery',
-  'mailpoet'
+  'mailpoet',
 ],
-function(
+(
   React,
   jQuery,
   MailPoet
-) {
-  var ListingFilters = React.createClass({
-    handleFilterAction: function() {
-      let filters = {};
+) => {
+  const ListingFilters = React.createClass({
+    handleFilterAction: function () {
+      const filters = {};
       this.getAvailableFilters().map((filter, i) => {
-        filters[this.refs['filter-'+i].name] = this.refs['filter-'+i].value
+        filters[this.refs['filter-' + i].name] = this.refs['filter-' + i].value;
       });
+      if (this.props.onBeforeSelectFilter) {
+        this.props.onBeforeSelectFilter(filters);
+      }
       return this.props.onSelectFilter(filters);
     },
-    handleEmptyTrash: function() {
+    handleEmptyTrash: function () {
       return this.props.onEmptyTrash();
     },
-    getAvailableFilters: function() {
-      let filters = this.props.filters;
-      return Object.keys(filters).filter(function(filter) {
+    getAvailableFilters: function () {
+      const filters = this.props.filters;
+      return Object.keys(filters).filter((filter) => {
         return !(
           filters[filter].length === 0
           || (
@@ -31,39 +34,39 @@ function(
         );
       });
     },
-    componentDidUpdate: function() {
+    componentDidUpdate: function () {
       const selected_filters = this.props.filter;
-      const available_filters = this.getAvailableFilters().map(
-        function(filter, i) {
+      this.getAvailableFilters().map(
+        (filter, i) => {
           if (selected_filters[filter] !== undefined && selected_filters[filter]) {
-            jQuery(this.refs['filter-'+i])
+            jQuery(this.refs['filter-' + i])
               .val(selected_filters[filter])
               .trigger('change');
           }
-        }.bind(this)
-      );
+        }
+        );
     },
-    render: function() {
+    render: function () {
       const filters = this.props.filters;
       const available_filters = this.getAvailableFilters()
-        .map(function(filter, i) {
+        .map((filter, i) => {
           return (
             <select
-              ref={ `filter-${i}` }
-              key={ `filter-${i}` }
-              name={ filter }
+              ref={`filter-${i}`}
+              key={`filter-${i}`}
+              name={filter}
             >
-            { filters[filter].map(function(option, j) {
-              return (
-                <option
-                  value={ option.value }
-                  key={ 'filter-option-' + j }
+              { filters[filter].map((option, j) => {
+                return (
+                  <option
+                    value={option.value}
+                    key={'filter-option-' + j}
                 >{ option.label }</option>
-              );
-            }.bind(this)) }
+                );
+              }) }
             </select>
           );
-      }.bind(this));
+        });
 
       let button;
 
@@ -71,7 +74,7 @@ function(
         button = (
           <input
             id="post-query-submit"
-            onClick={ this.handleFilterAction }
+            onClick={this.handleFilterAction}
             type="submit"
             defaultValue={MailPoet.I18n.t('filter')}
             className="button" />
@@ -82,7 +85,7 @@ function(
       if (this.props.group === 'trash') {
         empty_trash = (
           <input
-            onClick={ this.handleEmptyTrash }
+            onClick={this.handleEmptyTrash}
             type="submit"
             value={MailPoet.I18n.t('emptyTrash')}
             className="button"
@@ -97,7 +100,7 @@ function(
           { empty_trash }
         </div>
       );
-    }
+    },
   });
 
   return ListingFilters;

assets/js/src/listing/groups.jsx

@@ -1,40 +1,40 @@
-define(['react', 'classnames'], function(React, classNames) {
+define(['react', 'classnames'], (React, classNames) => {
 
-    var ListingGroups = React.createClass({
-      handleSelect: function(group) {
-        return this.props.onSelectGroup(group);
-      },
-      render: function() {
-        var groups = this.props.groups.map(function(group, index) {
-          if(group.name === 'trash' && group.count === 0) {
-            return false;
-          }
+  const ListingGroups = React.createClass({
+    handleSelect: function (group) {
+      return this.props.onSelectGroup(group);
+    },
+    render: function () {
+      const groups = this.props.groups.map((group, index) => {
+        if (group.name === 'trash' && group.count === 0) {
+          return false;
+        }
 
-          var classes = classNames(
-            { 'current' : (group.name === this.props.group) }
+        const classes = classNames(
+            { current: (group.name === this.props.group) }
           );
 
-          return (
-            <li key={index}>
-              {(index > 0) ? ' |' : ''}
-              <a
-                href="javascript:;"
-                className={classes}
-                onClick={this.handleSelect.bind(this, group.name)} >
-                {group.label} <span className="count">({ group.count.toLocaleString() })</span>
-              </a>
-            </li>
-          );
-        }.bind(this));
-
         return (
-          <ul className="subsubsub">
-            { groups }
-          </ul>
+          <li key={index}>
+            {(index > 0) ? ' |' : ''}
+            <a
+              href="javascript:;"
+              className={classes}
+              onClick={this.handleSelect.bind(this, group.name)} >
+              {group.label} <span className="count">({ group.count.toLocaleString() })</span>
+            </a>
+          </li>
         );
-      }
-    });
+      });
 
-    return ListingGroups;
-  }
-);
+      return (
+        <ul className="subsubsub">
+          { groups }
+        </ul>
+      );
+    },
+  });
+
+  return ListingGroups;
+}
+);

assets/js/src/listing/header.jsx

@@ -1,31 +1,32 @@
-import MailPoet from 'mailpoet'
-import React from 'react'
-import classNames from 'classnames'
+import MailPoet from 'mailpoet';
+import React from 'react';
+import classNames from 'classnames';
 
 const ListingHeader = React.createClass({
-  handleSelectItems: function() {
+  handleSelectItems: function () {
     return this.props.onSelectItems(
       this.refs.toggle.checked
     );
   },
-  render: function() {
-    const columns = this.props.columns.map(function(column, index) {
-      column.is_primary = (index === 0);
-      column.sorted = (this.props.sort_by === column.name)
+  render: function () {
+    const columns = this.props.columns.map((column, index) => {
+      const renderColumn = column;
+      renderColumn.is_primary = (index === 0);
+      renderColumn.sorted = (this.props.sort_by === column.name)
         ? this.props.sort_order
         : 'desc';
       return (
         <ListingColumn
           onSort={this.props.onSort}
           sort_by={this.props.sort_by}
-          key={ 'column-' + index }
-          column={column} />
+          key={'column-' + index}
+          column={renderColumn} />
       );
-    }.bind(this));
+    });
 
     let checkbox;
 
-    if(this.props.is_selectable === true) {
+    if (this.props.is_selectable === true) {
       checkbox = (
         <th
           className="manage-column column-cb check-column">
@@ -36,8 +37,8 @@ const ListingHeader = React.createClass({
             type="checkbox"
             name="select_all"
             ref="toggle"
-            checked={ this.props.selection }
-            onChange={ this.handleSelectItems } />
+            checked={this.props.selection}
+            onChange={this.handleSelectItems} />
         </th>
       );
     }
@@ -48,28 +49,28 @@ const ListingHeader = React.createClass({
         {columns}
       </tr>
     );
-  }
+  },
 });
 
 const ListingColumn = React.createClass({
-  handleSort: function() {
+  handleSort: function () {
     const sort_by = this.props.column.name;
     const sort_order = (this.props.column.sorted === 'asc') ? 'desc' : 'asc';
     this.props.onSort(sort_by, sort_order);
   },
-  render: function() {
+  render: function () {
     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;
 
-    if(this.props.column.sortable === true) {
+    if (this.props.column.sortable === true) {
       label = (
-        <a onClick={ this.handleSort }>
+        <a onClick={this.handleSort}>
           <span>{ this.props.column.label }</span>
           <span className="sorting-indicator"></span>
         </a>
@@ -79,13 +80,13 @@ const ListingColumn = React.createClass({
     }
     return (
       <th
-        className={ classes }
-        id={this.props.column.name }
+        className={classes}
+        id={this.props.column.name}
         scope="col"
-        width={ this.props.column.width || null }
+        width={this.props.column.width || null}
       >{label}</th>
     );
-  }
+  },
 });
 
-module.exports = ListingHeader;
+module.exports = ListingHeader;

assets/js/src/listing/pages.jsx

@@ -1,84 +1,84 @@
 define([
-    'react',
-    'classnames',
-    'mailpoet'
-  ], function(
+  'react',
+  'classnames',
+  'mailpoet',
+], (
     React,
     classNames,
     MailPoet
-  ) {
+  ) => {
 
-  var ListingPages = React.createClass({
-    getInitialState: function() {
+  const ListingPages = React.createClass({
+    getInitialState: function () {
       return {
-        page: null
-      }
+        page: null,
+      };
     },
-    setPage: function(page) {
+    setPage: function (page) {
       this.setState({
-        page: null
-      }, function () {
+        page: null,
+      }, () => {
         this.props.onSetPage(this.constrainPage(page));
-      }.bind(this));
+      });
     },
-    setFirstPage: function() {
+    setFirstPage: function () {
       this.setPage(1);
     },
-    setLastPage: function() {
+    setLastPage: function () {
       this.setPage(this.getLastPage());
     },
-    setPreviousPage: function() {
+    setPreviousPage: function () {
       this.setPage(this.constrainPage(
         parseInt(this.props.page, 10) - 1)
       );
     },
-    setNextPage: function() {
+    setNextPage: function () {
       this.setPage(this.constrainPage(
         parseInt(this.props.page, 10) + 1)
       );
     },
-    constrainPage: function(page) {
+    constrainPage: function (page) {
       return Math.min(Math.max(1, Math.abs(~~page)), this.getLastPage());
     },
-    handleSetManualPage: function(e) {
-      if(e.which === 13) {
+    handleSetManualPage: function (e) {
+      if (e.which === 13) {
         this.setPage(this.state.page);
       }
     },
-    handleChangeManualPage: function(e) {
+    handleChangeManualPage: function (e) {
       this.setState({
-        page: e.target.value
+        page: e.target.value,
       });
     },
-    handleBlurManualPage: function(e) {
+    handleBlurManualPage: function (e) {
       this.setPage(e.target.value);
     },
-    getLastPage: function() {
+    getLastPage: function () {
       return Math.ceil(this.props.count / this.props.limit);
     },
-    render: function() {
-      if(this.props.count === 0) {
+    render: function () {
+      if (this.props.count === 0) {
         return false;
       } else {
-        var pagination = false;
-        var firstPage = (
+        let pagination = false;
+        let firstPage = (
           <span aria-hidden="true" className="tablenav-pages-navspan">«</span>
         );
-        var previousPage = (
+        let previousPage = (
           <span aria-hidden="true" className="tablenav-pages-navspan">‹</span>
         );
-        var nextPage = (
+        let nextPage = (
           <span aria-hidden="true" className="tablenav-pages-navspan">›</span>
         );
-        var lastPage = (
+        let lastPage = (
           <span aria-hidden="true" className="tablenav-pages-navspan">»</span>
         );
 
-        if(this.props.limit > 0 && this.props.count > this.props.limit) {
-          if(this.props.page > 1) {
+        if (this.props.limit > 0 && this.props.count > this.props.limit) {
+          if (this.props.page > 1) {
             previousPage = (
               <a href="javascript:;"
-                onClick={ this.setPreviousPage }
+                onClick={this.setPreviousPage}
                 className="prev-page">
                 <span className="screen-reader-text">{MailPoet.I18n.t('previousPage')}</span>
                 <span aria-hidden="true">‹</span>
@@ -86,10 +86,10 @@ define([
             );
           }
 
-          if(this.props.page > 2) {
+          if (this.props.page > 2) {
             firstPage = (
               <a href="javascript:;"
-                onClick={ this.setFirstPage }
+                onClick={this.setFirstPage}
                 className="first-page">
                 <span className="screen-reader-text">{MailPoet.I18n.t('firstPage')}</span>
                 <span aria-hidden="true">«</span>
@@ -97,10 +97,10 @@ define([
             );
           }
 
-          if(this.props.page < this.getLastPage()) {
+          if (this.props.page < this.getLastPage()) {
             nextPage = (
               <a href="javascript:;"
-                onClick={ this.setNextPage }
+                onClick={this.setNextPage}
                 className="next-page">
                 <span className="screen-reader-text">{MailPoet.I18n.t('nextPage')}</span>
                 <span aria-hidden="true">›</span>
@@ -108,10 +108,10 @@ define([
             );
           }
 
-          if(this.props.page < this.getLastPage() - 1) {
+          if (this.props.page < this.getLastPage() - 1) {
             lastPage = (
               <a href="javascript:;"
-                onClick={ this.setLastPage }
+                onClick={this.setLastPage}
                 className="last-page">
                 <span className="screen-reader-text">{MailPoet.I18n.t('lastPage')}</span>
                 <span aria-hidden="true">»</span>
@@ -119,8 +119,8 @@ define([
             );
           }
 
-          let pageValue =  this.props.page;
-          if(this.state.page !== null) {
+          let pageValue = this.props.page;
+          if (this.state.page !== null) {
             pageValue = this.state.page;
           }
 
@@ -136,13 +136,13 @@ define([
                   htmlFor="current-page-selector">{MailPoet.I18n.t('currentPage')}</label>
                 <input
                   type="text"
-                  onChange={ this.handleChangeManualPage }
-                  onKeyUp={ this.handleSetManualPage }
-                  onBlur={ this.handleBlurManualPage }
+                  onChange={this.handleChangeManualPage}
+                  onKeyUp={this.handleSetManualPage}
+                  onBlur={this.handleBlurManualPage}
                   aria-describedby="table-paging"
                   size="2"
                   ref="page"
-                  value={ pageValue }
+                  value={pageValue}
                   name="paged"
                   id="current-page-selector"
                   className="current-page" />
@@ -159,21 +159,26 @@ define([
           );
         }
 
-        var classes = classNames(
+        const classes = classNames(
           'tablenav-pages',
           { 'one-page': (this.props.count <= this.props.limit) }
         );
 
+        let numberOfItemsLabel;
+        if (this.props.count == 1) {
+          numberOfItemsLabel = MailPoet.I18n.t('numberOfItemsSingular');
+        } else {
+          numberOfItemsLabel = MailPoet.I18n.t('numberOfItemsMultiple')
+            .replace('%$1d', this.props.count.toLocaleString());
+        }
         return (
-          <div className={ classes }>
-            <span className="displaying-num">{
-              MailPoet.I18n.t('numberOfItems').replace('%$1d', this.props.count.toLocaleString())
-            }</span>
+          <div className={classes}>
+            <span className="displaying-num">{ numberOfItemsLabel }</span>
             { pagination }
           </div>
         );
       }
-    }
+    },
   });
 
   return ListingPages;

assets/js/src/listing/search.jsx

@@ -1,30 +1,30 @@
 define([
-    'mailpoet',
-    'react'
-  ], function(
+  'mailpoet',
+  'react',
+], (
     MailPoet,
     React
-  ) {
+  ) => {
 
-  var ListingSearch = React.createClass({
-    handleSearch: function(e) {
+  const ListingSearch = React.createClass({
+    handleSearch: function (e) {
       e.preventDefault();
       this.props.onSearch(
         this.refs.search.value
       );
     },
-    componentWillReceiveProps: function(nextProps) {
-      this.refs.search.value = nextProps.search
+    componentWillReceiveProps: function (nextProps) {
+      this.refs.search.value = nextProps.search;
     },
-    render: function() {
-      if(this.props.search === false) {
+    render: function () {
+      if (this.props.search === false) {
         return false;
       } else {
         return (
           <form name="search" onSubmit={this.handleSearch}>
             <p className="search-box">
               <label htmlFor="search_input" className="screen-reader-text">
-              {MailPoet.I18n.t('searchLabel')}
+                {MailPoet.I18n.t('searchLabel')}
               </label>
               <input
                 type="search"
@@ -40,7 +40,7 @@ define([
           </form>
         );
       }
-    }
+    },
   });
 
   return ListingSearch;

assets/js/src/mailpoet.js

@@ -1,4 +1,4 @@
-define('mailpoet', [], function() {
+define('mailpoet', [], function () {
   // A placeholder for MailPoet object
   var MailPoet = {};
 

assets/js/src/mp2migrator.js

@@ -0,0 +1,210 @@
+define('mp2migrator', ['mailpoet', 'jquery'], function (mp, jQuery) {
+  'use strict';
+
+  var MailPoet = mp;
+  MailPoet.MP2Migrator = {
+
+    fatal_error: '',
+    is_logging: false,
+
+    startLogger: function () {
+      MailPoet.MP2Migrator.is_logging = true;
+      clearTimeout(MailPoet.MP2Migrator.displayLogs_timeout);
+      clearTimeout(MailPoet.MP2Migrator.updateProgressbar_timeout);
+      clearTimeout(MailPoet.MP2Migrator.update_wordpress_info_timeout);
+      setTimeout(MailPoet.MP2Migrator.updateDisplay, 1000);
+    },
+
+    stopLogger: function () {
+      MailPoet.MP2Migrator.is_logging = false;
+    },
+
+    updateDisplay: function () {
+      MailPoet.MP2Migrator.displayLogs();
+      MailPoet.MP2Migrator.updateProgressbar();
+    },
+
+    displayLogs: function () {
+      jQuery.ajax({
+        url: window.mailpoet_mp2_migrator.log_file_url,
+        cache: false
+      }).done(function (result) {
+        jQuery('#logger').html('');
+        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
+          }
+          // Test if the import is complete
+          else if (row === MailPoet.I18n.t('import_complete')) {
+            jQuery('#import-actions').hide();
+            jQuery('#upgrade-completed').show();
+          }
+          jQuery('#logger').append(row + '<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);
+        }
+      });
+    },
+
+    updateProgressbar: function () {
+      jQuery.ajax({
+        url: window.mailpoet_mp2_migrator.progress_url,
+        cache: false,
+        dataType: 'json'
+      }).always(function (result) {
+        // Move the progress bar
+        var progress = 0;
+        if ((result.total !== undefined) && (Number(result.total) !== 0)) {
+          progress = Math.round(Number(result.current) / Number(result.total) * 100);
+        }
+        jQuery('#progressbar').progressbar('option', 'value', progress);
+        jQuery('#progresslabel').html(progress + '%');
+        if (Number(result.current) !== 0) {
+          jQuery('#skip-import').hide();
+          jQuery('#progressbar').show();
+          jQuery('#logger-container').show();
+        }
+        if (MailPoet.MP2Migrator.is_logging) {
+          MailPoet.MP2Migrator.updateProgressbar_timeout = setTimeout(MailPoet.MP2Migrator.updateProgressbar, 1000);
+        }
+      });
+    },
+
+    startImport: function () {
+      MailPoet.MP2Migrator.fatal_error = '';
+      // Start displaying the logs
+      MailPoet.MP2Migrator.startLogger();
+
+      // Disable the import button
+      MailPoet.MP2Migrator.import_button_label = jQuery('#import').val();
+      jQuery('#import').val(MailPoet.I18n.t('importing')).attr('disabled', 'disabled');
+      // Hide the Skip button
+      jQuery('#skip-import').hide();
+      // Show the stop button
+      jQuery('#stop-import').show();
+
+      // Run the import
+      MailPoet.Ajax.post({
+        api_version: window.mailpoet_api_version,
+        endpoint: 'MP2Migrator',
+        action: 'import',
+        data: {
+        }
+      }).always(function () {
+        MailPoet.MP2Migrator.stopLogger();
+        MailPoet.MP2Migrator.updateDisplay(); // Get the latest information after the import was stopped
+        MailPoet.MP2Migrator.reactivateImportButton();
+      }).done(function (response) {
+        if (response) {
+          MailPoet.MP2Migrator.fatal_error = response.data;
+        }
+      }).fail(function (response) {
+        if (response.errors.length > 0) {
+          MailPoet.Notice.error(
+            response.errors.map(function (error) {
+              return error.message;
+            }),
+            { scroll: true }
+          );
+        }
+      });
+      return false;
+    },
+
+    reactivateImportButton: function () {
+      jQuery('#import').val(MailPoet.MP2Migrator.import_button_label).removeAttr('disabled');
+      jQuery('#stop-import').hide();
+    },
+
+    stopImport: function () {
+      jQuery('#stop-import').attr('disabled', 'disabled');
+      // Stop the import
+      MailPoet.Ajax.post({
+        api_version: window.mailpoet_api_version,
+        endpoint: 'MP2Migrator',
+        action: 'stopImport',
+        data: {
+        }
+      }).always(function () {
+        jQuery('#stop-import').removeAttr('disabled'); // Enable the button
+        MailPoet.MP2Migrator.reactivateImportButton();
+        MailPoet.MP2Migrator.updateDisplay(); // Get the latest information after the import was stopped
+      }).fail(function (response) {
+        if (response.errors.length > 0) {
+          MailPoet.Notice.error(
+            response.errors.map(function (error) {
+              return error.message;
+            }),
+            { scroll: true }
+          );
+        }
+      });
+      MailPoet.MP2Migrator.stopLogger();
+      return false;
+    },
+
+    skipImport: function () {
+      MailPoet.Ajax.post({
+        api_version: window.mailpoet_api_version,
+        endpoint: 'MP2Migrator',
+        action: 'skipImport',
+        data: {
+        }
+      }).done(function () {
+        MailPoet.MP2Migrator.gotoWelcomePage();
+      }).fail(function (response) {
+        if (response.errors.length > 0) {
+          MailPoet.Notice.error(
+            response.errors.map(function (error) {
+              return error.message;
+            }),
+            { scroll: true }
+          );
+        }
+      });
+      return false;
+    },
+
+    gotoWelcomePage: function () {
+      window.location.href = 'admin.php?page=mailpoet-welcome';
+      return false;
+    }
+
+  };
+
+  /**
+   * Actions to run when the DOM is ready
+   */
+  jQuery(function () {
+    jQuery('#progressbar').progressbar({ value: 0 });
+
+    // Import button
+    jQuery('#import').click(function () {
+      MailPoet.MP2Migrator.startImport();
+    });
+
+    // Stop import button
+    jQuery('#stop-import').click(function () {
+      MailPoet.MP2Migrator.stopImport();
+    });
+
+    // Skip import link
+    jQuery('#skip-import').click(function () {
+      MailPoet.MP2Migrator.skipImport();
+    });
+
+    // Go to welcome page
+    jQuery('#goto-welcome').click(function () {
+      MailPoet.MP2Migrator.gotoWelcomePage();
+    });
+
+    // Update the display
+    MailPoet.MP2Migrator.updateDisplay();
+  });
+
+});

assets/js/src/newsletter_editor/App.js

@@ -1,35 +1,44 @@
 define([
-    'backbone',
-    'backbone.marionette',
-    'jquery',
-    'underscore',
-    'handlebars',
-    'handlebars_helpers'
-  ], function(Backbone, Marionette, jQuery, _, Handlebars) {
+  'backbone',
+  'backbone.marionette',
+  'backbone.radio',
+  'jquery',
+  'underscore',
+  'handlebars',
+  'handlebars_helpers'
+], function (Backbone, Marionette, BackboneRadio, jQuery, _, Handlebars) {
+  var Radio = BackboneRadio;
 
-  var app = new Marionette.Application(), AppView;
-
-  // Decoupled communication between application components
-  app.getChannel = function(channel) {
-    if (channel === undefined) return app.channel;
-    return Radio.channel(channel);
-  };
-
-  AppView = Marionette.LayoutView.extend({
+  var AppView = Marionette.View.extend({
     el: '#mailpoet_editor',
     regions: {
       stylesRegion: '#mailpoet_editor_styles',
       contentRegion: '#mailpoet_editor_content',
       sidebarRegion: '#mailpoet_editor_sidebar',
       bottomRegion: '#mailpoet_editor_bottom',
-      headingRegion: '#mailpoet_editor_heading',
+      headingRegion: '#mailpoet_editor_heading'
+    }
+  });
+
+  var EditorApplication = Marionette.Application.extend({
+    region: '#mailpoet_editor',
+
+    onStart: function () {
+      this._appView = new AppView();
+      this.showView(this._appView);
     },
+
+    getChannel: function (channel) {
+      if (channel === undefined) {
+        return Radio.channel('global');
+      }
+      return Radio.channel(channel);
+    }
   });
 
-  app.on('start', function(options) {
-    app._appView = new AppView();
-  });
-
+  var app = new EditorApplication();
   window.EditorApplication = app;
+
   return app;
+
 });

assets/js/src/newsletter_editor/behaviors/BehaviorsLookup.js

@@ -5,11 +5,11 @@
  * For more check: http://marionettejs.com/docs/marionette.behaviors.html#behaviorslookup
  */
 define([
-    'backbone.marionette'
-  ], function(Marionette) {
-
+  'backbone.marionette'
+], function (BackboneMarionette) {
+  var Marionette = BackboneMarionette;
   var BehaviorsLookup = {};
-  Marionette.Behaviors.behaviorsLookup = function() {
+  Marionette.Behaviors.behaviorsLookup = function () {
     return BehaviorsLookup;
   };
 

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

@@ -4,20 +4,44 @@
  * Adds a color picker integration with the view
  */
 define([
-    'backbone.marionette',
-    'newsletter_editor/behaviors/BehaviorsLookup',
-    'spectrum'
-  ], function(Marionette, BehaviorsLookup, Spectrum) {
+  'backbone.marionette',
+  'newsletter_editor/behaviors/BehaviorsLookup',
+  'mailpoet',
+  'spectrum'
+], function (Marionette, BehaviorsLookup, MailPoet, Spectrum) {
+  var BL = BehaviorsLookup;
 
-  BehaviorsLookup.ColorPickerBehavior = Marionette.Behavior.extend({
-    onRender: function() {
-      this.view.$('.mailpoet_color').spectrum({
-        clickoutFiresChange: true,
-        showInput: true,
-        showInitial: true,
-        preferredFormat: "hex6",
-        allowEmpty: true,
+  BL.ColorPickerBehavior = Marionette.Behavior.extend({
+    onRender: function () {
+      var that = this,
+        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,
+          showPalette: true,
+          showSelectionPalette: true,
+          palette: [],
+          localStorageKey: 'newsletter_editor.spectrum.palette',
+          preferredFormat: preferredFormat,
+          allowEmpty: true,
+          chooseText: MailPoet.I18n.t('selectColor'),
+          cancelText: MailPoet.I18n.t('cancelColorSelection'),
+          change: updateColorInput,
+          move: updateColorInput,
+          hide: updateColorInput
+        });
       });
-    },
+    }
   });
 });

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

@@ -1,3 +1,4 @@
+
 /**
  * ContainerDropZoneBehavior
  *
@@ -6,24 +7,25 @@
  * accept droppables
  */
 define([
-    'backbone.marionette',
-    'underscore',
-    'jquery',
-    'newsletter_editor/behaviors/BehaviorsLookup',
-    'interact'
-  ], function(Marionette, _, jQuery, BehaviorsLookup, interact) {
+  'backbone.marionette',
+  'underscore',
+  'jquery',
+  'newsletter_editor/behaviors/BehaviorsLookup',
+  'interact'
+], function (Marionette, _, jQuery, BL, interact) {
+  var BehaviorsLookup = BL;
 
   BehaviorsLookup.ContainerDropZoneBehavior = Marionette.Behavior.extend({
     defaults: {
-      columnLimit: 3,
+      columnLimit: 3
     },
-    onRender: function() {
+    onRender: function () {
       var dragAndDropDisabled = _.isObject(this.view.options.renderOptions) && this.view.options.renderOptions.disableDragAndDrop === true;
       if (!dragAndDropDisabled) {
-          this.addDropZone();
+        this.addDropZone();
       }
     },
-    addDropZone: function(_event) {
+    addDropZone: function (_event) {
       var that = this,
         view = this.view,
         domElement = that.$el.get(0),
@@ -45,16 +47,16 @@ define([
       interact(domElement).dropzone({
         accept: acceptableElementSelector,
         overlap: 'pointer', // Mouse pointer denotes location of a droppable
-        ondragenter: function(event) {
+        ondragenter: function (event) {
           // 1. Visually mark block as active for dropping
           view.$el.addClass('mailpoet_drop_active');
         },
-        ondragleave: function(event) {
+        ondragleave: function (event) {
           // 1. Remove visual markings of active dropping container
           // 2. Remove visual markings of drop position visualization
           that.cleanup();
         },
-        ondropmove: function(event) {
+        ondropmove: function (event) {
           // 1. Compute actual location of the mouse within the container
           // 2. Check if insertion is regular (between blocks) or special (with container insertion)
           // 3a. If insertion is regular, compute position where insertion should happen
@@ -71,6 +73,7 @@ define([
             markerWidth = '',
             markerHeight = '',
             containerOffset = element.offset(),
+            viewCollection = that.getCollection(),
             marker, targetModel, targetView, targetElement,
             topOffset, leftOffset, isLastBlockInsertion,
             $targetBlock, margin;
@@ -80,19 +83,19 @@ define([
           element.find('.mailpoet_drop_marker').remove();
 
           // Allow empty collections to handle their own drop marking
-          if (view.model.get('blocks').isEmpty()) return;
+          if (viewCollection.isEmpty()) return;
 
-          if (view.collection.length === 0) {
+          if (viewCollection.length === 0) {
             targetElement = element.find(view.childViewContainer);
             topOffset = targetElement.offset().top - element.offset().top;
             leftOffset = targetElement.offset().left - element.offset().left;
             markerWidth = targetElement.width();
             markerHeight = targetElement.height();
           } else {
-            isLastBlockInsertion = view.collection.length === dropPosition.index;
-            targetModel = isLastBlockInsertion ? view.collection.at(dropPosition.index - 1) : view.collection.at(dropPosition.index);
+            isLastBlockInsertion = that.getCollection().length === dropPosition.index;
+            targetModel = isLastBlockInsertion ? viewCollection.at(dropPosition.index - 1) : viewCollection.at(dropPosition.index);
 
-            targetView = view.children.findByModel(targetModel);
+            targetView = that.getChildren().findByModel(targetModel);
             targetElement = targetView.$el;
 
             topOffset = targetElement.offset().top - containerOffset.top;
@@ -135,10 +138,10 @@ define([
           if (dropPosition.index === 0) {
             marker.addClass('mailpoet_drop_marker_first');
           }
-          if (view.collection.length - 1 === dropPosition.index) {
+          if (viewCollection.length - 1 === dropPosition.index) {
             marker.addClass('mailpoet_drop_marker_last');
           }
-          if (dropPosition.index > 0 && view.collection.length - 1 > dropPosition.index) {
+          if (dropPosition.index > 0 && viewCollection.length - 1 > dropPosition.index) {
             marker.addClass('mailpoet_drop_marker_middle');
           }
           marker.addClass('mailpoet_drop_marker_' + dropPosition.position);
@@ -147,9 +150,9 @@ define([
           // compensated for to position marker right in the middle of two
           // blocks
           if (dropPosition.position === 'before') {
-            $targetBlock = view.children.findByModel(view.collection.at(dropPosition.index-1)).$el;
+            $targetBlock = that.getChildren().findByModel(viewCollection.at(dropPosition.index - 1)).$el;
           } else {
-            $targetBlock = view.children.findByModel(view.collection.at(dropPosition.index)).$el;
+            $targetBlock = that.getChildren().findByModel(viewCollection.at(dropPosition.index)).$el;
           }
           margin = $targetBlock.outerHeight(true) - $targetBlock.outerHeight();
 
@@ -160,7 +163,7 @@ define([
 
           element.append(marker);
         },
-        ondrop: function(event) {
+        ondrop: function (event) {
           // 1. Compute actual location of the mouse
           // 2. Check if insertion is regular (between blocks) or special (with container insertion)
           // 3a. If insertion is regular
@@ -182,6 +185,7 @@ define([
               view.model.get('blocks').length
             ),
             droppableModel = event.draggable.getDropModel(),
+            viewCollection = that.getCollection(),
             droppedView, droppedModel, index, tempCollection, tempCollection2;
 
           if (dropPosition === undefined) return;
@@ -192,43 +196,44 @@ 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'))({
-                  orientation: 'vertical',
+
+              tempCollection = new (window.EditorApplication.getBlockTypeModel('container'))({
+                orientation: 'vertical'
               });
               tempCollection.get('blocks').add(droppableModel);
-              view.collection.add(tempCollection, {at: index});
+              viewCollection.add(tempCollection, { at: index });
             } else {
-              view.collection.add(droppableModel, {at: index});
+              viewCollection.add(droppableModel, { at: index });
             }
 
-            droppedView = view.children.findByModel(droppableModel);
+            droppedView = that.getChildren().findByModel(droppableModel);
           } else {
             // Special insertion by replacing target block with collection
             // and inserting dropModel into that
-            var tempModel = view.collection.at(dropPosition.index);
+            var tempModel = viewCollection.at(dropPosition.index);
 
-            tempCollection = new (EditorApplication.getBlockTypeModel('container'))({
-                orientation: (view.model.get('orientation') === 'vertical') ? 'horizontal' : 'vertical',
+            tempCollection = new (window.EditorApplication.getBlockTypeModel('container'))({
+              orientation: (view.model.get('orientation') === 'vertical') ? 'horizontal' : 'vertical'
             });
 
-            view.collection.remove(tempModel);
+            viewCollection.remove(tempModel);
 
             if (tempCollection.get('orientation') === 'horizontal') {
               if (dropPosition.position === 'before') {
-                tempCollection2 = new (EditorApplication.getBlockTypeModel('container'))({
-                  orientation: 'vertical',
+                tempCollection2 = new (window.EditorApplication.getBlockTypeModel('container'))({
+                  orientation: 'vertical'
                 });
                 tempCollection2.get('blocks').add(droppableModel);
                 tempCollection.get('blocks').add(tempCollection2);
               }
-              tempCollection2 = new (EditorApplication.getBlockTypeModel('container'))({
-                orientation: 'vertical',
+              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'))({
-                  orientation: 'vertical',
+                tempCollection2 = new (window.EditorApplication.getBlockTypeModel('container'))({
+                  orientation: 'vertical'
                 });
                 tempCollection2.get('blocks').add(droppableModel);
                 tempCollection.get('blocks').add(tempCollection2);
@@ -242,31 +247,31 @@ define([
                 tempCollection.get('blocks').add(droppableModel);
               }
             }
-            view.collection.add(tempCollection, {at: dropPosition.index});
+            viewCollection.add(tempCollection, { at: dropPosition.index });
 
             // Call post add actions
-            droppedView = view.children.findByModel(tempCollection).children.findByModel(droppableModel);
+            droppedView = that.getChildren().findByModel(tempCollection).children.findByModel(droppableModel);
           }
 
           // Call post add actions
           event.draggable.onDrop({
             dropBehavior: that,
             droppedModel: droppableModel,
-            droppedView: droppedView,
+            droppedView: droppedView
           });
 
           that.cleanup();
-        },
+        }
       });
     },
-    cleanup: function() {
+    cleanup: function () {
       // 1. Remove visual markings of active dropping container
       this.view.$el.removeClass('mailpoet_drop_active');
 
       // 2. Remove visual markings of drop position visualization
       this.view.$('.mailpoet_drop_marker').remove();
     },
-    getDropPosition: function(eventX, eventY, unsafe) {
+    getDropPosition: function (eventX, eventY, is_unsafe) {
       var SPECIAL_AREA_INSERTION_WIDTH = 0.00, // Disable special insertion. Default: 0.3
 
         element = this.view.$el,
@@ -288,13 +293,13 @@ define([
 
         insertionType, index, position, indexAndPosition;
 
-      unsafe = !!unsafe;
+      var unsafe = !!is_unsafe;
 
-      if (this.view.collection.length === 0) {
+      if (this.getCollection().length === 0) {
         return {
           insertionType: 'normal',
           index: 0,
-          position: 'inside',
+          position: 'inside'
         };
       }
 
@@ -327,7 +332,7 @@ define([
         index = indexAndPosition.index;
       }
 
-      if (!unsafe && orientation === 'vertical' && insertionType === 'special' && this.view.collection.at(index).get('orientation') === 'horizontal') {
+      if (!unsafe && orientation === 'vertical' && insertionType === 'special' && this.getCollection().at(index).get('orientation') === 'horizontal') {
         // Prevent placing horizontal container in another horizontal container,
         // which would allow breaking the column limit.
         // Switch that to normal insertion
@@ -345,10 +350,10 @@ define([
       return {
         insertionType: insertionType, // 'normal'|'special'
         index: index,
-        position: position, // 'inside'|'before'|'after'
+        position: position // 'inside'|'before'|'after'
       };
     },
-    _computeNormalIndex: function(eventX, eventY) {
+    _computeNormalIndex: function (eventX, eventY) {
       // Normal insertion inserts dropModel before target element if
       // event happens on the first half of the element and after the
       // target element if event happens on the second half of the element.
@@ -356,7 +361,7 @@ define([
 
       var index = this._computeCellIndex(eventX, eventY),
         // TODO: Handle case when there are no children, container is empty
-        targetView = this.view.children.findByModel(this.view.collection.at(index)),
+        targetView = this.getChildren().findByModel(this.getCollection().at(index)),
         orientation = this.view.model.get('orientation'),
         element = targetView.$el,
         eventOffset, closeOffset, elementDimension;
@@ -374,24 +379,24 @@ define([
       if (eventOffset <= closeOffset + elementDimension / 2) {
         // First half of the element
         return {
-            index: index,
-            position: 'before',
+          index: index,
+          position: 'before'
         };
       } else {
         // Second half of the element
         return {
-            index: index,
-            position: 'after',
+          index: index,
+          position: 'after'
         };
       }
     },
-    _computeSpecialIndex: function(eventX, eventY) {
+    _computeSpecialIndex: function (eventX, eventY) {
       return this._computeCellIndex(eventX, eventY);
     },
-    _computeCellIndex: function(eventX, eventY) {
+    _computeCellIndex: function (eventX, eventY) {
       var orientation = this.view.model.get('orientation'),
         eventOffset = (orientation === 'vertical') ? eventY : eventX,
-        resultView = this.view.children.find(function(view) {
+        resultView = this.getChildren().find(function (view) {
           var element = view.$el,
             closeOffset, farOffset;
 
@@ -411,18 +416,27 @@ define([
 
       return index;
     },
-    _canAcceptNormalInsertion: function() {
+    _canAcceptNormalInsertion: function () {
       var orientation = this.view.model.get('orientation'),
         depth = this.view.renderOptions.depth,
-        childCount = this.view.children.length;
+        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() {
+    _canAcceptSpecialInsertion: function () {
       var orientation = this.view.model.get('orientation'),
         depth = this.view.renderOptions.depth,
-        childCount = this.view.children.length;
+        childCount = this.getChildren().length;
       return depth === 0 || (depth === 1 && orientation === 'horizontal' && childCount <= this.options.columnLimit);
     },
+    getCollectionView: function () {
+      return this.view.getChildView('blocks');
+    },
+    getChildren: function () {
+      return this.getCollectionView().children;
+    },
+    getCollection: function () {
+      return this.getCollectionView().collection;
+    }
   });
 });

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

@@ -5,14 +5,15 @@
  * Part of the drag&drop behavior.
  */
 define([
-    'backbone.marionette',
-    'underscore',
-    'jquery',
-    'newsletter_editor/behaviors/BehaviorsLookup',
-    'interact'
-  ], function(Marionette, _, jQuery, BehaviorsLookup, interact) {
+  'backbone.marionette',
+  'underscore',
+  'jquery',
+  'newsletter_editor/behaviors/BehaviorsLookup',
+  'interact'
+], function (Marionette, _, jQuery, BehaviorsLookup, interact) {
+  var BL = BehaviorsLookup;
 
-  BehaviorsLookup.DraggableBehavior = Marionette.Behavior.extend({
+  BL.DraggableBehavior = Marionette.Behavior.extend({
     defaults: {
       cloneOriginal: false,
       hideOriginal: false,
@@ -23,22 +24,22 @@ define([
        *
        * @return Backbone.Model A model that will be passed to the receiver
        */
-      getDropModel: function() {
+      getDropModel: function () {
         throw "Missing 'drop' function for DraggableBehavior";
       },
 
-      onDrop: function(model, view) {},
-      testAttachToInstance: function(model, view) { return true; },
+      onDrop: function (model, view) {},
+      testAttachToInstance: function (model, view) { return true; }
     },
-    onRender: function() {
+    onRender: function () {
       var that = this,
-          interactable;
+        interactable;
 
       // Give instances more control over whether Draggable should be applied
       if (!this.options.testAttachToInstance(this.view.model, this.view)) return;
 
       interactable = interact(this.$el.get(0), {
-          ignoreFrom: this.options.ignoreSelector,
+        ignoreFrom: this.options.ignoreSelector
       }).draggable({
         // allow dragging of multple elements at the same time
         max: Infinity,
@@ -46,13 +47,14 @@ define([
         // Scroll when dragging near edges of a window
         autoScroll: true,
 
-        onstart: function(event) {
+        onstart: function (startEvent) {
+          var event = startEvent;
 
           if (that.options.cloneOriginal === true) {
             // Use substitution instead of a clone
             var 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),
 
               $original = jQuery(event.target),
               $clone = jQuery(clone),
@@ -69,7 +71,7 @@ define([
             // Accurate dimensions can only be taken after insertion to document
             centerXOffset = $clone.width() / 2;
             centerYOffset = $clone.height() / 2;
-            $clone.css('top',  event.pageY - centerYOffset);
+            $clone.css('top', event.pageY - centerYOffset);
             $clone.css('left', event.pageX - centerXOffset);
 
             event.interaction.element = clone;
@@ -89,9 +91,8 @@ define([
             y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
 
           // translate the element
-          target.style.webkitTransform =
-          target.style.transform =
-            'translate(' + x + 'px, ' + y + 'px)';
+          target.style.transform = 'translate(' + x + 'px, ' + y + 'px)';
+          target.style.webkitTransform = target.style.transform;
 
           // update the posiion attributes
           target.setAttribute('data-x', x);
@@ -99,7 +100,8 @@ define([
         },
         onend: function (event) {
           var target = event.target;
-          target.style.webkitTransform = target.style.transform = '';
+          target.style.transform = '';
+          target.style.webkitTransform = target.style.transform;
           target.removeAttribute('data-x');
           target.removeAttribute('data-y');
           jQuery(event.interaction.element).addClass('mailpoet_droppable_active');
@@ -111,9 +113,10 @@ define([
               that.view.$el.removeClass('mailpoet_hidden');
             }
           }
-        },
+        }
       })
       .preventDefault('auto')
+      .styleCursor(false)
       .actionChecker(function (pointer, event, action) {
         // Disable dragging with right click
         if (event.button !== 0) {
@@ -128,7 +131,8 @@ define([
       } else {
         interactable.getDropModel = this.view.getDropFunc();
       }
-      interactable.onDrop = function(options) {
+      interactable.onDrop = function (opts) {
+        var options = opts;
         if (_.isObject(options)) {
           // Inject Draggable behavior if possible
           options.dragBehavior = that;
@@ -136,6 +140,6 @@ define([
         // Delegate to view's event handler
         that.options.onDrop.apply(that, [options]);
       };
-    },
+    }
   });
 });

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

@@ -4,20 +4,23 @@
  * Highlights a block that is being edited
  */
 define([
-    'backbone.marionette',
-    'newsletter_editor/behaviors/BehaviorsLookup',
-  ], function(Marionette, BehaviorsLookup) {
+  'backbone.marionette',
+  'newsletter_editor/behaviors/BehaviorsLookup'
+], function (Marionette, BehaviorsLookup) {
+  var BL = BehaviorsLookup;
 
-  BehaviorsLookup.HighlightEditingBehavior = Marionette.Behavior.extend({
+  BL.HighlightEditingBehavior = Marionette.Behavior.extend({
     modelEvents: {
-      'startEditing': 'enableHighlight',
-      'stopEditing': 'disableHighlight',
+      startEditing: 'enableHighlight',
+      stopEditing: 'disableHighlight'
     },
-    enableHighlight: function() {
+    enableHighlight: function () {
+      this.view._isBeingEdited = true;
       this.$el.addClass('mailpoet_highlight');
     },
-    disableHighlight: function() {
+    disableHighlight: function () {
+      this.view._isBeingEdited = false;
       this.$el.removeClass('mailpoet_highlight');
-    },
+    }
   });
 });

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

@@ -4,65 +4,71 @@
  * Allows resizing elements within a block
  */
 define([
-    'backbone.marionette',
-    'newsletter_editor/behaviors/BehaviorsLookup',
-    'interact'
-  ], function(Marionette, BehaviorsLookup, interact) {
+  'backbone.marionette',
+  'newsletter_editor/behaviors/BehaviorsLookup',
+  'interact'
+], function (Marionette, BehaviorsLookup, interact) {
+  var BL = BehaviorsLookup;
 
-  BehaviorsLookup.ResizableBehavior = Marionette.Behavior.extend({
+  BL.ResizableBehavior = Marionette.Behavior.extend({
     defaults: {
       elementSelector: null,
       resizeHandleSelector: true, // true will use edges of the element itself
-      transformationFunction: function(y) { return y; },
       minLength: 0,
+      maxLength: Infinity,
       modelField: 'styles.block.height',
+      onResize: function (event) {
+        var currentLength = parseFloat(this.view.model.get(this.options.modelField)),
+          newLength = currentLength + event.y;
+        newLength = Math.min(this.options.maxLength, Math.max(this.options.minLength, newLength));
+        this.view.model.set(this.options.modelField, newLength + 'px');
+      }
     },
     events: {
-      "mouseenter": 'showResizeHandle',
-      "mouseleave": 'hideResizeHandle',
+      mouseenter: 'showResizeHandle',
+      mouseleave: 'hideResizeHandle'
     },
-    onRender: function() {
+    onRender: function () {
       this.attachResize();
 
       if (this.isBeingResized !== true) {
         this.hideResizeHandle();
       }
     },
-    attachResize: function() {
+    attachResize: function () {
       var domElement = (this.options.elementSelector === null) ? this.view.$el.get(0) : this.view.$(this.options.elementSelector).get(0),
-          that = this;
+        that = this;
       interact(domElement).resizable({
-        //axis: 'y',
+        // axis: 'y',
         edges: {
           top: false,
           left: false,
           right: false,
-          bottom: (typeof this.options.resizeHandleSelector === 'string') ? this.view.$(this.options.resizeHandleSelector).get(0) : this.options.resizeHandleSelector,
-        },
-      }).on('resizestart', function(event) {
+          bottom: (typeof this.options.resizeHandleSelector === 'string') ? this.view.$(this.options.resizeHandleSelector).get(0) : this.options.resizeHandleSelector
+        }
+      })
+      .on('resizestart', function (event) {
         that.isBeingResized = true;
         that.$el.addClass('mailpoet_resize_active');
-      }).on('resizemove', function(event) {
-        var currentLength = parseFloat(that.view.model.get(that.options.modelField)),
-          newLength = currentLength + that.options.transformationFunction(event.dy);
-
-        if (newLength < that.options.minLength) newLength = that.options.minLength;
-
-        that.view.model.set(that.options.modelField, newLength + 'px');
-      }).on('resizeend', function(event) {
+      })
+      .on('resizemove', function (event) {
+        var onResize = that.options.onResize.bind(that);
+        return onResize(event);
+      })
+      .on('resizeend', function (event) {
         that.isBeingResized = null;
         that.$el.removeClass('mailpoet_resize_active');
       });
     },
-    showResizeHandle: function() {
+    showResizeHandle: function () {
       if (typeof this.options.resizeHandleSelector === 'string') {
         this.view.$(this.options.resizeHandleSelector).removeClass('mailpoet_hidden');
       }
     },
-    hideResizeHandle: function() {
+    hideResizeHandle: function () {
       if (typeof this.options.resizeHandleSelector === 'string') {
         this.view.$(this.options.resizeHandleSelector).addClass('mailpoet_hidden');
       }
-    },
+    }
   });
 });

assets/js/src/newsletter_editor/behaviors/ShowSettingsBehavior.js

@@ -4,28 +4,29 @@
  * Opens up settings of a BlockView if contents are clicked upon
  */
 define([
-    'backbone.marionette',
-    'jquery',
-    'newsletter_editor/behaviors/BehaviorsLookup',
-  ], function(Marionette, jQuery, BehaviorsLookup) {
+  'backbone.marionette',
+  'jquery',
+  'newsletter_editor/behaviors/BehaviorsLookup'
+], function (Marionette, jQuery, BehaviorsLookup) {
+  var BL = BehaviorsLookup;
 
-  BehaviorsLookup.ShowSettingsBehavior = Marionette.Behavior.extend({
+  BL.ShowSettingsBehavior = Marionette.Behavior.extend({
     defaults: {
-      ignoreFrom: '', // selector
+      ignoreFrom: '' // selector
     },
     events: {
-      'click .mailpoet_content': 'showSettings',
+      'click .mailpoet_content': 'showSettings'
     },
-    showSettings: function(event) {
-      if(!this.isIgnoredElement(event.target)) {
+    showSettings: function (event) {
+      if (!this.isIgnoredElement(event.target)) {
         this.view.triggerMethod('showSettings');
       }
     },
-    isIgnoredElement: function(element) {
+    isIgnoredElement: function (element) {
       return this.options.ignoreFrom
         && this.options.ignoreFrom.length > 0
         && jQuery(element).is(this.options.ignoreFrom);
-    },
+    }
   });
 });
 

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

@@ -4,25 +4,26 @@
  * Allows sorting elements within a collection
  */
 define([
-    'backbone.marionette',
-    'underscore',
-    'newsletter_editor/behaviors/BehaviorsLookup'
-  ], function(Marionette, _, BehaviorsLookup) {
+  'backbone.marionette',
+  'underscore',
+  'newsletter_editor/behaviors/BehaviorsLookup'
+], function (Marionette, _, BehaviorsLookup) {
+  var BL = BehaviorsLookup;
 
-  BehaviorsLookup.SortableBehavior = Marionette.Behavior.extend({
-    onRender: function() {
+  BL.SortableBehavior = Marionette.Behavior.extend({
+    onRender: function () {
       var collection = this.view.collection;
 
       if (_.isFunction(this.$el.sortable)) {
         this.$el.sortable({
-          cursor: "move",
-          start: function(event, ui) {
+          cursor: 'move',
+          start: function (event, ui) {
             ui.item.data('previousIndex', ui.item.index());
           },
-          end: function(event, ui) {
+          end: function (event, ui) {
             ui.item.removeData('previousIndex');
           },
-          update: function(event, ui) {
+          update: function (event, ui) {
             var previousIndex = ui.item.data('previousIndex'),
               newIndex = ui.item.index(),
               model = collection.at(previousIndex);
@@ -32,7 +33,7 @@ define([
             collection.remove(model);
             collection.add(model, { at: newIndex });
           },
-          items: this.options.items,
+          items: this.options.items
         });
       }
     }

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

@@ -4,23 +4,24 @@
  * Adds TinyMCE text editing capabilities to a view
  */
 define([
-    'backbone.marionette',
-    'underscore',
-    'newsletter_editor/behaviors/BehaviorsLookup'
-  ], function(Marionette, _, BehaviorsLookup) {
+  'backbone.marionette',
+  'underscore',
+  'newsletter_editor/behaviors/BehaviorsLookup'
+], function (Marionette, _, BehaviorsLookup) {
+  var BL = BehaviorsLookup;
 
-  BehaviorsLookup.TextEditorBehavior = Marionette.Behavior.extend({
+  BL.TextEditorBehavior = Marionette.Behavior.extend({
     defaults: {
       selector: '.mailpoet_content',
-      toolbar1: "bold italic link unlink forecolor mailpoet_shortcodes",
-      toolbar2: "",
-      validElements: "p[class|style],span[class|style],a[href|class|title|target|style],strong[class|style],em[class|style],strike,br",
-      invalidElements: "script",
+      toolbar1: 'bold italic link unlink forecolor mailpoet_shortcodes',
+      toolbar2: '',
+      validElements: 'p[class|style],span[class|style],a[href|class|title|target|style],strong[class|style],em[class|style],strike,br',
+      invalidElements: 'script',
       blockFormats: 'Paragraph=p',
-      plugins: "link textcolor colorpicker mailpoet_shortcodes",
-      configurationFilter: function(originalConfig) { return originalConfig; },
+      plugins: 'link textcolor colorpicker mailpoet_shortcodes',
+      configurationFilter: function (originalConfig) { return originalConfig; }
     },
-    onDomRefresh: function() {
+    onDomRefresh: function () {
       var that = this;
       if (this.view.disableTextEditor === true) {
         return;
@@ -33,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, node, on_save, name) {
           if (url.match(/\[.+\]/g)) {
             // Do not convert URLs with shortcodes
             return url;
@@ -53,23 +56,30 @@ define([
 
         plugins: this.options.plugins,
 
-        setup: function(editor) {
-          editor.on('change', function(e) {
+        setup: function (editor) {
+          editor.on('change', function (e) {
             that.view.triggerMethod('text:editor:change', editor.getContent());
           });
 
-          editor.on('click', function(e) {
+          editor.on('click', function (e) {
             editor.focus();
+            if (that._isActivationClick) {
+              editor.selection.setRng(
+                  window.tinymce.dom.RangeUtils.getCaretRangeFromPoint(e.clientX, e.clientY, editor.getDoc())
+              );
+              that._isActivationClick = false;
+            }
           });
 
-          editor.on('focus', function(e) {
+          editor.on('focus', function (e) {
             that.view.triggerMethod('text:editor:focus');
+            that._isActivationClick = true;
           });
 
-          editor.on('blur', function(e) {
+          editor.on('blur', function (e) {
             that.view.triggerMethod('text:editor:blur');
           });
-        },
+        }
       }));
     }
   });

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

@@ -7,34 +7,34 @@
  * block settings view.
  */
 define([
-    'newsletter_editor/App',
-    'newsletter_editor/blocks/base',
-    'newsletter_editor/blocks/button',
-    'newsletter_editor/blocks/divider',
-    'newsletter_editor/components/communication',
-    'mailpoet',
-    'backbone.supermodel',
-    'underscore',
-    'jquery'
-  ], function(
-    App,
-    BaseBlock,
-    ButtonBlock,
-    DividerBlock,
-    CommunicationComponent,
-    MailPoet,
-    SuperModel,
-    _,
-    jQuery
+  'newsletter_editor/App',
+  'newsletter_editor/blocks/base',
+  'newsletter_editor/blocks/button',
+  'newsletter_editor/blocks/divider',
+  'newsletter_editor/components/communication',
+  'mailpoet',
+  'backbone.supermodel',
+  'underscore',
+  'jquery'
+], function (
+  App,
+  BaseBlock,
+  ButtonBlock,
+  DividerBlock,
+  CommunicationComponent,
+  MailPoet,
+  SuperModel,
+  _,
+  jQuery
   ) {
 
-  "use strict";
+  'use strict';
 
   var Module = {},
-      base = BaseBlock;
+    base = BaseBlock;
 
   Module.ALCSupervisor = SuperModel.extend({
-    initialize: function() {
+    initialize: function () {
       var DELAY_REFRESH_FOR_MS = 500;
       this.listenTo(
         App.getChannel(),
@@ -42,35 +42,35 @@ define([
         _.debounce(this.refresh, DELAY_REFRESH_FOR_MS)
       );
     },
-    refresh: function() {
-      var models = App.findModels(function(model) {
+    refresh: function () {
+      var models = App.findModels(function (model) {
         return model.get('type') === 'automatedLatestContent';
       }) || [];
 
       if (models.length === 0) return;
-      var blocks = _.map(models, function(model) {
+      var blocks = _.map(models, function (model) {
         return model.toJSON();
       });
 
       CommunicationComponent.getBulkTransformedPosts({
-        blocks: blocks,
+        blocks: blocks
       }).then(_.partial(this.refreshBlocks, models));
     },
-    refreshBlocks: function(models, renderedBlocks) {
+    refreshBlocks: function (models, renderedBlocks) {
       _.each(
         _.zip(models, renderedBlocks),
-        function(args) {
+        function (args) {
           var model = args[0],
-              contents = args[1];
+            contents = args[1];
           model.trigger('refreshPosts', contents);
         }
       );
-    },
+    }
   });
 
   Module.AutomatedLatestContentBlockModel = base.BlockModel.extend({
     stale: ['_container'],
-    defaults: function() {
+    defaults: function () {
       return this._getDefaults({
         type: 'automatedLatestContent',
         amount: '5',
@@ -83,7 +83,7 @@ define([
         titleIsLink: false, // false|true
         imageFullWidth: false, // true|false
         featuredImagePosition: 'belowTitle', // 'aboveTitle'|'belowTitle'|'none'
-        //imageAlignment: 'centerPadded', // 'centerFull'|'centerPadded'|'left'|'right'|'alternate'|'none'
+        // imageAlignment: 'centerPadded', // 'centerFull'|'centerPadded'|'left'|'right'|'alternate'|'none'
         showAuthor: 'no', // 'no'|'aboveText'|'belowText'
         authorPrecededBy: 'Author:',
         showCategories: 'no', // 'no'|'aboveText'|'belowText'
@@ -97,17 +97,17 @@ define([
         sortBy: 'newest', // 'newest'|'oldest',
         showDivider: true, // true|false
         divider: {},
-        _container: new (App.getBlockTypeModel('container'))(),
+        _container: new (App.getBlockTypeModel('container'))()
       }, App.getConfig().get('blockDefaults.automatedLatestContent'));
     },
-    relations: function() {
+    relations: function () {
       return {
         readMoreButton: App.getBlockTypeModel('button'),
         divider: App.getBlockTypeModel('divider'),
-        _container: App.getBlockTypeModel('container'),
+        _container: App.getBlockTypeModel('container')
       };
     },
-    initialize: function() {
+    initialize: function () {
       base.BlockView.prototype.initialize.apply(this, arguments);
       this.on('change:amount change:contentType change:terms change:inclusionType change:displayType change:titleFormat change:featuredImagePosition change:titleAlignment change:titleIsLink change:imageFullWidth change:showAuthor change:authorPrecededBy change:showCategories change:categoriesPrecededBy change:readMoreType change:readMoreText change:sortBy change:showDivider', this._scheduleFetchPosts, this);
       this.listenTo(this.get('readMoreButton'), 'change', this._scheduleFetchPosts);
@@ -115,86 +115,87 @@ define([
       this.on('add remove update reset', this._scheduleFetchPosts);
       this.on('refreshPosts', this.updatePosts, this);
     },
-    updatePosts: function(posts) {
-      this.get('_container.blocks').reset(posts, {parse: true});
+    updatePosts: function (posts) {
+      this.get('_container.blocks').reset(posts, { parse: true });
     },
     /**
      * Batch more changes during a specific time, instead of fetching
      * ALC posts on each model change
      */
-    _scheduleFetchPosts: function() {
+    _scheduleFetchPosts: function () {
       App.getChannel().trigger('automatedLatestContentRefresh');
-    },
+    }
   });
 
   Module.AutomatedLatestContentBlockView = base.BlockView.extend({
-    className: "mailpoet_block mailpoet_automated_latest_content_block mailpoet_droppable_block",
-    getTemplate: function() { return templates.automatedLatestContentBlock; },
+    className: 'mailpoet_block mailpoet_automated_latest_content_block mailpoet_droppable_block',
+    initialize: function () {
+      function replaceButtonStylesHandler(data) {
+        this.model.set({ readMoreButton: data });
+      }
+      App.getChannel().on('replaceAllButtonStyles', replaceButtonStylesHandler.bind(this));
+    },
+    getTemplate: function () { return window.templates.automatedLatestContentBlock; },
     regions: {
       toolsRegion: '.mailpoet_tools',
-      postsRegion: '.mailpoet_automated_latest_content_block_posts',
+      postsRegion: '.mailpoet_automated_latest_content_block_posts'
     },
     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',
+      'click .mailpoet_automated_latest_content_block_overlay': 'showSettings'
     }),
-    onDragSubstituteBy: function() { return Module.AutomatedLatestContentWidgetView; },
-    onRender: function() {
+    onDragSubstituteBy: function () { return Module.AutomatedLatestContentWidgetView; },
+    onRender: function () {
       var ContainerView = App.getBlockTypeView('container'),
         renderOptions = {
           disableTextEditor: true,
           disableDragAndDrop: true,
-          emptyContainerMessage: MailPoet.I18n.t('noPostsToDisplay'),
+          emptyContainerMessage: MailPoet.I18n.t('noPostsToDisplay')
         };
       this.toolsView = new Module.AutomatedLatestContentBlockToolsView({ model: this.model });
-      this.toolsRegion.show(this.toolsView);
-      this.postsRegion.show(new ContainerView({ model: this.model.get('_container'), renderOptions: renderOptions }));
-    },
+      this.showChildView('toolsRegion', this.toolsView);
+      this.showChildView('postsRegion', new ContainerView({ model: this.model.get('_container'), renderOptions: renderOptions }));
+    }
   });
 
   Module.AutomatedLatestContentBlockToolsView = base.BlockToolsView.extend({
-    getSettingsView: function() { return Module.AutomatedLatestContentBlockSettingsView; },
+    getSettingsView: function () { return Module.AutomatedLatestContentBlockSettingsView; }
   });
 
   // Sidebar view container
   Module.AutomatedLatestContentBlockSettingsView = base.BlockSettingsView.extend({
-    getTemplate: function() { return templates.automatedLatestContentBlockSettings; },
-    events: function() {
+    getTemplate: function () { return window.templates.automatedLatestContentBlockSettings; },
+    events: function () {
       return {
-        "click .mailpoet_automated_latest_content_hide_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_divider": 'showDividerSettings',
-        "change .mailpoet_automated_latest_content_read_more_type": 'changeReadMoreType',
-        "change .mailpoet_automated_latest_content_display_type": 'changeDisplayType',
-        "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_show_divider": _.partial(this.changeBoolField, 'showDivider'),
-        "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_include_or_exclude": _.partial(this.changeField, "inclusionType"),
-        "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_featured_image_position": _.partial(this.changeField, "featuredImagePosition"),
-        "change .mailpoet_automated_latest_content_show_author": _.partial(this.changeField, "showAuthor"),
-        "input .mailpoet_automated_latest_content_author_preceded_by": _.partial(this.changeField, "authorPrecededBy"),
-        "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_read_more_text": _.partial(this.changeField, "readMoreText"),
-        "change .mailpoet_automated_latest_content_sort_by": _.partial(this.changeField, "sortBy"),
-        "click .mailpoet_done_editing": "close",
+        'click .mailpoet_automated_latest_content_hide_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_divider': 'showDividerSettings',
+        'change .mailpoet_automated_latest_content_read_more_type': 'changeReadMoreType',
+        'change .mailpoet_automated_latest_content_display_type': 'changeDisplayType',
+        '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_show_divider': _.partial(this.changeBoolField, 'showDivider'),
+        '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_include_or_exclude': _.partial(this.changeField, 'inclusionType'),
+        '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_featured_image_position': _.partial(this.changeField, 'featuredImagePosition'),
+        'change .mailpoet_automated_latest_content_show_author': _.partial(this.changeField, 'showAuthor'),
+        'input .mailpoet_automated_latest_content_author_preceded_by': _.partial(this.changeField, 'authorPrecededBy'),
+        '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_read_more_text': _.partial(this.changeField, 'readMoreText'),
+        'change .mailpoet_automated_latest_content_sort_by': _.partial(this.changeField, 'sortBy'),
+        'click .mailpoet_done_editing': 'close'
       };
     },
-    templateHelpers: function() {
-      return {
-        model: this.model.toJSON(),
-      };
-    },
-    onRender: function() {
+    onRender: function () {
       var that = this;
 
       // Dynamically update available post types
@@ -210,17 +211,17 @@ define([
               term: params.term
             };
           },
-          transport: function(options, success, failure) {
+          transport: function (options, success, failure) {
             var taxonomies;
             var promise = CommunicationComponent.getTaxonomies(
               that.model.get('contentType')
-            ).then(function(tax) {
+            ).then(function (tax) {
               taxonomies = tax;
               // Fetch available terms based on the list of taxonomies already fetched
               var promise = CommunicationComponent.getTerms({
                 search: options.data.term,
                 taxonomies: _.keys(taxonomies)
-              }).then(function(terms) {
+              }).then(function (terms) {
                 return {
                   taxonomies: taxonomies,
                   terms: terms
@@ -233,12 +234,12 @@ define([
             promise.fail(failure);
             return promise;
           },
-          processResults: function(data) {
+          processResults: function (data) {
             // Transform taxonomies and terms into select2 compatible format
             return {
               results: _.map(
                 data.terms,
-                function(item) {
+                function (item) {
                   return _.defaults({
                     text: data.taxonomies[item.taxonomy].labels.singular_name + ': ' + item.name,
                     id: item.term_id
@@ -246,24 +247,24 @@ define([
                 }
               )
             };
-          },
-        },
+          }
+        }
       }).on({
-        'select2:select': function(event) {
+        'select2:select': function (event) {
           var terms = that.model.get('terms');
           terms.add(event.params.data);
           // Reset whole model in order for change events to propagate properly
           that.model.set('terms', terms.toJSON());
         },
-        'select2:unselect': function(event) {
+        'select2:unselect': function (event) {
           var terms = that.model.get('terms');
           terms.remove(event.params.data);
           // Reset whole model in order for change events to propagate properly
           that.model.set('terms', terms.toJSON());
-        },
-      }).trigger( 'change' );
+        }
+      }).trigger('change');
     },
-    toggleDisplayOptions: function(event) {
+    toggleDisplayOptions: function (event) {
       var el = this.$('.mailpoet_automated_latest_content_display_options'),
         showControl = this.$('.mailpoet_automated_latest_content_show_display_options');
       if (el.hasClass('mailpoet_closed')) {
@@ -274,28 +275,28 @@ define([
         showControl.removeClass('mailpoet_hidden');
       }
     },
-    showButtonSettings: function(event) {
+    showButtonSettings: function (event) {
       var buttonModule = ButtonBlock;
       (new buttonModule.ButtonBlockSettingsView({
         model: this.model.get('readMoreButton'),
         renderOptions: {
           displayFormat: 'subpanel',
           hideLink: true,
-          hideApplyToAll: true,
-        },
+          hideApplyToAll: true
+        }
       })).render();
     },
-    showDividerSettings: function(event) {
+    showDividerSettings: function (event) {
       var dividerModule = DividerBlock;
       (new dividerModule.DividerBlockSettingsView({
         model: this.model.get('divider'),
         renderOptions: {
           displayFormat: 'subpanel',
-          hideApplyToAll: true,
-        },
+          hideApplyToAll: true
+        }
       })).render();
     },
-    changeReadMoreType: function(event) {
+    changeReadMoreType: function (event) {
       var value = jQuery(event.target).val();
       if (value == 'link') {
         this.$('.mailpoet_automated_latest_content_read_more_text').removeClass('mailpoet_hidden');
@@ -306,7 +307,7 @@ define([
       }
       this.changeField('readMoreType', event);
     },
-    changeDisplayType: function(event) {
+    changeDisplayType: function (event) {
       var value = jQuery(event.target).val();
 
       if (value == 'titleOnly') {
@@ -333,7 +334,7 @@ define([
       }
       this.changeField('displayType', event);
     },
-    changeTitleFormat: function(event) {
+    changeTitleFormat: function (event) {
       var value = jQuery(event.target).val();
       if (value == 'ul') {
         this.$('.mailpoet_automated_latest_content_non_title_list_options').addClass('mailpoet_hidden');
@@ -347,52 +348,53 @@ define([
       }
       this.changeField('titleFormat', event);
     },
-    _updateContentTypes: function(postTypes) {
+    _updateContentTypes: function (postTypes) {
       var select = this.$('.mailpoet_automated_latest_content_content_type'),
-          selectedValue = this.model.get('contentType');
+        selectedValue = this.model.get('contentType');
 
       select.find('option').remove();
-      _.each(postTypes, function(type) {
+      _.each(postTypes, function (type) {
         select.append(jQuery('<option>', {
           value: type.name,
-          text: type.label,
+          text: type.label
         }));
       });
       select.val(selectedValue);
-    },
+    }
   });
 
   Module.AutomatedLatestContentWidgetView = base.WidgetView.extend({
-    getTemplate: function() { return templates.automatedLatestContentInsertion; },
+    getTemplate: function () { return window.templates.automatedLatestContentInsertion; },
     behaviors: {
       DraggableBehavior: {
         cloneOriginal: true,
-        drop: function() {
+        drop: function () {
           return new Module.AutomatedLatestContentBlockModel({}, { parse: true });
         },
-        onDrop: function(options) {
+        onDrop: function (options) {
           options.droppedView.triggerMethod('showSettings');
-        },
+        }
       }
-    },
+    }
   });
 
-  App.on('before:start', function() {
+  App.on('before:start', function (App, options) {
     App.registerBlockType('automatedLatestContent', {
       blockModel: Module.AutomatedLatestContentBlockModel,
-      blockView: Module.AutomatedLatestContentBlockView,
+      blockView: Module.AutomatedLatestContentBlockView
     });
 
     App.registerWidget({
       name: 'automatedLatestContent',
       widgetView: Module.AutomatedLatestContentWidgetView,
-      priority: 97,
+      priority: 97
     });
   });
 
-  App.on('start', function() {
-    App._ALCSupervisor = new Module.ALCSupervisor();
-    App._ALCSupervisor.refresh();
+  App.on('start', function (App, options) {
+    var Application = App;
+    Application._ALCSupervisor = new Module.ALCSupervisor();
+    Application._ALCSupervisor.refresh();
   });
 
   return Module;

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

@@ -5,29 +5,29 @@
  * BlockToolsView, BlockSettingsView and BlockWidgetView are optional.
  */
 define([
-    'newsletter_editor/App',
-    'backbone.marionette',
-    'backbone.supermodel',
-    'underscore',
-    'jquery',
-    'mailpoet',
-    'modal'
-  ], function(App, Marionette, SuperModel, _, jQuery, MailPoet, Modal) {
+  'newsletter_editor/App',
+  'backbone.marionette',
+  'backbone.supermodel',
+  'underscore',
+  'jquery',
+  'mailpoet',
+  'modal'
+], function (App, Marionette, SuperModel, _, jQuery, MailPoet, Modal) {
 
-  "use strict";
+  'use strict';
 
   var Module = {},
-      AugmentedView = Marionette.LayoutView.extend({});
+    AugmentedView = Marionette.View.extend({});
 
   Module.BlockModel = SuperModel.extend({
     stale: [], // Attributes to be removed upon saving
-    initialize: function() {
+    initialize: function () {
       var that = this;
-      this.on('change', function() {
+      this.on('change', function () {
         App.getChannel().trigger('autoSave');
       });
     },
-    _getDefaults: function(blockDefaults, configDefaults) {
+    _getDefaults: function (blockDefaults, configDefaults) {
       var defaults = (_.isObject(configDefaults) && _.isFunction(configDefaults.toJSON)) ? configDefaults.toJSON() : configDefaults;
 
       // Patch the resulting JSON object and fix it's constructors to be Object.
@@ -36,37 +36,38 @@ define([
       // TODO: Investigate for a better solution
       return JSON.parse(JSON.stringify(jQuery.extend(blockDefaults, defaults || {})));
     },
-    toJSON: function() {
+    toJSON: function () {
       // Remove stale attributes from resulting JSON object
       return _.omit(SuperModel.prototype.toJSON.call(this), this.stale);
     },
-    getChildren: function() {
+    getChildren: function () {
       return [];
-    },
+    }
   });
 
   Module.BlockView = AugmentedView.extend({
     regions: {
-      toolsRegion: '> .mailpoet_tools',
+      toolsRegion: '> .mailpoet_tools'
     },
     modelEvents: {
-      'change': 'render',
-      'delete': 'deleteBlock',
+      change: 'render',
+      delete: 'deleteBlock',
+      duplicate: 'duplicateBlock'
     },
     events: {
-      "mouseenter": "showTools",
-      "mouseleave": "hideTools",
+      mouseenter: 'showTools',
+      mouseleave: 'hideTools'
     },
     behaviors: {
       DraggableBehavior: {
         cloneOriginal: true,
         hideOriginal: true,
-        onDrop: function(options) {
+        onDrop: function (options) {
           // After a clone of model has been dropped, cleanup
           // and destroy self
           options.dragBehavior.view.model.destroy();
         },
-        onDragSubstituteBy: function(behavior) {
+        onDragSubstituteBy: function (behavior) {
           var WidgetView, node;
           // When block is being dragged, display the widget icon instead.
           // This will create an instance of block's widget view and
@@ -78,71 +79,80 @@ define([
             WidgetView.destroy();
             return node;
           }
-        },
+        }
       },
-      HighlightEditingBehavior: {},
+      HighlightEditingBehavior: {}
     },
-    templateHelpers: function() {
+    templateContext: function () {
       return {
         model: this.model.toJSON(),
-        viewCid: this.cid,
+        viewCid: this.cid
       };
     },
-    constructor: function() {
+    constructor: function () {
       AugmentedView.apply(this, arguments);
       this.$el.addClass('mailpoet_editor_view_' + this.cid);
     },
-    initialize: function() {
+    initialize: function () {
       this.on('showSettings', this.showSettings, this);
       this.on('dom:refresh', this.showBlock, this);
       this._isFirstRender = true;
     },
-    showTools: function(_event) {
+    showTools: function (_event) {
       if (!this.showingToolsDisabled) {
         this.$('> .mailpoet_tools').addClass('mailpoet_display_tools');
         this.toolsView.triggerMethod('showTools');
       }
     },
-    hideTools: function(e) {
+    hideTools: function (e) {
       this.$('> .mailpoet_tools').removeClass('mailpoet_display_tools');
       this.toolsView.triggerMethod('hideTools');
     },
-    enableShowingTools: function() {
+    enableShowingTools: function () {
       this.showingToolsDisabled = false;
     },
-    disableShowingTools: function() {
+    disableShowingTools: function () {
       this.showingToolsDisabled = true;
       this.hideTools();
     },
-    showSettings: function(options) {
+    showSettings: function (options) {
       this.toolsView.triggerMethod('showSettings', options);
     },
     /**
      * Defines drop behavior of BlockView instance
      */
-    getDropFunc: function() {
-      return function() {
+    getDropFunc: function () {
+      return function () {
         return this.model.clone();
       }.bind(this);
     },
-    showBlock: function() {
+    disableDragging: function () {
+      this.$el.addClass('mailpoet_ignore_drag');
+    },
+    enableDragging: function () {
+      this.$el.removeClass('mailpoet_ignore_drag');
+    },
+    showBlock: function () {
       if (this._isFirstRender) {
         this.transitionIn();
         this._isFirstRender = false;
       }
     },
-    deleteBlock: function() {
-      this.transitionOut().then(function() {
+    deleteBlock: function () {
+      this.transitionOut().then(function () {
         this.model.destroy();
       }.bind(this));
     },
-    transitionIn: function() {
+    duplicateBlock: function () {
+      this.model.collection.add(this.model.toJSON(), { at: this.model.collection.findIndex(this.model) });
+    },
+    transitionIn: function () {
       return this._transition('slideDown', 'fadeIn', 'easeOut');
     },
-    transitionOut: function() {
+    transitionOut: function () {
       return this._transition('slideUp', 'fadeOut', 'easeIn');
     },
-    _transition: function(slideDirection, fadeDirection, easing) {
+    _transition: function (slideDirection, fadeDirection, easing) {
       var promise = jQuery.Deferred();
 
       this.$el.velocity(
@@ -150,40 +160,42 @@ define([
         {
           duration: 250,
           easing: easing,
-          complete: function() {
+          complete: function () {
             promise.resolve();
-          }.bind(this),
+          }.bind(this)
         }
       ).velocity(
         fadeDirection,
         {
           duration: 250,
           easing: easing,
-          queue: false, // Do not enqueue, trigger animation in parallel
+          queue: false // Do not enqueue, trigger animation in parallel
         }
       );
 
       return promise;
-    },
+    }
   });
 
   Module.BlockToolsView = AugmentedView.extend({
-    getTemplate: function() { return templates.genericBlockTools; },
+    getTemplate: function () { return window.templates.genericBlockTools; },
     events: {
-      "click .mailpoet_edit_block": "changeSettings",
-      "click .mailpoet_delete_block_activate": "showDeletionConfirmation",
-      "click .mailpoet_delete_block_cancel": "hideDeletionConfirmation",
-      "click .mailpoet_delete_block_confirm": "deleteBlock",
+      'click .mailpoet_edit_block': 'changeSettings',
+      'click .mailpoet_delete_block_activate': 'showDeletionConfirmation',
+      'click .mailpoet_delete_block_cancel': 'hideDeletionConfirmation',
+      'click .mailpoet_delete_block_confirm': 'deleteBlock',
+      'click .mailpoet_duplicate_block': 'duplicateBlock'
     },
     // Markers of whether these particular tools will be used for this instance
     tools: {
       settings: true,
       delete: true,
-      move: true,
+      duplicate: true,
+      move: true
     },
-    getSettingsView: function() { return Module.BlockSettingsView; },
-    initialize: function(options) {
-      options = options || {};
+    getSettingsView: function () { return Module.BlockSettingsView; },
+    initialize: function (opts) {
+      var options = opts || {};
       if (!_.isUndefined(options.tools)) {
         // Make a new block specific tool config object
         this.tools = jQuery.extend({}, this.tools, options.tools || {});
@@ -193,45 +205,50 @@ define([
       this.on('hideTools', this.hideDeletionConfirmation, this);
       this.on('showSettings', this.changeSettings);
     },
-    templateHelpers: function() {
+    templateContext: function () {
       return {
         model: this.model.toJSON(),
         viewCid: this.cid,
-        tools: this.tools,
+        tools: this.tools
       };
     },
-    changeSettings: function(options) {
+    changeSettings: function (options) {
       var ViewType = this.getSettingsView();
       (new ViewType(_.extend({ model: this.model }, options || {}))).render();
     },
-    showDeletionConfirmation: function() {
+    showDeletionConfirmation: function () {
       this.$('.mailpoet_delete_block').addClass('mailpoet_delete_block_activated');
     },
-    hideDeletionConfirmation: function() {
+    hideDeletionConfirmation: function () {
       this.$('.mailpoet_delete_block').removeClass('mailpoet_delete_block_activated');
     },
-    deleteBlock: function(event) {
+    deleteBlock: function (event) {
       event.preventDefault();
       this.model.trigger('delete');
       return false;
     },
+    duplicateBlock: function (event) {
+      event.preventDefault();
+      this.model.trigger('duplicate');
+      return false;
+    }
   });
 
-  Module.BlockSettingsView = Marionette.LayoutView.extend({
+  Module.BlockSettingsView = Marionette.View.extend({
     className: 'mailpoet_editor_settings',
     behaviors: {
-      ColorPickerBehavior: {},
+      ColorPickerBehavior: {}
     },
-    initialize: function(params) {
+    initialize: function (params) {
       this.model.trigger('startEditing');
       var panelParams = {
         element: this.$el,
         template: '',
         position: 'right',
         width: App.getConfig().get('sidepanelWidth'),
-        onCancel: function() {
+        onCancel: function () {
           this.destroy();
-        }.bind(this),
+        }.bind(this)
       };
       this.renderOptions = params.renderOptions || {};
       if (this.renderOptions.displayFormat === 'subpanel') {
@@ -240,46 +257,51 @@ define([
         MailPoet.Modal.panel(panelParams);
       }
     },
-    close: function(event) {
+    templateContext: function () {
+      return {
+        model: this.model.toJSON()
+      };
+    },
+    close: function (event) {
       this.destroy();
     },
-    changeField: function(field, event) {
+    changeField: function (field, event) {
       this.model.set(field, jQuery(event.target).val());
     },
-    changePixelField: function(field, event) {
+    changePixelField: function (field, event) {
       this.changeFieldWithSuffix(field, event, 'px');
     },
-    changeFieldWithSuffix: function(field, event, suffix) {
+    changeFieldWithSuffix: function (field, event, suffix) {
       this.model.set(field, jQuery(event.target).val() + suffix);
     },
-    changeBoolField: function(field, event) {
-      this.model.set(field, (jQuery(event.target).val() === 'true') ? true : false);
+    changeBoolField: function (field, event) {
+      this.model.set(field, (jQuery(event.target).val() === 'true'));
     },
-    changeBoolCheckboxField: function(field, event) {
+    changeBoolCheckboxField: function (field, event) {
       this.model.set(field, (!!jQuery(event.target).prop('checked')));
     },
-    changeColorField: function(field, event) {
+    changeColorField: function (field, event) {
       var value = jQuery(event.target).val();
       if (value === '') {
         value = 'transparent';
       }
       this.model.set(field, value);
     },
-    onBeforeDestroy: function() {
+    onBeforeDestroy: function () {
       MailPoet.Modal.close();
       this.model.trigger('stopEditing');
-    },
+    }
   });
 
-  Module.WidgetView = Marionette.ItemView.extend({
+  Module.WidgetView = Marionette.View.extend({
     className: 'mailpoet_widget mailpoet_droppable_block mailpoet_droppable_widget',
     behaviors: {
       DraggableBehavior: {
-        drop: function() {
-          throw "Unsupported operation";
+        drop: function () {
+          throw 'Unsupported operation';
         }
       }
-    },
+    }
   });
 
   return Module;

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

@@ -2,20 +2,20 @@
  * Button content block
  */
 define([
-    'newsletter_editor/App',
-    'newsletter_editor/blocks/base',
-    'mailpoet',
-    'underscore',
-    'jquery'
-  ], function(App, BaseBlock, MailPoet, _, jQuery) {
+  'newsletter_editor/App',
+  'newsletter_editor/blocks/base',
+  'mailpoet',
+  'underscore',
+  'jquery'
+], function (App, BaseBlock, MailPoet, _, jQuery) {
 
-  "use strict";
+  'use strict';
 
   var Module = {},
-      base = BaseBlock;
+    base = BaseBlock;
 
   Module.ButtonBlockModel = base.BlockModel.extend({
-    defaults: function() {
+    defaults: function () {
       return this._getDefaults({
         type: 'button',
         text: 'Button',
@@ -33,86 +33,85 @@ define([
             fontFamily: 'Arial',
             fontSize: '16px',
             fontWeight: 'normal', // 'normal'|'bold'
-            textAlign: 'center',
-          },
-        },
+            textAlign: 'center'
+          }
+        }
       }, App.getConfig().get('blockDefaults.button'));
-    },
+    }
   });
 
   Module.ButtonBlockView = base.BlockView.extend({
-    className: "mailpoet_block mailpoet_button_block mailpoet_droppable_block",
-    getTemplate: function() { return templates.buttonBlock; },
-    onDragSubstituteBy: function() { return Module.ButtonWidgetView; },
+    className: 'mailpoet_block mailpoet_button_block mailpoet_droppable_block',
+    getTemplate: function () { return window.templates.buttonBlock; },
+    onDragSubstituteBy: function () { return Module.ButtonWidgetView; },
     behaviors: _.extend({}, base.BlockView.prototype.behaviors, {
-      ShowSettingsBehavior: {},
+      ShowSettingsBehavior: {}
     }),
-    initialize: function() {
+    initialize: function () {
       base.BlockView.prototype.initialize.apply(this, arguments);
 
       // Listen for attempts to change all dividers in one go
-      this._replaceButtonStylesHandler = function(data) { this.model.set(data); }.bind(this);
+      this._replaceButtonStylesHandler = function (data) { this.model.set(data); }.bind(this);
       App.getChannel().on('replaceAllButtonStyles', this._replaceButtonStylesHandler);
     },
-    onRender: function() {
+    onRender: function () {
       this.toolsView = new Module.ButtonBlockToolsView({ model: this.model });
-      this.toolsRegion.show(this.toolsView);
-    },
+      this.showChildView('toolsRegion', this.toolsView);
+    }
   });
 
   Module.ButtonBlockToolsView = base.BlockToolsView.extend({
-    getSettingsView: function() { return Module.ButtonBlockSettingsView; },
+    getSettingsView: function () { return Module.ButtonBlockSettingsView; }
   });
 
   Module.ButtonBlockSettingsView = base.BlockSettingsView.extend({
-    getTemplate: function() { return templates.buttonBlockSettings; },
-    events: function() {
+    getTemplate: function () { return window.templates.buttonBlockSettings; },
+    events: function () {
       return {
-        "input .mailpoet_field_button_text": _.partial(this.changeField, "text"),
-        "input .mailpoet_field_button_url": _.partial(this.changeField, "url"),
-        "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_family": _.partial(this.changeField, "styles.block.fontFamily"),
-        "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_border_color": _.partial(this.changeColorField, "styles.block.borderColor"),
-        "change .mailpoet_field_button_font_weight": "changeFontWeight",
+        'input .mailpoet_field_button_text': _.partial(this.changeField, 'text'),
+        'input .mailpoet_field_button_url': _.partial(this.changeField, 'url'),
+        '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_family': _.partial(this.changeField, 'styles.block.fontFamily'),
+        '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_border_color': _.partial(this.changeColorField, 'styles.block.borderColor'),
+        '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)),
-        "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': _.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_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': _.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_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': _.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_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': _.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)),
 
-        "click .mailpoet_field_button_replace_all_styles": "applyToAll",
-        "click .mailpoet_done_editing": "close",
+        'click .mailpoet_field_button_replace_all_styles': 'applyToAll',
+        'click .mailpoet_done_editing': 'close'
       };
     },
-    templateHelpers: function() {
-      return {
-        model: this.model.toJSON(),
+    templateContext: function () {
+      return _.extend({}, base.BlockView.prototype.templateContext.apply(this, arguments), {
         availableStyles: App.getAvailableStyles().toJSON(),
-        renderOptions: this.renderOptions,
-      };
+        renderOptions: this.renderOptions
+      });
     },
-    applyToAll: function() {
+    applyToAll: function () {
       App.getChannel().trigger('replaceAllButtonStyles', _.pick(this.model.toJSON(), 'styles', 'type'));
     },
-    updateValueAndCall: function(fieldToUpdate, callable, event) {
+    updateValueAndCall: function (fieldToUpdate, callable, event) {
       this.$(fieldToUpdate).val(jQuery(event.target).val());
       callable(event);
     },
-    changeFontWeight: function(event) {
+    changeFontWeight: function (event) {
       var checked = !!jQuery(event.target).prop('checked');
       this.model.set(
         'styles.block.fontWeight',
@@ -122,27 +121,27 @@ define([
   });
 
   Module.ButtonWidgetView = base.WidgetView.extend({
-    getTemplate: function() { return templates.buttonInsertion; },
+    getTemplate: function () { return window.templates.buttonInsertion; },
     behaviors: {
       DraggableBehavior: {
         cloneOriginal: true,
-        drop: function() {
+        drop: function () {
           return new Module.ButtonBlockModel();
-        },
+        }
       }
-    },
+    }
   });
 
-  App.on('before:start', function() {
+  App.on('before:start', function (App, options) {
     App.registerBlockType('button', {
       blockModel: Module.ButtonBlockModel,
-      blockView: Module.ButtonBlockView,
+      blockView: Module.ButtonBlockView
     });
 
     App.registerWidget({
       name: 'button',
       widgetView: Module.ButtonWidgetView,
-      priority: 92,
+      priority: 92
     });
   });
 

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

@@ -4,109 +4,123 @@
  * as other containers.
  */
 define([
-    'backbone',
-    'backbone.marionette',
-    'underscore',
-    'jquery',
-    'newsletter_editor/App',
-    'newsletter_editor/blocks/base'
-  ], function(Backbone, Marionette, _, jQuery, App, BaseBlock) {
+  'backbone',
+  'backbone.marionette',
+  'underscore',
+  'jquery',
+  'newsletter_editor/App',
+  'newsletter_editor/blocks/base'
+], function (Backbone, Marionette, _, jQuery, App, BaseBlock) {
 
-  "use strict";
+  'use strict';
 
   var Module = {},
-      base = BaseBlock,
-      BlockCollection;
+    base = BaseBlock,
+    BlockCollection;
 
   BlockCollection = Backbone.Collection.extend({
     model: base.BlockModel,
-    initialize: function() {
-      this.on('add change remove', function() { App.getChannel().trigger('autoSave'); });
+    initialize: function () {
+      this.on('add change remove', function () { App.getChannel().trigger('autoSave'); });
     },
-    parse: function(response) {
+    parse: function (response) {
       var self = this;
-      return _.map(response, function(block) {
+      return _.map(response, function (block) {
         var Type = App.getBlockTypeModel(block.type);
         // TODO: If type has no registered model, use a backup one
-        return new Type(block, {parse: true});
+        return new Type(block, { parse: true });
       });
-    },
+    }
   });
 
   Module.ContainerBlockModel = base.BlockModel.extend({
     relations: {
-      blocks: BlockCollection,
+      blocks: BlockCollection
     },
-    defaults: function() {
+    defaults: function () {
       return this._getDefaults({
         type: 'container',
         orientation: 'vertical',
         styles: {
           block: {
-            backgroundColor: 'transparent',
-          },
+            backgroundColor: 'transparent'
+          }
         },
-        blocks: new BlockCollection(),
+        blocks: new BlockCollection()
       }, App.getConfig().get('blockDefaults.container'));
     },
-    validate: function() {
+    validate: function () {
       // Recursively propagate validation checks to blocks in the tree
-      var invalidBlock =  this.get('blocks').find(function(block) { return !block.isValid(); });
+      var invalidBlock = this.get('blocks').find(function (block) { return !block.isValid(); });
       if (invalidBlock) {
         return invalidBlock.validationError;
       }
     },
-    parse: function(response) {
+    parse: function (response) {
       // If container has any blocks - add them to a collection
       if (response.type === 'container' && _.has(response, 'blocks')) {
         response.blocks = new BlockCollection(response.blocks, {
-          parse: true,
+          parse: true
         });
       }
       return response;
     },
-    getChildren: function() {
-      var models = this.get('blocks').map(function(model, index, list) {
+    getChildren: function () {
+      var models = this.get('blocks').map(function (model, index, list) {
         return [model, model.getChildren()];
       });
 
       return _.flatten(models);
-    },
+    }
   });
 
-  Module.ContainerBlockView = Marionette.CompositeView.extend({
-    regionClass: Marionette.Region,
+  Module.ContainerBlocksView = Marionette.CollectionView.extend({
+    className: 'mailpoet_container',
+    childView: function (model) {
+      return App.getBlockTypeView(model.get('type'));
+    },
+    childViewOptions: function () {
+      var newRenderOptions = _.clone(this.renderOptions);
+      if (newRenderOptions.depth !== undefined) {
+        newRenderOptions.depth += 1;
+      }
+      return {
+        renderOptions: newRenderOptions
+      };
+    },
+    emptyView: function () { return Module.ContainerBlockEmptyView; },
+    emptyViewOptions: function () { return { renderOptions: this.renderOptions }; },
+    initialize: function (options) {
+      this.renderOptions = options.renderOptions;
+    }
+  });
+
+  Module.ContainerBlockView = base.BlockView.extend({
+    regions: _.extend({}, base.BlockView.prototype.regions, {
+      blocks: {
+        el: '> .mailpoet_container',
+        replaceElement: true
+      }
+    }),
     className: 'mailpoet_block mailpoet_container_block mailpoet_droppable_block mailpoet_droppable_layout_block',
-    getTemplate: function() { return templates.containerBlock; },
-    childViewContainer: '> .mailpoet_container',
-    getEmptyView: function() { return Module.ContainerBlockEmptyView; },
-    emptyViewOptions: function() { return { renderOptions: this.renderOptions }; },
-    modelEvents: {
-      'change': 'render',
-      'delete': 'deleteBlock',
-    },
-    events: {
-      "mouseenter": "showTools",
-      "mouseleave": "hideTools",
-      "click .mailpoet_newsletter_layer_selector": "toggleEditingLayer",
-    },
-    regions: {
-      toolsRegion: '> .mailpoet_tools',
-    },
+    getTemplate: function () { return window.templates.containerBlock; },
+    events: _.extend({}, base.BlockView.prototype.events, {
+      'click .mailpoet_newsletter_layer_selector': 'toggleEditingLayer'
+    }),
     ui: {
       tools: '> .mailpoet_tools'
     },
-    behaviors: {
+    behaviors: _.extend({}, base.BlockView.prototype.behaviors, {
       ContainerDropZoneBehavior: {},
       DraggableBehavior: {
         cloneOriginal: true,
         hideOriginal: true,
-        onDrop: function(options) {
+        onDrop: function (options) {
           // After a clone of model has been dropped, cleanup
           // and destroy self
           options.dragBehavior.view.model.destroy();
         },
-        onDragSubstituteBy: function(behavior) {
+        onDragSubstituteBy: function (behavior) {
           var WidgetView, node;
           // When block is being dragged, display the widget icon instead.
           // This will create an instance of block's widget view and
@@ -119,15 +133,15 @@ define([
             return node;
           }
         },
-        testAttachToInstance: function(model, view) {
+        testAttachToInstance: function (model, view) {
           // Attach Draggable only to layout containers and disable it
           // for root and column containers.
           return view.renderOptions.depth === 1;
-        },
+        }
       },
-      HighlightEditingBehavior: {}
-    },
-    onDragSubstituteBy: function() {
+      HighlightContainerBehavior: {}
+    }),
+    onDragSubstituteBy: function () {
       // For two and three column layouts display their respective widgets,
       // otherwise always default to one column layout widget
       if (this.renderOptions.depth === 1) {
@@ -137,78 +151,57 @@ define([
       return Module.OneColumnContainerWidgetView;
 
     },
-    constructor: function() {
-      // Set the block collection to be handled by this view as well
-      arguments[0].collection = arguments[0].model.get('blocks');
-      Marionette.CompositeView.apply(this, arguments);
-      this.$el.addClass('mailpoet_editor_view_' + this.cid);
-    },
-    initialize: function(options) {
+    initialize: function (options) {
+      base.BlockView.prototype.initialize.apply(this, arguments);
+
       this.renderOptions = _.defaults(options.renderOptions || {}, {});
-      this.on('dom:refresh', this.showBlock, this);
-      this._isFirstRender = true;
     },
-    // Determines which view type should be used for a child
-    getChildView: function(model) {
-      // TODO: If type does not have a type registered, use a generic one
-      return App.getBlockTypeView(model.get('type'));
-    },
-    childViewOptions: function() {
-      var newRenderOptions = _.clone(this.renderOptions);
-      if (newRenderOptions.depth !== undefined) {
-        newRenderOptions.depth += 1;
-      }
-      return {
-        renderOptions: newRenderOptions
-      };
-    },
-    templateHelpers: function() {
-      return {
-        model: this.model.toJSON(),
-        viewCid: this.cid,
-      };
-    },
-    onRender: function() {
-      this._rebuildRegions();
+    onRender: function () {
       this.toolsView = new Module.ContainerBlockToolsView({
         model: this.model,
         tools: {
           settings: this.renderOptions.depth === 1,
           delete: this.renderOptions.depth === 1,
+          duplicate: true,
           move: this.renderOptions.depth === 1,
-          layerSelector: false,
-        },
+          layerSelector: false
+        }
       });
-      this.toolsRegion.show(this.toolsView);
+      this.showChildView('toolsRegion', this.toolsView);
+      this.showChildView('blocks', new Module.ContainerBlocksView({
+        collection: this.model.get('blocks'),
+        renderOptions: this.renderOptions
+      }));
+
+      // TODO: Look for a better way to do this than here
+      // Sets child container orientation HTML class here, as child CollectionView won't have access to model and will overwrite existing region element instead
+      this.$('> .mailpoet_container').attr('class', 'mailpoet_container mailpoet_container_' + this.model.get('orientation'));
     },
-    onBeforeDestroy: function() {
-      this.regionManager.destroy();
-    },
-    showTools: function() {
+    showTools: function () {
       if (this.renderOptions.depth === 1 && !this.$el.hasClass('mailpoet_container_layer_active')) {
         this.$(this.ui.tools).addClass('mailpoet_display_tools');
         this.toolsView.triggerMethod('showTools');
       }
     },
-    hideTools: function() {
+    hideTools: function () {
       if (this.renderOptions.depth === 1 && !this.$el.hasClass('mailpoet_container_layer_active')) {
         this.$(this.ui.tools).removeClass('mailpoet_display_tools');
         this.toolsView.triggerMethod('hideTools');
       }
     },
-    toggleEditingLayer: function(event) {
+    toggleEditingLayer: function (event) {
       var that = this,
         $toggleButton = this.$('> .mailpoet_tools .mailpoet_newsletter_layer_selector'),
         $overlay = jQuery('.mailpoet_layer_overlay'),
         $container = this.$('> .mailpoet_container'),
-        enableContainerLayer = function() {
+        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() {
+        disableContainerLayer = function () {
           that.$el.removeClass('mailpoet_container_layer_active');
           $toggleButton.removeClass('mailpoet_container_layer_active');
           $container.removeClass('mailpoet_layer_highlight');
@@ -221,212 +214,150 @@ define([
         enableContainerLayer();
       }
       event.stopPropagation();
-    },
-    _buildRegions: function(regions) {
-      var that = this;
-
-      var defaults = {
-        regionClass: this.getOption('regionClass'),
-        parentEl: function() { return that.$el; }
-      };
-
-      return this.regionManager.addRegions(regions, defaults);
-    },
-    _rebuildRegions: function() {
-      if (this.regionManager === undefined) {
-        this.regionManager = new Marionette.RegionManager();
-      }
-      this.regionManager.destroy();
-      _.extend(this, this._buildRegions(this.regions));
-    },
-    getDropFunc: function() {
-      return function() {
-        return this.model.clone();
-      }.bind(this);
-    },
-    showBlock: function() {
-      if (this._isFirstRender) {
-        this.transitionIn();
-        this._isFirstRender = false;
-      }
-    },
-    deleteBlock: function() {
-      this.transitionOut().done(function() {
-        this.model.destroy();
-      }.bind(this));
-    },
-    transitionIn: function() {
-      return this._transition('slideDown', 'fadeIn', 'easeIn');
-    },
-    transitionOut: function() {
-      return this._transition('slideUp', 'fadeOut', 'easeOut');
-    },
-    _transition: function(slideDirection, fadeDirection, easing) {
-      var promise = jQuery.Deferred();
-
-      this.$el.velocity(
-        slideDirection,
-        {
-          duration: 250,
-          easing: easing,
-          complete: function() {
-            promise.resolve();
-          }.bind(this),
-        }
-      ).velocity(
-        fadeDirection,
-        {
-          duration: 250,
-          easing: easing,
-          queue: false, // Do not enqueue, trigger animation in parallel
-        }
-      );
-
-      return promise;
-    },
+    }
   });
 
-  Module.ContainerBlockEmptyView = Marionette.ItemView.extend({
-    getTemplate: function() { return templates.containerEmpty; },
-    initialize: function(options) {
+  Module.ContainerBlockEmptyView = Marionette.View.extend({
+    getTemplate: function () { return window.templates.containerEmpty; },
+    initialize: function (options) {
       this.renderOptions = _.defaults(options.renderOptions || {}, {});
     },
-    templateHelpers: function() {
+    templateContext: function () {
       return {
         isRoot: this.renderOptions.depth === 0,
-        emptyContainerMessage: this.renderOptions.emptyContainerMessage || '',
+        emptyContainerMessage: this.renderOptions.emptyContainerMessage || ''
       };
-    },
+    }
   });
 
   Module.ContainerBlockToolsView = base.BlockToolsView.extend({
-    getSettingsView: function() { return Module.ContainerBlockSettingsView; },
+    getSettingsView: function () { return Module.ContainerBlockSettingsView; }
   });
 
   Module.ContainerBlockSettingsView = base.BlockSettingsView.extend({
-    getTemplate: function() { return templates.containerBlockSettings; },
-    events: function() {
+    getTemplate: function () { return window.templates.containerBlockSettings; },
+    events: function () {
       return {
-        "change .mailpoet_field_container_background_color": _.partial(this.changeColorField, "styles.block.backgroundColor"),
-        "click .mailpoet_done_editing": "close",
+        'change .mailpoet_field_container_background_color': _.partial(this.changeColorField, 'styles.block.backgroundColor'),
+        'click .mailpoet_done_editing': 'close'
       };
     },
     regions: {
-      columnsSettingsRegion: '.mailpoet_container_columns_settings',
+      columnsSettingsRegion: '.mailpoet_container_columns_settings'
     },
-    initialize: function() {
+    initialize: function () {
       base.BlockSettingsView.prototype.initialize.apply(this, arguments);
 
       this._columnsSettingsView = new (Module.ContainerBlockColumnsSettingsView)({
-        collection: this.model.get('blocks'),
+        collection: this.model.get('blocks')
       });
     },
-    onRender: function() {
-      this.columnsSettingsRegion.show(this._columnsSettingsView);
-    },
+    onRender: function () {
+      this.showChildView('columnsSettingsRegion', this._columnsSettingsView);
+    }
   });
 
   Module.ContainerBlockColumnsSettingsView = Marionette.CollectionView.extend({
-    getChildView: function() { return Module.ContainerBlockColumnSettingsView; },
-    childViewOptions: function(model, index) {
+    childView: function () { return Module.ContainerBlockColumnSettingsView; },
+    childViewOptions: function (model, index) {
       return {
-        columnIndex: index,
+        columnIndex: index
       };
-    },
+    }
   });
 
-  Module.ContainerBlockColumnSettingsView = Marionette.ItemView.extend({
-    getTemplate: function() { return templates.containerBlockColumnSettings; },
-    initialize: function(options) {
+  Module.ContainerBlockColumnSettingsView = Marionette.View.extend({
+    getTemplate: function () { return window.templates.containerBlockColumnSettings; },
+    initialize: function (options) {
       this.columnNumber = (options.columnIndex || 0) + 1;
     },
-    templateHelpers: function() {
+    templateContext: function () {
       return {
         model: this.model.toJSON(),
-        columnNumber: this.columnNumber,
+        columnNumber: this.columnNumber
       };
-    },
+    }
   });
 
   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,
-        drop: function() {
+        drop: function () {
           return new Module.ContainerBlockModel({
             orientation: 'horizontal',
             blocks: [
-              new Module.ContainerBlockModel(),
+              new Module.ContainerBlockModel()
             ]
           });
         }
       }
-    },
+    }
   });
 
   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,
-        drop: function() {
+        drop: function () {
           return new Module.ContainerBlockModel({
             orientation: 'horizontal',
             blocks: [
               new Module.ContainerBlockModel(),
-              new Module.ContainerBlockModel(),
+              new Module.ContainerBlockModel()
             ]
           });
         }
       }
-    },
+    }
   });
 
   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,
-        drop: function() {
+        drop: function () {
           return new Module.ContainerBlockModel({
             orientation: 'horizontal',
             blocks: [
               new Module.ContainerBlockModel(),
               new Module.ContainerBlockModel(),
-              new Module.ContainerBlockModel(),
+              new Module.ContainerBlockModel()
             ]
           });
         }
       }
-    },
+    }
   });
 
-  App.on('before:start', function() {
+  App.on('before:start', function (App, options) {
     App.registerBlockType('container', {
       blockModel: Module.ContainerBlockModel,
-      blockView: Module.ContainerBlockView,
+      blockView: Module.ContainerBlockView
     });
 
     App.registerLayoutWidget({
       name: 'oneColumnLayout',
       priority: 100,
-      widgetView: Module.OneColumnContainerWidgetView,
+      widgetView: Module.OneColumnContainerWidgetView
     });
 
     App.registerLayoutWidget({
       name: 'twoColumnLayout',
       priority: 100,
-      widgetView: Module.TwoColumnContainerWidgetView,
+      widgetView: Module.TwoColumnContainerWidgetView
     });
 
     App.registerLayoutWidget({
       name: 'threeColumnLayout',
       priority: 100,
-      widgetView: Module.ThreeColumnContainerWidgetView,
+      widgetView: Module.ThreeColumnContainerWidgetView
     });
   });
 

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

@@ -2,20 +2,20 @@
  * Divider content block
  */
 define([
-    'newsletter_editor/App',
-    'newsletter_editor/blocks/base',
-    'underscore',
-    'jquery',
-    'mailpoet'
-  ], function(App, BaseBlock, _, jQuery, MailPoet) {
+  'newsletter_editor/App',
+  'newsletter_editor/blocks/base',
+  'underscore',
+  'jquery',
+  'mailpoet'
+], function (App, BaseBlock, _, jQuery, MailPoet) {
 
-  "use strict";
+  'use strict';
 
   var Module = {},
-      base = BaseBlock;
+    base = BaseBlock;
 
   Module.DividerBlockModel = base.BlockModel.extend({
-    defaults: function() {
+    defaults: function () {
       return this._getDefaults({
         type: 'divider',
         styles: {
@@ -24,132 +24,131 @@ define([
             padding: '12px',
             borderStyle: 'solid',
             borderWidth: '1px',
-            borderColor: '#000000',
-          },
-        },
+            borderColor: '#000000'
+          }
+        }
       }, App.getConfig().get('blockDefaults.divider'));
-    },
+    }
   });
 
   Module.DividerBlockView = base.BlockView.extend({
-    className: "mailpoet_block mailpoet_divider_block mailpoet_droppable_block",
-    getTemplate: function() { return templates.dividerBlock; },
+    className: 'mailpoet_block mailpoet_divider_block mailpoet_droppable_block',
+    getTemplate: function () { return window.templates.dividerBlock; },
     modelEvents: _.omit(base.BlockView.prototype.modelEvents, 'change'),
     behaviors: _.defaults({
       ResizableBehavior: {
         elementSelector: '.mailpoet_content',
         resizeHandleSelector: '.mailpoet_resize_handle',
-        transformationFunction: function(y) { return y / 2; },
+        transformationFunction: function (y) { return y / 2; },
         minLength: 0, // TODO: Move this number to editor configuration
-        modelField: 'styles.block.padding',
+        modelField: 'styles.block.padding'
       },
       ShowSettingsBehavior: {
         ignoreFrom: '.mailpoet_resize_handle'
-      },
+      }
     }, base.BlockView.prototype.behaviors),
-    onDragSubstituteBy: function() { return Module.DividerWidgetView; },
-    initialize: function() {
+    onDragSubstituteBy: function () { return Module.DividerWidgetView; },
+    initialize: function () {
       base.BlockView.prototype.initialize.apply(this, arguments);
       var that = this;
 
       // Listen for attempts to change all dividers in one go
-      this._replaceDividerHandler = function(data) { that.model.set(data); that.model.trigger('applyToAll'); };
+      this._replaceDividerHandler = function (data) { that.model.set(data); that.model.trigger('applyToAll'); };
       App.getChannel().on('replaceAllDividers', this._replaceDividerHandler);
 
       this.listenTo(this.model, 'change:src change:styles.block.backgroundColor change:styles.block.borderStyle change:styles.block.borderWidth change:styles.block.borderColor applyToAll', this.render);
       this.listenTo(this.model, 'change:styles.block.padding', this.changePadding);
     },
-    templateHelpers: function() {
+    templateContext: function () {
       return _.extend({
-        totalHeight: parseInt(this.model.get('styles.block.padding'), 10)*2 + parseInt(this.model.get('styles.block.borderWidth')) + 'px',
-      }, base.BlockView.prototype.templateHelpers.apply(this));
+        totalHeight: parseInt(this.model.get('styles.block.padding'), 10) * 2 + parseInt(this.model.get('styles.block.borderWidth')) + 'px'
+      }, base.BlockView.prototype.templateContext.apply(this));
     },
-    onRender: function() {
+    onRender: function () {
       this.toolsView = new Module.DividerBlockToolsView({ model: this.model });
-      this.toolsRegion.show(this.toolsView);
+      this.showChildView('toolsRegion', this.toolsView);
     },
-    onBeforeDestroy: function() {
+    onBeforeDestroy: function () {
       App.getChannel().off('replaceAllDividers', this._replaceDividerHandler);
       this.stopListening(this.model);
     },
-    changePadding: function() {
+    changePadding: function () {
       this.$('.mailpoet_content').css('padding-top', this.model.get('styles.block.padding'));
       this.$('.mailpoet_content').css('padding-bottom', this.model.get('styles.block.padding'));
-      this.$('.mailpoet_resize_handle_text').text(parseInt(this.model.get('styles.block.padding'), 10)*2 + parseInt(this.model.get('styles.block.borderWidth')) + 'px');
-    },
+      this.$('.mailpoet_resize_handle_text').text(parseInt(this.model.get('styles.block.padding'), 10) * 2 + parseInt(this.model.get('styles.block.borderWidth')) + 'px');
+    }
   });
 
   Module.DividerBlockToolsView = base.BlockToolsView.extend({
-    getSettingsView: function() { return Module.DividerBlockSettingsView; },
+    getSettingsView: function () { return Module.DividerBlockSettingsView; }
   });
 
   Module.DividerBlockSettingsView = base.BlockSettingsView.extend({
-    getTemplate: function() { return templates.dividerBlockSettings; },
-    events: function() {
+    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)),
-        "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': _.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)),
 
-        "change .mailpoet_field_divider_border_color": _.partial(this.changeColorField, "styles.block.borderColor"),
-        "change .mailpoet_field_divider_background_color": _.partial(this.changeColorField, "styles.block.backgroundColor"),
-        "click .mailpoet_button_divider_apply_to_all": "applyToAll",
-        "click .mailpoet_done_editing": "close",
+        'change .mailpoet_field_divider_border_color': _.partial(this.changeColorField, 'styles.block.borderColor'),
+        'change .mailpoet_field_divider_background_color': _.partial(this.changeColorField, 'styles.block.backgroundColor'),
+        'click .mailpoet_button_divider_apply_to_all': 'applyToAll',
+        'click .mailpoet_done_editing': 'close'
       };
     },
-    modelEvents: function() {
+    modelEvents: function () {
       return {
-        'change:styles.block.borderColor': 'repaintDividerStyleOptions',
+        'change:styles.block.borderColor': 'repaintDividerStyleOptions'
       };
     },
-    templateHelpers: function() {
-      return {
-        model: this.model.toJSON(),
+    templateContext: function () {
+      return _.extend({}, base.BlockView.prototype.templateContext.apply(this, arguments), {
         availableStyles: App.getAvailableStyles().toJSON(),
-        renderOptions: this.renderOptions,
-      };
+        renderOptions: this.renderOptions
+      });
     },
-    changeStyle: function(event) {
+    changeStyle: function (event) {
       var style = jQuery(event.currentTarget).data('style');
       this.model.set('styles.block.borderStyle', style);
       this.$('.mailpoet_field_divider_style').removeClass('mailpoet_active_divider_style');
       this.$('.mailpoet_field_divider_style[data-style="' + style + '"]').addClass('mailpoet_active_divider_style');
     },
-    repaintDividerStyleOptions: function() {
+    repaintDividerStyleOptions: function () {
       this.$('.mailpoet_field_divider_style > div').css('border-top-color', this.model.get('styles.block.borderColor'));
     },
-    applyToAll: function(event) {
+    applyToAll: function (event) {
       App.getChannel().trigger('replaceAllDividers', this.model.toJSON());
     },
-    updateValueAndCall: function(fieldToUpdate, callable, event) {
+    updateValueAndCall: function (fieldToUpdate, callable, event) {
       this.$(fieldToUpdate).val(jQuery(event.target).val());
       callable(event);
-    },
+    }
   });
 
   Module.DividerWidgetView = base.WidgetView.extend({
-    getTemplate: function() { return templates.dividerInsertion; },
+    getTemplate: function () { return window.templates.dividerInsertion; },
     behaviors: {
       DraggableBehavior: {
         cloneOriginal: true,
-        drop: function() {
+        drop: function () {
           return new Module.DividerBlockModel();
-        },
+        }
       }
-    },
+    }
   });
-  App.on('before:start', function() {
+  App.on('before:start', function (App, options) {
     App.registerBlockType('divider', {
       blockModel: Module.DividerBlockModel,
-      blockView: Module.DividerBlockView,
+      blockView: Module.DividerBlockView
     });
 
     App.registerWidget({
       name: 'divider',
       widgetView: Module.DividerWidgetView,
-      priority: 93,
+      priority: 93
     });
   });
 

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

@@ -2,130 +2,124 @@
  * Footer content block
  */
 define([
-    'newsletter_editor/App',
-    'newsletter_editor/blocks/base',
-    'underscore'
-  ], function(App, BaseBlock, _) {
+  'newsletter_editor/App',
+  'newsletter_editor/blocks/base',
+  'underscore',
+  'mailpoet'
+], function (App, BaseBlock, _, MailPoet) {
 
-  "use strict";
+  'use strict';
 
   var Module = {},
-      base = BaseBlock;
+    base = BaseBlock;
 
   Module.FooterBlockModel = base.BlockModel.extend({
-    defaults: function() {
+    defaults: function () {
       return this._getDefaults({
         type: 'footer',
         text: '<a href="[link:subscription_unsubscribe_url]">Unsubscribe</a> | <a href="[link:subscription_manage_url]">Manage subscription</a><br /><b>Add your postal address here!</b>',
         styles: {
           block: {
-            backgroundColor: 'transparent',
+            backgroundColor: 'transparent'
           },
           text: {
             fontColor: '#000000',
             fontFamily: 'Arial',
             fontSize: '12px',
-            textAlign: 'center',
+            textAlign: 'center'
           },
           link: {
             fontColor: '#0000ff',
-            textDecoration: 'none',
-          },
-        },
+            textDecoration: 'none'
+          }
+        }
       }, App.getConfig().get('blockDefaults.footer'));
-    },
+    }
   });
 
   Module.FooterBlockView = base.BlockView.extend({
-    className: "mailpoet_block mailpoet_footer_block mailpoet_droppable_block",
-    getTemplate: function() { return templates.footerBlock; },
+    className: 'mailpoet_block mailpoet_footer_block mailpoet_droppable_block',
+    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',
+      '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')),
     behaviors: _.extend({}, base.BlockView.prototype.behaviors, {
       TextEditorBehavior: {
-        configurationFilter: function(originalSettings) {
+        configurationFilter: function (originalSettings) {
           return _.extend({}, originalSettings, {
             mailpoet_shortcodes: App.getConfig().get('shortcodes').toJSON(),
-            mailpoet_shortcodes_window_title: MailPoet.I18n.t('shortcodesWindowTitle'),
+            mailpoet_shortcodes_window_title: MailPoet.I18n.t('shortcodesWindowTitle')
           });
         }
-      },
+      }
     }),
-    onDragSubstituteBy: function() { return Module.FooterWidgetView; },
-    onRender: function() {
+    onDragSubstituteBy: function () { return Module.FooterWidgetView; },
+    onRender: function () {
       this.toolsView = new Module.FooterBlockToolsView({ model: this.model });
-      this.toolsRegion.show(this.toolsView);
+      this.showChildView('toolsRegion', this.toolsView);
     },
-    onTextEditorChange: function(newContent) {
+    onTextEditorChange: function (newContent) {
       this.model.set('text', newContent);
     },
-    onTextEditorFocus: function() {
+    onTextEditorFocus: function () {
       this.disableDragging();
       this.disableShowingTools();
     },
-    onTextEditorBlur: function() {
+    onTextEditorBlur: function () {
       this.enableDragging();
       this.enableShowingTools();
-    },
-    disableDragging: function() {
-      this.$('.mailpoet_content').addClass('mailpoet_ignore_drag');
-    },
-    enableDragging: function() {
-      this.$('.mailpoet_content').removeClass('mailpoet_ignore_drag');
-    },
+    }
   });
 
   Module.FooterBlockToolsView = base.BlockToolsView.extend({
-    getSettingsView: function() { return Module.FooterBlockSettingsView; },
+    getSettingsView: function () { return Module.FooterBlockSettingsView; }
   });
 
   Module.FooterBlockSettingsView = base.BlockSettingsView.extend({
-    getTemplate: function() { return templates.footerBlockSettings; },
-    events: function() {
+    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_font_family": _.partial(this.changeField, "styles.text.fontFamily"),
-        "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_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_alignment": _.partial(this.changeField, "styles.text.textAlign"),
-        "click .mailpoet_done_editing": "close",
-      };
-    },
-    templateHelpers: function() {
-      return {
-        model: this.model.toJSON(),
-        availableStyles: App.getAvailableStyles().toJSON(),
+        '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_size': _.partial(this.changeField, 'styles.text.fontSize'),
+        'change #mailpoet_field_footer_link_color': _.partial(this.changeColorField, 'styles.link.fontColor'),
+        '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_alignment': _.partial(this.changeField, 'styles.text.textAlign'),
+        'click .mailpoet_done_editing': 'close'
       };
     },
+    templateContext: function () {
+      return _.extend({}, base.BlockView.prototype.templateContext.apply(this, arguments), {
+        availableStyles: App.getAvailableStyles().toJSON()
+      });
+    }
   });
 
   Module.FooterWidgetView = base.WidgetView.extend({
-    getTemplate: function() { return templates.footerInsertion; },
+    getTemplate: function () { return window.templates.footerInsertion; },
     behaviors: {
       DraggableBehavior: {
         cloneOriginal: true,
-        drop: function() {
+        drop: function () {
           return new Module.FooterBlockModel();
-        },
+        }
       }
-    },
+    }
   });
 
-  App.on('before:start', function() {
+  App.on('before:start', function (App, options) {
     App.registerBlockType('footer', {
       blockModel: Module.FooterBlockModel,
-      blockView: Module.FooterBlockView,
+      blockView: Module.FooterBlockView
     });
 
     App.registerWidget({
       name: 'footer',
       widgetView: Module.FooterWidgetView,
-      priority: 99,
+      priority: 99
     });
   });
 

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

@@ -2,130 +2,124 @@
  * Header content block
  */
 define([
-    'newsletter_editor/App',
-    'newsletter_editor/blocks/base',
-    'underscore'
-  ], function(App, BaseBlock, _) {
+  'newsletter_editor/App',
+  'newsletter_editor/blocks/base',
+  'underscore',
+  'mailpoet'
+], function (App, BaseBlock, _, MailPoet) {
 
-  "use strict";
+  'use strict';
 
   var Module = {},
-      base = BaseBlock;
+    base = BaseBlock;
 
   Module.HeaderBlockModel = base.BlockModel.extend({
-    defaults: function() {
+    defaults: function () {
       return this._getDefaults({
         type: 'header',
         text: 'Display problems? <a href="[link:newsletter_view_in_browser_url]">View it in your browser</a>',
         styles: {
           block: {
-            backgroundColor: 'transparent',
+            backgroundColor: 'transparent'
           },
           text: {
             fontColor: '#000000',
             fontFamily: 'Arial',
             fontSize: '12px',
-            textAlign: 'center',
+            textAlign: 'center'
           },
           link: {
             fontColor: '#0000ff',
-            textDecoration: 'underline',
-          },
-        },
+            textDecoration: 'underline'
+          }
+        }
       }, App.getConfig().get('blockDefaults.header'));
-    },
+    }
   });
 
   Module.HeaderBlockView = base.BlockView.extend({
-    className: "mailpoet_block mailpoet_header_block mailpoet_droppable_block",
-    getTemplate: function() { return templates.headerBlock; },
+    className: 'mailpoet_block mailpoet_header_block mailpoet_droppable_block',
+    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',
+      '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')),
     behaviors: _.extend({}, base.BlockView.prototype.behaviors, {
       TextEditorBehavior: {
-        configurationFilter: function(originalSettings) {
+        configurationFilter: function (originalSettings) {
           return _.extend({}, originalSettings, {
             mailpoet_shortcodes: App.getConfig().get('shortcodes').toJSON(),
-            mailpoet_shortcodes_window_title: MailPoet.I18n.t('shortcodesWindowTitle'),
+            mailpoet_shortcodes_window_title: MailPoet.I18n.t('shortcodesWindowTitle')
           });
         }
-      },
+      }
     }),
-    onDragSubstituteBy: function() { return Module.HeaderWidgetView; },
-    onRender: function() {
+    onDragSubstituteBy: function () { return Module.HeaderWidgetView; },
+    onRender: function () {
       this.toolsView = new Module.HeaderBlockToolsView({ model: this.model });
-      this.toolsRegion.show(this.toolsView);
+      this.showChildView('toolsRegion', this.toolsView);
     },
-    onTextEditorChange: function(newContent) {
+    onTextEditorChange: function (newContent) {
       this.model.set('text', newContent);
     },
-    onTextEditorFocus: function() {
+    onTextEditorFocus: function () {
       this.disableDragging();
       this.disableShowingTools();
     },
-    onTextEditorBlur: function() {
+    onTextEditorBlur: function () {
       this.enableDragging();
       this.enableShowingTools();
-    },
-    disableDragging: function() {
-      this.$('.mailpoet_content').addClass('mailpoet_ignore_drag');
-    },
-    enableDragging: function() {
-      this.$('.mailpoet_content').removeClass('mailpoet_ignore_drag');
-    },
+    }
   });
 
   Module.HeaderBlockToolsView = base.BlockToolsView.extend({
-    getSettingsView: function() { return Module.HeaderBlockSettingsView; },
+    getSettingsView: function () { return Module.HeaderBlockSettingsView; }
   });
 
   Module.HeaderBlockSettingsView = base.BlockSettingsView.extend({
-    getTemplate: function() { return templates.headerBlockSettings; },
-    events: function() {
+    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_font_family": _.partial(this.changeField, "styles.text.fontFamily"),
-        "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_underline": function(event) {
+        '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_size': _.partial(this.changeField, 'styles.text.fontSize'),
+        'change #mailpoet_field_header_link_color': _.partial(this.changeColorField, 'styles.link.fontColor'),
+        '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_alignment": _.partial(this.changeField, "styles.text.textAlign"),
-        "click .mailpoet_done_editing": "close",
-      };
-    },
-    templateHelpers: function() {
-      return {
-        model: this.model.toJSON(),
-        availableStyles: App.getAvailableStyles().toJSON(),
+        'change .mailpoet_field_header_background_color': _.partial(this.changeColorField, 'styles.block.backgroundColor'),
+        'change .mailpoet_field_header_alignment': _.partial(this.changeField, 'styles.text.textAlign'),
+        'click .mailpoet_done_editing': 'close'
       };
     },
+    templateContext: function () {
+      return _.extend({}, base.BlockView.prototype.templateContext.apply(this, arguments), {
+        availableStyles: App.getAvailableStyles().toJSON()
+      });
+    }
   });
 
   Module.HeaderWidgetView = base.WidgetView.extend({
-    getTemplate: function() { return templates.headerInsertion; },
+    getTemplate: function () { return window.templates.headerInsertion; },
     behaviors: {
       DraggableBehavior: {
         cloneOriginal: true,
-        drop: function() {
+        drop: function () {
           return new Module.HeaderBlockModel();
-        },
+        }
       }
-    },
+    }
   });
 
-  App.on('before:start', function() {
+  App.on('before:start', function (App, options) {
     App.registerBlockType('header', {
       blockModel: Module.HeaderBlockModel,
-      blockView: Module.HeaderBlockView,
+      blockView: Module.HeaderBlockView
     });
 
     App.registerWidget({
       name: 'header',
       widgetView: Module.HeaderWidgetView,
-      priority: 98,
+      priority: 98
     });
   });
 

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

@@ -2,19 +2,21 @@
  * Image content block
  */
 define([
-    'newsletter_editor/App',
-    'newsletter_editor/blocks/base',
-    'underscore'
-  ], function(App, BaseBlock, _) {
+  'newsletter_editor/App',
+  'newsletter_editor/blocks/base',
+  'underscore',
+  'mailpoet',
+  'jquery'
+], function (App, BaseBlock, _, MailPoet, jQuery) {
 
-  "use strict";
+  'use strict';
 
   var Module = {},
-      base = BaseBlock,
-      ImageWidgetView;
+    base = BaseBlock,
+    ImageWidgetView;
 
   Module.ImageBlockModel = base.BlockModel.extend({
-    defaults: function() {
+    defaults: function () {
       return this._getDefaults({
         type: 'image',
         link: '',
@@ -25,72 +27,116 @@ define([
         height: '64px',
         styles: {
           block: {
-            textAlign: 'center',
-          },
-        },
+            textAlign: 'center'
+          }
+        }
       }, App.getConfig().get('blockDefaults.image'));
-    },
+    }
   });
 
   Module.ImageBlockView = base.BlockView.extend({
-    className: "mailpoet_block mailpoet_image_block mailpoet_droppable_block",
-    getTemplate: function() { return templates.imageBlock; },
-    onDragSubstituteBy: function() { return Module.ImageWidgetView; },
-    templateHelpers: function() {
+    className: 'mailpoet_block mailpoet_image_block mailpoet_droppable_block',
+    getTemplate: function () { return window.templates.imageBlock; },
+    onDragSubstituteBy: function () { return Module.ImageWidgetView; },
+    templateContext: function () {
       return _.extend({
-        imageMissingSrc: App.getConfig().get('urls.imageMissing'),
-      }, base.BlockView.prototype.templateHelpers.apply(this));
+        imageMissingSrc: App.getConfig().get('urls.imageMissing')
+      }, 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(),
+            width = event.pageX - corner.left;
+          this.view.model.set('width', width + 'px');
+        }
+      },
+      ShowSettingsBehavior: {
+        ignoreFrom: '.mailpoet_image_resize_handle'
+      }
     }),
-    onRender: function() {
+    onRender: function () {
       this.toolsView = new Module.ImageBlockToolsView({ model: this.model });
-      this.toolsRegion.show(this.toolsView);
-
+      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'));
+    }
   });
 
   Module.ImageBlockToolsView = base.BlockToolsView.extend({
-    getSettingsView: function() { return Module.ImageBlockSettingsView; },
+    getSettingsView: function () { return Module.ImageBlockSettingsView; }
   });
 
   Module.ImageBlockSettingsView = base.BlockSettingsView.extend({
-    getTemplate: function() { return templates.imageBlockSettings; },
-    events: function() {
+    onRender: function () {
+      MailPoet.helpTooltip.show(document.getElementById('tooltip-designer-full-width'), {
+        tooltipId: 'tooltip-editor-full-width',
+        tooltip: MailPoet.I18n.t('helpTooltipDesignerFullWidth')
+      });
+      MailPoet.helpTooltip.show(document.getElementById('tooltip-designer-ideal-width'), {
+        tooltipId: 'tooltip-editor-ideal-width',
+        tooltip: MailPoet.I18n.t('helpTooltipDesignerIdealWidth')
+      });
+    },
+    getTemplate: function () { return window.templates.imageBlockSettings; },
+    events: function () {
       return {
-        "input .mailpoet_field_image_link": _.partial(this.changeField, "link"),
-        "input .mailpoet_field_image_address": _.partial(this.changeField, "src"),
-        "input .mailpoet_field_image_alt_text": _.partial(this.changeField, "alt"),
-        "change .mailpoet_field_image_full_width": _.partial(this.changeBoolCheckboxField, "fullWidth"),
-        "change .mailpoet_field_image_alignment": _.partial(this.changeField, "styles.block.textAlign"),
-        "click .mailpoet_field_image_select_another_image": "showMediaManager",
-        "click .mailpoet_done_editing": "close",
+        'input .mailpoet_field_image_link': _.partial(this.changeField, 'link'),
+        'input .mailpoet_field_image_address': 'changeAddress',
+        'input .mailpoet_field_image_alt_text': _.partial(this.changeField, 'alt'),
+        'change .mailpoet_field_image_full_width': _.partial(this.changeBoolCheckboxField, 'fullWidth'),
+        'change .mailpoet_field_image_alignment': _.partial(this.changeField, 'styles.block.textAlign'),
+        'click .mailpoet_field_image_select_another_image': 'showMediaManager',
+        '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))
       };
     },
-    initialize: function(options) {
+    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);
 
       if (options.showImageManager) {
         this.showMediaManager();
       }
     },
-    showMediaManager: function() {
+    showMediaManager: function () {
       if (this._mediaManager) {
         this._mediaManager.resetSelections();
         this._mediaManager.open();
         return;
       }
 
-      var MediaManager = wp.media.view.MediaFrame.Select.extend({
+      var MediaManager = window.wp.media.view.MediaFrame.Select.extend({
 
-        initialize: function() {
-          wp.media.view.MediaFrame.prototype.initialize.apply(this, arguments);
+        initialize: function () {
+          window.wp.media.view.MediaFrame.prototype.initialize.apply(this, arguments);
 
           _.defaults(this.options, {
             multiple: true,
@@ -107,22 +153,22 @@ define([
           this.$el.addClass('hide-title');
         },
 
-        resetSelections: function() {
+        resetSelections: function () {
           this.state().get('selection').reset();
         },
 
-        createQuery: function(options) {
-          var query = wp.media.query(options);
+        createQuery: function (options) {
+          var query = window.wp.media.query(options);
           return query;
         },
 
-        createStates: function() {
+        createStates: function () {
           var options = this.options;
 
           // 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,
@@ -141,15 +187,15 @@ define([
               // Update user settings when users adjust the
               // attachment display settings.
               displayUserSettings: false
-            }),
+            })
           ]);
 
-          if(wp.media.view.settings.post.featuredImageId) {
-            this.states.add(new wp.media.controller.FeaturedImage());
+          if (window.wp.media.view.settings.post.featuredImageId) {
+            this.states.add(new window.wp.media.controller.FeaturedImage());
           }
         },
 
-        bindHandlers: function() {
+        bindHandlers: function () {
           // from Select
           this.on('router:create:browse', this.createRouter, this);
           this.on('router:render:browse', this.browseRouter, this);
@@ -165,30 +211,30 @@ define([
           this.on('updateExcluded', this.browseContent, this);
 
           var handlers = {
-              content: {
-                'embed': 'embedContent',
-                'edit-selection': 'editSelectionContent'
-              },
-              toolbar: {
-                'main-insert': 'mainInsertToolbar'
-              }
-            };
+            content: {
+              embed: 'embedContent',
+              'edit-selection': 'editSelectionContent'
+            },
+            toolbar: {
+              'main-insert': 'mainInsertToolbar'
+            }
+          };
 
-          _.each(handlers, function(regionHandlers, region) {
-            _.each(regionHandlers, function(callback, handler) {
+          _.each(handlers, function (regionHandlers, region) {
+            _.each(regionHandlers, function (callback, handler) {
               this.on(region + ':render:' + handler, this[callback], this);
             }, this);
           }, this);
         },
 
-        uploadContent: function() {
-          wp.media.view.MediaFrame.Select.prototype.uploadContent.apply(this, arguments);
+        uploadContent: function () {
+          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({
+        embedContent: function () {
+          var view = new window.wp.media.view.Embed({
             controller: this,
             model: this.state()
           }).render();
@@ -197,12 +243,12 @@ define([
           view.url.focus();
         },
 
-        editSelectionContent: function() {
+        editSelectionContent: function () {
           var state = this.state(),
             selection = state.get('selection'),
             view;
 
-          view = new wp.media.view.AttachmentsBrowser({
+          view = new window.wp.media.view.AttachmentsBrowser({
             controller: this,
             collection: selection,
             selection: selection,
@@ -211,14 +257,14 @@ define([
             search: false,
             dragInfo: true,
 
-            AttachmentView: wp.media.view.Attachment.EditSelection
+            AttachmentView: window.wp.media.view.Attachment.EditSelection
           }).render();
 
           view.toolbar.set('backToLibrary', {
             text: 'Return to library',
             priority: -100,
 
-            click: function() {
+            click: function () {
               this.controller.content.mode('browse');
             }
           });
@@ -228,23 +274,23 @@ define([
         },
 
         // Toolbars
-        selectionStatusToolbar: function(view) {
+        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,
 
             // If the selection is editable, pass the callback to
             // switch the content mode.
-            editable: editable && function() {
+            editable: editable && function () {
               this.controller.content.mode('edit-selection');
             }
-          }).render() );
+          }).render());
         },
 
-        mainInsertToolbar: function(view) {
+        mainInsertToolbar: function (view) {
           var controller = this;
 
           this.selectionStatusToolbar(view);
@@ -255,7 +301,7 @@ define([
             text: 'Select Image',
             requires: { selection: true },
 
-            click: function() {
+            click: function () {
               var state = controller.state(),
                 selection = state.get('selection');
 
@@ -265,8 +311,9 @@ define([
           });
         },
 
-        mainEmbedToolbar: function(toolbar) {
-          toolbar.view = new wp.media.view.Toolbar.Embed({
+        mainEmbedToolbar: function (toolbar) {
+          var tbar = toolbar;
+          tbar.view = new window.wp.media.view.Toolbar.Embed({
             controller: this,
             text: 'Add images'
           });
@@ -274,7 +321,7 @@ define([
 
       });
 
-      var theFrame = this._mediaManager = new MediaManager({
+      var theFrame = new MediaManager({
           id: 'mailpoet-media-manager',
           frame: 'select',
           title: 'Select image',
@@ -285,15 +332,16 @@ define([
           },
           displaySettings: false,
           button: {
-            text: 'Select',
-          },
+            text: 'Select'
+          }
         }),
         that = this;
+      this._mediaManager = theFrame;
 
-      this._mediaManager.on('insert', function() {
+      this._mediaManager.on('insert', function () {
         // Append media manager image selections to Images tab
         var selection = theFrame.state().get('selection');
-        selection.each(function(attachment) {
+        selection.each(function (attachment) {
           var sizes = attachment.get('sizes'),
             // Following advice from Becs, the target width should
             // be a double of one column width to render well on
@@ -306,19 +354,19 @@ define([
             // Pick the width that is closest to target width
             increasingByWidthDifference = _.sortBy(
               _.keys(sizes),
-              function(size) { return Math.abs(targetImageWidth - sizes[size].width); }
+              function (size) { return Math.abs(targetImageWidth - sizes[size].width); }
             ),
             bestWidth = sizes[_.first(increasingByWidthDifference)].width,
-            imagesOfBestWidth = _.filter(_.values(sizes), function(size) { return size.width === bestWidth; }),
+            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; });
+            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();
@@ -327,40 +375,54 @@ define([
 
       this._mediaManager.open();
     },
-    onBeforeDestroy: function() {
+    changeAddress: function (event) {
+      var src = jQuery(event.target).val();
+      var image = new Image();
+
+      image.onload = function () {
+        this.model.set({
+          src: src,
+          width: image.naturalWidth + 'px',
+          height: image.naturalHeight + 'px'
+        });
+      }.bind(this);
+
+      image.src = src;
+    },
+    onBeforeDestroy: function () {
       base.BlockSettingsView.prototype.onBeforeDestroy.apply(this, arguments);
       if (typeof this._mediaManager === 'object') {
         this._mediaManager.remove();
       }
-    },
+    }
   });
 
   ImageWidgetView = base.WidgetView.extend({
-    getTemplate: function() { return templates.imageInsertion; },
+    getTemplate: function () { return window.templates.imageInsertion; },
     behaviors: {
       DraggableBehavior: {
         cloneOriginal: true,
-        drop: function() {
+        drop: function () {
           return new Module.ImageBlockModel();
         },
-        onDrop: function(options) {
+        onDrop: function (options) {
           options.droppedView.triggerMethod('showSettings', { showImageManager: true });
-        },
+        }
       }
-    },
+    }
   });
   Module.ImageWidgetView = ImageWidgetView;
 
-  App.on('before:start', function() {
+  App.on('before:start', function (App, options) {
     App.registerBlockType('image', {
       blockModel: Module.ImageBlockModel,
-      blockView: Module.ImageBlockView,
+      blockView: Module.ImageBlockView
     });
 
     App.registerWidget({
       name: 'image',
       widgetView: Module.ImageWidgetView,
-      priority: 91,
+      priority: 91
     });
   });
 

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

@@ -11,43 +11,44 @@
  * block settings view.
  */
 define([
-    'backbone',
-    'backbone.marionette',
-    'backbone.radio',
-    'underscore',
-    'jquery',
-    'mailpoet',
-    'newsletter_editor/App',
-    'newsletter_editor/components/communication',
-    'newsletter_editor/blocks/base',
-    'newsletter_editor/blocks/button',
-    'newsletter_editor/blocks/divider',
-    'select2'
-  ], function(
-    Backbone,
-    Marionette,
-    Radio,
-    _,
-    jQuery,
-    MailPoet,
-    App,
-    CommunicationComponent,
-    BaseBlock,
-    ButtonBlock,
-    DividerBlock
+  'backbone',
+  'backbone.marionette',
+  'backbone.radio',
+  'underscore',
+  'jquery',
+  'mailpoet',
+  'newsletter_editor/App',
+  'newsletter_editor/components/communication',
+  'newsletter_editor/blocks/base',
+  'newsletter_editor/blocks/button',
+  'newsletter_editor/blocks/divider',
+  'select2'
+], function (
+  Backbone,
+  Marionette,
+  Radio,
+  _,
+  jQuery,
+  MailPoet,
+  App,
+  CommunicationComponent,
+  BaseBlock,
+  ButtonBlock,
+  DividerBlock
   ) {
 
-  "use strict";
+  'use strict';
 
   var Module = {},
-      base = BaseBlock;
+    base = BaseBlock;
 
   Module.PostsBlockModel = base.BlockModel.extend({
     stale: ['_selectedPosts', '_availablePosts', '_transformedPosts'],
-    defaults: function() {
+    defaults: function () {
       return this._getDefaults({
         type: 'posts',
         amount: '10',
+        offset: 0,
         contentType: 'post', // 'post'|'page'|'mailpoet_page'
         postStatus: 'publish', // 'draft'|'pending'|'private'|'publish'|'future'
         terms: [], // List of category and tag objects
@@ -59,7 +60,7 @@ define([
         titleIsLink: false, // false|true
         imageFullWidth: false, // true|false
         featuredImagePosition: 'belowTitle', // 'aboveTitle'|'belowTitle'|'none'
-        //imageAlignment: 'centerPadded', // 'centerFull'|'centerPadded'|'left'|'right'|'alternate'|'none'
+        // imageAlignment: 'centerPadded', // 'centerFull'|'centerPadded'|'left'|'right'|'alternate'|'none'
         showAuthor: 'no', // 'no'|'aboveText'|'belowText'
         authorPrecededBy: 'Author:',
         showCategories: 'no', // 'no'|'aboveText'|'belowText'
@@ -75,19 +76,19 @@ define([
         divider: {},
         _selectedPosts: [],
         _availablePosts: [],
-        _transformedPosts: new (App.getBlockTypeModel('container'))(),
+        _transformedPosts: new (App.getBlockTypeModel('container'))()
       }, App.getConfig().get('blockDefaults.posts'));
     },
-    relations: function() {
+    relations: function () {
       return {
         readMoreButton: App.getBlockTypeModel('button'),
         divider: App.getBlockTypeModel('divider'),
         _selectedPosts: Backbone.Collection,
         _availablePosts: Backbone.Collection,
-        _transformedPosts: App.getBlockTypeModel('container'),
+        _transformedPosts: App.getBlockTypeModel('container')
       };
     },
-    initialize: function() {
+    initialize: function () {
       var that = this,
         POST_REFRESH_DELAY_MS = 500,
         refreshAvailablePosts = _.debounce(this.fetchAvailablePosts.bind(this), POST_REFRESH_DELAY_MS),
@@ -98,6 +99,7 @@ define([
 
       this.fetchAvailablePosts();
       this.on('change:amount change:contentType change:terms change:inclusionType change:postStatus change:search change:sortBy', refreshAvailablePosts);
+      this.on('loadMorePosts', this._loadMorePosts, this);
 
       this.listenTo(this.get('_selectedPosts'), 'add remove reset', refreshTransformedPosts);
       this.on('change:displayType change:titleFormat change:featuredImagePosition change:titleAlignment change:titleIsLink change:imageFullWidth change:showAuthor change:authorPrecededBy change:showCategories change:categoriesPrecededBy change:readMoreType change:readMoreText change:showDivider', refreshTransformedPosts);
@@ -106,17 +108,39 @@ define([
 
       this.on('insertSelectedPosts', this._insertSelectedPosts, this);
     },
-    fetchAvailablePosts: function() {
+    fetchAvailablePosts: function () {
       var that = this;
-      CommunicationComponent.getPosts(this.toJSON()).done(function(posts) {
+      this.set('offset', 0);
+      CommunicationComponent.getPosts(this.toJSON()).done(function (posts) {
         that.get('_availablePosts').reset(posts);
         that.get('_selectedPosts').reset(); // Empty out the collection
         that.trigger('change:_availablePosts');
-      }).fail(function() {
+      }).fail(function () {
         MailPoet.Notice.error(MailPoet.I18n.t('failedToFetchAvailablePosts'));
       });
     },
-    _refreshTransformedPosts: function() {
+    _loadMorePosts: function () {
+      var that = this,
+        postCount = this.get('_availablePosts').length,
+        nextOffset = this.get('offset') + Number(this.get('amount'));
+
+      if (postCount === 0 || postCount < nextOffset) {
+        // No more posts to load
+        return false;
+      }
+      this.set('offset', nextOffset);
+      this.trigger('loadingMorePosts');
+
+      CommunicationComponent.getPosts(this.toJSON()).done(function (posts) {
+        that.get('_availablePosts').add(posts);
+        that.trigger('change:_availablePosts');
+      }).fail(function () {
+        MailPoet.Notice.error(MailPoet.I18n.t('failedToFetchAvailablePosts'));
+      }).always(function () {
+        that.trigger('morePostsLoaded');
+      });
+    },
+    _refreshTransformedPosts: function () {
       var that = this,
         data = this.toJSON();
 
@@ -127,13 +151,13 @@ define([
         return;
       }
 
-      CommunicationComponent.getTransformedPosts(data).done(function(posts) {
-        that.get('_transformedPosts').get('blocks').reset(posts, {parse: true});
-      }).fail(function() {
+      CommunicationComponent.getTransformedPosts(data).done(function (posts) {
+        that.get('_transformedPosts').get('blocks').reset(posts, { parse: true });
+      }).fail(function () {
         MailPoet.Notice.error(MailPoet.I18n.t('failedToFetchRenderedPosts'));
       });
     },
-    _insertSelectedPosts: function() {
+    _insertSelectedPosts: function () {
       var that = this,
         data = this.toJSON(),
         index = this.collection.indexOf(this),
@@ -143,31 +167,31 @@ define([
 
       if (data.posts.length === 0) return;
 
-      CommunicationComponent.getTransformedPosts(data).done(function(posts) {
+      CommunicationComponent.getTransformedPosts(data).done(function (posts) {
         collection.add(posts, { at: index });
-      }).fail(function() {
+      }).fail(function () {
         MailPoet.Notice.error(MailPoet.I18n.t('failedToFetchRenderedPosts'));
       });
-    },
+    }
   });
 
   Module.PostsBlockView = base.BlockView.extend({
-    className: "mailpoet_block mailpoet_posts_block mailpoet_droppable_block",
-    getTemplate: function() { return templates.postsBlock; },
+    className: 'mailpoet_block mailpoet_posts_block mailpoet_droppable_block',
+    getTemplate: function () { return window.templates.postsBlock; },
     modelEvents: {}, // Forcefully disable all events
     regions: _.extend({
-      postsRegion: '.mailpoet_posts_block_posts',
+      postsRegion: '.mailpoet_posts_block_posts'
     }, base.BlockView.prototype.regions),
-    onDragSubstituteBy: function() { return Module.PostsWidgetView; },
-    initialize: function() {
+    onDragSubstituteBy: function () { return Module.PostsWidgetView; },
+    initialize: function () {
       base.BlockView.prototype.initialize.apply(this, arguments);
 
       this.toolsView = new Module.PostsBlockToolsView({ model: this.model });
       this.model.reply('blockView', this.notifyAboutSelf, this);
     },
-    onRender: function() {
-      if (!this.toolsRegion.hasView()) {
-        this.toolsRegion.show(this.toolsView);
+    onRender: function () {
+      if (!this.getRegion('toolsRegion').hasView()) {
+        this.showChildView('toolsRegion', this.toolsView);
       }
       this.trigger('showSettings');
 
@@ -175,44 +199,44 @@ define([
         renderOptions = {
           disableTextEditor: true,
           disableDragAndDrop: true,
-          emptyContainerMessage: MailPoet.I18n.t('noPostsToDisplay'),
+          emptyContainerMessage: MailPoet.I18n.t('noPostsToDisplay')
         };
-      this.postsRegion.show(new ContainerView({ model: this.model.get('_transformedPosts'), renderOptions: renderOptions }));
+      this.showChildView('postsRegion', new ContainerView({ model: this.model.get('_transformedPosts'), renderOptions: renderOptions }));
     },
-    notifyAboutSelf: function() {
+    notifyAboutSelf: function () {
       return this;
     },
-    onBeforeDestroy: function() {
+    onBeforeDestroy: function () {
       this.model.stopReplying('blockView', this.notifyAboutSelf, this);
-    },
+    }
   });
 
   Module.PostsBlockToolsView = base.BlockToolsView.extend({
-    getSettingsView: function() { return Module.PostsBlockSettingsView; },
+    getSettingsView: function () { return Module.PostsBlockSettingsView; }
   });
 
   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',
+      displayOptionsRegion: '.mailpoet_settings_posts_display_options'
     },
     events: {
       'click .mailpoet_settings_posts_show_display_options': 'switchToDisplayOptions',
       'click .mailpoet_settings_posts_show_post_selection': 'switchToPostSelection',
-      'click .mailpoet_settings_posts_insert_selected': 'insertPosts',
+      'click .mailpoet_settings_posts_insert_selected': 'insertPosts'
     },
-    templateHelpers: function() {
+    templateContext: function () {
       return {
-        model: this.model.toJSON(),
+        model: this.model.toJSON()
       };
     },
-    initialize: function() {
+    initialize: function () {
       this.model.trigger('startEditing');
       this.selectionView = new PostSelectionSettingsView({ model: this.model });
       this.displayOptionsView = new PostsDisplayOptionsSettingsView({ model: this.model });
     },
-    onRender: function() {
+    onRender: function () {
       var that = this,
         blockView = this.model.request('blockView');
 
@@ -224,17 +248,17 @@ define([
         template: '',
         position: 'right',
         width: App.getConfig().get('sidepanelWidth'),
-        onCancel: function() {
+        onCancel: function () {
           // Self destroy the block if the user closes settings modal
           that.model.destroy();
-        },
+        }
       });
 
       // Inform child views that they have been attached to document
       this.selectionView.triggerMethod('attach');
       this.displayOptionsView.triggerMethod('attach');
     },
-    switchToDisplayOptions: function() {
+    switchToDisplayOptions: function () {
       // Switch content view
       this.$('.mailpoet_settings_posts_selection').addClass('mailpoet_closed');
       this.$('.mailpoet_settings_posts_display_options').removeClass('mailpoet_closed');
@@ -243,7 +267,7 @@ define([
       this.$('.mailpoet_settings_posts_show_display_options').addClass('mailpoet_hidden');
       this.$('.mailpoet_settings_posts_show_post_selection').removeClass('mailpoet_hidden');
     },
-    switchToPostSelection: function() {
+    switchToPostSelection: function () {
       // Switch content view
       this.$('.mailpoet_settings_posts_display_options').addClass('mailpoet_closed');
       this.$('.mailpoet_settings_posts_selection').removeClass('mailpoet_closed');
@@ -252,44 +276,75 @@ define([
       this.$('.mailpoet_settings_posts_show_post_selection').addClass('mailpoet_hidden');
       this.$('.mailpoet_settings_posts_show_display_options').removeClass('mailpoet_hidden');
     },
-    insertPosts: function() {
+    insertPosts: function () {
       this.model.trigger('insertSelectedPosts');
       this.model.destroy();
       this.close();
-    },
+    }
   });
 
-  var PostSelectionSettingsView = Marionette.CompositeView.extend({
-    getTemplate: function() { return templates.postSelectionPostsBlockSettings; },
-    getChildView: function() { return SinglePostSelectionSettingsView; },
-    childViewContainer: '.mailpoet_post_selection_container',
-    getEmptyView: function() { return EmptyPostSelectionSettingsView; },
-    childViewOptions: function() {
+  var PostsSelectionCollectionView = Marionette.CollectionView.extend({
+    className: 'mailpoet_post_scroll_container',
+    childView: function () { return SinglePostSelectionSettingsView; },
+    emptyView: function () { return EmptyPostSelectionSettingsView; },
+    childViewOptions: function () {
       return {
-        blockModel: this.model,
+        blockModel: this.blockModel
       };
     },
-    events: function() {
+    initialize: function (options) {
+      this.blockModel = options.blockModel;
+    },
+    events: {
+      scroll: 'onPostsScroll'
+    },
+    onPostsScroll: function (event) {
+      var $postsBox = jQuery(event.target);
+      if ($postsBox.scrollTop() + $postsBox.innerHeight() >= $postsBox[0].scrollHeight) {
+        // Load more posts if scrolled to bottom
+        this.blockModel.trigger('loadMorePosts');
+      }
+    }
+  });
+
+  var PostSelectionSettingsView = Marionette.View.extend({
+    getTemplate: function () { return window.templates.postSelectionPostsBlockSettings; },
+    regions: {
+      posts: '.mailpoet_post_selection_container'
+    },
+    events: function () {
       return {
         'change .mailpoet_settings_posts_content_type': _.partial(this.changeField, 'contentType'),
         'change .mailpoet_posts_post_status': _.partial(this.changeField, 'postStatus'),
-        'input .mailpoet_posts_search_term': _.partial(this.changeField, 'search'),
+        'input .mailpoet_posts_search_term': _.partial(this.changeField, 'search')
       };
     },
-    constructor: function() {
-      // Set the block collection to be handled by this view as well
-      arguments[0].collection = arguments[0].model.get('_availablePosts');
-      Marionette.CompositeView.apply(this, arguments);
+    modelEvents: {
+      'change:offset': function (model, value) {
+        // Scroll posts view to top if settings are changed
+        if (value === 0) {
+          this.$('.mailpoet_post_scroll_container').scrollTop(0);
+        }
+      },
+      loadingMorePosts: function () {
+        this.$('.mailpoet_post_selection_loading').css('visibility', 'visible');
+      },
+      morePostsLoaded: function () {
+        this.$('.mailpoet_post_selection_loading').css('visibility', 'hidden');
+      }
     },
-    onRender: function() {
+    onRender: function () {
       // Dynamically update available post types
       CommunicationComponent.getPostTypes().done(_.bind(this._updateContentTypes, this));
-    },
-    onAttach: function() {
-      var that = this;
+      var postsView = new PostsSelectionCollectionView({
+        collection: this.model.get('_availablePosts'),
+        blockModel: this.model
+      });
 
-      // Dynamically update available post types
-      //CommunicationComponent.getPostTypes().done(_.bind(this._updateContentTypes, this));
+      this.showChildView('posts', postsView);
+    },
+    onAttach: function () {
+      var that = this;
 
       this.$('.mailpoet_posts_categories_and_tags').select2({
         multiple: true,
@@ -301,17 +356,17 @@ define([
               term: params.term
             };
           },
-          transport: function(options, success, failure) {
+          transport: function (options, success, failure) {
             var taxonomies;
             var promise = CommunicationComponent.getTaxonomies(
               that.model.get('contentType')
-            ).then(function(tax) {
+            ).then(function (tax) {
               taxonomies = tax;
               // Fetch available terms based on the list of taxonomies already fetched
               var promise = CommunicationComponent.getTerms({
                 search: options.data.term,
                 taxonomies: _.keys(taxonomies)
-              }).then(function(terms) {
+              }).then(function (terms) {
                 return {
                   taxonomies: taxonomies,
                   terms: terms
@@ -324,12 +379,12 @@ define([
             promise.fail(failure);
             return promise;
           },
-          processResults: function(data) {
+          processResults: function (data) {
             // Transform taxonomies and terms into select2 compatible format
             return {
               results: _.map(
                 data.terms,
-                function(item) {
+                function (item) {
                   return _.defaults({
                     text: data.taxonomies[item.taxonomy].labels.singular_name + ': ' + item.name,
                     id: item.term_id
@@ -337,62 +392,62 @@ define([
                 }
               )
             };
-          },
-        },
+          }
+        }
       }).on({
-        'select2:select': function(event) {
+        'select2:select': function (event) {
           var terms = that.model.get('terms');
           terms.add(event.params.data);
           // Reset whole model in order for change events to propagate properly
           that.model.set('terms', terms.toJSON());
         },
-        'select2:unselect': function(event) {
+        'select2:unselect': function (event) {
           var terms = that.model.get('terms');
           terms.remove(event.params.data);
           // Reset whole model in order for change events to propagate properly
           that.model.set('terms', terms.toJSON());
-        },
-      }).trigger( 'change' );
+        }
+      }).trigger('change');
     },
-    changeField: function(field, event) {
+    changeField: function (field, event) {
       this.model.set(field, jQuery(event.target).val());
     },
-    _updateContentTypes: function(postTypes) {
+    _updateContentTypes: function (postTypes) {
       var select = this.$('.mailpoet_settings_posts_content_type'),
-          selectedValue = this.model.get('contentType');
+        selectedValue = this.model.get('contentType');
 
       select.find('option').remove();
-      _.each(postTypes, function(type) {
+      _.each(postTypes, function (type) {
         select.append(jQuery('<option>', {
           value: type.name,
-          text: type.label,
+          text: type.label
         }));
       });
       select.val(selectedValue);
-    },
+    }
   });
 
-  var EmptyPostSelectionSettingsView = Marionette.ItemView.extend({
-    getTemplate: function() { return templates.emptyPostPostsBlockSettings; },
+  var EmptyPostSelectionSettingsView = Marionette.View.extend({
+    getTemplate: function () { return window.templates.emptyPostPostsBlockSettings; }
   });
 
-  var SinglePostSelectionSettingsView = Marionette.ItemView.extend({
-    getTemplate: function() { return templates.singlePostPostsBlockSettings; },
-    events: function() {
+  var SinglePostSelectionSettingsView = Marionette.View.extend({
+    getTemplate: function () { return window.templates.singlePostPostsBlockSettings; },
+    events: function () {
       return {
-        'change .mailpoet_select_post_checkbox': 'postSelectionChange',
+        'change .mailpoet_select_post_checkbox': 'postSelectionChange'
       };
     },
-    templateHelpers: function() {
+    templateContext: function () {
       return {
         model: this.model.toJSON(),
-        index: this._index,
+        index: this._index
       };
     },
-    initialize: function(options) {
+    initialize: function (options) {
       this.blockModel = options.blockModel;
     },
-    postSelectionChange: function(event) {
+    postSelectionChange: function (event) {
       var checkBox = jQuery(event.target),
         selectedPostsCollection = this.blockModel.get('_selectedPosts');
       if (checkBox.prop('checked')) {
@@ -400,61 +455,61 @@ define([
       } else {
         selectedPostsCollection.remove(this.model);
       }
-    },
+    }
   });
 
   var PostsDisplayOptionsSettingsView = base.BlockSettingsView.extend({
-    getTemplate: function() { return templates.displayOptionsPostsBlockSettings; },
-    events: function() {
+    getTemplate: function () { return window.templates.displayOptionsPostsBlockSettings; },
+    events: function () {
       return {
-        "click .mailpoet_posts_select_button": 'showButtonSettings',
-        "click .mailpoet_posts_select_divider": 'showDividerSettings',
-        "change .mailpoet_posts_read_more_type": 'changeReadMoreType',
-        "change .mailpoet_posts_display_type": 'changeDisplayType',
-        "change .mailpoet_posts_title_format": 'changeTitleFormat',
-        "change .mailpoet_posts_title_as_links": _.partial(this.changeBoolField, 'titleIsLink'),
-        "change .mailpoet_posts_show_divider": _.partial(this.changeBoolField, 'showDivider'),
-        "input .mailpoet_posts_show_amount": _.partial(this.changeField, "amount"),
-        "change .mailpoet_posts_content_type": _.partial(this.changeField, "contentType"),
-        "change .mailpoet_posts_include_or_exclude": _.partial(this.changeField, "inclusionType"),
-        "change .mailpoet_posts_title_alignment": _.partial(this.changeField, "titleAlignment"),
-        "change .mailpoet_posts_image_full_width": _.partial(this.changeBoolField, "imageFullWidth"),
-        "change .mailpoet_posts_featured_image_position": _.partial(this.changeField, "featuredImagePosition"),
-        "change .mailpoet_posts_show_author": _.partial(this.changeField, "showAuthor"),
-        "input .mailpoet_posts_author_preceded_by": _.partial(this.changeField, "authorPrecededBy"),
-        "change .mailpoet_posts_show_categories": _.partial(this.changeField, "showCategories"),
-        "input .mailpoet_posts_categories": _.partial(this.changeField, "categoriesPrecededBy"),
-        "input .mailpoet_posts_read_more_text": _.partial(this.changeField, "readMoreText"),
-        "change .mailpoet_posts_sort_by": _.partial(this.changeField, "sortBy"),
+        'click .mailpoet_posts_select_button': 'showButtonSettings',
+        'click .mailpoet_posts_select_divider': 'showDividerSettings',
+        'change .mailpoet_posts_read_more_type': 'changeReadMoreType',
+        'change .mailpoet_posts_display_type': 'changeDisplayType',
+        'change .mailpoet_posts_title_format': 'changeTitleFormat',
+        'change .mailpoet_posts_title_as_links': _.partial(this.changeBoolField, 'titleIsLink'),
+        'change .mailpoet_posts_show_divider': _.partial(this.changeBoolField, 'showDivider'),
+        'input .mailpoet_posts_show_amount': _.partial(this.changeField, 'amount'),
+        'change .mailpoet_posts_content_type': _.partial(this.changeField, 'contentType'),
+        'change .mailpoet_posts_include_or_exclude': _.partial(this.changeField, 'inclusionType'),
+        'change .mailpoet_posts_title_alignment': _.partial(this.changeField, 'titleAlignment'),
+        'change .mailpoet_posts_image_full_width': _.partial(this.changeBoolField, 'imageFullWidth'),
+        'change .mailpoet_posts_featured_image_position': _.partial(this.changeField, 'featuredImagePosition'),
+        'change .mailpoet_posts_show_author': _.partial(this.changeField, 'showAuthor'),
+        'input .mailpoet_posts_author_preceded_by': _.partial(this.changeField, 'authorPrecededBy'),
+        'change .mailpoet_posts_show_categories': _.partial(this.changeField, 'showCategories'),
+        'input .mailpoet_posts_categories': _.partial(this.changeField, 'categoriesPrecededBy'),
+        'input .mailpoet_posts_read_more_text': _.partial(this.changeField, 'readMoreText'),
+        'change .mailpoet_posts_sort_by': _.partial(this.changeField, 'sortBy')
       };
     },
-    templateHelpers: function() {
+    templateContext: function () {
       return {
-        model: this.model.toJSON(),
+        model: this.model.toJSON()
       };
     },
-    showButtonSettings: function(event) {
+    showButtonSettings: function (event) {
       var buttonModule = ButtonBlock;
       (new buttonModule.ButtonBlockSettingsView({
         model: this.model.get('readMoreButton'),
         renderOptions: {
           displayFormat: 'subpanel',
           hideLink: true,
-          hideApplyToAll: true,
-        },
+          hideApplyToAll: true
+        }
       })).render();
     },
-    showDividerSettings: function(event) {
+    showDividerSettings: function (event) {
       var dividerModule = DividerBlock;
       (new dividerModule.DividerBlockSettingsView({
         model: this.model.get('divider'),
         renderOptions: {
           displayFormat: 'subpanel',
-          hideApplyToAll: true,
-        },
+          hideApplyToAll: true
+        }
       })).render();
     },
-    changeReadMoreType: function(event) {
+    changeReadMoreType: function (event) {
       var value = jQuery(event.target).val();
       if (value == 'link') {
         this.$('.mailpoet_posts_read_more_text').removeClass('mailpoet_hidden');
@@ -465,7 +520,7 @@ define([
       }
       this.changeField('readMoreType', event);
     },
-    changeDisplayType: function(event) {
+    changeDisplayType: function (event) {
       var value = jQuery(event.target).val();
       if (value == 'titleOnly') {
         this.$('.mailpoet_posts_title_as_list').removeClass('mailpoet_hidden');
@@ -492,7 +547,7 @@ define([
 
       this.changeField('displayType', event);
     },
-    changeTitleFormat: function(event) {
+    changeTitleFormat: function (event) {
       var value = jQuery(event.target).val();
       if (value == 'ul') {
         this.$('.mailpoet_posts_non_title_list_options').addClass('mailpoet_hidden');
@@ -505,31 +560,31 @@ define([
         this.$('.mailpoet_posts_title_as_link').removeClass('mailpoet_hidden');
       }
       this.changeField('titleFormat', event);
-    },
+    }
   });
 
   Module.PostsWidgetView = base.WidgetView.extend({
-    getTemplate: function() { return templates.postsInsertion; },
+    getTemplate: function () { return window.templates.postsInsertion; },
     behaviors: {
       DraggableBehavior: {
         cloneOriginal: true,
-        drop: function() {
+        drop: function () {
           return new Module.PostsBlockModel({}, { parse: true });
         }
       }
-    },
+    }
   });
 
-  App.on('before:start', function() {
+  App.on('before:start', function (App, options) {
     App.registerBlockType('posts', {
       blockModel: Module.PostsBlockModel,
-      blockView: Module.PostsBlockView,
+      blockView: Module.PostsBlockView
     });
 
     App.registerWidget({
       name: 'posts',
       widgetView: Module.PostsWidgetView,
-      priority: 96,
+      priority: 96
     });
   });
 

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

@@ -2,25 +2,26 @@
  * Social icons content block
  */
 define([
-    'newsletter_editor/App',
-    'newsletter_editor/blocks/base',
-    'backbone',
-    'backbone.marionette',
-    'backbone.supermodel',
-    'underscore',
-    'jquery'
-  ], function(App, BaseBlock, Backbone, Marionette, SuperModel, _, jQuery) {
+  'newsletter_editor/App',
+  'newsletter_editor/blocks/base',
+  'backbone',
+  'backbone.marionette',
+  'backbone.supermodel',
+  'underscore',
+  'jquery'
+], function (App, BaseBlock, Backbone, Marionette, SuperModel, _, jQuery) {
 
-  "use strict";
+  'use strict';
 
   var Module = {},
-      base = BaseBlock,
-      SocialBlockSettingsIconSelectorView,
-      SocialBlockSettingsIconView,
-      SocialBlockSettingsStylesView;
+    base = BaseBlock,
+    SocialBlockSettingsIconSelectorView,
+    SocialBlockSettingsIconView,
+    SocialBlockSettingsIconCollectionView,
+    SocialBlockSettingsStylesView;
 
   Module.SocialIconModel = SuperModel.extend({
-    defaults: function() {
+    defaults: function () {
       var defaultValues = App.getConfig().get('socialIcons.custom');
       return {
         type: 'socialIcon',
@@ -29,23 +30,23 @@ define([
         image: App.getAvailableStyles().get('socialIconSets.default.custom'),
         height: '32px',
         width: '32px',
-        text: defaultValues.get('title'),
+        text: defaultValues.get('title')
       };
     },
-    initialize: function(options) {
+    initialize: function (options) {
       var that = this;
       // Make model swap to default values for that type when iconType changes
-      this.on('change:iconType', function() {
+      this.on('change:iconType', function () {
         var defaultValues = App.getConfig().get('socialIcons').get(that.get('iconType')),
           iconSet = that.collection.iconBlockModel.getIconSet();
         this.set({
           link: defaultValues.get('defaultLink'),
           image: iconSet.get(that.get('iconType')),
-          text: defaultValues.get('title'),
+          text: defaultValues.get('title')
         });
       }, this);
-      this.on('change', function() { App.getChannel().trigger('autoSave'); });
-    },
+      this.on('change', function () { App.getChannel().trigger('autoSave'); });
+    }
   });
 
   Module.SocialIconCollectionModel = Backbone.Collection.extend({
@@ -54,334 +55,219 @@ define([
 
   Module.SocialBlockModel = base.BlockModel.extend({
     name: 'iconBlockModel',
-    defaults: function() {
+    defaults: function () {
       return this._getDefaults({
         type: 'social',
         iconSet: 'default',
-        icons: new Module.SocialIconCollectionModel(),
+        icons: new Module.SocialIconCollectionModel()
       }, App.getConfig().get('blockDefaults.social'));
     },
     relations: {
-      icons: Module.SocialIconCollectionModel,
+      icons: Module.SocialIconCollectionModel
     },
-    initialize: function() {
+    initialize: function () {
       this.get('icons').on('add remove change', this._iconsChanged, this);
       this.on('change:iconSet', this.changeIconSet, this);
     },
-    getIconSet: function() {
+    getIconSet: function () {
       return App.getAvailableStyles().get('socialIconSets').get(this.get('iconSet'));
     },
-    changeIconSet: function() {
+    changeIconSet: function () {
       var iconSet = this.getIconSet();
-      _.each(this.get('icons').models, function(model) {
+      _.each(this.get('icons').models, function (model) {
         model.set('image', iconSet.get(model.get('iconType')));
       });
     },
-    _iconsChanged: function() {
-      App.getChannel().trigger('autoSave'); 
-    },
+    _iconsChanged: function () {
+      App.getChannel().trigger('autoSave');
+    }
   });
 
-  var SocialIconView = Marionette.ItemView.extend({
+  var SocialIconView = Marionette.View.extend({
     tagName: 'span',
-    getTemplate: function() { return templates.socialIconBlock; },
+    getTemplate: function () { return window.templates.socialIconBlock; },
     modelEvents: {
-      'change': 'render',
+      change: 'render'
     },
-    templateHelpers: function() {
+    templateContext: function () {
       var allIconSets = App.getAvailableStyles().get('socialIconSets');
       return {
         model: this.model.toJSON(),
         allIconSets: allIconSets.toJSON(),
-        imageMissingSrc: App.getConfig().get('urls.imageMissing'),
+        imageMissingSrc: App.getConfig().get('urls.imageMissing')
       };
-    },
+    }
   });
 
-  Module.SocialBlockView = Marionette.CompositeView.extend({
-    regionClass: Marionette.Region,
+  Module.SocialIconCollectionView = Marionette.CollectionView.extend({
+    childView: SocialIconView
+  });
+
+  Module.SocialBlockView = base.BlockView.extend({
     className: 'mailpoet_block mailpoet_social_block mailpoet_droppable_block',
-    getTemplate: function() { return templates.socialBlock; },
-    childViewContainer: '.mailpoet_social',
-    modelEvents: {
-      'change': 'render',
-      'delete': 'deleteBlock',
-    },
-    events: {
-      "mouseover": "showTools",
-      "mouseout": "hideTools",
-    },
-    regions: {
-      toolsRegion: '> .mailpoet_tools',
-    },
+    getTemplate: function () { return window.templates.socialBlock; },
+    regions: _.extend({}, base.BlockView.prototype.regions, {
+      icons: '.mailpoet_social'
+    }),
     ui: {
       tools: '> .mailpoet_tools'
     },
-    behaviors: {
-      DraggableBehavior: {
-        cloneOriginal: true,
-        hideOriginal: true,
-        onDrop: function(options) {
-          // After a clone of model has been dropped, cleanup
-          // and destroy self
-          options.dragBehavior.view.model.destroy();
-        },
-        onDragSubstituteBy: function(behavior) {
-          var WidgetView, 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
-          if (_.isFunction(behavior.view.onDragSubstituteBy)) {
-            WidgetView = new (behavior.view.onDragSubstituteBy())();
-            WidgetView.render();
-            node = WidgetView.$el.get(0).cloneNode(true);
-            WidgetView.destroy();
-            return node;
-          }
-        },
-      },
-      HighlightEditingBehavior: {},
-      ShowSettingsBehavior: {},
-    },
-    onDragSubstituteBy: function() { return Module.SocialWidgetView; },
-    constructor: function() {
-      // Set the block collection to be handled by this view as well
-      arguments[0].collection = arguments[0].model.get('icons');
-      Marionette.CompositeView.apply(this, arguments);
-    },
-    initialize: function() {
-      this.on('showSettings', this.showSettings, this);
-      this.on('dom:refresh', this.showBlock, this);
-      this._isFirstRender = true;
-    },
-    // Determines which view type should be used for a child
-    childView: SocialIconView,
-    templateHelpers: function() {
-      return {
-        model: this.model.toJSON(),
-        viewCid: this.cid,
-      };
-    },
-    onRender: function() {
-      this._rebuildRegions();
+    behaviors: _.extend({}, base.BlockView.prototype.behaviors, {
+      ShowSettingsBehavior: {}
+    }),
+    onDragSubstituteBy: function () { return Module.SocialWidgetView; },
+    onRender: function () {
       this.toolsView = new Module.SocialBlockToolsView({ model: this.model });
-      this.toolsRegion.show(this.toolsView);
-    },
-    onBeforeDestroy: function() {
-      this.regionManager.destroy();
-    },
-    showTools: function(_event) {
-      this.$(this.ui.tools).addClass('mailpoet_display_tools');
-      _event.stopPropagation();
-    },
-    hideTools: function(_event) {
-      this.$(this.ui.tools).removeClass('mailpoet_display_tools');
-      _event.stopPropagation();
-    },
-    showSettings: function(options) {
-      this.toolsView.triggerMethod('showSettings', options);
-    },
-    getDropFunc: function() {
-      return function() {
-        return this.model.clone();
-      }.bind(this);
-    },
-    _buildRegions: function(regions) {
-      var that = this;
-
-      var defaults = {
-        regionClass: this.getOption('regionClass'),
-        parentEl: function() { return that.$el; }
-      };
-
-      return this.regionManager.addRegions(regions, defaults);
-    },
-    _rebuildRegions: function() {
-      if (this.regionManager === undefined) {
-        this.regionManager = new Marionette.RegionManager();
-      }
-      this.regionManager.destroy();
-      _.extend(this, this._buildRegions(this.regions));
-    },
-    showBlock: function() {
-      if (this._isFirstRender) {
-        this.transitionIn();
-        this._isFirstRender = false;
-      }
-    },
-    deleteBlock: function() {
-      this.transitionOut().done(function() {
-        this.model.destroy();
-      }.bind(this));
-    },
-    transitionIn: function() {
-      return this._transition('slideDown', 'fadeIn', 'easeIn');
-    },
-    transitionOut: function() {
-      return this._transition('slideUp', 'fadeOut', 'easeOut');
-    },
-    _transition: function(slideDirection, fadeDirection, easing) {
-      var promise = jQuery.Deferred();
-
-      this.$el.velocity(
-        slideDirection,
-        {
-          duration: 250,
-          easing: easing,
-          complete: function() {
-            promise.resolve();
-          }.bind(this),
-        }
-      ).velocity(
-        fadeDirection,
-        {
-          duration: 250,
-          easing: easing,
-          queue: false, // Do not enqueue, trigger animation in parallel
-        }
-      );
-
-      return promise;
-    },
+      this.showChildView('toolsRegion', this.toolsView);
+      this.showChildView('icons', new Module.SocialIconCollectionView({
+        collection: this.model.get('icons')
+      }));
+    }
   });
 
   Module.SocialBlockToolsView = base.BlockToolsView.extend({
-    getSettingsView: function() { return Module.SocialBlockSettingsView; },
+    getSettingsView: function () { return Module.SocialBlockSettingsView; }
   });
 
   // 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',
+      stylesRegion: '#mailpoet_social_icons_styles'
     },
-    events: function() {
+    events: function () {
       return {
-        "click .mailpoet_done_editing": "close",
+        'click .mailpoet_done_editing': 'close'
       };
     },
-    initialize: function() {
+    initialize: function () {
       base.BlockSettingsView.prototype.initialize.apply(this, arguments);
 
       this._iconSelectorView = new SocialBlockSettingsIconSelectorView({ model: this.model });
       this._stylesView = new SocialBlockSettingsStylesView({ model: this.model });
     },
-    onRender: function() {
-      this.iconRegion.show(this._iconSelectorView);
-      this.stylesRegion.show(this._stylesView);
+    onRender: function () {
+      this.showChildView('iconRegion', this._iconSelectorView);
+      this.showChildView('stylesRegion', this._stylesView);
     }
   });
 
   // Single icon settings view, used by the selector view
-  SocialBlockSettingsIconView = Marionette.ItemView.extend({
-    getTemplate: function() { return templates.socialSettingsIcon; },
-    events: function() {
+  SocialBlockSettingsIconView = Marionette.View.extend({
+    getTemplate: function () { return window.templates.socialSettingsIcon; },
+    events: function () {
       return {
-        "click .mailpoet_delete_block": "deleteIcon",
-        "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_link": this.changeLink,
-        "input .mailpoet_social_icon_field_text": _.partial(this.changeField, "text"),
+        'click .mailpoet_delete_block': 'deleteIcon',
+        '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_link': this.changeLink,
+        'input .mailpoet_social_icon_field_text': _.partial(this.changeField, 'text')
       };
     },
     modelEvents: {
       'change:iconType': 'render',
-      'change:image': function() {
+      'change:image': function () {
         this.$('.mailpoet_social_icon_image').attr('src', this.model.get('image'));
       },
-      'change:text': function() {
+      'change:text': function () {
         this.$('.mailpoet_social_icon_image').attr('alt', this.model.get('text'));
-      },
+      }
     },
-    templateHelpers: function() {
+    templateContext: function () {
       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') }; }),
+        availableIconTypes = _.map(_.keys(icons.attributes), function (key) { return { iconType: key, title: icons.get(key).get('title') }; }),
         allIconSets = App.getAvailableStyles().get('socialIconSets');
-      return {
-        model: this.model.toJSON(),
+      return _.extend({}, base.BlockView.prototype.templateContext.apply(this, arguments), {
         iconTypes: availableIconTypes,
         currentType: icons.get(this.model.get('iconType')).toJSON(),
-        allIconSets: allIconSets.toJSON(),
-      };
+        allIconSets: allIconSets.toJSON()
+      });
     },
-    deleteIcon: function() {
+    deleteIcon: function () {
       this.model.destroy();
     },
-    changeLink: function(event) {
+    changeLink: function (event) {
       if (this.model.get('iconType') === 'email') {
         this.model.set('link', 'mailto:' + jQuery(event.target).val());
       } else {
         return this.changeField('link', event);
       }
     },
-    changeField: function(field, event) {
+    changeField: function (field, event) {
       this.model.set(field, jQuery(event.target).val());
-    },
-  });
-
-  // Select icons section container view
-  SocialBlockSettingsIconSelectorView = Marionette.CompositeView.extend({
-    getTemplate: function() { return templates.socialSettingsIconSelector; },
-    childView: SocialBlockSettingsIconView,
-    childViewContainer: '#mailpoet_social_icon_selector_contents',
-    events: {
-      'click .mailpoet_add_social_icon': 'addSocialIcon',
-    },
-    modelEvents: {
-      'change:iconSet': 'render',
-    },
-    behaviors: {
-      SortableBehavior: {
-        items: '#mailpoet_social_icon_selector_contents > div',
-      },
-    },
-    constructor: function() {
-      // Set the icon collection to be handled by this view as well
-      arguments[0].collection = arguments[0].model.get('icons');
-      Marionette.CompositeView.apply(this, arguments);
-    },
-    addSocialIcon: function() {
-      // Add a social icon with default values
-      this.collection.add({});
     }
   });
 
-  SocialBlockSettingsStylesView = Marionette.ItemView.extend({
-    getTemplate: function() { return templates.socialSettingsStyles; },
-    modelEvents: {
-      'change': 'render',
+  SocialBlockSettingsIconCollectionView = Marionette.CollectionView.extend({
+    behaviors: {
+      SortableBehavior: {
+        items: '> div'
+      }
+    },
+    childViewContainer: '#mailpoet_social_icon_selector_contents',
+    childView: SocialBlockSettingsIconView
+  });
+
+  // Select icons section container view
+  SocialBlockSettingsIconSelectorView = Marionette.View.extend({
+    getTemplate: function () { return window.templates.socialSettingsIconSelector; },
+    regions: {
+      icons: '#mailpoet_social_icon_selector_contents'
     },
     events: {
-      'click .mailpoet_social_icon_set': 'changeSocialIconSet',
+      'click .mailpoet_add_social_icon': 'addSocialIcon'
     },
-    initialize: function() {
+    modelEvents: {
+      'change:iconSet': 'render'
+    },
+    addSocialIcon: function () {
+      // Add a social icon with default values
+      this.model.get('icons').add({});
+    },
+    onRender: function () {
+      this.showChildView('icons', new SocialBlockSettingsIconCollectionView({
+        collection: this.model.get('icons')
+      }));
+    }
+
+  });
+
+  SocialBlockSettingsStylesView = Marionette.View.extend({
+    getTemplate: function () { return window.templates.socialSettingsStyles; },
+    modelEvents: {
+      change: 'render'
+    },
+    events: {
+      'click .mailpoet_social_icon_set': 'changeSocialIconSet'
+    },
+    initialize: function () {
       this.listenTo(this.model.get('icons'), 'add remove change', this.render);
     },
-    templateHelpers: function() {
+    templateContext: function () {
       var allIconSets = App.getAvailableStyles().get('socialIconSets');
       return {
         activeSet: this.model.get('iconSet'),
         socialIconSets: allIconSets.toJSON(),
         availableSets: _.keys(allIconSets.toJSON()),
-        availableSocialIcons: this.model.get('icons').pluck('iconType'),
+        availableSocialIcons: this.model.get('icons').pluck('iconType')
       };
     },
-    changeSocialIconSet: function(event) {
+    changeSocialIconSet: function (event) {
       this.model.set('iconSet', jQuery(event.currentTarget).data('setname'));
     },
-    onBeforeDestroy: function() {
+    onBeforeDestroy: function () {
       this.model.get('icons').off('add remove', this.render, this);
-    },
+    }
   });
 
   Module.SocialWidgetView = base.WidgetView.extend({
-    getTemplate: function() { return templates.socialInsertion; },
+    getTemplate: function () { return window.templates.socialInsertion; },
     behaviors: {
       DraggableBehavior: {
         cloneOriginal: true,
-        drop: function() {
+        drop: function () {
           return new Module.SocialBlockModel({
             type: 'social',
             iconSet: 'default',
@@ -393,7 +279,7 @@ define([
                 image: App.getAvailableStyles().get('socialIconSets.default.facebook'),
                 height: '32px',
                 width: '32px',
-                text: 'Facebook',
+                text: 'Facebook'
               },
               {
                 type: 'socialIcon',
@@ -402,25 +288,25 @@ define([
                 image: App.getAvailableStyles().get('socialIconSets.default.twitter'),
                 height: '32px',
                 width: '32px',
-                text: 'Twitter',
-              },
-            ],
+                text: 'Twitter'
+              }
+            ]
           }, { parse: true });
         }
       }
-    },
+    }
   });
 
-  App.on('before:start', function() {
+  App.on('before:start', function (App, options) {
     App.registerBlockType('social', {
       blockModel: Module.SocialBlockModel,
-      blockView: Module.SocialBlockView,
+      blockView: Module.SocialBlockView
     });
 
     App.registerWidget({
       name: 'social',
       widgetView: Module.SocialWidgetView,
-      priority: 95,
+      priority: 95
     });
   });
 

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

@@ -2,101 +2,101 @@
  * Spacer content block
  */
 define([
-    'newsletter_editor/App',
-    'newsletter_editor/blocks/base',
-    'underscore'
-  ], function(App, BaseBlock, _) {
+  'newsletter_editor/App',
+  'newsletter_editor/blocks/base',
+  'underscore'
+], function (App, BaseBlock, _) {
 
-  "use strict";
+  'use strict';
 
   var Module = {},
-      base = BaseBlock;
+    base = BaseBlock;
 
   Module.SpacerBlockModel = base.BlockModel.extend({
-    defaults: function() {
+    defaults: function () {
       return this._getDefaults({
         type: 'spacer',
         styles: {
           block: {
             backgroundColor: 'transparent',
-            height: '40px',
-          },
-        },
+            height: '40px'
+          }
+        }
       }, App.getConfig().get('blockDefaults.spacer'));
-    },
+    }
   });
 
   Module.SpacerBlockView = base.BlockView.extend({
-    className: "mailpoet_block mailpoet_spacer_block mailpoet_droppable_block",
-    getTemplate: function() { return templates.spacerBlock; },
+    className: 'mailpoet_block mailpoet_spacer_block mailpoet_droppable_block',
+    getTemplate: function () { return window.templates.spacerBlock; },
     behaviors: _.defaults({
       ResizableBehavior: {
         elementSelector: '.mailpoet_spacer',
         resizeHandleSelector: '.mailpoet_resize_handle',
         minLength: 20, // TODO: Move this number to editor configuration
-        modelField: 'styles.block.height',
+        modelField: 'styles.block.height'
       },
       ShowSettingsBehavior: {
         ignoreFrom: '.mailpoet_resize_handle'
-      },
+      }
     }, base.BlockView.prototype.behaviors),
     modelEvents: _.omit(base.BlockView.prototype.modelEvents, 'change'),
-    onDragSubstituteBy: function() { return Module.SpacerWidgetView; },
-    initialize: function() {
+    onDragSubstituteBy: function () { return Module.SpacerWidgetView; },
+    initialize: function () {
       base.BlockView.prototype.initialize.apply(this, arguments);
 
       this.listenTo(this.model, 'change:styles.block.backgroundColor', this.render);
       this.listenTo(this.model, 'change:styles.block.height', this.changeHeight);
     },
-    onRender: function() {
+    onRender: function () {
       this.toolsView = new Module.SpacerBlockToolsView({ model: this.model });
-      this.toolsRegion.show(this.toolsView);
+      this.showChildView('toolsRegion', this.toolsView);
     },
-    changeHeight: function() {
+    changeHeight: function () {
       this.$('.mailpoet_spacer').css('height', this.model.get('styles.block.height'));
       this.$('.mailpoet_resize_handle_text').text(this.model.get('styles.block.height'));
     },
-    onBeforeDestroy: function() {
+    onBeforeDestroy: function () {
       this.stopListening(this.model);
-    },
+    }
   });
 
   Module.SpacerBlockToolsView = base.BlockToolsView.extend({
-    getSettingsView: function() { return Module.SpacerBlockSettingsView; },
+    getSettingsView: function () { return Module.SpacerBlockSettingsView; }
   });
 
   Module.SpacerBlockSettingsView = base.BlockSettingsView.extend({
-    getTemplate: function() { return templates.spacerBlockSettings; },
-    events: function() {
+    getTemplate: function () { return window.templates.spacerBlockSettings; },
+    events: function () {
       return {
-        "change .mailpoet_field_spacer_background_color": _.partial(this.changeColorField, "styles.block.backgroundColor"),
-        "click .mailpoet_done_editing": "close",
+        'change .mailpoet_field_spacer_background_color': _.partial(this.changeColorField, 'styles.block.backgroundColor'),
+        '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,
-        drop: function() {
+        drop: function () {
           return new Module.SpacerBlockModel();
-        },
+        }
       }
-    },
+    }
   });
 
-  App.on('before:start', function() {
+  App.on('before:start', function (App, options) {
     App.registerBlockType('spacer', {
       blockModel: Module.SpacerBlockModel,
-      blockView: Module.SpacerBlockView,
+      blockView: Module.SpacerBlockView
     });
 
     App.registerWidget({
       name: 'spacer',
       widgetView: Module.SpacerWidgetView,
-      priority: 94,
+      priority: 94
     });
   });
 

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

@@ -2,114 +2,108 @@
  * Text content block
  */
 define([
-    'newsletter_editor/App',
-    'newsletter_editor/blocks/base',
-    'underscore'
-  ], function(App, BaseBlock, _) {
+  'newsletter_editor/App',
+  'newsletter_editor/blocks/base',
+  'underscore',
+  'mailpoet'
+], function (App, BaseBlock, _, MailPoet) {
 
-  "use strict";
+  'use strict';
 
   var Module = {},
-      base = BaseBlock;
+    base = BaseBlock;
 
   Module.TextBlockModel = base.BlockModel.extend({
-    defaults: function() {
+    defaults: function () {
       return this._getDefaults({
         type: 'text',
-        text: 'Edit this to insert text',
+        text: 'Edit this to insert text'
       }, App.getConfig().get('blockDefaults.text'));
-    },
+    }
   });
 
   Module.TextBlockView = base.BlockView.extend({
-    className: "mailpoet_block mailpoet_text_block mailpoet_droppable_block",
-    getTemplate: function() { return templates.textBlock; },
+    className: 'mailpoet_block mailpoet_text_block mailpoet_droppable_block',
+    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",
-        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]",
-        invalidElements: "script",
+        toolbar1: 'formatselect bold italic forecolor | link unlink',
+        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]',
+        invalidElements: 'script',
         blockFormats: 'Heading 1=h1;Heading 2=h2;Heading 3=h3;Paragraph=p',
-        plugins: "link code textcolor colorpicker mailpoet_shortcodes",
-        configurationFilter: function(originalSettings) {
+        plugins: 'link lists code textcolor colorpicker mailpoet_shortcodes paste',
+        configurationFilter: function (originalSettings) {
           return _.extend({}, originalSettings, {
             mailpoet_shortcodes: App.getConfig().get('shortcodes').toJSON(),
-            mailpoet_shortcodes_window_title: MailPoet.I18n.t('shortcodesWindowTitle'),
+            mailpoet_shortcodes_window_title: MailPoet.I18n.t('shortcodesWindowTitle')
           });
         }
-      },
+      }
     }),
-    initialize: function(options) {
+    initialize: function (options) {
       base.BlockView.prototype.initialize.apply(this, arguments);
 
       this.renderOptions = _.defaults(options.renderOptions || {}, {
-        disableTextEditor: false,
+        disableTextEditor: false
       });
 
       this.disableTextEditor = this.renderOptions.disableTextEditor;
     },
-    onDragSubstituteBy: function() { return Module.TextWidgetView; },
-    onRender: function() {
+    onDragSubstituteBy: function () { return Module.TextWidgetView; },
+    onRender: function () {
       this.toolsView = new Module.TextBlockToolsView({
         model: this.model,
         tools: {
-          settings: false,
-        },
+          settings: false
+        }
       });
-      this.toolsRegion.show(this.toolsView);
+      this.showChildView('toolsRegion', this.toolsView);
     },
-    onTextEditorChange: function(newContent) {
+    onTextEditorChange: function (newContent) {
       this.model.set('text', newContent);
     },
-    onTextEditorFocus: function() {
+    onTextEditorFocus: function () {
       this.disableDragging();
       this.disableShowingTools();
     },
-    onTextEditorBlur: function() {
+    onTextEditorBlur: function () {
       this.enableDragging();
       this.enableShowingTools();
-    },
-
-    disableDragging: function() {
-      this.$('.mailpoet_content').addClass('mailpoet_ignore_drag');
-    },
-    enableDragging: function() {
-      this.$('.mailpoet_content').removeClass('mailpoet_ignore_drag');
-    },
+    }
   });
 
   Module.TextBlockToolsView = base.BlockToolsView.extend({
-    getSettingsView: function() { return Module.TextBlockSettingsView; },
+    getSettingsView: function () { return Module.TextBlockSettingsView; }
   });
 
   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,
-        drop: function() {
+        drop: function () {
           return new Module.TextBlockModel();
-        },
+        }
       }
-    },
+    }
   });
 
-  App.on('before:start', function() {
+  App.on('before:start', function (App, options) {
     App.registerBlockType('text', {
       blockModel: Module.TextBlockModel,
-      blockView: Module.TextBlockView,
+      blockView: Module.TextBlockView
     });
 
     App.registerWidget({
       name: 'text',
       widgetView: Module.TextWidgetView,
-      priority: 90,
+      priority: 90
     });
   });
 

assets/js/src/newsletter_editor/communicationsFix.js

@@ -6,9 +6,9 @@
  * Courtesy of https://gist.github.com/jmeas/7992474cdb1c5672d88b
  */
 
-(function(root, factory) {
+(function (root, factory) {
   if (typeof define === 'function' && define.amd) {
-    define(['backbone.marionette', 'backbone.radio', 'underscore'], function(Marionette, Radio, _) {
+    define(['backbone.marionette', 'backbone.radio', 'underscore'], function (Marionette, Radio, _) {
       return factory(Marionette, Radio, _);
     });
   }
@@ -21,10 +21,11 @@
   else {
     factory(root.Backbone.Marionette, root.Backbone.Radio, root._);
   }
-}(this, function(Marionette, Radio, _) {
+}(this, function (Marionette, Radio, _) {
   'use strict';
 
-  Marionette.Application.prototype._initChannel = function () {
+  var MarionetteApplication = Marionette.Application;
+  MarionetteApplication.prototype._initChannel = function () {
     this.channelName = _.result(this, 'channelName') || 'global';
     this.channel = _.result(this, 'channel') || Radio.channel(this.channelName);
   };

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

@@ -1,14 +1,15 @@
 define([
-    'newsletter_editor/App',
-    'underscore',
-    'mailpoet',
-    'ajax'
-  ], function(App, _, MailPoet) {
+  'newsletter_editor/App',
+  'underscore',
+  'mailpoet',
+  'ajax'
+], function (App, _, MailPoet) {
 
   var Module = {};
 
-  Module._query = function(args) {
+  Module._query = function (args) {
     return MailPoet.Ajax.post({
+      api_version: window.mailpoet_api_version,
       endpoint: 'automatedLatestContent',
       action: args.action,
       data: args.options || {}
@@ -16,86 +17,88 @@ define([
   };
   Module._cachedQuery = _.memoize(Module._query, JSON.stringify);
 
-  Module.getNewsletter = function(options) {
+  Module.getNewsletter = function (options) {
     return Module._query({
       action: 'get',
       options: options
     });
   };
 
-  Module.getPostTypes = function() {
+  Module.getPostTypes = function () {
     return Module._cachedQuery({
       action: 'getPostTypes',
       options: {}
-    }).then(function(response) {
+    }).then(function (response) {
       return _.values(response.data);
     });
   };
 
-  Module.getTaxonomies = function(postType) {
+  Module.getTaxonomies = function (postType) {
     return Module._cachedQuery({
       action: 'getTaxonomies',
       options: {
         postType: postType
       }
-    }).then(function(response) {
+    }).then(function (response) {
       return response.data;
     });
   };
 
-  Module.getTerms = function(options) {
+  Module.getTerms = function (options) {
     return Module._cachedQuery({
       action: 'getTerms',
       options: options
-    }).then(function(response) {
+    }).then(function (response) {
       return response.data;
     });
   };
 
-  Module.getPosts = function(options) {
+  Module.getPosts = function (options) {
     return Module._cachedQuery({
       action: 'getPosts',
       options: options
-    }).then(function(response) {
+    }).then(function (response) {
       return response.data;
     });
   };
 
-  Module.getTransformedPosts = function(options) {
+  Module.getTransformedPosts = function (options) {
     return Module._cachedQuery({
       action: 'getTransformedPosts',
       options: options
-    }).then(function(response) {
+    }).then(function (response) {
       return response.data;
     });
   };
 
-  Module.getBulkTransformedPosts = function(options) {
+  Module.getBulkTransformedPosts = function (options) {
     return Module._query({
       action: 'getBulkTransformedPosts',
       options: options
-    }).then(function(response) {
+    }).then(function (response) {
       return response.data;
     });
   };
 
-  Module.saveNewsletter = function(options) {
+  Module.saveNewsletter = function (options) {
     return MailPoet.Ajax.post({
+      api_version: window.mailpoet_api_version,
       endpoint: 'newsletters',
       action: 'save',
       data: options || {}
     });
   };
 
-  Module.previewNewsletter = function(options) {
+  Module.previewNewsletter = function (options) {
     return MailPoet.Ajax.post({
+      api_version: window.mailpoet_api_version,
       endpoint: 'newsletters',
       action: 'sendPreview',
       data: options || {}
     });
   };
 
-  App.on('start', function(options) {
+  App.on('start', function (App, options) {
     // Prefetch post types
     Module.getPostTypes();
   });

assets/js/src/newsletter_editor/components/config.js

@@ -1,7 +1,7 @@
 define([
-    'newsletter_editor/App',
-    'backbone.supermodel'
-  ], function(App, SuperModel) {
+  'newsletter_editor/App',
+  'backbone.supermodel'
+], function (App, SuperModel) {
 
   var Module = {};
 
@@ -12,24 +12,25 @@ define([
       blockDefaults: {},
       sidepanelWidth: '331px',
       validation: {},
-      urls: {},
-    },
+      urls: {}
+    }
   });
 
   // Global and available styles for access in blocks and their settings
   Module._config = {};
-  Module.getConfig = function() { return Module._config; };
-  Module.setConfig = function(options) {
+  Module.getConfig = function () { return Module._config; };
+  Module.setConfig = function (options) {
     Module._config = new Module.ConfigModel(options, { parse: true });
     return Module._config;
   };
 
-  App.on('before:start', function(options) {
+  App.on('before:start', function (App, options) {
+    var Application = App;
     // Expose config methods globally
-    App.getConfig = Module.getConfig;
-    App.setConfig = Module.setConfig;
+    Application.getConfig = Module.getConfig;
+    Application.setConfig = Module.setConfig;
 
-    App.setConfig(options.config);
+    Application.setConfig(options.config);
   });
 
   return Module;