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