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

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