add Ox.ArrayEditable

demos/editable/js/editable.js

@@ -94,4 +94,107 @@ Ox.load('UI', {debug: true}, function() {
         })
         .appendTo($div);
 
+    var $bar = Ox.Bar({
+            size: 16
+        })
+        .css({
+            width: '256px',
+            marginTop: '4px'
+        })
+        .appendTo($box.$element);
+    var $addButton = Ox.Button({
+            style: 'symbol',
+            title: 'add',
+            tooltip: 'Add Keyword',
+            type: 'image'
+        })
+        .css({
+            float: 'right'
+        })
+        .bindEvent({
+            click: function() {
+                //setTimeout(function() {
+                    values = Ox.map(values, function(value) {
+                        return value || null;
+                    });
+                    values.push('');
+                    renderEditables();
+                    Ox.last($editables).triggerEvent('doubleclick');
+                //}, 25);
+            }
+        })
+        .appendTo($bar);
+    var $content = Ox.Element({
+            tooltip: 'Doubleclick to add keyword'
+        })
+        .addClass('content')
+        .css({
+            display: 'table-cell',
+            width: '246px',
+            padding: '4px',
+            border: '1px solid rgb(192, 192, 192)',
+            marginTop: '8px'
+        })
+        .bindEvent({
+            doubleclick: function(e) {
+                $(e.target).is('.content') && $addButton.trigger('click');
+            }
+        })
+        .appendTo($box.$element);
+    var $editables = [],
+        values = [
+            'Sex', 'Crime', 'Car', 'Spoiler in Keywords',
+            'Genre in Keywords', 'Director Cameo',
+            'One Or More Meta Keywords'
+        ];
+    renderEditables();
+    function renderEditables() {
+        $content.empty();
+        Ox.print('VALUES:', values)
+        values.forEach(function(value, i) {
+            i && $('<div>')
+                .css({float: 'left'})
+                .html(',&nbsp;')
+                .appendTo($content);
+            $editables[i] = Ox.Editable({
+                    format: function(value) {
+                        return value
+                            ? value //'<a href="/?find=' + value + '">' + value + '</a>'
+                            : '&nbsp;';
+                    },
+                    tooltip: 'Click to select, doubleclick to edit',
+                    value: value
+                })
+                .css({float: 'left'})
+                //.data({position: i})
+                .bindEvent({
+                    anyclick: function() {
+                        $('.selected').removeClass('selected');
+                        $editables[i].addClass('selected');
+                    },
+                    cancel: function(data) {
+                        submit(i, data.value);
+                    },
+                    submit: function(data) {
+                        submit(i, data.value);
+                    }
+                })
+                .appendTo($content);
+        });
+    }
+    function submit(i, value) {
+        Ox.print('submit:', value)
+        if (value === '') {
+            values.splice(i, 1);
+        } else {
+            Array.prototype.splice.apply(values, Ox.merge(
+                [i, 1],
+                value.split(',').map(function(v) {
+                    return v.trim();
+                })
+            ));
+        }
+        renderEditables();
+    }
+
 });