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
  61 };
  62
  63 Roo.extend(Roo.bootstrap.menu.Menu, Roo.bootstrap.Component,  {
  64
  65     submenu : false,
  66     html : '',
  67     weight : 'default',
  68
  69
  70     getChildContainer : function() {
  71         if(this.submenu){
  72             return this.el;
  73         }
  74
  75         return this.el.select('ul.dropdown-menu', true).first();
  76     },
  77
  78     getAutoCreate : function()
  79     {
  80         var cfg = {
  81             tag : 'div',
  82             cls : 'btn-group',
  83             cn : [
  84                 {
  85                     tag : 'button',
  86                     cls : 'btn btn-' + this.weight,
  87                     html : this.html
  88                 },
  89                 {
  90                     tag : 'button',
  91                     cls : 'dropdown-toggle btn btn-' + this.weight,
  92                     cn : [
  93                         {
  94                             tag : 'span',
  95                             cls : 'caret'
  96                         }
  97                     ]
  98                 },
  99                 {
 100                     tag : 'ul',
 101                     cls : 'dropdown-menu'
 102                 }
 103             ]
 104
 105         };
 106
 107         if(this.submenu){
 108             cfg = {
 109                 tag : 'ul',
 110                 cls : 'dropdown-menu'
 111             }
 112         }
 113
 114         return cfg;
 115     },
 116
 117     initEvents : function()
 118     {
 119         if(this.submenu){
 120             return;
 121         }
 122
 123         this.hidden = true;
 124         this.triggerEl = this.el.select('button.dropdown-toggle', true).first();
 125         this.triggerEl.on('click', this.onTriggerPress, this);
 126
 127         this.el.on('click', this.onClick, this);
 128
 129     },
 130
 131     onClick : function(e)
 132     {
 133         this.fireEvent("click", this, e);
 134     },
 135
 136     onTriggerPress  : function(e)
 137     {
 138         if (this.isVisible()) {
 139             this.hide();
 140         } else {
 141             this.show();
 142         }
 143     },
 144
 145     isVisible : function(){
 146         return !this.hidden;
 147     },
 148
 149     show : function()
 150     {
 151         this.fireEvent("beforeshow", this);
 152
 153         this.hidden = false;
 154         this.el.addClass('open');
 155
 156         Roo.get(document).on("mousedown", this.onMouseDown, this);
 157
 158         this.fireEvent("show", this);
 159
 160     },
 161
 162     hide : function()
 163     {
 164         this.fireEvent("beforehide", this);
 165
 166         this.hidden = true;
 167         this.el.removeClass('open');
 168
 169         this.fireEvent("hide", this);
 170     },
 171
 172     onMouseDown : function()
 173     {
 174         this.hide();
 175     }
 176
 177 });
 178
 179
 180