Fixed image resize bugs

This commit is contained in:
Amine Ben hammou
2017-09-13 11:56:03 +00:00
parent 6a83930ae0
commit f135b89de9
3 changed files with 69 additions and 31 deletions

View File

@@ -14,11 +14,15 @@ define([
defaults: { defaults: {
elementSelector: null, elementSelector: null,
resizeHandleSelector: true, // true will use edges of the element itself resizeHandleSelector: true, // true will use edges of the element itself
transformationFunction: function(event) { return event.dy; },
minLength: 0, minLength: 0,
maxLength: Infinity, maxLength: Infinity,
modelField: 'styles.block.height', modelField: 'styles.block.height',
onResize: null onResize: function(event) {
var currentLength = parseFloat(this.view.model.get(this.options.modelField)),
newLength = currentLength + event.y;
newLength = Math.min(this.options.maxLength, Math.max(this.options.minLength, newLength));
this.view.model.set(this.options.modelField, newLength + 'px');
}
}, },
events: { events: {
mouseenter: 'showResizeHandle', mouseenter: 'showResizeHandle',
@@ -42,20 +46,14 @@ define([
right: false, right: false,
bottom: (typeof this.options.resizeHandleSelector === 'string') ? this.view.$(this.options.resizeHandleSelector).get(0) : this.options.resizeHandleSelector bottom: (typeof this.options.resizeHandleSelector === 'string') ? this.view.$(this.options.resizeHandleSelector).get(0) : this.options.resizeHandleSelector
} }
}).on('resizestart', function (event) { })
.on('resizestart', function(event) {
that.isBeingResized = true; that.isBeingResized = true;
that.$el.addClass('mailpoet_resize_active'); that.$el.addClass('mailpoet_resize_active');
}).on('resizemove', function(event) { })
if (that.options.onResize) { .on('resizemove', function(event) {
return that.options.onResize(event, that) var onResize = that.options.onResize.bind(that);
} return onResize(event);
var currentLength = parseFloat(that.view.model.get(that.options.modelField)),
newLength = currentLength + that.options.transformationFunction(event);
if (newLength < that.options.minLength) newLength = that.options.minLength;
if (newLength > that.options.maxLength) newLength = that.options.maxLength;
that.view.model.set(that.options.modelField, newLength + 'px');
}) })
.on('resizeend', function (event) { .on('resizeend', function (event) {
that.isBeingResized = null; that.isBeingResized = null;

View File

@@ -25,6 +25,8 @@ define([
fullWidth: true, // true | false fullWidth: true, // true | false
width: '64px', width: '64px',
height: '64px', height: '64px',
maxWidth: false,
minWidth: '36px',
styles: { styles: {
block: { block: {
textAlign: 'center' textAlign: 'center'
@@ -47,31 +49,37 @@ define([
ResizableBehavior: { ResizableBehavior: {
elementSelector: '.mailpoet_image', elementSelector: '.mailpoet_image',
resizeHandleSelector: '.mailpoet_image_resize_handle', resizeHandleSelector: '.mailpoet_image_resize_handle',
onResize: function(event, that) { onResize: function(event) {
var corner = that.$('.mailpoet_image').offset(), var corner = this.$('.mailpoet_image').offset(),
width = event.pageX - corner.left width = event.pageX - corner.left,
if(width < 36) { minWidth = parseInt(this.view.model.get('minWidth')),
width = 36; maxWidth = parseInt(this.view.model.get('maxWidth'));
}
if(width > 660) { width = Math.min(maxWidth, Math.max(minWidth, width));
width = 660; var height = (this.view.model.get('height') / this.view.model.get('width')) * width;
} this.view.model.set({ width: width, height: height });
var height = (that.view.model.get('height') / that.view.model.get('width')) * width;
that.view.model.set({ width: width, height: height });
that.$('.mailpoet_content').css('width', width + 'px');
} }
}, },
ShowSettingsBehavior: { ShowSettingsBehavior: {
ignoreFrom: '.mailpoet_image_resize_handle' ignoreFrom: '.mailpoet_image_resize_handle'
} }
}), }),
initialize: function() { onDomRefresh: function() {
base.BlockView.prototype.initialize.apply(this, arguments); var maxWidth = Math.min(660, this.$el.width());
this.model.set('maxWidth', maxWidth + 'px');
}, },
onRender: function() { onRender: function() {
this.toolsView = new Module.ImageBlockToolsView({ model: this.model }); this.toolsView = new Module.ImageBlockToolsView({ model: this.model });
this.showChildView('toolsRegion', this.toolsView); this.showChildView('toolsRegion', this.toolsView);
var maxWidth = parseInt(this.model.get('maxWidth')),
minWidth = parseInt(this.model.get('minWidth')),
width = parseInt(this.model.get('width'));
width = Math.min(maxWidth, Math.max(minWidth, width));
this.model.set('width', width + 'px');
this.$('.mailpoet_content').css('width', width + 'px');
if (this.model.get('fullWidth')) { if (this.model.get('fullWidth')) {
this.$el.addClass('mailpoet_full_image'); this.$el.addClass('mailpoet_full_image');
} else { } else {
@@ -110,10 +118,26 @@ define([
'input .mailpoet_field_image_width_input': _.partial(this.updateValueAndCall, '.mailpoet_field_image_width', _.partial(this.changePixelField, 'width').bind(this)) 'input .mailpoet_field_image_width_input': _.partial(this.updateValueAndCall, '.mailpoet_field_image_width', _.partial(this.changePixelField, 'width').bind(this))
}; };
}, },
modelEvents: function() {
return {
'change:maxWidth': 'updateMaxWidth',
'change:width': 'updateWidth'
};
},
updateValueAndCall: function(fieldToUpdate, callable, event) { updateValueAndCall: function(fieldToUpdate, callable, event) {
this.$(fieldToUpdate).val(jQuery(event.target).val()); this.$(fieldToUpdate).val(jQuery(event.target).val());
callable(event); callable(event);
}, },
updateMaxWidth: function() {
var maxWidth = parseInt(this.model.get('maxWidth'));
this.$('.mailpoet_field_image_width').attr('max', maxWidth);
this.$('.mailpoet_field_image_width_input').attr('max', maxWidth);
},
updateWidth: function() {
var width = parseInt(this.model.get('width'));
this.$('.mailpoet_field_image_width').val(width);
this.$('.mailpoet_field_image_width_input').val(width);
},
initialize: function(options) { initialize: function(options) {
base.BlockSettingsView.prototype.initialize.apply(this, arguments); base.BlockSettingsView.prototype.initialize.apply(this, arguments);

View File

@@ -27,8 +27,24 @@
<label> <label>
<div class="mailpoet_form_field_title"><%= __('Width') %></div> <div class="mailpoet_form_field_title"><%= __('Width') %></div>
<div class="mailpoet_form_field_input_option"> <div class="mailpoet_form_field_input_option">
<input type="number" name="border-width-input" class="mailpoet_input mailpoet_input_small mailpoet_field_image_width_input" value="{{getNumber model.width}}" min="32" max="660" step="2" /> px <input
<input type="range" min="32" max="660" step="2" name="border-width" class="mailpoet_range mailpoet_range_small mailpoet_field_image_width" value="{{getNumber model.width}}" /> class="mailpoet_input mailpoet_input_small mailpoet_field_image_width_input"
name="image-width-input"
type="number"
value="{{getNumber model.width}}"
min="{{getNumber model.minWidth}}"
max="{{getNumber model.maxWidth}}"
step="2"
/> px
<input
class="mailpoet_range mailpoet_range_small mailpoet_field_image_width"
name="image-width"
type="range"
value="{{getNumber model.width}}"
min="{{getNumber model.minWidth}}"
max="{{getNumber model.maxWidth}}"
step="2"
/>
</div> </div>
</label> </label>
</div> </div>