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