Merge pull request #278 from mailpoet/drag_and_drop

Editor: Drag&Drop

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

@@ -47,7 +47,6 @@ define([
         autoScroll: true,
 
         onstart: function(event) {
-          console.log('Drag start', event, this);
 
           if (that.options.cloneOriginal === true) {
             // Use substitution instead of a clone

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

@@ -117,12 +117,9 @@ define([
      * Defines drop behavior of BlockView instance
      */
     getDropFunc: function() {
-      var that = this;
       return function() {
-        var newModel = that.model.clone();
+        return this.model.clone();
-        //that.model.destroy();
+      }.bind(this);
-        return newModel;
-      };
     },
     showBlock: function() {
       if (this._isFirstRender) {
@@ -142,14 +139,13 @@ define([
       return this._transition('mailpoet_block_transition_out');
     },
     _transition: function(className) {
-      var that = this,
+      var promise = jQuery.Deferred();
-          promise = jQuery.Deferred();
 
       this.$el.addClass(className);
       this.$el.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd animationend', function() {
-        that.$el.removeClass(className);
+        this.$el.removeClass(className);
         promise.resolve();
-      });
+      }.bind(this));
       return promise;
     },
   });
@@ -207,16 +203,14 @@ define([
   Module.BlockSettingsView = Marionette.LayoutView.extend({
     className: 'mailpoet_editor_settings',
     initialize: function() {
-      var that = this;
-
       MailPoet.Modal.panel({
         element: this.$el,
         template: '',
         position: 'right',
         width: App.getConfig().get('sidepanelWidth'),
         onCancel: function() {
-          that.destroy();
+          this.destroy();
-        },
+        }.bind(this),
       });
     },
     close: function(event) {

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

@@ -232,12 +232,9 @@ define([
       _.extend(this, this._buildRegions(this.regions));
     },
     getDropFunc: function() {
-      var that = this;
       return function() {
-        var newModel = that.model.clone();
+        return this.model.clone();
-        that.model.destroy();
+      }.bind(this);
-        return newModel;
-      };
     },
     showBlock: function() {
       if (this._isFirstRender) {

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

@@ -57,11 +57,9 @@ define([
       this.listenTo(this.model, 'change:styles.block.padding', this.changePadding);
     },
     templateHelpers: function() {
-      return {
+      return _.extend({
-        model: this.model.toJSON(),
-        viewCid: this.cid,
         totalHeight: parseInt(this.model.get('styles.block.padding'), 10)*2 + parseInt(this.model.get('styles.block.borderWidth')) + 'px',
-      };
+      }, base.BlockView.prototype.templateHelpers.apply(this));
     },
     onRender: function() {
       this.toolsView = new Module.DividerBlockToolsView({ model: this.model });

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

@@ -39,9 +39,9 @@ define([
   Module.FooterBlockView = base.BlockView.extend({
     className: "mailpoet_block mailpoet_footer_block mailpoet_droppable_block",
     getTemplate: function() { return templates.footerBlock; },
-    modelEvents: {
+    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',
-    },
+    }, base.BlockView.prototype.modelEvents),
     onDragSubstituteBy: function() { return Module.FooterWidgetView; },
     onRender: function() {
       this.toolsView = new Module.FooterBlockToolsView({ model: this.model });

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

@@ -39,9 +39,9 @@ define([
   Module.HeaderBlockView = base.BlockView.extend({
     className: "mailpoet_block mailpoet_header_block mailpoet_droppable_block",
     getTemplate: function() { return templates.headerBlock; },
-    modelEvents: {
+    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',
-    },
+    }, base.BlockView.prototype.modelEvents),
     onDragSubstituteBy: function() { return Module.HeaderWidgetView; },
     onRender: function() {
       this.toolsView = new Module.HeaderBlockToolsView({ model: this.model });

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

@@ -37,11 +37,9 @@ define([
     getTemplate: function() { return templates.imageBlock; },
     onDragSubstituteBy: function() { return Module.ImageWidgetView; },
     templateHelpers: function() {
-      return {
+      return _.extend({
-        model: this.model.toJSON(),
-        viewCid: this.cid,
         imageMissingSrc: App.getConfig().get('urls.imageMissing'),
-      };
+      }, base.BlockView.prototype.templateHelpers.apply(this));
     },
     onRender: function() {
       this.toolsView = new Module.ImageBlockToolsView({ model: this.model });

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

@@ -145,13 +145,14 @@ define([
   Module.PostsBlockView = base.BlockView.extend({
     className: "mailpoet_block mailpoet_posts_block mailpoet_droppable_block",
     getTemplate: function() { return templates.postsBlock; },
-    modelEvents: {},
+    modelEvents: {}, // Forcefully disable all events
     regions: _.extend({
       postsRegion: '.mailpoet_posts_block_posts',
     }, base.BlockView.prototype.regions),
     onDragSubstituteBy: function() { return Module.PostsWidgetView; },
     initialize: function() {
       base.BlockView.prototype.initialize.apply(this, arguments);
+
       this.toolsView = new Module.PostsBlockToolsView({ model: this.model });
       this.model.reply('blockView', this.notifyAboutSelf, this);
     },

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

@@ -175,12 +175,9 @@ define([
       _event.stopPropagation();
     },
     getDropFunc: function() {
-      var that = this;
       return function() {
-        var newModel = that.model.clone();
+        return this.model.clone();
-        //that.model.destroy();
+      }.bind(this);
-        return newModel;
-      };
     },
     _buildRegions: function(regions) {
       var that = this;

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

@@ -26,6 +26,8 @@ define([
     getTemplate: function() { return templates.textBlock; },
     modelEvents: _.omit(base.BlockView.prototype.modelEvents, 'change'), // Prevent rerendering on model change due to text editor redrawing
     initialize: function(options) {
+      base.BlockView.prototype.initialize.apply(this, arguments);
+
       this.renderOptions = _.defaults(options.renderOptions || {}, {
         disableTextEditor: false,
       });

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

@@ -91,7 +91,6 @@ define([
       });
     },
     onDomRefresh: function() {
-      var that = this;
       this.$el.parent().stick_in_parent({
         offset_top: 32,
       });
@@ -170,10 +169,8 @@ define([
     },
     initialize: function(options) {
       this.availableStyles = options.availableStyles;
-      var that = this;
     },
     onRender: function() {
-      var that = this;
       this.$('.mailpoet_color').spectrum({
         clickoutFiresChange: true,
         showInput: true,