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

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