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: '',
            submitOnBlur: true,
            type: 'input',
            width: 256
        })
        .options(options || {})
        .addClass('OxArrayEditable OxArrayEditable' + Ox.toTitleCase(self.options.type))
        .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: self.options.type == 'input' ? selectLast : selectNext,
            key_left: self.options.type == 'input' ? selectPrevious : selectFirst,
            key_right: self.options.type == 'input' ? selectNext : selectLast,
            key_up: self.options.type == 'input' ? selectFirst : selectPrevious
        });

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

    renderItems();

    function anyclick(e) {
        var $target = $(e.target),
            $parent = $target.parent(),
            position = $parent.data('position');
        //ignore clicks while editing
        if (!$target.is('.OxInput')) {
            if (self.selected > -1) {
                //end editing but keep selected if clicked next to a keyword
                if (self.editing || self.$items[self.selected].options('editing')) {
                    self.editing = false;
                    self.$items[self.selected].options({editing: false});
                //deselect if not editing and not going to select antoher one
                } else if (!$parent.is('.OxEditableElement')) {
                    selectNone();
                }
            }
            //select if clicked on other editable element
            if ($parent.is('.OxEditableElement')) {
                selectItem(
                    e.metaKey && position == self.selected
                    ? '' : $parent.data('position')
                );
            }
            that.gainFocus();
        }
    }

    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;'
                    },
                    submitOnBlur: self.options.submitOnBlur,
                    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 - 8
                })
                .addClass(item.id == self.options.selected ? 'OxSelected' : '')
                .data({position: i})
                .bindEvent({
                    blur: function(data) {
                        that.triggerEvent('blur', data);
                    },
                    cancel: function(data) {
                        
                    },
                    edit: function(data) {
                        self.editing = true;
                        that.triggerEvent('edit', data);
                    },
                    submit: function(data) {
                        Ox.Log("AE", "SUBMIT", data);
                        submit(i, data.value);
                    }
                })
                .appendTo(that);
        });
    }

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

    function selectItem(idOrPosition) {
        if (Ox.isString(idOrPosition)) {
            self.options.selected = idOrPosition;
            self.selected = getSelectedPosition();
        } else {
            self.selected = idOrPosition;
            self.options.selected = getSelectedId();
        }
        that.find('.OxSelected').removeClass('OxSelected');
        self.selected > -1 && self.$items[self.selected].addClass('OxSelected');
        triggerSelectEvent();
    }

    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 if (item.value === value) {
            that.triggerEvent('blur');
        } else*/ {
            that.triggerEvent('submit', {
                id: item.id,
                value: value
            });
            item.value = value;
        }
    }

    function triggerSelectEvent() {
        if (!self.triggered) {
            that.triggerEvent('select', Ox.extend({
                id: self.options.selected
            }, self.options.selected ? {
                top: self.$items[self.selected].offset().top
            } : {}));
            self.triggered = true;
            setTimeout(function() {
                self.triggered = false;
            }, 250);
        }
    }

    self.setOption = function(key, value) {
        if (key == 'items') {
            renderItems();
        } else if (key == 'selected') {
            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.blurItem = function() {
        Ox.Log('AE', 'bI', self.selected);
        self.selected > -1 && self.$items[self.selected].options({editing: false});
    };

    that.editItem = function(id) {
        Ox.Log('AE', 'editItem', id);
        self.options.selected = id;
        self.selected = getSelectedPosition();
        editItem();
    };

    that.removeItem = function(position) {
        
    };

    return that;

};