update Ox.EditableContent

source/Ox.UI/js/Form/EditableContent.js

@@ -1,14 +1,15 @@
 Ox.EditableContent = function(options, self) {
 
     self = self || {};
-    var that = Ox.Element({
+    if (options.tooltip) {
-            element: options.type == 'div' ? '<div>' : '<span>',
+        self.tooltip = options.tooltip;
-            tooltip: options.tooltip ? function(e) {
+        options.tooltip = function(e) {
-                return that.hasClass('OxEditableContentInput') ? ''
+            return that.hasClass('OxEditableContentInput') ? ''
-                    : Ox.isString(options.tooltip) ? options.tooltip
+                : Ox.isString(self.tooltip) ? self.tooltip
-                    : options.tooltip(e);
+                : self.tooltip(e);
-            } : null
+        }
-        }, self)
+    }
+    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) {
-                    if (e.keyCode == 13 && self.options.type == 'span') {
+                    if (e.shiftKey || self.options.type == 'span') {
                         submit();
-                        return false;
+                    } else {
-                    } else if (e.keyCode == 27) {
+                        var selection = window.getSelection(),
-                        cancel();
+                            node = selection.anchorNode,
-                        return false;
+                            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() {
+                    return false;
-                        if (self.options.type == '<span>') {
+                } else if (e.keyCode == 27) {
-                            that.css({padding: that.text() ? 0 : '0 2px'});
+                    cancel();
-                        } else if (that.html().match(/<div><br><\/div>$/)) {
+                    return false;
-                            that.html(
-                                that.html().replace(/<div><br><\/div>$/, '<br>')
-                            )
-                        }
-                        //Ox.print('TEXT', that.text())
-                        Ox.print('HTML', that.html());
-                    });
                 }
+                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() {
-            setTimeout(function() {
+            selection.collapseToEnd();
-                selection.collapseToEnd();
+        });
-            }, 0);
-        }
     }
 
     return that;