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 {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.bootstrap.menu.Menu} this
  31          */
  32         beforeshow : true,
  33         /**
  34          * @event beforehide
  35          * Fires before this menu is hidden
  36          * @param {Roo.bootstrap.menu.Menu} this
  37          */
  38         beforehide : true,
  39         /**
  40          * @event show
  41          * Fires after this menu is displayed
  42          * @param {Roo.bootstrap.menu.Menu} this
  43          */
  44         show : true,
  45         /**
  46          * @event hide
  47          * Fires after this menu is hidden
  48          * @param {Roo.bootstrap.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.bootstrap.menu.Menu} this
  55          * @param {Roo.EventObject} e
  56          */
  57         click : true
  58     });
  59
  60 };
  61
  62 Roo.extend(Roo.bootstrap.menu.Menu, Roo.bootstrap.Component,  {
  63
  64     submenu : false,
  65     html : '',
  66     weight : 'default',
  67
  68
  69     getChildContainer : function() {
  70         if(this.submenu){
  71             return this.el;
  72         }
  73
  74         return this.el.select('ul.dropdown-menu', true).first();
  75     },
  76
  77     getAutoCreate : function()
  78     {
  79         var cfg = {
  80             tag : 'div',
  81             cls : 'btn-group',
  82             cn : [
  83                 {
  84                     tag : 'button',
  85                     cls : 'dropdown-button btn btn-' + this.weight,
  86                     html : this.html
  87                 },
  88                 {
  89                     tag : 'button',
  90                     cls : 'dropdown-toggle btn btn-' + this.weight,
  91                     cn : [
  92                         {
  93                             tag : 'span',
  94                             cls : 'caret'
  95                         }
  96                     ]
  97                 },
  98                 {
  99                     tag : 'ul',
 100                     cls : 'dropdown-menu'
 101                 }
 102             ]
 103
 104         };
 105
 106         if(this.isSubMenu()){
 107             cfg = {
 108                 tag : 'ul',
 109                 cls : 'dropdown-menu'
 110             }
 111         }
 112
 113         return cfg;
 114     },
 115
 116     isSubMenu : function()
 117     {
 118         if(this.parent() instanceof Roo.bootstrap.menu.Item){
 119             return true;
 120         }
 121
 122         return false;
 123
 124     },
 125
 126     initEvents : function()
 127     {
 128
 129         if(this.isSubMenu){
 130             return;
 131         }
 132
 133         this.hidden = true;
 134
 135         this.triggerEl = this.el.select('button.dropdown-toggle', true).first();
 136         this.triggerEl.on('click', this.onTriggerPress, this);
 137
 138         this.buttonEl = this.el.select('button.dropdown-button', true).first();
 139         this.buttonEl.on('click', this.onClick, this);
 140
 141     },
 142
 143     onClick : function(e)
 144     {
 145         this.fireEvent("click", this, e);
 146     },
 147
 148     onTriggerPress  : function(e)
 149     {
 150         if (this.isVisible()) {
 151             this.hide();
 152         } else {
 153             this.show();
 154         }
 155     },
 156
 157     isVisible : function(){
 158         return !this.hidden;
 159     },
 160
 161     show : function()
 162     {
 163         this.fireEvent("beforeshow", this);
 164
 165         this.hidden = false;
 166         this.el.addClass('open');
 167
 168         Roo.get(document).on("mouseup", this.onMouseUp, this);
 169
 170         this.fireEvent("show", this);
 171
 172     },
 173
 174     hide : function()
 175     {
 176         this.fireEvent("beforehide", this);
 177
 178         this.hidden = true;
 179         this.el.removeClass('open');
 180
 181         Roo.get(document).un("mouseup", this.onMouseUp);
 182
 183         this.fireEvent("hide", this);
 184     },
 185
 186     onMouseUp : function()
 187     {
 188         this.hide();
 189     }
 190
 191 });
 192
 193
 194