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