diff --git a/app/assets/javascripts/app/lib/base/jquery.contenteditable.js b/app/assets/javascripts/app/lib/base/jquery.contenteditable.js index fa573f508..41d1ce7fd 100644 --- a/app/assets/javascripts/app/lib/base/jquery.contenteditable.js +++ b/app/assets/javascripts/app/lib/base/jquery.contenteditable.js @@ -38,12 +38,12 @@ 66: true, // b 73: true, // i 85: true, // u - } + }, }; function Plugin( element, options ) { - this.element = element; - this.$element = $(element) + this.element = element; + this.$element = $(element) this.options = $.extend( {}, defaults, options) ; @@ -53,7 +53,7 @@ } this._defaults = defaults; - this._name = pluginName; + this._name = pluginName; this.preventInput = false @@ -61,95 +61,117 @@ } Plugin.prototype.init = function () { + var _this = this // set focus class - this.$element.on('focus', $.proxy(function (e) { - this.$element.closest('.form-control').addClass('focus') - }, this)).on('blur', $.proxy(function (e) { - this.$element.closest('.form-control').removeClass('focus') - }, this)) + this.$element.on('focus', function (e) { + _this.$element.closest('.form-control').addClass('focus') + }).on('blur', function (e) { + _this.$element.closest('.form-control').removeClass('focus') + }) // process placeholder if ( this.options.placeholder ) { this.updatePlaceholder( 'add' ) - this.$element.on('focus', $.proxy(function (e) { - this.updatePlaceholder( 'remove' ) - }, this)).on('blur', $.proxy(function (e) { - this.updatePlaceholder( 'add' ) - }, this)) + this.$element.on('focus', function (e) { + _this.updatePlaceholder( 'remove' ) + }).on('blur', function (e) { + _this.updatePlaceholder( 'add' ) + }) } // maxlength check //this.options.maxlength = 10 if ( this.options.maxlength ) { - this.$element.on('keydown', $.proxy(function (e) { - console.log('maxlength', e.keyCode, this.allowKey(e)) + this.$element.on('keydown', function (e) { + console.log('maxlength', e.keyCode, _this.allowKey(e)) // check control key - if ( this.allowKey(e) ) { - this.maxLengthOk() + if ( _this.allowKey(e) ) { + _this.maxLengthOk() } // check type ahead key else { - if ( !this.maxLengthOk( true ) ) { + if ( !_this.maxLengthOk( true ) ) { e.preventDefault() } } - }, this)).on('keyup', $.proxy(function (e) { + }).on('keyup', function (e) { // check control key - if ( this.allowKey(e) ) { - this.maxLengthOk() + if ( _this.allowKey(e) ) { + _this.maxLengthOk() } // check type ahead key else { - if ( !this.maxLengthOk( true ) ) { + if ( !_this.maxLengthOk( true ) ) { e.preventDefault() } } - }, this)).on('focus', $.proxy(function (e) { - this.maxLengthOk() - }, this)).on('blur', $.proxy(function (e) { - this.maxLengthOk() - }, this)) + }).on('focus', function (e) { + _this.maxLengthOk() + }).on('blur', function (e) { + _this.maxLengthOk() + }) } // handle enter - this.$element.on('keydown', $.proxy(function (e) { + this.$element.on('keydown', function (e) { console.log('keydown', e.keyCode) - if (this.preventInput) { - console.log('preventInput', this.preventInput) + if ( _this.preventInput ) { + console.log('preventInput', _this.preventInput) return } - // trap the return key being pressed + // strap the return key being pressed if (e.keyCode === 13) { // disbale multi line - if ( !this.options.multiline ) { + if ( !_this.options.multiline ) { e.preventDefault() return } // limit check - if ( !this.maxLengthOk( true ) ) { + if ( !_this.maxLengthOk( true ) ) { e.preventDefault() return } - newLine = "

" + + //newLine = "

" + newLine = "\n
" if (document.selection) { var range = document.selection.createRange() - newLine = "
" // ie is not supporting \n :( + newLine = "
" // ie is not supporting \n :( range.pasteHTML(newLine) } else { + + // workaround for chrome - insert
directly after
is ignored - + // insert
, if it hasn't change add it twice again + var oldValue = _this.$element.html().trim() document.execCommand('insertHTML', false, newLine) + var newValue = _this.$element.html().trim() + console.log('ON', oldValue, '--', newValue) + //if ( oldValue == newValue || oldValue == newValue.substr( 0, newValue.length - newLine.length ) ) { + //if ( oldValue == newValue.substr( 0, newValue.length - newLine.length ) ) { + if ( oldValue == newValue ) { + var oldValue = _this.$element.html().trim() + document.execCommand('insertHTML', false, newLine) + console.log('Autoinsert 1th-br') + var newValue = _this.$element.html().trim() + if ( oldValue == newValue ) { + console.log('Autoinsert 2th-br') + document.execCommand('insertHTML', false, ' ' + newLine) // + newLine) + } + } } // prevent the default behaviour of return key pressed + e.preventDefault() return false } - }, this)) + }) // just paste text if ( this.options.mode === 'textonly' ) { - this.$element.on('paste', $.proxy(function (e) { + this.$element.on('paste', function (e) { e.preventDefault() var text if (window.clipboardData) { // IE @@ -162,19 +184,19 @@ if (text) { // replace new lines - if ( !this.options.multiline ) { + if ( !_this.options.multiline ) { text = text.replace(/\n/g, '') text = text.replace(/\r/g, '') text = text.replace(/\t/g, '') } // limit length, limit paste string - if ( this.options.maxlength ) { + if ( _this.options.maxlength ) { var pasteLength = text.length - var currentLength = this.$element.text().length - var overSize = ( currentLength + pasteLength ) - this.options.maxlength + var currentLength = _this.$element.text().length + var overSize = ( currentLength + pasteLength ) - _this.options.maxlength if ( overSize > 0 ) { - text = text.substr( 0, pasteLength - overSize ) + text = text.substr( 0, pasteLength - overSize ) overlimit = true } } @@ -187,29 +209,28 @@ else { document.execCommand('inserttext', false, text) } - this.maxLengthOk( overlimit ) + _this.maxLengthOk( overlimit ) } - - }, this)) + }) } // disable rich text b/u/i if ( this.options.mode === 'textonly' ) { - this.$element.on('keydown', $.proxy(function (e) { - if ( this.richTextKey(e) ) { + this.$element.on('keydown', function (e) { + if ( _this.richTextKey(e) ) { e.preventDefault() } - }, this)) + }) } }; // add/remove placeholder Plugin.prototype.updatePlaceholder = function(type) { - if (!this.options.placeholder) { + if ( !this.options.placeholder ) { return } - var holder = this.$element - var text = holder.text().trim() + var holder = this.$element + var text = holder.text().trim() var placeholder = '' + this.options.placeholder + '' // add placholder if no text exists @@ -234,7 +255,7 @@ // disable/enable input Plugin.prototype.input = function(type) { - if (type === 'off') { + if ( type === 'off' ) { this.preventInput = true } else { @@ -303,7 +324,7 @@ // get value Plugin.prototype.value = function() { - this.updatePlaceholder( 'remove' ) + //this.updatePlaceholder( 'remove' ) // get text if ( this.options.mode === 'textonly' ) { diff --git a/app/assets/javascripts/app/lib/base/jquery.textmodule.js b/app/assets/javascripts/app/lib/base/jquery.textmodule.js index e887cb7fb..465f50de8 100644 --- a/app/assets/javascripts/app/lib/base/jquery.textmodule.js +++ b/app/assets/javascripts/app/lib/base/jquery.textmodule.js @@ -35,22 +35,23 @@ Plugin.prototype.init = function () { this.baseTemplate() + var _this = this - this.$element.on('keydown', $.proxy(function (e) { + this.$element.on('keydown', function (e) { // esc if ( e.keyCode === 27 ) { - this.close() + _this.close() } - // navigate through widget - if ( this.isActive() ) { + // navigate through item + if ( _this.isActive() ) { // enter if ( e.keyCode === 13 ) { e.preventDefault() - var id = this.$widget.find('.dropdown-menu li.active a').data('id') - this.take(id) + var id = _this.$widget.find('.dropdown-menu li.active a').data('id') + _this.take(id) } // arrow keys @@ -60,59 +61,58 @@ // up if ( e.keyCode === 38 ) { - if ( !this.$widget.find('.dropdown-menu li.active')[0] ) { - var top = this.$widget.find('.dropdown-menu li').last().addClass('active').position().top - this.$widget.find('.dropdown-menu').scrollTop( top ); + if ( !_this.$widget.find('.dropdown-menu li.active')[0] ) { + var top = _this.$widget.find('.dropdown-menu li').last().addClass('active').position().top + _this.$widget.find('.dropdown-menu').scrollTop( top ); } else { - var prev = this.$widget.find('.dropdown-menu li.active').removeClass('active').prev() + var prev = _this.$widget.find('.dropdown-menu li.active').removeClass('active').prev() var top = 300 if ( prev[0] ) { top = prev.addClass('active').position().top } - this.$widget.find('.dropdown-menu').scrollTop( top ); + _this.$widget.find('.dropdown-menu').scrollTop( top ); } } // down if ( e.keyCode === 40 ) { - if ( !this.$widget.find('.dropdown-menu li.active')[0] ) { - var top = this.$widget.find('.dropdown-menu li').first().addClass('active').position().top - this.$widget.find('.dropdown-menu').scrollTop( top ); + if ( !_this.$widget.find('.dropdown-menu li.active')[0] ) { + var top = _this.$widget.find('.dropdown-menu li').first().addClass('active').position().top + _this.$widget.find('.dropdown-menu').scrollTop( top ); } else { - var next = this.$widget.find('.dropdown-menu li.active').removeClass('active').next() + var next = _this.$widget.find('.dropdown-menu li.active').removeClass('active').next() var top = 300 if ( next[0] ) { top = next.addClass('active').position().top } - this.$widget.find('.dropdown-menu').scrollTop( top ); - + _this.$widget.find('.dropdown-menu').scrollTop( top ); } } } - }, this )) + }) // reduce buffer, in case close it - this.$element.on('keydown', $.proxy(function (e) { + this.$element.on('keydown', function (e) { // backspace - if ( e.keyCode === 8 && this.buffer ) { - if ( this.buffer === '::' ) { - this.close() + if ( e.keyCode === 8 && _this.buffer ) { + if ( _this.buffer === '::' ) { + _this.close() } - var length = this.buffer.length - this.buffer = this.buffer.substr( 0, length-1 ) - console.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 ) + console.log('BS backspace', _this.buffer) + _this.result( _this.buffer.substr( 2, length-1 ) ) } - }, this )) + }) // build buffer - this.$element.on('keypress', $.proxy(function (e) { - console.log('BUFF', this.buffer, e.keyCode, String.fromCharCode(e.which) ) + this.$element.on('keypress', function (e) { + console.log('BUFF', _this.buffer, e.keyCode, String.fromCharCode(e.which) ) // shift if ( e.keyCode === 16 ) { @@ -131,38 +131,38 @@ // enter : if ( 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 //console.log('BUFF ADD', sign, this.buffer, sign.length, e.which) } - console.log('BUFF HINT', this.buffer, this.buffer.length, e.which, String.fromCharCode(e.which)) + console.log('BUFF HINT', _this.buffer, _this.buffer.length, e.which, String.fromCharCode(e.which)) b = $.proxy(function() { this.result( this.buffer.substr(2,this.buffer.length) ) - }, this) + }, _this) setTimeout(b, 400); - if (!this.isActive()) { - this.open() + if (!_this.isActive()) { + _this.open() } } - }, this)).on('focus', $.proxy(function (e) { - this.close() - }, this)).on('blur', $.proxy(function (e) { + }).on('focus', function (e) { + _this.close() + }).on('blur', function (e) { // delay, to get click on text module before widget is closed a = $.proxy(function() { this.close() - }, this) + }, _this) setTimeout(a, 600); - }, this)) + }) }; @@ -174,9 +174,11 @@ // update widget position Plugin.prototype.updatePosition = function() { + console.log('uP') this.$widget.find('.dropdown-menu').scrollTop( 300 ); - if ( !this.$element.is(':visible') ) return + //if ( !this.$element.is(':visible') ) return var position = this.$element.caret('position'); + console.log('PP', position) if (!position) return var widgetHeight = this.$widget.find('ul').height() + 85 this.$widget.css('top', position.top - widgetHeight) @@ -262,7 +264,7 @@ // render result Plugin.prototype.result = function(term) { - + var _this = this var result = _.filter( this.collection, function(item) { var reg = new RegExp( term, 'i' ) if ( item.name && item.name.match( reg ) ) { @@ -290,11 +292,11 @@ } this.$widget.find('ul li').on( 'click', - $.proxy(function(e) { + function(e) { e.preventDefault() var id = $(e.target).data('id') - this.take(id) - }, this) + _this.take(id) + } ) this.updatePosition() }