update Ox.EditableContent

This commit is contained in:
rolux 2013-02-27 13:03:10 +05:30
parent 603475b7a7
commit 1e2301c4ac

View file

@ -1,14 +1,15 @@
Ox.EditableContent = function(options, self) { Ox.EditableContent = function(options, self) {
self = self || {}; self = self || {};
var that = Ox.Element({ if (options.tooltip) {
element: options.type == 'div' ? '<div>' : '<span>', self.tooltip = options.tooltip;
tooltip: options.tooltip ? function(e) { options.tooltip = function(e) {
return that.hasClass('OxEditableContentInput') ? '' return that.hasClass('OxEditableContentInput') ? ''
: Ox.isString(options.tooltip) ? options.tooltip : Ox.isString(self.tooltip) ? self.tooltip
: options.tooltip(e); : self.tooltip(e);
} : null }
}, self) }
var that = Ox.Element(options.type == 'div' ? '<div>' : '<span>', self)
.defaults({ .defaults({
clickLink: null, clickLink: null,
editable: true, editable: true,
@ -25,6 +26,15 @@ Ox.EditableContent = function(options, self) {
}) })
.options(options || {}) .options(options || {})
.update({ .update({
editing: function() {
if (self.options.editing) {
// edit will toggle self.options.editing
self.options.editing = false;
edit();
} else {
submit();
}
},
highlight: function() { highlight: function() {
!self.options.editing && self.$value.html(formatValue()); !self.options.editing && self.$value.html(formatValue());
}, },
@ -49,48 +59,71 @@ Ox.EditableContent = function(options, self) {
return false; return false;
}, },
keydown: function(e) { keydown: function(e) {
if (self.options.editing) { if (e.keyCode == 13) {
if (e.keyCode == 13 && self.options.type == 'span') { if (e.shiftKey || self.options.type == 'span') {
submit(); submit();
} else {
var selection = window.getSelection(),
node = selection.anchorNode,
offset = selection.anchorOffset,
range = document.createRange(),
text = node.textContent;
e.preventDefault();
node.textContent = text.substr(0, offset)
+ '\n' + (text.substr(offset) || ' ');
range.setStart(node, offset + 1);
range.setEnd(node, offset + 1);
selection.removeAllRanges();
selection.addRange(range);
}
return false; return false;
} else if (e.keyCode == 27) { } else if (e.keyCode == 27) {
cancel(); cancel();
return false; return false;
} }
setTimeout(function() { setTimeout(function() {
if (self.options.type == '<span>') {
that.css({padding: that.text() ? 0 : '0 2px'}); that.css({padding: that.text() ? 0 : '0 2px'});
} else if (that.html().match(/<div><br><\/div>$/)) {
that.html(
that.html().replace(/<div><br><\/div>$/, '<br>')
)
}
//Ox.print('TEXT', that.text())
Ox.print('HTML', that.html());
}); });
} },
paste: function(e) {
Ox.print('PASTE', e);
} }
}) })
.bindEvent({ .bindEvent({
doubleclick: edit doubleclick: edit,
key_escape: function() {
cancel();
return false;
}
}); });
self.options.value = self.options.value.toString(); self.options.value = self.options.value.toString();
that.html(formatValue()); that.html(formatValue());
if (self.options.editing) {
// wait for the element to be in the DOM
setTimeout(function() {
// edit will toggle self.options.editing
self.options.editing = false;
edit();
});
}
function blur() { function blur() {
Ox.print('BLUR!') // ...
} }
function cancel() { function cancel() {
if (self.options.editing) { if (self.options.editing) {
Ox.print('CANCEL!')
that.loseFocus(); that.loseFocus();
self.options.editing = false; self.options.editing = false;
that.removeClass('OxEditableContentInput') that.removeClass('OxEditableContentInput')
.attr({contenteditable: false}) .attr({contenteditable: false})
.html(formatValue()); .html(formatValue());
if (self.options.type == 'span') {
that.css({padding: 0});
}
that.triggerEvent('cancel', {value: self.options.value}); that.triggerEvent('cancel', {value: self.options.value});
} }
} }
@ -98,6 +131,7 @@ Ox.EditableContent = function(options, self) {
function edit() { function edit() {
if (self.options.editable && !self.options.editing) { if (self.options.editable && !self.options.editing) {
var value = formatInputValue(); var value = formatInputValue();
that.$tooltip && that.$tooltip.remove();
that.addClass('OxEditableContentInput') that.addClass('OxEditableContentInput')
.removeClass('OxPlaceholder') .removeClass('OxPlaceholder')
.attr({contenteditable: true}); .attr({contenteditable: true});
@ -111,7 +145,7 @@ Ox.EditableContent = function(options, self) {
} }
self.options.editing = true; self.options.editing = true;
that.gainFocus(); that.gainFocus();
setTimeout(updateSelection, 50); setTimeout(updateSelection);
} }
} }
@ -151,16 +185,11 @@ Ox.EditableContent = function(options, self) {
); );
} }
function setCSS() {
}
function submit() { function submit() {
if (self.options.editing) { if (self.options.editing) {
Ox.print('SUBMIT!')
that.loseFocus(); that.loseFocus();
self.options.editing = false; self.options.editing = false;
self.options.value = that.text(); self.options.value = parseValue();
that.removeClass('OxEditableContentInput') that.removeClass('OxEditableContentInput')
.attr({contenteditable: false}) .attr({contenteditable: false})
.html(formatValue()); .html(formatValue());
@ -179,11 +208,9 @@ Ox.EditableContent = function(options, self) {
range = document.createRange(); range = document.createRange();
range.selectNodeContents(that.$element[0]); range.selectNodeContents(that.$element[0]);
selection.addRange(range); selection.addRange(range);
if (self.options.type == 'div') {
setTimeout(function() { setTimeout(function() {
selection.collapseToEnd(); selection.collapseToEnd();
}, 0); });
}
} }
return that; return that;