fix issues with type textarea editables

source/Ox.UI/css/Ox.UI.css

@@ -631,6 +631,9 @@ OxArrayEditable
     padding: 4px;
     border-top: 1px solid rgb(128, 128, 128);
 }
+.OxArrayEditable.OxArrayEditableTextarea textarea {
+    padding: 4px;
+}
 .OxArrayEditable.OxArrayEditableTextarea .OxEditableElement:first-child {
     border-top: 0px
 }

source/Ox.UI/js/Form/Ox.ArrayEditable.js

@@ -14,8 +14,11 @@ Ox.ArrayEditable = function(options, self) {
             editable: true,
             itemName: 'item',
             items: [],
+            maxHeight: void 0,
+            placeholder: '',
             position: -1,
             selected: '',
+            separator: ',',
             sort: [],
             submitOnBlur: true,
             type: 'input',
@@ -23,7 +26,7 @@ Ox.ArrayEditable = function(options, self) {
         })
         .options(options || {})
         .addClass('OxArrayEditable OxArrayEditable' + Ox.toTitleCase(self.options.type))
-        .css({width: self.options.width - 8 + 'px'}) // 2 x 4 px padding
+        .css({width: self.options.width - (self.options.type == 'input' ? 8 : 0) + 'px'}) // 2 x 4 px padding
         .bindEvent({
             anyclick: anyclick,
             doubleclick: doubleclick,
@@ -39,33 +42,35 @@ Ox.ArrayEditable = function(options, self) {
         });
 
     self.$items = [];
+    self.editing = false;
 
     renderItems();
 
     self.selected = getSelectedPosition();
 
     function anyclick(e) {
+        Ox.print('SELF EDITING', self.editing)
         var $target = $(e.target),
             $parent = $target.parent(),
             position = $parent.data('position');
-        //ignore clicks while editing
         if (!$target.is('.OxInput')) {
-            if (self.selected > -1) {
+            Ox.print('BLURRED EDITING', self.blurred, self.editing)
-                //end editing but keep selected if clicked next to a keyword
-                if (self.editing || self.$items[self.selected].options('editing')) {
-                    self.editing = false;
-                    self.$items[self.selected].options({editing: false});
-                //deselect if not editing and not going to select antoher one
-                } else if (!$parent.is('.OxEditableElement')) {
-                    selectNone();
-                }
-            }
-            //select if clicked on other editable element
             if ($parent.is('.OxEditableElement')) {
+                // select another item
+                Ox.print('AAAAA')
                 selectItem(
                     e.metaKey && position == self.selected
                     ? '' : $parent.data('position')
                 );
+            } else if (!self.blurred) {
+                // if there wasn't an active input element
+                if (self.editing) {
+                    // blur if still in editing mode
+                    that.blurItem();
+                } else {
+                    // othewise deselect selected
+                    selectNone();
+                }
             }
             that.gainFocus();
         }
@@ -78,6 +83,8 @@ Ox.ArrayEditable = function(options, self) {
             that.triggerEvent('delete', {
                 id: self.options.selected
             });
+            self.selected = -1;
+            self.options.selected = '';
         }
     }
 
@@ -99,44 +106,79 @@ Ox.ArrayEditable = function(options, self) {
         return Ox.getIndexById(self.options.items, self.options.selected);
     }
 
-    function renderItems() {
+    function renderItems(blur) {
+        if (self.editing) {
+            self.options.items[getSelectedPosition()].value = that.find(self.options.type + ':visible').val();
+        }
         that.empty();
+        if (self.options.items.length == 0) {
+            Ox.Editable({
+                editable: false,
+                type: 'text',
+                value: self.options.placeholder
+            })
+            .addClass('OxPlaceholder')
+            .appendTo(that);
+        } else {
             sortItems();
             self.options.items.forEach(function(item, i) {
-            i && self.options.type == 'input'
+                if (i && self.options.type == 'input') {
-                && $('<span>')
+                    $('<span>')
-                    .html(', ')
+                        .addClass('OxSeparator')
+                        .html(self.options.separator + ' ')
                         .appendTo(that);
+                }
                 self.$items[i] = Ox.Editable({
+                        blurred: self.editing && i == self.selected ? blur : false,
                         editable: self.options.editable && item.editable,
+                        editing: self.editing && i == self.selected,
+                        /*
                         format: function(value) {
                             return value || '&nbsp;'
                         },
+                        */
+                        maxHeight: self.options.maxHeight,
                         submitOnBlur: self.options.submitOnBlur,
                         tooltip: 'Click to select' + (
                             item.editable ? ', doubleclick to edit' : ''
                         ),
                         type: self.options.type,
                         value: item.value,
-                    width: self.options.type == 'input' ? 0 : self.options.width - 8
+                        width: self.options.type == 'input' ? 0 : self.options.width - 9
                     })
                     .addClass(item.id == self.options.selected ? 'OxSelected' : '')
+                    //.css(self.options.type == 'textarea' ? {padding: '4px'} : {})
                     .data({position: i})
                     .bindEvent({
                         blur: function(data) {
+                            // fixme: remove data
+                            that.gainFocus();
+                            that.triggerEvent('blur', {
+                                id: item.id,
+                                value: data.value
+                            });
+                            self.blurred = true;
+                            setTimeout(function() {
+                                self.blurred = false;
+                            }, 250);
+                        },
+                        cancel: function(data) {
+                            self.editing = false;
                             that.gainFocus();
                             that.triggerEvent('blur', data);
                         },
-                    cancel: function(data) {
+                        change: function(data) {
-                        that.gainFocus();
+                            that.triggerEvent('change', {
-                        Ox.print("GAINING FOCUS!")
+                                id: item.id,
-                        that.triggerEvent('blur', data);
+                                value: data.value
+                            });
                         },
                         edit: function(data) {
                             self.editing = true;
                             that.triggerEvent('edit', data);
                         },
                         submit: function(data) {
+                            self.editing = false;
                             that.gainFocus();
                             submitItem(i, data.value);
                         }
@@ -144,13 +186,14 @@ Ox.ArrayEditable = function(options, self) {
                     .appendTo(that);
             });
         }
+        //self.editing && that.editItem(blur);
+    }
 
     function selectFirst() {
         self.selected > -1 && selectItem(0);
     }
 
     function selectItem(idOrPosition) {
-        Ox.print('???????', self.editing)
         if (Ox.isString(idOrPosition)) {
             self.options.selected = idOrPosition;
             self.selected = getSelectedPosition();
@@ -197,10 +240,8 @@ Ox.ArrayEditable = function(options, self) {
         var item = self.options.items[position];
         if (value === '') {
             deleteItem();
-        } else if (item.value === value) {
-            that.triggerEvent('blur');
         } else {
-            that.triggerEvent('submit', {
+            that.triggerEvent(item.value === value ? 'blur' : 'submit', {
                 id: item.id,
                 value: value
             });
@@ -224,7 +265,7 @@ Ox.ArrayEditable = function(options, self) {
 
     self.setOption = function(key, value) {
         if (key == 'items') {
-            renderItems();
+            renderItems(true);
         } else if (key == 'selected') {
             selectItem(value);
         } else if (key == 'sort') {
@@ -242,6 +283,7 @@ Ox.ArrayEditable = function(options, self) {
             self.options.items.splice(position, 0, item);
             renderItems();
         }
+        return that;
         //that.triggerEvent('add');
         /*
         self.values = Ox.filter(values, function(value) {
@@ -259,34 +301,44 @@ Ox.ArrayEditable = function(options, self) {
             self.$items[self.selected].options({editing: false});
         } else {
         */
+        self.editing = false;
         self.$items.forEach(function($item) {
             $item.options({editing: false});
         });
         //}
+        return that;
     };
 
     that.editItem = function() {
+        Ox.print('AE EDIT ITEM')
         if (self.options.editable && self.options.selected) {
-            Ox.forEach(self.$items, function($item) {
+            self.editing = true;
-                if ($item.data('position') == self.selected) {
+            self.$items[self.selected].options({editing: true});
-                    Ox.print('DBLCLICK')
-                    $item.triggerEvent('doubleclick');
-                    return false;
-                }
-            });
         }
+        return that;
     };
 
     that.reloadItems = function() {
         renderItems();
+        return that;
     };
 
     that.removeItem = function(position) {
         if (self.options.editable) {
             
         }
+        return that;
     };
 
+    /*
+    that.submitItem = function() {
+        if (self.editing) {
+            self.editing = false;
+            self.$items[self.selected].options({editing: false});
+        }
+    }
+    */
+
     return that;
 
 };

source/Ox.UI/js/Form/Ox.Editable.js

@@ -19,11 +19,13 @@ Ox.Editable = function(options, self) {
             tooltip: options.tooltip
         }, self)
         .defaults({
+            blurred: false,
             clickLink: null,
             editable: true,
             editing: false,
             format: null,
             height: 0,
+            maxHeight: void 0,
             placeholder: '',
             submitOnBlur: true,
             tooltip: '',
@@ -62,13 +64,22 @@ Ox.Editable = function(options, self) {
         .appendTo(that);
 
     if (self.options.editing) {
+        // need timeout so that when determining height
+        // the element is actually in the DOM
+        setTimeout(function() {
             // edit will toggle self.options.editing
             self.options.editing = false;
             edit();
+        }, 0);
     }
 
-    function blur() {
+    function blur(data) {
-        that.triggerEvent('blur');
+        self.options.value = parseValue();
+        if (self.options.value !== self.originalValue) {
+            self.originalValue = self.options.value;
+            that.triggerEvent('change', {value: self.options.value});
+        }
+        that.triggerEvent('blur', data);
     }
 
     function cancel() {
@@ -80,55 +91,29 @@ Ox.Editable = function(options, self) {
         that.triggerEvent('cancel', {value: self.options.value});
     }
 
-    function change(event) {
+    function change(data) {
+        setTimeout(function() {
             var height, width;
-        self.options.value = event.value;
+            self.options.value = data.value;
             self.$value.html(formatValue());
             self.$test.html(formatTestValue());
-        //height = self.options.height || Ox.limit(self.$test.height() + 2, self.minHeight, self.maxHeight);
+            setSizes();
-        height = self.options.height || Math.max(self.$test.height() + 2, self.minHeight);
+        }, 25);
-        width = self.options.width || Ox.limit(self.$test.width() + 2, self.minWidth, self.maxWidth);
-        Ox.Log('Form', self.options.width, self.$test.html(), self.$test.width(), self.$test.height(), 'wxh', width, height)
-        if (self.options.type == 'input') {
-            self.$input.options({
-                width: width
-            });
-            self.$input.find('input').css({width: width + 'px'});
-        } else {
-            self.$input.options({
-                height: height,
-                width: width
-            });
-            self.$input.find('textarea').css({
-                height: height + 'px',
-                width: width + 'px'
-            });
-        }
-        /*
-        that.triggerEvent('change', {
-            value: event.value
-        });
-        */
     }
 
     function edit() {
+        Ox.print('E EDIT! editable editing', self.options.editable, self.options.editing)
         var height, width;
         if (self.options.editable && !self.options.editing) {
             self.options.editing = true;
             self.originalValue = self.options.value;
-            self.minWidth = 8;
-            self.maxWidth = that.parent().width();
-            self.minHeight = 14;
-            self.maxHeight = that.parent().height();
-            height = self.options.height || self.$value.height();
-            width = self.options.width || self.$value.width();
             self.$value.hide();
             Ox.Log('Form', 'H:::', self.options.height, height)
             if (!self.$test) {
                 self.$test = self.$value.$element.clone()
                     .css(Ox.extend({display: 'inline-block'}, self.css))
                     .html(formatTestValue())
-                    .hide()
+                    .css({background: 'rgb(192, 192, 192)'})
                     .appendTo(that.$element);
                 self.$input = Ox.Input({
                         changeOnKeypress: true,
@@ -149,23 +134,15 @@ Ox.Editable = function(options, self) {
                 });
                 self.$input.find('input').css(self.css);
             }
-            self.$input.options({
+            self.minWidth = 8;
-                    width: width,
+            self.maxWidth = that.parent().width();
-                    height: height
+            self.minHeight = 13;
-                })
+            self.maxHeight = self.options.type == 'input'
-                .show();
+                ? self.minHeight
-            if (self.options.type == 'input') {
+                : self.options.maxHeight || that.parent().height();
-                self.$input.find('input').css({
+            setSizes();
-                    height: height + 'px',
+            self.$input.show();
-                    width: width + 'px'
+            if (!self.options.blurred) {
-                });
-            } else {
-                self.$input.find('textarea').css({
-                    height: height + 'px',
-                    width: width + 'px'
-                });
-            }
-            // fixme: why can't this be chained?
                 setTimeout(function() {
                     self.$input.focusInput(self.options.type == 'input');
                 }, 0);
@@ -173,6 +150,8 @@ Ox.Editable = function(options, self) {
                 that.triggerEvent('edit');
             }
         }
+        self.options.blurred = false;
+    }
 
     function formatInputValue() {
         return Ox.decodeHTML(
@@ -184,7 +163,7 @@ Ox.Editable = function(options, self) {
 
     function formatTestValue() {
         return self.options.type == 'input'
-            ? self.options.value.replace(/ /g, ' ')
+            ? Ox.encodeHTML(self.options.value) //.replace(/ /g, ' ')
             : Ox.encodeHTML(self.options.value || ' ')
                 .replace(/\n$/, '\n ')
                 .replace(/\n/g, '<br/>')
@@ -195,18 +174,46 @@ Ox.Editable = function(options, self) {
     }
 
     function formatValue() {
+        Ox.print('HUH?', self.options.value, self.options.format);
         var value = self.options.value;
         if (self.options.value === '' && self.options.placeholder) {
             value = self.options.placeholder;
         } else if (self.options.format) {
             value = self.options.format(self.options.value)
+        } else if (self.options.type == 'input') {
+            Ox.print('HELLO??')
+            value = Ox.encodeHTML(self.options.value);
         }
         return value;
     }
 
+    function parseValue() {
+        return self.options.type == 'input'
+            ? Ox.encodeHTML(self.$input.value())
+            : Ox.parseHTML(self.$input.value());
+    }
+
+    function setSizes() {
+        var height, width;
+        self.$test.show();
+        height = self.options.height || Ox.limit(self.$test.height(), self.minHeight, self.maxHeight);
+        width = self.options.width || Ox.limit(self.$test.width(), self.minWidth, self.maxWidth);
+        Ox.print('stH', self.$test.height(), self.options.value)
+        self.$test.hide();
+        self.$input.options({
+                width: width,
+                height: height
+            })
+            //.show();
+        self.$input.find(self.options.type).css({
+            height: height + 'px',
+            width: width + 'px'
+        });
+    }
+
     function submit() {
         self.options.editing = false;
-        self.options.value = Ox.parseHTML(self.$input.value());
+        //self.options.value = parseValue();
         self.$input.value(formatInputValue()).hide();
         self.$test.html(formatTestValue());
         self.$value.html(formatValue()).show();

source/Ox.UI/js/Form/Ox.Input.js

@@ -114,13 +114,12 @@ Ox.Input = function(options, self) {
                     height: self.options.height + 'px'
                 } : {})
             )
-            .bindEvent(Ox.extend(self.options.type == 'textarea' ? {
+            .bindEvent(Ox.extend(self.options.type == 'input' ? {
-                key_shift_enter: submit
-            } : {
                 key_enter: submit
-            }, {
+            } : {}, {
                 key_control_v: paste,
-                key_escape: cancel
+                key_escape: cancel,
+                key_shift_enter: submit
             }));
 
     if (
@@ -1942,5 +1941,3 @@ Ox.Range_ = function(options, self) {
     return that;
 
 };
-
-