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