/**
* @class Roo.TabPanelItem
* @extends Roo.util.Observable
* Represents an individual item (tab plus body) in a TabPanel.
* @param {Roo.TabPanel} tabPanel The {@link Roo.TabPanel} this TabPanelItem belongs to
* @param {String} id The id of this TabPanelItem
* @param {String} text The text for the tab of this TabPanelItem
* @param {Boolean} closable True to allow this TabPanelItem to be closable (defaults to false)
*/
Roo.bootstrap.panel.TabItem = function(config){
/**
* The {@link Roo.TabPanel} this TabPanelItem belongs to
* @type Roo.TabPanel
*/
this.tabPanel = config.panel;
/**
* The id for this TabPanelItem
* @type String
*/
this.id = config.id;
/** @private */
this.disabled = false;
/** @private */
this.text = config.text;
/** @private */
this.loaded = false;
this.closable = config.closable;
/**
* The body element for this TabPanelItem.
* @type Roo.Element
*/
this.bodyEl = Roo.get(this.tabPanel.createItemBody(this.tabPanel.bodyEl.dom, config.id));
this.bodyEl.setVisibilityMode(Roo.Element.VISIBILITY);
this.bodyEl.setStyle("display", "block");
this.bodyEl.setStyle("zoom", "1");
//this.hideAction();
var els = this.tabPanel.createStripElements(this.tabPanel.stripEl.dom, config.text, config.closable, config.tpl);
/** @private */
this.el = Roo.get(els.el);
this.inner = Roo.get(els.inner, true);
this.textEl = Roo.bootstrap.version == 4 ?
this.el : Roo.get(this.el.dom.firstChild, true);
this.pnode = this.linode = Roo.get(els.el.parentNode, true);
this.status_node = Roo.bootstrap.version == 4 ? this.el : this.linode;
// this.el.on("mousedown", this.onTabMouseDown, this);
this.el.on("click", this.onTabClick, this);
/** @private */
if(config.closable){
var c = Roo.get(els.close, true);
c.dom.title = this.closeText;
c.addClassOnOver("close-over");
c.on("click", this.closeClick, this);
}
this.addEvents({
/**
* @event activate
* Fires when this tab becomes the active tab.
* @param {Roo.TabPanel} tabPanel The parent TabPanel
* @param {Roo.TabPanelItem} this
*/
"activate": true,
/**
* @event beforeclose
* Fires before this tab is closed. To cancel the close, set cancel to true on e (e.cancel = true).
* @param {Roo.TabPanelItem} this
* @param {Object} e Set cancel to true on this object to cancel the close.
*/
"beforeclose": true,
/**
* @event close
* Fires when this tab is closed.
* @param {Roo.TabPanelItem} this
*/
"close": true,
/**
* @event deactivate
* Fires when this tab is no longer the active tab.
* @param {Roo.TabPanel} tabPanel The parent TabPanel
* @param {Roo.TabPanelItem} this
*/
"deactivate" : true
});
this.hidden = false;
Roo.bootstrap.panel.TabItem.superclass.constructor.call(this);
};
Roo.extend(Roo.bootstrap.panel.TabItem, Roo.util.Observable,
{
purgeListeners : function(){
Roo.util.Observable.prototype.purgeListeners.call(this);
this.el.removeAllListeners();
},
/**
* Shows this TabPanelItem -- this <b>does not</b> deactivate the currently active TabPanelItem.
*/
show : function(){
this.status_node.addClass("active");
this.showAction();
if(Roo.isOpera){
this.tabPanel.stripWrap.repaint();
}
this.fireEvent("activate", this.tabPanel, this);
},
/**
* Returns true if this tab is the active tab.
* @return {Boolean}
*/
isActive : function(){
return this.tabPanel.getActiveTab() == this;
},
/**
* Hides this TabPanelItem -- if you don't activate another TabPanelItem this could look odd.
*/
hide : function(){
this.status_node.removeClass("active");
this.hideAction();
this.fireEvent("deactivate", this.tabPanel, this);
},
hideAction : function(){
this.bodyEl.hide();
this.bodyEl.setStyle("position", "absolute");
this.bodyEl.setLeft("-20000px");
this.bodyEl.setTop("-20000px");
},
showAction : function(){
this.bodyEl.setStyle("position", "relative");
this.bodyEl.setTop("");
this.bodyEl.setLeft("");
this.bodyEl.show();
},
/**
* Set the tooltip for the tab.
* @param {String} tooltip The tab's tooltip
*/
setTooltip : function(text){
if(Roo.QuickTips && Roo.QuickTips.isEnabled()){
this.textEl.dom.qtip = text;
this.textEl.dom.removeAttribute('title');
}else{
this.textEl.dom.title = text;
}
},
onTabClick : function(e){
e.preventDefault();
this.tabPanel.activate(this.id);
},
onTabMouseDown : function(e){
e.preventDefault();
this.tabPanel.activate(this.id);
},
/*
getWidth : function(){
return this.inner.getWidth();
},
setWidth : function(width){
var iwidth = width - this.linode.getPadding("lr");
this.inner.setWidth(iwidth);
this.textEl.setWidth(iwidth-this.inner.getPadding("lr"));
this.linode.setWidth(width);
},
*/
/**
* Show or hide the tab
* @param {Boolean} hidden True to hide or false to show.
*/
setHidden : function(hidden){
this.hidden = hidden;
this.linode.setStyle("display", hidden ? "none" : "");
},
/**
* Returns true if this tab is "hidden"
* @return {Boolean}
*/
isHidden : function(){
return this.hidden;
},
/**
* Returns the text for this tab
* @return {String}
*/
getText : function(){
return this.text;
},
/*
autoSize : function(){
//this.el.beginMeasure();
this.textEl.setWidth(1);
/*
* #2804 [new] Tabs in Roojs
* increase the width by 2-4 pixels to prevent the ellipssis showing in chrome
*/
//this.setWidth(this.textEl.dom.scrollWidth+this.linode.getPadding("lr")+this.inner.getPadding("lr") + 2);
//this.el.endMeasure();
//},
/**
* Sets the text for the tab (Note: this also sets the tooltip text)
* @param {String} text The tab's text and tooltip
*/
setText : function(text){
this.text = text;
this.textEl.update(text);
this.setTooltip(text);
//if(!this.tabPanel.resizeTabs){
// this.autoSize();
//}
},
/**
* Activates this TabPanelItem -- this <b>does</b> deactivate the currently active TabPanelItem.
*/
activate : function(){
this.tabPanel.activate(this.id);
},
/**
* Disables this TabPanelItem -- this does nothing if this is the active TabPanelItem.
*/
disable : function(){
if(this.tabPanel.active != this){
this.disabled = true;
this.status_node.addClass("disabled");
}
},
/**
* Enables this TabPanelItem if it was previously disabled.
*/
enable : function(){
this.disabled = false;
this.status_node.removeClass("disabled");
},
/**
* Sets the content for this TabPanelItem.
* @param {String} content The content
* @param {Boolean} loadScripts true to look for and load scripts
*/
setContent : function(content, loadScripts){
this.bodyEl.update(content, loadScripts);
},
/**
* Gets the {@link Roo.UpdateManager} for the body of this TabPanelItem. Enables you to perform Ajax updates.
* @return {Roo.UpdateManager} The UpdateManager
*/
getUpdateManager : function(){
return this.bodyEl.getUpdateManager();
},
/**
* Set a URL to be used to load the content for this TabPanelItem.
* @param {String/Function} url The URL to load the content from, or a function to call to get the URL
* @param {String/Object} params (optional) The string params for the update call or an object of the params. See {@link Roo.UpdateManager#update} for more details. (Defaults to null)
* @param {Boolean} loadOnce (optional) Whether to only load the content once. If this is false it makes the Ajax call every time this TabPanelItem is activated. (Defaults to false)
* @return {Roo.UpdateManager} The UpdateManager
*/
setUrl : function(url, params, loadOnce){
if(this.refreshDelegate){
this.un('activate', this.refreshDelegate);
}
this.refreshDelegate = this._handleRefresh.createDelegate(this, [url, params, loadOnce]);
this.on("activate", this.refreshDelegate);
return this.bodyEl.getUpdateManager();
},
/** @private */
_handleRefresh : function(url, params, loadOnce){
if(!loadOnce || !this.loaded){
var updater = this.bodyEl.getUpdateManager();
updater.update(url, params, this._setLoaded.createDelegate(this));
}
},
/**
* Forces a content refresh from the URL specified in the {@link #setUrl} method.
* Will fail silently if the setUrl method has not been called.
* This does not activate the panel, just updates its content.
*/
refresh : function(){
if(this.refreshDelegate){
this.loaded = false;
this.refreshDelegate();
}
},
/** @private */
_setLoaded : function(){
this.loaded = true;
},
/** @private */
closeClick : function(e){
var o = {};
e.stopEvent();
this.fireEvent("beforeclose", this, o);
if(o.cancel !== true){
this.tabPanel.removeTab(this.id);
}
},
/**
* The text displayed in the tooltip for the close icon.
* @type String
*/
closeText : "Close this tab"
});