Cavemanon/piratepoet
7
Fork 0
Code Pull Requests Actions Releases 16 Activity

Fixes Image block to update image dimensions when image src changes

Browse Source
This commit is contained in:
Tautvidas Sipavičius
2017-04-11 19:38:57 +03:00
parent 63b8d892f7
commit 30d67508cb
3 changed files with 54 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
assets/js/src/newsletter_editor/blocks/image.js
View File

@ -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') {

20
tests/javascript/mochaTestHelper.js
View File

@ -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'});

25
tests/javascript/newsletter_editor/blocks/image.spec.js
View File

@ -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 () {