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