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) {
self = self || {};
var that = Ox.Element({
element: options.type == 'div' ? '<div>' : '<span>',
tooltip: options.tooltip ? function(e) {
return that.hasClass('OxEditableContentInput') ? ''
: Ox.isString(options.tooltip) ? options.tooltip
: options.tooltip(e);
} : null
}, self)
if (options.tooltip) {
self.tooltip = options.tooltip;
options.tooltip = function(e) {
return that.hasClass('OxEditableContentInput') ? ''
: Ox.isString(self.tooltip) ? self.tooltip
: self.tooltip(e);
}
}
var that = Ox.Element(options.type == 'div' ? '<div>' : '<span>', self)
.defaults({
clickLink: null,
editable: true,
@ -25,6 +26,15 @@ Ox.EditableContent = function(options, self) {
})
.options(options || {})
.update({
editing: function() {
if (self.options.editing) {
// edit will toggle self.options.editing
self.options.editing = false;
edit();
} else {
submit();
}
},
highlight: function() {
!self.options.editing && self.$value.html(formatValue());
},
@ -49,48 +59,71 @@ Ox.EditableContent = function(options, self) {
return false;
},
keydown: function(e) {
if (self.options.editing) {
if (e.keyCode == 13 && self.options.type == 'span') {
if (e.keyCode == 13) {
if (e.shiftKey || self.options.type == 'span') {
submit();
return false;
} else if (e.keyCode == 27) {
cancel();
return false;
} 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);
}
setTimeout(function() {
if (self.options.type == '<span>') {
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());
});
return false;
} else if (e.keyCode == 27) {
cancel();
return false;
}
setTimeout(function() {
that.css({padding: that.text() ? 0 : '0 2px'});
});
},
paste: function(e) {
Ox.print('PASTE', e);
}
})
.bindEvent({
doubleclick: edit
doubleclick: edit,
key_escape: function() {
cancel();
return false;
}
});
self.options.value = self.options.value.toString();
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() {
Ox.print('BLUR!')
// ...
}
function cancel() {
if (self.options.editing) {
Ox.print('CANCEL!')
that.loseFocus();
self.options.editing = false;
that.removeClass('OxEditableContentInput')
.attr({contenteditable: false})
.html(formatValue());
if (self.options.type == 'span') {
that.css({padding: 0});
}
that.triggerEvent('cancel', {value: self.options.value});
}
}
@ -98,6 +131,7 @@ Ox.EditableContent = function(options, self) {
function edit() {
if (self.options.editable && !self.options.editing) {
var value = formatInputValue();
that.$tooltip && that.$tooltip.remove();
that.addClass('OxEditableContentInput')
.removeClass('OxPlaceholder')
.attr({contenteditable: true});
@ -111,7 +145,7 @@ Ox.EditableContent = function(options, self) {
}
self.options.editing = true;
that.gainFocus();
setTimeout(updateSelection, 50);
setTimeout(updateSelection);
}
}
@ -151,16 +185,11 @@ Ox.EditableContent = function(options, self) {
);
}
function setCSS() {
}
function submit() {
if (self.options.editing) {
Ox.print('SUBMIT!')
that.loseFocus();
self.options.editing = false;
self.options.value = that.text();
self.options.value = parseValue();
that.removeClass('OxEditableContentInput')
.attr({contenteditable: false})
.html(formatValue());
@ -179,11 +208,9 @@ Ox.EditableContent = function(options, self) {
range = document.createRange();
range.selectNodeContents(that.$element[0]);
selection.addRange(range);
if (self.options.type == 'div') {
setTimeout(function() {
selection.collapseToEnd();
}, 0);
}
setTimeout(function() {
selection.collapseToEnd();
});
}
return that;