Sutty/trabajo-afectivo
5
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

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

Browse source
This commit is contained in:
Martin Edenhofer 2018-02-20 06:03:02 +01:00
commit fa53eeb33a
5 changed files with 724 additions and 482 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

132
app/assets/javascripts/app/lib/base/jquery.contenteditable.js
View file

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

155
app/assets/javascripts/app/lib/base/jquery.enableObjectResizingShim.js Normal file
View file

@ -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));

91
app/assets/javascripts/app/lib/base/jquery.textmodule.js
View file

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

1
app/assets/stylesheets/application.css
View file

@ -10,6 +10,7 @@
*= require ./font.css *= require ./font.css
*= require ./svg-dimensions.css *= require ./svg-dimensions.css
*= require ./highlighter-github.css *= require ./highlighter-github.css
*= require ./jquery.enableObjectResizingShim.css
*= require ./zammad.scss *= require ./zammad.scss
* *
*= require_tree ./custom/ *= require_tree ./custom/

77
app/assets/stylesheets/jquery.enableObjectResizingShim.css Normal file
View file

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