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