Roo/bootstrap/menu/Menu.js

/*
 * - LGPL
 *
 * menu
 * 
 */
Roo.bootstrap.menu = Roo.bootstrap.menu || {};

/**
 * @class Roo.bootstrap.menu.Menu
 * @extends Roo.bootstrap.Component
 * Bootstrap Menu class - container for Menu
 * @cfg {String} html Text of the menu
 * @cfg {String} weight (default | primary | success | info | warning | danger | inverse)
 * @cfg {String} icon Font awesome icon
 * @cfg {String} pos Menu align to (top | bottom) default bottom
 * 
 * 
 * @constructor
 * Create a new Menu
 * @param {Object} config The config object
 */


Roo.bootstrap.menu.Menu = function(config){
    Roo.bootstrap.menu.Menu.superclass.constructor.call(this, config);

    this.addEvents({
        /**
         * @event beforeshow
         * Fires before this menu is displayed
         * @param {Roo.bootstrap.menu.Menu} this
         */
        beforeshow : true,
        /**
         * @event beforehide
         * Fires before this menu is hidden
         * @param {Roo.bootstrap.menu.Menu} this
         */
        beforehide : true,
        /**
         * @event show
         * Fires after this menu is displayed
         * @param {Roo.bootstrap.menu.Menu} this
         */
        show : true,
        /**
         * @event hide
         * Fires after this menu is hidden
         * @param {Roo.bootstrap.menu.Menu} this
         */
        hide : true,
        /**
         * @event click
         * Fires when this menu is clicked (or when the enter key is pressed while it is active)
         * @param {Roo.bootstrap.menu.Menu} this
         * @param {Roo.EventObject} e
         */
        click : true
    });

};

Roo.extend(Roo.bootstrap.menu.Menu, Roo.bootstrap.Component,  {

    submenu : false,
    html : '',
    weight : 'default',
    icon : false,
    pos : 'bottom',


    getChildContainer : function() {
        if(this.isSubMenu){
            return this.el;
        }

        return this.el.select('ul.dropdown-menu', true).first();
    },

    getAutoCreate : function()
    {
        var text = [
            {
                tag : 'span',
                cls : 'roo-menu-text',
                html : this.html
            }
        ];

        if(this.icon){
            text.unshift({
                tag : 'i',
                cls : 'fa ' + this.icon
            })
        }


        var cfg = {
            tag : 'div',
            cls : 'btn-group',
            cn : [
                {
                    tag : 'button',
                    cls : 'dropdown-button btn btn-' + this.weight,
                    cn : text
                },
                {
                    tag : 'button',
                    cls : 'dropdown-toggle btn btn-' + this.weight,
                    cn : [
                        {
                            tag : 'span',
                            cls : 'caret'
                        }
                    ]
                },
                {
                    tag : 'ul',
                    cls : 'dropdown-menu'
                }
            ]

        };

        if(this.pos == 'top'){
            cfg.cls += ' dropup';
        }

        if(this.isSubMenu){
            cfg = {
                tag : 'ul',
                cls : 'dropdown-menu'
            }
        }

        return cfg;
    },

    onRender : function(ct, position)
    {
        this.isSubMenu = ct.hasClass('dropdown-submenu');

        Roo.bootstrap.menu.Menu.superclass.onRender.call(this, ct, position);
    },

    initEvents : function()
    {
        if(this.isSubMenu){
            return;
        }

        this.hidden = true;

        this.triggerEl = this.el.select('button.dropdown-toggle', true).first();
        this.triggerEl.on('click', this.onTriggerPress, this);

        this.buttonEl = this.el.select('button.dropdown-button', true).first();
        this.buttonEl.on('click', this.onClick, this);

    },

    list : function()
    {
        if(this.isSubMenu){
            return this.el;
        }

        return this.el.select('ul.dropdown-menu', true).first();
    },

    onClick : function(e)
    {
        this.fireEvent("click", this, e);
    },

    onTriggerPress  : function(e)
    {
        if (this.isVisible()) {
            this.hide();
        } else {
            this.show();
        }
    },

    isVisible : function(){
        return !this.hidden;
    },

    show : function()
    {
        this.fireEvent("beforeshow", this);

        this.hidden = false;
        this.el.addClass('open');

        Roo.get(document).on("mouseup", this.onMouseUp, this);

        this.fireEvent("show", this);


    },

    hide : function()
    {
        this.fireEvent("beforehide", this);

        this.hidden = true;
        this.el.removeClass('open');

        Roo.get(document).un("mouseup", this.onMouseUp);

        this.fireEvent("hide", this);
    },

    onMouseUp : function()
    {
        this.hide();
    }

});