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