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

'use strict';

Ox.ObjectInput = function(options, self) {

    self = self || {};
    var that = Ox.Element({}, self)
        .defaults({
            elements: [],
            labelWidth: 128,
            value: {},
            width: 256
        })
        .options(options || {})
        .addClass('OxObjectInput')
        .css({
            width: self.options.width + 'px',
            height: self.options.elements.length * 24 - 8 + 'px'
        });

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

    self.options.elements.forEach(function($element) {
        $element.options({
            labelWidth: self.options.labelWidth,
            width: self.options.width
        })
        .bindEvent({
            change: function(data) {
                self.options.value = getValue();
                that.triggerEvent('change', {
                    value: self.options.value
                });
            }
        })
        .appendTo(that);
    });

    function getValue() {
        var value = {};
        self.options.elements.forEach(function(element) {
            value[element.options('id')] = element.value();
        });
        return value;
    }

    function setValue(value) {
        self.options.elements.forEach(function(element) {
            element.value(value[element.options('id')]);
        });
    }

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

    return that;

};