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')
        }, self)
        .defaults({
            editable: true,
            itemName: 'item',
            items: [],
            position: -1,
            selected: '',
            type: 'input',
            width: 256
        })
        .options(options || {})
        .addClass('OxArrayEditable')
        .css({width: self.options.width - 8 + 'px'}) // 2 x 4 px padding
        .bindEvent({
            anyclick: anyclick,
            doubleclick: doubleclick,
            key_delete: deleteItem,
            key_enter: editItem,
            key_escape: selectNone,
            key_down: selectLast,
            key_left: selectPrevious,
            key_right: selectNext,
            key_up: selectFirst
        });

    self.$items = [];
    self.selected = getSelectedPosition();

    renderItems();

    function anyclick(e) {
        var $target = $(e.target),
            $parent = $target.parent(),
            position = $parent.data('position');
        !$target.is('.OxInput') && that.gainFocus();
        if ($parent.is('.OxEditableElement')) {
            selectItem(
                e.metaKey && position == self.selected
                ? -1 : $parent.data('position')
            );
        } else {
            selectNone();
        }
    }

    function deleteItem() {
        self.options.items.splice(self.selected, 1);
        renderItems();
        that.triggerEvent('delete', {
            id: self.options.selected
        });
    }

    function doubleclick(e) {
        var $target = $(e.target),
            $parent = $target.parent();
        if ($parent.is('.OxEditableElement')) {
            that.editItem(self.options.selected);
        } else if(!$target.is('.OxInput')) {
            that.triggerEvent('add');
        }
    }

    function editItem() {
        if (self.selected > -1) {
            Ox.forEach(self.$items, function($item) {
                if ($item.data('position') == self.selected) {
                    $item.triggerEvent('doubleclick');
                    return false;
                }
            });
        }
    }

    function getSelectedId() {
        return self.selected > -1 ? self.options.items[self.selected].id : '';
    }

    function getSelectedPosition() {
        return Ox.getIndexById(self.options.items, self.options.selected);
    }

    function renderItems() {
        that.empty();
        self.options.items.forEach(function(item, i) {
            i && self.options.type == 'input'
                && $('<span>')
                    .html(', ')
                    .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' : ''
                    ),
                    type: self.options.type,
                    value: item.value,
                    width: self.options.type == 'input' ? 0 : self.options.width
                })
                .addClass(item.id == self.options.selected ? 'OxSelected' : '')
                .data({position: i})
                .bindEvent({
                    cancel: function(data) {
                        
                    },
                    edit: function(data) {
                        that.triggerEvent('edit', data);
                    },
                    submit: function(data) {
                        submit(i, data.value);
                    }
                })
                .appendTo(that);
        });
    }

    function selectFirst() {
        self.selected > -1 && selectItem(0);
    }

    function selectItem(position) {
        self.selected = position;
        self.options.selected = getSelectedId();
        that.selectItem(self.options.selected);
    }

    function selectLast() {
        self.selected > -1 && selectItem(self.options.items.length - 1);
    }

    function selectNext() {
        self.selected > -1
            && self.selected < self.options.items.length - 1
            && selectItem(self.selected + 1);
    }

    function selectNone() {
        selectItem(-1);
    }

    function selectPrevious() {
        self.selected > 0 && selectItem(self.selected - 1);
    }

    function submit(position, value) {
        var item = self.options.items[position];
        if (value === '') {
            deleteItem();
        } else {
            item.value != value && that.triggerEvent('submit', {
                id: item.id,
                value: value
            });
            item.value = value;
        }
    }

    self.setOption = function(key, value) {
        if (key == 'items') {
            renderItems();
        } else if (key == 'selected') {
            that.selectItem(value);
        }
    }

    that.addItem = function(position, item) {
        self.options.items.splice(position, 0, item);
        renderItems();
        //that.triggerEvent('add');
        /*
        self.values = Ox.filter(values, function(value) {
            return value;
        });
        self.values.push('');
        renderItems();
        Ox.last(self.$items).triggerEvent('doubleclick');
        */
    };

    that.editItem = function(position) {
        selectItem(position);
        editItem();
    };

    that.selectItem = function(id) {
        self.options.selected = id;
        self.selected = getSelectedPosition();
        that.find('.OxSelected').removeClass('OxSelected');
        self.selected > -1 && self.$items[self.selected].addClass('OxSelected');
        that.triggerEvent('select', {id: self.options.selected});
    };

    that.removeItem = function(position) {
        
    };

    return that;

};