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

// vim: et:ts=4:sw=4:sts=4:ft=javascript

'use strict';

/*@
Ox.FormElementGroup <f:Ox.Element> FormElementGroup Element
    () ->              <f> FormElementGroup Element
    (options) ->       <f> FormElementGroup Element
    (options, self) -> <f> FormElementGroup Element
    options <o> Options object
        id <s> element id
        elements <a|[]> elements in group
        float <s|left> alignment
        separators <a|[]> separators (not implemented)
        width <n|0> group width
    self <o>    Shared private variable
@*/

Ox.FormElementGroup = function(options, self) {

    self = self || {};
    var that = Ox.Element({}, self)
            .defaults({
                id: '',
                elements: [],
                float: 'left',
                join: null,
                separators: [],
                split: null,
                value: options.split ? '' : [],
                width: 0
            })
            .options(options || {})
            .addClass('OxInputGroup');

    if (Ox.isEmpty(self.options.value)) {
        self.options.value = getValue();
    } else {
        setValue();
    }

    (
        self.options.float == 'left' ?
        self.options.elements : Ox.clone(self.options.elements).reverse()
    ).forEach(function($element) {
        $element.css({
                float: self.options.float // fixme: make this a class
            })
            .bindEvent({
                autovalidate: function(data) {
                    that.triggerEvent({autovalidate: data});
                },
                change: change,
                submit: change,
                validate: function(data) {
                    that.triggerEvent({validate: data});
                }
            })
            .appendTo(that);
    });

    function change(data) {
        self.options.value = getValue();
        that.triggerEvent('change', {
            value: self.options.value
        });
    }

    /*
    if (self.options.width) {
        setWidths();
    } else {
        self.options.width = getWidth();
    }
    that.css({
        width: self.options.width + 'px'
    });
    */

    function getValue() {
        var value = self.options.elements.map(function($element) {
            return $element.value();
        });
        return self.options.join ? self.options.join(value) : value;
    }

    function getWidth() {
        
    }

    function setValue() {
        var values = self.options.split
            ? self.options.split(self.options.value)
            : self.options.value;
        values.forEach(function(value, i) {
            self.options.elements[i].value(value);
        });
    }

    function setWidth() {
        
    }

    self.setOption = function(key, value) {
        if (key == 'value') {
            setValue();
        }
    };

    that.replaceElement = function(pos, element) {
        Ox.Log('Form', 'Ox.FormElementGroup replaceElement', pos, element)
        self.options.elements[pos].replaceWith(element.$element);
        self.options.elements[pos] = element;
    };

    that.value = function() {
        var values = self.options.elements.map(function(element) {
            return element.value();
        });
        return self.options.joinValues
            ? self.options.joinValues(values)
            : values;
    };

    return that;

};