simplify Ox.EditableContent, update CSS

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;

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;
 }

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' ? '<span>' : '<div>')
-        .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
+            that.addClass('OxEditableContentInput')
-                .addClass('OxEditableContentInput')
+                .removeClass('OxPlaceholder')
                 .attr({contenteditable: true});
             if (value) {
-                self.$value.text(value);
+                that.text(value);
             } else {
-                self.$value.html('&nbsp;');
+                that.html('&nbsp;');
             }
             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;
 
 };