enableObjectResizing shim 1. step

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/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 style=\"width: " + width + "px; height: " + height + "px\" src=\"" + result + "\">"
+              img = "<img tabindex=\"0\" style=\"width: " + width + "px; height: " + height + "px\" src=\"" + result + "\">"
             }
             else {
-              img = "<img style=\"width: 100%; max-width: " + width + "px;\" src=\"" + result + "\">"
+              img = "<img tabindex=\"0\" style=\"width: 100%; max-width: " + width + "px;\" src=\"" + result + "\">"
             }
             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 style=\"width: " + width + "px; height: " + height + "px\" src=\"" + result + "\">")
+            img = $("<img tabindex=\"0\" style=\"width: " + width + "px; height: " + height + "px\" src=\"" + result + "\">")
           }
           else {
-            img = $("<img style=\"width: 100%; max-width: " + width + "px;\" src=\"" + result + "\">")
+            img = $("<img tabindex=\"0\" style=\"width: 100%; max-width: " + width + "px;\" src=\"" + result + "\">")
           }
           img = img.get(0)
 

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 = $('<div class="enableObjectResizingShim" contenteditable="false"></div>')
+    $img.wrap($holder)
+
+    for (var i=0; i<4; i++) {
+      $img.before('<div class="enableObjectResizingShim-handle"></div>')
+    }
+
+    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));

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/

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;
+}