YAHOO.ext.TabPanel = function(container, config){
this.el = getEl(container, true);
this.tabPosition = 'top';
this.currentTabWidth = 0;
this.minTabWidth = 40;
this.maxTabWidth = 250;
this.preferredTabWidth = 175;
this.resizeTabs = false;
this.monitorResize = true;
if(config){
if(typeof config == 'boolean'){
this.tabPosition = config ? 'bottom' : 'top';
}else{
YAHOO.ext.util.Config.apply(this, config);
}
}
if(this.tabPosition == 'bottom'){
this.bodyEl = getEl(this.createBody(this.el.dom));
this.el.addClass('ytabs-bottom');
}
this.stripWrap = getEl(this.createStrip(this.el.dom), true);
this.stripEl = getEl(this.createStripList(this.stripWrap.dom), true);
this.stripBody = getEl(this.stripWrap.dom.firstChild.firstChild, true);
if(this.tabPosition != 'bottom'){
this.bodyEl = getEl(this.createBody(this.el.dom));
this.el.addClass('ytabs-top');
}
this.items = [];
if(!this.items.indexOf){
this.items.indexOf = function(o){
for(var i = 0, len = this.length; i < len; i++){
if(this[i] == o) return i;
}
return -1;
}
}
this.active = null;
this.onTabChange = new YAHOO.util.CustomEvent('TabItem.onTabChange');
this.activateDelegate = this.activate.createDelegate(this);
this.events = {
'tabchange': this.onTabChange
};
YAHOO.ext.EventManager.onWindowResize(this.onResize, this, true);
this.cpad = this.el.getPadding('lr');
this.hiddenCount = 0;
}
YAHOO.ext.TabPanel.prototype = {
fireEvent : YAHOO.ext.util.Observable.prototype.fireEvent,
on : YAHOO.ext.util.Observable.prototype.on,
addListener : YAHOO.ext.util.Observable.prototype.addListener,
delayedListener : YAHOO.ext.util.Observable.prototype.delayedListener,
removeListener : YAHOO.ext.util.Observable.prototype.removeListener,
purgeListeners : YAHOO.ext.util.Observable.prototype.purgeListeners,
addTab : function(id, text, content, closable){
var item = new YAHOO.ext.TabPanelItem(this, id, text, closable);
this.addTabItem(item);
if(content){
item.setContent(content);
}
return item;
},
getTab : function(id){
return this.items[id];
},
hideTab : function(id){
var t = this.items[id];
if(!t.isHidden()){
t.setHidden(true);
this.hiddenCount++;
this.autoSizeTabs();
}
},
unhideTab : function(id){
var t = this.items[id];
if(t.isHidden()){
t.setHidden(false);
this.hiddenCount--;
this.autoSizeTabs();
}
},
addTabItem : function(item){
this.items[item.id] = item;
this.items.push(item);
if(this.resizeTabs){
item.setWidth(this.currentTabWidth || this.preferredTabWidth)
this.autoSizeTabs();
}else{
item.autoSize();
}
},
removeTab : function(id){
var items = this.items;
var tab = items[id];
if(!tab) return;
var index = items.indexOf(tab);
if(this.active == tab && items.length > 1){
var newTab = this.getNextAvailable(index);
if(newTab)newTab.activate();
}
tab.purgeListeners();
this.stripEl.dom.removeChild(tab.pnode.dom);
if(tab.bodyEl.dom.parentNode == this.bodyEl.dom){ this.bodyEl.dom.removeChild(tab.bodyEl.dom);
}
items.splice(index, 1);
delete this.items[tab.id];
this.autoSizeTabs();
},
getNextAvailable : function(start){
var items = this.items;
var index = start;
while(index < items.length){
var item = items[++index];
if(item && !item.isHidden()){
return item;
}
}
var index = start;
while(index >= 0){
var item = items[--index];
if(item && !item.isHidden()){
return item;
}
}
return null;
},
disableTab : function(id){
var tab = this.items[id];
if(tab && this.active != tab){
tab.disable();
}
},
enableTab : function(id){
var tab = this.items[id];
tab.enable();
},
activate : function(id){
var tab = this.items[id];
if(tab == this.active){
return tab;
}
if(!tab.disabled){
if(this.active){
this.active.hide();
}
this.active = this.items[id];
this.active.show();
this.onTabChange.fireDirect(this, this.active);
}
return tab;
},
getActiveTab : function(){
return this.active;
},
syncHeight : function(targetHeight){
var height = (targetHeight || this.el.getHeight())-this.el.getBorderWidth('tb')-this.el.getPadding('tb');
var bm = this.bodyEl.getMargins();
var newHeight = height-(this.stripWrap.getHeight())-(bm.top+bm.bottom);
this.bodyEl.setHeight(newHeight);
return newHeight;
},
onResize : function(){
if(this.monitorResize){
this.autoSizeTabs();
}
},
beginUpdate : function(){
this.updating = true;
},
endUpdate : function(){
this.updating = false;
this.autoSizeTabs();
},
autoSizeTabs : function(){
var count = this.items.length;
var vcount = count - this.hiddenCount;
if(!this.resizeTabs || count < 1 || vcount < 1 || this.updating) return;
var w = Math.max(this.el.getWidth() - this.cpad, 10);
var availWidth = Math.floor(w / vcount);
var b = this.stripBody;
if(b.getWidth() > w){
var tabs = this.items;
this.setTabWidth(Math.max(availWidth, this.minTabWidth));
if(availWidth < this.minTabWidth){
/*if(!this.sleft){ this.createScrollButtons();
}
this.showScroll();
this.stripClip.setWidth(w - (this.sleft.getWidth()+this.sright.getWidth()));*/
}
}else{
if(this.currentTabWidth < this.preferredTabWidth){
this.setTabWidth(Math.min(availWidth, this.preferredTabWidth));
}
}
},
/**
* Resizes all the tabs to the passed width
* @param {Number} The new width
*/
setTabWidth : function(width){
this.currentTabWidth = width;
for(var i = 0, len = this.items.length; i < len; i++) {
if(!this.items[i].isHidden())this.items[i].setWidth(width);
}
},
/**
* Destroys this TabPanel
* @param {Boolean} removeEl (optional) True to remove the element from the DOM as well
*/
destroy : function(removeEl){
YAHOO.ext.EventManager.removeResizeListener(this.onResize, this);
for(var i = 0, len = this.items.length; i < len; i++){
this.items[i].purgeListeners();
}
if(removeEl === true){
this.el.update('');
this.el.remove();
}
}
};
/**
* @class YAHOO.ext.TabPanelItem
* @extends YAHOO.ext.util.Observable
*/
YAHOO.ext.TabPanelItem = function(tabPanel, id, text, closable){
/**
* The TabPanel this TabPanelItem belongs to
* @type YAHOO.ext.TabPanel
*/
this.tabPanel = tabPanel;
/**
* The id for this TabPanelItem
* @type String
*/
this.id = id;
/** @private */
this.disabled = false;
/** @private */
this.text = text;
/** @private */
this.loaded = false;
this.closable = closable;
/**
* The body element for this TabPanelItem
* @type YAHOO.ext.Element
*/
this.bodyEl = getEl(tabPanel.createItemBody(tabPanel.bodyEl.dom, id));
this.bodyEl.originalDisplay = 'block';
this.bodyEl.setStyle('display', 'none');
this.bodyEl.enableDisplayMode();
var els = tabPanel.createStripElements(tabPanel.stripEl.dom, text, closable);
/** @private */
this.el = getEl(els.el, true);
this.inner = getEl(els.inner, true);
this.textEl = getEl(this.el.dom.firstChild.firstChild.firstChild, true);
this.pnode = getEl(els.el.parentNode, true);
this.el.mon('click', this.onTabClick, this, true);
/** @private */
if(closable){
var c = getEl(els.close, true);
c.dom.title = this.closeText;
c.addClassOnOver('close-over');
c.mon('click', this.closeClick, this, true);
}
// these two are now private and deprecated
this.onActivate = new YAHOO.util.CustomEvent('TabItem.onActivate');
this.onDeactivate = new YAHOO.util.CustomEvent('TabItem.onDeactivate');
this.events = {
/**
* @event activate
* Fires when this tab becomes the active tab
* @param {YAHOO.ext.TabPanel} tabPanel
* @param {YAHOO.ext.TabPanelItem} this
*/
'activate': this.onActivate,
/**
* @event beforeclose
* Fires before this tab is closed. To cancal the close, set cancel to true on e. (e.cancel = true)
* @param {YAHOO.ext.TabPanelItem} this
* @param {Object} e Set cancel to true on this object to cancel the close.
*/
'beforeclose': new YAHOO.util.CustomEvent('beforeclose'),
/**
* @event close
* Fires when this tab is closed
* @param {YAHOO.ext.TabPanelItem} this
*/
'close': new YAHOO.util.CustomEvent('close'),
/**
* @event deactivate
* Fires when this tab is no longer the active tab
* @param {YAHOO.ext.TabPanel} tabPanel
* @param {YAHOO.ext.TabPanelItem} this
*/
'deactivate' : this.onDeactivate
};
this.hidden = false;
};
YAHOO.ext.TabPanelItem.prototype = {
fireEvent : YAHOO.ext.util.Observable.prototype.fireEvent,
on : YAHOO.ext.util.Observable.prototype.on,
addListener : YAHOO.ext.util.Observable.prototype.addListener,
delayedListener : YAHOO.ext.util.Observable.prototype.delayedListener,
removeListener : YAHOO.ext.util.Observable.prototype.removeListener,
purgeListeners : function(){
YAHOO.ext.util.Observable.prototype.purgeListeners.call(this);
this.el.removeAllListeners();
},
/**
* Show this TabPanelItem - this <b>does not</b> deactivate the currently active TabPanelItem.
*/
show : function(){
this.pnode.addClass('on');
this.bodyEl.show();
if(YAHOO.ext.util.Browser.isOpera){
this.tabPanel.stripWrap.repaint();
}
this.onActivate.fireDirect(this.tabPanel, this);
},
setTooltip : function(text){
this.titleEl.dom.title = text;
},
onTabClick : function(e){
e.preventDefault();
this.tabPanel.activate(this.id);
},
getWidth : function(){
return this.inner.getWidth();
},
setWidth : function(width){
var iwidth = width - this.pnode.getPadding("lr");
this.inner.setWidth(iwidth);
this.textEl.setWidth(iwidth-this.inner.getPadding('lr'));
this.pnode.setWidth(width);
},
setHidden : function(hidden){
this.hidden = hidden;
this.pnode.setStyle('display', hidden ? 'none' : 'block');
},
isHidden : function(){
return this.hidden;
},
getText : function(){
return this.text;
},
autoSize : function(){
this.el.beginMeasure();
this.textEl.setWidth(1);
this.setWidth(this.textEl.dom.scrollWidth+this.pnode.getPadding("lr")+this.inner.getPadding('lr'));
this.el.endMeasure();
},
setText : function(text){
this.text = text;
this.textEl.update(text);
this.textEl.dom.title = text;
if(!this.tabPanel.resizeTabs){
this.autoSize();
}
},
activate : function(){
this.tabPanel.activate(this.id);
},
hide : function(){
this.pnode.removeClass('on');
this.bodyEl.hide();
this.onDeactivate.fireDirect(this.tabPanel, this);
},
disable : function(){
if(this.tabPanel.active != this){
this.disabled = true;
this.pnode.addClass('disabled');
}
},
enable : function(){
this.disabled = false;
this.pnode.removeClass('disabled');
},
setContent : function(content, loadScripts){
this.bodyEl.update(content, loadScripts);
},
getUpdateManager : function(){
return this.bodyEl.getUpdateManager();
},
setUrl : function(url, params, loadOnce){
if(this.refreshDelegate){
this.onActivate.unsubscribe(this.refreshDelegate);
}
this.refreshDelegate = this._handleRefresh.createDelegate(this, [url, params, loadOnce]);
this.onActivate.subscribe(this.refreshDelegate);
return this.bodyEl.getUpdateManager();
},
_handleRefresh : function(url, params, loadOnce){
if(!loadOnce || !this.loaded){
var updater = this.bodyEl.getUpdateManager();
updater.update(url, params, this._setLoaded.createDelegate(this));
}
},
_setLoaded : function(){
this.loaded = true;
},
closeClick : function(e){
var cancel = {};
this.fireEvent('beforeclose', this, cancel);
if(!cancel.cancel){
this.tabPanel.removeTab(this.id);
this.fireEvent('close', this);
}
},
closeText : 'Close this tab'
};
YAHOO.ext.TabPanel.prototype.createStrip = function(container){
var strip = document.createElement('div');
strip.className = 'ytab-wrap';
container.appendChild(strip);
return strip;
};
YAHOO.ext.TabPanel.prototype.createStripList = function(strip){
strip.innerHTML = '<div class="ytab-strip-wrap"><table class="ytab-strip" cellspacing="0" cellpadding="0" border="0"><tbody><tr></tr></tbody></table></div>';
return strip.firstChild.firstChild.firstChild.firstChild;
};
YAHOO.ext.TabPanel.prototype.createBody = function(container){
var body = document.createElement('div');
YAHOO.util.Dom.generateId(body, 'tab-body');
YAHOO.util.Dom.addClass(body, 'yui-ext-tabbody');
container.appendChild(body);
return body;
};
YAHOO.ext.TabPanel.prototype.createItemBody = function(bodyEl, id){
var body = YAHOO.util.Dom.get(id);
if(!body){
body = document.createElement('div');
body.id = id;
}
YAHOO.util.Dom.addClass(body, 'yui-ext-tabitembody');
bodyEl.appendChild(body);
return body;
};
YAHOO.ext.TabPanel.prototype.createStripElements = function(stripEl, text, closable){
var td = document.createElement('td');
stripEl.appendChild(td);
if(closable){
td.className = "ytab-closable";
if(!this.closeTpl){
this.closeTpl = new YAHOO.ext.Template(
'<a href="#" class="ytab-right"><span class="ytab-left"><em class="ytab-inner">' +
'<span unselectable="on" title="{text}" class="ytab-text">{text}</span>' +
'<div unselectable="on" class="close-icon"> </div></em></span></a>'
);
}
var el = this.closeTpl.overwrite(td, {'text': text});
var close = el.getElementsByTagName('div')[0];
var inner = el.getElementsByTagName('em')[0];
return {'el': el, 'close': close, 'inner': inner};
} else {
if(!this.tabTpl){
this.tabTpl = new YAHOO.ext.Template(
'<a href="#" class="ytab-right"><span class="ytab-left"><em class="ytab-inner">' +
'<span unselectable="on" title="{text}" class="ytab-text">{text}</span></em></span></a>'
);
}
var el = this.tabTpl.overwrite(td, {'text': text});
var inner = el.getElementsByTagName('em')[0];
return {'el': el, 'inner': inner};
}
};