oxjs/source/js/Ox.CheckboxGroup.js

// vim: et:ts=4:sw=4:sts=4:ft=js
Ox.CheckboxGroup = function(options, self) {

    /**
        options
            checkboxes      []  array of checkboxes
            max             1   integer
            min             1   integer
            width           integer, width in px
        events:
            change          triggered when checked property changes
                            passes {checked, id, title}
    */

    var self = self || {},
        that = new Ox.Element('div', self)
            .defaults({
                checkboxes: [],
                max: 1,
                min: 1,
                width: 256
            })
            .options(options || {})
            .addClass('OxCheckboxGroup');

    self.optionGroup = new Ox.OptionGroup(
        self.options.checkboxes,
        self.options.min,
        self.options.max);
    self.options.checkboxes = self.optionGroup.init();

    $.extend(self, {
        $checkboxes: [],
        checkboxWidth: $.map(Ox.divideInt(
            self.options.width + (self.options.checkboxes.length - 1) * 6,
            self.options.checkboxes.length
        ), function(v, i) {
            return v + (i < self.options.checkboxes.length - 1 ? 10 : 0);
        })
    });
    self.options.checkboxes.forEach(function(checkbox, position) {
        var id = self.options.id + Ox.toTitleCase(checkbox.id)
        self.$checkboxes[position] = new Ox.Checkbox($.extend(checkbox, {
                group: true,
                id: id,
                width: self.checkboxWidth[position]
            }))
            .bindEvent('change', function() {
                change(position);
            })
            .appendTo(that);
    });

    function change(pos) {
        var toggled = self.optionGroup.toggle(pos);
        //Ox.print('change', pos, 'toggled', toggled)
        if (toggled.length) {
            toggled.forEach(function(pos, i) {
                self.$checkboxes[pos].toggleChecked();
            });
            that.triggerEvent('change', {
                checked: $.map(self.optionGroup.checked(), function(v, i) {
                    return self.options.checkboxes[v].id;
                })
            });
        }
    }

    return that;

};