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

   1 /*
   2  * - LGPL
   3  *
   4  * column
   5  *
   6  */
   7
   8 /**
   9  * @class Roo.bootstrap.TabGroup
  10  * @extends Roo.bootstrap.Column
  11  * Bootstrap Column class
  12  * @cfg {String} navId the navigation id (for use with navbars) - will be auto generated if it does not exist..
  13  * @cfg {Boolean} carousel true to make the group behave like a carousel
  14  * @cfg {Number} bullets show the panel pointer.. default 0
  15  * @cfg {Boolena} autoslide (true|false) auto slide .. default false
  16  * @cfg {Number} timer auto slide timer .. default 0 millisecond
  17  *
  18  * @constructor
  19  * Create a new TabGroup
  20  * @param {Object} config The config object
  21  */
  22
  23 Roo.bootstrap.TabGroup = function(config){
  24     Roo.bootstrap.TabGroup.superclass.constructor.call(this, config);
  25     if (!this.navId) {
  26         this.navId = Roo.id();
  27     }
  28     this.tabs = [];
  29     Roo.bootstrap.TabGroup.register(this);
  30
  31 };
  32
  33 Roo.extend(Roo.bootstrap.TabGroup, Roo.bootstrap.Column,  {
  34
  35     carousel : false,
  36     transition : false,
  37     bullets : 0,
  38     timer : 0,
  39     autoslide : false,
  40     slideFn : false,
  41
  42     getAutoCreate : function()
  43     {
  44         var cfg = Roo.apply({}, Roo.bootstrap.TabGroup.superclass.getAutoCreate.call(this));
  45
  46         cfg.cls += ' tab-content';
  47
  48         Roo.log('get auto create...............');
  49
  50         if (this.carousel) {
  51             cfg.cls += ' carousel slide';
  52
  53             cfg.cn = [{
  54                cls : 'carousel-inner'
  55             }];
  56
  57             if(this.bullets > 0 && !Roo.isTouch){
  58
  59                 var bullets = {
  60                     cls : 'carousel-bullets',
  61                     cn : []
  62                 };
  63
  64                 if(this.bullets_cls){
  65                     bullets.cls = bullets.cls + ' ' + this.bullets_cls;
  66                 }
  67
  68                 for (var i = 0; i < this.bullets; i++){
  69                     bullets.cn.push({
  70                         cls : 'bullet bullet-' + i
  71                     });
  72                 }
  73
  74                 bullets.cn.push({
  75                     cls : 'clear'
  76                 });
  77
  78                 cfg.cn[0].cn = bullets;
  79             }
  80         }
  81
  82         return cfg;
  83     },
  84
  85     initEvents:  function()
  86     {
  87         Roo.log('-------- init events on tab group ---------');
  88
  89         if(this.bullets > 0 && !Roo.isTouch){
  90             this.initBullet();
  91         }
  92
  93         Roo.log(this);
  94
  95         if(Roo.isTouch){
  96             this.el.on("touchstart", this.onTouchStart, this);
  97         }
  98
  99         if(this.autoslide){
 100             var _this = this;
 101
 102             this.slideFn = window.setInterval(function() {
 103                 _this.showPanelNext();
 104             }, this.timer);
 105         }
 106
 107     },
 108
 109     onTouchStart : function(e, el, o)
 110     {
 111         if(!Roo.isTouch || Roo.get(e.getTarget()).el.hasClass('roo-button-text')){
 112             return;
 113         }
 114
 115
 116     },
 117
 118     getChildContainer : function()
 119     {
 120         return this.carousel ? this.el.select('.carousel-inner', true).first() : this.el;
 121     },
 122
 123     /**
 124     * register a Navigation item
 125     * @param {Roo.bootstrap.NavItem} the navitem to add
 126     */
 127     register : function(item)
 128     {
 129         this.tabs.push( item);
 130         item.navId = this.navId; // not really needed..
 131
 132     },
 133
 134     getActivePanel : function()
 135     {
 136         var r = false;
 137         Roo.each(this.tabs, function(t) {
 138             if (t.active) {
 139                 r = t;
 140                 return false;
 141             }
 142             return null;
 143         });
 144         return r;
 145
 146     },
 147     getPanelByName : function(n)
 148     {
 149         var r = false;
 150         Roo.each(this.tabs, function(t) {
 151             if (t.tabId == n) {
 152                 r = t;
 153                 return false;
 154             }
 155             return null;
 156         });
 157         return r;
 158     },
 159     indexOfPanel : function(p)
 160     {
 161         var r = false;
 162         Roo.each(this.tabs, function(t,i) {
 163             if (t.tabId == p.tabId) {
 164                 r = i;
 165                 return false;
 166             }
 167             return null;
 168         });
 169         return r;
 170     },
 171     /**
 172      * show a specific panel
 173      * @param {Roo.bootstrap.TabPanel|number|string} panel to change to (use the tabId to specify a specific one)
 174      * @return {boolean} false if panel was not shown (invalid entry or beforedeactivate fails.)
 175      */
 176     showPanel : function (pan)
 177     {
 178         if(this.transition){
 179             Roo.log("waiting for the transitionend");
 180             return;
 181         }
 182
 183         if (typeof(pan) == 'number') {
 184             pan = this.tabs[pan];
 185         }
 186         if (typeof(pan) == 'string') {
 187             pan = this.getPanelByName(pan);
 188         }
 189         if (pan.tabId == this.getActivePanel().tabId) {
 190             return true;
 191         }
 192         var cur = this.getActivePanel();
 193
 194         if (false === cur.fireEvent('beforedeactivate')) {
 195             return false;
 196         }
 197
 198         if(this.bullets > 0 && !Roo.isTouch){
 199             this.setActiveBullet(this.indexOfPanel(pan));
 200         }
 201
 202         if (this.carousel && typeof(Roo.get(document.body).dom.style.transition) != 'undefined') {
 203
 204             this.transition = true;
 205             var dir = this.indexOfPanel(pan) > this.indexOfPanel(cur)  ? 'next' : 'prev';
 206             var lr = dir == 'next' ? 'left' : 'right';
 207             pan.el.addClass(dir); // or prev
 208             pan.el.dom.offsetWidth; // find the offset with - causing a reflow?
 209             cur.el.addClass(lr); // or right
 210             pan.el.addClass(lr);
 211
 212             var _this = this;
 213             cur.el.on('transitionend', function() {
 214                 Roo.log("trans end?");
 215
 216                 pan.el.removeClass([lr,dir]);
 217                 pan.setActive(true);
 218
 219                 cur.el.removeClass([lr]);
 220                 cur.setActive(false);
 221
 222                 _this.transition = false;
 223
 224             }, this, { single:  true } );
 225
 226             return true;
 227         }
 228
 229         cur.setActive(false);
 230         pan.setActive(true);
 231
 232         return true;
 233
 234     },
 235     showPanelNext : function()
 236     {
 237         var i = this.indexOfPanel(this.getActivePanel());
 238
 239         if (i >= this.tabs.length - 1 && !this.autoslide) {
 240             return;
 241         }
 242
 243         if (i >= this.tabs.length - 1 && this.autoslide) {
 244             i = -1;
 245         }
 246
 247         this.showPanel(this.tabs[i+1]);
 248     },
 249
 250     showPanelPrev : function()
 251     {
 252         var i = this.indexOfPanel(this.getActivePanel());
 253
 254         if (i  < 1 && !this.autoslide) {
 255             return;
 256         }
 257
 258         if (i < 1 && this.autoslide) {
 259             i = this.tabs.length;
 260         }
 261
 262         this.showPanel(this.tabs[i-1]);
 263     },
 264
 265     initBullet : function()
 266     {
 267         if(Roo.isTouch){
 268             return;
 269         }
 270
 271         var _this = this;
 272
 273         for (var i = 0; i < this.bullets; i++){
 274             var bullet = this.el.select('.bullet-' + i, true).first();
 275
 276             if(!bullet){
 277                 continue;
 278             }
 279
 280             bullet.on('click', (function(e, el, o, ii, t){
 281
 282                 e.preventDefault();
 283
 284                 _this.showPanel(ii);
 285
 286                 if(_this.autoslide && _this.slideFn){
 287                     clearInterval(_this.slideFn);
 288                     _this.slideFn = window.setInterval(function() {
 289                         _this.showPanelNext();
 290                     }, _this.timer);
 291                 }
 292
 293             }).createDelegate(this, [i, bullet], true));
 294         }
 295     },
 296
 297     setActiveBullet : function(i)
 298     {
 299         if(Roo.isTouch){
 300             return;
 301         }
 302
 303         Roo.each(this.el.select('.bullet', true).elements, function(el){
 304             el.removeClass('selected');
 305         });
 306
 307         var bullet = this.el.select('.bullet-' + i, true).first();
 308
 309         if(!bullet){
 310             return;
 311         }
 312
 313         bullet.addClass('selected');
 314     }
 315
 316
 317
 318 });
 319
 320
 321
 322
 323
 324 Roo.apply(Roo.bootstrap.TabGroup, {
 325
 326     groups: {},
 327      /**
 328     * register a Navigation Group
 329     * @param {Roo.bootstrap.NavGroup} the navgroup to add
 330     */
 331     register : function(navgrp)
 332     {
 333         this.groups[navgrp.navId] = navgrp;
 334
 335     },
 336     /**
 337     * fetch a Navigation Group based on the navigation ID
 338     * if one does not exist , it will get created.
 339     * @param {string} the navgroup to add
 340     * @returns {Roo.bootstrap.NavGroup} the navgroup
 341     */
 342     get: function(navId) {
 343         if (typeof(this.groups[navId]) == 'undefined') {
 344             this.register(new Roo.bootstrap.TabGroup({ navId : navId }));
 345         }
 346         return this.groups[navId] ;
 347     }
 348
 349
 350
 351 });
 352
 353