diff --git a/assets/js/src/newsletter_editor/blocks/image.js b/assets/js/src/newsletter_editor/blocks/image.js index 63e5e2cfcc..ffca97a07e 100644 --- a/assets/js/src/newsletter_editor/blocks/image.js +++ b/assets/js/src/newsletter_editor/blocks/image.js @@ -65,7 +65,7 @@ define([ events: function() { return { "input .mailpoet_field_image_link": _.partial(this.changeField, "link"), - "input .mailpoet_field_image_address": _.partial(this.changeField, "src"), + "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"), @@ -327,6 +327,20 @@ define([ this._mediaManager.open(); }, + changeAddress: function(event) { + var src = jQuery(event.target).val(); + var image = new Image(); + + image.onload = function() { + this.model.set({ + src: src, + width: image.naturalWidth + 'px', + height: image.naturalHeight + 'px' + }); + }.bind(this); + + image.src = src; + }, onBeforeDestroy: function() { base.BlockSettingsView.prototype.onBeforeDestroy.apply(this, arguments); if (typeof this._mediaManager === 'object') { diff --git a/tests/javascript/mochaTestHelper.js b/tests/javascript/mochaTestHelper.js index 47a2f7bf38..eff0b7ca80 100644 --- a/tests/javascript/mochaTestHelper.js +++ b/tests/javascript/mochaTestHelper.js @@ -68,6 +68,26 @@ global.stubAvailableStyles = function (EditorApplication, styles) { EditorApplication.getAvailableStyles = sinon.stub().returns(new Backbone.SuperModel(styles)); }; +global.stubImage = function(defaultWidth, defaultHeight) { + global.Image = function() { + this.onload = function() {}; + this.naturalWidth = defaultWidth; + this.naturalHeight = defaultHeight; + this.address = ''; + + Object.defineProperty(this, 'src', { + "get": function() { + return this.address; + }, + "set": function(src) { + this.address = src; + this.onload(); + }, + }); + }; +} + + testHelpers.loadTemplate('blocks/base/toolsGeneric.hbs', window, {id: 'newsletter_editor_template_tools_generic'}); testHelpers.loadTemplate('blocks/automatedLatestContent/block.hbs', window, {id: 'newsletter_editor_template_automated_latest_content_block'}); diff --git a/tests/javascript/newsletter_editor/blocks/image.spec.js b/tests/javascript/newsletter_editor/blocks/image.spec.js index 8e26992929..03ad3ed732 100644 --- a/tests/javascript/newsletter_editor/blocks/image.spec.js +++ b/tests/javascript/newsletter_editor/blocks/image.spec.js @@ -155,12 +155,17 @@ define([ describe('block settings view', function () { var model, view; + var newWidth = 123; + var newHeight = 456; + var newLink = 'http://example.org/someNewLink'; + var newSrc = 'http://example.org/someNewImage.png'; before(function () { global.stubChannel(EditorApplication); global.stubConfig(EditorApplication, { blockDefaults: {}, }); + global.stubImage(newWidth, newHeight); model = new (ImageBlock.ImageBlockModel)(); view = new (ImageBlock.ImageBlockSettingsView)({model: model}); }); @@ -171,15 +176,23 @@ define([ describe('once rendered', function () { it('updates the model when link changes', function () { - var newValue = 'http://example.org/someNewLink'; - view.$('.mailpoet_field_image_link').val(newValue).trigger('input'); - expect(model.get('link')).to.equal(newValue); + view.$('.mailpoet_field_image_link').val(newLink).trigger('input'); + expect(model.get('link')).to.equal(newLink); }); it('updates the model when src changes', function () { - var newValue = 'http://example.org/someNewImage.png'; - view.$('.mailpoet_field_image_address').val(newValue).trigger('input'); - expect(model.get('src')).to.equal(newValue); + view.$('.mailpoet_field_image_address').val(newSrc).trigger('input'); + expect(model.get('src')).to.equal(newSrc); + }); + + it('updates the width when src changes', function () { + view.$('.mailpoet_field_image_address').val(newSrc).trigger('input'); + expect(model.get('width')).to.equal(newWidth + 'px'); + }); + + it('updates the height when src changes', function () { + view.$('.mailpoet_field_image_address').val(newSrc).trigger('input'); + expect(model.get('height')).to.equal(newHeight + 'px'); }); it('updates the model when alt changes', function () {