git.roojs.org Git - roojs1/blob - Roo/bootstrap/NavHeaderbar.js

   1 /*
   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 Roo.bootstrap.NavHeaderbar = function(config){
  29     Roo.bootstrap.NavHeaderbar.superclass.constructor.call(this, config);
  30
  31 };
  32
  33 Roo.extend(Roo.bootstrap.NavHeaderbar, Roo.bootstrap.NavSimplebar,  {
  34
  35     position: '',
  36     brand: '',
  37     brand_href: false,
  38     srButton : true,
  39     autohide : false,
  40     desktopCenter : false,
  41
  42
  43     getAutoCreate : function(){
  44
  45         var   cfg = {
  46             tag: this.nav || 'nav',
  47             cls: 'navbar navbar-expand-md',
  48             role: 'navigation',
  49             cn: []
  50         };
  51
  52         var cn = cfg.cn;
  53         if (this.desktopCenter) {
  54             cn.push({cls : 'container', cn : []});
  55             cn = cn[0].cn;
  56         }
  57
  58         if(this.srButton){
  59             var btn = {
  60                 tag: 'button',
  61                 type: 'button',
  62                 cls: 'navbar-toggle navbar-toggler',
  63                 'data-toggle': 'collapse',
  64                 cn: [
  65                     {
  66                         tag: 'span',
  67                         cls: 'sr-only',
  68                         html: 'Toggle navigation'
  69                     },
  70                     {
  71                         tag: 'span',
  72                         cls: 'icon-bar navbar-toggler-icon'
  73                     },
  74                     {
  75                         tag: 'span',
  76                         cls: 'icon-bar'
  77                     },
  78                     {
  79                         tag: 'span',
  80                         cls: 'icon-bar'
  81                     }
  82                 ]
  83             };
  84
  85             cn.push( Roo.bootstrap.version == 4 ? btn : {
  86                 tag: 'div',
  87                 cls: 'navbar-header',
  88                 cn: [
  89                     btn
  90                 ]
  91             });
  92         }
  93
  94         cn.push({
  95             tag: 'div',
  96             cls: Roo.bootstrap.version == 4  ? 'nav flex-row roo-navbar-collapse' : 'collapse navbar-collapse roo-navbar-collapse',
  97             cn : []
  98         });
  99
 100         cfg.cls += this.inverse ? ' navbar-inverse navbar-dark bg-dark' : ' navbar-default';
 101
 102         if (['light','white'].indexOf(this.weight) > -1) {
 103             cfg.cls += ['light','white'].indexOf(this.weight) > -1 ? ' navbar-light' : ' navbar-dark';
 104         }
 105         cfg.cls += ' bg-' + this.weight;
 106
 107
 108         if (['fixed-top','fixed-bottom','static-top'].indexOf(this.position)>-1) {
 109             cfg.cls += ' navbar-' + this.position + ' ' + this.position ;
 110
 111             // tag can override this..
 112
 113             cfg.tag = this.tag || (this.position  == 'fixed-bottom' ? 'footer' : 'header');
 114         }
 115
 116         if (this.brand !== '') {
 117             var cp =  Roo.bootstrap.version == 4 ? cn : cn[0].cn;
 118             cp.unshift({ // changed from push ?? BS4 needs it at the start? - does this break or exsiting?
 119                 tag: 'a',
 120                 href: this.brand_href ? this.brand_href : '#',
 121                 cls: 'navbar-brand',
 122                 cn: [
 123                 this.brand
 124                 ]
 125             });
 126         }
 127
 128         if(this.main){
 129             cfg.cls += ' main-nav';
 130         }
 131
 132
 133         return cfg;
 134
 135
 136     },
 137     getHeaderChildContainer : function()
 138     {
 139         if (this.srButton && this.el.select('.navbar-header').getCount()) {
 140             return this.el.select('.navbar-header',true).first();
 141         }
 142
 143         return this.getChildContainer();
 144     },
 145
 146
 147     initEvents : function()
 148     {
 149         Roo.bootstrap.NavHeaderbar.superclass.initEvents.call(this);
 150
 151         if (this.autohide) {
 152
 153             var prevScroll = 0;
 154             var ft = this.el;
 155
 156             Roo.get(document).on('scroll',function(e) {
 157                 var ns = Roo.get(document).getScroll().top;
 158                 var os = prevScroll;
 159                 prevScroll = ns;
 160
 161                 if(ns > os){
 162                     ft.removeClass('slideDown');
 163                     ft.addClass('slideUp');
 164                     return;
 165                 }
 166                 ft.removeClass('slideUp');
 167                 ft.addClass('slideDown');
 168
 169
 170           },this);
 171         }
 172     }
 173
 174 });
 175
 176
 177
 178
 179
 180