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',
                joinValues: null,
                separators: [],
                width: 0
            })
            .options(options || {})
            .addClass('OxInputGroup');

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

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

    function getWidth() {
        
    }

    function setWidth() {
        
    }

    self.setOption = function(key, value) {

    };

    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) {
            var ret = null;
            ['checked', 'selected', 'value'].forEach(function(v) {
                element[v] && (ret = element[v]());
            });
            return ret;
        });
        return self.options.joinValues
            ? self.options.joinValues(values)
            : values;
    };

    return that;

};