Merge branch 'private-richtext-object-resizing-shim' into develop

app/assets/javascripts/app/lib/base/jquery.contenteditable.js

@@ -66,14 +66,23 @@
     this.browserMagicKey = App.Browser.magicKey()
     this.browserHotkeys = App.Browser.hotkeys()
 
-    this.init();
+    this.init()
   }
 
 
   Plugin.prototype.init = function () {
-    var _this = this
+    this.bindEvents()
+    this.$element.enableObjectResizingShim()
+  }
 
-    this.toggleBlock = function(tag) {
+  Plugin.prototype.bindEvents = function () {
+    this.$element.on('keydown', this.onKeydown.bind(this))
+    this.$element.on('paste', this.onPaste.bind(this))
+    this.$element.on('dragover', this.onDragover.bind(this))
+    this.$element.on('drop', this.onDrop.bind(this))
+  }
+
+  Plugin.prototype.toggleBlock = function(tag) {
     sel = window.getSelection()
     node = $(sel.anchorNode)
     if (node.is(tag) || node.parent().is(tag) || node.parent().parent().is(tag)) {
@@ -85,11 +94,10 @@
     }
   }
 
-    // handle enter
+  Plugin.prototype.onKeydown = function (e) {
-    this.$element.on('keydown', function (e) {
+    this.log('keydown', e.keyCode)
-      _this.log('keydown', e.keyCode)
+    if (this.preventInput) {
-      if (_this.preventInput) {
+      this.log('preventInput', this.preventInput)
-        this.log('preventInput', _this.preventInput)
       return
     }
 
@@ -97,7 +105,7 @@
     if (e.keyCode === 13) {
 
       // disbale multi line
-        if (!_this.options.multiline) {
+      if (!this.options.multiline) {
         e.preventDefault()
         return
       }
@@ -119,7 +127,7 @@
       //  it compat. to other systems, do it here
       if (!e.shiftKey && e.altKey && !e.ctrlKey && !e.metaKey) {
         e.preventDefault()
-          _this.paste('<br><br>')
+        this.paste('<br><br>')
         return
       }
     }
@@ -137,7 +145,7 @@
     //  hotkeys + o -> Draws a line through the middle of the current selection
     //  hotkeys + w -> Removes any hyperlink from the current selection
     var richtTextControl = false
-      if (_this.browserMagicKey == 'cmd') {
+    if (this.browserMagicKey == 'cmd') {
       if (!e.altKey && !e.ctrlKey && e.metaKey) {
         richtTextControl = true
       }
@@ -147,7 +155,7 @@
         richtTextControl = true
       }
     }
-      if (richtTextControl && _this.options.richTextFormatKey[ e.keyCode ]) {
+    if (richtTextControl && this.options.richTextFormatKey[ e.keyCode ]) {
       e.preventDefault()
       if (e.keyCode == 66) {
         document.execCommand('bold')
@@ -168,7 +176,7 @@
     }
 
     var hotkeys = false
-      if (_this.browserHotkeys == 'ctrl+shift') {
+    if (this.browserHotkeys == 'ctrl+shift') {
       if (!e.altKey && e.ctrlKey && !e.metaKey && e.shiftKey) {
         hotkeys = true
       }
@@ -179,7 +187,7 @@
       }
     }
 
-      if (hotkeys && (_this.options.richTextFormatKey[ e.keyCode ]
+    if (hotkeys && (this.options.richTextFormatKey[ e.keyCode ]
       || e.keyCode == 49
       || e.keyCode == 50
       || e.keyCode == 51
@@ -198,18 +206,18 @@
       e.preventDefault()
 
       // disable rich text b/u/i
-        if ( _this.options.mode === 'textonly' ) {
+      if ( this.options.mode === 'textonly' ) {
         return
       }
 
       if (e.keyCode == 49) {
-          _this.toggleBlock('h1')
+        this.toggleBlock('h1')
       }
       if (e.keyCode == 50) {
-          _this.toggleBlock('h2')
+        this.toggleBlock('h2')
       }
       if (e.keyCode == 51) {
-          _this.toggleBlock('h3')
+        this.toggleBlock('h3')
       }
       if (e.keyCode == 66) {
         document.execCommand('bold')
@@ -236,29 +244,28 @@
         document.execCommand('unlink')
       }
       if (e.keyCode == 89) {
-          var cleanHtml = App.Utils.htmlRemoveRichtext(_this.$element.html())
+        var cleanHtml = App.Utils.htmlRemoveRichtext(this.$element.html())
-          _this.$element.html(cleanHtml)
+        this.$element.html(cleanHtml)
       }
       if (e.keyCode == 90) {
         document.execCommand('insertHorizontalRule')
       }
-        _this.log('content editable richtext key', e.keyCode)
+      this.log('content editable richtext key', e.keyCode)
       return true
     }
 
     // limit check
-      if ( !_this.allowKey(e) ) {
+    if ( !this.allowKey(e) ) {
-        if ( !_this.maxLengthOk(1) ) {
+      if ( !this.maxLengthOk(1) ) {
         e.preventDefault()
         return
       }
     }
-    })
+  }
 
-    // just paste text
+  Plugin.prototype.onPaste = function (e) {
-    this.$element.on('paste', function (e) {
     e.preventDefault()
-      _this.log('paste')
+    this.log('paste')
 
     // insert and in case, resize images
     var clipboardData
@@ -279,40 +286,41 @@
       var imageInserted = false
       var item = clipboardData.items[0]
       if (item.kind == 'file' && (item.type == 'image/png' || item.type == 'image/jpeg')) {
-          _this.log('paste image', item)
+        this.log('paste image', item)
         console.log(item)
 
         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
-            maxWidth = _this.$element.width() || 500
+          maxWidth = this.$element.width() || 500
           scaleFactor = 2
           //scaleFactor = 1
           //if (window.isRetina && window.isRetina()) {
           //  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')
+            this.log('image inserted')
             result = dataUrl
-              if (_this.options.imageWidth == 'absolute') {
+            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.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
       }
@@ -340,59 +348,59 @@
       docType = 'text3'
       text = clipboardData.getData('text')
     }
-      _this.log('paste', docType, text)
+    this.log('paste', docType, text)
 
     if (docType == 'html') {
-        if (_this.options.mode === 'textonly') {
+      if (this.options.mode === 'textonly') {
-          if (!_this.options.multiline) {
+        if (!this.options.multiline) {
           text = App.Utils.htmlRemoveTags(text)
-            _this.log('htmlRemoveTags', text)
+          this.log('htmlRemoveTags', text)
         }
         else {
-            _this.log('htmlRemoveRichtext', text)
+          this.log('htmlRemoveRichtext', text)
           text = App.Utils.htmlRemoveRichtext(text)
         }
       }
       else {
-          _this.log('htmlCleanup', text)
+        this.log('htmlCleanup', text)
         text = App.Utils.htmlCleanup(text)
       }
       text = text.html()
-        _this.log('text.html()', text)
+      this.log('text.html()', text)
 
       // as fallback, take text
       if (!text) {
         text = App.Utils.text2html(text.text())
-          _this.log('text2html', text)
+        this.log('text2html', text)
       }
     }
     else {
       text = App.Utils.text2html(text)
-        _this.log('text2html', text)
+      this.log('text2html', text)
     }
 
-      if (!_this.maxLengthOk(text.length)) {
+    if (!this.maxLengthOk(text.length)) {
       return
     }
 
     // cleanup
     text = App.Utils.removeEmptyLines(text)
-      _this.log('insert', text)
+    this.log('insert', text)
 
-      _this.paste(text)
+    this.paste(text)
     return true
-    })
+  }
 
-    this.$element.on('dragover', function (e) {
+  Plugin.prototype.onDragover = function (e) {
     e.stopPropagation()
     e.preventDefault()
-      _this.log('dragover')
+    this.log('dragover')
-    })
+  }
 
-    this.$element.on('drop', function (e) {
+  Plugin.prototype.onDrop = function (e) {
     e.stopPropagation();
     e.preventDefault();
-      _this.log('drop')
+    this.log('drop')
 
     var dataTransfer
     if (window.dataTransfer) { // ie
@@ -417,7 +425,7 @@
         var result = e.target.result
         var img = document.createElement('img')
         img.src = result
-          maxWidth = _this.$element.width() || 500
+        maxWidth = this.$element.width() || 500
         scaleFactor = 2
         //scaleFactor = 1
         //if (window.isRetina && window.isRetina()) {
@@ -429,13 +437,13 @@
 
           //console.log('dataUrl', dataUrl)
           //console.log('scaleFactor', scaleFactor, isResized, maxWidth, width, height)
-            _this.log('image inserted')
+          this.log('image inserted')
           result = dataUrl
-            if (_this.options.imageWidth == 'absolute') {
+          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)
 
@@ -460,8 +468,6 @@
       })
       reader.readAsDataURL(file)
     }
-    })
-
   }
 
   // check if key is allowed, even if length limit is reached

app/assets/javascripts/app/lib/base/jquery.enableObjectResizingShim.js

@@ -0,0 +1,155 @@
+(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
+
+    // only run if needed
+    if (!document.queryCommandSupported('enableObjectResizing')) {
+      this.bindEvents()
+    }
+  }
+
+  Plugin.prototype.bindEvents = function () {
+    this.$element.on('click', 'img', this.createEditor.bind(this))
+    this.$element.on('click', this.destroyEditors.bind(this))
+  }
+
+  Plugin.prototype.createEditor = function (event) {
+    event.stopPropagation()
+    this.destroyEditors()
+    var $img = $(event.currentTarget)
+
+    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++) {
+      this.$element.before('<div class="enableObjectResizingShim-handle"></div>')
+    }
+
+    $(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))
+  }
+
+  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
+    this.$element.off('click.objectResizingEditor')
+    $(document).off('click.objectResizingEditor')
+    $(document).off('keydown.objectResizingEditor')
+    this.$element.removeClass('objectResizingEditorActive')
+    this.$element.siblings().remove()
+    this.$element.unwrap()
+  }
+
+  Editor.prototype.startResize = function (event) {
+    var $handle = $(event.currentTarget)
+    this.resizeCorner = $handle.index()
+    this.resizeDir = this.resizeCorner == 0 || this.resizeCorner == 3 ? -1 : 1
+    this.startX = event.pageX
+    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))
+  }
+
+  Editor.prototype.resize = function (event) {
+    event.preventDefault()
+    var dx = event.pageX - this.startX
+    this.$clone.css('width', this.startWidth + (this.resizeDir * dx))
+  }
+
+  Editor.prototype.resizeEnd = function (event) {
+    $(document).off('mousemove.enableObjectResizing')
+    $(document).off('mouseup.enableObjectResizing')
+
+    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)) {
+        $.data(this, 'plugin_' + pluginName, new Plugin(this, options))
+      }
+    });
+  }
+
+}(jQuery, window));

app/assets/javascripts/app/lib/base/jquery.textmodule.js

@@ -34,23 +34,34 @@
       this.ce = $.data(element, 'plugin_ce')
     }
 
-    this.init();
+    this.init()
   }
 
   Plugin.prototype.init = function () {
     this.renderBase()
-    var _this = this
+    this.bindEvents()
+  }
 
-    this.$element.on('keydown', function (e) {
+  Plugin.prototype.bindEvents = function () {
+    this.$element.on('keydown', this.onKeydown.bind(this))
+    this.$element.on('keypress', this.onKeypress.bind(this))
+    this.$element.on('focus', this.onFocus.bind(this))
+  }
 
+  Plugin.prototype.onFocus = function (e) {
+    this.close()
+  }
+
+  Plugin.prototype.onKeydown = function (e) {
+    console.log("onKeydown", this.isActive())
     // navigate through item
-      if (_this.isActive()) {
+    if (this.isActive()) {
 
       // esc
       if (e.keyCode === 27) {
         e.preventDefault()
         e.stopPropagation()
-          _this.close()
+        this.close()
         return
       }
 
@@ -58,18 +69,18 @@
       if (e.keyCode === 13) {
         e.preventDefault()
         e.stopPropagation()
-          var id = _this.$widget.find('.dropdown-menu li.is-active').data('id')
+        var id = this.$widget.find('.dropdown-menu li.is-active').data('id')
 
         // as fallback use hovered element
         if (!id) {
-            id = _this.$widget.find('.dropdown-menu li:hover').data('id')
+          id = this.$widget.find('.dropdown-menu li:hover').data('id')
         }
 
         // as fallback first element
         if (!id) {
-            id = _this.$widget.find('.dropdown-menu li:first-child').data('id')
+          id = this.$widget.find('.dropdown-menu li:first-child').data('id')
         }
-          _this.take(id)
+        this.take(id)
         return
       }
 
@@ -84,7 +95,7 @@
       if (e.keyCode === 38 || e.keyCode === 40) {
         e.preventDefault()
         e.stopPropagation()
-          var active = _this.$widget.find('.dropdown-menu li.is-active')
+        var active = this.$widget.find('.dropdown-menu li.is-active')
         active.removeClass('is-active')
 
         if (e.keyCode == 38 && active.prev().size()) {
@@ -96,7 +107,7 @@
 
         active.addClass('is-active')
 
-          var menu = _this.$widget.find('.dropdown-menu')
+        var menu = this.$widget.find('.dropdown-menu')
 
         if (!active.get(0)) {
           return
@@ -115,34 +126,30 @@
 
     // esc
     if (e.keyCode === 27) {
-        _this.close()
+      this.close()
     }
-    })
 
     // reduce buffer, in case close it
-    this.$element.on('keydown', function (e) {
-
     // backspace
-      if (e.keyCode === 8 && _this.buffer) {
+    if (e.keyCode === 8 && this.buffer) {
 
       // backspace + buffer === :: -> close textmodule
-        if (_this.buffer === '::') {
+      if (this.buffer === '::') {
-          _this.close(true)
+        this.close(true)
         e.preventDefault()
         return
       }
 
       // reduce buffer and show new result
-        var length   = _this.buffer.length
+      var length   = this.buffer.length
-        _this.buffer = _this.buffer.substr(0, length-1)
+      this.buffer = this.buffer.substr(0, length-1)
-        _this.log('BS backspace', _this.buffer)
+      this.log('BS backspace', this.buffer)
-        _this.result(_this.buffer.substr(2, length-1))
+      this.result(this.buffer.substr(2, length-1))
+    }
   }
-    })
 
-    // build buffer
+  Plugin.prototype.onKeypress = function (e) {
-    this.$element.on('keypress', function (e) {
+    this.log('BUFF', this.buffer, e.keyCode, String.fromCharCode(e.which))
-      _this.log('BUFF', _this.buffer, e.keyCode, String.fromCharCode(e.which))
 
     // shift
     if (e.keyCode === 16) return
@@ -154,40 +161,36 @@
     if (e.keyCode === 37 || e.keyCode === 38 || e.keyCode === 39 || e.keyCode === 40) return
 
     // observer other second key
-      if (_this.buffer === ':' && String.fromCharCode(e.which) !== ':') {
+    if (this.buffer === ':' && String.fromCharCode(e.which) !== ':') {
-        _this.buffer = ''
+      this.buffer = ''
     }
 
     // oberserve second :
-      if (_this.buffer === ':' && String.fromCharCode(e.which) === ':') {
+    if (this.buffer === ':' && String.fromCharCode(e.which) === ':') {
-        _this.buffer = _this.buffer + ':'
+      this.buffer = this.buffer + ':'
     }
 
     // oberserve first :
-      if (!_this.buffer && String.fromCharCode(e.which) === ':') {
+    if (!this.buffer && String.fromCharCode(e.which) === ':') {
-        _this.buffer = _this.buffer + ':'
+      this.buffer = this.buffer + ':'
     }
 
-      if (_this.buffer && _this.buffer.substr(0,2) === '::') {
+    if (this.buffer && this.buffer.substr(0,2) === '::') {
 
       var sign = String.fromCharCode(e.which)
       if ( sign && sign !== ':' && e.which != 8 ) { // 8 == backspace
-          _this.buffer = _this.buffer + sign
+        this.buffer = this.buffer + sign
-          //_this.log('BUFF ADD', sign, this.buffer, sign.length, e.which)
+        //this.log('BUFF ADD', sign, this.buffer, sign.length, e.which)
       }
-        _this.log('BUFF HINT', _this.buffer, _this.buffer.length, e.which, String.fromCharCode(e.which))
+      this.log('BUFF HINT', this.buffer, this.buffer.length, e.which, String.fromCharCode(e.which))
 
-        if (!_this.isActive()) {
+      if (!this.isActive()) {
-          _this.open()
+        this.open()
       }
 
-        _this.result(_this.buffer.substr(2, _this.buffer.length))
+      this.result(this.buffer.substr(2, this.buffer.length))
+    }
   }
-
-    }).on('focus', function (e) {
-      _this.close()
-    })
-  };
 
   // create base template
   Plugin.prototype.renderBase = function() {

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