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