-/*
- * - LGPL
- *
- * column
- *
- */
-
/**
* @class Roo.bootstrap.TabGroup
* @extends Roo.bootstrap.Column
+ * @children Roo.bootstrap.TabPanel
* Bootstrap Column class
* @cfg {String} navId the navigation id (for use with navbars) - will be auto generated if it does not exist..
* @cfg {Boolean} carousel true to make the group behave like a carousel
- * @cfg {Number} bullets show the panel pointer.. default 0
- * @cfg {Boolena} autoslide (true|false) auto slide .. default false
+ * @cfg {Boolean} bullets show bullets for the panels
+ * @cfg {Boolean} autoslide (true|false) auto slide .. default false
* @cfg {Number} timer auto slide timer .. default 0 millisecond
+ * @cfg {Boolean} showarrow (true|false) show arrow default true
*
* @constructor
* Create a new TabGroup
timer : 0,
autoslide : false,
slideFn : false,
+ slideOnTouch : false,
+ showarrow : true,
getAutoCreate : function()
{
cfg.cls += ' tab-content';
- Roo.log('get auto create...............');
-
- if (this.carousel && !Roo.isTouch) {
+ if (this.carousel) {
cfg.cls += ' carousel slide';
cfg.cn = [{
- cls : 'carousel-inner'
+ cls : 'carousel-inner',
+ cn : []
}];
- if(this.bullets > 0){
+ if(this.bullets && !Roo.isTouch){
var bullets = {
cls : 'carousel-bullets',
cn : []
};
-
+
if(this.bullets_cls){
bullets.cls = bullets.cls + ' ' + this.bullets_cls;
}
- for (var i = 0; i < this.bullets; i++){
- bullets.cn.push({
- cls : 'bullet bullet-' + i
- });
- }
-
bullets.cn.push({
cls : 'clear'
});
- cfg.cn[0].cn = bullets;
+ cfg.cn[0].cn.push(bullets);
}
+
+ if(this.showarrow){
+ cfg.cn[0].cn.push({
+ tag : 'div',
+ class : 'carousel-arrow',
+ cn : [
+ {
+ tag : 'div',
+ class : 'carousel-prev',
+ cn : [
+ {
+ tag : 'i',
+ class : 'fa fa-chevron-left'
+ }
+ ]
+ },
+ {
+ tag : 'div',
+ class : 'carousel-next',
+ cn : [
+ {
+ tag : 'i',
+ class : 'fa fa-chevron-right'
+ }
+ ]
+ }
+ ]
+ });
+ }
+
}
return cfg;
initEvents: function()
{
- Roo.log('-------- init events on tab group ---------');
-
- var _this = this;
-
- if(this.bullets > 0 && !Roo.isTouch){
- this.initBullets();
- }
+// if(Roo.isTouch && this.slideOnTouch && !this.showarrow){
+// this.el.on("touchstart", this.onTouchStart, this);
+// }
if(this.autoslide){
+ var _this = this;
+
this.slideFn = window.setInterval(function() {
_this.showPanelNext();
}, this.timer);
}
+ if(this.showarrow){
+ this.el.select('.carousel-prev', true).first().on('click', this.showPanelPrev, this);
+ this.el.select('.carousel-next', true).first().on('click', this.showPanelNext, this);
+ }
+
+
},
+// onTouchStart : function(e, el, o)
+// {
+// if(!this.slideOnTouch || !Roo.isTouch || Roo.get(e.getTarget()).hasClass('roo-button-text')){
+// return;
+// }
+//
+// this.showPanelNext();
+// },
+
+
getChildContainer : function()
{
return this.carousel ? this.el.select('.carousel-inner', true).first() : this.el;
{
this.tabs.push( item);
item.navId = this.navId; // not really needed..
+ this.addBullet();
},
*/
showPanel : function (pan)
{
- if(this.transition){
+ if(this.transition || typeof(pan) == 'undefined'){
Roo.log("waiting for the transitionend");
- return;
+ return false;
}
if (typeof(pan) == 'number') {
pan = this.tabs[pan];
}
+
if (typeof(pan) == 'string') {
pan = this.getPanelByName(pan);
}
+
+ var cur = this.getActivePanel();
+
+ if(!pan || !cur){
+ Roo.log('pan or acitve pan is undefined');
+ return false;
+ }
+
if (pan.tabId == this.getActivePanel().tabId) {
return true;
}
- var cur = this.getActivePanel();
if (false === cur.fireEvent('beforedeactivate')) {
return false;
if (this.carousel && typeof(Roo.get(document.body).dom.style.transition) != 'undefined') {
+ //class="carousel-item carousel-item-next carousel-item-left"
+
this.transition = true;
var dir = this.indexOfPanel(pan) > this.indexOfPanel(cur) ? 'next' : 'prev';
var lr = dir == 'next' ? 'left' : 'right';
pan.el.addClass(dir); // or prev
+ pan.el.addClass('carousel-item-' + dir); // or prev
pan.el.dom.offsetWidth; // find the offset with - causing a reflow?
cur.el.addClass(lr); // or right
pan.el.addClass(lr);
+ cur.el.addClass('carousel-item-' +lr); // or right
+ pan.el.addClass('carousel-item-' +lr);
+
var _this = this;
cur.el.on('transitionend', function() {
Roo.log("trans end?");
- pan.el.removeClass([lr,dir]);
+ pan.el.removeClass([lr,dir, 'carousel-item-' + lr, 'carousel-item-' + dir]);
pan.setActive(true);
- cur.el.removeClass([lr]);
+ cur.el.removeClass([lr, 'carousel-item-' + lr]);
cur.setActive(false);
_this.transition = false;
this.showPanel(this.tabs[i-1]);
},
- initBullet : function()
+
+ addBullet: function()
{
- for (var i = 0; i < this.bullets; i++){
- var bullet = this.el.select('.bullet-' + i, true).first();
-
- if(!bullet){
- continue;
- }
-
- bullet.on('click', (function(e, el, o, ii, t){
+ if(!this.bullets || Roo.isTouch){
+ return;
+ }
+ var ctr = this.el.select('.carousel-bullets',true).first();
+ var i = this.el.select('.carousel-bullets .bullet',true).getCount() ;
+ var bullet = ctr.createChild({
+ cls : 'bullet bullet-' + i
+ },ctr.dom.lastChild);
+
+
+ var _this = this;
+
+ bullet.on('click', (function(e, el, o, ii, t){
- e.preventDefault();
+ e.preventDefault();
- _this.showPanel(ii);
+ this.showPanel(ii);
- if(_this.autoslide && _this.slideFn){
- clearInterval(_this.slideFn);
- _this.slideFn = window.setInterval(function() {
- _this.showPanelNext();
- }, _this.timer);
- }
+ if(this.autoslide && this.slideFn){
+ clearInterval(this.slideFn);
+ this.slideFn = window.setInterval(function() {
+ _this.showPanelNext();
+ }, this.timer);
+ }
- }).createDelegate(this, [i, bullet], true));
- }
+ }).createDelegate(this, [i, bullet], true));
+
+
},
-
+
setActiveBullet : function(i)
{
if(Roo.isTouch){
projects / roojs1 / blobdiff