1268 lines
36 KiB
JavaScript
1268 lines
36 KiB
JavaScript
/*
|
|
Product Name: dhtmlxSuite
|
|
Version: 5.2.0
|
|
Edition: Professional
|
|
License: content of this file is covered by DHTMLX Commercial or Enterprise license. Usage without proper license is prohibited. To obtain it contact sales@dhtmlx.com
|
|
Copyright UAB Dinamenta http://www.dhtmlx.com
|
|
*/
|
|
|
|
function dhtmlXTabBar(conf, mode) { // skin? data?
|
|
|
|
// console.log("context menu for tabs?");
|
|
// console.log("first tab open event?");
|
|
|
|
var that = this;
|
|
|
|
this.conf = {
|
|
skin: (window.dhx4.skin||(typeof(dhtmlx)!="undefined"?dhtmlx.skin:null)||window.dhx4.skinDetect("dhxtabbar")||"material"),
|
|
css: "dhxtabbar", // css prefix for topcell mtb
|
|
lastActive: null,
|
|
closeButton: false,
|
|
align: "left", // tabs aligned to right side, inversed, default "right" align
|
|
tabsMode: (mode=="bottom"?"bottom":"top"), // top/bottom
|
|
tabsContCss: "", // fix for Safari 5.1.7 desktop or Safari iOS 7.x mobile
|
|
contZone: true,
|
|
transSpeed: "0.15s",
|
|
arwMode: "always", // always (def), auto
|
|
tabsOfs: 1, // dhx_skyblue and dhx_terrace have margin-left:-1px for tabs, should be included
|
|
tabsTop: 0, // tabs top position, used in attachObject to hide border
|
|
url_demand: false,
|
|
urls: {},
|
|
autoload: {},
|
|
tabsWidth: {dhx_terrace: [44,14], dhx_web: [35,9], dhx_skyblue: [35,9], material: [44,14]} // extra width for tabs/tab_with_close_icon, for tab width detect, since 4.2.1
|
|
};
|
|
|
|
if (this.conf.skin == "material") this.conf.arwMode = "auto";
|
|
|
|
// safari fix
|
|
var a = navigator.userAgent;
|
|
if (a.indexOf("Safari") >= 0 && (a.indexOf("5.1.7") >= 0 || (a.match(/7[\.\d]* mobile/gi) != null && a.match(/AppleWebKit/gi) != null))) {
|
|
this.conf.tabsContCss = " safari_517_fix";
|
|
}
|
|
|
|
var base;
|
|
|
|
// check if api init
|
|
if (conf != null && typeof(conf) == "object" && typeof(conf.tagName) == "undefined") {
|
|
base = conf.parent;
|
|
if (typeof(conf.skin) != "undefined") this.conf.skin = conf.skin;
|
|
if (typeof(conf.mode) != "undefined") this.conf.tabsMode = (conf.mode=="bottom"?"bottom":"top");
|
|
if (typeof(conf.align) != "undefined") this.conf.align = (conf.align=="right"?"right":"left");
|
|
if (typeof(conf.close_button) != "undefined") this.conf.closeButton = window.dhx4.s2b(conf.close_button);
|
|
if (typeof(conf.content_zone) != "undefined") this.conf.contZone = window.dhx4.s2b(conf.content_zone);
|
|
if (typeof(conf.xml) != "undefined") this.conf.autoload.xml = conf.xml;
|
|
if (typeof(conf.json) != "undefined") this.conf.autoload.xml = conf.json; // new in 4.0
|
|
if (typeof(conf.tabs) != "undefined") this.conf.autoload.tabs = conf.tabs;
|
|
if (typeof(conf.onload) != "undefined") this.conf.autoload.onload = conf.onload; // new in 4.0
|
|
if (typeof(conf.arrows_mode) != "undefined") this.conf.autoload.arrows_mode = conf.arrows_mode; // new in 4.1.2
|
|
// deprecated from 4.0
|
|
// conf { height, offset, margin, image_path, href_mode, scroll, forced, size_by_content, auto_size }
|
|
} else {
|
|
base = conf;
|
|
}
|
|
|
|
// init top container
|
|
window.dhtmlXCellTop.apply(this, [base, conf.offsets]);
|
|
|
|
// tabsTop override
|
|
if (this.base._ofs != null && this.base._ofs.t != null) this.conf.tabsTop = this.base._ofs.t;
|
|
|
|
this.tabsMode = document.createElement("DIV");
|
|
this.tabsMode.className = "dhxtabbar_tabs_"+this.conf.tabsMode;
|
|
this.cont.appendChild(this.tabsMode);
|
|
|
|
this.tabsArea = document.createElement("DIV");
|
|
this.tabsArea.className = "dhxtabbar_tabs dhxtabbar_tabs_"+this.conf.tabsMode;
|
|
this.tabsArea.innerHTML = "<div class='dhxtabbar_tabs_ar_left'><div class='dhxtabbar_arrow_img'></div></div>"+
|
|
"<div class='dhxtabbar_tabs_base'>"+
|
|
"<div class='dhxtabbar_tabs_cont_"+this.conf.align+this.conf.tabsContCss+"'>"+
|
|
"<div class='dhxtabbar_tabs_line'></div>"+
|
|
"</div>"+
|
|
"</div>"+
|
|
"<div class='dhxtabbar_tabs_ar_right'><div class='dhxtabbar_arrow_img'></div></div>";
|
|
|
|
this.tabsArea.style.top = (this.conf.tabsMode=="top"?this.conf.tabsTop+"px":"auto");
|
|
this.tabsMode.appendChild(this.tabsArea);
|
|
|
|
// area to move tabs
|
|
this.tabsArea.childNodes[1].childNodes[0].style[this.conf.align] = "0px";
|
|
|
|
this.tabsArea.childNodes[0].onclick = function() {
|
|
if (that.conf.align == "left") {
|
|
that._moveTabs(1);
|
|
} else {
|
|
that._moveTabs(-1);
|
|
}
|
|
}
|
|
this.tabsArea.childNodes[2].onclick = function() {
|
|
if (that.conf.align == "left") {
|
|
that._moveTabs(-1);
|
|
} else {
|
|
that._moveTabs(1);
|
|
}
|
|
}
|
|
|
|
this._onTabsAreaClick = function(id) {
|
|
return this._callMainEvent("onTabClose",[id]);
|
|
}
|
|
|
|
this.tabsArea.onclick = function(e) {
|
|
e = e||event;
|
|
var t = (e.target||e.srcElement);
|
|
while (t != null) {
|
|
if (typeof(t._tabCloseId) != "undefined") {
|
|
if (that._onTabsAreaClick(t._tabCloseId) !== true) return;
|
|
that.t[t._tabCloseId].conf.remove = true;
|
|
that._hideTab(t._tabCloseId);
|
|
t = null;
|
|
} else if (typeof(t._tabId) != "undefined") {
|
|
that._doOnClick(t._tabId);
|
|
t = null;
|
|
}
|
|
if (t != null) {
|
|
t = t.parentNode;
|
|
if (t == this) t = null;
|
|
}
|
|
}
|
|
}
|
|
|
|
this.tabsArea.onselectstart = function(e) {
|
|
e = e||event;
|
|
if (e.preventDefault) e.preventDefault(); else e.returnValue = false;
|
|
}
|
|
|
|
this._doOnClick = function(id) {
|
|
// onBeforeEvent here
|
|
this.callEvent("onTabClick", [id, this.conf.lastActive]);
|
|
if (this.t[id].conf.enabled) this._setTabActive(id);
|
|
}
|
|
|
|
this.t = {};
|
|
|
|
this.addTab = function(id, text, width, position, active, close) {
|
|
|
|
// close = show close button, false by default
|
|
// true - show_closeButton
|
|
// false - do not show (ignoring enableTabCloseButton)
|
|
// not set - depending on enableTabCloseButton
|
|
close = (typeof(close)=="undefined"?(this.conf.closeButton==true):window.dhx4.s2b(close));
|
|
active = window.dhx4.s2b(active);
|
|
|
|
var tab = document.createElement("DIV");
|
|
tab.className = "dhxtabbar_tab";
|
|
tab.innerHTML = "<div class='dhxtabbar_tab_text"+(close?" dhxtabbar_tab_text_close":"")+"'>"+text+"</div>"+
|
|
(close?"<div class='dhxtabbar_tab_close'></div>":"");
|
|
|
|
tab._tabId = id;
|
|
if (close) tab.childNodes[1]._tabCloseId = id; // close button
|
|
|
|
var p = this.tabsArea.childNodes[1].firstChild;
|
|
|
|
if (position != null && position+1 > 0 && position+1 < p.childNodes.length) { // 1st item - line
|
|
p.insertBefore(tab, p.childNodes[position+1]);
|
|
} else {
|
|
p.appendChild(tab);
|
|
}
|
|
|
|
|
|
// width
|
|
var autowidth = false;
|
|
if (typeof(width) == "undefined" || width == null || width == "*") {
|
|
width = this._getLabelWidth(text, close);
|
|
autowidth = true;
|
|
} else {
|
|
width = parseInt(width);
|
|
}
|
|
|
|
tab.style.width = width+"px";
|
|
|
|
var cell = new dhtmlXTabBarCell(id, this);
|
|
this.tabsMode.appendChild(cell.cell);
|
|
|
|
this.t[id] = {
|
|
tab: tab,
|
|
cell: cell,
|
|
conf: {
|
|
text: text,
|
|
visible: true,
|
|
active: false,
|
|
enabled: true,
|
|
close: close,
|
|
width: width,
|
|
autowidth: autowidth
|
|
}
|
|
};
|
|
|
|
p = cell = null;
|
|
|
|
if (active) {
|
|
this._setTabActive(id);
|
|
} else {
|
|
this._adjustCell(id);
|
|
}
|
|
|
|
if (this.conf.initSeq != true && this.conf.arwMode == "auto") this.setSizes();
|
|
}
|
|
|
|
this.setSizes = function() {
|
|
|
|
// celltop
|
|
this._adjustCont();
|
|
|
|
if (this.conf.tabsAreaOfs == null) {
|
|
this.tabsArea.style.width = this.cont.offsetWidth+"px";
|
|
this.conf.tabsAreaOfs = parseInt(this.tabsArea.style.width)-this.tabsArea.offsetWidth;
|
|
}
|
|
this.tabsArea.style.width = this.cont.offsetWidth+this.conf.tabsAreaOfs+"px";
|
|
|
|
this._adjustCell(this.conf.lastActive);
|
|
this._adjustTabs(true);
|
|
|
|
this.callEvent("_onSetSizes", []);
|
|
|
|
}
|
|
|
|
this._adjustCell = function(id) {
|
|
|
|
// adjust specified cell or active
|
|
|
|
if (!this.conf.contZone || id == null) return;
|
|
|
|
var y = (this.conf.tabsMode=="top"?this.tabsArea.offsetHeight:0)+this.conf.tabsTop;
|
|
var h = this.cont.offsetHeight-this.tabsArea.offsetHeight-this.conf.tabsTop;
|
|
|
|
// if layout attached - move a bit
|
|
var t = this.t[id].cell.dataType;
|
|
if (this.conf.skin == "dhx_skyblue" && (t == "layout" || t == "tabbar" || t == "acc")) {
|
|
if (this.conf.tabsMode == "top") y = y - 1; // only for top
|
|
h = h + 1; // always
|
|
}
|
|
|
|
if (id != this.conf.lastActive) {
|
|
y = -5000;
|
|
this.t[id].cell.cell.style.visibility = "hidden";
|
|
this.t[id].cell.cell.style.zIndex = 0;
|
|
}
|
|
this.t[id].cell._setSize(0, y, this.cont.offsetWidth, h);
|
|
|
|
}
|
|
|
|
this.setTabsMode = function(mode) {
|
|
// new
|
|
this.conf.tabsMode = (mode=="bottom"?"bottom":"top");
|
|
this.tabsMode.className = "dhxtabbar_tabs_"+this.conf.tabsMode;
|
|
this.tabsArea.className = "dhxtabbar_tabs dhxtabbar_tabs_"+this.conf.tabsMode;
|
|
this.tabsArea.style.top = (this.conf.tabsMode=="top"?this.conf.tabsTop+"px":"auto");
|
|
this.setSizes();
|
|
}
|
|
|
|
// generate tab css depending on actv/en state
|
|
this._tabCss = function(id, hidden) {
|
|
var a = this.t[id].conf.active;
|
|
var d = !this.t[id].conf.enabled;
|
|
var h = !this.t[id].conf.visible;
|
|
return "dhxtabbar_tab"+(h?" dhxtabbar_tab_hidden":(a||d?" dhxtabbar_tab"+(a?"_actv":"")+(d?"_dis":""):""));
|
|
}
|
|
|
|
// calculate tab width depending on text and close button
|
|
this._getLabelWidth = function(text, close) {
|
|
|
|
if (this.tabsTextTest == null) {
|
|
this.tabsTextTest = document.createElement("SPAN");
|
|
this.tabsTextTest.className = "dhxtabbar_tabs_text_test_"+this.conf.skin;
|
|
}
|
|
|
|
document.body.appendChild(this.tabsTextTest);
|
|
this.tabsTextTest.innerHTML = text;
|
|
var w = this.tabsTextTest.offsetWidth;
|
|
if (window.dhx4.isIE && w == 0) w = this.tabsTextTest.offsetWidth; // strange IE bug
|
|
|
|
// some extra width
|
|
w += this.conf.tabsWidth[this.conf.skin][0];
|
|
if (close == true) w += this.conf.tabsWidth[this.conf.skin][1];
|
|
|
|
//
|
|
document.body.removeChild(this.tabsTextTest);
|
|
return w;
|
|
}
|
|
|
|
// if tabs overflow left/right side, adjust active tab position
|
|
this._adjustTabs = function(fixTabsArea) {
|
|
|
|
if (this._checkArrows() == true || fixTabsArea == true) {
|
|
this.tabsArea.childNodes[1].style.left = this.tabsArea.childNodes[0].offsetWidth-1+"px";
|
|
this.tabsArea.childNodes[1].style.width = Math.max(0, this.tabsArea.clientWidth-this.tabsArea.childNodes[0].offsetWidth-this.tabsArea.childNodes[2].offsetWidth)+this.conf.tabsOfs*2+"px"; // minus 2 arrows
|
|
}
|
|
|
|
var p = this.tabsArea.childNodes[1];
|
|
if (p.offsetWidth < 5) {
|
|
p = null;
|
|
return;
|
|
}
|
|
|
|
var x = parseInt(p.childNodes[0].style[this.conf.align]);
|
|
|
|
var k = null;
|
|
for (var q=0; q<p.childNodes[0].childNodes.length; q++) {
|
|
var id = p.childNodes[0].childNodes[q]._tabId;
|
|
if (id != null && this.t[id].conf.visible) {
|
|
var w = this.t[id].tab.offsetWidth-this.conf.tabsOfs;
|
|
if (this.t[id].conf.active) {
|
|
if (x < 0 || p.offsetWidth<w) {
|
|
k = {d: 1, id: id}; // tab hidden on left side, move to right OR tab width less than space available
|
|
} else if (x+w > p.offsetWidth) {
|
|
k = {d:-1, id: id}; // overflow on right
|
|
}
|
|
}
|
|
x += w;
|
|
}
|
|
}
|
|
|
|
if (k != null) {
|
|
// move selected tab to visible space
|
|
this._moveTabs(k.d, k.id);
|
|
} else if (p.offsetWidth > x+1) {
|
|
// check space on right side
|
|
p.childNodes[0].style[this.conf.align] = Math.min(0, parseInt(p.childNodes[0].style[this.conf.align])+(p.offsetWidth-x))+"px";
|
|
}
|
|
|
|
p = k = null;
|
|
|
|
}
|
|
|
|
// tabs scrolling
|
|
this._moveTabs = function(d, tabId) {
|
|
|
|
// get all visible tabs
|
|
var p = this.tabsArea.childNodes[1].childNodes[0];
|
|
var i = 0;
|
|
var tabs = [];
|
|
var tabInd = null; // index of tabId
|
|
for (var q=0; q<p.childNodes.length; q++) {
|
|
var id = p.childNodes[q]._tabId;
|
|
if (id != null && this.t[id].conf.visible) {
|
|
tabs.push({id: id, w: this.t[id].tab.offsetWidth-this.conf.tabsOfs, ind: i});
|
|
if (id == tabId) tabInd = i;
|
|
i++;
|
|
}
|
|
}
|
|
|
|
// find 1st/last full visible tabs or null
|
|
var x = parseInt(this.tabsArea.childNodes[1].childNodes[0].style[this.conf.align]);
|
|
var totalSpace = this.tabsArea.clientWidth-this.tabsArea.childNodes[0].offsetWidth-this.tabsArea.childNodes[2].offsetWidth+this.conf.tabsOfs;
|
|
|
|
var f = null;
|
|
var l = null;
|
|
|
|
for (var q=0; q<tabs.length; q++) {
|
|
tabs[q].x = x;
|
|
if (f == null && x >= 0 && x+tabs[q].w > 0) f = tabs[q];
|
|
if (x < totalSpace && x+tabs[q].w <= totalSpace) l = tabs[q];
|
|
x += tabs[q].w;
|
|
}
|
|
|
|
if (tabInd != null) {
|
|
|
|
var t = tabs[tabInd];
|
|
|
|
} else {
|
|
|
|
var t = null;
|
|
if (d > 0) {
|
|
// left arrow clicked
|
|
// find prev tab (for 1st visible) or last (if 1st is null)
|
|
if (f == null) {
|
|
if (tabs.length > 0) t = tabs[tabs.length-1];
|
|
} else {
|
|
if (f.ind > 0 && tabs.length >= f.ind) t = tabs[f.ind-1];
|
|
}
|
|
|
|
} else {
|
|
// right arrow clicked
|
|
// find next tab (for last visible) or first (if last-visible is null)
|
|
if (l == null) {
|
|
if (tabs.length > 0) t = tabs[0];
|
|
} else {
|
|
if (tabs.length > l.ind) t = tabs[l.ind+1];
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
// move prev/last tab to 1st position
|
|
if (t != null) {
|
|
if (d > 0) {
|
|
if (x < totalSpace) {
|
|
// some tabs are on left and some space left on right
|
|
p.style[this.conf.align] = Math.min(0, parseInt(p.style[this.conf.align])+(totalSpace-x))+"px";
|
|
} else {
|
|
// show tab on left
|
|
p.style[this.conf.align] = parseInt(p.style[this.conf.align])-t.x+"px";
|
|
}
|
|
} else {
|
|
p.style[this.conf.align] = parseInt(p.style[this.conf.align])-t.x+totalSpace-t.w+"px";
|
|
}
|
|
}
|
|
|
|
p = t = tabs = null;
|
|
|
|
}
|
|
|
|
// return next visible related to tab-id
|
|
this._getNextVisible = function(id, getFirst) {
|
|
return this._getNearVisible(id, getFirst, "next");
|
|
}
|
|
|
|
// return prev visible related to tab-id
|
|
this._getPrevVisible = function(id, getFirst) {
|
|
return this._getNearVisible(id, getFirst, "previous");
|
|
}
|
|
|
|
// get first visible
|
|
this._getFirstVisible = function() {
|
|
return this._getNearVisible(null, false, "first");
|
|
}
|
|
|
|
this._getNearVisible = function(id, getFirst, mode) {
|
|
|
|
if (mode == "first") {
|
|
var node = this.tabsArea.childNodes[1].childNodes[0].childNodes[1]; // firstChild is line
|
|
mode = "next";
|
|
} else {
|
|
if (id == null || this.t[id] == null) return (getFirst?this._getFirstVisible():null);
|
|
var node = this.t[id].tab[mode+"Sibling"];
|
|
}
|
|
|
|
var tabId = null;
|
|
|
|
while (node != null && tabId == null) {
|
|
var k = node._tabId;
|
|
if (k != null && tabId == null && this.t[k].conf.visible) {
|
|
tabId = k;
|
|
} else {
|
|
node = node[mode+"Sibling"];
|
|
}
|
|
}
|
|
|
|
node = null;
|
|
|
|
return tabId;
|
|
}
|
|
|
|
|
|
|
|
this._showTab = function(id, activate) { // activate true/false
|
|
|
|
if (this.t[id] == null) return;
|
|
|
|
if (this.t[id].conf.transActv == true) {
|
|
if (this.t[id].conf.transMode == "show") return;
|
|
} else {
|
|
if (this.t[id].conf.visible == true) return;
|
|
}
|
|
|
|
// get next tab
|
|
// move
|
|
// show prev+set marg to -1
|
|
// get next/prev tabs
|
|
|
|
if (this.conf.transProp !== false) {
|
|
|
|
// slide effect
|
|
this.t[id].conf.transActv = true;
|
|
this.t[id].conf.transMode = "show";
|
|
this.t[id].conf.transProp = this.conf.transProp;
|
|
this.t[id].conf.transActvId = (activate?id:null);
|
|
|
|
if (!this.t[id].conf.transEv) {
|
|
this.t[id].tab.addEventListener(this.conf.transEv, this._doOnTrEnd, false);
|
|
this.t[id].conf.transEv = true;
|
|
}
|
|
|
|
this.t[id].conf.visible = true;
|
|
this.t[id].tab.className = this._tabCss(id);
|
|
|
|
this.t[id].tab.style[this.conf.transProp] = this.conf.transValueWidth;
|
|
this.t[id].tab.style.width = this.t[id].conf.width+"px";
|
|
|
|
if (this.t[id].tab.clientWidth >= this.t[id].conf.width) {
|
|
this.t[id].tab.style.visibility = "visible";
|
|
}
|
|
|
|
} else {
|
|
this.t[id].conf.visible = true;
|
|
this.t[id].tab.style.display = "";
|
|
|
|
if (activate || this.t[id].conf.active) {
|
|
this.t[id].conf.active = false;
|
|
this._setTabActive(id);
|
|
} else {
|
|
this._adjustTabs();
|
|
}
|
|
}
|
|
}
|
|
|
|
this._hideTab = function(id, activateId) { // activateId - tab to activate
|
|
|
|
// activateId
|
|
// if set to true, selection jump from current tab to nearest one (old logic)
|
|
// activateId can also be id of any other tab (new logic)
|
|
|
|
if (this.t[id] == null) return;
|
|
|
|
if (this.t[id].conf.transActv == true) {
|
|
if (this.t[id].conf.transMode == "hide") return;
|
|
} else {
|
|
if (this.t[id].conf.visible != true) return;
|
|
}
|
|
|
|
// if tab was active clear flags/css
|
|
var lastActive = false;
|
|
if (this.conf.lastActive == id) {
|
|
this.conf.lastActive = null;
|
|
this.t[id].conf.active = false;
|
|
this.t[id].tab.className = this._tabCss(id);
|
|
lastActive = true;
|
|
}
|
|
|
|
// get next/prev tabs
|
|
var prev = this._getPrevVisible(id);
|
|
var next = this._getNextVisible(id);
|
|
|
|
var actvId = (lastActive == true && activateId !== false ? (activateId==true?null:activateId)||next||prev : null);
|
|
|
|
// hide and move next tab to left if any
|
|
if (this.conf.transProp !== false) {
|
|
|
|
this.t[id].conf.transActv = true;
|
|
this.t[id].conf.transMode = "hide";
|
|
this.t[id].conf.transProp = this.conf.transProp;
|
|
this.t[id].conf.transActvId = actvId;
|
|
this.t[id].conf.visible = false;
|
|
|
|
if (!this.t[id].conf.transEv) {
|
|
this.t[id].tab.addEventListener(this.conf.transEv, this._doOnTrEnd, false);
|
|
this.t[id].conf.transEv = true;
|
|
}
|
|
|
|
this.t[id].tab.style.visibility = "hidden";
|
|
this.t[id].tab.className = that._tabCss(id);
|
|
this.t[id].tab.style[this.conf.transProp] = this.conf.transValueWidth;
|
|
this.t[id].tab.style.width = "0px";
|
|
|
|
} else {
|
|
|
|
this.t[id].tab.style.display = "none";
|
|
this.t[id].conf.visible = false;
|
|
if (this.conf.contZone) {
|
|
this.t[id].cell.cell.style.visibility = "hidden";
|
|
this.t[id].cell.cell.style.top = "-5000px"; // "vis:hid" > "vis:vis" http://www.w3.org/TR/CSS2/visufx.html#visibility
|
|
}
|
|
|
|
if (actvId != null) this._setTabActive(actvId);
|
|
this._adjustTabs();
|
|
|
|
if (this.t[id].conf.remove) this._removeTab(id);
|
|
}
|
|
|
|
}
|
|
|
|
this._isTabVisible = function(id) {
|
|
return (this.t[id].conf.visible==true);
|
|
}
|
|
|
|
this._doOnTrEnd = function() {
|
|
|
|
var id = this._tabId; // this points to tab
|
|
|
|
if (that.t[id] == null) return;
|
|
|
|
var t = that.t[id];
|
|
var actvId = t.conf.transActvId;
|
|
|
|
if (t.conf.transMode == "hide") {
|
|
|
|
// remove if any
|
|
if (t.conf.remove) {
|
|
that._removeTab(id);
|
|
} else {
|
|
|
|
t.tab.style[t.conf.transProp] = "";
|
|
|
|
if (that.conf.contZone) {
|
|
t.cell.cell.style.visibility = "hidden";
|
|
t.cell.cell.style.top = "-5000px";
|
|
}
|
|
|
|
t.conf.transActv = false;
|
|
|
|
}
|
|
|
|
} else if (t.conf.transMode == "show") {
|
|
|
|
t.tab.style[t.conf.transProp] = "";
|
|
t.tab.style.visibility = "visible";
|
|
|
|
t.conf.transMode = null;
|
|
t.conf.transActv = false;
|
|
|
|
}
|
|
|
|
if (actvId != null) {
|
|
that._setTabActive(actvId);
|
|
} else {
|
|
that._adjustTabs();
|
|
}
|
|
|
|
t = null;
|
|
|
|
}
|
|
|
|
|
|
this.enableTabCloseButton = function(mode) {
|
|
this.conf.closeButton = window.dhx4.s2b(mode);
|
|
}
|
|
|
|
this.unload = function() {
|
|
|
|
this.conf.unloading = true;
|
|
|
|
this.clearAll(); // remove all tabs
|
|
this.t = null;
|
|
|
|
if (this.tabsTextTest != null) {
|
|
if (this.tabsTextTest.parentNode) this.tabsTextTest.parentNode.removeChild(this.tabsTextTest);
|
|
this.tabsTextTest = null;
|
|
}
|
|
|
|
// clear data loading
|
|
window.dhx4._enableDataLoading(this, null, null, null, "clear");
|
|
|
|
this.tabsArea.childNodes[0].onclick = null;
|
|
this.tabsArea.childNodes[2].onclick = null;
|
|
this.tabsArea.onclick = null;
|
|
this.tabsArea.onselectstart = null;
|
|
this.tabsArea.parentNode.removeChild(this.tabsArea);
|
|
this.tabsArea = null;
|
|
|
|
this.tabsMode.parentNode.removeChild(this.tabsMode);
|
|
this.tabsMode = null;
|
|
|
|
this._unloadTop();
|
|
|
|
// clear events
|
|
window.dhx4._eventable(this, "clear");
|
|
|
|
for (var a in this) this[a] = null;
|
|
that = null;
|
|
}
|
|
|
|
this.enableContentZone = function(mode) {
|
|
// enables/disables the content zone (enabled by default)
|
|
// call before tabs adding
|
|
this.conf.contZone = (mode==true);
|
|
}
|
|
|
|
this.setSkin = function(skin) {
|
|
|
|
// sets style used for tabbar
|
|
this._setBaseSkin(skin);
|
|
this.conf.skin = skin;
|
|
|
|
if (this.tabsTextTest != null) this.tabsTextTest.className = "dhxtabbar_tabs_text_test_"+this.conf.skin;
|
|
|
|
for (var a in this.t) {
|
|
|
|
// reset autosaved data for padding/border
|
|
this.t[a].cell._resetSizeState();
|
|
|
|
// tab width
|
|
if (this.t[a].conf.autowidth == true) {
|
|
this.t[a].conf.width = this._getLabelWidth(this.t[a].conf.text, this.t[a].conf.close);
|
|
if (this.t[a].conf.visible) this.t[a].tab.style.width = this.t[a].conf.width+"px";
|
|
}
|
|
|
|
}
|
|
|
|
this.conf.tabsAreaOfs = null;
|
|
this._fixTabsOfs();
|
|
|
|
this.setSizes();
|
|
}
|
|
|
|
this.setAlign = function(align) {
|
|
|
|
align = (align=="left"?"left":"right");
|
|
if (align == this.conf.align) {
|
|
this.tabsArea.childNodes[1].childNodes[0].style[this.conf.align] = "0px";
|
|
return;
|
|
}
|
|
|
|
if (this.conf.transProp !== false) {
|
|
this.tabsArea.childNodes[1].childNodes[0].style[this.conf.transProp] = "";
|
|
}
|
|
this.tabsArea.childNodes[1].childNodes[0].style[this.conf.align] = "";
|
|
|
|
this.conf.align = align;
|
|
this.tabsArea.childNodes[1].childNodes[0].className = "dhxtabbar_tabs_cont_"+this.conf.align+this.conf.tabsContCss;
|
|
this.tabsArea.childNodes[1].childNodes[0].style[this.conf.align] = "0px";
|
|
|
|
if (this.conf.transProp !== false) {
|
|
this.conf.transValuePos = this.conf.align+" "+this.conf.transSpeed;
|
|
this.tabsArea.childNodes[1].childNodes[0].style[this.conf.transProp] = this.conf.transValuePos;
|
|
}
|
|
}
|
|
|
|
this._initObj = function(data) {
|
|
|
|
this.conf.initSeq = true;
|
|
|
|
this.clearAll();
|
|
|
|
var viaAjax = false;
|
|
|
|
// settings
|
|
if (data.settings != null) {
|
|
if (data.settings.skin != null) this.setSkin(data.settings.skin);
|
|
if (data.settings.close_button != null) { // added in 4.6
|
|
this.enableTabCloseButton(window.dhx4.s2b(data.settings.close_button));
|
|
} else if (data.settings.closeButton != null) { // deprecated from 4.6
|
|
this.enableTabCloseButton(window.dhx4.s2b(data.settings.closeButton));
|
|
}
|
|
if (data.settings.align != null) this.setAlign(data.settings.align);
|
|
if (data.settings.hrefmode == "ajax") viaAjax = true;
|
|
if (data.settings.hrefmode == "ajax-html") { viaAjax = true; this.conf.url_demand = true; } // ajax-html back in 4.2
|
|
}
|
|
|
|
// tabs
|
|
if (data.tabs != null) {
|
|
for (var q=0; q<data.tabs.length; q++) {
|
|
var t = data.tabs[q];
|
|
if (typeof(t.id) == "undefined") t.id = window.dhx4.newId();
|
|
if (!isNaN(parseInt(t.width))) { t.width = parseInt(t.width); } else { t.width = null; }
|
|
this.addTab(t.id, t.text||t.label||"", t.width, t.index, window.dhx4.s2b(t.selected)||window.dhx4.s2b(t.active), t.close);
|
|
if (t.content != null) {
|
|
this.cells(t.id).attachHTMLString(t.content);
|
|
} else if (t.href != null) {
|
|
if (this.conf.url_demand == true) {
|
|
this.conf.urls[t.id] = {href: t.href, ajax: viaAjax};
|
|
} else {
|
|
this.cells(t.id).attachURL(t.href, viaAjax);
|
|
}
|
|
}
|
|
if (typeof(t.enabled) != "undefined" && window.dhx4.s2b(t.enabled) == false) {
|
|
this.tabs(t.id).disable();
|
|
} else if (typeof(t.disabled) != "undefined" && window.dhx4.s2b(t.disabled) == true) {
|
|
this.tabs(t.id).disable();
|
|
}
|
|
}
|
|
}
|
|
|
|
this.conf.initSeq = false;
|
|
if (this.conf.arwMode == "auto") this.setSizes();
|
|
|
|
// check url on demand to load
|
|
if (this.conf.url_demand == true) this._loadURLOnDemand(this.conf.lastActive);
|
|
|
|
}
|
|
|
|
this._xmlToObj = function(data) {
|
|
|
|
var obj = { settings: {}, tabs: [] };
|
|
var r = data.getElementsByTagName("tabbar")[0];
|
|
|
|
if (r != null) {
|
|
|
|
// settings
|
|
for (var a in {skin:1, align:1, closeButton:1, hrefmode:1}) {
|
|
if (r.getAttribute(a) != null) obj.settings[a] = r.getAttribute(a);
|
|
}
|
|
|
|
// tabs
|
|
var t = r.getElementsByTagName("tab");
|
|
for (var q=0; q<t.length; q++) {
|
|
|
|
var tab = { text: (t[q].firstChild.nodeValue||"") };
|
|
|
|
// attrs
|
|
for (var a in {id:1, width:1, close:1, selected:1, active:1, enabled:1, disabled:1, href:1}) {
|
|
if (t[q].getAttribute(a) != null) tab[a] = t[q].getAttribute(a);
|
|
}
|
|
|
|
// content
|
|
var cont = t[q].getElementsByTagName("content")[0];
|
|
if (cont != null) {
|
|
tab.content = "";
|
|
for (var w=0; w<cont.childNodes.length; w++) tab.content += (cont.childNodes[w].nodeValue||"");
|
|
}
|
|
|
|
obj.tabs.push(tab);
|
|
}
|
|
}
|
|
|
|
return obj;
|
|
}
|
|
|
|
dhx4._enableDataLoading(this, "_initObj", "_xmlToObj", "tabbar", {struct:true});
|
|
|
|
// check for transition support
|
|
var k = window.dhx4.transDetect();
|
|
|
|
this.conf.transProp = k.transProp;
|
|
this.conf.transEv = k.transEv;
|
|
this.conf.transValueWidth = "width "+this.conf.transSpeed;
|
|
|
|
k = null;
|
|
|
|
if (this.conf.transProp !== false) {
|
|
this.conf.transValuePos = this.conf.align+" "+this.conf.transSpeed;
|
|
this.tabsArea.childNodes[1].childNodes[0].style[this.conf.transProp] = this.conf.transValuePos;
|
|
}
|
|
|
|
this._callMainEvent = function(name, args) {
|
|
return this.callEvent(name, args);
|
|
}
|
|
|
|
window.dhx4._eventable(this);
|
|
|
|
if (this.conf.autoload.json != null) {
|
|
this.loadStruct(this.conf.autoload.json, this.conf.autoload.onload);
|
|
} else if (this.conf.autoload.xml != null) {
|
|
this.loadStruct(this.conf.autoload.xml, this.conf.autoload.onload);
|
|
} else if (this.conf.autoload.tabs != null) {
|
|
this.loadStruct({tabs:this.conf.autoload.tabs}, this.conf.autoload.onload);
|
|
}
|
|
if (this.conf.autoload.arrows_mode != null) {
|
|
this.setArrowsMode(this.conf.autoload.arrows_mode);
|
|
}
|
|
|
|
|
|
this._fixTabsOfs();
|
|
this.setSizes();
|
|
|
|
return this;
|
|
|
|
};
|
|
|
|
// top-level extensions
|
|
dhtmlXTabBar.prototype = new dhtmlXCellTop();
|
|
|
|
dhtmlXTabBar.prototype._fixTabsOfs = function() {
|
|
this.conf.tabsOfs = ({dhx_skyblue:1,dhx_web:0,dhx_terrace:1,material:0}[this.conf.skin]);
|
|
};
|
|
|
|
/* cell access */
|
|
dhtmlXTabBar.prototype.cells = dhtmlXTabBar.prototype.tabs = function(id) {
|
|
if (this.t[id]) return this.t[id].cell;
|
|
return null;
|
|
};
|
|
|
|
dhtmlXTabBar.prototype.getAllTabs = function() {
|
|
var t = [];
|
|
for (var a in this.t) t.push(a);
|
|
return t;
|
|
};
|
|
|
|
/* set/get active, tab switch */
|
|
dhtmlXTabBar.prototype._setTabActive = function(id, mode) {
|
|
|
|
// mode - if set to true - call onSelect event handler (true by default)
|
|
|
|
if (!this.t[id] || this.t[id].conf.active) return;
|
|
|
|
if (typeof(mode) == "undefined") mode = true;
|
|
if (mode == true && this.callEvent("onSelect", [id, this.conf.lastActive]) !== true) return;
|
|
|
|
this.setTabInActive();
|
|
|
|
this.t[id].conf.active = true;
|
|
if (this.conf.contZone) {
|
|
this.t[id].cell.cell.style.visibility = "visible";
|
|
this.t[id].cell.cell.style.top = "0px";
|
|
this.t[id].cell.cell.style.zIndex = 1;
|
|
}
|
|
this.t[id].tab.className = this._tabCss(id);
|
|
this.conf.lastActive = id;
|
|
this.setSizes();
|
|
|
|
if (this.conf.url_demand == true) this._loadURLOnDemand(id);
|
|
|
|
};
|
|
|
|
dhtmlXTabBar.prototype.setTabInActive = function() {
|
|
|
|
if (this.conf.lastActive != null && this.t[this.conf.lastActive]) {
|
|
this.t[this.conf.lastActive].conf.active = false;
|
|
if (this.conf.contZone) {
|
|
this.t[this.conf.lastActive].cell.cell.style.visibility = "hidden";
|
|
this.t[this.conf.lastActive].cell.cell.style.top = "-5000px";
|
|
this.t[this.conf.lastActive].cell.cell.style.zIndex = 0;
|
|
}
|
|
this.t[this.conf.lastActive].tab.className = this._tabCss(this.conf.lastActive);
|
|
this.conf.lastActive = null;
|
|
}
|
|
|
|
};
|
|
|
|
dhtmlXTabBar.prototype._isTabActive = function(id) {
|
|
return (id == this.conf.lastActive && this.conf.lastActive != null);
|
|
};
|
|
|
|
dhtmlXTabBar.prototype.getActiveTab = function() {
|
|
return this.conf.lastActive;
|
|
};
|
|
|
|
dhtmlXTabBar.prototype.goToNextTab = function() {
|
|
var id = this._getNextVisible(this.conf.lastActive, true);
|
|
if (id != null) this._setTabActive(id);
|
|
};
|
|
|
|
dhtmlXTabBar.prototype.goToPrevTab = function() {
|
|
var id = this._getPrevVisible(this.conf.lastActive, true);
|
|
if (id != null) this._setTabActive(id);
|
|
};
|
|
|
|
|
|
|
|
/* enable/disable */
|
|
dhtmlXTabBar.prototype._enableTab = function(id, mode) {
|
|
|
|
// mode - set to true to select tab
|
|
|
|
if (!this.t[id] || this.t[id].conf.enabled) return;
|
|
this.t[id].conf.enabled = true;
|
|
this.t[id].tab.className = this._tabCss(id);
|
|
|
|
if (mode == true) this._setTabActive(id);
|
|
|
|
};
|
|
|
|
dhtmlXTabBar.prototype._disableTab = function(id, activateId) {
|
|
|
|
// old code have 2nd param in descr but not in script, will added (logic the same as for hideTab)
|
|
// activateId - if set to true, selection jump from current tab to nearest one, or you can specify tab id
|
|
|
|
if (!this.t[id] || !this.t[id].conf.enabled) return;
|
|
this.t[id].conf.enabled = false;
|
|
this.t[id].tab.className = this._tabCss(id);
|
|
|
|
if (activateId !== false && this.conf.lastActive == id) {
|
|
if (activateId == true) activateId = this._getNextVisible(id)||this._getPrevVisible(id);
|
|
this._setTabActive(activateId);
|
|
}
|
|
|
|
};
|
|
|
|
dhtmlXTabBar.prototype._isTabEnabled = function(id) {
|
|
return (this.t[id] != null && this.t[id].conf.enabled==true);
|
|
};
|
|
|
|
/* set/get label */
|
|
dhtmlXTabBar.prototype._setTabText = function(id, text, width) {
|
|
|
|
if (!this.t[id]) return;
|
|
|
|
var autowidth = false;
|
|
if (typeof(width) == "undefined" || width == null) {
|
|
width = this._getLabelWidth(text, this.t[id].conf.close);
|
|
autowidth = true;
|
|
}
|
|
|
|
this.t[id].tab.style.width = width+"px";
|
|
this.t[id].tab.childNodes[0].innerHTML = text;
|
|
|
|
this.t[id].conf.text = text;
|
|
this.t[id].conf.width = width;
|
|
this.t[id].conf.autowidth = autowidth;
|
|
|
|
};
|
|
|
|
dhtmlXTabBar.prototype._getTabText = function(id) {
|
|
if (!this.t[id]) return null;
|
|
return this.t[id].conf.text;
|
|
};
|
|
|
|
/* remove tab/all tabs */
|
|
dhtmlXTabBar.prototype._removeTab = function(id, activateId, force) { // force = w/o effect, private?
|
|
|
|
if (!this.t[id]) return;
|
|
|
|
if (force != true && this.t[id].conf.remove != true) {
|
|
this.t[id].conf.remove = true;
|
|
this._hideTab(id, activateId);
|
|
return;
|
|
}
|
|
|
|
if (typeof(activateId) == "undefined") activateId = true;
|
|
|
|
var next = this._getNextVisible(id);
|
|
var prev = this._getPrevVisible(id);
|
|
|
|
if (this.t[id].conf.transEv == true) {
|
|
this.t[id].tab.removeEventListener(this.conf.transEv, this._doOnTrEnd, false);
|
|
this.t[id].conf.transEv = false;
|
|
}
|
|
|
|
for (var a in this.t[id].conf) this.t[id].conf[a] = null;
|
|
this.t[id].conf = null;
|
|
delete this.t[id].conf;
|
|
|
|
this.t[id].cell._unload();
|
|
this.t[id].cell = null;
|
|
|
|
this.t[id].tab.parentNode.removeChild(this.t[id].tab);
|
|
this.t[id].tab = null;
|
|
|
|
this.t[id] = null;
|
|
delete this.t[id];
|
|
|
|
this.conf.urls[id] = null;
|
|
delete this.conf.urls[id];
|
|
|
|
if (this.conf.lastActive == id) {
|
|
this.conf.lastActive = null;
|
|
if (activateId != false) {
|
|
var actvId = (activateId == true ? (next||prev||this._getFirstVisible()) : activateId);
|
|
if (actvId != null) this._setTabActive(actvId);
|
|
}
|
|
} else if (force != true) {
|
|
this._adjustTabs();
|
|
}
|
|
};
|
|
|
|
dhtmlXTabBar.prototype.clearAll = function() {
|
|
// remove all tabs
|
|
for (var a in this.t) this._removeTab(a, false, true);
|
|
this.tabsArea.childNodes[1].childNodes[0].style[this.conf.align] = "0px";
|
|
};
|
|
|
|
|
|
/* positionig */
|
|
dhtmlXTabBar.prototype.moveTab = function(id, index) {
|
|
|
|
if (!this.t[id] || index < 0) return;
|
|
index += 1; // firstChild is line
|
|
|
|
var p = this.tabsArea.childNodes[1].firstChild;
|
|
|
|
if (p.childNodes[index] != this.t[id].tab) {
|
|
p.removeChild(this.t[id].tab);
|
|
if (index >= p.childNodes.length) {
|
|
p.appendChild(this.t[id].tab);
|
|
} else {
|
|
p.insertBefore(this.t[id].tab, p.childNodes[index]);
|
|
}
|
|
}
|
|
p = null;
|
|
};
|
|
|
|
dhtmlXTabBar.prototype._getIndex = function(id) {
|
|
var i = -1;
|
|
var p = this.tabsArea.childNodes[1].firstChild;
|
|
for (var q=1; q<p.childNodes.length; q++) {
|
|
if (p.childNodes[q]._tabId == id) i = q-1; // firstChild is line
|
|
}
|
|
p = null;
|
|
return i;
|
|
};
|
|
|
|
dhtmlXTabBar.prototype.getNumberOfTabs = function(mode) {
|
|
// mode - set to true for visible only (new)
|
|
var p = 0;
|
|
for (var a in this.t) {
|
|
p += (mode!=true?1:(this.t[a].conf.visible==true?1:0));
|
|
}
|
|
return p;
|
|
};
|
|
|
|
dhtmlXTabBar.prototype.forEachCell = dhtmlXTabBar.prototype.forEachTab = function(func) {
|
|
for (var a in this.t) func.apply(window, [this.t[a].cell]);
|
|
};
|
|
|
|
dhtmlXTabBar.prototype.enableAutoReSize = function() {
|
|
this._initFSResize();
|
|
};
|
|
|
|
// added in 4.1
|
|
dhtmlXTabBar.prototype.setArrowsMode = function(mode) {
|
|
mode = {auto: "auto", always: "always"}[String(mode)];
|
|
if (mode == null || mode == this.conf.mode) return;
|
|
this.conf.arwMode = mode;
|
|
|
|
if (mode == "always") {
|
|
this.tabsArea.childNodes[0].className = "dhxtabbar_tabs_ar_left";
|
|
this.tabsArea.childNodes[2].className = "dhxtabbar_tabs_ar_right";
|
|
}
|
|
|
|
this.setSizes();
|
|
};
|
|
|
|
dhtmlXTabBar.prototype._checkArrows = function() {
|
|
|
|
var adj = false;
|
|
|
|
if (this.conf.arwMode == "auto") {
|
|
|
|
var w = 0;
|
|
for (var a in this.t) w+= this.t[a].tab.offsetWidth;
|
|
|
|
var arLeft = this.tabsArea.childNodes[0];
|
|
var arRight = this.tabsArea.childNodes[2];
|
|
|
|
if (w > this.cont.offsetWidth) {
|
|
// show arows
|
|
if (arLeft.className.search(/dhxtabbar_tabs_ar_hidden/) >= 0) {
|
|
arLeft.className = arLeft.className.replace(/\s{0,}dhxtabbar_tabs_ar_hidden/, "");
|
|
arRight.className = arRight.className.replace(/\s{0,}dhxtabbar_tabs_ar_hidden/, "");
|
|
adj = true;
|
|
}
|
|
} else {
|
|
// hide arrows
|
|
if (arLeft.className.search(/dhxtabbar_tabs_ar_hidden/) < 1) {
|
|
arLeft.className += " dhxtabbar_tabs_ar_hidden";
|
|
arRight.className += " dhxtabbar_tabs_ar_hidden";
|
|
adj = true;
|
|
}
|
|
}
|
|
arLeft = arRight = null;
|
|
|
|
}
|
|
|
|
return adj;
|
|
|
|
};
|
|
|
|
// load url on demand, added in 4.2
|
|
dhtmlXTabBar.prototype._loadURLOnDemand = function(id) {
|
|
if (id != null && this.conf.urls[id] != null) {
|
|
this.cells(id).attachURL(this.conf.urls[id].href, this.conf.urls[id].ajax);
|
|
this.conf.urls[id] = null;
|
|
}
|
|
};
|
|
window.dhtmlXTabBarCell = function(id, tabbar) {
|
|
|
|
dhtmlXCellObject.apply(this, [id, "_tabbar"]);
|
|
|
|
this.tabbar = tabbar;
|
|
|
|
this.conf.skin = this.tabbar.conf.skin;
|
|
|
|
this.conf.tabbar_funcs = {
|
|
show: "_showTab",
|
|
hide: "_hideTab",
|
|
isVisible: "_isTabVisible",
|
|
enable: "_enableTab",
|
|
disable: "_disableTab",
|
|
isEnabled: "_isTabEnabled",
|
|
getIndex: "_getIndex",
|
|
getText: "_getTabText",
|
|
setText: "_setTabText",
|
|
setActive: "_setTabActive",
|
|
isActive: "_isTabActive",
|
|
close: "_removeTab"
|
|
};
|
|
|
|
this._tabbarCall = function(name) {
|
|
return function(){
|
|
var t = [this._idd];
|
|
for (var q=0; q<arguments.length; q++) t.push(arguments[q]);
|
|
return this.tabbar[name].apply(this.tabbar, t);
|
|
};
|
|
};
|
|
|
|
for (var a in this.conf.tabbar_funcs) {
|
|
if (typeof(this[a]) != "function") this[a] = this._tabbarCall(this.conf.tabbar_funcs[a]);
|
|
};
|
|
|
|
|
|
this.attachEvent("_onCellUnload", function(){
|
|
this.tabbar = null;
|
|
for (var a in this.conf.tabbar_funcs) {
|
|
this[a] = null;
|
|
this.conf.tabbar_funcs[a] = null;
|
|
}
|
|
this.conf.tabbar_funcs = null;
|
|
});
|
|
|
|
// "onTabContentLoaded" DEPRECATED
|
|
this.attachEvent("_onContentLoaded", function() {
|
|
this.tabbar._callMainEvent("onContentLoaded", arguments);
|
|
this.tabbar._callMainEvent("onTabContentLoaded", arguments);
|
|
});
|
|
|
|
this.attachEvent("_onContentAttach", function(){
|
|
this.tabbar._adjustCell(this.tabbar.conf.lastActive);
|
|
});
|
|
this.attachEvent("_onBeforeContentAttach", function(dataType) {
|
|
if (dataType == "sidebar" && this.conf.skin != "dhx_skyblue") {
|
|
this._hideBorders();
|
|
}
|
|
});
|
|
|
|
};
|
|
|
|
window.dhtmlXTabBarCell.prototype = new dhtmlXCellObject();
|
|
|
|
dhtmlXCellObject.prototype.attachTabbar = function(conf) {
|
|
|
|
this.callEvent("_onBeforeContentAttach",["tabbar"]);
|
|
|
|
// 3.6 init - attachTabbar(mode)
|
|
if (typeof(conf) == "string") {
|
|
conf = {mode:conf};
|
|
} else if (typeof(conf) != "object" || conf == null) {
|
|
conf = {};
|
|
}
|
|
|
|
var obj = document.createElement("DIV");
|
|
obj.style.width = "100%";
|
|
obj.style.height = "100%";
|
|
obj.style.position = "relative";
|
|
obj.style.overflow = "hidden";
|
|
|
|
// acc, move tabbar 1px-up to hide top borders
|
|
if (typeof(window.dhtmlXAccordionCell) == "function" && this instanceof window.dhtmlXAccordionCell) {
|
|
if (this.conf.skin == "material") {
|
|
obj._ofs = {t:-1,r:-1,b:-1,l:-1}; // attach tabbar to acc
|
|
} else {
|
|
obj._ofs = {t:-1};
|
|
}
|
|
}
|
|
|
|
if (typeof(window.dhtmlXTabBarCell) == "function" && this instanceof window.dhtmlXTabBarCell) {
|
|
if (this.conf.skin == "dhx_skyblue") obj._ofs = {t:-1,r:-1,b:-1,l:-1};
|
|
if (this.conf.skin == "material") obj._ofs = {t:8,r:8,b:8,l:8};
|
|
}
|
|
|
|
// sidebar, move tabbar 1px-left
|
|
if (typeof(window.dhtmlXSideBarCell) == "function" && this instanceof window.dhtmlXSideBarCell) {
|
|
obj._ofs = {l:-1};
|
|
if (this.conf.skin == "dhx_web" && this.sidebar.conf.autohide == true) obj._ofs.l = 0;
|
|
if (this.conf.skin == "dhx_terrace") {
|
|
if (this.sidebar.conf.autohide == true) obj._ofs.l = 0;
|
|
if (this.sidebar.conf.header == true) obj._ofs.t = -1;
|
|
}
|
|
}
|
|
|
|
// carousel
|
|
if (typeof(window.dhtmlXCarouselCell) == "function" && this instanceof window.dhtmlXCarouselCell) {
|
|
this._hideBorders();
|
|
}
|
|
|
|
this._attachObject(obj);
|
|
|
|
conf.skin = this.conf.skin;
|
|
conf.parent = obj;
|
|
|
|
this.dataType = "tabbar";
|
|
this.dataObj = new dhtmlXTabBar(conf);
|
|
|
|
conf.parent = obj = null;
|
|
conf = null;
|
|
|
|
this.callEvent("_onContentAttach",[]);
|
|
|
|
return this.dataObj;
|
|
};
|
|
|