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