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

   1 /*
   2  * - LGPL
   3  *
   4  * navbar
   5  *
   6  */
   7
   8 /**
   9  * @class Roo.bootstrap.Navbar
  10  * @extends Roo.bootstrap.Component
  11  * Bootstrap Navbar class
  12  * @cfg {Boolean} sidebar has side bar
  13  * @cfg {Boolean} bar is a bar?
  14  * @cfg {String} position (fixed-top|fixed-bottom|static-top) position
  15  * @cfg {String} brand what is brand
  16  * @cfg {Boolean} inverse is inverted color
  17  * @cfg {String} type (nav | pills | tabs)
  18  * @cfg {Boolean} arrangement stacked | justified
  19  * @cfg {String} align (left | right) alignment
  20  * @cfg {String} brand_href href of the brand
  21  * @cfg {Boolean} main (true|false) main nav bar? default false
  22  *
  23  *
  24  * @constructor
  25  * Create a new Navbar
  26  * @param {Object} config The config object
  27  */
  28
  29
  30 Roo.bootstrap.Navbar = function(config){
  31     Roo.bootstrap.Navbar.superclass.constructor.call(this, config);
  32 };
  33
  34 Roo.extend(Roo.bootstrap.Navbar, Roo.bootstrap.Component,  {
  35
  36     sidebar: false,
  37
  38     bar: false,
  39     brand: '',
  40     inverse: false,
  41     position: '',
  42     align : false,
  43     type: 'nav',
  44     arrangement: '',
  45     brand_href: false,
  46     main : false,
  47
  48     getAutoCreate : function(){
  49         var cfg = {
  50             cls : 'navbar'
  51         };
  52
  53         if (this.sidebar === true) {
  54             cfg = {
  55                 tag: 'div',
  56                 cls: 'sidebar-nav'
  57             };
  58             return cfg;
  59         }
  60
  61         if (this.bar === true) {
  62             cfg = {
  63                 tag: 'nav',
  64                 cls: 'navbar',
  65                 role: 'navigation',
  66                 cn: [
  67                     {
  68                         tag: 'div',
  69                         cls: 'navbar-header',
  70                         cn: [
  71                             {
  72                             tag: 'button',
  73                             type: 'button',
  74                             cls: 'navbar-toggle',
  75                             'data-toggle': 'collapse',
  76                             cn: [
  77                                 {
  78                                     tag: 'span',
  79                                     cls: 'sr-only',
  80                                     html: 'Toggle navigation'
  81                                 },
  82                                 {
  83                                     tag: 'span',
  84                                     cls: 'icon-bar'
  85                                 },
  86                                 {
  87                                     tag: 'span',
  88                                     cls: 'icon-bar'
  89                                 },
  90                                 {
  91                                     tag: 'span',
  92                                     cls: 'icon-bar'
  93                                 }
  94                             ]
  95                             }
  96                         ]
  97                     },
  98                     {
  99                     tag: 'div',
 100                     cls: 'collapse navbar-collapse'
 101                     }
 102                 ]
 103             };
 104
 105             cfg.cls += this.inverse ? ' navbar-inverse' : ' navbar-default';
 106
 107             if (['fixed-top','fixed-bottom','static-top'].indexOf(this.position)>-1) {
 108                 cfg.cls += ' navbar-' + this.position;
 109                 cfg.tag = this.position  == 'fixed-bottom' ? 'footer' : 'header';
 110             }
 111
 112             if (this.brand !== '') {
 113                 cfg.cn[0].cn.push({
 114                     tag: 'a',
 115                     href: this.brand_href ? this.brand_href : '#',
 116                     cls: 'navbar-brand',
 117                     cn: [
 118                     this.brand
 119                     ]
 120                 });
 121             }
 122
 123             if(this.main){
 124                 cfg.cls += ' main-nav';
 125             }
 126
 127
 128             return cfg;
 129
 130         } else if (this.bar === false) {
 131
 132         } else {
 133             Roo.log('Property \'bar\' in of Navbar must be either true or false')
 134         }
 135
 136         cfg.cn = [
 137             {
 138                 cls: 'nav',
 139                 tag : 'ul'
 140             }
 141         ];
 142
 143         if (['tabs','pills'].indexOf(this.type)!==-1) {
 144             cfg.cn[0].cls += ' nav-' + this.type
 145         } else {
 146             if (this.type!=='nav') {
 147             Roo.log('nav type must be nav/tabs/pills')
 148             }
 149             cfg.cn[0].cls += ' navbar-nav'
 150         }
 151
 152         if (['stacked','justified'].indexOf(this.arrangement)!==-1) {
 153             cfg.cn[0].cls += ' nav-' + this.arrangement;
 154         }
 155
 156         if (this.align === 'right') {
 157             cfg.cn[0].cls += ' navbar-right';
 158         }
 159         if (this.inverse) {
 160             cfg.cls += ' navbar-inverse';
 161
 162         }
 163
 164
 165         return cfg;
 166     },
 167
 168     initEvents :function ()
 169     {
 170         //Roo.log(this.el.select('.navbar-toggle',true));
 171         this.el.select('.navbar-toggle',true).on('click', function() {
 172            // Roo.log('click');
 173             this.el.select('.navbar-collapse',true).toggleClass('in');
 174         }, this);
 175
 176     },
 177
 178
 179     getChildContainer : function()
 180     {
 181         if (this.bar === true) {
 182             return this.el.select('.collapse',true).first();
 183         }
 184
 185         return this.el;
 186     }
 187
 188 });
 189
 190
 191
 192