61 lines
1.9 KiB
JavaScript
61 lines
1.9 KiB
JavaScript
|
function loadPage(section, page) {
|
||
|
|
let buttons = document.getElementById(section).getElementsByTagName("button");
|
||
|
|
let currSel;
|
||
|
|
for (let i in buttons) {
|
||
|
|
if (buttons[i].classList?.contains("selected")) {
|
||
|
|
if (page - 1 == i) return;
|
||
|
|
else {
|
||
|
|
currSel = buttons[i];
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
fetch(section + "_page" + page + ".html")
|
||
|
|
.then((response) => response.text())
|
||
|
|
.then((data) => {
|
||
|
|
document.getElementById(section + "-content").innerHTML = data;
|
||
|
|
if (currSel) {
|
||
|
|
currSel.classList.remove("selected");
|
||
|
|
}
|
||
|
|
document.getElementById(section).getElementsByTagName("button")[page - 1].classList.add("selected");
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function activeSection(section) {
|
||
|
|
hideAll();
|
||
|
|
|
||
|
|
const targetSection = document.getElementById(section);
|
||
|
|
targetSection.focus();
|
||
|
|
targetSection.classList.add("selected");
|
||
|
|
setTimeout(() => {
|
||
|
|
targetSection.scrollIntoView({ block: "start", behavior: "smooth" });
|
||
|
|
}, 100);
|
||
|
|
}
|
||
|
|
|
||
|
|
function hideAll() {
|
||
|
|
document.querySelectorAll(".section").forEach((s) => {
|
||
|
|
s.classList.remove("selected");
|
||
|
|
});
|
||
|
|
}
|
||
|
|
const HIDDEN_CLASS = "hidden";
|
||
|
|
|
||
|
|
function hideThemeSwitcher(currentTheme) {
|
||
|
|
if (currentTheme == "dark") {
|
||
|
|
document.getElementById("dark-icon")?.classList.add(HIDDEN_CLASS);
|
||
|
|
document.getElementById("light-icon")?.classList.remove(HIDDEN_CLASS);
|
||
|
|
} else {
|
||
|
|
document.getElementById("light-icon")?.classList.add(HIDDEN_CLASS);
|
||
|
|
document.getElementById("dark-icon")?.classList.remove(HIDDEN_CLASS);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
function setTheme(newTheme) {
|
||
|
|
document.documentElement.style.setProperty("color-scheme", newTheme);
|
||
|
|
hideThemeSwitcher(newTheme);
|
||
|
|
}
|
||
|
|
|
||
|
|
function switchTheme() {
|
||
|
|
setTheme(document.documentElement.style.getPropertyValue("color-scheme")=="dark"?"light":"dark");
|
||
|
|
}
|
||
|
|
|