131 lines
4.9 KiB
JavaScript
131 lines
4.9 KiB
JavaScript
var repoindex = (function(repoindex) {
|
|
|
|
// Adds bootstrap tabs to the HTML element with the specified id.
|
|
repoindex.Tabbing = function(containerId) {
|
|
// assemble required element structure
|
|
this.containerElement = document.createElement("div");
|
|
this.tabbingElement = document.createElement("ul");
|
|
this.tabbingElement.className = "nav nav-tabs";
|
|
this.contentElement = document.createElement("div");
|
|
this.contentElement.className = "tab-content";
|
|
this.containerElement.appendChild(this.tabbingElement);
|
|
this.containerElement.appendChild(this.contentElement);
|
|
repoindex.getElement(containerId).appendChild(this.containerElement);
|
|
|
|
this.tabs = [];
|
|
|
|
// returns a tab by ID
|
|
this.tabById = function(id) {
|
|
for(var i = 0, len = this.tabs.length; i < len; ++i) {
|
|
if(this.tabs[i].paneElement.id === id) {
|
|
return this.tabs[i];
|
|
}
|
|
}
|
|
};
|
|
|
|
// finds the currently shown tab
|
|
this.findActiveTab = function() {
|
|
for(var i = 0, len = this.tabs.length; i < len; ++i) {
|
|
if(this.tabs[i].classList.contains("active")) {
|
|
return this.tabs[i];
|
|
}
|
|
}
|
|
};
|
|
|
|
// adds a new tab
|
|
this.addTab = function(id, title, closeable, replaceActive) {
|
|
// check whether a tab with the specified ID already exists
|
|
var tabElement = this.tabById(id);
|
|
if(tabElement) {
|
|
// ID already used -> just return currenlty present tab
|
|
return tabElement;
|
|
}
|
|
|
|
// create new tab
|
|
tabElement = document.createElement("li");
|
|
|
|
// replace active tab
|
|
if(replaceActive) {
|
|
var activeTabElement = this.findActiveTab();
|
|
if(activeTabElement) {
|
|
this.tabbingElement.removeChild(activeTabElement);
|
|
this.contentElement.removeChild(activeTabElement.paneElement);
|
|
tabElement.tabbingIndex = activeTabElement.tabbingIndex;
|
|
}
|
|
}
|
|
|
|
// initiate new tab
|
|
if(tabElement.tabbingIndex === undefined) {
|
|
tabElement.tabbingIndex = this.tabs.length;
|
|
}
|
|
var paneElement = document.createElement("div");
|
|
var linkElement = document.createElement("a");
|
|
linkElement.setAttribute("data-toggle", "tab");
|
|
linkElement.href = "#" + id;
|
|
linkElement.appendChild(document.createTextNode(title));
|
|
tabElement.paneElement = paneElement;
|
|
tabElement.linkElement = linkElement;
|
|
tabElement.tabbing = this;
|
|
tabElement.appendChild(linkElement);
|
|
this.tabbingElement.appendChild(tabElement);
|
|
paneElement.tabElement = tabElement;
|
|
paneElement.setAttribute("id", id);
|
|
if(this.tabs.length === 0) {
|
|
tabElement.className = "active";
|
|
paneElement.className = "tab-pane fade in active";
|
|
} else {
|
|
paneElement.className = "tab-pane fade";
|
|
}
|
|
|
|
this.contentElement.appendChild(paneElement);
|
|
|
|
// method to active tab
|
|
tabElement.activate = function() {
|
|
this.linkElement.click();
|
|
};
|
|
|
|
if(closeable) {
|
|
var closeButton = repoindex.makeCloseButton();
|
|
closeButton.style.marginLeft = "4px";
|
|
closeButton.onclick = function() {
|
|
tabElement.tabbing.removeTab(tabElement);
|
|
};
|
|
linkElement.appendChild(closeButton);
|
|
};
|
|
|
|
this.tabs[tabElement.tabbingIndex] = tabElement;
|
|
return tabElement;
|
|
};
|
|
|
|
// removes a tab
|
|
this.removeTab = function(tabElement) {
|
|
this.tabbingElement.removeChild(tabElement);
|
|
this.contentElement.removeChild(tabElement.paneElement);
|
|
this.tabs.splice(tabElement.tabbingIndex, 1);
|
|
if(this.tabs.length !== 0) {
|
|
if(tabElement.tabbingIndex === 0) {
|
|
this.tabs[0].activate();
|
|
} else if(tabElement.tabbingIndex - 1 < this.tabs.length) {
|
|
this.tabs[tabElement.tabbingIndex - 1].activate();
|
|
} else {
|
|
this.tabs[this.tabs.length - 1].activate();
|
|
}
|
|
for(var i = tabElement.tabbingIndex, len = this.tabs.length; i < len; ++i) {
|
|
this.tabs[i].tabbingIndex = i;
|
|
}
|
|
}
|
|
this.tabRemoved(tabElement);
|
|
};
|
|
|
|
// disassembles element strucutre
|
|
this.remove = function() {
|
|
this.containerElement.parentNode.removeChild(this.containerElement);
|
|
};
|
|
|
|
this.tabRemoved = function(tab) {};
|
|
};
|
|
|
|
return repoindex;
|
|
|
|
})(repoindex || {});
|