oxjs/source/Ox.UI/js/Menu/MenuButton.js

'use strict';

/*@
Ox.MenuButton <f> Menu Button
    options <o> Options object
        disabled <b|false> If true, button is disabled
        id <s|''> Element id
        items <a|[]> Menu items
        maxWidth <n|0> Maximum menu width
        style <s|'rounded'> Style ('rounded' or 'square')
        title <s|''> Menu title
        tooltip <s|f|''> Tooltip title, or function that returns one
            (e) -> <string> Tooltip title
            e <object> Mouse event
        type <s|'text'> Type ('text' or 'image')
        width <s|n|'auto'> Width in px, or 'auto'
        click <!> click
        change <!> change
        hide <!> hide
        show <!> show
    self <o> Shared private variable
    ([options[, self]]) -> <o:Ox.Element> Menu Button    
@*/

Ox.MenuButton = function(options, self) {

    self = self || {};
    var that = Ox.Element({
            tooltip: options.tooltip || ''
        }, self)
        .defaults({
            disabled: false,
            id: '',
            items: [],
            maxWidth: 0,
            overlap: 'none',
            style: 'rounded',
            title: '',
            type: 'text',
            width: 'auto'
        })
        .options(options || {})
        .update({
            title: function() {
                if (self.options.type == 'text') {
                    self.$title.html(self.options.title);
                } else {
                    self.$button.options({title: self.options.title});
                }
            },
            width: function() { 
                that.css({width: self.options.width - 2 + 'px'});
                self.$title.css({width: self.options.width - 24 + 'px'});
            }
        })
        .addClass(
            'OxSelect Ox' + Ox.toTitleCase(self.options.style)
        )
        .css(self.options.width == 'auto' ? {} : {
            width: self.options.width - 2 + 'px'
        })
        .bindEvent({
            anyclick: function(e) {
                showMenu($(e.target).is('.OxButton') ? 'button' : null);
            },
        });

    if (self.options.type == 'text') {
        self.$title = Ox.$('<div>')
            .addClass('OxTitle')
            .css({width: self.options.width - 24 + 'px'})
            .html(self.options.title)
            .appendTo(that);
    }

    self.$button = Ox.Button({
            id: self.options.id + 'Button',
            selectable: true,
            overlap: self.options.overlap,
            style: 'symbol',
            title: self.options.type == 'text' || !self.options.title
                ? 'select' : self.options.title,
            type: 'image'
        })
        .appendTo(that);

    self.$menu = Ox.Menu({
            edge: 'bottom', // FIXME: should be edge
            element: self.$title || self.$button,
            id: self.options.id + 'Menu',
            items: self.options.items,
            maxWidth: self.options.maxWidth
        })
        .bindEvent({
            change: changeMenu,
            click: clickMenu,
            hide: hideMenu
        });

    self.options.type == 'image' && self.$menu.addClass('OxRight');

    function clickMenu(data) {
        that.triggerEvent('click', data);
    }

    function changeMenu(data) {
        that.triggerEvent('change', data);
    }

    function hideMenu(data) {
        that.loseFocus();
        that.removeClass('OxSelected');
        self.$button.options({value: false});
        that.triggerEvent('hide');
    }

    function showMenu(from) {
        that.gainFocus();
        that.addClass('OxSelected');
        from != 'button' && self.$button.options({value: true});
        self.options.tooltip && that.$tooltip.hide();
        self.$menu.showMenu();
        that.triggerEvent('show');
    }

    /*@
    checkItem <f> checkItem
        (id) -> <o> check item with id
    @*/
    that.checkItem = function(id) {
        self.$menu.checkItem(id);
        return that;
    };

    /*@
    disableItem <f> disableItem
        (id) -> <o> disable item with id
    @*/
    that.disableItem = function(id) {
        self.$menu.getItem(id).options({disabled: true});
        return that;
    };

    /*@
    enableItem <f> enableItem
        (id) -> <o> enable item
    @*/
    that.enableItem = function(id) {
        self.$menu.getItem(id).options({disabled: false});
        return that;
    };

    /*@
    remove <f> remove
        () -> <o> remove item
    @*/
    self.superRemove = that.remove;
    that.remove = function() {
        self.$menu.remove();
        self.superRemove();
        return that;
    };

    /*@
    setItemTitle <f> setItemTitle
        (id, title) -> <o>  set item title
    @*/
    that.setItemTitle = function(id, title) {
        self.$menu.setItemTitle(id, title);
        return that;
    };

    /*@
    uncheckItem <f> uncheck item
        (id) -> <o>  uncheck item with id
    @*/
    that.uncheckItem = function(id) {
        self.$menu.uncheckItem(id);
        return that;
    };

    return that;

};