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