enableObjectResizingShim: fix deselect & allow delete

- fix deselect when clicking somewhere else
- allow to delete the image via backspace
This commit is contained in:
Felix Niklas 2018-02-16 14:08:32 +01:00
parent 15e9fe7186
commit fa449de9ed

View file

@ -23,77 +23,127 @@
this._defaults = defaults
this._name = pluginName
this.isActive = false
// only run if needed
if (!document.queryCommandSupported('enableObjectResizing')) {
this.init()
}
}
Plugin.prototype.init = function () {
this.bindEvents()
}
}
Plugin.prototype.bindEvents = function () {
this.$element.on('focus', 'img', this.addResizeHandles.bind(this))
this.$element.on('blur', 'img', this.removeResizeHandles.bind(this))
this.$element.on('mousedown', '.enableObjectResizingShim-handle', this.startResize.bind(this))
this.$element.on('click', 'img', this.createEditor.bind(this))
this.$element.on('click', this.destroyEditors.bind(this))
}
Plugin.prototype.addResizeHandles = function (event) {
if(this.isActive) return
Plugin.prototype.createEditor = function (event) {
event.stopPropagation()
this.destroyEditors()
var $img = $(event.currentTarget)
var $holder = $('<div class="enableObjectResizingShim" contenteditable="false"></div>')
$img.wrap($holder)
if (!$img.hasClass('objectResizingEditorActive')) {
new Editor($img)
}
}
Plugin.prototype.destroyEditors = function () {
this.$element.find('img.objectResizingEditorActive').each(function(i, img){
editor = $(img).data('objectResizingEditor')
if(editor){
editor.destroy()
}
})
}
/*
Resize Editor
*/
function Editor($element) {
this.$element = $element
this.isResizing = false
this.$element.data('objectResizingEditor', this)
this.$element.addClass('objectResizingEditorActive')
this.$element.wrap('<div class="enableObjectResizingShim" contenteditable="false"></div>')
for (var i=0; i<4; i++) {
$img.before('<div class="enableObjectResizingShim-handle"></div>')
this.$element.before('<div class="enableObjectResizingShim-handle"></div>')
}
this.isActive = true
$(document).one('click.objectResizingEditor', this.destroy.bind(this))
$(document).one('keydown.objectResizingEditor', this.onKeydown.bind(this))
this.$element.on('click.objectResizingEditor', this.stopPropagation.bind(this))
this.$element.parent().find('.enableObjectResizingShim-handle').on('mousedown', this.startResize.bind(this))
}
Plugin.prototype.removeResizeHandles = function (event) {
console.log("removeResizeHandles")
Editor.prototype.onKeydown = function (event) {
this.destroy()
switch (event.keyCode) {
case 8: // backspace
this.$element.remove()
break
default:
event.stopPropagation()
break
}
}
Editor.prototype.stopPropagation = function (event) {
event.stopPropagation()
}
Editor.prototype.destroy = function (event) {
if(this.isResizing) return
var $img = this.$element.find('.enableObjectResizingShim img')
$img.siblings().remove()
$img.unwrap()
this.isActive = false
this.$element.off('click.objectResizingEditor')
$(document).off('click.objectResizingEditor')
$(document).off('keydown.objectResizingEditor')
this.$element.removeClass('objectResizingEditorActive')
this.$element.siblings().remove()
this.$element.unwrap()
}
Plugin.prototype.startResize = function (event) {
$(document).on('mousemove.enableObjectResizing', this.resize.bind(this))
$(document).on('mouseup.enableObjectResizing', this.resizeEnd.bind(this))
Editor.prototype.startResize = function (event) {
var $handle = $(event.currentTarget)
this.resizeCorner = $handle.index()
this.$img = this.$element.find('.enableObjectResizingShim img')
this.resizeDir = this.resizeCorner == 0 || this.resizeCorner == 3 ? -1 : 1
this.startX = event.pageX
this.startWidth = this.$img.width()
this.$clone = this.$img.clone().css({width: '', height: ''}).addClass('enableObjectResizingShim-clone enableObjectResizingShim-clone--'+ this.resizeCorner)
this.$img.after(this.$clone)
this.startWidth = this.$element.width()
this.$clone = this.$element.clone().css({width: '', height: ''}).addClass('enableObjectResizingShim-clone enableObjectResizingShim-clone--'+ this.resizeCorner)
this.$element.after(this.$clone)
this.isResizing = true
$(document).on('mousemove.enableObjectResizing', this.resize.bind(this))
$(document).on('mouseup.enableObjectResizing', this.resizeEnd.bind(this))
}
Plugin.prototype.resize = function (event) {
Editor.prototype.resize = function (event) {
event.preventDefault()
var dx = event.pageX - this.startX
this.$clone.css('width', this.startWidth + dx)
this.$clone.css('width', this.startWidth + (this.resizeDir * dx))
}
Plugin.prototype.resizeEnd = function (event) {
Editor.prototype.resizeEnd = function (event) {
$(document).off('mousemove.enableObjectResizing')
$(document).off('mouseup.enableObjectResizing')
this.$img.css({
this.$element.css({
width: this.$clone.width(),
height: this.$clone.height()
})
this.$clone.remove()
// reset isResizing with a delay to prevent a mouseup in the editor to trigger a editor-destroy
setTimeout(function(){
this.isResizing = false
}.bind(this))
}
$.fn[pluginName] = function (options) {
return this.each(function () {
if (!$.data(this, 'plugin_' + pluginName)) {