From 15e9fe71866e6ee0b5f84385d3dc42a53aeaef28 Mon Sep 17 00:00:00 2001 From: Felix Niklas Date: Thu, 15 Feb 2018 19:13:21 +0100 Subject: [PATCH] enableObjectResizing shim 1. step MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit open bugs: the blur event doesn’t fire. so when clicking into the text after the controls appeared the controls don’t disappear as they should. also when clicking onto another image when the controls of one image are visible first the controls of the active image dissapear and the controls of the current image don’t directly disappear --- .../app/lib/base/jquery.contenteditable.js | 18 +-- .../base/jquery.enableObjectResizingShim.js | 105 ++++++++++++++++++ app/assets/stylesheets/application.css | 1 + .../jquery.enableObjectResizingShim.css | 77 +++++++++++++ 4 files changed, 193 insertions(+), 8 deletions(-) create mode 100644 app/assets/javascripts/app/lib/base/jquery.enableObjectResizingShim.js create mode 100644 app/assets/stylesheets/jquery.enableObjectResizingShim.css diff --git a/app/assets/javascripts/app/lib/base/jquery.contenteditable.js b/app/assets/javascripts/app/lib/base/jquery.contenteditable.js index cc4139e3e..05b6d5567 100644 --- a/app/assets/javascripts/app/lib/base/jquery.contenteditable.js +++ b/app/assets/javascripts/app/lib/base/jquery.contenteditable.js @@ -72,6 +72,7 @@ Plugin.prototype.init = function () { this.bindEvents() + this.$element.enableObjectResizingShim() } Plugin.prototype.bindEvents = function () { @@ -291,7 +292,7 @@ var imageFile = item.getAsFile() var reader = new FileReader() - reader.onload = function (e) { + reader.onload = $.proxy(function (e) { var result = e.target.result var img = document.createElement('img') img.src = result @@ -302,23 +303,24 @@ // scaleFactor = 2 //} - insert = function(dataUrl, width, height, isResized) { + insert = $.proxy(function(dataUrl, width, height, isResized) { //console.log('dataUrl', dataUrl) //console.log('scaleFactor', scaleFactor, isResized, maxWidth, width, height) this.log('image inserted') result = dataUrl if (this.options.imageWidth == 'absolute') { - img = "" + img = "" } else { - img = "" + img = "" } this.paste(img) - } + }, this) // resize if to big App.ImageService.resize(img.src, maxWidth, 'auto', scaleFactor, 'image/jpeg', 'auto', insert) - } + }, this) + reader.readAsDataURL(imageFile) imageInserted = true } @@ -438,10 +440,10 @@ this.log('image inserted') result = dataUrl if (this.options.imageWidth == 'absolute') { - img = $("") + img = $("") } else { - img = $("") + img = $("") } img = img.get(0) diff --git a/app/assets/javascripts/app/lib/base/jquery.enableObjectResizingShim.js b/app/assets/javascripts/app/lib/base/jquery.enableObjectResizingShim.js new file mode 100644 index 000000000..be889d775 --- /dev/null +++ b/app/assets/javascripts/app/lib/base/jquery.enableObjectResizingShim.js @@ -0,0 +1,105 @@ +(function ($, window, undefined) { + +/* +# mode: textonly/richtext / disable b/i/u/enter + strip on paste +# pasteOnlyText: true +# maxlength: 123 +# multiline: true / disable enter + strip on paste +# placeholder: 'some placeholder' +# +*/ + + var pluginName = 'enableObjectResizingShim', + defaults = { + debug: false + } + + function Plugin(element, options) { + this.element = element + this.$element = $(element) + + this.options = $.extend({}, defaults, options) + + 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)) + } + + Plugin.prototype.addResizeHandles = function (event) { + if(this.isActive) return + var $img = $(event.currentTarget) + var $holder = $('
') + $img.wrap($holder) + + for (var i=0; i<4; i++) { + $img.before('
') + } + + this.isActive = true + } + + Plugin.prototype.removeResizeHandles = function (event) { + console.log("removeResizeHandles") + if(this.isResizing) return + var $img = this.$element.find('.enableObjectResizingShim img') + $img.siblings().remove() + $img.unwrap() + this.isActive = false + } + + Plugin.prototype.startResize = function (event) { + $(document).on('mousemove.enableObjectResizing', this.resize.bind(this)) + $(document).on('mouseup.enableObjectResizing', this.resizeEnd.bind(this)) + var $handle = $(event.currentTarget) + this.resizeCorner = $handle.index() + this.$img = this.$element.find('.enableObjectResizingShim img') + 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.isResizing = true + } + + Plugin.prototype.resize = function (event) { + event.preventDefault() + var dx = event.pageX - this.startX + this.$clone.css('width', this.startWidth + dx) + } + + Plugin.prototype.resizeEnd = function (event) { + $(document).off('mousemove.enableObjectResizing') + $(document).off('mouseup.enableObjectResizing') + + this.$img.css({ + width: this.$clone.width(), + height: this.$clone.height() + }) + this.$clone.remove() + this.isResizing = false + } + + $.fn[pluginName] = function (options) { + return this.each(function () { + if (!$.data(this, 'plugin_' + pluginName)) { + $.data(this, 'plugin_' + pluginName, new Plugin(this, options)) + } + }); + } + +}(jQuery, window)); \ No newline at end of file diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css index 020860823..809f2b57b 100644 --- a/app/assets/stylesheets/application.css +++ b/app/assets/stylesheets/application.css @@ -10,6 +10,7 @@ *= require ./font.css *= require ./svg-dimensions.css *= require ./highlighter-github.css + *= require ./jquery.enableObjectResizingShim.css *= require ./zammad.scss * *= require_tree ./custom/ diff --git a/app/assets/stylesheets/jquery.enableObjectResizingShim.css b/app/assets/stylesheets/jquery.enableObjectResizingShim.css new file mode 100644 index 000000000..bce47d8b4 --- /dev/null +++ b/app/assets/stylesheets/jquery.enableObjectResizingShim.css @@ -0,0 +1,77 @@ +.enableObjectResizingShim { + box-shadow: 0 0 0 1px black; + position: relative; + display: inline-block !important; + vertical-align: top; +} + +.enableObjectResizingShim-handle { + position: absolute; + width: 20px; + height: 20px; + margin: -10px; + left: 0; + top: 0; + cursor: nwse-resize; + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; +} + +.enableObjectResizingShim-handle:after { + content: ""; + position: absolute; + left: 6px; + top: 6px; + width: 8px; + height: 8px; + background: white; + border: 1px solid black; +} + +.enableObjectResizingShim-handle:hover:after { + background: black; +} + +.enableObjectResizingShim-handle:nth-child(2) { + left: 100%; + cursor: nesw-resize; +} + +.enableObjectResizingShim-handle:nth-child(3) { + left: 100%; + top: 100%; +} + +.enableObjectResizingShim-handle:nth-child(4) { + top: 100%; + cursor: nesw-resize; +} + +.enableObjectResizingShim-clone { + position: absolute; + width: 100%; + height: auto; + opacity: 0.5; + border: 1px dashed black; +} + +.enableObjectResizingShim-clone--0 { + right: 0; + bottom: 0; +} + +.enableObjectResizingShim-clone--1 { + left: 0; + bottom: 0; +} + +.enableObjectResizingShim-clone--2 { + left: 0; + top: 0; +} + +.enableObjectResizingShim-clone--3 { + top: 0; + right: 0; +} \ No newline at end of file