simplify Ox.EditableContent, update CSS

This commit is contained in:
rolux 2013-02-27 08:56:55 +05:30
parent dfe316b76a
commit feae953311
3 changed files with 28 additions and 35 deletions

View file

@ -913,7 +913,7 @@ OxEditableContent
-------------------------------------------------------------------------------- --------------------------------------------------------------------------------
*/ */
.OxEditableContent > .OxEditableContentInput:focus { .OxEditableContent {
outline: none; outline: none;
-moz-user-select: text; -moz-user-select: text;
-o-user-select: text; -o-user-select: text;

View file

@ -456,7 +456,7 @@ Forms
border-top-color: $bodyBorder; border-top-color: $bodyBorder;
} }
.$themeClass .OxEditableContent > .OxEditableContentInput:focus { .$themeClass .OxEditableContent.OxEditableContentInput:focus {
background-image: -moz-linear-gradient(top, $inputGradient); background-image: -moz-linear-gradient(top, $inputGradient);
background-image: -o-linear-gradient(top, $inputGradient); background-image: -o-linear-gradient(top, $inputGradient);
background-image: -webkit-linear-gradient(top, $inputGradient); background-image: -webkit-linear-gradient(top, $inputGradient);
@ -470,7 +470,7 @@ Forms
.$themeClass .OxEditableElement .OxHighlight, { .$themeClass .OxEditableElement .OxHighlight, {
border-radius: 2px; border-radius: 2px;
} }
.$themeClass .OxEditableContent.OxPlaceholder .OxValue, .$themeClass .OxEditableContent.OxPlaceholder,
.$themeClass .OxEditableElement.OxPlaceholder .OxValue { .$themeClass .OxEditableElement.OxPlaceholder .OxValue {
color: $inputPlaceholderColor; color: $inputPlaceholderColor;
} }

View file

@ -30,6 +30,7 @@ Ox.EditableContent = function(options, self) {
}) })
.addClass('OxEditableContent') .addClass('OxEditableContent')
.on({ .on({
blur: self.options.submitOnBlur ? submit : blur,
click: function(e) { click: function(e) {
var $target = $(e.target); var $target = $(e.target);
if (!e.shiftKey && ($target.is('a') || ($target = $target.parents('a')).length)) { if (!e.shiftKey && ($target.is('a') || ($target = $target.parents('a')).length)) {
@ -42,18 +43,7 @@ Ox.EditableContent = function(options, self) {
} }
} }
return false; return false;
} },
})
.bindEvent({
doubleclick: edit
});
self.options.value = self.options.value.toString();
self.$value = Ox.Element(self.options.type == 'span' ? '<span>' : '<div>')
.html(formatValue())
.on({
blur: self.options.submitOnBlur ? submit : blur,
keydown: function(e) { keydown: function(e) {
if (self.options.editing) { if (self.options.editing) {
if (e.keyCode == 13 && self.options.type == 'span') { if (e.keyCode == 13 && self.options.type == 'span') {
@ -63,10 +53,22 @@ Ox.EditableContent = function(options, self) {
cancel(); cancel();
return false; return false;
} }
/*
setTimeout(function() {
Ox.print('TEXT', that.text())
Ox.print('HTML', that.html())
});
*/
} }
} }
}) })
.appendTo(that); .bindEvent({
doubleclick: edit
});
self.options.value = self.options.value.toString();
that.html(formatValue());
function blur() { function blur() {
Ox.print('BLUR!') Ox.print('BLUR!')
@ -77,9 +79,8 @@ Ox.EditableContent = function(options, self) {
Ox.print('CANCEL!') Ox.print('CANCEL!')
that.loseFocus(); that.loseFocus();
self.options.editing = false; self.options.editing = false;
self.$value that.removeClass('OxEditableContentInput')
.attr({contenteditable: false}) .attr({contenteditable: false})
.removeClass('OxEditableContentInput')
.html(formatValue()); .html(formatValue());
that.triggerEvent('cancel', {value: self.options.value}); that.triggerEvent('cancel', {value: self.options.value});
} }
@ -87,15 +88,14 @@ Ox.EditableContent = function(options, self) {
function edit() { function edit() {
if (self.options.editable && !self.options.editing) { if (self.options.editable && !self.options.editing) {
Ox.print('EDIT!')
var value = formatInputValue(); var value = formatInputValue();
self.$value that.addClass('OxEditableContentInput')
.addClass('OxEditableContentInput') .removeClass('OxPlaceholder')
.attr({contenteditable: true}); .attr({contenteditable: true});
if (value) { if (value) {
self.$value.text(value); that.text(value);
} else { } else {
self.$value.html('&nbsp;'); that.html('&nbsp;');
} }
self.options.editing = true; self.options.editing = true;
that.gainFocus(); that.gainFocus();
@ -130,7 +130,7 @@ Ox.EditableContent = function(options, self) {
function parseValue() { function parseValue() {
var value = Ox.clean( var value = Ox.clean(
self.$value.text().replace(/\n\n+/g, '\0') that.text().replace(/\n\n+/g, '\0')
).replace(/\0/g, '\n\n').trim(); ).replace(/\0/g, '\n\n').trim();
return ( return (
self.options.type == 'span' self.options.type == 'span'
@ -148,14 +148,13 @@ Ox.EditableContent = function(options, self) {
Ox.print('SUBMIT!') Ox.print('SUBMIT!')
that.loseFocus(); that.loseFocus();
self.options.editing = false; self.options.editing = false;
self.options.value = self.$value.text(); self.options.value = that.text();
if (self.options.value.charCodeAt(0) == 160) { if (self.options.value.charCodeAt(0) == 160) {
// remove nbsp // remove nbsp
self.options.value = self.options.value.substr(1); self.options.value = self.options.value.substr(1);
} }
self.$value that.removeClass('OxEditableContentInput')
.attr({contenteditable: false}) .attr({contenteditable: false})
.removeClass('OxEditableContentInput')
.html(formatValue()); .html(formatValue());
that.triggerEvent('submit', {value: self.options.value}); that.triggerEvent('submit', {value: self.options.value});
} }
@ -163,11 +162,11 @@ Ox.EditableContent = function(options, self) {
function updateSelection() { function updateSelection() {
var range, selection; var range, selection;
self.$value[0].focus(); that.$element[0].focus();
selection = window.getSelection(); selection = window.getSelection();
selection.removeAllRanges(); selection.removeAllRanges();
range = document.createRange(); range = document.createRange();
range.selectNodeContents(self.$value[0]); range.selectNodeContents(that.$element[0]);
selection.addRange(range); selection.addRange(range);
if (self.options.type == 'div') { if (self.options.type == 'div') {
setTimeout(function() { setTimeout(function() {
@ -176,12 +175,6 @@ Ox.EditableContent = function(options, self) {
} }
} }
that.css = function(css) {
that.$element.css(css);
self.$value.css(css);
return that;
}
return that; return that;
}; };