/*
* - LGPL
*
* TabPanel
*
*/
/**
* @class Roo.bootstrap.TabPanel
* @extends Roo.bootstrap.Component
* Bootstrap TabPanel class
* @cfg {Boolean} active panel active
* @cfg {String} html panel content
* @cfg {String} tabId unique tab ID (will be autogenerated if not set. - used to match TabItem to Panel)
* @cfg {String} navId The Roo.bootstrap.NavGroup which triggers show hide ()
* @cfg {String} href click to link..
*
*
* @constructor
* Create a new TabPanel
* @param {Object} config The config object
*/
Roo.bootstrap.TabPanel = function(config){
Roo.bootstrap.TabPanel.superclass.constructor.call(this, config);
this.addEvents({
/**
* @event changed
* Fires when the active status changes
* @param {Roo.bootstrap.TabPanel} this
* @param {Boolean} state the new state
*/
'changed': true,
/**
* @event beforedeactivate
* Fires before a tab is de-activated - can be used to do validation on a form.
* @param {Roo.bootstrap.TabPanel} this
* @return {Boolean} false if there is an error
*/
'beforedeactivate': true
});
this.tabId = this.tabId || Roo.id();
};
Roo.extend(Roo.bootstrap.TabPanel, Roo.bootstrap.Component, {
active: false,
html: false,
tabId: false,
navId : false,
href : '',
getAutoCreate : function(){
var cfg = {
tag: 'div',
// item is needed for carousel - not sure if it has any effect otherwise
cls: 'tab-pane item' + ((this.href.length) ? ' clickable ' : ''),
html: this.html || ''
};
if(this.active){
cfg.cls += ' active';
}
if(this.tabId){
cfg.tabId = this.tabId;
}
return cfg;
},
initEvents: function()
{
var p = this.parent();
this.navId = this.navId || p.navId;
if (typeof(this.navId) != 'undefined') {
// not really needed.. but just in case.. parent should be a NavGroup.
var tg = Roo.bootstrap.TabGroup.get(this.navId);
tg.register(this);
var i = tg.tabs.length - 1;
if(this.active && tg.bullets > 0 && i < tg.bullets){
tg.setActiveBullet(i);
}
}
this.el.on('click', this.onClick, this);
if(Roo.isTouch){
this.el.on("touchstart", this.onTouchStart, this);
this.el.on("touchmove", this.onTouchMove, this);
this.el.on("touchend", this.onTouchEnd, this);
}
},
onRender : function(ct, position)
{
Roo.bootstrap.TabPanel.superclass.onRender.call(this, ct, position);
},
setActive : function(state)
{
Roo.log("panel - set active " + this.tabId + "=" + state);
this.active = state;
if (!state) {
this.el.removeClass('active');
} else if (!this.el.hasClass('active')) {
this.el.addClass('active');
}
this.fireEvent('changed', this, state);
},
onClick : function(e)
{
e.preventDefault();
if(!this.href.length){
return;
}
window.location.href = this.href;
},
startX : 0,
startY : 0,
endX : 0,
endY : 0,
swiping : false,
onTouchStart : function(e)
{
this.swiping = false;
this.startX = e.browserEvent.touches[0].clientX;
this.startY = e.browserEvent.touches[0].clientY;
},
onTouchMove : function(e)
{
this.swiping = true;
this.endX = e.browserEvent.touches[0].clientX;
this.endY = e.browserEvent.touches[0].clientY;
},
onTouchEnd : function(e)
{
if(!this.swiping){
this.onClick(e);
return;
}
var tabGroup = this.parent();
if(this.endX > this.startX){ // swiping right
tabGroup.showPanelPrev();
return;
}
if(this.startX > this.endX){ // swiping left
tabGroup.showPanelNext();
return;
}
}
});