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