1 <html><head><title>/home/alan/gitlive/roojs1/Roo/bootstrap/Navbar.js</title><link rel="stylesheet" type="text/css" href="../../css/highlight-js.css"/></head><body class="highlightpage"><code class="jsdoc-pretty"><span class="jsdoc-comment">/*
9 * @class Roo.bootstrap.Navbar
10 * @extends Roo.bootstrap.Component
11 * Bootstrap Navbar class
15 * @param {Object} config The config object
19 </span><span class="jsdoc-var">Roo.bootstrap.Navbar </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">){
20 </span><span class="jsdoc-var">Roo.bootstrap.Navbar.superclass.constructor.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">config</span><span class="jsdoc-syntax">);
21 </span><span class="jsdoc-var">this.addEvents</span><span class="jsdoc-syntax">({
22 </span><span class="jsdoc-comment">// raw events
25 * Fire before toggle the menu
26 * @param {Roo.EventObject} e
28 </span><span class="jsdoc-string">"beforetoggle" </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true
29 </span><span class="jsdoc-syntax">});
32 </span><span class="jsdoc-var">Roo.extend</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.bootstrap.Navbar</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo.bootstrap.Component</span><span class="jsdoc-syntax">, {
36 </span><span class="jsdoc-comment">// private
37 </span><span class="jsdoc-var">navItems </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
38 </span><span class="jsdoc-var">loadMask </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
41 </span><span class="jsdoc-var">getAutoCreate </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
44 </span><span class="jsdoc-keyword">throw </span><span class="jsdoc-syntax">{ </span><span class="jsdoc-var">message </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">"nav bar is now a abstract base class - use NavSimplebar / NavHeaderbar / NavSidebar etc..."</span><span class="jsdoc-syntax">};
48 </span><span class="jsdoc-var">initEvents </span><span class="jsdoc-syntax">:</span><span class="jsdoc-keyword">function </span><span class="jsdoc-syntax">()
50 </span><span class="jsdoc-comment">//Roo.log(this.el.select('.navbar-toggle',true));
51 </span><span class="jsdoc-var">this.el.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'.navbar-toggle'</span><span class="jsdoc-syntax">,</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'click'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.onToggle </span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
53 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">mark </span><span class="jsdoc-syntax">= {
54 </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">"div"</span><span class="jsdoc-syntax">,
55 </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">:</span><span class="jsdoc-string">"x-dlg-mask"
56 </span><span class="jsdoc-syntax">};
58 </span><span class="jsdoc-var">this.maskEl </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.DomHelper.append</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.el</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">mark</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
60 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">size </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.getSize</span><span class="jsdoc-syntax">();
61 </span><span class="jsdoc-var">this.maskEl.setSize</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">size.width</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">size.height</span><span class="jsdoc-syntax">);
62 </span><span class="jsdoc-var">this.maskEl.enableDisplayMode</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">"block"</span><span class="jsdoc-syntax">);
63 </span><span class="jsdoc-var">this.maskEl.hide</span><span class="jsdoc-syntax">();
65 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.loadMask</span><span class="jsdoc-syntax">){
66 </span><span class="jsdoc-var">this.maskEl.show</span><span class="jsdoc-syntax">();
71 </span><span class="jsdoc-var">getChildContainer </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
73 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.el </span><span class="jsdoc-syntax">&& </span><span class="jsdoc-var">this.el.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'.collapse'</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.getCount</span><span class="jsdoc-syntax">()) {
74 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.el.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'.collapse'</span><span class="jsdoc-syntax">,</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.first</span><span class="jsdoc-syntax">();
77 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.el</span><span class="jsdoc-syntax">;
80 </span><span class="jsdoc-var">mask </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
82 </span><span class="jsdoc-var">this.maskEl.show</span><span class="jsdoc-syntax">();
85 </span><span class="jsdoc-var">unmask </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
87 </span><span class="jsdoc-var">this.maskEl.hide</span><span class="jsdoc-syntax">();
89 </span><span class="jsdoc-var">onToggle </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
92 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'beforetoggle'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">) === </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">){
93 </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
95 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">ce </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'.navbar-collapse'</span><span class="jsdoc-syntax">,</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.first</span><span class="jsdoc-syntax">();
97 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">ce.hasClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'show'</span><span class="jsdoc-syntax">)) {
98 </span><span class="jsdoc-var">this.expand</span><span class="jsdoc-syntax">();
99 } </span><span class="jsdoc-keyword">else </span><span class="jsdoc-syntax">{
100 </span><span class="jsdoc-var">this.collapse</span><span class="jsdoc-syntax">();
106 </span><span class="jsdoc-comment">/**
107 * Expand the navbar pulldown
109 </span><span class="jsdoc-var">expand </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function </span><span class="jsdoc-syntax">()
112 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">ce </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'.navbar-collapse'</span><span class="jsdoc-syntax">,</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.first</span><span class="jsdoc-syntax">();
113 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ce.hasClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'collapsing'</span><span class="jsdoc-syntax">)) {
114 </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
116 </span><span class="jsdoc-var">ce.dom.style.height </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">;
117 </span><span class="jsdoc-comment">// show it...
118 </span><span class="jsdoc-var">ce.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'in'</span><span class="jsdoc-syntax">); </span><span class="jsdoc-comment">// old...
119 </span><span class="jsdoc-var">ce.removeClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'collapse'</span><span class="jsdoc-syntax">);
120 </span><span class="jsdoc-var">ce.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'show'</span><span class="jsdoc-syntax">);
121 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">h </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">ce.getHeight</span><span class="jsdoc-syntax">();
122 </span><span class="jsdoc-var">Roo.log</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">);
123 </span><span class="jsdoc-var">ce.removeClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'show'</span><span class="jsdoc-syntax">);
124 </span><span class="jsdoc-comment">// at this point we should be able to see it..
125 </span><span class="jsdoc-var">ce.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'collapsing'</span><span class="jsdoc-syntax">);
127 </span><span class="jsdoc-var">ce.setHeight</span><span class="jsdoc-syntax">(0); </span><span class="jsdoc-comment">// resize it ...
128 </span><span class="jsdoc-var">ce.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'transitionend'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">() {
129 </span><span class="jsdoc-comment">//Roo.log('done transition');
130 </span><span class="jsdoc-var">ce.removeClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'collapsing'</span><span class="jsdoc-syntax">);
131 </span><span class="jsdoc-var">ce.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'show'</span><span class="jsdoc-syntax">);
132 </span><span class="jsdoc-var">ce.removeClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'collapse'</span><span class="jsdoc-syntax">);
134 </span><span class="jsdoc-var">ce.dom.style.height </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">;
135 }, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, { </span><span class="jsdoc-var">single</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">} );
136 </span><span class="jsdoc-var">ce.setHeight</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">);
137 </span><span class="jsdoc-var">ce.dom.scrollTop </span><span class="jsdoc-syntax">= 0;
139 </span><span class="jsdoc-comment">/**
140 * Collapse the navbar pulldown
142 </span><span class="jsdoc-var">collapse </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
144 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">ce </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'.navbar-collapse'</span><span class="jsdoc-syntax">,</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.first</span><span class="jsdoc-syntax">();
146 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ce.hasClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'collapsing'</span><span class="jsdoc-syntax">) || </span><span class="jsdoc-var">ce.hasClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'collapse'</span><span class="jsdoc-syntax">) ) {
147 </span><span class="jsdoc-comment">// it's collapsed or collapsing..
148 </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
150 </span><span class="jsdoc-var">ce.removeClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'in'</span><span class="jsdoc-syntax">); </span><span class="jsdoc-comment">// old...
151 </span><span class="jsdoc-var">ce.setHeight</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ce.getHeight</span><span class="jsdoc-syntax">());
152 </span><span class="jsdoc-var">ce.removeClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'show'</span><span class="jsdoc-syntax">);
153 </span><span class="jsdoc-var">ce.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'collapsing'</span><span class="jsdoc-syntax">);
155 </span><span class="jsdoc-var">ce.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'transitionend'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">() {
156 </span><span class="jsdoc-var">ce.dom.style.height </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">;
157 </span><span class="jsdoc-var">ce.removeClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'collapsing'</span><span class="jsdoc-syntax">);
158 </span><span class="jsdoc-var">ce.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'collapse'</span><span class="jsdoc-syntax">);
159 }, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, { </span><span class="jsdoc-var">single</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">} );
160 </span><span class="jsdoc-var">ce.setHeight</span><span class="jsdoc-syntax">(0);
171 </span></code></body></html>