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 MenuItems
  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.menu.Menu} this
  30 //         */
  31 //        beforeshow : true,
  32 //        /**
  33 //         * @event beforehide
  34 //         * Fires before this menu is hidden
  35 //         * @param {Roo.menu.Menu} this
  36 //         */
  37 //        beforehide : true,
  38 //        /**
  39 //         * @event show
  40 //         * Fires after this menu is displayed
  41 //         * @param {Roo.menu.Menu} this
  42 //         */
  43 //        show : true,
  44 //        /**
  45 //         * @event hide
  46 //         * Fires after this menu is hidden
  47 //         * @param {Roo.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.menu.Menu} this
  54 //         * @param {Roo.menu.Item} menuItem The menu item that was clicked
  55 //         * @param {Roo.EventObject} e
  56 //         */
  57 //        click : true,
  58 //        /**
  59 //         * @event mouseover
  60 //         * Fires when the mouse is hovering over this menu
  61 //         * @param {Roo.menu.Menu} this
  62 //         * @param {Roo.EventObject} e
  63 //         * @param {Roo.menu.Item} menuItem The menu item that was clicked
  64 //         */
  65 //        mouseover : true,
  66 //        /**
  67 //         * @event mouseout
  68 //         * Fires when the mouse exits this menu
  69 //         * @param {Roo.menu.Menu} this
  70 //         * @param {Roo.EventObject} e
  71 //         * @param {Roo.menu.Item} menuItem The menu item that was clicked
  72 //         */
  73 //        mouseout : true,
  74 //        /**
  75 //         * @event itemclick
  76 //         * Fires when a menu item contained in this menu is clicked
  77 //         * @param {Roo.menu.BaseItem} baseItem The BaseItem that was clicked
  78 //         * @param {Roo.EventObject} e
  79 //         */
  80 //        itemclick: true
  81 //    });
  82
  83 };
  84
  85 Roo.extend(Roo.bootstrap.menu.Menu, Roo.bootstrap.Component,  {
  86
  87     submenu : false,
  88     html : '',
  89     weight : 'default',
  90
  91
  92     getChildContainer : function() {
  93         return this.el.select('ul.dropdown-menu', true).first();
  94     },
  95
  96     getAutoCreate : function()
  97     {
  98         var cfg = {
  99             tag : 'div',
 100             cls : 'btn-group',
 101             cn : [
 102                 {
 103                     tag : 'button',
 104                     cls : 'btn btn-' + this.weight,
 105                     html : this.html
 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         return cfg;
 126     },
 127
 128     initEvents : function() {
 129         this.hidden = true;
 130         this.triggerEl = this.el.select('button.dropdown-toggle', true).first();
 131         this.triggerEl.on('click', this.onTriggerPress, this);
 132
 133     },
 134
 135     onTriggerPress  : function(e)
 136     {
 137         Roo.log('trigger press');
 138
 139         if (this.isVisible()) {
 140             this.hide();
 141         } else {
 142             this.show();
 143         }
 144
 145
 146     },
 147
 148     isVisible : function(){
 149         return !this.hidden;
 150     },
 151
 152     show : function()
 153     {
 154         this.hidden = false;
 155         this.el.addClass('open');
 156
 157         Roo.get(document).on("mousedown", this.onMouseDown, this);
 158
 159     },
 160
 161     hide : function()
 162     {
 163         this.hidden = true;
 164         this.el.removeClass('open');;
 165     },
 166
 167     onMouseDown : function()
 168     {
 169         Roo.log('onMouseDown');
 170         this.hide();
 171     }
 172
 173 });
 174
 175
 176