1 <html><head><title>../roojs1/Roo/bootstrap/NavHeaderbar.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.NavHeaderbar
10 * @extends Roo.bootstrap.NavSimplebar
11 * Bootstrap Sidebar class
13 * @cfg {String} brand what is brand
14 * @cfg {String} position (fixed-top|fixed-bottom|static-top) position
15 * @cfg {String} brand_href href of the brand
16 * @cfg {Boolean} srButton generate the (screen reader / mobile) sr-only button default true
17 * @cfg {Boolean} autohide a top nav bar header that hides on scroll.
18 * @cfg {Boolean} desktopCenter should the header be centered on desktop using a container class
19 * @cfg {Roo.bootstrap.Row} mobilerow - a row to display on mobile only..
22 * Create a new Sidebar
23 * @param {Object} config The config object
27 </span><span class="jsdoc-var">Roo.bootstrap.NavHeaderbar </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">){
28 </span><span class="jsdoc-var">Roo.bootstrap.NavHeaderbar.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">);
32 </span><span class="jsdoc-var">Roo.extend</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.bootstrap.NavHeaderbar</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo.bootstrap.NavSimplebar</span><span class="jsdoc-syntax">, {
34 </span><span class="jsdoc-var">position</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">,
35 </span><span class="jsdoc-var">brand</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">,
36 </span><span class="jsdoc-var">brand_href</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
37 </span><span class="jsdoc-var">srButton </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
38 </span><span class="jsdoc-var">autohide </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
39 </span><span class="jsdoc-var">desktopCenter </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
42 </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">var </span><span class="jsdoc-var">cfg </span><span class="jsdoc-syntax">= {
45 </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.nav </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-string">'nav'</span><span class="jsdoc-syntax">,
46 </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'navbar'</span><span class="jsdoc-syntax">,
47 </span><span class="jsdoc-var">role</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'navigation'</span><span class="jsdoc-syntax">,
48 </span><span class="jsdoc-var">cn</span><span class="jsdoc-syntax">: []
51 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">cn </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">cfg.cn</span><span class="jsdoc-syntax">;
52 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.desktopCenter</span><span class="jsdoc-syntax">) {
53 </span><span class="jsdoc-var">cn.push</span><span class="jsdoc-syntax">({</span><span class="jsdoc-var">cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'container'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">cn </span><span class="jsdoc-syntax">: []});
54 </span><span class="jsdoc-var">cn </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">cn</span><span class="jsdoc-syntax">[0]</span><span class="jsdoc-var">.cn</span><span class="jsdoc-syntax">;
57 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.srButton</span><span class="jsdoc-syntax">){
58 </span><span class="jsdoc-var">cn.push</span><span class="jsdoc-syntax">({
59 </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'div'</span><span class="jsdoc-syntax">,
60 </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'navbar-header'</span><span class="jsdoc-syntax">,
61 </span><span class="jsdoc-var">cn</span><span class="jsdoc-syntax">: [
63 </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'button'</span><span class="jsdoc-syntax">,
64 </span><span class="jsdoc-var">type</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'button'</span><span class="jsdoc-syntax">,
65 </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'navbar-toggle'</span><span class="jsdoc-syntax">,
66 </span><span class="jsdoc-string">'data-toggle'</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'collapse'</span><span class="jsdoc-syntax">,
67 </span><span class="jsdoc-var">cn</span><span class="jsdoc-syntax">: [
69 </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'span'</span><span class="jsdoc-syntax">,
70 </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'sr-only'</span><span class="jsdoc-syntax">,
71 </span><span class="jsdoc-var">html</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'Toggle navigation'
72 </span><span class="jsdoc-syntax">},
74 </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'span'</span><span class="jsdoc-syntax">,
75 </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'icon-bar'
76 </span><span class="jsdoc-syntax">},
78 </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'span'</span><span class="jsdoc-syntax">,
79 </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'icon-bar'
80 </span><span class="jsdoc-syntax">},
82 </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'span'</span><span class="jsdoc-syntax">,
83 </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'icon-bar'
84 </span><span class="jsdoc-syntax">}
91 </span><span class="jsdoc-var">cn.push</span><span class="jsdoc-syntax">({
92 </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'div'</span><span class="jsdoc-syntax">,
93 </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'collapse navbar-collapse'</span><span class="jsdoc-syntax">,
94 </span><span class="jsdoc-var">cn </span><span class="jsdoc-syntax">: []
97 </span><span class="jsdoc-var">cfg.cls </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-var">this.inverse </span><span class="jsdoc-syntax">? </span><span class="jsdoc-string">' navbar-inverse' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">' navbar-default'</span><span class="jsdoc-syntax">;
99 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">([</span><span class="jsdoc-string">'fixed-top'</span><span class="jsdoc-syntax">,</span><span class="jsdoc-string">'fixed-bottom'</span><span class="jsdoc-syntax">,</span><span class="jsdoc-string">'static-top'</span><span class="jsdoc-syntax">]</span><span class="jsdoc-var">.indexOf</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.position</span><span class="jsdoc-syntax">)>-1) {
100 </span><span class="jsdoc-var">cfg.cls </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-string">' navbar-' </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">this.position</span><span class="jsdoc-syntax">;
102 </span><span class="jsdoc-comment">// tag can override this..
104 </span><span class="jsdoc-var">cfg.tag </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.tag </span><span class="jsdoc-syntax">|| (</span><span class="jsdoc-var">this.position </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'fixed-bottom' </span><span class="jsdoc-syntax">? </span><span class="jsdoc-string">'footer' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'header'</span><span class="jsdoc-syntax">);
107 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.brand </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">) {
108 </span><span class="jsdoc-var">cn</span><span class="jsdoc-syntax">[0]</span><span class="jsdoc-var">.cn.push</span><span class="jsdoc-syntax">({
109 </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'a'</span><span class="jsdoc-syntax">,
110 </span><span class="jsdoc-var">href</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.brand_href </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">this.brand_href </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'#'</span><span class="jsdoc-syntax">,
111 </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'navbar-brand'</span><span class="jsdoc-syntax">,
112 </span><span class="jsdoc-var">cn</span><span class="jsdoc-syntax">: [
113 </span><span class="jsdoc-var">this.brand
114 </span><span class="jsdoc-syntax">]
118 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.main</span><span class="jsdoc-syntax">){
119 </span><span class="jsdoc-var">cfg.cls </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-string">' main-nav'</span><span class="jsdoc-syntax">;
123 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">cfg</span><span class="jsdoc-syntax">;
127 </span><span class="jsdoc-var">getHeaderChildContainer </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
129 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.srButton </span><span class="jsdoc-syntax">&& </span><span class="jsdoc-var">this.el.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'.navbar-header'</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.getCount</span><span class="jsdoc-syntax">()) {
130 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.el.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'.navbar-header'</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">();
133 </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.getChildContainer</span><span class="jsdoc-syntax">();
137 </span><span class="jsdoc-var">initEvents </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
139 </span><span class="jsdoc-var">Roo.bootstrap.NavHeaderbar.superclass.initEvents.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
141 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.autohide</span><span class="jsdoc-syntax">) {
143 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">prevScroll </span><span class="jsdoc-syntax">= 0;
144 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">ft </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.el</span><span class="jsdoc-syntax">;
146 </span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">document</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'scroll'</span><span class="jsdoc-syntax">,</span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">) {
147 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">ns </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">document</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.getScroll</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.top</span><span class="jsdoc-syntax">;
148 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">os </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">prevScroll</span><span class="jsdoc-syntax">;
149 </span><span class="jsdoc-var">prevScroll </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">ns</span><span class="jsdoc-syntax">;
151 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ns </span><span class="jsdoc-syntax">> </span><span class="jsdoc-var">os</span><span class="jsdoc-syntax">){
152 </span><span class="jsdoc-var">ft.removeClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'slideDown'</span><span class="jsdoc-syntax">);
153 </span><span class="jsdoc-var">ft.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'slideUp'</span><span class="jsdoc-syntax">);
154 </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
156 </span><span class="jsdoc-var">ft.removeClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'slideUp'</span><span class="jsdoc-syntax">);
157 </span><span class="jsdoc-var">ft.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'slideDown'</span><span class="jsdoc-syntax">);
160 },</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
170 </span></code></body></html>