66 lines
2.0 KiB
JavaScript
66 lines
2.0 KiB
JavaScript
|
window.addEventListener('load', function() {
|
||
|
|
let tabIds = [];
|
||
|
|
|
||
|
|
function toggle(elem, from = 0, to = 0) {
|
||
|
|
elem[from].classList.remove("active");
|
||
|
|
elem[to].classList.add("active");
|
||
|
|
return to;
|
||
|
|
}
|
||
|
|
|
||
|
|
function initialize(tabs) {
|
||
|
|
const active = tabs.findIndex(x => x.classList.contains("active"));
|
||
|
|
tabs.forEach(function(x) {
|
||
|
|
tabIds.push(x.id);
|
||
|
|
x.dataset.id = x.id;
|
||
|
|
x.removeAttribute("id");
|
||
|
|
x.classList.add("tab");
|
||
|
|
x.classList.remove("active");
|
||
|
|
});
|
||
|
|
return toggle(tabs, 0, active * (active > 0));
|
||
|
|
}
|
||
|
|
|
||
|
|
// Implement
|
||
|
|
Array.from(document.querySelectorAll(".section.tabset")).forEach(section => {
|
||
|
|
const tabs = Array.from(section.querySelectorAll(":scope>.section"));
|
||
|
|
let active = initialize(tabs);
|
||
|
|
|
||
|
|
const ul = section.insertBefore(document.createElement("ul"), tabs[0]);
|
||
|
|
ul.classList.add("tabmenu");
|
||
|
|
tabs.forEach((tab, current) => {
|
||
|
|
const button = document.createElement("button");
|
||
|
|
ul.appendChild(document.createElement("li")).appendChild(button);
|
||
|
|
button.id = tab.dataset.id;
|
||
|
|
button.innerHTML = tab.children[0].innerHTML;
|
||
|
|
button.addEventListener("click", function() {
|
||
|
|
history.pushState(null, null, "#" + button.id);
|
||
|
|
toggle(tabs, active, current);
|
||
|
|
active = toggle(ul.children, active, current);
|
||
|
|
});
|
||
|
|
});
|
||
|
|
toggle(ul.children, 0, active);
|
||
|
|
});
|
||
|
|
|
||
|
|
// Navigation
|
||
|
|
function showHashTab() {
|
||
|
|
const buttonId = tabIds.find(x => ('#' + x) === location.hash);
|
||
|
|
if (!buttonId) return;
|
||
|
|
const button = document.getElementById(buttonId);
|
||
|
|
let el = button.parentElement.parentElement.parentElement;
|
||
|
|
while (el) {
|
||
|
|
if (
|
||
|
|
el.tagName === "SECTION"
|
||
|
|
&& el.classList.contains("tab")
|
||
|
|
&& !el.classList.contains("active")
|
||
|
|
) {
|
||
|
|
document.getElementById(el.dataset.id).click();
|
||
|
|
}
|
||
|
|
el = el.parentElement;
|
||
|
|
}
|
||
|
|
button.click();
|
||
|
|
button.scrollIntoView();
|
||
|
|
}
|
||
|
|
showHashTab();
|
||
|
|
window.addEventListener("hashchange", showHashTab);
|
||
|
|
});
|
||
|
|
|