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