Roo/bootstrap/Navbar.js
[roojs1] / Roo / bootstrap / Navbar.js
1 /*
2  * - LGPL
3  *
4  * navbar
5  * 
6  */
7
8 /**
9  * @class Roo.bootstrap.Navbar
10  * @extends Roo.bootstrap.Component
11  * Bootstrap Navbar class
12
13  * @constructor
14  * Create a new Navbar
15  * @param {Object} config The config object
16  */
17
18
19 Roo.bootstrap.Navbar = function(config){
20     Roo.bootstrap.Navbar.superclass.constructor.call(this, config);
21     this.addEvents({
22         // raw events
23         /**
24          * @event beforetoggle
25          * Fire before toggle the menu
26          * @param {Roo.EventObject} e
27          */
28         "beforetoggle" : true
29     });
30 };
31
32 Roo.extend(Roo.bootstrap.Navbar, Roo.bootstrap.Component,  {
33     
34     
35    
36     // private
37     navItems : false,
38     loadMask : false,
39     
40     
41     getAutoCreate : function(){
42         
43         
44         throw { message : "nav bar is now a abstract base class - use NavSimplebar / NavHeaderbar / NavSidebar etc..."};
45         
46     },
47     
48     initEvents :function ()
49     {
50         //Roo.log(this.el.select('.navbar-toggle',true));
51         this.el.select('.navbar-toggle',true).on('click', function() {
52             if(this.fireEvent('beforetoggle', this) !== false){
53                 var ce = this.el.select('.navbar-collapse',true).first();
54                 ce.toggleClass('in'); // old...
55                 if (ce.hasClass('collapse')) {
56                     // show it...
57                     ce.removeClass('collapse');
58                     ce.addClass('show');
59                     
60                         ce.setHeight(ce.getHeight()); // resize it ...
61                         ce.removeClass('collapsing');
62                         ce.addClass('collapsing');
63                     
64                     // now flag it as moving..
65                     
66                     
67                     (function() { ce.removeClass('collapsing'); }).defer(100);
68                 } else {
69                     ce.addClass('collapsing');
70                     ce.removeClass('show');
71                     (function() {
72                         ce.removeClass('collapsing');
73                         ce.addClass('collapse');
74                     }).defer(200);
75                     
76                 }
77             }
78             
79         }, this);
80         
81         var mark = {
82             tag: "div",
83             cls:"x-dlg-mask"
84         };
85         
86         this.maskEl = Roo.DomHelper.append(this.el, mark, true);
87         
88         var size = this.el.getSize();
89         this.maskEl.setSize(size.width, size.height);
90         this.maskEl.enableDisplayMode("block");
91         this.maskEl.hide();
92         
93         if(this.loadMask){
94             this.maskEl.show();
95         }
96     },
97     
98     
99     getChildContainer : function()
100     {
101         if (this.el.select('.collapse').getCount()) {
102             return this.el.select('.collapse',true).first();
103         }
104         
105         return this.el;
106     },
107     
108     mask : function()
109     {
110         this.maskEl.show();
111     },
112     
113     unmask : function()
114     {
115         this.maskEl.hide();
116     } 
117     
118     
119     
120     
121 });
122
123
124
125  
126
127