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  * @cfg {Boolean} bar is a bar?
13  * @cfg {String} position (fixed-top|fixed-bottom|static-top) position
14  * @cfg {String} brand what is brand
15  * @cfg {Boolean} inverse is inverted color
16  * @cfg {String} type (nav | pills | tabs)
17  * @cfg {Boolean} arrangement stacked | justified
18  * @cfg {String} align (left | right) alignment
19  * @cfg {String} brand_href href of the brand
20  * @cfg {Boolean} main (true|false) main nav bar? default false
21  * @cfg {Boolean} loadMask (true|false) loadMask on the bar
22  * @cfg {String} tag (header|footer|nav|div) default is nav 
23
24  * 
25  * @constructor
26  * Create a new Navbar
27  * @param {Object} config The config object
28  */
29
30
31 Roo.bootstrap.Navbar = function(config){
32     Roo.bootstrap.Navbar.superclass.constructor.call(this, config);
33     
34 };
35
36 Roo.extend(Roo.bootstrap.Navbar, Roo.bootstrap.Component,  {
37     
38     
39     bar: false,
40     brand: '',
41     inverse: false,
42     position: '',
43     align : false,
44     type: false,
45     arrangement: '',
46     brand_href: false,
47     main : false,
48     loadMask : false,
49     tag : false,
50     
51     // private
52     navItems : false,
53     
54     getAutoCreate : function(){
55         
56         
57         
58         var cfg = {
59             cls : 'navbar'
60         };
61           
62         
63         cfg.cn = [
64             {
65                 cls: 'nav',
66                 tag : 'ul'
67             }
68         ];
69         
70          
71         this.type = this.type || 'nav';
72         if (['tabs','pills'].indexOf(this.type)!==-1) {
73             cfg.cn[0].cls += ' nav-' + this.type
74         } else {
75             if (this.type!=='nav') {
76                 Roo.log('nav type must be nav/tabs/pills')
77             }
78             cfg.cn[0].cls += ' navbar-nav'
79         }
80         
81         if (['stacked','justified'].indexOf(this.arrangement)!==-1) {
82             cfg.cn[0].cls += ' nav-' + this.arrangement;
83         }
84         
85         
86         if (this.align === 'right') {
87             cfg.cn[0].cls += ' navbar-right';
88         }
89         
90         if (this.inverse) {
91             cfg.cls += ' navbar-inverse';
92             
93         }
94         
95         
96         return cfg;
97     },
98     
99     initEvents :function ()
100     {
101         //Roo.log(this.el.select('.navbar-toggle',true));
102         this.el.select('.navbar-toggle',true).on('click', function() {
103            // Roo.log('click');
104             this.el.select('.navbar-collapse',true).toggleClass('in');                                 
105         }, this);
106         
107         var mark = {
108             tag: "div",
109             cls:"x-dlg-mask"
110         }
111         
112         this.maskEl = Roo.DomHelper.append(this.el, mark, true);
113         
114         var size = this.el.getSize();
115         this.maskEl.setSize(size.width, size.height);
116         this.maskEl.enableDisplayMode("block");
117         this.maskEl.hide();
118         
119         if(this.loadMask){
120             this.maskEl.show();
121         }
122     },
123     
124     
125     getChildContainer : function()
126     {
127         if (this.bar === true) {
128             return this.el.select('.collapse',true).first();
129         }
130         
131         return this.el;
132     },
133     
134     mask : function()
135     {
136         this.maskEl.show();
137     },
138     
139     unmask : function()
140     {
141         this.maskEl.hide();
142     }
143     
144     
145     
146 });
147
148
149
150  
151
152