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

   1 /*
   2  * - LGPL
   3  *
   4  * navbar
   5  *
   6  */
   7
   8 /**
   9  * @class Roo.bootstrap.NavHeaderbar
  10  * @extends Roo.bootstrap.NavSimplebar
  11  * Bootstrap Sidebar class
  12  *
  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..
  20  *
  21  * @constructor
  22  * Create a new Sidebar
  23  * @param {Object} config The config object
  24  */
  25
  26
  27 Roo.bootstrap.NavHeaderbar = function(config){
  28     Roo.bootstrap.NavHeaderbar.superclass.constructor.call(this, config);
  29
  30 };
  31
  32 Roo.extend(Roo.bootstrap.NavHeaderbar, Roo.bootstrap.NavSimplebar,  {
  33
  34     position: '',
  35     brand: '',
  36     brand_href: false,
  37     srButton : true,
  38     autohide : false,
  39     desktopCenter : false,
  40
  41
  42     getAutoCreate : function(){
  43
  44         var   cfg = {
  45             tag: this.nav || 'nav',
  46             cls: 'navbar',
  47             role: 'navigation',
  48             cn: []
  49         };
  50
  51         var cn = cfg.cn;
  52         if (this.desktopCenter) {
  53             cn.push({cls : 'container', cn : []});
  54             cn = cn[0].cn;
  55         }
  56
  57         if(this.srButton){
  58             cn.push({
  59                 tag: 'div',
  60                 cls: 'navbar-header',
  61                 cn: [
  62                     {
  63                         tag: 'button',
  64                         type: 'button',
  65                         cls: 'navbar-toggle',
  66                         'data-toggle': 'collapse',
  67                         cn: [
  68                             {
  69                                 tag: 'span',
  70                                 cls: 'sr-only',
  71                                 html: 'Toggle navigation'
  72                             },
  73                             {
  74                                 tag: 'span',
  75                                 cls: 'icon-bar'
  76                             },
  77                             {
  78                                 tag: 'span',
  79                                 cls: 'icon-bar'
  80                             },
  81                             {
  82                                 tag: 'span',
  83                                 cls: 'icon-bar'
  84                             }
  85                         ]
  86                     }
  87                 ]
  88             });
  89         }
  90
  91         cn.push({
  92             tag: 'div',
  93             cls: 'collapse navbar-collapse',
  94             cn : []
  95         });
  96
  97         cfg.cls += this.inverse ? ' navbar-inverse' : ' navbar-default';
  98
  99         if (['fixed-top','fixed-bottom','static-top'].indexOf(this.position)>-1) {
 100             cfg.cls += ' navbar-' + this.position;
 101
 102             // tag can override this..
 103
 104             cfg.tag = this.tag || (this.position  == 'fixed-bottom' ? 'footer' : 'header');
 105         }
 106
 107         if (this.brand !== '') {
 108             cn[0].cn.push({
 109                 tag: 'a',
 110                 href: this.brand_href ? this.brand_href : '#',
 111                 cls: 'navbar-brand',
 112                 cn: [
 113                 this.brand
 114                 ]
 115             });
 116         }
 117
 118         if(this.main){
 119             cfg.cls += ' main-nav';
 120         }
 121
 122
 123         return cfg;
 124
 125
 126     },
 127     getHeaderChildContainer : function()
 128     {
 129         if (this.el.select('.navbar-header').getCount()) {
 130             return this.el.select('.navbar-header',true).first();
 131         }
 132
 133         return this.getChildContainer();
 134     },
 135
 136
 137     initEvents : function()
 138     {
 139         Roo.bootstrap.NavHeaderbar.superclass.initEvents.call(this);
 140
 141         if (this.autohide) {
 142
 143             var prevScroll = 0;
 144             var ft = this.el;
 145
 146             Roo.get(document).on('scroll',function(e) {
 147                 var ns = Roo.get(document).getScroll().top;
 148                 var os = prevScroll;
 149                 prevScroll = ns;
 150
 151                 if(ns > os){
 152                     ft.removeClass('slideDown');
 153                     ft.addClass('slideUp');
 154                     return;
 155                 }
 156                 ft.removeClass('slideUp');
 157                 ft.addClass('slideDown');
 158
 159
 160           },this);
 161         }
 162     }
 163
 164 });
 165
 166
 167
 168
 169
 170