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

'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;

};