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