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