git.roojs.org Git - roojs1/blob - Roo/bootstrap/NavGroup.js

   1 /*
   2  * - LGPL
   3  *
   4  * nav group
   5  *
   6  */
   7
   8 /**
   9  * @class Roo.bootstrap.NavGroup
  10  * @extends Roo.bootstrap.Component
  11  * Bootstrap NavGroup class
  12  * @cfg {String} align left | right
  13  * @cfg {Boolean} inverse false | true
  14  * @cfg {String} type (nav|pills|tab) default nav
  15  * @cfg {String} navId - reference Id for navbar.
  16
  17  *
  18  * @constructor
  19  * Create a new nav group
  20  * @param {Object} config The config object
  21  */
  22
  23 Roo.bootstrap.NavGroup = function(config){
  24     Roo.bootstrap.NavGroup.superclass.constructor.call(this, config);
  25     this.navItems = [];
  26
  27     Roo.bootstrap.NavGroup.register(this);
  28      this.addEvents({
  29         /**
  30              * @event changed
  31              * Fires when the active item changes
  32              * @param {Roo.bootstrap.NavGroup} this
  33              * @param {Roo.bootstrap.Navbar.Item} item The item selected
  34              * @param {Roo.bootstrap.Navbar.Item} item The previously selected item
  35          */
  36         'changed': true
  37      });
  38
  39 };
  40
  41 Roo.extend(Roo.bootstrap.NavGroup, Roo.bootstrap.Component,  {
  42
  43     align: '',
  44     inverse: false,
  45     form: false,
  46     type: 'nav',
  47     navId : '',
  48     // private
  49
  50     navItems : false,
  51
  52     getAutoCreate : function()
  53     {
  54         var cfg = Roo.apply({}, Roo.bootstrap.NavGroup.superclass.getAutoCreate.call(this));
  55
  56         cfg = {
  57             tag : 'ul',
  58             cls: 'nav'
  59         }
  60
  61         if (['tabs','pills'].indexOf(this.type)!==-1) {
  62             cfg.cls += ' nav-' + this.type
  63         } else {
  64             if (this.type!=='nav') {
  65                 Roo.log('nav type must be nav/tabs/pills')
  66             }
  67             cfg.cls += ' navbar-nav'
  68         }
  69
  70         if (this.parent().sidebar) {
  71             cfg = {
  72                 tag: 'ul',
  73                 cls: 'dashboard-menu sidebar-menu'
  74             }
  75
  76             return cfg;
  77         }
  78
  79         if (this.form === true) {
  80             cfg = {
  81                 tag: 'form',
  82                 cls: 'navbar-form'
  83             }
  84
  85             if (this.align === 'right') {
  86                 cfg.cls += ' navbar-right';
  87             } else {
  88                 cfg.cls += ' navbar-left';
  89             }
  90         }
  91
  92         if (this.align === 'right') {
  93             cfg.cls += ' navbar-right';
  94         }
  95
  96         if (this.inverse) {
  97             cfg.cls += ' navbar-inverse';
  98
  99         }
 100
 101
 102         return cfg;
 103     },
 104     /**
 105     * sets the active Navigation item
 106     * @param {Roo.bootstrap.NavItem} the new current navitem
 107     */
 108     setActiveItem : function(item)
 109     {
 110         var prev = false;
 111         Roo.each(this.navItems, function(v){
 112             if (v == item) {
 113                 return ;
 114             }
 115             if (v.isActive()) {
 116                 v.setActive(false, true);
 117                 prev = v;
 118
 119             }
 120
 121         });
 122
 123         item.setActive(true, true);
 124         this.fireEvent('changed', this, item, prev);
 125
 126
 127     },
 128     /**
 129     * gets the active Navigation item
 130     * @return {Roo.bootstrap.NavItem} the current navitem
 131     */
 132     getActive : function()
 133     {
 134
 135         var prev = false;
 136         Roo.each(this.navItems, function(v){
 137
 138             if (v.isActive()) {
 139                 prev = v;
 140
 141             }
 142
 143         });
 144         return prev;
 145     },
 146
 147     indexOfNav : function()
 148     {
 149
 150         var prev = false;
 151         Roo.each(this.navItems, function(v,i){
 152
 153             if (v.isActive()) {
 154                 prev = i;
 155
 156             }
 157
 158         });
 159         return prev;
 160     },
 161     /**
 162     * adds a Navigation item
 163     * @param {Roo.bootstrap.NavItem} the navitem to add
 164     */
 165     addItem : function(cfg)
 166     {
 167         var cn = new Roo.bootstrap.NavItem(cfg);
 168         this.register(cn);
 169         cn.parentId = this.id;
 170         cn.onRender(this.el, null);
 171         return cn;
 172     },
 173     /**
 174     * register a Navigation item
 175     * @param {Roo.bootstrap.NavItem} the navitem to add
 176     */
 177     register : function(item)
 178     {
 179         this.navItems.push( item);
 180         item.navId = this.navId;
 181
 182     },
 183
 184
 185     getNavItem: function(tabId)
 186     {
 187         var ret = false;
 188         Roo.each(this.navItems, function(e) {
 189             if (e.tabId == tabId) {
 190                ret =  e;
 191                return false;
 192             }
 193             return true;
 194
 195         });
 196         return ret;
 197     },
 198
 199     showPanelNext : function()
 200     {
 201         var i = this.indexOfNav(this.getActive());
 202         if (i > this.navItems.length) {
 203             return;
 204         }
 205         this.setActiveItem(this.navItems[i+1]);
 206     },
 207     showPanelPrev : function()
 208     {
 209         var i = this.indexOfNav(this.getActive());
 210         if (i  < 1) {
 211             return;
 212         }
 213         this.setActiveItem(this.navItems[i-1]);
 214     }
 215
 216
 217 });
 218
 219
 220 Roo.apply(Roo.bootstrap.NavGroup, {
 221
 222     groups: {},
 223      /**
 224     * register a Navigation Group
 225     * @param {Roo.bootstrap.NavGroup} the navgroup to add
 226     */
 227     register : function(navgrp)
 228     {
 229         this.groups[navgrp.navId] = navgrp;
 230
 231     },
 232     /**
 233     * fetch a Navigation Group based on the navigation ID
 234     * @param {string} the navgroup to add
 235     * @returns {Roo.bootstrap.NavGroup} the navgroup
 236     */
 237     get: function(navId) {
 238         if (typeof(this.groups[navId]) == 'undefined') {
 239             return false;
 240             //this.register(new Roo.bootstrap.NavGroup({ navId : navId }));
 241         }
 242         return this.groups[navId] ;
 243     }
 244
 245
 246
 247 });
 248
 249