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
  14  * @cfg {String} type (nav|pills|tab) default nav
  15  * @cfg {String} navId - reference Id for navbar.
  16  * @cfg {Boolean} pilltype default true (turn to off to disable active toggle)
  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} selected The item selected
  34              * @param {Roo.bootstrap.Navbar.Item} prev 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     pilltype : true,
  50
  51     navItems : false,
  52
  53     getAutoCreate : function()
  54     {
  55         var cfg = Roo.apply({}, Roo.bootstrap.NavGroup.superclass.getAutoCreate.call(this));
  56
  57         cfg = {
  58             tag : 'ul',
  59             cls: 'nav'
  60         };
  61         if (Roo.bootstrap.version == 4) {
  62             if (['tabs','pills'].indexOf(this.type) != -1) {
  63                 cfg.cls += ' nav-' + this.type;
  64             } else {
  65                 // trying to remove so header bar can right align top?
  66                 if (this.parent() && this.parent().xtype != 'NavHeaderbar') {
  67                     // do not use on header bar...
  68                     cfg.cls += ' navbar-nav';
  69                 }
  70             }
  71
  72         } else {
  73             if (['tabs','pills'].indexOf(this.type) != -1) {
  74                 cfg.cls += ' nav-' + this.type
  75             } else {
  76                 if (this.type !== 'nav') {
  77                     Roo.log('nav type must be nav/tabs/pills')
  78                 }
  79                 cfg.cls += ' navbar-nav'
  80             }
  81         }
  82
  83         if (this.parent() && this.parent().sidebar) {
  84             cfg = {
  85                 tag: 'ul',
  86                 cls: 'dashboard-menu sidebar-menu'
  87             };
  88
  89             return cfg;
  90         }
  91
  92         if (this.form === true) {
  93             cfg = {
  94                 tag: 'form',
  95                 cls: 'navbar-form form-inline'
  96             };
  97             //nav navbar-right ml-md-auto
  98             if (this.align === 'right') {
  99                 cfg.cls += ' navbar-right ml-md-auto';
 100             } else {
 101                 cfg.cls += ' navbar-left';
 102             }
 103         }
 104
 105         if (this.align === 'right') {
 106             cfg.cls += ' navbar-right ml-md-auto';
 107         } else {
 108             cfg.cls += ' mr-auto';
 109         }
 110
 111         if (this.inverse) {
 112             cfg.cls += ' navbar-inverse';
 113
 114         }
 115
 116
 117         return cfg;
 118     },
 119     /**
 120     * sets the active Navigation item
 121     * @param {Roo.bootstrap.NavItem} the new current navitem
 122     */
 123     setActiveItem : function(item)
 124     {
 125         var prev = false;
 126         Roo.each(this.navItems, function(v){
 127             if (v == item) {
 128                 return ;
 129             }
 130             if (v.isActive()) {
 131                 v.setActive(false, true);
 132                 prev = v;
 133
 134             }
 135
 136         });
 137
 138         item.setActive(true, true);
 139         this.fireEvent('changed', this, item, prev);
 140
 141
 142     },
 143     /**
 144     * gets the active Navigation item
 145     * @return {Roo.bootstrap.NavItem} the current navitem
 146     */
 147     getActive : function()
 148     {
 149
 150         var prev = false;
 151         Roo.each(this.navItems, function(v){
 152
 153             if (v.isActive()) {
 154                 prev = v;
 155
 156             }
 157
 158         });
 159         return prev;
 160     },
 161
 162     indexOfNav : function()
 163     {
 164
 165         var prev = false;
 166         Roo.each(this.navItems, function(v,i){
 167
 168             if (v.isActive()) {
 169                 prev = i;
 170
 171             }
 172
 173         });
 174         return prev;
 175     },
 176     /**
 177     * adds a Navigation item
 178     * @param {Roo.bootstrap.NavItem} the navitem to add
 179     */
 180     addItem : function(cfg)
 181     {
 182         if (this.form && Roo.bootstrap.version == 4) {
 183             cfg.tag = 'div';
 184         }
 185         var cn = new Roo.bootstrap.NavItem(cfg);
 186         this.register(cn);
 187         cn.parentId = this.id;
 188         cn.onRender(this.el, null);
 189         return cn;
 190     },
 191     /**
 192     * register a Navigation item
 193     * @param {Roo.bootstrap.NavItem} the navitem to add
 194     */
 195     register : function(item)
 196     {
 197         this.navItems.push( item);
 198         item.navId = this.navId;
 199
 200     },
 201
 202     /**
 203     * clear all the Navigation item
 204     */
 205
 206     clearAll : function()
 207     {
 208         this.navItems = [];
 209         this.el.dom.innerHTML = '';
 210     },
 211
 212     getNavItem: function(tabId)
 213     {
 214         var ret = false;
 215         Roo.each(this.navItems, function(e) {
 216             if (e.tabId == tabId) {
 217                ret =  e;
 218                return false;
 219             }
 220             return true;
 221
 222         });
 223         return ret;
 224     },
 225
 226     setActiveNext : function()
 227     {
 228         var i = this.indexOfNav(this.getActive());
 229         if (i > this.navItems.length) {
 230             return;
 231         }
 232         this.setActiveItem(this.navItems[i+1]);
 233     },
 234     setActivePrev : function()
 235     {
 236         var i = this.indexOfNav(this.getActive());
 237         if (i  < 1) {
 238             return;
 239         }
 240         this.setActiveItem(this.navItems[i-1]);
 241     },
 242     clearWasActive : function(except) {
 243         Roo.each(this.navItems, function(e) {
 244             if (e.tabId != except.tabId && e.was_active) {
 245                e.was_active = false;
 246                return false;
 247             }
 248             return true;
 249
 250         });
 251     },
 252     getWasActive : function ()
 253     {
 254         var r = false;
 255         Roo.each(this.navItems, function(e) {
 256             if (e.was_active) {
 257                r = e;
 258                return false;
 259             }
 260             return true;
 261
 262         });
 263         return r;
 264     }
 265
 266
 267 });
 268
 269
 270 Roo.apply(Roo.bootstrap.NavGroup, {
 271
 272     groups: {},
 273      /**
 274     * register a Navigation Group
 275     * @param {Roo.bootstrap.NavGroup} the navgroup to add
 276     */
 277     register : function(navgrp)
 278     {
 279         this.groups[navgrp.navId] = navgrp;
 280
 281     },
 282     /**
 283     * fetch a Navigation Group based on the navigation ID
 284     * @param {string} the navgroup to add
 285     * @returns {Roo.bootstrap.NavGroup} the navgroup
 286     */
 287     get: function(navId) {
 288         if (typeof(this.groups[navId]) == 'undefined') {
 289             return false;
 290             //this.register(new Roo.bootstrap.NavGroup({ navId : navId }));
 291         }
 292         return this.groups[navId] ;
 293     }
 294
 295
 296
 297 });
 298
 299