add Ox.ArrayEditable

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

@@ -621,6 +621,17 @@ textarea.OxSquare {
     border-radius: 0;
 }
 
+/*
+--------------------------------------------------------------------------------
+OxArrayEditable
+--------------------------------------------------------------------------------
+*/
+
+.OxArrayEditable {
+    display: table-cell;
+    padding: 4px;
+}
+
 /*
 --------------------------------------------------------------------------------
 OxButton

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

@@ -0,0 +1,109 @@
+'use strict';
+
+/*@
+Ox.ArrayEditable <f> Array Editable Object
+@*/
+
+Ox.ArrayEditable = function(options, self) {
+
+    self = self || {};
+    var that = Ox.Element(options.editable === false ? {} : {
+            tooltip: 'Doubleclick to add ' + (options.itemName : 'item')
+        })
+        .defaults({
+            editable: true,
+            itemName: 'item',
+            items: [],
+            position: -1,
+            selected: -1,
+            width: 256
+        })
+        .options(options || {})
+        .addClass('OxArrayEditable')
+        .css({width: self.options.width - 8 + 'px'}) // 2 x 4 px padding
+        .bindEvent({
+            doubleclick: doubleclick
+        });
+
+    self.$items = [];
+    self.values = [];
+
+    function doubleclick(e) {
+        var $target = $(e.target);
+        if ($target.is('.OxEditable')) {
+            that.editItem($target.data('position'));
+        } else {
+            that.addItem(position == -1 ? self.options.items.length : position);
+        }
+    }
+
+    function renderItems() {
+        that.empty();
+        self.options.items.forEach(function(item, i) {
+            self.values[i] = item.value;
+            i && $('<div>')
+                .css({float: 'left'})
+                .html(',&nbsp;')
+                .appendTo(that);
+            self.$items[i] = Ox.Editable({
+                    editable: item.editable,
+                    format: function(value) {
+                        return value || '&nbsp;'
+                    },
+                    tooltip: 'Click to select' + (
+                        item.editable ? ', doubleclick to edit' : ''
+                    ),
+                    value: item.value
+                })
+                .css({float: 'left'})
+                .data({position: i})
+                .bindEvent({
+                    anyclick: function() {
+                        that.find('.OxSelected').removeClass('.OxSelected');
+                        self.$items[i].addClass('OxSelected');
+                    },
+                    cancel: function(data) {
+                        
+                    },
+                    submit: function(data) {
+                        submit(position, data.value);
+                    }
+                })
+                .appendTo(that);
+        });
+    }
+
+    function submit(position, value) {
+        if (value === '') {
+            self.values.splice(position, 1);
+        } else {
+            Array.prototype.splice.apply(self.values, Ox.merge(
+                [position, 1],
+                value.split(',').map(function(v) {
+                    return v.trim();
+                })
+            ));
+        }
+        renderItems();
+    }
+
+    that.addItem = function(position) {
+        self.values = Ox.filter(values, function(value) {
+            return value;
+        });
+        self.values.push('');
+        renderItems();
+        Ox.last(self.$items).triggerEvent('doubleclick');
+    };
+
+    that.editItem = function(position) {
+        
+    };
+
+    that.removeItem = function(position) {
+        
+    };
+
+    return that;
+
+};

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

@@ -70,6 +70,7 @@ Ox.Editable = function(options, self) {
         self.$input.value(formatInputValue()).hide();
         self.$test.html(formatTestValue());
         self.$value.html(formatValue()).show();
+        that.triggerEvent('cancel', {value: self.options.value});
     }
 
     function change(event) {
@@ -156,7 +157,7 @@ Ox.Editable = function(options, self) {
             }
             // fixme: why can't this be chained?
             setTimeout(function() {
-                self.$input.focusInput(false);
+                self.$input.focusInput(true);
             }, 0);
             that.$tooltip && that.$tooltip.options({title: ''});
             that.triggerEvent('edit', {editing: true});