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     pos : 'bottom',
  71
  72
  73     getChildContainer : function() {
  74         if(this.isSubMenu){
  75             return this.el;
  76         }
  77
  78         return this.el.select('ul.dropdown-menu', true).first();
  79     },
  80
  81     getAutoCreate : function()
  82     {
  83         var text = [
  84             {
  85                 tag : 'span',
  86                 cls : 'roo-menu-text',
  87                 html : this.html
  88             }
  89         ];
  90
  91         if(this.icon){
  92             text.unshift({
  93                 tag : 'i',
  94                 cls : 'fa ' + this.icon
  95             })
  96         }
  97
  98
  99         var cfg = {
 100             tag : 'div',
 101             cls : 'btn-group',
 102             cn : [
 103                 {
 104                     tag : 'button',
 105                     cls : 'roo-dropdown-button btn btn-' + this.weight,
 106                     cn : text
 107                 },
 108                 {
 109                     tag : 'button',
 110                     cls : 'roo-dropdown-toggle btn btn-' + this.weight,
 111                     cn : [
 112                         {
 113                             tag : 'span',
 114                             cls : 'caret'
 115                         }
 116                     ]
 117                 },
 118                 {
 119                     tag : 'ul',
 120                     cls : 'roo-dropdown-menu'
 121                 }
 122             ]
 123
 124         };
 125
 126         if(this.pos == 'top'){
 127             cfg.cls += ' dropup';
 128         }
 129
 130         if(this.isSubMenu){
 131             cfg = {
 132                 tag : 'ul',
 133                 cls : 'roo-dropdown-menu'
 134             }
 135         }
 136
 137         return cfg;
 138     },
 139
 140     onRender : function(ct, position)
 141     {
 142         this.isSubMenu = ct.hasClass('roo-dropdown-submenu');
 143
 144         Roo.bootstrap.menu.Menu.superclass.onRender.call(this, ct, position);
 145     },
 146
 147     initEvents : function()
 148     {
 149
 150         this.list().setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'none';
 151
 152         if(this.isSubMenu){
 153             return;
 154         }
 155
 156         this.hidden = true;
 157
 158         this.triggerEl = this.el.select('button.roo-dropdown-toggle', true).first();
 159         this.triggerEl.on('click', this.onTriggerPress, this);
 160
 161         this.buttonEl = this.el.select('button.roo-dropdown-button', true).first();
 162         this.buttonEl.on('click', this.onClick, this);
 163
 164     },
 165
 166     list : function()
 167     {
 168         if(this.isSubMenu){
 169             return this.el;
 170         }
 171
 172         return this.el.select('ul.roo-dropdown-menu', true).first();
 173     },
 174
 175     onClick : function(e)
 176     {
 177         this.fireEvent("click", this, e);
 178     },
 179
 180     onTriggerPress  : function(e)
 181     {
 182         if (this.isVisible()) {
 183             this.hide();
 184         } else {
 185             this.show();
 186         }
 187     },
 188
 189     isVisible : function(){
 190         return !this.hidden;
 191     },
 192
 193     show : function()
 194     {
 195         Roo.log('show??');
 196         this.fireEvent("beforeshow", this);
 197
 198         this.hidden = false;
 199 //        this.el.addClass('open');
 200         Roo.log(this.list());
 201         this.list().show();
 202
 203         Roo.get(document).on("mouseup", this.onMouseUp, this);
 204
 205         this.fireEvent("show", this);
 206
 207     },
 208
 209     hide : function()
 210     {
 211         this.fireEvent("beforehide", this);
 212
 213         this.hidden = true;
 214         this.el.removeClass('open');
 215
 216         Roo.get(document).un("mouseup", this.onMouseUp);
 217
 218         this.fireEvent("hide", this);
 219     },
 220
 221     onMouseUp : function()
 222     {
 223         this.hide();
 224     }
 225
 226 });
 227
 228
 229