(Custom tabs) |
m (Custom tabs) |
||
Line 23: | Line 23: | ||
var links = document.getElementsByClassName('cathedral-tab'); | var links = document.getElementsByClassName('cathedral-tab'); | ||
for (i = 0; i < links.length; i++) { | for (i = 0; i < links.length; i++) { | ||
a = links[i].firstChild; | |||
if (a.getAttribute('href') === "#" + id) { | |||
return links[i]; | return links[i]; | ||
} | } | ||
} | } | ||
} | } | ||
function | function changeTabs(){ | ||
// get the hash | |||
var hash = location.hash; | var hash = location.hash; | ||
if (hash === "") { | if (hash === "") { | ||
// | // fresh page, highlight the first item. | ||
tab = document.getElementsByClassName('cathedral-tab')[0]; | tab = document.getElementsByClassName('cathedral-tab')[0]; | ||
hash = tab.getAttribute('href'); | if (tab) { | ||
tab.classList.add("selected"); | |||
hash = tab.firstChild.getAttribute('href'); | |||
} | |||
} | |||
if (!hash) { | |||
return; | |||
} | } | ||
Line 46: | Line 55: | ||
hideAllTabDetails(); | hideAllTabDetails(); | ||
target.style.display = "block"; | target.style.display = "block"; | ||
// open all of its parents | // open all of its parents | ||
while (target.parentElement){ | while (target.parentElement){ | ||
Line 63: | Line 71: | ||
tab.classList.add("selected"); | tab.classList.add("selected"); | ||
} | } | ||
} | } | ||
} | } | ||
} | } | ||
window.addEventListener('hashchange', changeTabs); | |||
hideAllTabDetails(); | |||
changeTabs(); |
Latest revision as of 02:26, 7 April 2018
/**
* Custom tabs
*
* It will open and close tabs on the page with the corresponding hash.
* If there is no change in hash (ie you are repeatedly clickin the same tab),
* then it will toggle the tab open and closed.
* This assumes that each tab's title has a hash that can be jumped to.
*/
function hideAllTabDetails() {
var tab = document.getElementsByClassName('cathedral-tab');
if (tab){
for (i = 0; i < tab.length; i++)
tab[i].className = tab[i].className.replace(/\bselected\b/g, "");
}
tab = document.getElementsByClassName('cathedral-details');
if (tab){
for (i = 0; i < tab.length; i++)
tab[i].style.display = "none";
}
}
function getTab(id){
var links = document.getElementsByClassName('cathedral-tab');
for (i = 0; i < links.length; i++) {
a = links[i].firstChild;
if (a.getAttribute('href') === "#" + id) {
return links[i];
}
}
}
function changeTabs(){
// get the hash
var hash = location.hash;
if (hash === "") {
// fresh page, highlight the first item.
tab = document.getElementsByClassName('cathedral-tab')[0];
if (tab) {
tab.classList.add("selected");
hash = tab.firstChild.getAttribute('href');
}
}
if (!hash) {
return;
}
// get the ID of the item to be opened
var id = hash.substring(1);
var target = document.getElementById(id);
// toggle the target
if (target) {
if (target.style.display === "none") {
hideAllTabDetails();
target.style.display = "block";
// open all of its parents
while (target.parentElement){
if(target.parentElement.classList.contains('cathedral-details')){
target.parentNode.style.display = "block";
getTab(target.parentNode.id).classList.add("selected");
}
target = target.parentElement;
}
// color its corresponding tab
if (typeof tab === "undefined" || tab instanceof Event) {
// We jumped here from another page. Find the corresponding link and highlight it.
getTab(id).classList.add("selected");
} else {
tab.classList.add("selected");
}
}
}
}
window.addEventListener('hashchange', changeTabs);
hideAllTabDetails();
changeTabs();