update Ox.EditableContent
This commit is contained in:
rolux
parent
603475b7a7
commit
1e2301c4ac
1 changed files with 67 additions and 40 deletions
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in a new issue