diff --git a/demos/editable/index.html b/demos/editable/index.html index cb23ff26..b4804109 100644 --- a/demos/editable/index.html +++ b/demos/editable/index.html @@ -3,6 +3,7 @@ OxJS Editable Demo + diff --git a/demos/editable/js/editable.js b/demos/editable/js/editable.js index 534b53d8..45ea11a6 100644 --- a/demos/editable/js/editable.js +++ b/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 && $('
') + .css({float: 'left'}) + .html(', ') + .appendTo($content); + $editables[i] = Ox.Editable({ + format: function(value) { + return value + ? value //'' + value + '' + : ' '; + }, + 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(); + } + }); \ No newline at end of file diff --git a/source/Ox.UI/css/Ox.UI.css b/source/Ox.UI/css/Ox.UI.css index bc7ce0a8..c6ce1af8 100644 --- a/source/Ox.UI/css/Ox.UI.css +++ b/source/Ox.UI/css/Ox.UI.css @@ -621,6 +621,17 @@ textarea.OxSquare { border-radius: 0; } +/* +-------------------------------------------------------------------------------- +OxArrayEditable +-------------------------------------------------------------------------------- +*/ + +.OxArrayEditable { + display: table-cell; + padding: 4px; +} + /* -------------------------------------------------------------------------------- OxButton diff --git a/source/Ox.UI/js/Form/Ox.ArrayEditable.js b/source/Ox.UI/js/Form/Ox.ArrayEditable.js new file mode 100644 index 00000000..3d67728e --- /dev/null +++ b/source/Ox.UI/js/Form/Ox.ArrayEditable.js @@ -0,0 +1,109 @@ +'use strict'; + +/*@ +Ox.ArrayEditable 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 && $('
') + .css({float: 'left'}) + .html(', ') + .appendTo(that); + self.$items[i] = Ox.Editable({ + editable: item.editable, + format: function(value) { + return value || ' ' + }, + 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; + +}; diff --git a/source/Ox.UI/js/Form/Ox.Editable.js b/source/Ox.UI/js/Form/Ox.Editable.js index ed024fe1..eb3edf9b 100644 --- a/source/Ox.UI/js/Form/Ox.Editable.js +++ b/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});