Fixed image resize bugs
This commit is contained in:
@@ -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;
|
||||||
|
@@ -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);
|
||||||
|
|
||||||
|
@@ -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>
|
||||||
|
Reference in New Issue
Block a user