Simplify settings views to use methods defined in base settings view

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

@@ -189,11 +189,6 @@ define([
         "click .mailpoet_done_editing": "close",
       };
     },
-    templateContext: function() {
-      return {
-        model: this.model.toJSON(),
-      };
-    },
     onRender: function() {
       var that = this;
 

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

@@ -125,6 +125,12 @@ define([
         return this.model.clone();
       }.bind(this);
     },
+    disableDragging: function() {
+      this.$el.addClass('mailpoet_ignore_drag');
+    },
+    enableDragging: function() {
+      this.$el.removeClass('mailpoet_ignore_drag');
+    },
     showBlock: function() {
       if (this._isFirstRender) {
         this.transitionIn();
@@ -240,6 +246,11 @@ define([
         MailPoet.Modal.panel(panelParams);
       }
     },
+    templateContext: function() {
+      return {
+        model: this.model.toJSON()
+      };
+    },
     close: function(event) {
       this.destroy();
     },

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

@@ -99,11 +99,10 @@ define([
       };
     },
     templateContext: function() {
-      return {
+      return _.extend({}, base.BlockView.prototype.templateContext.apply(this, arguments), {
-        model: this.model.toJSON(),
         availableStyles: App.getAvailableStyles().toJSON(),
         renderOptions: this.renderOptions,
-      };
+      });
     },
     applyToAll: function() {
       App.getChannel().trigger('replaceAllButtonStyles', _.pick(this.model.toJSON(), 'styles', 'type'));

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

@@ -105,11 +105,10 @@ define([
       };
     },
     templateContext: function() {
-      return {
+      return _.extend({}, base.BlockView.prototype.templateContext.apply(this, arguments), {
-        model: this.model.toJSON(),
         availableStyles: App.getAvailableStyles().toJSON(),
         renderOptions: this.renderOptions,
-      };
+      });
     },
     changeStyle: function(event) {
       var style = jQuery(event.currentTarget).data('style');

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

@@ -68,12 +68,6 @@ define([
       this.enableDragging();
       this.enableShowingTools();
     },
-    disableDragging: function() {
-      this.$('.mailpoet_content').addClass('mailpoet_ignore_drag');
-    },
-    enableDragging: function() {
-      this.$('.mailpoet_content').removeClass('mailpoet_ignore_drag');
-    },
   });
 
   Module.FooterBlockToolsView = base.BlockToolsView.extend({
@@ -97,10 +91,9 @@ define([
       };
     },
     templateContext: function() {
-      return {
+      return _.extend({}, base.BlockView.prototype.templateContext.apply(this, arguments), {
-        model: this.model.toJSON(),
         availableStyles: App.getAvailableStyles().toJSON(),
-      };
+      });
     },
   });
 

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

@@ -68,12 +68,6 @@ define([
       this.enableDragging();
       this.enableShowingTools();
     },
-    disableDragging: function() {
-      this.$('.mailpoet_content').addClass('mailpoet_ignore_drag');
-    },
-    enableDragging: function() {
-      this.$('.mailpoet_content').removeClass('mailpoet_ignore_drag');
-    },
   });
 
   Module.HeaderBlockToolsView = base.BlockToolsView.extend({
@@ -97,10 +91,9 @@ define([
       };
     },
     templateContext: function() {
-      return {
+      return _.extend({}, base.BlockView.prototype.templateContext.apply(this, arguments), {
-        model: this.model.toJSON(),
         availableStyles: App.getAvailableStyles().toJSON(),
-      };
+      });
     },
   });
 

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

@@ -103,60 +103,19 @@ define([
     childView: SocialIconView,
   });
 
-  Module.SocialBlockView = Marionette.View.extend({
+  Module.SocialBlockView = base.BlockView.extend({
     className: 'mailpoet_block mailpoet_social_block mailpoet_droppable_block',
     getTemplate: function() { return templates.socialBlock; },
-    modelEvents: {
+    regions: _.extend({}, base.BlockView.prototype.regions, {
-      'change': 'render',
-      'delete': 'deleteBlock',
-    },
-    events: {
-      "mouseover": "showTools",
-      "mouseout": "hideTools",
-    },
-    regions: {
-      toolsRegion: '> .mailpoet_tools',
       icons: '.mailpoet_social'
-    },
+    }),
     ui: {
       tools: '> .mailpoet_tools'
     },
-    behaviors: {
+    behaviors: _.extend({}, base.BlockView.prototype.behaviors, {
-      DraggableBehavior: {
-        cloneOriginal: true,
-        hideOriginal: true,
-        onDrop: function(options) {
-          // After a clone of model has been dropped, cleanup
-          // and destroy self
-          options.dragBehavior.view.model.destroy();
-        },
-        onDragSubstituteBy: function(behavior) {
-          var WidgetView, node;
-          // When block is being dragged, display the widget icon instead.
-          // This will create an instance of block's widget view and
-          // use it's rendered DOM element instead of the content block
-          if (_.isFunction(behavior.view.onDragSubstituteBy)) {
-            WidgetView = new (behavior.view.onDragSubstituteBy())();
-            WidgetView.render();
-            node = WidgetView.$el.get(0).cloneNode(true);
-            WidgetView.destroy();
-            return node;
-          }
-        },
-      },
-      HighlightEditingBehavior: {},
       ShowSettingsBehavior: {},
-    },
+    }),
     onDragSubstituteBy: function() { return Module.SocialWidgetView; },
-    initialize: function() {
-      this.on('showSettings', this.showSettings, this);
-    },
-    templateContext: function() {
-      return {
-        model: this.model.toJSON(),
-        viewCid: this.cid,
-      };
-    },
     onRender: function() {
       this.toolsView = new Module.SocialBlockToolsView({ model: this.model });
       this.showChildView('toolsRegion', this.toolsView);
@@ -164,56 +123,6 @@ define([
         collection: this.model.get('icons')
       }))
     },
-    showTools: function(_event) {
-      this.$(this.ui.tools).addClass('mailpoet_display_tools');
-      _event.stopPropagation();
-    },
-    hideTools: function(_event) {
-      this.$(this.ui.tools).removeClass('mailpoet_display_tools');
-      _event.stopPropagation();
-    },
-    showSettings: function(options) {
-      this.toolsView.triggerMethod('showSettings', options);
-    },
-    getDropFunc: function() {
-      return function() {
-        return this.model.clone();
-      }.bind(this);
-    },
-    deleteBlock: function() {
-      this.transitionOut().done(function() {
-        this.model.destroy();
-      }.bind(this));
-    },
-    transitionIn: function() {
-      return this._transition('slideDown', 'fadeIn', 'easeIn');
-    },
-    transitionOut: function() {
-      return this._transition('slideUp', 'fadeOut', 'easeOut');
-    },
-    _transition: function(slideDirection, fadeDirection, easing) {
-      var promise = jQuery.Deferred();
-
-      this.$el.velocity(
-        slideDirection,
-        {
-          duration: 250,
-          easing: easing,
-          complete: function() {
-            promise.resolve();
-          }.bind(this),
-        }
-      ).velocity(
-        fadeDirection,
-        {
-          duration: 250,
-          easing: easing,
-          queue: false, // Do not enqueue, trigger animation in parallel
-        }
-      );
-
-      return promise;
-    },
   });
 
   Module.SocialBlockToolsView = base.BlockToolsView.extend({
@@ -270,12 +179,11 @@ define([
         // Construct icon type list of format [{iconType: 'type', title: 'Title'}, ...]
         availableIconTypes = _.map(_.keys(icons.attributes), function(key) { return { iconType: key, title: icons.get(key).get('title') }; }),
         allIconSets = App.getAvailableStyles().get('socialIconSets');
-      return {
+      return _.extend({}, base.BlockView.prototype.templateContext.apply(this, arguments), {
-        model: this.model.toJSON(),
         iconTypes: availableIconTypes,
         currentType: icons.get(this.model.get('iconType')).toJSON(),
         allIconSets: allIconSets.toJSON(),
-      };
+      });
     },
     deleteIcon: function() {
       this.model.destroy();

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

@@ -71,13 +71,6 @@ define([
       this.enableDragging();
       this.enableShowingTools();
     },
-
-    disableDragging: function() {
-      this.$('.mailpoet_content').addClass('mailpoet_ignore_drag');
-    },
-    enableDragging: function() {
-      this.$('.mailpoet_content').removeClass('mailpoet_ignore_drag');
-    },
   });
 
   Module.TextBlockToolsView = base.BlockToolsView.extend({

views/newsletter/templates/blocks/container/settings.hbs

@@ -2,7 +2,7 @@
 <div class="mailpoet_form_field">
     <label>
         <div class="mailpoet_form_field_input_option">
-        <input type="text" name="background-color" class="mailpoet_field_container_background_color mailpoet_color" value="{{ styles.block.backgroundColor }}" />
+            <input type="text" name="background-color" class="mailpoet_field_container_background_color mailpoet_color" value="{{ model.styles.block.backgroundColor }}" />
         </div>
         <div class="mailpoet_form_field_title mailpoet_form_field_title_inline"><%= __('Background') %></div>
     </label>

views/newsletter/templates/blocks/image/settings.hbs

@@ -3,7 +3,7 @@
     <label>
         <div class="mailpoet_form_field_title"><%= __('Link') %> <span class="mailpoet_form_field_optional">(<%= __('Optional') %>)</div>
         <div class="mailpoet_form_field_input_option">
-            <input type="text" name="src" class="mailpoet_input mailpoet_field_image_link" value="{{ link }}" placeholder="http://" />
+            <input type="text" name="src" class="mailpoet_input mailpoet_field_image_link" value="{{ model.link }}" placeholder="http://" />
         </div>
     </label>
 </div>
@@ -11,7 +11,7 @@
     <label>
         <div class="mailpoet_form_field_title"><%= __('Address') %></div>
         <div class="mailpoet_form_field_input_option">
-            <input type="text" name="src" class="mailpoet_input mailpoet_field_image_address" value="{{ src }}" placeholder="http://" /><br />
+            <input type="text" name="src" class="mailpoet_input mailpoet_field_image_address" value="{{ model.src }}" placeholder="http://" /><br />
         </div>
     </label>
 </div>
@@ -19,14 +19,14 @@
     <label>
         <div class="mailpoet_form_field_title"><%= __('Alternative text') %></div>
         <div class="mailpoet_form_field_input_option">
-            <input type="text" name="alt" class="mailpoet_input mailpoet_field_image_alt_text" value="{{ alt }}" />
+            <input type="text" name="alt" class="mailpoet_input mailpoet_field_image_alt_text" value="{{ model.alt }}" />
         </div>
     </label>
 </div>
 <div class="mailpoet_form_field">
     <div class="mailpoet_form_field_checkbox_option">
         <label>
-            <input type="checkbox" name="fullWidth" class="mailpoet_field_image_full_width" value="true" {{#if fullWidth }}CHECKED{{/if}}/>
+            <input type="checkbox" name="fullWidth" class="mailpoet_field_image_full_width" value="true" {{#if model.fullWidth }}CHECKED{{/if}}/>
             <%= __('Full width') %>
         </label>
     </div>

views/newsletter/templates/blocks/spacer/settings.hbs

@@ -1,7 +1,7 @@
 <h3><%= __('Spacer') %></h3>
 <div class="mailpoet_form_field">
     <div class="mailpoet_form_field_input_option">
-        <input type="text" name="background-color" class="mailpoet_field_spacer_background_color mailpoet_color" value="{{ styles.block.backgroundColor }}" />
+        <input type="text" name="background-color" class="mailpoet_field_spacer_background_color mailpoet_color" value="{{ model.styles.block.backgroundColor }}" />
     </div>
     <div class="mailpoet_form_field_title mailpoet_form_field_title_inline"><%= __('Background') %></div>
 </div>

views/newsletter/templates/blocks/text/settings.hbs

@@ -1,2 +1,2 @@
 <h3><%= __('Text') %></h3>
-<%= __('Text') %>: <textarea name="text" class="text" rows="5" cols="40">{{ text }}</textarea>
+<%= __('Text') %>: <textarea name="text" class="text" rows="5" cols="40">{{ model.text }}</textarea>