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