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

// vim: et:ts=4:sw=4:sts=4:ft=javascript
/*@
Ox.Checkbox <f:Ox.Element> Checkbox Element
    () ->              <f> Checkbox Element
    (options) ->       <f> Checkbox Element
    (options, self) -> <f> Checkbox Element
    options <o> Options object
        checked <b> if true, checkbox is checked
        disabled <b> if true, checkbox is disabled
        group <b> if true, checkbox is part of a group
        id <s> element id
        label <s> Label (on the left side)
        labelWidth <n|64> Label width
        title <s> Title (on the right side)
        width <n> width in px
    self <o>    Shared private variable
    change <!> triggered when checked property changes, passes {checked, id, title}
@*/

Ox.Checkbox = function(options, self) {

    self = self || {};
    var that = Ox.Element({}, self)
            .defaults({
                checked: false,
                disabled: false,
                group: false,
                id: '',
                label: '',
                labelWidth: 64,
                overlap: 'none',
                title: '',
                width: 'auto'
            })
            .options(options || {})
            .addClass('OxCheckbox' + (
                self.options.overlap == 'none'
                ? '' : ' OxOverlap' + Ox.toTitleCase(self.options.overlap)
            ))
            .attr({
                disabled: self.options.disabled
            });

    if (self.options.title) {
        self.options.width != 'auto' && that.css({
            width: self.options.width + 'px'
        });
        self.$title = Ox.Label({
                disabled: self.options.disabled,
                id: self.options.id + 'Label',
                overlap: 'left',
                title: self.options.title,
                width: getTitleWidth()
            })
            .css({float: 'right'})
            .click(clickTitle)
            .appendTo(that);
    }

    if (self.options.label) {
        self.$label = Ox.Label({
                overlap: 'right',
                textAlign: 'right',
                title: self.options.label,
                width: self.options.labelWidth
            })
            .css({float: 'left'})
            .appendTo(that);
    }

    self.$button = Ox.Button({
            disabled: self.options.disabled,
            id: self.options.id + 'Button',
            title: [
                {id: 'none', title: 'none', selected: !self.options.checked},
                {id: 'check', title: 'check', selected: self.options.checked}
            ],
            type: 'image'
        })
        .addClass('OxCheckbox')
        .bindEvent({
            click: clickButton
        })
        .appendTo(that);

    function clickButton() {
        self.options.checked = !self.options.checked;
        // click will have toggled the button,
        // if it is part of a group, we have to revert that
        self.options.group && that.toggleChecked();
        that.triggerEvent('change', {
            checked: self.options.checked,
            id: self.options.id,
            title: self.options.title
        });
    }

    function clickTitle() {
        !self.options.disabled && self.$button.trigger('click');
    }

    function getTitleWidth() {
        return self.options.width - 16
            - !!self.options.label * self.options.labelWidth;
    }

    self.setOption = function(key, value) {
        if (key == 'checked') {
            that.toggleChecked();
        } else if (key == 'disabled') {
            that.attr({disabled: value});
            self.$button.options({disabled: value});
            self.$title && self.$title.options({disabled: value});
        } else if (key == 'title') {
            self.$title.options({title: value});
        } else if (key == 'width') {
            that.css({width: value + 'px'});
            self.$title && self.$title.options({width: getTitleWidth()});
        }
    };

    /*@
    checked <f> get current checked state
        () -> <b> returns self.options.checked
    @*/
    that.checked = function() {
        return self.options.checked;
    }

    /*@
    toggleChecked <f> toggle current checked state
        () -> <f> toggle state, returns Checkbox Element
    @*/
    that.toggleChecked = function() {
        self.$button.toggleTitle();
        return that;
    }

    // fixme: added for forms, duplicated, checked() shouldn't be neccessary
    that.value = function() {
        return self.options.checked;
    }

    return that;

};