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

// vim: et:ts=4:sw=4:sts=4:ft=javascript

'use strict';

/*@
Ox.Button <f:Ox.Element> Button Object
    () ->              <f> Button Object
    (options) ->       <f> Button Object
    (options, self) -> <f> Button Object
    options <o> Options object
        disabled   <b|false> disabled
        group      <b|false> is part of group
        id:        <s|''> button id
        overlap    <s|none> overlap
        selectable <b|false> is selecatable
        size       <s|medium> button size
        style      <s|default> // can be default, checkbox, symbol, or tab
        title      <s|a|''> title, can be array
        tooltip    <s|a|''> tooltip, can be array (per title)
        type <s|text>   button type, text or image, (for image, title must be symbolTitle.svg must be availabe)
        value      <b|false> is selected
        width <s|auto>  button width
    self <o>    Shared private variable
    click    <!> non-selectable button was clicked
    change   <!> selectable button was clicked
@*/

Ox.Button = function(options, self) {

    self = self || {};
    var that = Ox.Element('<input>', self)
            .defaults({
                disabled: false,
                group: false,
                id: '',
                overlap: 'none',
                selectable: false,
                size: 'medium',
                // fixme: 'default' or ''?
                style: 'default',
                title: '',
                tooltip: '',
                type: 'text',
                value: false,
                width: 'auto'
            })
            .options(options ? Ox.extend(Ox.clone(options), {
                // tooltip may be an array, so we can't pass it yet
                tooltip: ''
            }) : {})
            .attr({
                disabled: self.options.disabled,
                type: self.options.type == 'text' ? 'button' : 'image'
            })
            .addClass(
                'OxButton Ox' + Ox.toTitleCase(self.options.size)
                + (self.options.disabled ? ' OxDisabled': '')
                + (self.options.selectable && self.options.value ? ' OxSelected': '')
                + (self.options.style != 'default' ? ' Ox' + Ox.toTitleCase(self.options.style) : '')
                + (self.options.overlap != 'none' ? ' OxOverlap' + Ox.toTitleCase(self.options.overlap) : '')
            )
            .css(self.options.width == 'auto' ? {} : {
                width: (self.options.width - 14) + 'px'
            })
            .mousedown(mousedown)
            .click(click);

    if (Ox.isArray(self.options.title)) {
        self.options.title = self.options.title.map(function(title) {
            return {
                id: title.id || title,
                title: title.title || title
            };
        });
        self.options.value = self.options.value || self.options.title[0].id;
    }

    setTitle();

    if (options.tooltip) {
        self.tooltips = Ox.toArray(options.tooltip);
        that.options({tooltip: self.tooltips[self.selectedTitle]});
    }

    function click() {
        if (!self.options.disabled) {
            if (Ox.isArray(self.options.title)) {
                that.toggleTitle();
                that.triggerEvent('change', {value: self.options.value});
            } else if (self.options.selectable) {
                that.toggleSelected();
                that.triggerEvent('change', {value: self.options.value});
            } else  {
                that.triggerEvent('click');
            }
        }
    }

    function mousedown(e) {
        if (self.options.type == 'image' && $.browser.safari) {
            // keep image from being draggable
            e.preventDefault();
        }
    }

    function setTitle() {
        var title = Ox.isArray(self.options.title)
            ? Ox.getObjectById(self.options.title, self.options.value).title
            : self.options.title;
        if (self.options.type == 'image') {
            that.attr({
                src: Ox.UI.getImageURL(
                    'symbol' + title[0].toUpperCase() + title.substr(1)
                )
            });
        } else {
            that.val(title);
        }
    }

    self.setOption = function(key, value) {
        if (key == 'disabled') {
            that.attr({disabled: value})
                .toggleClass('OxDisabled');
        } else if (key == 'tooltip') {
            that.$tooltip.options({title: value});
        } else if (key == 'title') {
            setTitle();
        } else if (key == 'value') {
            self.options.selectable && that.toggleClass('OxSelected');
        } else if (key == 'width') {
            that.$element.css({
                width: (value - 14) + 'px'
            });
        }
    };

    that.toggleSelected = function() {
        self.options.value = !self.options.value;
        that.toggleClass('OxSelected');
    };

    /*@
    toggleTitle <f>
        () -> <o> toggle through titles
    @*/
    that.toggleTitle = function() {
        self.options.value = self.options.title[
            1 - Ox.getPositionById(self.options.title, self.options.value)
        ].id;
        setTitle();
        self.options.selectable && that.toggleClass('OxSelected');
        // fixme: if the tooltip is visible
        // we also need to call show()
        that.$tooltip && that.$tooltip.options({
            title: self.tooltips[self.selectedTitle]
        });
        return that;
    }

    that.value = function() {
        return self.options.title;
    };

    return that;

};