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

// vim: et:ts=4:sw=4:sts=4:ft=javascript
'use strict';
/*@
Ox.CheckboxGroup <f:Ox.Element> CheckboxGroup Object
    () ->              <f> CheckboxGroup Object
    (options) ->       <f> CheckboxGroup Object
    (options, self) -> <f> CheckboxGroup Object
    options <o> Options object
        checkboxes      <a|[]>      array of checkboxes
        max             <n|1>       max selected
        min             <n|1>       min selected
        type            <s|"group"> type ("group" or "list")    
        width           <n>         width in px
    self    <o> shared private variable
    change <!> triggered when checked property changes
               passes {checked, id, title}
@*/

Ox.CheckboxGroup = function(options, self) {

    self = self || {};
    var that = Ox.Element({}, self)
            .defaults({
                // fixme: should 'checkboxes' be 'items'?
                checkboxes: [],
                max: 1,
                min: 1,
                type: 'group',
                width: 256
            })
            .options(options || {})
            .addClass('OxCheckboxGroup Ox' + Ox.toTitleCase(self.options.type));

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

    self.$checkboxes = [];
    if (self.options.type == 'group') {
        self.checkboxWidth = Ox.divideInt(
            self.options.width + (self.options.checkboxes.length - 1) * 6,
            self.options.checkboxes.length
        ).map(function(v, i) {
            return v + (i < self.options.checkboxes.length - 1 ? 10 : 0);
        });
    };

    self.options.checkboxes.forEach(function(checkbox, index) {
        self.$checkboxes[index] = Ox.Checkbox(Ox.extend(checkbox, {
                group: true,
                id: checkbox.id,
                width: self.options.type == 'group'
                    ? self.checkboxWidth[index] : self.options.width
            }))
            .bindEvent('change', function() {
                change(index);
            })
            .appendTo(that);
    });

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

    that.value = function() {
        return self.options.checkboxes.filter(function(checkbox) {
            return checkbox.checked;
        }).map(function(checkbox) {
            return checkbox.id;
        });
    };

    return that;

};