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