git.roojs.org Git - roojs1/blob - Roo/bootstrap/nav/Group.js

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