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