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                     html : this.html
  89                 },
  90                 {
  91                     tag : 'button',
  92                     cls : 'dropdown-toggle btn btn-' + this.weight,
  93                     cn : [
  94                         {
  95                             tag : 'span',
  96                             cls : 'caret'
  97                         }
  98                     ]
  99                 },
 100                 {
 101                     tag : 'ul',
 102                     cls : 'dropdown-menu'
 103                 }
 104             ]
 105
 106         };
 107
 108         if(this.isSubMenu()){
 109             cfg = {
 110                 tag : 'ul',
 111                 cls : 'dropdown-menu'
 112             }
 113         }
 114
 115         return cfg;
 116     },
 117
 118     isSubMenu : function()
 119     {
 120         if(this.parent() instanceof Roo.bootstrap.menu.Item){
 121             return true;
 122         }
 123
 124         return false;
 125
 126     },
 127
 128     initEvents : function()
 129     {
 130
 131         if(this.isSubMenu()){
 132             return;
 133         }
 134
 135         this.hidden = true;
 136
 137         this.triggerEl = this.el.select('button.dropdown-toggle', true).first();
 138         this.triggerEl.on('click', this.onTriggerPress, this);
 139
 140         this.buttonEl = this.el.select('button.dropdown-button', true).first();
 141         this.buttonEl.on('click', this.onClick, this);
 142
 143     },
 144
 145     onClick : function(e)
 146     {
 147         this.fireEvent("click", this, e);
 148     },
 149
 150     onTriggerPress  : function(e)
 151     {
 152         if (this.isVisible()) {
 153             this.hide();
 154         } else {
 155             this.show();
 156         }
 157     },
 158
 159     isVisible : function(){
 160         return !this.hidden;
 161     },
 162
 163     show : function()
 164     {
 165         this.fireEvent("beforeshow", this);
 166
 167         this.hidden = false;
 168         this.el.addClass('open');
 169
 170         Roo.get(document).on("mouseup", this.onMouseUp, this);
 171
 172         this.fireEvent("show", this);
 173
 174     },
 175
 176     hide : function()
 177     {
 178         this.fireEvent("beforehide", this);
 179
 180         this.hidden = true;
 181         this.el.removeClass('open');
 182
 183         Roo.get(document).un("mouseup", this.onMouseUp);
 184
 185         this.fireEvent("hide", this);
 186     },
 187
 188     onMouseUp : function()
 189     {
 190         this.hide();
 191     }
 192
 193 });
 194
 195
 196