git.roojs.org Git - roojs1/blob - docs/src/Roo_bootstrap_NavHeaderbar.js.html

   1 <html><head><title>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">/*
   2  * - LGPL
   3  *
   4  * navbar
   5  * navbar-fixed-top
   6  * navbar-expand-md  fixed-top
   7  */
   8
   9 /**
  10  * @class Roo.bootstrap.NavHeaderbar
  11  * @extends Roo.bootstrap.NavSimplebar
  12  * Bootstrap Sidebar class
  13  *
  14  * @cfg {String} brand what is brand
  15  * @cfg {String} position (fixed-top|fixed-bottom|static-top) position
  16  * @cfg {String} brand_href href of the brand
  17  * @cfg {Boolean} srButton generate the (screen reader / mobile) sr-only button   default true
  18  * @cfg {Boolean} autohide a top nav bar header that hides on scroll.
  19  * @cfg {Boolean} desktopCenter should the header be centered on desktop using a container class
  20  * @cfg {Roo.bootstrap.Row} mobilerow - a row to display on mobile only..
  21  *
  22  * @constructor
  23  * Create a new Sidebar
  24  * @param {Object} config The config object
  25  */
  26
  27
  28 </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">){
  29     </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">);
  30
  31 };
  32
  33 </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
  35     </span><span class="jsdoc-var">position</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">,
  36     </span><span class="jsdoc-var">brand</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">,
  37     </span><span class="jsdoc-var">brand_href</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
  38     </span><span class="jsdoc-var">srButton </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
  39     </span><span class="jsdoc-var">autohide </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
  40     </span><span class="jsdoc-var">desktopCenter </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
  41
  42
  43     </span><span class="jsdoc-var">getAutoCreate </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
  44
  45         </span><span class="jsdoc-keyword">var   </span><span class="jsdoc-var">cfg </span><span class="jsdoc-syntax">= {
  46             </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">,
  47             </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'navbar navbar-expand-md'</span><span class="jsdoc-syntax">,
  48             </span><span class="jsdoc-var">role</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'navigation'</span><span class="jsdoc-syntax">,
  49             </span><span class="jsdoc-var">cn</span><span class="jsdoc-syntax">: []
  50         };
  51
  52         </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">;
  53         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.desktopCenter</span><span class="jsdoc-syntax">) {
  54             </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">: []});
  55             </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">;
  56         }
  57
  58         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.srButton</span><span class="jsdoc-syntax">){
  59             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">btn </span><span class="jsdoc-syntax">= {
  60                 </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'button'</span><span class="jsdoc-syntax">,
  61                 </span><span class="jsdoc-var">type</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'button'</span><span class="jsdoc-syntax">,
  62                 </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'navbar-toggle navbar-toggler'</span><span class="jsdoc-syntax">,
  63                 </span><span class="jsdoc-string">'data-toggle'</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'collapse'</span><span class="jsdoc-syntax">,
  64                 </span><span class="jsdoc-var">cn</span><span class="jsdoc-syntax">: [
  65                     {
  66                         </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'span'</span><span class="jsdoc-syntax">,
  67                         </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'sr-only'</span><span class="jsdoc-syntax">,
  68                         </span><span class="jsdoc-var">html</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'Toggle navigation'
  69                     </span><span class="jsdoc-syntax">},
  70                     {
  71                         </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'span'</span><span class="jsdoc-syntax">,
  72                         </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'icon-bar navbar-toggler-icon'
  73                     </span><span class="jsdoc-syntax">},
  74                     {
  75                         </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'span'</span><span class="jsdoc-syntax">,
  76                         </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'icon-bar'
  77                     </span><span class="jsdoc-syntax">},
  78                     {
  79                         </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'span'</span><span class="jsdoc-syntax">,
  80                         </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'icon-bar'
  81                     </span><span class="jsdoc-syntax">}
  82                 ]
  83             };
  84
  85             </span><span class="jsdoc-var">cn.push</span><span class="jsdoc-syntax">( </span><span class="jsdoc-var">Roo.bootstrap.version </span><span class="jsdoc-syntax">== 4 ? </span><span class="jsdoc-var">btn </span><span class="jsdoc-syntax">: {
  86                 </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'div'</span><span class="jsdoc-syntax">,
  87                 </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'navbar-header'</span><span class="jsdoc-syntax">,
  88                 </span><span class="jsdoc-var">cn</span><span class="jsdoc-syntax">: [
  89                     </span><span class="jsdoc-var">btn
  90                 </span><span class="jsdoc-syntax">]
  91             });
  92         }
  93
  94         </span><span class="jsdoc-var">cn.push</span><span class="jsdoc-syntax">({
  95             </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'div'</span><span class="jsdoc-syntax">,
  96             </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'collapse navbar-collapse'</span><span class="jsdoc-syntax">,
  97             </span><span class="jsdoc-var">cn </span><span class="jsdoc-syntax">: []
  98         });
  99
 100         </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 navbar-dark bg-dark' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">' navbar-default'</span><span class="jsdoc-syntax">;
 101
 102         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">([</span><span class="jsdoc-string">'light'</span><span class="jsdoc-syntax">,</span><span class="jsdoc-string">'white'</span><span class="jsdoc-syntax">]</span><span class="jsdoc-var">.indexOf</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.weight</span><span class="jsdoc-syntax">) &gt; -1) {
 103             </span><span class="jsdoc-var">cfg.cls </span><span class="jsdoc-syntax">+= [</span><span class="jsdoc-string">'light'</span><span class="jsdoc-syntax">,</span><span class="jsdoc-string">'white'</span><span class="jsdoc-syntax">]</span><span class="jsdoc-var">.indexOf</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.weight</span><span class="jsdoc-syntax">) &gt; -1 ? </span><span class="jsdoc-string">' navbar-light' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">' navbar-dark'</span><span class="jsdoc-syntax">;
 104         }
 105         </span><span class="jsdoc-var">cfg.cls </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-string">' bg-' </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">this.weight</span><span class="jsdoc-syntax">;
 106
 107
 108         </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">)&gt;-1) {
 109             </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">+ </span><span class="jsdoc-string">' ' </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">this.position </span><span class="jsdoc-syntax">;
 110
 111             </span><span class="jsdoc-comment">// tag can override this..
 112
 113             </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">);
 114         }
 115
 116         </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">) {
 117             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">cp </span><span class="jsdoc-syntax">=  </span><span class="jsdoc-var">Roo.bootstrap.version </span><span class="jsdoc-syntax">== 4 ? </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">;
 118             </span><span class="jsdoc-var">cp.unshift</span><span class="jsdoc-syntax">({ </span><span class="jsdoc-comment">// changed from push ?? BS4 needs it at the start? - does this break or exsiting?
 119                 </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'a'</span><span class="jsdoc-syntax">,
 120                 </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">,
 121                 </span><span class="jsdoc-var">cls</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'navbar-brand'</span><span class="jsdoc-syntax">,
 122                 </span><span class="jsdoc-var">cn</span><span class="jsdoc-syntax">: [
 123                 </span><span class="jsdoc-var">this.brand
 124                 </span><span class="jsdoc-syntax">]
 125             });
 126         }
 127
 128         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.main</span><span class="jsdoc-syntax">){
 129             </span><span class="jsdoc-var">cfg.cls </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-string">' main-nav'</span><span class="jsdoc-syntax">;
 130         }
 131
 132
 133         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">cfg</span><span class="jsdoc-syntax">;
 134
 135
 136     },
 137     </span><span class="jsdoc-var">getHeaderChildContainer </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
 138     {
 139         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.srButton </span><span class="jsdoc-syntax">&amp;&amp; </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">()) {
 140             </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">();
 141         }
 142
 143         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.getChildContainer</span><span class="jsdoc-syntax">();
 144     },
 145
 146
 147     </span><span class="jsdoc-var">initEvents </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
 148     {
 149         </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">);
 150
 151         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.autohide</span><span class="jsdoc-syntax">) {
 152
 153             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">prevScroll </span><span class="jsdoc-syntax">= 0;
 154             </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">;
 155
 156             </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">) {
 157                 </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">;
 158                 </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">;
 159                 </span><span class="jsdoc-var">prevScroll </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">ns</span><span class="jsdoc-syntax">;
 160
 161                 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ns </span><span class="jsdoc-syntax">&gt; </span><span class="jsdoc-var">os</span><span class="jsdoc-syntax">){
 162                     </span><span class="jsdoc-var">ft.removeClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'slideDown'</span><span class="jsdoc-syntax">);
 163                     </span><span class="jsdoc-var">ft.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'slideUp'</span><span class="jsdoc-syntax">);
 164                     </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
 165                 }
 166                 </span><span class="jsdoc-var">ft.removeClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'slideUp'</span><span class="jsdoc-syntax">);
 167                 </span><span class="jsdoc-var">ft.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'slideDown'</span><span class="jsdoc-syntax">);
 168
 169
 170           },</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
 171         }
 172     }
 173
 174 });
 175
 176
 177
 178
 179
 180  </span></code></body></html>