Add container background image support to editor [MAILPOET-1403]

assets/js/src/newsletter_editor/behaviors/MediaManagerBehavior.js

@@ -30,6 +30,15 @@ define([
       var src = jQuery(event.target).val();
       var image = new Image();
 
+      if (!src && this.options.onSelect) {
+        this.view[this.options.onSelect]({
+          src: null,
+          width: null,
+          height: null
+        });
+        return;
+      }
+
       image.onload = function () {
         if (this.options.onSelect) {
           this.view[this.options.onSelect]({

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

@@ -40,6 +40,10 @@ define([
       return this._getDefaults({
         type: 'container',
         orientation: 'vertical',
+        image: {
+          src: null,
+          display: 'scale'
+        },
         styles: {
           block: {
             backgroundColor: 'transparent'
@@ -239,16 +243,19 @@ define([
   });
 
   Module.ContainerBlockSettingsView = base.BlockSettingsView.extend({
+    behaviors: _.extend({}, base.BlockSettingsView.prototype.behaviors, {
+      MediaManagerBehavior: {
+        onSelect: 'onImageSelect'
+      }
+    }),
     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'
+        'click .mailpoet_done_editing': 'close',
+        'change .mailpoet_field_display_type': 'changeDisplayType'
       };
     },
-    regions: {
-      columnsSettingsRegion: '.mailpoet_container_columns_settings'
-    },
     initialize: function () {
       base.BlockSettingsView.prototype.initialize.apply(this, arguments);
 
@@ -256,8 +263,14 @@ define([
         collection: this.model.get('blocks')
       });
     },
-    onRender: function () {
-      this.showChildView('columnsSettingsRegion', this._columnsSettingsView);
+    changeDisplayType: function (event) {
+      this.model.get('image').set('display', event.target.value);
+      this.model.trigger('change');
+    },
+    onImageSelect: function (image) {
+      this.model.set('image.src', image.src);
+      this.model.trigger('change');
+      this.render();
     }
   });
 

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

@@ -124,7 +124,11 @@ define([
       this.$('.mailpoet_field_image_width_input').val(width);
     },
     onImageSelect: function (image) {
-      this.model.set(image);
+      if (image.src === null) {
+        this.model.set({ src: '' });
+      } else {
+        this.model.set(image);
+      }
       // Rerender settings view due to changes from outside of settings view
       this.render();
     }