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