2 * @class Roo.bootstrap.TabGroup
3 * @extends Roo.bootstrap.Column
4 * @children Roo.bootstrap.TabPanel
5 * Bootstrap Column class
6 * @cfg {String} navId the navigation id (for use with navbars) - will be auto generated if it does not exist..
7 * @cfg {Boolean} carousel true to make the group behave like a carousel
8 * @cfg {Boolean} bullets show bullets for the panels
9 * @cfg {Boolean} autoslide (true|false) auto slide .. default false
10 * @cfg {Number} timer auto slide timer .. default 0 millisecond
11 * @cfg {Boolean} showarrow (true|false) show arrow default true
14 * Create a new TabGroup
15 * @param {Object} config The config object
18 Roo.bootstrap.TabGroup = function(config){
19 Roo.bootstrap.TabGroup.superclass.constructor.call(this, config);
21 this.navId = Roo.id();
24 Roo.bootstrap.TabGroup.register(this);
28 Roo.extend(Roo.bootstrap.TabGroup, Roo.bootstrap.Column, {
39 getAutoCreate : function()
41 var cfg = Roo.apply({}, Roo.bootstrap.TabGroup.superclass.getAutoCreate.call(this));
43 cfg.cls += ' tab-content';
46 cfg.cls += ' carousel slide';
49 cls : 'carousel-inner',
53 if(this.bullets && !Roo.isTouch){
56 cls : 'carousel-bullets',
61 bullets.cls = bullets.cls + ' ' + this.bullets_cls;
68 cfg.cn[0].cn.push(bullets);
74 class : 'carousel-arrow',
78 class : 'carousel-prev',
82 class : 'fa fa-chevron-left'
88 class : 'carousel-next',
92 class : 'fa fa-chevron-right'
105 initEvents: function()
107 // if(Roo.isTouch && this.slideOnTouch && !this.showarrow){
108 // this.el.on("touchstart", this.onTouchStart, this);
114 this.slideFn = window.setInterval(function() {
115 _this.showPanelNext();
120 this.el.select('.carousel-prev', true).first().on('click', this.showPanelPrev, this);
121 this.el.select('.carousel-next', true).first().on('click', this.showPanelNext, this);
127 // onTouchStart : function(e, el, o)
129 // if(!this.slideOnTouch || !Roo.isTouch || Roo.get(e.getTarget()).hasClass('roo-button-text')){
133 // this.showPanelNext();
137 getChildContainer : function()
139 return this.carousel ? this.el.select('.carousel-inner', true).first() : this.el;
143 * register a Navigation item
144 * @param {Roo.bootstrap.nav.Item} the navitem to add
146 register : function(item)
148 this.tabs.push( item);
149 item.navId = this.navId; // not really needed..
154 getActivePanel : function()
157 Roo.each(this.tabs, function(t) {
167 getPanelByName : function(n)
170 Roo.each(this.tabs, function(t) {
179 indexOfPanel : function(p)
182 Roo.each(this.tabs, function(t,i) {
183 if (t.tabId == p.tabId) {
192 * show a specific panel
193 * @param {Roo.bootstrap.TabPanel|number|string} panel to change to (use the tabId to specify a specific one)
194 * @return {boolean} false if panel was not shown (invalid entry or beforedeactivate fails.)
196 showPanel : function (pan)
198 if(this.transition || typeof(pan) == 'undefined'){
199 Roo.log("waiting for the transitionend");
203 if (typeof(pan) == 'number') {
204 pan = this.tabs[pan];
207 if (typeof(pan) == 'string') {
208 pan = this.getPanelByName(pan);
211 var cur = this.getActivePanel();
214 Roo.log('pan or acitve pan is undefined');
218 if (pan.tabId == this.getActivePanel().tabId) {
222 if (false === cur.fireEvent('beforedeactivate')) {
226 if(this.bullets > 0 && !Roo.isTouch){
227 this.setActiveBullet(this.indexOfPanel(pan));
230 if (this.carousel && typeof(Roo.get(document.body).dom.style.transition) != 'undefined') {
232 //class="carousel-item carousel-item-next carousel-item-left"
234 this.transition = true;
235 var dir = this.indexOfPanel(pan) > this.indexOfPanel(cur) ? 'next' : 'prev';
236 var lr = dir == 'next' ? 'left' : 'right';
237 pan.el.addClass(dir); // or prev
238 pan.el.addClass('carousel-item-' + dir); // or prev
239 pan.el.dom.offsetWidth; // find the offset with - causing a reflow?
240 cur.el.addClass(lr); // or right
242 cur.el.addClass('carousel-item-' +lr); // or right
243 pan.el.addClass('carousel-item-' +lr);
247 cur.el.on('transitionend', function() {
248 Roo.log("trans end?");
250 pan.el.removeClass([lr,dir, 'carousel-item-' + lr, 'carousel-item-' + dir]);
253 cur.el.removeClass([lr, 'carousel-item-' + lr]);
254 cur.setActive(false);
256 _this.transition = false;
258 }, this, { single: true } );
263 cur.setActive(false);
269 showPanelNext : function()
271 var i = this.indexOfPanel(this.getActivePanel());
273 if (i >= this.tabs.length - 1 && !this.autoslide) {
277 if (i >= this.tabs.length - 1 && this.autoslide) {
281 this.showPanel(this.tabs[i+1]);
284 showPanelPrev : function()
286 var i = this.indexOfPanel(this.getActivePanel());
288 if (i < 1 && !this.autoslide) {
292 if (i < 1 && this.autoslide) {
293 i = this.tabs.length;
296 this.showPanel(this.tabs[i-1]);
300 addBullet: function()
302 if(!this.bullets || Roo.isTouch){
305 var ctr = this.el.select('.carousel-bullets',true).first();
306 var i = this.el.select('.carousel-bullets .bullet',true).getCount() ;
307 var bullet = ctr.createChild({
308 cls : 'bullet bullet-' + i
309 },ctr.dom.lastChild);
314 bullet.on('click', (function(e, el, o, ii, t){
320 if(this.autoslide && this.slideFn){
321 clearInterval(this.slideFn);
322 this.slideFn = window.setInterval(function() {
323 _this.showPanelNext();
327 }).createDelegate(this, [i, bullet], true));
332 setActiveBullet : function(i)
338 Roo.each(this.el.select('.bullet', true).elements, function(el){
339 el.removeClass('selected');
342 var bullet = this.el.select('.bullet-' + i, true).first();
348 bullet.addClass('selected');
359 Roo.apply(Roo.bootstrap.TabGroup, {
363 * register a Navigation Group
364 * @param {Roo.bootstrap.nav.Group} the navgroup to add
366 register : function(navgrp)
368 this.groups[navgrp.navId] = navgrp;
372 * fetch a Navigation Group based on the navigation ID
373 * if one does not exist , it will get created.
374 * @param {string} the navgroup to add
375 * @returns {Roo.bootstrap.nav.Group} the navgroup
377 get: function(navId) {
378 if (typeof(this.groups[navId]) == 'undefined') {
379 this.register(new Roo.bootstrap.TabGroup({ navId : navId }));
381 return this.groups[navId] ;