Release 3.0.0-rc.2.0.3

Removes escape character in translations [MAILPOET-1093]

.eslintrc.es5.json

@@ -9,14 +9,8 @@
   },
   "rules": {
     "import/no-amd": 0,
-
-
-
-
-
     "space-before-function-paren": 0,
     "prefer-arrow-callback": 0,
-    "no-undef": 0,
     "key-spacing": 0,
     "radix": 0,
     "no-alert": 0,
@@ -24,11 +18,9 @@
     "guard-for-in": 0,
     "no-prototype-builtins": 0,
     "no-restricted-syntax": 0,
-    "newline-per-chained-call": 0,
     "no-useless-concat": 0,
     "no-multi-spaces": 0,
     "no-nested-ternary": 0,
-    "semi-spacing": 0,
     "no-sequences": 0,
     "no-useless-return": 0,
     "array-callback-return": 0,
@@ -39,24 +31,18 @@
     "no-redeclare": 0,
     "no-console": 0,
     "no-empty": 0,
-    "no-extra-semi": 0,
     "no-useless-escape": 0,
     "wrap-iife": 0,
-    "no-unused-expressions": 0,
     "block-spacing": 0,
     "computed-property-spacing": 0,
     "no-plusplus": 0,
     "array-bracket-spacing": 0,
-    "lines-around-directive": 0,
-    "no-unreachable": 0,
     "default-case": 0,
     "no-lonely-if": 0,
     "space-before-blocks": 0,
-    "no-unneeded-ternary": 0,
     "no-mixed-operators": 0,
     "eqeqeq": 0,
     "space-in-parens": 0,
-    "semi": 0,
     "max-len": 0,
     "no-trailing-spaces": 0,
     "global-require": 0,
@@ -72,7 +58,6 @@
     "one-var": 0,
     "camelcase": 0,
     "spaced-comment": 0,
-    "quotes": 0,
     "padded-blocks": 0,
     "object-curly-spacing": 0,
     "strict": 0,
@@ -85,9 +70,6 @@
     "keyword-spacing": 0,
     "eol-last": 0,
     "dot-notation": 0,
-    "linebreak-style": 0,
-    "indent": 0,
-    "quote-props": 0,
     "prefer-template": 0,
     "func-names": 0
   }

.eslintrc.es6.json

@@ -10,24 +10,21 @@
       "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/jsx-indent-props": 0,
     "react/no-is-mounted": 0,
     "react/jsx-no-target-blank": 0,
     "react/no-render-return-value": 0,
     "react/jsx-boolean-value": 0,
-    "react/jsx-indent": 0,
     "react/jsx-no-bind": 0,
     "react/no-array-index-key": 0,
     "react/self-closing-comp": 0,
@@ -37,11 +34,9 @@
     "react/jsx-curly-spacing": 0,
     "react/no-did-mount-set-state": 0,
     "react/prefer-stateless-function": 0,
-
     "jsx-a11y/label-has-for": 0,
     "jsx-a11y/no-static-element-interactions": 0,
     "jsx-a11y/alt-text": 0,
-
     "func-names": 0,
     "object-shorthand": 0,
     "no-bitwise": 0,
@@ -49,17 +44,12 @@
     "prefer-template": 0,
     "keyword-spacing": 0,
     "default-case": 0,
-    "quote-props": 0,
     "array-callback-return": 0,
     "consistent-return": 0,
-    "no-unreachable": 0,
-    "no-extra-semi": 0,
-    "import/no-unresolved": 0,
     "import/extensions": 0,
     "import/no-extraneous-dependencies": 0,
     "camelcase": 0,
     "template-curly-spacing": 0,
-    "quotes": 0,
     "eqeqeq": 0,
     "no-lonely-if": 0,
     "space-unary-ops": 0,
@@ -68,15 +58,12 @@
     "no-multi-spaces": 0,
     "class-methods-use-this": 0,
     "key-spacing": 0,
-    "no-multiple-empty-lines": 0,
     "space-in-parens": 0,
     "no-case-declarations": 0,
     "array-bracket-spacing": 0,
-    "newline-per-chained-call": 0,
     "no-else-return": 0,
     "max-len": 0,
     "no-useless-concat": 0,
-    "no-unused-expressions": 0,
     "no-sequences": 0,
     "no-extra-boolean-cast": 0,
     "dot-notation": 0,
@@ -90,7 +77,6 @@
     "space-infix-ops": 0,
     "no-irregular-whitespace": 0,
     "padded-blocks": 0,
-    "no-underscore-dangle": 0,
-    "no-undef": 0
+    "no-underscore-dangle": 0
   }
 }

.eslintrc.tests.json

@@ -9,29 +9,17 @@
   },
   "rules": {
     "import/no-amd": 0,
-
-
-
-    "no-undef": 0,
     "one-var": 0,
-    "indent": 0,
-    "linebreak-style": 0,
     "no-whitespace-before-property": 0,
-    "object-property-newline": 0,
     "global-require": 0,
-    "semi": 0,
     "keyword-spacing": 0,
     "no-bitwise": 0,
-    "newline-per-chained-call": 0,
     "no-spaced-func": 0,
     "func-call-spacing": 0,
     "max-len": 0,
     "space-unary-ops": 0,
-    "quotes": 0,
     "no-unused-vars": 0,
-    "no-unused-expressions": 0,
     "no-underscore-dangle": 0,
-    "quote-props": 0,
     "no-shadow": 0,
     "padded-blocks": 0,
     "vars-on-top": 0,

RoboFile.php

@@ -154,7 +154,6 @@ class RoboFile extends \Robo\Tasks {
 
   function testUnit($opts=['file' => null, 'xml' => false]) {
     $this->loadEnv();
-    $this->_exec('vendor/bin/codecept build -c codeception.unit.yml');
 
     $command = 'vendor/bin/codecept run unit -c codeception.unit.yml -f '.(($opts['file']) ? $opts['file'] : '');
 
@@ -166,9 +165,8 @@ class RoboFile extends \Robo\Tasks {
 
   function testCoverage($opts=['file' => null, 'xml' => false]) {
     $this->loadEnv();
-    $this->_exec('vendor/bin/codecept build -c codeception.unit.yml');
     $command = join(' ', array(
-      'vendor/bin/codecept run -c codeception.unit.yml ',
+      'vendor/bin/codecept run unit -c codeception.unit.yml ',
       (($opts['file']) ? $opts['file'] : ''),
       '--coverage',
       ($opts['xml']) ? '--coverage-xml' : '--coverage-html'

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

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

assets/js/src/admin.js

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

assets/js/src/ajax.js

@@ -2,7 +2,7 @@ function requestFailed(errorMessage, xhr) {
   if (xhr.responseJSON) {
     return xhr.responseJSON;
   }
-  var message = errorMessage.replace("%d", xhr.status);
+  var message = errorMessage.replace('%d', xhr.status);
   return {
     errors: [
       {
@@ -35,7 +35,7 @@ define('ajax', ['mailpoet', 'jquery', 'underscore'], function(mp, jQuery, _) {
 
       // set default url
       if(this.options.url === null) {
-          this.options.url = ajaxurl;
+        this.options.url = window.ajaxurl;
       }
 
       // set default token

assets/js/src/analytics_event.js

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

assets/js/src/date.js

@@ -166,4 +166,4 @@ define('date',
         return convertedFormat.join('');
       }
     };
-});
+  });

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

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

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

@@ -7,6 +7,7 @@ define([
   'form/fields/checkbox.jsx',
   'form/fields/selection.jsx',
   'form/fields/date.jsx',
+  'jquery',
 ],
 (
   React,
@@ -16,7 +17,8 @@ define([
   FormFieldRadio,
   FormFieldCheckbox,
   FormFieldSelection,
-  FormFieldDate
+  FormFieldDate,
+  jQuery
 ) => {
   const FormField = React.createClass({
     renderField: function (data, inline = false) {

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

@@ -116,6 +116,7 @@ define([
       }
     },
     handleChange: function (e) {
+      let value;
       if(this.props.onValueChange !== undefined) {
         if(this.props.field.multiple) {
           value = jQuery('#'+this.refs.select.id).val();

assets/js/src/form/form.jsx

@@ -5,13 +5,15 @@ define(
     'classnames',
     'react-router',
     'form/fields/field.jsx',
+    'jquery',
   ],
   (
     React,
     MailPoet,
     classNames,
     Router,
-    FormField
+    FormField,
+    jQuery
   ) => {
 
     const Form = React.createClass({
@@ -166,7 +168,7 @@ define(
 
         const formClasses = classNames(
           'mailpoet_form',
-          { 'mailpoet_form_loading': this.state.loading || this.props.loading }
+          { mailpoet_form_loading: this.state.loading || this.props.loading }
         );
 
         let beforeFormContent = false;

assets/js/src/form_editor/form_editor.js

@@ -4,6 +4,7 @@
  * company: Wysija
  * framework: prototype 1.7.2
  */
+
 'use strict';
 
 Event.cacheDelegated = {};
@@ -24,14 +25,14 @@ Object.extend(document, (function() {
   function findWrapper(selector, eventName, handler) {
     var c = getWrappersForSelector(selector, eventName);
     return c.find(function(wrapper) {
-      return wrapper.handler === handler
+      return wrapper.handler === handler;
     });
   }
 
   function destroyWrapper(selector, eventName, handler) {
     var c = getCacheForSelector(selector);
     if(!c[eventName]) return false;
-    var wrapper = findWrapper(selector, eventName, handler)
+    var wrapper = findWrapper(selector, eventName, handler);
     c[eventName] = c[eventName].without(wrapper);
     return wrapper;
   }
@@ -77,7 +78,7 @@ Object.extend(document, (function() {
       }
       return document;
     }
-  }
+  };
 })());
 
 var Observable = (function() {
@@ -90,7 +91,7 @@ var Observable = (function() {
   function getHandlers(klass) {
     var proto = klass.prototype,
       namespace = proto.namespace;
-    return Object.keys(proto).grep(/^on/).inject($H(), function(handlers, name) {
+    return Object.keys(proto).grep(/^on/).inject(window.$H(), function(handlers, name) {
       if(name === 'onDomLoaded') return handlers;
       handlers.set(getEventName(name, namespace), getWrapper(proto[name], klass));
       return handlers;
@@ -100,11 +101,11 @@ var Observable = (function() {
   function getWrapper(handler, klass) {
     return function(event) {
       return handler.call(new klass(this), event, event.memo);
-    }
+    };
   }
 
   function onDomLoad(selector, klass) {
-    $$(selector).each(function(element) {
+    window.$$(selector).each(function(element) {
       new klass(element).onDomLoaded();
     });
   }
@@ -113,7 +114,13 @@ var Observable = (function() {
       if(!this.handlers) this.handlers = {};
       if(this.handlers[selector]) return;
       var klass = this;
-      if(this.prototype.onDomLoaded) document.loaded ? onDomLoad(selector, klass) : document.observe('dom:loaded', onDomLoad.curry(selector, klass));
+      if(this.prototype.onDomLoaded) {
+        if(document.loaded) {
+          onDomLoad(selector, klass);
+        } else {
+          document.observe('dom:loaded', onDomLoad.curry(selector, klass));
+        }
+      }
       this.handlers[selector] = getHandlers(klass).each(function(handler) {
         document.delegate(selector, handler.key, handler.value);
       });
@@ -125,16 +132,16 @@ var Observable = (function() {
       });
       delete this.handlers[selector];
     }
-  }
+  };
 })();
 
 // override droppables
-Object.extend(Droppables, {
-  deactivate: Droppables.deactivate.wrap(function(proceed, drop, draggable) {
+Object.extend(window.Droppables, {
+  deactivate: window.Droppables.deactivate.wrap(function(proceed, drop, draggable) {
     if(drop.onLeave) drop.onLeave(draggable, drop.element);
     return proceed(drop);
   }),
-  activate: Droppables.activate.wrap(function(proceed, drop, draggable) {
+  activate: window.Droppables.activate.wrap(function(proceed, drop, draggable) {
     if(drop.onEnter) drop.onEnter(draggable, drop.element);
     return proceed(drop);
   }),
@@ -142,14 +149,14 @@ Object.extend(Droppables, {
     if(!this.drops.length) return;
     var drop, affected = [];
     this.drops.each(function(drop) {
-      if(Droppables.isAffected(point, element, drop)) affected.push(drop);
+      if(window.Droppables.isAffected(point, element, drop)) affected.push(drop);
     });
-    if(affected.length > 0) drop = Droppables.findDeepestChild(affected);
+    if(affected.length > 0) drop = window.Droppables.findDeepestChild(affected);
     if(this.last_active && this.last_active !== drop) this.deactivate(this.last_active, element);
     if(drop) {
-      Position.within(drop.element, point[0], point[1]);
-      if(drop.onHover) drop.onHover(element, drop.element, Position.overlap(drop.overlap, drop.element));
-      if(drop !== this.last_active) Droppables.activate(drop, element);
+      window.Position.within(drop.element, point[0], point[1]);
+      if(drop.onHover) drop.onHover(element, drop.element, window.Position.overlap(drop.overlap, drop.element));
+      if(drop !== this.last_active) window.Droppables.activate(drop, element);
     }
   },
   displayArea: function(draggable) {
@@ -198,36 +205,36 @@ var WysijaHistory = {
     // check if the field is unique
     if(parseInt(clone.readAttribute('wysija_unique'), 10) === 1) {
       // check if the field is already in the queue
-      $(WysijaHistory.container).select('[wysija_name="' + clone.readAttribute('wysija_name') + '"]').invoke('remove');
+      window.$(WysijaHistory.container).select('[wysija_name="' + clone.readAttribute('wysija_name') + '"]').invoke('remove');
     }
 
     // check history size
-    if($(WysijaHistory.container).select('> div').length >= WysijaHistory.size) {
+    if(window.$(WysijaHistory.container).select('> div').length >= WysijaHistory.size) {
       // remove oldest element (last in the list)
-      $(WysijaHistory.container).select('> div').last().remove();
+      window.$(WysijaHistory.container).select('> div').last().remove();
     }
 
     // store block in history
-    $(WysijaHistory.container).insert({
+    window.$(WysijaHistory.container).insert({
       top: clone
     });
   },
   dequeue: function() {
     // pop last block off the history
-    var block = $(WysijaHistory.container).select('div').first();
+    var block = window.$(WysijaHistory.container).select('div').first();
 
     if(block !== undefined) {
       // insert block back into the editor
-      $(WysijaForm.options.body).insert({
+      window.$(WysijaForm.options.body).insert({
         top: block
       });
     }
   },
   clear: function() {
-    $(WysijaHistory.container).innerHTML = '';
+    window.$(WysijaHistory.container).innerHTML = '';
   },
   remove: function(field) {
-    $(WysijaHistory.container).select('[wysija_name="' + field + '"]').invoke('remove');
+    window.$(WysijaHistory.container).select('[wysija_name="' + field + '"]').invoke('remove');
   }
 };
 
@@ -271,17 +278,17 @@ var WysijaForm = {
   },
   loading: function(is_loading) {
     if(is_loading) {
-      $(WysijaForm.options.editor).addClassName('loading');
-      $(WysijaForm.options.toolbar).addClassName('loading');
+      window.$(WysijaForm.options.editor).addClassName('loading');
+      window.$(WysijaForm.options.toolbar).addClassName('loading');
     } else {
-      $(WysijaForm.options.editor).removeClassName('loading');
-      $(WysijaForm.options.toolbar).removeClassName('loading');
+      window.$(WysijaForm.options.editor).removeClassName('loading');
+      window.$(WysijaForm.options.toolbar).removeClassName('loading');
     }
   },
   loadStatic: function(blocks) {
-    $A(blocks).each(function(block) {
+    window.$A(blocks).each(function(block) {
       // create block
-      WysijaForm.Block.create(block, $('block_placeholder'));
+      WysijaForm.Block.create(block, window.$('block_placeholder'));
     });
   },
   load: function(data) {
@@ -289,13 +296,13 @@ var WysijaForm = {
 
     // load body
     if(data.body !== undefined) {
-      $A(data.body).each(function(block) {
+      window.$A(data.body).each(function(block) {
         // create block
-        WysijaForm.Block.create(block, $('block_placeholder'));
+        WysijaForm.Block.create(block, window.$('block_placeholder'));
       });
 
       // load settings
-      var settings_elements = $('mailpoet_form_settings').getElements();
+      var settings_elements = window.$('mailpoet_form_settings').getElements();
       settings_elements.each(function(setting) {
         // skip lists
         if(setting.name === 'segments') {
@@ -304,7 +311,7 @@ var WysijaForm = {
           // if the input value is equal to the one stored in the settings
           if(setting.value === data.settings[setting.name]) {
             // check selected value
-            $(setting).checked = true;
+            window.$(setting).checked = true;
           }
         } else if(data.settings[setting.name] !== undefined) {
           if(typeof data.settings[setting.name] === 'string') {
@@ -319,10 +326,10 @@ var WysijaForm = {
   save: function() {
     var position = 1,
       data = {
-        'name': $F('mailpoet_form_name'),
-        'settings': $('mailpoet_form_settings').serialize(true),
-        'body': [],
-        'styles': (MailPoet.CodeEditor !== undefined) ? MailPoet.CodeEditor.getValue() : null
+        name: window.$F('mailpoet_form_name'),
+        settings: window.$('mailpoet_form_settings').serialize(true),
+        body: [],
+        styles: (window.MailPoet.CodeEditor !== undefined) ? window.MailPoet.CodeEditor.getValue() : null
       };
     // body
     WysijaForm.getBlocks().each(function(b) {
@@ -394,11 +401,11 @@ var WysijaForm = {
     return data;
   },
   toggleWidgets: function() {
-    $$('a[wysija_unique="1"]').invoke('removeClassName', 'disabled');
+    window.$$('a[wysija_unique="1"]').invoke('removeClassName', 'disabled');
 
     // loop through each unique field already inserted in the editor and disable its toolbar equivalent
-    $$('#' + WysijaForm.options.editor + ' [wysija_unique="1"]').map(function(element) {
-      var field = $$('#' + WysijaForm.options.toolbar + ' [wysija_id="' + element.readAttribute('wysija_id') + '"]');
+    window.$$('#' + WysijaForm.options.editor + ' [wysija_unique="1"]').map(function(element) {
+      var field = window.$$('#' + WysijaForm.options.toolbar + ' [wysija_id="' + element.readAttribute('wysija_id') + '"]');
       if(field.length > 0) {
         field.first().addClassName('disabled');
       }
@@ -407,18 +414,18 @@ var WysijaForm = {
     var hasSegmentSelection = WysijaForm.hasSegmentSelection();
 
     if(hasSegmentSelection) {
-      $('mailpoet_form_segments').writeAttribute('required', false).disable();
-      $('mailpoet_settings_segment_selection').hide();
+      window.$('mailpoet_form_segments').writeAttribute('required', false).disable();
+      window.$('mailpoet_settings_segment_selection').hide();
     } else {
-      $('mailpoet_form_segments').writeAttribute('required', true).enable();
-      $('mailpoet_settings_segment_selection').show();
+      window.$('mailpoet_form_segments').writeAttribute('required', true).enable();
+      window.$('mailpoet_settings_segment_selection').show();
     }
   },
   hasSegmentSelection: function() {
-    return ($$('#' + WysijaForm.options.editor + ' [wysija_id="segments"]').length > 0);
+    return (window.$$('#' + WysijaForm.options.editor + ' [wysija_id="segments"]').length > 0);
   },
   isSegmentSelectionValid: function() {
-    var segment_selection = $$('#' + WysijaForm.options.editor + ' [wysija_id="segments"]')[0];
+    var segment_selection = window.$$('#' + WysijaForm.options.editor + ' [wysija_id="segments"]')[0];
     if(segment_selection !== undefined) {
       var block = WysijaForm.get(segment_selection).block.getData();
       return (
@@ -446,7 +453,7 @@ var WysijaForm = {
 
     if(target !== undefined) {
       // get placeholders (previous placeholder matches the placeholder linked to the next block)
-      var block_placeholder = $(target.element.readAttribute('wysija_placeholder')),
+      var block_placeholder = window.$(target.element.readAttribute('wysija_placeholder')),
         previous_placeholder = target.element.previous('.block_placeholder');
 
       if(block_placeholder !== null) {
@@ -468,18 +475,18 @@ var WysijaForm = {
     WysijaForm.scroll = document.viewport.getScrollOffsets();
   },
   hideSettings: function() {
-    $(WysijaForm.options.container).select('.wysija_settings').invoke('hide');
+    window.$(WysijaForm.options.container).select('.wysija_settings').invoke('hide');
   },
   setSettingsPosition: function() {
     // get viewport offsets and dimensions
     var viewportHeight = document.viewport.getHeight(),
       blockPadding = 5;
 
-    $(WysijaForm.options.container).select('.wysija_settings').each(function(element) {
+    window.$(WysijaForm.options.container).select('.wysija_settings').each(function(element) {
       // get parent dimensions and position
       var parentDim = element.up('.mailpoet_form_block').getDimensions(),
         parentPos = element.up('.mailpoet_form_block').cumulativeOffset(),
-        is_visible = (parentPos.top <= (WysijaForm.scroll.top + viewportHeight)) ? true : false,
+        is_visible = (parentPos.top <= (WysijaForm.scroll.top + viewportHeight)),
         buttonMargin = 5,
         relativeTop = buttonMargin;
 
@@ -493,22 +500,22 @@ var WysijaForm = {
         relativeTop = parseInt((parentDim.height / 2) - (element.getHeight() / 2), 10);
       }
       // set position for button
-      $(element).setStyle({
+      window.$(element).setStyle({
         left: parseInt((parentDim.width / 2) - (element.getWidth() / 2)) + 'px',
         top: relativeTop + 'px'
       });
     });
   },
   initToolbarPosition: function() {
-    if(WysijaForm.toolbar.top === null) WysijaForm.toolbar.top = parseInt($(WysijaForm.options.container).positionedOffset().top);
+    if(WysijaForm.toolbar.top === null) WysijaForm.toolbar.top = parseInt(window.$(WysijaForm.options.container).positionedOffset().top);
     if(WysijaForm.toolbar.y === null) WysijaForm.toolbar.y = parseInt(WysijaForm.toolbar.top);
 
-    if(isRtl) {
+    if(window.isRtl) {
       if(WysijaForm.toolbar.left === null) WysijaForm.toolbar.left = 0;
     } else {
-      if(WysijaForm.toolbar.left === null) WysijaForm.toolbar.left = parseInt($(WysijaForm.options.container).positionedOffset().left);
+      if(WysijaForm.toolbar.left === null) WysijaForm.toolbar.left = parseInt(window.$(WysijaForm.options.container).positionedOffset().left);
     }
-    if(WysijaForm.toolbar.x === null) WysijaForm.toolbar.x = parseInt(WysijaForm.toolbar.left + $(WysijaForm.options.container).getDimensions().width + 15);
+    if(WysijaForm.toolbar.x === null) WysijaForm.toolbar.x = parseInt(WysijaForm.toolbar.left + window.$(WysijaForm.options.container).getDimensions().width + 15);
 
   },
   setToolbarPosition: function() {
@@ -519,13 +526,13 @@ var WysijaForm = {
       visibility: 'visible'
     };
 
-    if(isRtl) {
+    if(window.isRtl) {
       position.right = WysijaForm.toolbar.x + 'px';
     } else {
       position.left = WysijaForm.toolbar.x + 'px';
     }
 
-    $(WysijaForm.options.toolbar).setStyle(position);
+    window.$(WysijaForm.options.toolbar).setStyle(position);
   },
   updateToolbarPosition: function() {
     // init toolbar position (updates scroll and toolbar y)
@@ -537,31 +544,31 @@ var WysijaForm = {
     if(WysijaForm.scroll.top >= (WysijaForm.toolbar.top - 20)) {
       WysijaForm.toolbar.y = parseInt(20 + WysijaForm.scroll.top);
       // start effect
-      WysijaForm.toolbar.effect = new Effect.Move(WysijaForm.options.toolbar, {
+      WysijaForm.toolbar.effect = new window.Effect.Move(WysijaForm.options.toolbar, {
         x: WysijaForm.toolbar.x,
         y: WysijaForm.toolbar.y,
         mode: 'absolute',
         duration: 0.2
       });
     } else {
-      $(WysijaForm.options.toolbar).setStyle({
+      window.$(WysijaForm.options.toolbar).setStyle({
         left: WysijaForm.toolbar.x + 'px',
         top: WysijaForm.toolbar.top + 'px'
       });
     }
   },
   blockDropOptions: {
-    accept: $w('mailpoet_form_field'), // acceptable items (classes array)
+    accept: window.$w('mailpoet_form_field'), // acceptable items (classes array)
     onEnter: function(draggable, droppable) {
-      $(droppable).addClassName('hover');
+      window.$(droppable).addClassName('hover');
     },
     onLeave: function(draggable, droppable) {
-      $(droppable).removeClassName('hover');
+      window.$(droppable).removeClassName('hover');
     },
     onDrop: function(draggable, droppable) {
       // custom data for images
       droppable.fire('wjfe:item:drop', WysijaForm.getFieldData(draggable));
-      $(droppable).removeClassName('hover');
+      window.$(droppable).removeClassName('hover');
     }
   },
   hideControls: function() {
@@ -572,7 +579,7 @@ var WysijaForm = {
     }
   },
   hideTools: function() {
-    $$('.wysija_tools').invoke('hide');
+    window.$$('.wysija_tools').invoke('hide');
     WysijaForm.locks.showingTools = false;
   },
   instances: {},
@@ -587,11 +594,11 @@ var WysijaForm = {
     return instance;
   },
   makeDroppable: function() {
-    Droppables.add('block_placeholder', WysijaForm.blockDropOptions);
+    window.Droppables.add('block_placeholder', WysijaForm.blockDropOptions);
   },
   makeSortable: function() {
-    var body = $(WysijaForm.options.body);
-    Sortable.create(body, {
+    var body = window.$(WysijaForm.options.body);
+    window.Sortable.create(body, {
       tag: 'div',
       only: 'mailpoet_form_block',
       scroll: window,
@@ -599,15 +606,15 @@ var WysijaForm = {
       constraint: 'vertical'
 
     });
-    Draggables.removeObserver(body);
-    Draggables.addObserver({
+    window.Draggables.removeObserver(body);
+    window.Draggables.addObserver({
       element: body,
       onStart: WysijaForm.startBlockPositions,
       onEnd: WysijaForm.setBlockPositions
     });
   },
   hideBlockControls: function() {
-    $$('.wysija_controls').invoke('hide');
+    window.$$('.wysija_controls').invoke('hide');
     this.getBlockElements().invoke('removeClassName', 'hover');
   },
   getBlocks: function() {
@@ -616,7 +623,7 @@ var WysijaForm = {
     });
   },
   getBlockElements: function() {
-    return $(WysijaForm.options.container).select('.mailpoet_form_block');
+    return window.$(WysijaForm.options.container).select('.mailpoet_form_block');
   },
   startBlockPositions: function(event, target) {
     if(target.element.hasClassName('mailpoet_form_block')) {
@@ -664,14 +671,14 @@ var WysijaForm = {
   }
 };
 
-WysijaForm.DraggableItem = Class.create({
+WysijaForm.DraggableItem = window.Class.create({
   initialize: function(element) {
-    this.elementType = $(element).readAttribute('wysija_type');
-    this.element = $(element).down() || $(element);
+    this.elementType = window.$(element).readAttribute('wysija_type');
+    this.element = window.$(element).down() || window.$(element);
     this.clone = this.cloneElement();
     this.insert();
   },
-  STYLES: new Template('position: absolute; top: #{top}px; left: #{left}px;'),
+  STYLES: new window.Template('position: absolute; top: #{top}px; left: #{left}px;'),
   cloneElement: function() {
     var clone = this.element.clone(),
       offset = this.element.cumulativeOffset(),
@@ -694,27 +701,27 @@ WysijaForm.DraggableItem = Class.create({
     return this.element.up('ul');
   },
   insert: function() {
-    $$("body")[0].insert(this.clone);
+    window.$$('body')[0].insert(this.clone);
   },
   onMousedown: function(event) {
-    var draggable = new Draggable(this.clone, {
+    var draggable = new window.Draggable(this.clone, {
       scroll: window,
       onStart: function() {
-        Droppables.displayArea(draggable);
+        window.Droppables.displayArea(draggable);
       },
       onEnd: function(drag) {
         drag.destroy();
         drag.element.remove();
-        Droppables.hideArea();
+        window.Droppables.hideArea();
       },
       starteffect: function(element) {
-        new Effect.Opacity(element, {
+        new window.Effect.Opacity(element, {
           duration: 0.2,
           from: element.getOpacity(),
           to: 0.7
         });
       },
-      endeffect: Prototype.emptyFunction
+      endeffect: window.Prototype.emptyFunction
     });
     draggable.initDrag(event);
     draggable.startDrag(event);
@@ -724,12 +731,12 @@ WysijaForm.DraggableItem = Class.create({
 Object.extend(WysijaForm.DraggableItem, Observable).observe('a[class="mailpoet_form_field"]');
 
 
-WysijaForm.Block = Class.create({
+WysijaForm.Block = window.Class.create({
   /* Invoked on load */
   initialize: function(element) {
     info('block -> init');
 
-    this.element = $(element);
+    this.element = window.$(element);
     this.block = new WysijaForm.Widget(this.element);
 
     // enable block placeholder
@@ -755,21 +762,21 @@ WysijaForm.Block = Class.create({
       this.element.addClassName('hover');
       try {
         this.getControls().show();
-      } catch(e) {;
+      } catch(e) {
       }
     }
   },
   makeBlockDroppable: function() {
     if(this.isBlockDroppableEnabled() === false) {
       var block_placeholder = this.getBlockDroppable();
-      Droppables.add(block_placeholder.identify(), WysijaForm.blockDropOptions);
+      window.Droppables.add(block_placeholder.identify(), WysijaForm.blockDropOptions);
       block_placeholder.addClassName('enabled');
     }
   },
   removeBlockDroppable: function() {
     if(this.isBlockDroppableEnabled()) {
       var block_placeholder = this.getBlockDroppable();
-      Droppables.remove(block_placeholder.identify());
+      window.Droppables.remove(block_placeholder.identify());
       block_placeholder.removeClassName('enabled');
     }
   },
@@ -785,7 +792,7 @@ WysijaForm.Block = Class.create({
   createBlockDroppable: function() {
     info('block -> createBlockDroppable');
     this.element.insert({
-      before: '<div class=\"block_placeholder\">' + $('block_placeholder').innerHTML + '</div>'
+      before: '<div class=\"block_placeholder\">' + window.$('block_placeholder').innerHTML + '</div>'
     });
     return this.element.previous('.block_placeholder');
   },
@@ -850,7 +857,7 @@ WysijaForm.Block = Class.create({
       if(this.settingsButton !== null) {
         this.settingsButton.observe('click', function(event) {
           // TODO: refactor
-          var block = $(event.target).up('.mailpoet_form_block') || null;
+          var block = window.$(event.target).up('.mailpoet_form_block') || null;
           if(block !== null) {
             var field = WysijaForm.getFieldData(block);
             this.editSettings();
@@ -866,7 +873,7 @@ WysijaForm.Block = Class.create({
     // save block in history
     WysijaHistory.enqueue(this.element);
 
-    Effect.Fade(this.element.identify(), {
+    window.Effect.Fade(this.element.identify(), {
       duration: 0.2,
       afterFinish: function(effect) {
         // remove placeholder
@@ -898,20 +905,20 @@ WysijaForm.Block = Class.create({
 /* Invoked on item dropped */
 WysijaForm.Block.create = function(createBlock, target) {
   var block = createBlock;
-  if($('form_template_' + block.type) === null) {
+  if(window.$('form_template_' + block.type) === null) {
     return false;
   }
 
-  var body = $(WysijaForm.options.body),
-    block_template = Handlebars.compile($('form_template_block').innerHTML),
-    template = Handlebars.compile($('form_template_' + block.type).innerHTML),
+  var body = window.$(WysijaForm.options.body),
+    block_template = window.Handlebars.compile(window.$('form_template_block').innerHTML),
+    template = window.Handlebars.compile(window.$('form_template_' + block.type).innerHTML),
     output = '';
 
   if(block.type === 'segment') {
     if(block.params.values === undefined) {
-      var settings_segments = jQuery('#mailpoet_form_segments').val();
+      var settings_segments = window.jQuery('#mailpoet_form_segments').val();
       if(settings_segments !== null && settings_segments.length > 0){
-        block.params.values = mailpoet_segments.filter(function(segment) {
+        block.params.values = window.mailpoet_segments.filter(function(segment) {
           return (settings_segments.indexOf(segment.id) !== -1);
         });
       }
@@ -966,10 +973,10 @@ document.observe('wjfe:item:drop', function(event) {
 });
 
 /* Form Widget */
-WysijaForm.Widget = Class.create(WysijaForm.Block, {
+WysijaForm.Widget = window.Class.create(WysijaForm.Block, {
   initialize: function(element) {
     info('widget -> init');
-    this.element = $(element);
+    this.element = window.$(element);
     return this;
   },
   setup: function() {
@@ -988,7 +995,7 @@ WysijaForm.Widget = Class.create(WysijaForm.Block, {
   },
   setData: function(data) {
     var current_data = this.getData(),
-      params = $H(current_data.params).merge(data.params).toObject();
+      params = window.$H(current_data.params).merge(data.params).toObject();
 
     // update type if it changed
     if(data.type !== undefined && data.type !== current_data.type) {
@@ -1017,9 +1024,9 @@ WysijaForm.Widget = Class.create(WysijaForm.Block, {
     this.setData(data);
     var options = this.getData();
     // redraw block
-    var block_template = Handlebars.compile($('form_template_block').innerHTML),
-      template = Handlebars.compile($('form_template_' + options.type).innerHTML),
-      data = $H(options).merge({
+    var block_template = window.Handlebars.compile(window.$('form_template_block').innerHTML),
+      template = window.Handlebars.compile(window.$('form_template_' + options.type).innerHTML),
+      data = window.$H(options).merge({
         template: template(options)
       }).toObject();
     this.element.replace(block_template(data));
@@ -1027,12 +1034,12 @@ WysijaForm.Widget = Class.create(WysijaForm.Block, {
     WysijaForm.init();
   },
   editSettings: function() {
-    MailPoet.Modal.popup({
-      title: MailPoet.I18n.t('editFieldSettings'),
-      template: jQuery('#form_template_field_settings').html(),
+    window.MailPoet.Modal.popup({
+      title: window.MailPoet.I18n.t('editFieldSettings'),
+      template: window.jQuery('#form_template_field_settings').html(),
       data: this.getData(),
       onSuccess: function() {
-        var data = jQuery('#form_field_settings').serializeObject();
+        var data = window.jQuery('#form_field_settings').serializeObject();
         this.redraw(data);
       }.bind(this)
     });

assets/js/src/forms/forms.jsx

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

assets/js/src/forms/list.jsx

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

assets/js/src/handlebars_helpers.js

@@ -5,7 +5,7 @@ define('handlebars_helpers', ['handlebars'], function(Handlebars) {
       output = '';
     for(var i = 0; i < size; i++) {
       output += arguments[i];
-      };
+    }
     return output;
   });
 
@@ -19,16 +19,16 @@ define('handlebars_helpers', ['handlebars'], function(Handlebars) {
       }
 
           // 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);
+        return window.moment.unix(timestamp).format(f);
       } else {
-              return moment.utc(timestamp).format(f);
+        return window.moment.utc(timestamp).format(f);
       }
     } else {
       return timestamp;
-    };
+    }
   });
 
   Handlebars.registerHelper('cycle', function(value, block) {
@@ -67,7 +67,7 @@ define('handlebars_helpers', ['handlebars'], function(Handlebars) {
   });
 
   Handlebars.registerHelper('nl2br', function(value, block) {
-      return value.gsub("\n", "<br />");
+    return value.gsub('\n', '<br />');
   });
 
   Handlebars.registerHelper('json_encode', function(value, block) {
@@ -78,7 +78,7 @@ define('handlebars_helpers', ['handlebars'], function(Handlebars) {
     return JSON.parse(value);
   });
   Handlebars.registerHelper('url', function(value, block) {
-      var url = window.location.protocol + "//" + window.location.host + window.location.pathname;
+    var url = window.location.protocol + '//' + window.location.host + window.location.pathname;
 
     return url + value;
   });
@@ -99,7 +99,7 @@ define('handlebars_helpers', ['handlebars'], function(Handlebars) {
       // extract all lines into an array
     if(value === undefined) return '';
 
-      var lines = value.trim().split("\n");
+    var lines = value.trim().split('\n');
 
       // remove header & footer
     lines.shift();
@@ -148,10 +148,10 @@ define('handlebars_helpers', ['handlebars'], function(Handlebars) {
       case 'Courier New': return new Handlebars.SafeString("'Courier New', Courier, 'Lucida Sans Typewriter', 'Lucida Typewriter', monospace");
       case 'Georgia': return new Handlebars.SafeString("Georgia, Times, 'Times New Roman', serif");
       case 'Lucida': return new Handlebars.SafeString("'Lucida Sans Unicode', 'Lucida Grande', sans-serif");
-      case 'Tahoma': return new Handlebars.SafeString("Tahoma, Verdana, Segoe, sans-serif");
+      case 'Tahoma': return new Handlebars.SafeString('Tahoma, Verdana, Segoe, sans-serif');
       case 'Times New Roman': return new Handlebars.SafeString("'Times New Roman', Times, Baskerville, Georgia, serif");
       case 'Trebuchet MS': return new Handlebars.SafeString("'Trebuchet MS', 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Tahoma, sans-serif");
-      case 'Verdana': return new Handlebars.SafeString("Verdana, Geneva, sans-serif");
+      case 'Verdana': return new Handlebars.SafeString('Verdana, Geneva, sans-serif');
       default: return font;
     }
   });

assets/js/src/help-tooltip.js

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

assets/js/src/help-tooltip.jsx

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

assets/js/src/help/knowledge_base.jsx

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

assets/js/src/help/system_info.jsx

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

assets/js/src/help/tabs.jsx

@@ -38,9 +38,9 @@ function Tabs(props) {
       { tabLinks }
     </h2>
   );
-};
+}
 
 Tabs.propTypes = { tab: React.PropTypes.string };
-Tabs.defaultProps = { tab: "knowledgeBase" };
+Tabs.defaultProps = { tab: 'knowledgeBase' };
 
 module.exports = Tabs;

assets/js/src/helpscout.js

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

assets/js/src/i18n.js

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

assets/js/src/iframe.js

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

assets/js/src/jquery.serialize_object.js

@@ -25,7 +25,7 @@ define(
      */
     $.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){

assets/js/src/listing/bulk_actions.jsx

@@ -56,7 +56,7 @@ define([
         const promise = this.props.onBulkAction(selected_ids, data);
         if (promise !== false) {
           promise.then(onSuccess);
-        };
+        }
       }
 
       this.setState({

assets/js/src/listing/groups.jsx

@@ -11,7 +11,7 @@ define(['react', 'classnames'], (React, classNames) => {
         }
 
         const classes = classNames(
-            { 'current' : (group.name === this.props.group) }
+            { current : (group.name === this.props.group) }
           );
 
         return (

assets/js/src/listing/header.jsx

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

assets/js/src/listing/listing.jsx

@@ -226,7 +226,7 @@ const ListingItems = React.createClass({
     } else {
       const select_all_classes = classNames(
         'mailpoet_select_all',
-        { 'mailpoet_hidden': (
+        { mailpoet_hidden: (
             this.props.selection === false
             || (this.props.count <= this.props.limit)
           ),
@@ -783,7 +783,7 @@ const Listing = React.createClass({
       'widefat',
       'fixed',
       'striped',
-      { 'mailpoet_listing_loading': this.state.loading }
+      { mailpoet_listing_loading: this.state.loading }
     );
 
     // search

assets/js/src/modal.js

@@ -1,6 +1,7 @@
 define('modal', ['mailpoet', 'jquery'],
   function(mp, jQuery) {
     'use strict';
+
     var MailPoet = mp;
     /***************************************************************************
     MailPoet Modal:
@@ -111,9 +112,8 @@ define('modal', ['mailpoet', 'jquery'],
         if(this.renderer === 'html') {
           return function() { return template; };
         } else {
-          return Handlebars.compile(template);
+          return window.Handlebars.compile(template);
         }
-        return false;
       },
       init: function(options) {
         if(this.initialized === true) {
@@ -309,7 +309,6 @@ define('modal', ['mailpoet', 'jquery'],
       setDimensions: function() {
         switch(this.options.type) {
           case 'popup':
-              console.log(this.options)
               // set popup dimensions
             jQuery('#mailpoet_popup').css({
               width: this.options.width,

assets/js/src/mp2migrator.js

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

assets/js/src/newsletter_editor/App.js

@@ -6,7 +6,7 @@ define([
   'underscore',
   'handlebars',
   'handlebars_helpers'
-  ], function(Backbone, Marionette, BackboneRadio, jQuery, _, Handlebars) {
+], function(Backbone, Marionette, BackboneRadio, jQuery, _, Handlebars) {
   var Radio = BackboneRadio;
 
   var AppView = Marionette.View.extend({

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

@@ -6,7 +6,7 @@
  */
 define([
   'backbone.marionette'
-  ], function(BackboneMarionette) {
+], function(BackboneMarionette) {
   var Marionette = BackboneMarionette;
   var BehaviorsLookup = {};
   Marionette.Behaviors.behaviorsLookup = function() {

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

@@ -8,19 +8,39 @@ define([
   'newsletter_editor/behaviors/BehaviorsLookup',
   'mailpoet',
   'spectrum'
-  ], function(Marionette, BehaviorsLookup, MailPoet, Spectrum) {
+], function(Marionette, BehaviorsLookup, MailPoet, Spectrum) {
   var BL = BehaviorsLookup;
 
   BL.ColorPickerBehavior = Marionette.Behavior.extend({
     onRender: function() {
-      this.view.$('.mailpoet_color').spectrum({
+      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,
-        preferredFormat: "hex6",
+          showPalette: true,
+          showSelectionPalette: true,
+          palette: [],
+          localStorageKey: 'newsletter_editor.spectrum.palette',
+          preferredFormat: preferredFormat,
           allowEmpty: true,
           chooseText: MailPoet.I18n.t('selectColor'),
-        cancelText: MailPoet.I18n.t('cancelColorSelection')
+          cancelText: MailPoet.I18n.t('cancelColorSelection'),
+          change: updateColorInput,
+          move: updateColorInput,
+          hide: updateColorInput
+        });
       });        
     }
   });

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

@@ -1,3 +1,4 @@
+
 /**
  * ContainerDropZoneBehavior
  *
@@ -11,7 +12,7 @@ define([
   'jquery',
   'newsletter_editor/behaviors/BehaviorsLookup',
   'interact'
-  ], function(Marionette, _, jQuery, BL, interact) {
+], function(Marionette, _, jQuery, BL, interact) {
   var BehaviorsLookup = BL;
 
   BehaviorsLookup.ContainerDropZoneBehavior = Marionette.Behavior.extend({
@@ -195,7 +196,8 @@ define([
 
             if (view.model.get('orientation') === 'horizontal' && droppableModel.get('type') !== 'container') {
               // Regular blocks always need to be inserted into columns - vertical containers
-              tempCollection = new (EditorApplication.getBlockTypeModel('container'))({
+
+              tempCollection = new (window.EditorApplication.getBlockTypeModel('container'))({
                 orientation: 'vertical'
               });
               tempCollection.get('blocks').add(droppableModel);
@@ -210,7 +212,7 @@ define([
             // and inserting dropModel into that
             var tempModel = viewCollection.at(dropPosition.index);
 
-            tempCollection = new (EditorApplication.getBlockTypeModel('container'))({
+            tempCollection = new (window.EditorApplication.getBlockTypeModel('container'))({
               orientation: (view.model.get('orientation') === 'vertical') ? 'horizontal' : 'vertical'
             });
 
@@ -218,19 +220,19 @@ define([
 
             if (tempCollection.get('orientation') === 'horizontal') {
               if (dropPosition.position === 'before') {
-                tempCollection2 = new (EditorApplication.getBlockTypeModel('container'))({
+                tempCollection2 = new (window.EditorApplication.getBlockTypeModel('container'))({
                   orientation: 'vertical'
                 });
                 tempCollection2.get('blocks').add(droppableModel);
                 tempCollection.get('blocks').add(tempCollection2);
               }
-              tempCollection2 = new (EditorApplication.getBlockTypeModel('container'))({
+              tempCollection2 = new (window.EditorApplication.getBlockTypeModel('container'))({
                 orientation: 'vertical'
               });
               tempCollection2.get('blocks').add(tempModel);
               tempCollection.get('blocks').add(tempCollection2);
               if (dropPosition.position === 'after') {
-                tempCollection2 = new (EditorApplication.getBlockTypeModel('container'))({
+                tempCollection2 = new (window.EditorApplication.getBlockTypeModel('container'))({
                   orientation: 'vertical'
                 });
                 tempCollection2.get('blocks').add(droppableModel);
@@ -291,7 +293,7 @@ define([
 
         insertionType, index, position, indexAndPosition;
 
-      unsafe = !!is_unsafe;
+      var unsafe = !!is_unsafe;
 
       if (this.getCollection().length === 0) {
         return {

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

@@ -10,7 +10,7 @@ define([
   'jquery',
   'newsletter_editor/behaviors/BehaviorsLookup',
   'interact'
-  ], function(Marionette, _, jQuery, BehaviorsLookup, interact) {
+], function(Marionette, _, jQuery, BehaviorsLookup, interact) {
   var BL = BehaviorsLookup;
 
   BL.DraggableBehavior = Marionette.Behavior.extend({
@@ -54,7 +54,7 @@ define([
             // 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),

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

@@ -6,18 +6,20 @@
 define([
   'backbone.marionette',
   'newsletter_editor/behaviors/BehaviorsLookup'
-  ], function(Marionette, BehaviorsLookup) {
+], function(Marionette, BehaviorsLookup) {
   var BL = BehaviorsLookup;
 
   BL.HighlightEditingBehavior = Marionette.Behavior.extend({
     modelEvents: {
-      'startEditing': 'enableHighlight',
-      'stopEditing': 'disableHighlight'
+      startEditing: 'enableHighlight',
+      stopEditing: 'disableHighlight'
     },
     enableHighlight: function() {
+      this.view._isBeingEdited = true;
       this.$el.addClass('mailpoet_highlight');
     },
     disableHighlight: function() {
+      this.view._isBeingEdited = false;
       this.$el.removeClass('mailpoet_highlight');
     }
   });

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

@@ -7,7 +7,7 @@ define([
   'backbone.marionette',
   'newsletter_editor/behaviors/BehaviorsLookup',
   'interact'
-  ], function(Marionette, BehaviorsLookup, interact) {
+], function(Marionette, BehaviorsLookup, interact) {
   var BL = BehaviorsLookup;
 
   BL.ResizableBehavior = Marionette.Behavior.extend({
@@ -19,8 +19,8 @@ define([
       modelField: 'styles.block.height'
     },
     events: {
-      "mouseenter": 'showResizeHandle',
-      "mouseleave": 'hideResizeHandle'
+      mouseenter: 'showResizeHandle',
+      mouseleave: 'hideResizeHandle'
     },
     onRender: function() {
       this.attachResize();
@@ -50,7 +50,8 @@ define([
         if (newLength < that.options.minLength) newLength = that.options.minLength;
 
         that.view.model.set(that.options.modelField, newLength + 'px');
-      }).on('resizeend', function(event) {
+      })
+      .on('resizeend', function(event) {
         that.isBeingResized = null;
         that.$el.removeClass('mailpoet_resize_active');
       });

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

@@ -7,7 +7,7 @@ define([
   'backbone.marionette',
   'jquery',
   'newsletter_editor/behaviors/BehaviorsLookup'
-  ], function(Marionette, jQuery, BehaviorsLookup) {
+], function(Marionette, jQuery, BehaviorsLookup) {
   var BL = BehaviorsLookup;
 
   BL.ShowSettingsBehavior = Marionette.Behavior.extend({

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

@@ -7,7 +7,7 @@ define([
   'backbone.marionette',
   'underscore',
   'newsletter_editor/behaviors/BehaviorsLookup'
-  ], function(Marionette, _, BehaviorsLookup) {
+], function(Marionette, _, BehaviorsLookup) {
   var BL = BehaviorsLookup;
 
   BL.SortableBehavior = Marionette.Behavior.extend({
@@ -16,7 +16,7 @@ define([
 
       if (_.isFunction(this.$el.sortable)) {
         this.$el.sortable({
-          cursor: "move",
+          cursor: 'move',
           start: function(event, ui) {
             ui.item.data('previousIndex', ui.item.index());
           },

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

@@ -7,18 +7,18 @@ define([
   'backbone.marionette',
   'underscore',
   'newsletter_editor/behaviors/BehaviorsLookup'
-  ], function(Marionette, _, BehaviorsLookup) {
+], function(Marionette, _, BehaviorsLookup) {
   var BL = BehaviorsLookup;
 
   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",
+      plugins: 'link textcolor colorpicker mailpoet_shortcodes',
       configurationFilter: function(originalConfig) { return originalConfig; }
     },
     onDomRefresh: function() {
@@ -34,6 +34,8 @@ 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,
@@ -63,7 +65,7 @@ define([
             editor.focus();
             if (that._isActivationClick) {
               editor.selection.setRng(
-                  tinymce.dom.RangeUtils.getCaretRangeFromPoint(e.clientX, e.clientY, editor.getDoc())
+                  window.tinymce.dom.RangeUtils.getCaretRangeFromPoint(e.clientX, e.clientY, editor.getDoc())
               );
               that._isActivationClick = false;
             }

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

@@ -16,7 +16,7 @@ define([
   'backbone.supermodel',
   'underscore',
   'jquery'
-  ], function(
+], function(
   App,
   BaseBlock,
   ButtonBlock,
@@ -28,7 +28,7 @@ define([
   jQuery
   ) {
 
-  "use strict";
+  'use strict';
 
   var Module = {},
     base = BaseBlock;
@@ -128,14 +128,14 @@ define([
   });
 
   Module.AutomatedLatestContentBlockView = base.BlockView.extend({
-    className: "mailpoet_block mailpoet_automated_latest_content_block mailpoet_droppable_block",
+    className: 'mailpoet_block mailpoet_automated_latest_content_block mailpoet_droppable_block',
     initialize: function() {
       function replaceButtonStylesHandler(data) {
-        this.model.set({"readMoreButton": data});
+        this.model.set({readMoreButton: data});
       }
-      App.getChannel().on("replaceAllButtonStyles", replaceButtonStylesHandler.bind(this));
+      App.getChannel().on('replaceAllButtonStyles', replaceButtonStylesHandler.bind(this));
     },
-    getTemplate: function() { return templates.automatedLatestContentBlock; },
+    getTemplate: function() { return window.templates.automatedLatestContentBlock; },
     regions: {
       toolsRegion: '.mailpoet_tools',
       postsRegion: '.mailpoet_automated_latest_content_block_posts'
@@ -143,7 +143,7 @@ define([
     modelEvents: _.extend(
       _.omit(base.BlockView.prototype.modelEvents, 'change'),
       {
-        'postsChanged': 'render'
+        postsChanged: 'render'
       }),
     events: _.extend(base.BlockView.prototype.events, {
       'click .mailpoet_automated_latest_content_block_overlay': 'showSettings'
@@ -168,31 +168,31 @@ define([
 
   // Sidebar view container
   Module.AutomatedLatestContentBlockSettingsView = base.BlockSettingsView.extend({
-    getTemplate: function() { return templates.automatedLatestContentBlockSettings; },
+    getTemplate: function() { return window.templates.automatedLatestContentBlockSettings; },
     events: function() {
       return {
-        "click .mailpoet_automated_latest_content_hide_display_options": 'toggleDisplayOptions',
-        "click .mailpoet_automated_latest_content_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'
       };
     },
     onRender: function() {
@@ -364,7 +364,7 @@ define([
   });
 
   Module.AutomatedLatestContentWidgetView = base.WidgetView.extend({
-    getTemplate: function() { return templates.automatedLatestContentInsertion; },
+    getTemplate: function() { return window.templates.automatedLatestContentInsertion; },
     behaviors: {
       DraggableBehavior: {
         cloneOriginal: true,

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

@@ -12,9 +12,9 @@ define([
   'jquery',
   'mailpoet',
   'modal'
-  ], function(App, Marionette, SuperModel, _, jQuery, MailPoet, Modal) {
+], function(App, Marionette, SuperModel, _, jQuery, MailPoet, Modal) {
 
-  "use strict";
+  'use strict';
 
   var Module = {},
     AugmentedView = Marionette.View.extend({});
@@ -50,13 +50,13 @@ define([
       toolsRegion: '> .mailpoet_tools'
     },
     modelEvents: {
-      'change': 'render',
-      'delete': 'deleteBlock',
-      'duplicate': 'duplicateBlock'
+      change: 'render',
+      delete: 'deleteBlock',
+      duplicate: 'duplicateBlock'
     },
     events: {
-      "mouseenter": "showTools",
-      "mouseleave": "hideTools"
+      mouseenter: 'showTools',
+      mouseleave: 'hideTools'
     },
     behaviors: {
       DraggableBehavior: {
@@ -178,13 +178,13 @@ define([
   });
 
   Module.BlockToolsView = AugmentedView.extend({
-    getTemplate: function() { return templates.genericBlockTools; },
+    getTemplate: function() { return window.templates.genericBlockTools; },
     events: {
-      "click .mailpoet_edit_block": "changeSettings",
-      "click .mailpoet_delete_block_activate": "showDeletionConfirmation",
-      "click .mailpoet_delete_block_cancel": "hideDeletionConfirmation",
-      "click .mailpoet_delete_block_confirm": "deleteBlock",
-      "click .mailpoet_duplicate_block": "duplicateBlock"
+      '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: {
@@ -275,7 +275,7 @@ define([
       this.model.set(field, jQuery(event.target).val() + suffix);
     },
     changeBoolField: function(field, event) {
-      this.model.set(field, (jQuery(event.target).val() === 'true') ? true : false);
+      this.model.set(field, (jQuery(event.target).val() === 'true'));
     },
     changeBoolCheckboxField: function(field, event) {
       this.model.set(field, (!!jQuery(event.target).prop('checked')));
@@ -298,7 +298,7 @@ define([
     behaviors: {
       DraggableBehavior: {
         drop: function() {
-          throw "Unsupported operation";
+          throw 'Unsupported operation';
         }
       }
     }

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

@@ -7,9 +7,9 @@ define([
   'mailpoet',
   'underscore',
   'jquery'
-  ], function(App, BaseBlock, MailPoet, _, jQuery) {
+], function(App, BaseBlock, MailPoet, _, jQuery) {
 
-  "use strict";
+  'use strict';
 
   var Module = {},
     base = BaseBlock;
@@ -41,8 +41,8 @@ define([
   });
 
   Module.ButtonBlockView = base.BlockView.extend({
-    className: "mailpoet_block mailpoet_button_block mailpoet_droppable_block",
-    getTemplate: function() { return templates.buttonBlock; },
+    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: {}
@@ -65,37 +65,37 @@ define([
   });
 
   Module.ButtonBlockSettingsView = base.BlockSettingsView.extend({
-    getTemplate: function() { return templates.buttonBlockSettings; },
+    getTemplate: function() { return window.templates.buttonBlockSettings; },
     events: function() {
       return {
-        "input .mailpoet_field_button_text": _.partial(this.changeField, "text"),
-        "input .mailpoet_field_button_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'
       };
     },
     templateContext: function() {
@@ -121,7 +121,7 @@ define([
   });
 
   Module.ButtonWidgetView = base.WidgetView.extend({
-    getTemplate: function() { return templates.buttonInsertion; },
+    getTemplate: function() { return window.templates.buttonInsertion; },
     behaviors: {
       DraggableBehavior: {
         cloneOriginal: true,

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

@@ -10,9 +10,9 @@ define([
   'jquery',
   'newsletter_editor/App',
   'newsletter_editor/blocks/base'
-  ], function(Backbone, Marionette, _, jQuery, App, BaseBlock) {
+], function(Backbone, Marionette, _, jQuery, App, BaseBlock) {
 
-  "use strict";
+  'use strict';
 
   var Module = {},
     base = BaseBlock,
@@ -103,9 +103,9 @@ define([
       }
     }),
     className: 'mailpoet_block mailpoet_container_block mailpoet_droppable_block mailpoet_droppable_layout_block',
-    getTemplate: function() { return templates.containerBlock; },
+    getTemplate: function() { return window.templates.containerBlock; },
     events: _.extend({}, base.BlockView.prototype.events, {
-      "click .mailpoet_newsletter_layer_selector": "toggleEditingLayer"
+      'click .mailpoet_newsletter_layer_selector': 'toggleEditingLayer'
     }),
     ui: {
       tools: '> .mailpoet_tools'
@@ -138,7 +138,8 @@ define([
           // for root and column containers.
           return view.renderOptions.depth === 1;
         }
-      }
+      },
+      HighlightContainerBehavior: {}
     }),
     onDragSubstituteBy: function() {
       // For two and three column layouts display their respective widgets,
@@ -217,7 +218,7 @@ define([
   });
 
   Module.ContainerBlockEmptyView = Marionette.View.extend({
-    getTemplate: function() { return templates.containerEmpty; },
+    getTemplate: function() { return window.templates.containerEmpty; },
     initialize: function(options) {
       this.renderOptions = _.defaults(options.renderOptions || {}, {});
     },
@@ -234,11 +235,11 @@ define([
   });
 
   Module.ContainerBlockSettingsView = base.BlockSettingsView.extend({
-    getTemplate: function() { return templates.containerBlockSettings; },
+    getTemplate: function() { return window.templates.containerBlockSettings; },
     events: function() {
       return {
-        "change .mailpoet_field_container_background_color": _.partial(this.changeColorField, "styles.block.backgroundColor"),
-        "click .mailpoet_done_editing": "close"
+        'change .mailpoet_field_container_background_color': _.partial(this.changeColorField, 'styles.block.backgroundColor'),
+        'click .mailpoet_done_editing': 'close'
       };
     },
     regions: {
@@ -266,7 +267,7 @@ define([
   });
 
   Module.ContainerBlockColumnSettingsView = Marionette.View.extend({
-    getTemplate: function() { return templates.containerBlockColumnSettings; },
+    getTemplate: function() { return window.templates.containerBlockColumnSettings; },
     initialize: function(options) {
       this.columnNumber = (options.columnIndex || 0) + 1;
     },
@@ -280,7 +281,7 @@ define([
 
   Module.OneColumnContainerWidgetView = base.WidgetView.extend({
     className: base.WidgetView.prototype.className + ' mailpoet_droppable_layout_block',
-    getTemplate: function() { return templates.oneColumnLayoutInsertion; },
+    getTemplate: function() { return window.templates.oneColumnLayoutInsertion; },
     behaviors: {
       DraggableBehavior: {
         cloneOriginal: true,
@@ -298,7 +299,7 @@ define([
 
   Module.TwoColumnContainerWidgetView = base.WidgetView.extend({
     className: base.WidgetView.prototype.className + ' mailpoet_droppable_layout_block',
-    getTemplate: function() { return templates.twoColumnLayoutInsertion; },
+    getTemplate: function() { return window.templates.twoColumnLayoutInsertion; },
     behaviors: {
       DraggableBehavior: {
         cloneOriginal: true,
@@ -317,7 +318,7 @@ define([
 
   Module.ThreeColumnContainerWidgetView = base.WidgetView.extend({
     className: base.WidgetView.prototype.className + ' mailpoet_droppable_layout_block',
-    getTemplate: function() { return templates.threeColumnLayoutInsertion; },
+    getTemplate: function() { return window.templates.threeColumnLayoutInsertion; },
     behaviors: {
       DraggableBehavior: {
         cloneOriginal: true,

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

@@ -7,9 +7,9 @@ define([
   'underscore',
   'jquery',
   'mailpoet'
-  ], function(App, BaseBlock, _, jQuery, MailPoet) {
+], function(App, BaseBlock, _, jQuery, MailPoet) {
 
-  "use strict";
+  'use strict';
 
   var Module = {},
     base = BaseBlock;
@@ -32,8 +32,8 @@ define([
   });
 
   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: {
@@ -84,19 +84,19 @@ define([
   });
 
   Module.DividerBlockSettingsView = base.BlockSettingsView.extend({
-    getTemplate: function() { return templates.dividerBlockSettings; },
+    getTemplate: function() { return window.templates.dividerBlockSettings; },
     events: function() {
       return {
-        "click .mailpoet_field_divider_style": 'changeStyle',
+        'click .mailpoet_field_divider_style': 'changeStyle',
 
-        "input .mailpoet_field_divider_border_width": _.partial(this.updateValueAndCall, '.mailpoet_field_divider_border_width_input', _.partial(this.changePixelField, "styles.block.borderWidth").bind(this)),
-        "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() {
@@ -129,7 +129,7 @@ define([
   });
 
   Module.DividerWidgetView = base.WidgetView.extend({
-    getTemplate: function() { return templates.dividerInsertion; },
+    getTemplate: function() { return window.templates.dividerInsertion; },
     behaviors: {
       DraggableBehavior: {
         cloneOriginal: true,

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

@@ -4,10 +4,11 @@
 define([
   'newsletter_editor/App',
   'newsletter_editor/blocks/base',
-    'underscore'
-  ], function(App, BaseBlock, _) {
+  'underscore',
+  'mailpoet'
+], function(App, BaseBlock, _, MailPoet) {
 
-  "use strict";
+  'use strict';
 
   var Module = {},
     base = BaseBlock;
@@ -37,8 +38,8 @@ define([
   });
 
   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'
     }, _.omit(base.BlockView.prototype.modelEvents, 'change')),
@@ -75,19 +76,19 @@ define([
   });
 
   Module.FooterBlockSettingsView = base.BlockSettingsView.extend({
-    getTemplate: function() { return templates.footerBlockSettings; },
+    getTemplate: function() { return window.templates.footerBlockSettings; },
     events: function() {
       return {
-        "change .mailpoet_field_footer_text_color": _.partial(this.changeColorField, "styles.text.fontColor"),
-        "change .mailpoet_field_footer_text_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) {
+        '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"
+        '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() {
@@ -98,7 +99,7 @@ define([
   });
 
   Module.FooterWidgetView = base.WidgetView.extend({
-    getTemplate: function() { return templates.footerInsertion; },
+    getTemplate: function() { return window.templates.footerInsertion; },
     behaviors: {
       DraggableBehavior: {
         cloneOriginal: true,

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

@@ -4,10 +4,11 @@
 define([
   'newsletter_editor/App',
   'newsletter_editor/blocks/base',
-    'underscore'
-  ], function(App, BaseBlock, _) {
+  'underscore',
+  'mailpoet'
+], function(App, BaseBlock, _, MailPoet) {
 
-  "use strict";
+  'use strict';
 
   var Module = {},
     base = BaseBlock;
@@ -37,8 +38,8 @@ define([
   });
 
   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'
     }, _.omit(base.BlockView.prototype.modelEvents, 'change')),
@@ -75,19 +76,19 @@ define([
   });
 
   Module.HeaderBlockSettingsView = base.BlockSettingsView.extend({
-    getTemplate: function() { return templates.headerBlockSettings; },
+    getTemplate: function() { return window.templates.headerBlockSettings; },
     events: function() {
       return {
-        "change .mailpoet_field_header_text_color": _.partial(this.changeColorField, "styles.text.fontColor"),
-        "change .mailpoet_field_header_text_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"
+        '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() {
@@ -98,7 +99,7 @@ define([
   });
 
   Module.HeaderWidgetView = base.WidgetView.extend({
-    getTemplate: function() { return templates.headerInsertion; },
+    getTemplate: function() { return window.templates.headerInsertion; },
     behaviors: {
       DraggableBehavior: {
         cloneOriginal: true,

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

@@ -5,10 +5,11 @@ define([
   'newsletter_editor/App',
   'newsletter_editor/blocks/base',
   'underscore',
-    'mailpoet'
-  ], function(App, BaseBlock, _, MailPoet) {
+  'mailpoet',
+  'jquery'
+], function(App, BaseBlock, _, MailPoet, jQuery) {
 
-  "use strict";
+  'use strict';
 
   var Module = {},
     base = BaseBlock,
@@ -34,8 +35,8 @@ define([
   });
 
   Module.ImageBlockView = base.BlockView.extend({
-    className: "mailpoet_block mailpoet_image_block mailpoet_droppable_block",
-    getTemplate: function() { return templates.imageBlock; },
+    className: 'mailpoet_block mailpoet_image_block mailpoet_droppable_block',
+    getTemplate: function() { return window.templates.imageBlock; },
     onDragSubstituteBy: function() { return Module.ImageWidgetView; },
     templateContext: function() {
       return _.extend({
@@ -72,16 +73,16 @@ define([
         tooltip: MailPoet.I18n.t('helpTooltipDesignerIdealWidth')
       });
     },
-    getTemplate: function() { return templates.imageBlockSettings; },
+    getTemplate: function() { return window.templates.imageBlockSettings; },
     events: function() {
       return {
-        "input .mailpoet_field_image_link": _.partial(this.changeField, "link"),
-        "input .mailpoet_field_image_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_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'
       };
     },
     initialize: function(options) {
@@ -98,10 +99,10 @@ define([
         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);
+          window.wp.media.view.MediaFrame.prototype.initialize.apply(this, arguments);
 
           _.defaults(this.options, {
             multiple: true,
@@ -123,7 +124,7 @@ define([
         },
 
         createQuery: function(options) {
-          var query = wp.media.query(options);
+          var query = window.wp.media.query(options);
           return query;
         },
 
@@ -133,7 +134,7 @@ define([
           // Add the default states.
           this.states.add([
             // Main states.
-            new wp.media.controller.Library({
+            new window.wp.media.controller.Library({
               id: 'insert',
               title: 'Add images',
               priority: 20,
@@ -155,8 +156,8 @@ define([
             })
           ]);
 
-          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());
           }
         },
 
@@ -177,7 +178,7 @@ define([
 
           var handlers = {
             content: {
-                'embed': 'embedContent',
+              embed: 'embedContent',
               'edit-selection': 'editSelectionContent'
             },
             toolbar: {
@@ -193,13 +194,13 @@ define([
         },
 
         uploadContent: function() {
-          wp.media.view.MediaFrame.Select.prototype.uploadContent.apply(this, arguments);
+          window.wp.media.view.MediaFrame.Select.prototype.uploadContent.apply(this, arguments);
           this.$el.addClass('hide-toolbar');
         },
 
         // Content
         embedContent: function() {
-          var view = new wp.media.view.Embed({
+          var view = new window.wp.media.view.Embed({
             controller: this,
             model: this.state()
           }).render();
@@ -213,7 +214,7 @@ define([
             selection = state.get('selection'),
             view;
 
-          view = new wp.media.view.AttachmentsBrowser({
+          view = new window.wp.media.view.AttachmentsBrowser({
             controller: this,
             collection: selection,
             selection: selection,
@@ -222,7 +223,7 @@ define([
             search: false,
             dragInfo: true,
 
-            AttachmentView: wp.media.view.Attachment.EditSelection
+            AttachmentView: window.wp.media.view.Attachment.EditSelection
           }).render();
 
           view.toolbar.set('backToLibrary', {
@@ -242,7 +243,7 @@ define([
         selectionStatusToolbar: function(view) {
           var editable = this.state().get('editable');
 
-          view.set('selection', new wp.media.view.Selection({
+          view.set('selection', new window.wp.media.view.Selection({
             controller: this,
             collection: this.state().get('selection'),
             priority: -40,
@@ -278,7 +279,7 @@ define([
 
         mainEmbedToolbar: function(toolbar) {
           var tbar = toolbar;
-          tbar.view = new wp.media.view.Toolbar.Embed({
+          tbar.view = new window.wp.media.view.Toolbar.Embed({
             controller: this,
             text: 'Add images'
           });
@@ -331,7 +332,7 @@ define([
             height: mainSize.height + 'px',
             width: mainSize.width + 'px',
             src: mainSize.url,
-            alt: (attachment.get('alt') !== "" && attachment.get('alt') !== undefined) ? attachment.get('alt') : attachment.get('title')
+            alt: (attachment.get('alt') !== '' && attachment.get('alt') !== undefined) ? attachment.get('alt') : attachment.get('title')
           });
           // Rerender settings view due to changes from outside of settings view
           that.render();
@@ -363,7 +364,7 @@ define([
   });
 
   ImageWidgetView = base.WidgetView.extend({
-    getTemplate: function() { return templates.imageInsertion; },
+    getTemplate: function() { return window.templates.imageInsertion; },
     behaviors: {
       DraggableBehavior: {
         cloneOriginal: true,

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

@@ -23,7 +23,7 @@ define([
   'newsletter_editor/blocks/button',
   'newsletter_editor/blocks/divider',
   'select2'
-  ], function(
+], function(
   Backbone,
   Marionette,
   Radio,
@@ -37,7 +37,7 @@ define([
   DividerBlock
   ) {
 
-  "use strict";
+  'use strict';
 
   var Module = {},
     base = BaseBlock;
@@ -176,8 +176,8 @@ define([
   });
 
   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'
@@ -216,7 +216,7 @@ define([
   });
 
   Module.PostsBlockSettingsView = base.BlockSettingsView.extend({
-    getTemplate: function() { return templates.postsBlockSettings; },
+    getTemplate: function() { return window.templates.postsBlockSettings; },
     regions: {
       selectionRegion: '.mailpoet_settings_posts_selection',
       displayOptionsRegion: '.mailpoet_settings_posts_display_options'
@@ -296,7 +296,7 @@ define([
       this.blockModel = options.blockModel;
     },
     events: {
-      'scroll': 'onPostsScroll'
+      scroll: 'onPostsScroll'
     },
     onPostsScroll: function(event) {
       var $postsBox = jQuery(event.target);
@@ -308,7 +308,7 @@ define([
   });
 
   var PostSelectionSettingsView = Marionette.View.extend({
-    getTemplate: function() { return templates.postSelectionPostsBlockSettings; },
+    getTemplate: function() { return window.templates.postSelectionPostsBlockSettings; },
     regions: {
       posts: '.mailpoet_post_selection_container'
     },
@@ -326,10 +326,10 @@ define([
           this.$('.mailpoet_post_scroll_container').scrollTop(0);
         }
       },
-      'loadingMorePosts': function() {
+      loadingMorePosts: function() {
         this.$('.mailpoet_post_selection_loading').css('visibility', 'visible');
       },
-      'morePostsLoaded': function() {
+      morePostsLoaded: function() {
         this.$('.mailpoet_post_selection_loading').css('visibility', 'hidden');
       }
     },
@@ -428,11 +428,11 @@ define([
   });
 
   var EmptyPostSelectionSettingsView = Marionette.View.extend({
-    getTemplate: function() { return templates.emptyPostPostsBlockSettings; }
+    getTemplate: function() { return window.templates.emptyPostPostsBlockSettings; }
   });
 
   var SinglePostSelectionSettingsView = Marionette.View.extend({
-    getTemplate: function() { return templates.singlePostPostsBlockSettings; },
+    getTemplate: function() { return window.templates.singlePostPostsBlockSettings; },
     events: function() {
       return {
         'change .mailpoet_select_post_checkbox': 'postSelectionChange'
@@ -459,28 +459,28 @@ define([
   });
 
   var PostsDisplayOptionsSettingsView = base.BlockSettingsView.extend({
-    getTemplate: function() { return templates.displayOptionsPostsBlockSettings; },
+    getTemplate: function() { return window.templates.displayOptionsPostsBlockSettings; },
     events: function() {
       return {
-        "click .mailpoet_posts_select_button": 'showButtonSettings',
-        "click .mailpoet_posts_select_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')
       };
     },
     templateContext: function() {
@@ -564,7 +564,7 @@ define([
   });
 
   Module.PostsWidgetView = base.WidgetView.extend({
-    getTemplate: function() { return templates.postsInsertion; },
+    getTemplate: function() { return window.templates.postsInsertion; },
     behaviors: {
       DraggableBehavior: {
         cloneOriginal: true,

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

@@ -9,9 +9,9 @@ define([
   'backbone.supermodel',
   'underscore',
   'jquery'
-  ], function(App, BaseBlock, Backbone, Marionette, SuperModel, _, jQuery) {
+], function(App, BaseBlock, Backbone, Marionette, SuperModel, _, jQuery) {
 
-  "use strict";
+  'use strict';
 
   var Module = {},
     base = BaseBlock,
@@ -85,9 +85,9 @@ define([
 
   var SocialIconView = Marionette.View.extend({
     tagName: 'span',
-    getTemplate: function() { return templates.socialIconBlock; },
+    getTemplate: function() { return window.templates.socialIconBlock; },
     modelEvents: {
-      'change': 'render'
+      change: 'render'
     },
     templateContext: function() {
       var allIconSets = App.getAvailableStyles().get('socialIconSets');
@@ -105,7 +105,7 @@ define([
 
   Module.SocialBlockView = base.BlockView.extend({
     className: 'mailpoet_block mailpoet_social_block mailpoet_droppable_block',
-    getTemplate: function() { return templates.socialBlock; },
+    getTemplate: function() { return window.templates.socialBlock; },
     regions: _.extend({}, base.BlockView.prototype.regions, {
       icons: '.mailpoet_social'
     }),
@@ -121,7 +121,7 @@ define([
       this.showChildView('toolsRegion', this.toolsView);
       this.showChildView('icons', new Module.SocialIconCollectionView({
         collection: this.model.get('icons')
-      }))
+      }));
     }
   });
 
@@ -131,14 +131,14 @@ define([
 
   // Sidebar view container
   Module.SocialBlockSettingsView = base.BlockSettingsView.extend({
-    getTemplate: function() { return templates.socialBlockSettings; },
+    getTemplate: function() { return window.templates.socialBlockSettings; },
     regions: {
       iconRegion: '#mailpoet_social_icons_selection',
       stylesRegion: '#mailpoet_social_icons_styles'
     },
     events: function() {
       return {
-        "click .mailpoet_done_editing": "close"
+        'click .mailpoet_done_editing': 'close'
       };
     },
     initialize: function() {
@@ -155,14 +155,14 @@ define([
 
   // Single icon settings view, used by the selector view
   SocialBlockSettingsIconView = Marionette.View.extend({
-    getTemplate: function() { return templates.socialSettingsIcon; },
+    getTemplate: function() { return window.templates.socialSettingsIcon; },
     events: function() {
       return {
-        "click .mailpoet_delete_block": "deleteIcon",
-        "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: {
@@ -212,9 +212,9 @@ define([
 
   // Select icons section container view
   SocialBlockSettingsIconSelectorView = Marionette.View.extend({
-    getTemplate: function() { return templates.socialSettingsIconSelector; },
+    getTemplate: function() { return window.templates.socialSettingsIconSelector; },
     regions: {
-      'icons': '#mailpoet_social_icon_selector_contents'
+      icons: '#mailpoet_social_icon_selector_contents'
     },
     events: {
       'click .mailpoet_add_social_icon': 'addSocialIcon'
@@ -235,9 +235,9 @@ define([
   });
 
   SocialBlockSettingsStylesView = Marionette.View.extend({
-    getTemplate: function() { return templates.socialSettingsStyles; },
+    getTemplate: function() { return window.templates.socialSettingsStyles; },
     modelEvents: {
-      'change': 'render'
+      change: 'render'
     },
     events: {
       'click .mailpoet_social_icon_set': 'changeSocialIconSet'
@@ -263,7 +263,7 @@ define([
   });
 
   Module.SocialWidgetView = base.WidgetView.extend({
-    getTemplate: function() { return templates.socialInsertion; },
+    getTemplate: function() { return window.templates.socialInsertion; },
     behaviors: {
       DraggableBehavior: {
         cloneOriginal: true,

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

@@ -5,9 +5,9 @@ define([
   'newsletter_editor/App',
   'newsletter_editor/blocks/base',
   'underscore'
-  ], function(App, BaseBlock, _) {
+], function(App, BaseBlock, _) {
 
-  "use strict";
+  'use strict';
 
   var Module = {},
     base = BaseBlock;
@@ -27,8 +27,8 @@ define([
   });
 
   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',
@@ -66,17 +66,17 @@ define([
   });
 
   Module.SpacerBlockSettingsView = base.BlockSettingsView.extend({
-    getTemplate: function() { return templates.spacerBlockSettings; },
+    getTemplate: function() { return window.templates.spacerBlockSettings; },
     events: function() {
       return {
-        "change .mailpoet_field_spacer_background_color": _.partial(this.changeColorField, "styles.block.backgroundColor"),
-        "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,

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

@@ -4,10 +4,11 @@
 define([
   'newsletter_editor/App',
   'newsletter_editor/blocks/base',
-    'underscore'
-  ], function(App, BaseBlock, _) {
+  'underscore',
+  'mailpoet'
+], function(App, BaseBlock, _, MailPoet) {
 
-  "use strict";
+  'use strict';
 
   var Module = {},
     base = BaseBlock;
@@ -22,17 +23,17 @@ define([
   });
 
   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 lists code textcolor colorpicker mailpoet_shortcodes paste",
+        plugins: 'link lists code textcolor colorpicker mailpoet_shortcodes paste',
         configurationFilter: function(originalSettings) {
           return _.extend({}, originalSettings, {
             mailpoet_shortcodes: App.getConfig().get('shortcodes').toJSON(),
@@ -78,11 +79,11 @@ define([
   });
 
   Module.TextBlockSettingsView = base.BlockSettingsView.extend({
-    getTemplate: function() { return templates.textBlockSettings; }
+    getTemplate: function() { return window.templates.textBlockSettings; }
   });
 
   Module.TextWidgetView = base.WidgetView.extend({
-    getTemplate: function() { return templates.textInsertion; },
+    getTemplate: function() { return window.templates.textInsertion; },
     behaviors: {
       DraggableBehavior: {
         cloneOriginal: true,

assets/js/src/newsletter_editor/communicationsFix.js

@@ -23,6 +23,7 @@
   }
 }(this, function(Marionette, Radio, _) {
   'use strict';
+
   var MarionetteApplication = Marionette.Application;
   MarionetteApplication.prototype._initChannel = function () {
     this.channelName = _.result(this, 'channelName') || 'global';

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

@@ -3,7 +3,7 @@ define([
   'underscore',
   'mailpoet',
   'ajax'
-  ], function(App, _, MailPoet) {
+], function(App, _, MailPoet) {
 
   var Module = {};
 

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

@@ -1,7 +1,7 @@
 define([
   'newsletter_editor/App',
   'backbone.supermodel'
-  ], function(App, SuperModel) {
+], function(App, SuperModel) {
 
   var Module = {};
 

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

@@ -3,8 +3,8 @@ define([
   'backbone.supermodel',
   'underscore',
   'mailpoet'
-  ], function(App, SuperModel, _, MailPoet) {
-  "use strict";
+], function(App, SuperModel, _, MailPoet) {
+  'use strict';
 
   var Module = {};
 
@@ -34,14 +34,14 @@ define([
     if (type in Module._blockTypes) {
       return Module._blockTypes[type].blockModel;
     } else {
-      throw "Block type not supported: " + type;
+      throw 'Block type not supported: ' + type;
     }
   };
   Module.getBlockTypeView = function(type) {
     if (type in Module._blockTypes) {
       return Module._blockTypes[type].blockView;
     } else {
-      throw "Block type not supported: " + type;
+      throw 'Block type not supported: ' + type;
     }
   };
 

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

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

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

@@ -8,8 +8,10 @@ define([
   'jquery',
   'blob',
   'file-saver',
-    'html2canvas'
-  ], function(
+  'html2canvas',
+  'underscore',
+  'jquery'
+], function(
   App,
   CommunicationComponent,
   MailPoet,
@@ -19,10 +21,12 @@ define([
   jQuery,
   Blob,
   FileSaver,
-    html2canvas
-  ) {
+  html2canvas,
+  _,
+  $
+) {
 
-  "use strict";
+  'use strict';
 
   var Module = {},
     saveTimeout;
@@ -65,15 +69,6 @@ define([
     });
   };
 
-  // For getting a promise after triggering save event
-  Module.saveAndProvidePromise = function(saveResult) {
-    var result = saveResult;
-    var promise = Module.save();
-    if (saveResult !== undefined) {
-      result.promise = promise;
-    }
-  };
-
   Module.getThumbnail = function(element, options) {
     var promise = html2canvas(element, options || {});
 
@@ -82,8 +77,8 @@ define([
       // Removes 1px left transparent border from resulting canvas.
 
       var oldContext = oldCanvas.getContext('2d'),
-          newCanvas = document.createElement("canvas"),
-          newContext = newCanvas.getContext("2d"),
+        newCanvas = document.createElement('canvas'),
+        newContext = newCanvas.getContext('2d'),
         leftBorderWidth = 1;
 
       newCanvas.width = oldCanvas.width;
@@ -148,7 +143,7 @@ define([
   };
 
   Module.SaveView = Marionette.View.extend({
-    getTemplate: function() { return templates.save; },
+    getTemplate: function() { return window.templates.save; },
     events: {
       'click .mailpoet_save_button': 'save',
       'click .mailpoet_save_show_options': 'toggleSaveOptions',
@@ -169,7 +164,7 @@ define([
     },
     save: function() {
       this.hideOptionContents();
-      App.getChannel().trigger('save');
+      App.getChannel().request('save');
     },
     beforeSave: function() {
       // TODO: Add a loading animation instead
@@ -289,7 +284,10 @@ define([
     next: function() {
       this.hideOptionContents();
       if(!this.$('.mailpoet_save_next').hasClass('button-disabled')) {
+        Module._cancelAutosave();
+        Module.save().done(function(response) {
           window.location.href = App.getConfig().get('urls.send');
+        });
       }
     },
     validateNewsletter: function(jsonObject) {
@@ -300,8 +298,8 @@ define([
 
       var contents = JSON.stringify(jsonObject);
       if (App.getConfig().get('validation.validateUnsubscribeLinkPresent') &&
-          contents.indexOf("[link:subscription_unsubscribe_url]") < 0 &&
-          contents.indexOf("[link:subscription_unsubscribe]") < 0) {
+          contents.indexOf('[link:subscription_unsubscribe_url]') < 0 &&
+          contents.indexOf('[link:subscription_unsubscribe]') < 0) {
         this.showValidationError(MailPoet.I18n.t('unsubscribeLinkMissing'));
         return;
       }
@@ -326,13 +324,19 @@ define([
     // may be requested
     var AUTOSAVE_DELAY_DURATION = 1000;
 
-    // Cancel save timer if another change happens before it completes
-    if (saveTimeout) clearTimeout(saveTimeout);
+    Module._cancelAutosave();
     saveTimeout = setTimeout(function() {
-      App.getChannel().trigger('save');
+      App.getChannel().request('save').always(function() {
+        Module._cancelAutosave();
+      });
+    }, AUTOSAVE_DELAY_DURATION);
+  };
+
+  Module._cancelAutosave = function() {
+    if (!saveTimeout) return;
+
     clearTimeout(saveTimeout);
     saveTimeout = undefined;
-    }, AUTOSAVE_DELAY_DURATION);
   };
 
   Module.beforeExitWithUnsavedChanges = function(e) {
@@ -350,12 +354,12 @@ define([
 
   App.on('before:start', function(App, options) {
     var Application = App;
-    Application.save = Module.saveAndProvidePromise;
+    Application.save = Module.save;
     Application.getChannel().on('autoSave', Module.autoSave);
 
     window.onbeforeunload = Module.beforeExitWithUnsavedChanges;
 
-    Application.getChannel().on('save', function(saveResult) { Application.save(saveResult); });
+    Application.getChannel().reply('save', Application.save);
   });
 
   App.on('start', function(App, options) {

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

@@ -8,7 +8,7 @@ define([
   'underscore',
   'jquery',
   'sticky-kit'
-  ], function(
+], function(
   App,
   CommunicationComponent,
   MailPoet,
@@ -20,7 +20,7 @@ define([
   StickyKit
   ) {
 
-  "use strict";
+  'use strict';
 
   var Module = {};
 
@@ -53,7 +53,7 @@ define([
   Module.getLayoutWidgets = function() { return Module._layoutWidgets; };
 
   var SidebarView = Marionette.View.extend({
-    getTemplate: function() { return templates.sidebar; },
+    getTemplate: function() { return window.templates.sidebar; },
     regions: {
       contentRegion: '.mailpoet_content_region',
       layoutRegion: '.mailpoet_layout_region',
@@ -69,7 +69,7 @@ define([
           'slideUp',
           {
             duration: 250,
-            easing: "easeOut",
+            easing: 'easeOut',
             complete: function() {
               $openRegion.addClass('closed');
             }.bind(this)
@@ -81,7 +81,7 @@ define([
             'slideDown',
             {
               duration: 250,
-              easing: "easeIn",
+              easing: 'easeIn',
               complete: function() {
                 $targetRegion.removeClass('closed');
               }
@@ -147,7 +147,7 @@ define([
    * Responsible for rendering draggable content widgets
    */
   Module.SidebarWidgetsView = Marionette.View.extend({
-    getTemplate: function() { return templates.sidebarContent; },
+    getTemplate: function() { return window.templates.sidebarContent; },
     regions: {
       widgets: '.mailpoet_region_content'
     },
@@ -167,53 +167,53 @@ define([
    * Responsible for rendering draggable layout widgets
    */
   Module.SidebarLayoutWidgetsView = Module.SidebarWidgetsView.extend({
-    getTemplate: function() { return templates.sidebarLayout; }
+    getTemplate: function() { return window.templates.sidebarLayout; }
   });
 
   /**
    * Responsible for managing global styles
    */
   Module.SidebarStylesView = Marionette.View.extend({
-    getTemplate: function() { return templates.sidebarStyles; },
+    getTemplate: function() { return window.templates.sidebarStyles; },
     behaviors: {
       ColorPickerBehavior: {}
     },
     events: function() {
       return {
-        "change #mailpoet_text_font_color": _.partial(this.changeColorField, 'text.fontColor'),
-        "change #mailpoet_text_font_family": function(event) {
+        'change #mailpoet_text_font_color': _.partial(this.changeColorField, 'text.fontColor'),
+        'change #mailpoet_text_font_family': function(event) {
           this.model.set('text.fontFamily', event.target.value);
         },
-        "change #mailpoet_text_font_size": function(event) {
+        'change #mailpoet_text_font_size': function(event) {
           this.model.set('text.fontSize', event.target.value);
         },
-        "change #mailpoet_h1_font_color": _.partial(this.changeColorField, 'h1.fontColor'),
-        "change #mailpoet_h1_font_family": function(event) {
+        'change #mailpoet_h1_font_color': _.partial(this.changeColorField, 'h1.fontColor'),
+        'change #mailpoet_h1_font_family': function(event) {
           this.model.set('h1.fontFamily', event.target.value);
         },
-        "change #mailpoet_h1_font_size": function(event) {
+        'change #mailpoet_h1_font_size': function(event) {
           this.model.set('h1.fontSize', event.target.value);
         },
-        "change #mailpoet_h2_font_color": _.partial(this.changeColorField, 'h2.fontColor'),
-        "change #mailpoet_h2_font_family": function(event) {
+        'change #mailpoet_h2_font_color': _.partial(this.changeColorField, 'h2.fontColor'),
+        'change #mailpoet_h2_font_family': function(event) {
           this.model.set('h2.fontFamily', event.target.value);
         },
-        "change #mailpoet_h2_font_size": function(event) {
+        'change #mailpoet_h2_font_size': function(event) {
           this.model.set('h2.fontSize', event.target.value);
         },
-        "change #mailpoet_h3_font_color": _.partial(this.changeColorField, 'h3.fontColor'),
-        "change #mailpoet_h3_font_family": function(event) {
+        'change #mailpoet_h3_font_color': _.partial(this.changeColorField, 'h3.fontColor'),
+        'change #mailpoet_h3_font_family': function(event) {
           this.model.set('h3.fontFamily', event.target.value);
         },
-        "change #mailpoet_h3_font_size": function(event) {
+        'change #mailpoet_h3_font_size': function(event) {
           this.model.set('h3.fontSize', event.target.value);
         },
-        "change #mailpoet_a_font_color": _.partial(this.changeColorField, 'link.fontColor'),
-        "change #mailpoet_a_font_underline": function(event) {
+        'change #mailpoet_a_font_color': _.partial(this.changeColorField, 'link.fontColor'),
+        'change #mailpoet_a_font_underline': function(event) {
           this.model.set('link.textDecoration', (event.target.checked) ? event.target.value : 'none');
         },
-        "change #mailpoet_newsletter_background_color": _.partial(this.changeColorField, 'wrapper.backgroundColor'),
-        "change #mailpoet_background_color": _.partial(this.changeColorField, 'body.backgroundColor')
+        'change #mailpoet_newsletter_background_color': _.partial(this.changeColorField, 'wrapper.backgroundColor'),
+        'change #mailpoet_background_color': _.partial(this.changeColorField, 'body.backgroundColor')
       };
     },
     templateContext: function() {
@@ -238,7 +238,7 @@ define([
   });
 
   Module.SidebarPreviewView = Marionette.View.extend({
-    getTemplate: function() { return templates.sidebarPreview; },
+    getTemplate: function() { return window.templates.sidebarPreview; },
     events: {
       'click .mailpoet_show_preview': 'showPreview',
       'click #mailpoet_send_preview': 'sendPreview'
@@ -321,10 +321,7 @@ define([
       MailPoet.Modal.loading(true);
 
       // save before sending
-      var saveResult = {promise: null};
-      App.getChannel().trigger('save', saveResult);
-
-      saveResult.promise.always(function() {
+      App.getChannel().request('save').always(function() {
         CommunicationComponent.previewNewsletter(data).always(function() {
           MailPoet.Modal.loading(false);
         }).done(function(response) {
@@ -349,7 +346,7 @@ define([
   });
 
   Module.NewsletterPreviewView = Marionette.View.extend({
-    getTemplate: function() { return templates.newsletterPreview; },
+    getTemplate: function() { return window.templates.newsletterPreview; },
     initialize: function(options) {
       this.previewUrl = options.previewUrl;
       this.width = '100%';

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

@@ -1,10 +1,11 @@
 define([
   'newsletter_editor/App',
   'backbone.marionette',
-    'backbone.supermodel'
-  ], function(App, Marionette, SuperModel) {
+  'backbone.supermodel',
+  'underscore'
+], function(App, Marionette, SuperModel, _) {
 
-  "use strict";
+  'use strict';
 
   var Module = {};
 
@@ -47,9 +48,9 @@ define([
   });
 
   Module.StylesView = Marionette.View.extend({
-    getTemplate: function() { return templates.styles; },
+    getTemplate: function() { return window.templates.styles; },
     modelEvents: {
-      'change': 'render'
+      change: 'render'
     },
     serializeData: function() {
       return this.model.toJSON();

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

@@ -46,8 +46,8 @@ tinymce.PluginManager.add('mailpoet_shortcodes', function(editor, url) {
 
       // Open window
       editor.windowManager.open({
-        height: parseInt(editor.getParam("plugin_mailpoet_shortcodes_height", 400)),
-        width: parseInt(editor.getParam("plugin_mailpoet_shortcodes_width", 450)),
+        height: parseInt(editor.getParam('plugin_mailpoet_shortcodes_height', 400)),
+        width: parseInt(editor.getParam('plugin_mailpoet_shortcodes_width', 450)),
         autoScroll: true,
         title: editor.settings.mailpoet_shortcodes_window_title,
         body: shortcodes,

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

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

assets/js/src/newsletters/breadcrumb.jsx

@@ -41,7 +41,7 @@ define(
       render: function () {
         const steps = this.state.steps.map((step, index) => {
           const stepClasses = classNames(
-            { 'mailpoet_current': (this.props.step === step.name) }
+            { mailpoet_current: (this.props.step === step.name) }
           );
 
           let label = step.label;

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

@@ -69,7 +69,7 @@ const _QueueMixin = {
       }
       const progressClasses = classNames(
         'mailpoet_progress',
-        { 'mailpoet_progress_complete': newsletter.queue.status === 'completed' }
+        { mailpoet_progress_complete: newsletter.queue.status === 'completed' }
       );
 
       // calculate percentage done
@@ -84,8 +84,8 @@ const _QueueMixin = {
           <span>
             {
               MailPoet.I18n.t('newsletterQueueCompleted')
-              .replace("%$1d", newsletter.queue.count_processed)
-              .replace("%$2d", newsletter.queue.count_total)
+              .replace('%$1d', newsletter.queue.count_processed)
+              .replace('%$2d', newsletter.queue.count_total)
             }
           </span>
         );
@@ -120,7 +120,7 @@ const _QueueMixin = {
         percentage = MailPoet.I18n.t('noSubscribers');
       } else {
         progress_bar_width = percentage;
-        percentage += "%";
+        percentage += '%';
       }
 
       return (
@@ -128,7 +128,7 @@ const _QueueMixin = {
           <div className={ progressClasses }>
             <span
               className="mailpoet_progress_bar"
-                style={ { width: progress_bar_width + "%" } }
+              style={ { width: progress_bar_width + '%' } }
               ></span>
             <span className="mailpoet_progress_label">
               { percentage }
@@ -239,7 +239,7 @@ const _StatisticsMixin = {
         <div>
           <span className="mailpoet_stats_text">
             { percentage_opened_display }%,
-            { " " }
+            { ' ' }
             { percentage_clicked_display }%
             <span className="mailpoet_stat_hidden">
               , { percentage_unsubscribed_display }%
@@ -327,7 +327,7 @@ const _MailerMixin = {
       MailPoet.I18n.t('mailerCheckSettingsNotice'),
       /\[link\](.*?)\[\/link\]/g,
       match => (
-        <a href={`?page=mailpoet-settings#mta`}>{ match }</a>
+        <a href={'?page=mailpoet-settings#mta'} key="check-sending">{ match }</a>
       )
     );
     if (state.meta.mta_log.error.operation === 'send') {
@@ -374,8 +374,6 @@ const _MailerMixin = {
 };
 
 
-
-
 export { _QueueMixin as QueueMixin };
 export { _StatisticsMixin as StatisticsMixin };
 export { _MailerMixin as MailerMixin };

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

@@ -317,7 +317,7 @@ const NewsletterListNotification = React.createClass({
         <ListingTabs tab="notification" />
 
         <Listing
-          limit={ mailpoet_listing_per_page }
+          limit={ window.mailpoet_listing_per_page }
           location={ this.props.location }
           params={ this.props.params }
           endpoint="newsletters"

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

@@ -110,7 +110,7 @@ const NewsletterListNotificationHistory = React.createClass({
         >{MailPoet.I18n.t('backToPostNotifications')}</Link>
 
         <Listing
-          limit={ mailpoet_listing_per_page }
+          limit={ window.mailpoet_listing_per_page }
           location={ this.props.location }
           params={ this.props.params }
           endpoint="newsletters"

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

@@ -218,7 +218,7 @@ const NewsletterListStandard = React.createClass({
         <ListingTabs tab="standard" />
 
         <Listing
-          limit={ mailpoet_listing_per_page }
+          limit={ window.mailpoet_listing_per_page }
           location={ this.props.location }
           params={ this.props.params }
           endpoint="newsletters"

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

@@ -295,7 +295,7 @@ const NewsletterListWelcome = React.createClass({
         <ListingTabs tab="welcome" />
 
         <Listing
-          limit={ mailpoet_listing_per_page }
+          limit={ window.mailpoet_listing_per_page }
           location={ this.props.location }
           params={ this.props.params }
           endpoint="newsletters"

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

@@ -5,18 +5,18 @@ const timeFormat = window.mailpoet_time_format || 'H:i';
 
 // welcome emails
 const _timeDelayValues = {
-  'immediate': MailPoet.I18n.t('delayImmediately'),
-  'hours': MailPoet.I18n.t('delayHoursAfter'),
-  'days': MailPoet.I18n.t('delayDaysAfter'),
-  'weeks': MailPoet.I18n.t('delayWeeksAfter'),
+  immediate: MailPoet.I18n.t('delayImmediately'),
+  hours: MailPoet.I18n.t('delayHoursAfter'),
+  days: MailPoet.I18n.t('delayDaysAfter'),
+  weeks: MailPoet.I18n.t('delayWeeksAfter'),
 };
 
 const _intervalValues = {
-  'daily': MailPoet.I18n.t('daily'),
-  'weekly': MailPoet.I18n.t('weekly'),
-  'monthly': MailPoet.I18n.t('monthly'),
-  'nthWeekDay': MailPoet.I18n.t('monthlyEvery'),
-  'immediately': MailPoet.I18n.t('immediately'),
+  daily: MailPoet.I18n.t('daily'),
+  weekly: MailPoet.I18n.t('weekly'),
+  monthly: MailPoet.I18n.t('monthly'),
+  nthWeekDay: MailPoet.I18n.t('monthlyEvery'),
+  immediately: MailPoet.I18n.t('immediately'),
 };
 
 // notification emails
@@ -60,7 +60,7 @@ const _monthDayValues = _.object(
     if (labels[day] !== undefined) {
       label = labels[day];
     } else {
-      label = MailPoet.I18n.t('nth').replace("%$1d", day + 1);
+      label = MailPoet.I18n.t('nth').replace('%$1d', day + 1);
     }
     return [day + 1, label];
   }
@@ -68,10 +68,10 @@ const _monthDayValues = _.object(
 );
 
 const _nthWeekDayValues = {
-  '1': MailPoet.I18n.t('first'),
-  '2': MailPoet.I18n.t('second'),
-  '3': MailPoet.I18n.t('third'),
-  'L': MailPoet.I18n.t('last'),
+  1: MailPoet.I18n.t('first'),
+  2: MailPoet.I18n.t('second'),
+  3: MailPoet.I18n.t('third'),
+  L: MailPoet.I18n.t('last'),
 };
 
 export { _timeDelayValues as timeDelayValues };

assets/js/src/newsletters/send.jsx

@@ -10,6 +10,7 @@ define(
     'newsletters/send/welcome.jsx',
     'newsletters/breadcrumb.jsx',
     'help-tooltip.jsx',
+    'jquery',
   ],
   (
     React,
@@ -21,7 +22,8 @@ define(
     NotificationNewsletterFields,
     WelcomeNewsletterFields,
     Breadcrumb,
-    HelpTooltip
+    HelpTooltip,
+    jQuery
   ) => {
 
     const NewsletterSend = React.createClass({
@@ -119,7 +121,7 @@ define(
                     MailPoet.trackEvent('Emails > Welcome email activated', {
                       'MailPoet Free version': window.mailpoet_version,
                       'List type': opts.event,
-                      'Delay': opts.afterTimeNumber + ' ' + opts.afterTimeType,
+                      Delay: opts.afterTimeNumber + ' ' + opts.afterTimeType,
                     });
                   } else if (response.data.type === 'notification') {
                     MailPoet.Notice.success(
@@ -127,7 +129,7 @@ define(
                     );
                     MailPoet.trackEvent('Emails > Post notifications activated', {
                       'MailPoet Free version': window.mailpoet_version,
-                      'Frequency': opts.intervalType,
+                      Frequency: opts.intervalType,
                     });
                   }
                 }).fail(this._showError);
@@ -162,7 +164,9 @@ define(
                   }
                 }).fail(this._showError);
             }
-          }).fail(this._showError).always(() => {
+          })
+          .fail(this._showError)
+          .always(() => {
             this.setState({ loading: false });
           });
         }
@@ -196,7 +200,9 @@ define(
                 );
               }
             });
-          }).fail(this._showError).always(() => {
+          })
+          .fail(this._showError)
+          .always(() => {
             this.setState({ loading: false });
           });
         }

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

@@ -195,7 +195,7 @@ define(
     });
 
     const DateTime = React.createClass({
-      _DATE_TIME_SEPARATOR: " ",
+      _DATE_TIME_SEPARATOR: ' ',
       getInitialState: function () {
         return this._buildStateFromProps(this.props);
       },

assets/js/src/newsletters/templates.jsx

@@ -122,7 +122,7 @@ define(
                     MailPoet.I18n.t('mailpoetGuideTemplateTitle'),
                   description:
                     MailPoet.I18n.t('mailpoetGuideTemplateDescription'),
-                  readonly: "1",
+                  readonly: '1',
                 },
               ];
             }
@@ -179,7 +179,7 @@ define(
           window.confirm(
             (
               MailPoet.I18n.t('confirmTemplateDeletion')
-            ).replace("%$1s", template.name)
+            ).replace('%$1s', template.name)
           )
         ) {
           MailPoet.Ajax.post({
@@ -263,7 +263,7 @@ define(
                   {MailPoet.I18n.t('select')}
                 </a>
               </div>
-              { (template.readonly === "1") ? false : deleteLink }
+              { (template.readonly === '1') ? false : deleteLink }
             </li>
           );
         });
@@ -271,7 +271,7 @@ define(
         const boxClasses = classNames(
           'mailpoet_boxes',
           'clearfix',
-          { 'mailpoet_boxes_loading': this.state.loading }
+          { mailpoet_boxes_loading: this.state.loading }
         );
 
         return (

assets/js/src/newsletters/types.jsx

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

assets/js/src/newsletters/types/welcome/scheduling.jsx

@@ -16,8 +16,8 @@ const availableSegments = _.filter(
 const events = {
   name: 'event',
   values: {
-    'segment': MailPoet.I18n.t('onSubscriptionToList'),
-    'user': MailPoet.I18n.t('onWPUserRegistration'),
+    segment: MailPoet.I18n.t('onSubscriptionToList'),
+    user: MailPoet.I18n.t('onWPUserRegistration'),
   },
 };
 

assets/js/src/notice.js

@@ -1,5 +1,6 @@
 define('notice', ['mailpoet', 'jquery'], function(mp, jQuery) {
-  "use strict";
+  'use strict';
+
   /*==================================================================================================
 
       MailPoet Notice:
@@ -124,7 +125,7 @@ define('notice', ['mailpoet', 'jquery'], function(mp, jQuery) {
       if (
         this.options.id !== null
         &&
-        jQuery('[data-id="'+this.options.id+'"').length > 0
+        jQuery('[data-id="'+this.options.id+'"]').length > 0
       ) {
         this.updateNotice();
       } else {

assets/js/src/num.js

@@ -19,4 +19,4 @@ define('num',
       }
     };
 
-});
+  });

assets/js/src/public.js

@@ -33,13 +33,13 @@ function(
         form.parsley().on('form:submit', function(parsley) {
           var form_data = form.serializeObject() || {};
           // check if we're on the same domain
-          if(isSameDomain(MailPoetForm.ajax_url) === false) {
+          if(isSameDomain(window.MailPoetForm.ajax_url) === false) {
             // non ajax post request
             return true;
           } else {
             // ajax request
             MailPoet.Ajax.post({
-              url: MailPoetForm.ajax_url,
+              url: window.MailPoetForm.ajax_url,
               token: form_data.token,
               api_version: form_data.api_version,
               endpoint: 'subscribers',

assets/js/src/segments/form.jsx

@@ -32,6 +32,9 @@ define(
       },
       onCreate: function () {
         MailPoet.Notice.success(MailPoet.I18n.t('segmentAdded'));
+        MailPoet.trackEvent('Lists > Add new', {
+          'MailPoet Free version': window.mailpoet_version,
+        });
       },
     };
 

assets/js/src/segments/list.jsx

@@ -258,7 +258,7 @@ const SegmentList = React.createClass({
         </h1>
 
         <Listing
-          limit={ mailpoet_listing_per_page }
+          limit={ window.mailpoet_listing_per_page }
           location={ this.props.location }
           params={ this.props.params }
           messages={ messages }

assets/js/src/settings/reinstall_from_scratch.js

@@ -15,9 +15,9 @@ define(
 
         MailPoet.Modal.loading(true);
         MailPoet.Ajax.post({
-          'api_version': window.mailpoet_api_version,
-          'endpoint': 'setup',
-          'action': 'reset'
+          api_version: window.mailpoet_api_version,
+          endpoint: 'setup',
+          action: 'reset'
         }).always(function () {
           MailPoet.Modal.loading(false);
         }).done(function () {

assets/js/src/subscribers/form.jsx

@@ -43,10 +43,10 @@ define(
         label: MailPoet.I18n.t('status'),
         type: 'select',
         values: {
-          'subscribed': MailPoet.I18n.t('subscribed'),
-          'unconfirmed': MailPoet.I18n.t('unconfirmed'),
-          'unsubscribed': MailPoet.I18n.t('unsubscribed'),
-          'bounced': MailPoet.I18n.t('bounced'),
+          subscribed: MailPoet.I18n.t('subscribed'),
+          unconfirmed: MailPoet.I18n.t('unconfirmed'),
+          unsubscribed: MailPoet.I18n.t('unsubscribed'),
+          bounced: MailPoet.I18n.t('bounced'),
         },
         filter: function (subscriber, value) {
           if (~~(subscriber.wp_user_id) > 0 && value === 'unconfirmed') {
@@ -144,6 +144,9 @@ define(
       },
       onCreate: function () {
         MailPoet.Notice.success(MailPoet.I18n.t('subscriberAdded'));
+        MailPoet.trackEvent('Subscribers > Add new', {
+          'MailPoet Free version': window.mailpoet_version,
+        });
       },
     };
 

assets/js/src/subscribers/importExport/export.js

@@ -13,25 +13,25 @@ define(
    Handlebars,
    select2
  ) {
-   if (!jQuery("#mailpoet_subscribers_export").length) {
+   if (!jQuery('#mailpoet_subscribers_export').length) {
      return;
    }
    jQuery(document).ready(function () {
-     if (!exportData.segments) {
+     if (!window.exportData.segments) {
        return;
      }
      var subscribers_export_template =
       Handlebars.compile(jQuery('#mailpoet_subscribers_export_template').html());
 
      //render template
-     jQuery('#mailpoet_subscribers_export > div.inside').html(subscribers_export_template(exportData));
+     jQuery('#mailpoet_subscribers_export > div.inside').html(subscribers_export_template(window.exportData));
 
      // define reusable variables
-     var segmentsContainerElement = jQuery("#export_lists"),
-      subscriberFieldsContainerElement = jQuery("#export_columns"),
+     var segmentsContainerElement = jQuery('#export_lists'),
+       subscriberFieldsContainerElement = jQuery('#export_columns'),
        exportConfirmedOptionElement = jQuery(':radio[name="option_confirmed"]'),
        groupBySegmentOptionElement = jQuery(':checkbox[name="option_group_by_list"]'),
-      nextStepButton = jQuery("a.mailpoet_export_process"),
+       nextStepButton = jQuery('a.mailpoet_export_process'),
        renderSegmentsAndFields = function (container, data) {
          if (container.data('select2')) {
            container
@@ -77,9 +77,9 @@ define(
            }
          })
          .on('change', function () {
-           if ((exportData.segments && segmentsContainerElement.select2('data').length && subscriberFieldsContainerElement.select2('data').length)
+           if ((window.exportData.segments && segmentsContainerElement.select2('data').length && subscriberFieldsContainerElement.select2('data').length)
             ||
-            (!exportData.segments && subscriberFieldsContainerElement.select2('data').length)
+            (!window.exportData.segments && subscriberFieldsContainerElement.select2('data').length)
            ) {
              toggleNextStepButton('on');
            }
@@ -87,37 +87,37 @@ define(
              toggleNextStepButton('off');
            }
 
-           if (segmentsContainerElement.select2('data').length > 1 && exportData.groupBySegmentOption) {
+           if (segmentsContainerElement.select2('data').length > 1 && window.exportData.groupBySegmentOption) {
              jQuery('.mailpoet_group_by_list').show();
            }
-           else if (exportData.groupBySegmentOption) {
+           else if (window.exportData.groupBySegmentOption) {
              jQuery('.mailpoet_group_by_list').hide();
            }
          });
        };
 
      // set confirmed subscribers export option to false
-     exportData.exportConfirmedOption = false;
+     window.exportData.exportConfirmedOption = false;
 
-     renderSegmentsAndFields(subscriberFieldsContainerElement, subscriberFieldsSelect2);
-     renderSegmentsAndFields(segmentsContainerElement, segments);
+     renderSegmentsAndFields(subscriberFieldsContainerElement, window.subscriberFieldsSelect2);
+     renderSegmentsAndFields(segmentsContainerElement, window.segments);
 
      subscriberFieldsContainerElement.val([
        'email',
        'first_name',
        'last_name',
        'status'
-     ]).trigger("change");
+     ]).trigger('change');
 
      exportConfirmedOptionElement.change(function () {
        var selectedSegments = segmentsContainerElement.val();
        if (this.value == 1) {
-         exportData.exportConfirmedOption = true;
-         renderSegmentsAndFields(segmentsContainerElement, segmentsWithConfirmedSubscribers);
+         window.exportData.exportConfirmedOption = true;
+         renderSegmentsAndFields(segmentsContainerElement, window.segmentsWithConfirmedSubscribers);
        }
        else {
-         exportData.exportConfirmedOption = false;
-         renderSegmentsAndFields(segmentsContainerElement, segments);
+         window.exportData.exportConfirmedOption = false;
+         renderSegmentsAndFields(segmentsContainerElement, window.segments);
        }
        segmentsContainerElement.val(selectedSegments).trigger('change');
      });
@@ -137,26 +137,33 @@ define(
          return;
        }
        MailPoet.Modal.loading(true);
+       var exportFormat = jQuery(':radio[name="option_format"]:checked').val();
        MailPoet.Ajax.post({
          api_version: window.mailpoet_api_version,
          endpoint: 'ImportExport',
          action: 'processExport',
          data: JSON.stringify({
-            'export_confirmed_option': exportData.exportConfirmedOption,
-            'export_format_option': jQuery(':radio[name="option_format"]:checked').val(),
-            'group_by_segment_option': (groupBySegmentOptionElement.is(":visible")) ? groupBySegmentOptionElement.prop('checked') : false,
-            'segments': (exportData.segments) ? segmentsContainerElement.val() : false,
-            'subscriber_fields': subscriberFieldsContainerElement.val()
+           export_confirmed_option: window.exportData.exportConfirmedOption,
+           export_format_option: exportFormat,
+           group_by_segment_option: (groupBySegmentOptionElement.is(':visible')) ? groupBySegmentOptionElement.prop('checked') : false,
+           segments: (window.exportData.segments) ? segmentsContainerElement.val() : false,
+           subscriber_fields: subscriberFieldsContainerElement.val()
          })
        }).always(function(response) {
          MailPoet.Modal.loading(false);
        }).done(function(response) {
-          resultMessage = MailPoet.I18n.t('exportMessage')
+         var resultMessage = MailPoet.I18n.t('exportMessage')
          .replace('%1$s', '<strong>' + parseInt(response.data.totalExported).toLocaleString() + '</strong>')
          .replace('[link]', '<a href="' + response.data.exportFileURL + '" target="_blank" >')
          .replace('[/link]', '</a>');
          jQuery('#export_result_notice').html('<p>' + resultMessage + '</p>').show();
          window.location.href = response.data.exportFileURL;
+         MailPoet.trackEvent('Subscribers export completed', {
+           'Total exported': response.data.totalExported,
+           'Only confirmed?': window.exportData.exportConfirmedOption,
+           'File Format': exportFormat,
+           'MailPoet Free version': window.mailpoet_version
+         });
        }).fail(function(response) {
          if (response.errors.length > 0) {
            MailPoet.Notice.error(

assets/js/src/subscribers/importExport/import.js

@@ -1,5 +1,5 @@
 define(
-[
+  [
     'backbone',
     'underscore',
     'jquery',
@@ -27,12 +27,12 @@ define(
       jQuery(document).ready(function () {
         jQuery('input[name="select_method"]').attr('checked', false);
         // configure router
-        router = new (Backbone.Router.extend({
+        var router = new (Backbone.Router.extend({
           routes: {
             '': 'home',
-            'step1': 'step1',
-            'step2': 'step2',
-            'step3': 'step3'
+            step1: 'step1',
+            step2: 'step2',
+            step3: 'step3'
           },
           home: function () {
             this.navigate('step1', {trigger: true});
@@ -51,13 +51,13 @@ define(
          */
         router.on('route:step1', function () {
           // set or reset temporary validation rule on all columns
-          mailpoetColumns = jQuery.map(mailpoetColumns, function (column, columnIndex) {
+          window.mailpoetColumns = jQuery.map(window.mailpoetColumns, function (column, columnIndex) {
             var col = column;
             col.validation_rule = false;
             return col;
           });
 
-          if (typeof (importData.step1) !== 'undefined') {
+          if (typeof (window.importData.step1) !== 'undefined') {
             showCurrentStep();
             return;
           }
@@ -112,7 +112,7 @@ define(
            *  Paste
            */
           pasteInputElement
-              .attr('value', pasteInputPlaceholderElement).css('color', "#999")
+              .attr('value', pasteInputPlaceholderElement).css('color', '#999')
               .focus(function () {
                 if (jQuery(this).val() === pasteInputPlaceholderElement) {
                   jQuery(this).attr('value', '').css('color', '#222');
@@ -120,7 +120,7 @@ define(
               })
               .blur(function () {
                 if (jQuery(this).val() === '') {
-                  jQuery(this).attr('value', pasteInputPlaceholderElement).css('color', "#999");
+                  jQuery(this).attr('value', pasteInputPlaceholderElement).css('color', '#999');
                 }
               })
               .keyup(function () {
@@ -134,14 +134,14 @@ define(
             MailPoet.Notice.hide();
             // get an approximate size of textarea paste in bytes
             var pasteSize = encodeURI(pasteInputElement.val()).split(/%..|./).length - 1;
-            if (pasteSize > maxPostSizeBytes) {
+            if (pasteSize > window.maxPostSizeBytes) {
               MailPoet.Notice.error(MailPoet.I18n.t('maxPostSizeNotice'));
               return;
             }
             // delay loading indicator for 10ms or else it's just too fast :)
             MailPoet.Modal.loading(true);
             setTimeout(function () {
-              Papa.parse(pasteInputElement.val(), parseCSV());
+              Papa.parse(pasteInputElement.val(), parseCSV(false));
             }, 10);
           });
 
@@ -168,8 +168,8 @@ define(
               MailPoet.Modal.loading(true);
               setTimeout(function () {
                 uploadElement.parse({
-                  config: parseCSV()
-                })
+                  config: parseCSV(true)
+                });
               }, 10);
             }
           });
@@ -237,7 +237,11 @@ define(
             }).always(function(response) {
               MailPoet.Modal.loading(false);
             }).done(function(response) {
-              importData.step1 = response.data;
+              window.importData.step1 = response.data;
+              MailPoet.trackEvent('Subscribers import started', {
+                source: 'MailChimp',
+                'MailPoet Free version': window.mailpoet_version
+              });
               router.navigate('step2', {trigger: true});
             }).fail(function(response) {
               if (response.errors.length > 0) {
@@ -289,7 +293,7 @@ define(
             element.closest('table a').addClass(disabled);
           }
 
-          function parseCSV() {
+          function parseCSV(isFile) {
             var processedSubscribers = [],
               parsedEmails = [],
               duplicateEmails = [],
@@ -364,7 +368,7 @@ define(
                       for (var column in rowData) {
                         var email = detectAndCleanupEmail(rowData[column]);
                         if (emailColumnPosition === null
-                            && emailRegex.test(email)) {
+                            && window.emailRegex.test(email)) {
                           emailColumnPosition = column;
                           parsedEmails[email] = true; // add current e-mail to an object index
                           rowData[column] = email;
@@ -378,12 +382,12 @@ define(
                         processedSubscribers[0] = rowData;
                       }
                     }
-                    else if (rowData[emailColumnPosition] !== "") {
+                    else if (rowData[emailColumnPosition] !== '') {
                       var email = detectAndCleanupEmail(rowData[emailColumnPosition]);
                       if (_.has(parsedEmails, email)) {
                         duplicateEmails.push(email);
                       }
-                      else if (!emailRegex.test(email)) {
+                      else if (!window.emailRegex.test(email)) {
                         invalidEmails.push(rowData[emailColumnPosition]);
                       }
                       // if we haven't yet processed this e-mail and it passed
@@ -406,15 +410,19 @@ define(
                 ) {
                   // since we assume that the header line is always present, we need
                   // to detect the header by checking if it contains a valid e-mail address
-                  importData.step1 = {
-                    'header': (!emailRegex.test(
+                  window.importData.step1 = {
+                    header: (!window.emailRegex.test(
                             processedSubscribers[0][emailColumnPosition])
                     ) ? processedSubscribers.shift() : null,
-                    'subscribers': processedSubscribers,
-                    'subscribersCount': processedSubscribers.length,
-                    'duplicate': duplicateEmails,
-                    'invalid': invalidEmails
+                    subscribers: processedSubscribers,
+                    subscribersCount: processedSubscribers.length,
+                    duplicate: duplicateEmails,
+                    invalid: invalidEmails
                   };
+                  MailPoet.trackEvent('Subscribers import started', {
+                    source: isFile ? 'file upload' : 'pasted data',
+                    'MailPoet Free version': window.mailpoet_version
+                  });
                   router.navigate('step2', {trigger: true});
                 }
                 else {
@@ -425,12 +433,12 @@ define(
                   MailPoet.Notice.error(errorNotice);
                 }
               }
-            }
+            };
           }
         });
 
         router.on('route:step2', function () {
-          if (typeof (importData.step1) === 'undefined') {
+          if (typeof (window.importData.step1) === 'undefined') {
             router.navigate('step1', {trigger: true});
             return;
           }
@@ -438,7 +446,7 @@ define(
           var nextStepButton = jQuery('#step2_process'),
             previousStepButton = jQuery('#return_to_step1'),
           // create a copy of subscribers object for further manipulation
-              subscribers = jQuery.extend(true, {}, importData.step1),
+            subscribers = jQuery.extend(true, {}, window.importData.step1),
             subscribersDataTemplate =
                   Handlebars
                       .compile(jQuery('#subscribers_data_template')
@@ -512,13 +520,13 @@ define(
                 var details = jQuery('.mailpoet_subscribers_data_parse_results_details');
                 jQuery(details).toggle();
                 this.text =
-                    (jQuery(details).is(":visible"))
+                    (jQuery(details).is(':visible'))
                         ? MailPoet.I18n.t('hideDetails')
                         : MailPoet.I18n.t('showDetails');
               });
 
           // show available segments
-          if (mailpoetSegments.length) {
+          if (window.mailpoetSegments.length) {
             jQuery('.mailpoet_segments').show();
           }
           else {
@@ -565,14 +573,14 @@ define(
                       toggleNextStepButton('on');
                     }
                   }
-                })
+                });
           }
 
           jQuery('.mailpoet_create_segment').click(function() {
             MailPoet.Modal.popup({
               title: MailPoet.I18n.t('addNewList'),
               template: jQuery('#new_segment_template').html()
-            })
+            });
             jQuery('#new_segment_name').keypress(function(e) {
               if (e.which == 13) {
                 jQuery('#new_segment_process').click();
@@ -591,20 +599,20 @@ define(
                   description: segmentDescription
                 }
               }).done(function(response) {
-                mailpoetSegments.push({
-                  'id': response.data.id,
-                  'name': response.data.name,
-                  'subscriberCount': 0
+                window.mailpoetSegments.push({
+                  id: response.data.id,
+                  name: response.data.name,
+                  subscriberCount: 0
                 });
 
                 var selected_values = segmentSelectElement.val();
                 if (selected_values === null) {
-                  selected_values = [response.data.id]
+                  selected_values = [response.data.id];
                 } else {
                   selected_values.push(response.data.id);
                 }
 
-                enableSegmentSelection(mailpoetSegments);
+                enableSegmentSelection(window.mailpoetSegments);
                 segmentSelectElement.val(selected_values).trigger('change');
                 jQuery('.mailpoet_segments:hidden').show();
                 jQuery('.mailpoet_no_segments:visible').hide();
@@ -626,7 +634,7 @@ define(
 
           // register partial template that will contain subscribers data
           Handlebars.registerPartial(
-              "subscribers_data_template_partial",
+              'subscribers_data_template_partial',
               subscribersDataTemplatePartial
           );
 
@@ -641,16 +649,16 @@ define(
                   var columnData = subscribers.subscribers[0][i],
                     columnId = 'ignore'; // set default column type
                   // if the column is not undefined and has a valid e-mail, set type as email
-                  if (columnData % 1 !== 0 && emailRegex.test(columnData)) {
+                  if (columnData % 1 !== 0 && window.emailRegex.test(columnData)) {
                     columnId = 'email';
                   } else if (subscribers.header) {
                     var headerName = subscribers.header[i],
-                        headerNameMatch = mailpoetColumns.map(function (el) {
+                      headerNameMatch = window.mailpoetColumns.map(function (el) {
                         return el.name;
                       }).indexOf(headerName);
                     // set column type using header
                     if (headerNameMatch !== -1) {
-                      columnId = mailpoetColumns[headerNameMatch].id;
+                      columnId = window.mailpoetColumns[headerNameMatch].id;
                     }// set column type using header name
                     else if (headerName) {
                       if (/first|first name|given name/i.test(headerName)) {
@@ -670,7 +678,7 @@ define(
                       && displayedColumnsIds.indexOf(columnId) === -1)
                           ? columnId
                           : 'ignore';
-                  displayedColumns[i] = {'column_id': columnId};
+                  displayedColumns[i] = {column_id: columnId};
                   displayedColumnsIds.push(columnId);
                 }
                 return options.fn(displayedColumns);
@@ -715,7 +723,7 @@ define(
           // filter displayed data
           jQuery('select.mailpoet_subscribers_column_data_match')
               .select2({
-                data: mailpoetColumnsSelect2,
+                data: window.mailpoetColumnsSelect2,
                 width: '15em',
                 templateResult: function (item) {
                   return item.name;
@@ -747,28 +755,28 @@ define(
                       data: data
                     }).done(function(response) {
                       var new_column_data = {
-                        'id': response.data.id,
-                        'name': response.data.name,
-                        'type': response.data.type,
-                        'params': response.data.params,
-                        'custom': true
+                        id: response.data.id,
+                        name: response.data.name,
+                        type: response.data.type,
+                        params: response.data.params,
+                        custom: true
                       };
                       // if this is the first custom column, create an "optgroup"
-                      if (mailpoetColumnsSelect2.length === 2) {
-                        mailpoetColumnsSelect2.push({
-                          'name': MailPoet.I18n.t('userColumns'),
-                          'children': []
+                      if (window.mailpoetColumnsSelect2.length === 2) {
+                        window.mailpoetColumnsSelect2.push({
+                          name: MailPoet.I18n.t('userColumns'),
+                          children: []
                         });
                       }
-                      mailpoetColumnsSelect2[2].children.push(new_column_data);
-                      mailpoetColumns.push(new_column_data);
+                      window.mailpoetColumnsSelect2[2].children.push(new_column_data);
+                      window.mailpoetColumns.push(new_column_data);
                       jQuery('select.mailpoet_subscribers_column_data_match')
                         .each(function () {
                           jQuery(this)
                             .html('')
                             .select2('destroy')
                             .select2({
-                              data: mailpoetColumnsSelect2,
+                              data: window.mailpoetColumnsSelect2,
                               width: '15em',
                               templateResult: function (item) {
                                 return item.name;
@@ -776,7 +784,7 @@ define(
                               templateSelection: function (item) {
                                 return item.name;
                               }
-                            })
+                            });
                         });
                       jQuery(selectElement).data('column-id', new_column_data.id);
                       jQuery(selectElement).data('validation-rule', false);
@@ -837,14 +845,14 @@ define(
                       return { id: columnId, index: elementIndex, validationRule: validationRule, element: element };
                     });
             // iterate through the object of mailpoet columns
-            jQuery.map(mailpoetColumns, function (column, columnIndex) {
+            jQuery.map(window.mailpoetColumns, function (column, columnIndex) {
               // check if the column id matches the selected id of one of the
               // subscriber's data columns
               var matchedColumn = _.find(displayedColumns, function(data) { return data.id === column.id; });
               // EMAIL filter: if the first value in the column doesn't have a valid
               // email, hide the next button
               if (column.id === 'email') {
-                if (!emailRegex.test(subscribersClone.subscribers[0][matchedColumn.index])) {
+                if (!window.emailRegex.test(subscribersClone.subscribers[0][matchedColumn.index])) {
                   preventNextStep = true;
                   if (!jQuery('[data-id="notice_invalidEmail"]').length) {
                     MailPoet.Notice.error(MailPoet.I18n.t('columnContainsInvalidElement'), {
@@ -885,11 +893,11 @@ define(
                 }
                 else {
                   for (var format in allowedDateFormats) {
-                    var testedFormat = allowedDateFormats[format]
+                    var testedFormat = allowedDateFormats[format];
                     if (Moment(firstRowData, testedFormat, true).isValid()) {
                       var validationRule = (typeof(testedFormat) === 'function') ?
                         'datetime' :
-                        testedFormat
+                        testedFormat;
                       // set validation on the column element
                       jQuery(matchedColumn.element).data('validation-rule', validationRule);
                       break;
@@ -923,7 +931,7 @@ define(
                       + '</span> '
                     );
                     preventNextStep = true;
-                  };
+                  }
                 });
                 if (preventNextStep && !jQuery('.mailpoet_invalidDate').length) {
                   MailPoet.Notice.error(MailPoet.I18n.t('columnContainsInvalidDate'), {
@@ -974,10 +982,10 @@ define(
               timestamp = Date.now() / 1000,
               subscribers = [],
               importResults = {
-                'created': 0,
-                'updated': 0,
-                'errors': [],
-                'segments': []
+                created: 0,
+                updated: 0,
+                errors: [],
+                segments: []
               },
               splitSubscribers = function (subscribers, size) {
                 return subscribers.reduce(function (res, item, index) {
@@ -988,7 +996,7 @@ define(
                   return res;
                 }, []);
               },
-              subscribers = splitSubscribers(importData.step1.subscribers, batchSize);
+              subscribers = splitSubscribers(window.importData.step1.subscribers, batchSize);
 
             _.each(jQuery('select.mailpoet_subscribers_column_data_match'),
               function (column, columnIndex) {
@@ -1012,7 +1020,7 @@ define(
                     subscribers: subscribers[batchNumber],
                     timestamp: timestamp,
                     segments: segmentSelectElement.val(),
-                    updateSubscribers: (jQuery(':radio[name="subscriber_update_option"]:checked').val() === 'yes') ? true : false
+                    updateSubscribers: (jQuery(':radio[name="subscriber_update_option"]:checked').val() === 'yes')
                   })
                 }).done(function(response) {
                   importResults.created += response.data.created;
@@ -1030,7 +1038,7 @@ define(
                   }
                 });
                 batchNumber++;
-              })
+              });
             });
 
             queue.run();
@@ -1042,34 +1050,40 @@ define(
                 );
               }
               else {
-                mailpoetSegments = importResults.segments;
+                window.mailpoetSegments = importResults.segments;
                 importResults.segments = _.map(segmentSelectElement.select2('data'),
                   function (data) {
                     return data.name;
                   });
-                importData.step2 = importResults;
-                enableSegmentSelection(mailpoetSegments);
+                window.importData.step2 = importResults;
+                enableSegmentSelection(window.mailpoetSegments);
                 router.navigate('step3', {trigger: true});
               }
             });
           });
 
           filterSubscribers();
-          enableSegmentSelection(mailpoetSegments);
+          enableSegmentSelection(window.mailpoetSegments);
         });
 
         router.on('route:step3', function () {
-          if (typeof (importData.step2) === 'undefined') {
+          if (typeof (window.importData.step2) === 'undefined') {
             router.navigate('step2', {trigger: true});
             return;
           }
 
           showCurrentStep();
 
-          if (importData.step2.errors.length > 0) {
-            MailPoet.Notice.error(_.flatten(importData.step2.errors));
+          if (window.importData.step2.errors.length > 0) {
+            MailPoet.Notice.error(_.flatten(window.importData.step2.errors));
           }
 
+          MailPoet.trackEvent('Subscribers import finished', {
+            'Subscribers created': window.importData.step2.created,
+            'Subscribers updated': window.importData.step2.updated,
+            'MailPoet Free version': window.mailpoet_version
+          });
+
           // display statistics
           var subscribersDataImportResultsTemplate =
                   Handlebars
@@ -1077,18 +1091,18 @@ define(
                           .html()),
             exportMenuElement = jQuery('span.mailpoet_export'),
             importResults = {
-                created: (importData.step2.created)
+              created: (window.importData.step2.created)
                     ? MailPoet.I18n.t('subscribersCreated')
-                    .replace('%1$s', '<strong>' + importData.step2.created.toLocaleString() + '</strong>')
-                    .replace('%2$s', '"' + importData.step2.segments.join('", "') + '"')
+                    .replace('%1$s', '<strong>' + window.importData.step2.created.toLocaleString() + '</strong>')
+                    .replace('%2$s', '"' + window.importData.step2.segments.join('", "') + '"')
                     : false,
-                updated: (importData.step2.updated)
+              updated: (window.importData.step2.updated)
                     ? MailPoet.I18n.t('subscribersUpdated')
-                    .replace('%1$s', '<strong>' + importData.step2.updated.toLocaleString() + '</strong>')
-                    .replace('%2$s', '"' + importData.step2.segments.join('", "') + '"')
+                    .replace('%1$s', '<strong>' + window.importData.step2.updated.toLocaleString() + '</strong>')
+                    .replace('%2$s', '"' + window.importData.step2.segments.join('", "') + '"')
                     : false,
-                no_action: (!importData.step2.created && !importData.step2.updated),
-                added_to_segment_with_welcome_notification: importData.step2.added_to_segment_with_welcome_notification
+              no_action: (!window.importData.step2.created && !window.importData.step2.updated),
+              added_to_segment_with_welcome_notification: window.importData.step2.added_to_segment_with_welcome_notification
             };
 
           jQuery('#subscribers_data_import_results')
@@ -1111,7 +1125,7 @@ define(
           }
 
           // reset previous step's data so that coming back to this step is prevented
-          importData.step2 = undefined;
+          window.importData.step2 = undefined;
         });
 
         if (!Backbone.History.started) {

assets/js/src/subscribers/list.jsx

@@ -83,12 +83,12 @@ const messages = {
     MailPoet.Notice.success(message);
   },
   onNoItemsFound: (group) => {
-    if (group === 'bounced' && !mailpoet_premium_active) {
+    if (group === 'bounced' && !window.mailpoet_premium_active) {
       return (
         <div>
           <p>{MailPoet.I18n.t('bouncedSubscribersHelp')}</p>
           <p>
-            <a href={ `admin.php?page=mailpoet-premium` } className="button-primary">
+            <a href={ 'admin.php?page=mailpoet-premium' } className="button-primary">
               {MailPoet.I18n.t('bouncedSubscribersPremiumButtonText')}
             </a>
           </p>
@@ -245,7 +245,7 @@ const item_actions = [
 const SubscriberList = React.createClass({
   getSegmentFromId: function (segment_id) {
     let result = false;
-    mailpoet_segments.map((segment) => {
+    window.mailpoet_segments.map((segment) => {
       if (segment.id === segment_id) {
         result = segment;
       }
@@ -350,7 +350,7 @@ const SubscriberList = React.createClass({
         </h1>
 
         <Listing
-          limit={ mailpoet_listing_per_page }
+          limit={ window.mailpoet_listing_per_page }
           location={ this.props.location }
           params={ this.props.params }
           endpoint="subscribers"

codeception.unit.yml

@@ -21,28 +21,6 @@ modules:
             user: ''
             password: ''
             dump: tests/_data/dump.sql
-        WPLoader:
-            wpRootFolder: /wp-core
-            dbName: wordpress
-            dbHost: mysql
-            dbUser: wordpress
-            dbPassword: wordpress
-            wpDebug: false
-            tablePrefix: wp_
-            domain: wordpress
-            plugins: ['mailpoet/mailpoet.php']
-            activatePlugins: ['mailpoet/mailpoet.php']
-        WPWebDriver:
-            host: chrome
-            url: 'http://wordpress'
-            browser: chrome
-            port: 4444
-            window_size: '1024x768'
-            restart: true
-            wait: 0
-            adminUsername: admin
-            adminPassword: password
-            adminPath: /wp-admin
 coverage:
     enabled: true
     whitelist:

composer.json

@@ -20,7 +20,7 @@
   },
   "require-dev": {
     "codeception/aspect-mock": "^2.0",
-    "codeception/codeception": "2.2.11",
+    "codeception/codeception": "2.3.5",
     "codeception/verify": "^0.3.3",
     "consolidation/robo": "^1.0.5",
     "henrikbjorn/lurker": "^1.2",

composer.lock

@@ -4,7 +4,7 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#composer-lock-the-lock-file",
         "This file is @generated automatically"
     ],
-    "content-hash": "f24637851f65aaddf31f499e9512a62a",
+    "content-hash": "3c6a5b45c2c80ffa51e3faa28d218aba",
     "packages": [
         {
             "name": "cerdic/css-tidy",
@@ -951,28 +951,28 @@
         },
         {
             "name": "codeception/codeception",
-            "version": "2.2.11",
+            "version": "2.3.5",
             "source": {
                 "type": "git",
                 "url": "https://github.com/Codeception/Codeception.git",
-                "reference": "a8681b416921ae282ccca2c485d75a3ed6756080"
+                "reference": "e807cd458eb9f7ae7464f33ad835a2f54aa73194"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/Codeception/Codeception/zipball/a8681b416921ae282ccca2c485d75a3ed6756080",
-                "reference": "a8681b416921ae282ccca2c485d75a3ed6756080",
+                "url": "https://api.github.com/repos/Codeception/Codeception/zipball/e807cd458eb9f7ae7464f33ad835a2f54aa73194",
+                "reference": "e807cd458eb9f7ae7464f33ad835a2f54aa73194",
                 "shasum": ""
             },
             "require": {
                 "behat/gherkin": "~4.4.0",
                 "ext-json": "*",
                 "ext-mbstring": "*",
-                "facebook/webdriver": ">=1.0.1 <2.0",
+                "facebook/webdriver": ">=1.1.3 <2.0",
                 "guzzlehttp/guzzle": ">=4.1.4 <7.0",
                 "guzzlehttp/psr7": "~1.0",
                 "php": ">=5.4.0 <8.0",
                 "phpunit/php-code-coverage": ">=2.2.4 <6.0",
-                "phpunit/phpunit": ">4.8.20 <6.0",
+                "phpunit/phpunit": ">4.8.20 <7.0",
                 "phpunit/phpunit-mock-objects": ">2.3 <5.0",
                 "sebastian/comparator": ">1.1 <3.0",
                 "sebastian/diff": "^1.4",
@@ -997,6 +997,7 @@
                 "php-amqplib/php-amqplib": "~2.4",
                 "predis/predis": "^1.0",
                 "squizlabs/php_codesniffer": "~2.0",
+                "symfony/process": ">=2.7 <4.0",
                 "vlucas/phpdotenv": "^2.4.0"
             },
             "suggest": {
@@ -1041,7 +1042,7 @@
                 "functional testing",
                 "unit testing"
             ],
-            "time": "2017-05-11T21:07:05+00:00"
+            "time": "2017-08-10T20:28:02+00:00"
         },
         {
             "name": "codeception/verify",

lib/API/API.php

@@ -1,11 +1,14 @@
 <?php
+
 namespace MailPoet\API;
 
+use MailPoet\Config\AccessControl;
+
 if(!defined('ABSPATH')) exit;
 
 class API {
-  static function JSON() {
-    return new \MailPoet\API\JSON\API();
+  static function JSON(AccessControl $access_control) {
+    return new \MailPoet\API\JSON\API($access_control);
   }
 
   static function MP($version) {

lib/API/JSON/API.php

@@ -1,7 +1,7 @@
 <?php
 namespace MailPoet\API\JSON;
 
-use MailPoet\Config\Env;
+use MailPoet\Config\AccessControl;
 use MailPoet\Util\Helpers;
 use MailPoet\Util\Security;
 use MailPoet\WP\Hooks;
@@ -19,9 +19,11 @@ class API {
   private $_available_api_versions = array(
       'v1'
   );
+  private $access_control;
   const CURRENT_VERSION = 'v1';
 
-  function __construct() {
+  function __construct(AccessControl $access_control) {
+    $this->access_control = $access_control;
     foreach($this->_available_api_versions as $available_api_version) {
       $this->addEndpointNamespace(
         sprintf('%s\%s', __NAMESPACE__, $available_api_version),
@@ -128,19 +130,17 @@ class API {
 
       $endpoint = new $this->_request_endpoint_class();
 
+      if(!method_exists($endpoint, $this->_request_method)) {
+        throw new \Exception(__('Invalid API endpoint method.', 'mailpoet'));
+      }
+
       // check the accessibility of the requested endpoint's action
       // by default, an endpoint's action is considered "private"
-      $permissions = $endpoint->permissions;
-      if(array_key_exists($this->_request_method, $permissions) === false ||
-         $permissions[$this->_request_method] !== Access::ALL
-      ) {
-        if($this->checkPermissions() === false) {
+      if(!$this->validatePermissions($this->_request_method, $endpoint->permissions)) {
         $error_message = __('You do not have the required permissions.', 'mailpoet');
         $error_response = $this->createErrorResponse(Error::FORBIDDEN, $error_message, Response::STATUS_FORBIDDEN);
         return $error_response;
       }
-      }
-
       $response = $endpoint->{$this->_request_method}($this->_request_data);
       return $response;
     } catch(\Exception $e) {
@@ -150,8 +150,11 @@ class API {
     }
   }
 
-  function checkPermissions() {
-    return current_user_can(Env::$required_permission);
+  function validatePermissions($request_method, $permissions) {
+    // validate method permission if defined, otherwise validate global permission
+    return(!empty($permissions['methods'][$request_method])) ?
+      $this->access_control->validatePermission($permissions['methods'][$request_method]) :
+      $this->access_control->validatePermission($permissions['global']);
   }
 
   function checkToken() {

lib/API/JSON/Access.php

@@ -1,12 +0,0 @@
-<?php
-namespace MailPoet\API\JSON;
-
-if(!defined('ABSPATH')) exit;
-
-final class Access {
-  const ALL = 'all';
-
-  private function __construct() {
-
-  }
-}

lib/API/JSON/Endpoint.php

@@ -1,11 +1,16 @@
 <?php
+
 namespace MailPoet\API\JSON;
 
+use MailPoet\Config\AccessControl;
+
 if(!defined('ABSPATH')) exit;
 
 abstract class Endpoint {
-
-  public $permissions = array();
+  public $permissions = array(
+    'global' => AccessControl::PERMISSION_MANAGE_SETTINGS,
+    'methods' => array()
+  );
 
   function successResponse(
     $data = array(), $meta = array(), $status = Response::STATUS_OK

lib/API/JSON/v1/AutomatedLatestContent.php

@@ -1,20 +1,32 @@
 <?php
+
 namespace MailPoet\API\JSON\v1;
+
 use MailPoet\API\JSON\Endpoint as APIEndpoint;
+use MailPoet\Config\AccessControl;
 use MailPoet\WP\Posts as WPPosts;
 
 if(!defined('ABSPATH')) exit;
 
 class AutomatedLatestContent extends APIEndpoint {
   public $ALC;
+  public $permissions = array(
+    'global' => AccessControl::PERMISSION_MANAGE_EMAILS
+  );
 
   function __construct() {
     $this->ALC = new \MailPoet\Newsletter\AutomatedLatestContent();
   }
 
   function getPostTypes() {
+    $post_types = array_map(function($post_type) {
+      return array(
+        'name' => $post_type->name,
+        'label' => $post_type->label
+      );
+    }, get_post_types(array(), 'objects'));
     return $this->successResponse(
-      get_post_types(array(), 'objects')
+      $post_types
     );
   }
 

lib/API/JSON/v1/CustomFields.php

@@ -1,12 +1,19 @@
 <?php
+
 namespace MailPoet\API\JSON\v1;
+
 use MailPoet\API\JSON\Endpoint as APIEndpoint;
 use MailPoet\API\JSON\Error as APIError;
+use MailPoet\Config\AccessControl;
 use MailPoet\Models\CustomField;
 
 if(!defined('ABSPATH')) exit;
 
 class CustomFields extends APIEndpoint {
+  public $permissions = array(
+    'global' => AccessControl::PERMISSION_MANAGE_FORMS
+  );
+
   function getAll() {
     $collection = CustomField::orderByAsc('created_at')->findMany();
     $custom_fields = array_map(function($custom_field) {

lib/API/JSON/v1/Forms.php

@@ -1,17 +1,23 @@
 <?php
+
 namespace MailPoet\API\JSON\v1;
+
 use MailPoet\API\JSON\Endpoint as APIEndpoint;
 use MailPoet\API\JSON\Error as APIError;
-
+use MailPoet\Config\AccessControl;
+use MailPoet\Form\Renderer as FormRenderer;
+use MailPoet\Form\Util;
+use MailPoet\Listing;
 use MailPoet\Models\Form;
 use MailPoet\Models\StatisticsForms;
-use MailPoet\Form\Renderer as FormRenderer;
-use MailPoet\Listing;
-use MailPoet\Form\Util;
 
 if(!defined('ABSPATH')) exit;
 
 class Forms extends APIEndpoint {
+  public $permissions = array(
+    'global' => AccessControl::PERMISSION_MANAGE_FORMS
+  );
+
   function get($data = array()) {
     $id = (isset($data['id']) ? (int)$data['id'] : false);
     $form = Form::findOne($id);

lib/API/JSON/v1/ImportExport.php

@@ -1,13 +1,19 @@
 <?php
-namespace MailPoet\API\JSON\v1;
-use MailPoet\API\JSON\Endpoint as APIEndpoint;
 
-use MailPoet\Subscribers\ImportExport\Import\MailChimp;
+namespace MailPoet\API\JSON\v1;
+
+use MailPoet\API\JSON\Endpoint as APIEndpoint;
+use MailPoet\Config\AccessControl;
 use MailPoet\Models\Segment;
+use MailPoet\Subscribers\ImportExport\Import\MailChimp;
 
 if(!defined('ABSPATH')) exit;
 
 class ImportExport extends APIEndpoint {
+  public $permissions = array(
+    'global' => AccessControl::PERMISSION_MANAGE_SUBSCRIBERS
+  );
+
   function getMailChimpLists($data) {
     try {
       $mailChimp = new MailChimp($data['api_key']);

lib/API/JSON/v1/MP2Migrator.php

@@ -1,10 +1,16 @@
 <?php
+
 namespace MailPoet\API\JSON\v1;
+
 use MailPoet\API\JSON\Endpoint as APIEndpoint;
+use MailPoet\Config\AccessControl;
 
 if(!defined('ABSPATH')) exit;
 
 class MP2Migrator extends APIEndpoint {
+  public $permissions = array(
+    'global' => AccessControl::PERMISSION_MANAGE_SETTINGS
+  );
 
   public function __construct() {
     $this->MP2Migrator = new \MailPoet\Config\MP2Migrator();