diff --git a/assets/js/src/newsletter_editor/behaviors/MediaManagerBehavior.js b/assets/js/src/newsletter_editor/behaviors/MediaManagerBehavior.js
index 8a1f3875c3..1cd9e309fa 100644
--- a/assets/js/src/newsletter_editor/behaviors/MediaManagerBehavior.js
+++ b/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]({
diff --git a/assets/js/src/newsletter_editor/blocks/container.js b/assets/js/src/newsletter_editor/blocks/container.js
index 0843fee878..0c86112b19 100644
--- a/assets/js/src/newsletter_editor/blocks/container.js
+++ b/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();
}
});
diff --git a/assets/js/src/newsletter_editor/blocks/image.js b/assets/js/src/newsletter_editor/blocks/image.js
index 76c81b5a4a..1a84011b4f 100644
--- a/assets/js/src/newsletter_editor/blocks/image.js
+++ b/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();
}
diff --git a/tests/javascript/newsletter_editor/blocks/container.spec.js b/tests/javascript/newsletter_editor/blocks/container.spec.js
index ef0e7ebfe9..231c0dfab0 100644
--- a/tests/javascript/newsletter_editor/blocks/container.spec.js
+++ b/tests/javascript/newsletter_editor/blocks/container.spec.js
@@ -29,6 +29,10 @@ define([
expect(model.get('styles.block.backgroundColor')).to.match(/^(#[abcdef0-9]{6})|transparent$/);
});
+ it('has a image display style', function () {
+ expect(model.get('image.display')).to.equal('scale');
+ });
+
it('has a collection of blocks', function () {
expect(model.get('blocks')).to.be.instanceof(Backbone.Collection);
});
@@ -42,6 +46,10 @@ define([
block: {
backgroundColor: '#123456'
}
+ },
+ image: {
+ src: null,
+ display: 'scale'
}
}
}
@@ -49,6 +57,7 @@ define([
innerModel = new (ContainerBlock.ContainerBlockModel)();
expect(innerModel.get('styles.block.backgroundColor')).to.equal('#123456');
+ expect(innerModel.get('image.display')).to.equal('scale');
});
it('do not update blockDefaults.container when changed', function () {
@@ -130,7 +139,22 @@ define([
describe('once rendered', function () {
describe('on root level', function () {
- var model = new (ContainerBlock.ContainerBlockModel)();
+ var imageSrc = 'http://example.org/someNewImage.png';
+ var model = new (ContainerBlock.ContainerBlockModel)({
+ type: 'container',
+ orientation: 'vertical',
+ image: {
+ src: imageSrc,
+ display: 'scale',
+ width: 123,
+ height: 456
+ },
+ styles: {
+ block: {
+ backgroundColor: 'transparent'
+ }
+ }
+ });
var view;
beforeEach(function () {
@@ -159,6 +183,15 @@ define([
it('has a duplication tool', function () {
expect(view.$('.mailpoet_duplicate_block')).to.have.length(1);
});
+
+ it('has a background image set', function () {
+ var style = view.$('style').text();
+ expect(style).contains('.mailpoet_editor_view_' + view.cid);
+ expect(style).contains('background-color: #ffffff !important;');
+ expect(style).contains('background-image: url(http://example.org/someNewImage.png);');
+ expect(style).contains('background-position: center;');
+ expect(style).contains('background-size: cover;');
+ });
});
describe.skip('on non-root levels', function () {
@@ -211,11 +244,13 @@ define([
describe('once rendered', function () {
var model;
var view;
+ var newSrc = 'http://example.org/someNewImage.png';
beforeEach(function () {
global.stubChannel(EditorApplication);
global.stubAvailableStyles(EditorApplication);
model = new (ContainerBlock.ContainerBlockModel)();
view = new (ContainerBlock.ContainerBlockSettingsView)({ model: model });
+ view.render();
});
it('updates the model when background color changes', function () {
@@ -223,6 +258,23 @@ define([
expect(model.get('styles.block.backgroundColor')).to.equal('#123456');
});
+ it('updates the model background image display type changes', function () {
+ view.$('.mailpoet_field_display_type:nth(2)').attr('checked', true).change();
+ expect(model.get('image.display')).to.equal('tile');
+ });
+
+ it('updates the model when background image src changes', function () {
+ global.stubImage(123, 456);
+ view.$('.mailpoet_field_image_address').val(newSrc).trigger('input');
+ expect(model.get('image.src')).to.equal(newSrc);
+ });
+
+ it('updates the model when background image src is deleted', function () {
+ global.stubImage(123, 456);
+ view.$('.mailpoet_field_image_address').val('').trigger('input');
+ expect(model.get('image.src')).to.equal(null);
+ });
+
it.skip('closes the sidepanel after "Done" is clicked', function () {
var mock = sinon.mock().once();
global.MailPoet.Modal.cancel = mock;
diff --git a/views/newsletter/editor.html b/views/newsletter/editor.html
index e38dd2c5b8..6339afe961 100644
--- a/views/newsletter/editor.html
+++ b/views/newsletter/editor.html
@@ -1113,6 +1113,10 @@
},
},
container: {
+ image: {
+ src: null,
+ display: 'scale',
+ },
styles: {
block: {
backgroundColor: 'transparent',
diff --git a/views/newsletter/templates/blocks/container/block.hbs b/views/newsletter/templates/blocks/container/block.hbs
index 61687e89d9..a13c2905f5 100644
--- a/views/newsletter/templates/blocks/container/block.hbs
+++ b/views/newsletter/templates/blocks/container/block.hbs
@@ -1,8 +1,22 @@
-{{#ifCond model.styles.block.backgroundColor '!=' 'transparent'}}
-
-{{/ifCond}}
+{{#if model.image.src}}
+
+{{else}}
+ {{#ifCond model.styles.block.backgroundColor '!=' 'transparent'}}
+
+ {{/ifCond}}
+{{/if}}
+
diff --git a/views/newsletter/templates/blocks/container/settings.hbs b/views/newsletter/templates/blocks/container/settings.hbs
index 1ecf80f3c8..256f66fcf0 100644
--- a/views/newsletter/templates/blocks/container/settings.hbs
+++ b/views/newsletter/templates/blocks/container/settings.hbs
@@ -4,11 +4,41 @@
-
<%= __('Background') %>
+
<%= __('Background color') %>
+
+
+