(function($K) { $K.add('module', 'editable', { init: function(app, context) { this.app = app; // defaults var defaults = { classname: 'editable', focus: false }; // context this.context = context; this.params = context.getParams(defaults); this.$element = context.getElement(); }, // public start: function() { this.$element.addClass(this.params.classname).attr('contenteditable', true); this._setFocus(); this._setEvents(); }, stop: function() { this.$element.removeClass(this.params.classname).removeAttr('contenteditable'); this.$element.off('.kube.editable'); }, // private _setEvents: function() { this.$element.on('keydown.kube.editable', this._keydown.bind(this)); this.$element.on('paste.kube.editable', this._paste.bind(this)); this.$element.on('blur.kube.editable', this._blur.bind(this)); }, _setFocus: function() { if (this.params.focus) this.$element.focus(); }, _checkEmpty: function() { if (!this.$element.text().replace(" ", "").length) { this.$element.empty(); } }, _paste: function(e) { e.preventDefault(); var event = (e.originalEvent || e); var text = ''; if (event.clipboardData) { text = event.clipboardData.getData('text/plain'); document.execCommand('insertText', false, text); } else if (window.clipboardData) { text = window.clipboardData.getData('Text'); document.selection.createRange().pasteHTML(text); } }, _blur: function(e) { this._checkEmpty(); }, _keydown: function(e) { // disable enter key if (e.which === 13) e.preventDefault(); } }); })(Kube);