git.roojs.org Git - roojs1/blob - Roo/bootstrap/menu/Menu.js

   1 /*
   2  * - LGPL
   3  *
   4  * menu
   5  *
   6  */
   7 Roo.bootstrap.menu = Roo.bootstrap.menu || {};
   8
   9 /**
  10  * @class Roo.bootstrap.menu.Menu
  11  * @extends Roo.bootstrap.Component
  12  * Bootstrap Menu class - container for MenuItems
  13  * @cfg {Boolean} submenu (true | false) default false
  14  * @cfg {String} html Text of the menu
  15  * @cfg {String} weight (default | primary | success | info | warning | danger | inverse)
  16  *
  17  * @constructor
  18  * Create a new Menu
  19  * @param {Object} config The config object
  20  */
  21
  22
  23 Roo.bootstrap.menu.Menu = function(config){
  24     Roo.bootstrap.menu.Menu.superclass.constructor.call(this, config);
  25
  26 //    this.addEvents({
  27 //        /**
  28 //         * @event beforeshow
  29 //         * Fires before this menu is displayed
  30 //         * @param {Roo.menu.Menu} this
  31 //         */
  32 //        beforeshow : true,
  33 //        /**
  34 //         * @event beforehide
  35 //         * Fires before this menu is hidden
  36 //         * @param {Roo.menu.Menu} this
  37 //         */
  38 //        beforehide : true,
  39 //        /**
  40 //         * @event show
  41 //         * Fires after this menu is displayed
  42 //         * @param {Roo.menu.Menu} this
  43 //         */
  44 //        show : true,
  45 //        /**
  46 //         * @event hide
  47 //         * Fires after this menu is hidden
  48 //         * @param {Roo.menu.Menu} this
  49 //         */
  50 //        hide : true,
  51 //        /**
  52 //         * @event click
  53 //         * Fires when this menu is clicked (or when the enter key is pressed while it is active)
  54 //         * @param {Roo.menu.Menu} this
  55 //         * @param {Roo.menu.Item} menuItem The menu item that was clicked
  56 //         * @param {Roo.EventObject} e
  57 //         */
  58 //        click : true,
  59 //        /**
  60 //         * @event mouseover
  61 //         * Fires when the mouse is hovering over this menu
  62 //         * @param {Roo.menu.Menu} this
  63 //         * @param {Roo.EventObject} e
  64 //         * @param {Roo.menu.Item} menuItem The menu item that was clicked
  65 //         */
  66 //        mouseover : true,
  67 //        /**
  68 //         * @event mouseout
  69 //         * Fires when the mouse exits this menu
  70 //         * @param {Roo.menu.Menu} this
  71 //         * @param {Roo.EventObject} e
  72 //         * @param {Roo.menu.Item} menuItem The menu item that was clicked
  73 //         */
  74 //        mouseout : true,
  75 //        /**
  76 //         * @event itemclick
  77 //         * Fires when a menu item contained in this menu is clicked
  78 //         * @param {Roo.menu.BaseItem} baseItem The BaseItem that was clicked
  79 //         * @param {Roo.EventObject} e
  80 //         */
  81 //        itemclick: true
  82 //    });
  83
  84 };
  85
  86 Roo.extend(Roo.bootstrap.menu.Menu, Roo.bootstrap.Component,  {
  87
  88     submenu : false,
  89     html : '',
  90     weight : 'default',
  91
  92
  93     getChildContainer : function() {
  94         if(this.submenu){
  95             return this.el;
  96         }
  97
  98         return this.el.select('ul.dropdown-menu', true).first();
  99     },
 100
 101     getAutoCreate : function()
 102     {
 103         var cfg = {
 104             tag : 'div',
 105             cls : 'btn-group',
 106             cn : [
 107                 {
 108                     tag : 'button',
 109                     cls : 'btn btn-' + this.weight,
 110                     html : this.html
 111                 },
 112                 {
 113                     tag : 'button',
 114                     cls : 'dropdown-toggle btn btn-' + this.weight,
 115                     cn : [
 116                         {
 117                             tag : 'span',
 118                             cls : 'caret'
 119                         }
 120                     ]
 121                 },
 122                 {
 123                     tag : 'ul',
 124                     cls : 'dropdown-menu'
 125                 }
 126             ]
 127
 128         };
 129
 130         if(this.submenu){
 131             cfg = {
 132                 tag : 'ul',
 133                 cls : 'dropdown-menu'
 134             }
 135         }
 136
 137         return cfg;
 138     },
 139
 140     initEvents : function()
 141     {
 142         if(this.submenu){
 143             return;
 144         }
 145
 146         this.hidden = true;
 147         this.triggerEl = this.el.select('button.dropdown-toggle', true).first();
 148         this.triggerEl.on('click', this.onTriggerPress, this);
 149
 150         this.el.on('click', this.onClick, this);
 151
 152     },
 153
 154     onClick : function(e)
 155     {
 156         this.fireEvent("click", this, e);
 157     },
 158
 159     onTriggerPress  : function(e)
 160     {
 161         if (this.isVisible()) {
 162             this.hide();
 163         } else {
 164             this.show();
 165         }
 166     },
 167
 168     isVisible : function(){
 169         return !this.hidden;
 170     },
 171
 172     show : function()
 173     {
 174         this.fireEvent("beforeshow", this);
 175
 176         this.hidden = false;
 177         this.el.addClass('open');
 178
 179         Roo.get(document).on("mousedown", this.onMouseDown, this);
 180
 181         this.fireEvent("show", this);
 182
 183     },
 184
 185     hide : function()
 186     {
 187         this.fireEvent("beforehide", this);
 188
 189         this.hidden = true;
 190         this.el.removeClass('open');
 191
 192         this.fireEvent("hide", this);
 193     },
 194
 195     onMouseDown : function()
 196     {
 197         this.hide();
 198     }
 199
 200 });
 201
 202
 203