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  * @cfg {Boolean} loadMask (true|false) loadMask on the bar
  23  *
  24  *
  25  * @constructor
  26  * Create a new Navbar
  27  * @param {Object} config The config object
  28  */
  29
  30
  31 Roo.bootstrap.Navbar = function(config){
  32     Roo.bootstrap.Navbar.superclass.constructor.call(this, config);
  33     this.navItems = {};
  34 };
  35
  36 Roo.extend(Roo.bootstrap.Navbar, Roo.bootstrap.Component,  {
  37
  38     sidebar: false,
  39
  40     bar: false,
  41     brand: '',
  42     inverse: false,
  43     position: '',
  44     align : false,
  45     type: 'nav',
  46     arrangement: '',
  47     brand_href: false,
  48     main : false,
  49     loadMask : false,
  50
  51
  52     // private
  53     navItems : false,
  54
  55     getAutoCreate : function(){
  56         var cfg = {
  57             cls : 'navbar'
  58         };
  59
  60         if (this.sidebar === true) {
  61             cfg = {
  62                 tag: 'div',
  63                 cls: 'sidebar-nav'
  64             };
  65             return cfg;
  66         }
  67
  68         if (this.bar === true) {
  69             cfg = {
  70                 tag: 'nav',
  71                 cls: 'navbar',
  72                 role: 'navigation',
  73                 cn: [
  74                     {
  75                         tag: 'div',
  76                         cls: 'navbar-header',
  77                         cn: [
  78                             {
  79                             tag: 'button',
  80                             type: 'button',
  81                             cls: 'navbar-toggle',
  82                             'data-toggle': 'collapse',
  83                             cn: [
  84                                 {
  85                                     tag: 'span',
  86                                     cls: 'sr-only',
  87                                     html: 'Toggle navigation'
  88                                 },
  89                                 {
  90                                     tag: 'span',
  91                                     cls: 'icon-bar'
  92                                 },
  93                                 {
  94                                     tag: 'span',
  95                                     cls: 'icon-bar'
  96                                 },
  97                                 {
  98                                     tag: 'span',
  99                                     cls: 'icon-bar'
 100                                 }
 101                             ]
 102                             }
 103                         ]
 104                     },
 105                     {
 106                     tag: 'div',
 107                     cls: 'collapse navbar-collapse'
 108                     }
 109                 ]
 110             };
 111
 112             cfg.cls += this.inverse ? ' navbar-inverse' : ' navbar-default';
 113
 114             if (['fixed-top','fixed-bottom','static-top'].indexOf(this.position)>-1) {
 115                 cfg.cls += ' navbar-' + this.position;
 116                 cfg.tag = this.position  == 'fixed-bottom' ? 'footer' : 'header';
 117             }
 118
 119             if (this.brand !== '') {
 120                 cfg.cn[0].cn.push({
 121                     tag: 'a',
 122                     href: this.brand_href ? this.brand_href : '#',
 123                     cls: 'navbar-brand',
 124                     cn: [
 125                     this.brand
 126                     ]
 127                 });
 128             }
 129
 130             if(this.main){
 131                 cfg.cls += ' main-nav';
 132             }
 133
 134
 135             return cfg;
 136
 137         } else if (this.bar === false) {
 138
 139         } else {
 140             Roo.log('Property \'bar\' in of Navbar must be either true or false')
 141         }
 142
 143         cfg.cn = [
 144             {
 145                 cls: 'nav',
 146                 tag : 'ul'
 147             }
 148         ];
 149
 150         if (['tabs','pills'].indexOf(this.type)!==-1) {
 151             cfg.cn[0].cls += ' nav-' + this.type
 152         } else {
 153             if (this.type!=='nav') {
 154             Roo.log('nav type must be nav/tabs/pills')
 155             }
 156             cfg.cn[0].cls += ' navbar-nav'
 157         }
 158
 159         if (['stacked','justified'].indexOf(this.arrangement)!==-1) {
 160             cfg.cn[0].cls += ' nav-' + this.arrangement;
 161         }
 162
 163         if (this.align === 'right') {
 164             cfg.cn[0].cls += ' navbar-right';
 165         }
 166         if (this.inverse) {
 167             cfg.cls += ' navbar-inverse';
 168
 169         }
 170
 171
 172         return cfg;
 173     },
 174
 175     initEvents :function ()
 176     {
 177         //Roo.log(this.el.select('.navbar-toggle',true));
 178         this.el.select('.navbar-toggle',true).on('click', function() {
 179            // Roo.log('click');
 180             this.el.select('.navbar-collapse',true).toggleClass('in');
 181         }, this);
 182
 183         var mark = {
 184             tag: "div",
 185             cls:"x-dlg-mask"
 186         }
 187
 188         this.maskEl = Roo.DomHelper.append(this.el, mark, true);
 189
 190         var size = this.el.getSize();
 191         this.maskEl.setSize(size.width, size.height);
 192         this.maskEl.enableDisplayMode("block");
 193         this.maskEl.hide();
 194
 195         if(this.loadMask){
 196             this.maskEl.show();
 197         }
 198     },
 199
 200
 201     getChildContainer : function()
 202     {
 203         if (this.bar === true) {
 204             return this.el.select('.collapse',true).first();
 205         }
 206
 207         return this.el;
 208     },
 209
 210     mask : function()
 211     {
 212         this.maskEl.show();
 213     },
 214
 215     unmask : function()
 216     {
 217         this.maskEl.hide();
 218     },
 219
 220
 221     register : function(item)
 222     {
 223         this.navItems[item.tabId] = item;
 224         item.navId = navbar.navId;
 225
 226     }
 227 });
 228
 229 Roo.apply(Roo.bootstrap.Navbar, {
 230
 231     bars: {},
 232
 233     register : function(navbar)
 234     {
 235         bars[navbar.navId] = navbar;
 236
 237     }
 238
 239
 240
 241 });
 242
 243
 244
 245
 246