contenteditable & textmodule: refactor bindEvents
This commit is contained in:
Felix Niklas
parent
47c079d5d7
commit
76f261ecb3
2 changed files with 486 additions and 479 deletions
|
|
@ -66,14 +66,22 @@
|
|||
this.browserMagicKey = App.Browser.magicKey()
|
||||
this.browserHotkeys = App.Browser.hotkeys()
|
||||
|
||||
this.init();
|
||||
this.init()
|
||||
}
|
||||
|
||||
|
||||
Plugin.prototype.init = function () {
|
||||
var _this = this
|
||||
this.bindEvents()
|
||||
}
|
||||
|
||||
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 +93,10 @@
|
|||
}
|
||||
}
|
||||
|
||||
// handle enter
|
||||
this.$element.on('keydown', function (e) {
|
||||
_this.log('keydown', e.keyCode)
|
||||
if (_this.preventInput) {
|
||||
this.log('preventInput', _this.preventInput)
|
||||
Plugin.prototype.onKeydown = function (e) {
|
||||
this.log('keydown', e.keyCode)
|
||||
if (this.preventInput) {
|
||||
this.log('preventInput', this.preventInput)
|
||||
return
|
||||
}
|
||||
|
||||
|
|
@ -97,7 +104,7 @@
|
|||
if (e.keyCode === 13) {
|
||||
|
||||
// disbale multi line
|
||||
if (!_this.options.multiline) {
|
||||
if (!this.options.multiline) {
|
||||
e.preventDefault()
|
||||
return
|
||||
}
|
||||
|
|
@ -119,7 +126,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 +144,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 +154,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 +175,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 +186,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 +205,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 +243,28 @@
|
|||
document.execCommand('unlink')
|
||||
}
|
||||
if (e.keyCode == 89) {
|
||||
var cleanHtml = App.Utils.htmlRemoveRichtext(_this.$element.html())
|
||||
_this.$element.html(cleanHtml)
|
||||
var cleanHtml = App.Utils.htmlRemoveRichtext(this.$element.html())
|
||||
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.maxLengthOk(1) ) {
|
||||
if ( !this.allowKey(e) ) {
|
||||
if ( !this.maxLengthOk(1) ) {
|
||||
e.preventDefault()
|
||||
return
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// just paste text
|
||||
this.$element.on('paste', function (e) {
|
||||
Plugin.prototype.onPaste = function (e) {
|
||||
e.preventDefault()
|
||||
_this.log('paste')
|
||||
this.log('paste')
|
||||
|
||||
// insert and in case, resize images
|
||||
var clipboardData
|
||||
|
|
@ -279,7 +285,7 @@
|
|||
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()
|
||||
|
|
@ -289,7 +295,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()) {
|
||||
|
|
@ -299,15 +305,15 @@
|
|||
insert = 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 + "\">"
|
||||
}
|
||||
else {
|
||||
img = "<img style=\"width: 100%; max-width: " + width + "px;\" src=\"" + result + "\">"
|
||||
}
|
||||
_this.paste(img)
|
||||
this.paste(img)
|
||||
}
|
||||
|
||||
// resize if to big
|
||||
|
|
@ -340,59 +346,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.multiline) {
|
||||
if (this.options.mode === 'textonly') {
|
||||
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 +423,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,9 +435,9 @@
|
|||
|
||||
//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 + "\">")
|
||||
}
|
||||
else {
|
||||
|
|
@ -460,8 +466,6 @@
|
|||
})
|
||||
reader.readAsDataURL(file)
|
||||
}
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
// check if key is allowed, even if length limit is reached
|
||||
|
|
|
|||
|
|
@ -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 === '::') {
|
||||
_this.close(true)
|
||||
if (this.buffer === '::') {
|
||||
this.close(true)
|
||||
e.preventDefault()
|
||||
return
|
||||
}
|
||||
|
||||
// reduce buffer and show new result
|
||||
var length = _this.buffer.length
|
||||
_this.buffer = _this.buffer.substr(0, length-1)
|
||||
_this.log('BS backspace', _this.buffer)
|
||||
_this.result(_this.buffer.substr(2, length-1))
|
||||
var length = this.buffer.length
|
||||
this.buffer = this.buffer.substr(0, length-1)
|
||||
this.log('BS backspace', this.buffer)
|
||||
this.result(this.buffer.substr(2, length-1))
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
// build buffer
|
||||
this.$element.on('keypress', function (e) {
|
||||
_this.log('BUFF', _this.buffer, e.keyCode, String.fromCharCode(e.which))
|
||||
Plugin.prototype.onKeypress = function (e) {
|
||||
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) !== ':') {
|
||||
_this.buffer = ''
|
||||
if (this.buffer === ':' && String.fromCharCode(e.which) !== ':') {
|
||||
this.buffer = ''
|
||||
}
|
||||
|
||||
// oberserve second :
|
||||
if (_this.buffer === ':' && String.fromCharCode(e.which) === ':') {
|
||||
_this.buffer = _this.buffer + ':'
|
||||
if (this.buffer === ':' && String.fromCharCode(e.which) === ':') {
|
||||
this.buffer = this.buffer + ':'
|
||||
}
|
||||
|
||||
// oberserve first :
|
||||
if (!_this.buffer && String.fromCharCode(e.which) === ':') {
|
||||
_this.buffer = _this.buffer + ':'
|
||||
if (!this.buffer && String.fromCharCode(e.which) === ':') {
|
||||
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.log('BUFF ADD', sign, this.buffer, sign.length, e.which)
|
||||
this.buffer = this.buffer + sign
|
||||
//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()) {
|
||||
_this.open()
|
||||
if (!this.isActive()) {
|
||||
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() {
|
||||
|
|
|
|||
Loading…
Reference in a new issue