2025-01-12 00:52:51 +08:00

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);
});