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