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     html : '',
  88     weight : 'default',
  89
  90
  91     getChildContainer : function() {
  92         return this.el.select('ul.dropdown-menu', true).first();
  93     },
  94
  95     getAutoCreate : function()
  96     {
  97         var cfg = {
  98             tag : 'div',
  99             cls : 'btn-group',
 100             cn : [
 101                 {
 102                     tag : 'button',
 103                     cls : 'btn btn-' + this.weight,
 104                     html : this.html
 105                 },
 106                 {
 107                     tag : 'button',
 108                     cls : 'dropdown-toggle btn btn-' + this.weight,
 109                     cn : [
 110                         {
 111                             tag : 'span',
 112                             cls : 'caret'
 113                         }
 114                     ]
 115                 },
 116                 {
 117                     tag : 'ul',
 118                     cls : 'dropdown-menu'
 119                 }
 120             ]
 121
 122         };
 123
 124         return cfg;
 125     },
 126
 127     initEvents : function() {
 128         this.hidden = true;
 129         this.triggerEl = this.el.select('button.dropdown-toggle', true).first();
 130         this.triggerEl.on('click', this.onTriggerPress, this);
 131
 132     },
 133
 134     onTriggerPress  : function(e)
 135     {
 136         Roo.log('trigger press');
 137
 138         if (this.isVisible()) {
 139             this.hide();
 140         } else {
 141             this.show();
 142         }
 143
 144
 145     },
 146
 147     isVisible : function(){
 148         return !this.hidden;
 149     },
 150
 151     show : function()
 152     {
 153         this.hidden = false;
 154         this.el.addClass('open');
 155
 156         Roo.get(document).on("mousedown", this.onMouseDown, this);
 157
 158     },
 159
 160     hide : function()
 161     {
 162         this.hidden = true;
 163         this.el.removeClass('open');;
 164     },
 165
 166     onMouseDown : function()
 167     {
 168         Roo.log('onMouseDown');
 169         this.hide();
 170     }
 171
 172 });
 173
 174
 175