diff --git a/source/Ox.UI/css/Ox.UI.css b/source/Ox.UI/css/Ox.UI.css index 70d9fd0f..5519bf1b 100644 --- a/source/Ox.UI/css/Ox.UI.css +++ b/source/Ox.UI/css/Ox.UI.css @@ -913,7 +913,7 @@ OxEditableContent -------------------------------------------------------------------------------- */ -.OxEditableContent > .OxEditableContentInput:focus { +.OxEditableContent { outline: none; -moz-user-select: text; -o-user-select: text; diff --git a/source/Ox.UI/css/theme.css b/source/Ox.UI/css/theme.css index b78de1a5..d9961cd7 100644 --- a/source/Ox.UI/css/theme.css +++ b/source/Ox.UI/css/theme.css @@ -456,7 +456,7 @@ Forms border-top-color: $bodyBorder; } -.$themeClass .OxEditableContent > .OxEditableContentInput:focus { +.$themeClass .OxEditableContent.OxEditableContentInput:focus { background-image: -moz-linear-gradient(top, $inputGradient); background-image: -o-linear-gradient(top, $inputGradient); background-image: -webkit-linear-gradient(top, $inputGradient); @@ -470,7 +470,7 @@ Forms .$themeClass .OxEditableElement .OxHighlight, { border-radius: 2px; } -.$themeClass .OxEditableContent.OxPlaceholder .OxValue, +.$themeClass .OxEditableContent.OxPlaceholder, .$themeClass .OxEditableElement.OxPlaceholder .OxValue { color: $inputPlaceholderColor; } diff --git a/source/Ox.UI/js/Form/EditableContent.js b/source/Ox.UI/js/Form/EditableContent.js index 901d0027..3ee49644 100644 --- a/source/Ox.UI/js/Form/EditableContent.js +++ b/source/Ox.UI/js/Form/EditableContent.js @@ -30,6 +30,7 @@ Ox.EditableContent = function(options, self) { }) .addClass('OxEditableContent') .on({ + blur: self.options.submitOnBlur ? submit : blur, click: function(e) { var $target = $(e.target); if (!e.shiftKey && ($target.is('a') || ($target = $target.parents('a')).length)) { @@ -42,18 +43,7 @@ Ox.EditableContent = function(options, self) { } } return false; - } - }) - .bindEvent({ - doubleclick: edit - }); - - self.options.value = self.options.value.toString(); - - self.$value = Ox.Element(self.options.type == 'span' ? '' : '
') - .html(formatValue()) - .on({ - blur: self.options.submitOnBlur ? submit : blur, + }, keydown: function(e) { if (self.options.editing) { if (e.keyCode == 13 && self.options.type == 'span') { @@ -63,10 +53,22 @@ Ox.EditableContent = function(options, self) { cancel(); 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() { Ox.print('BLUR!') @@ -77,9 +79,8 @@ Ox.EditableContent = function(options, self) { Ox.print('CANCEL!') that.loseFocus(); self.options.editing = false; - self.$value + that.removeClass('OxEditableContentInput') .attr({contenteditable: false}) - .removeClass('OxEditableContentInput') .html(formatValue()); that.triggerEvent('cancel', {value: self.options.value}); } @@ -87,15 +88,14 @@ Ox.EditableContent = function(options, self) { function edit() { if (self.options.editable && !self.options.editing) { - Ox.print('EDIT!') var value = formatInputValue(); - self.$value - .addClass('OxEditableContentInput') + that.addClass('OxEditableContentInput') + .removeClass('OxPlaceholder') .attr({contenteditable: true}); if (value) { - self.$value.text(value); + that.text(value); } else { - self.$value.html(' '); + that.html(' '); } self.options.editing = true; that.gainFocus(); @@ -130,7 +130,7 @@ Ox.EditableContent = function(options, self) { function parseValue() { 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(); return ( self.options.type == 'span' @@ -148,14 +148,13 @@ Ox.EditableContent = function(options, self) { Ox.print('SUBMIT!') that.loseFocus(); self.options.editing = false; - self.options.value = self.$value.text(); + self.options.value = that.text(); if (self.options.value.charCodeAt(0) == 160) { // remove nbsp self.options.value = self.options.value.substr(1); } - self.$value + that.removeClass('OxEditableContentInput') .attr({contenteditable: false}) - .removeClass('OxEditableContentInput') .html(formatValue()); that.triggerEvent('submit', {value: self.options.value}); } @@ -163,11 +162,11 @@ Ox.EditableContent = function(options, self) { function updateSelection() { var range, selection; - self.$value[0].focus(); + that.$element[0].focus(); selection = window.getSelection(); selection.removeAllRanges(); range = document.createRange(); - range.selectNodeContents(self.$value[0]); + range.selectNodeContents(that.$element[0]); selection.addRange(range); if (self.options.type == 'div') { 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; };