Decentrala/website
24
1
Fork 12
Code Issues 1 Pull Requests 1 Packages Projects Releases Wiki Activity

[JS] refactor

Browse Source
This commit is contained in:
coja
2026-05-01 23:27:36 +02:00
parent 9ff6c99615
commit d1051be74b
1 changed files with 32 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
site/scripts/main.js
View File

@@ -1,40 +1,22 @@
const theme_switcher = document.getElementById("theme-switcher");
const getById = (id) => document.getElementById(id);
const docStyle = document.documentElement.style;
const theme_switcher = getById("theme-switcher");
const sections_button = getById("sections-button");
const imgs = document.getElementsByTagName("img");
const sections_button = document.getElementById("sections-button");
const sections_menu = document.getElementsByTagName("nav")[0];
const main = document.getElementsByTagName("main")[0];
const isMenuOpen = sections_button.getAttribute("opened") === "true"
const theme = window.localStorage.getItem("theme");
const menuSrc = sections_button.children[0].src
let theme = window.localStorage.getItem("theme");
if (theme !== null) {
if (theme === "light") {
changeToLightTheme();
} else {
changeToDarkTheme();
}
} else {
if (
window.matchMedia &&
window.matchMedia("(prefers-color-scheme: dark)").matches
) {
changeToDarkTheme();
}
}
theme_switcher.addEventListener("click", () => {
const attribute = theme_switcher.getAttribute("title") ?? "off"
if (attribute.indexOf("off") !== -1) {
changeToDarkTheme();
} else {
changeToLightTheme();
}
});
/* Functions */
function changeToDarkTheme() {
theme_switcher?.setAttribute("title", "turn the light on");
document.documentElement.style.setProperty("--border", "var(--dark-border)");
document.documentElement.style.setProperty("--text", "var(--dark-text)");
document.documentElement.style.setProperty("--bg", "var(--dark-bg)");
docStyle.setProperty("--border", "var(--dark-border)");
docStyle.setProperty("--text", "var(--dark-text)");
docStyle.setProperty("--bg", "var(--dark-bg)");
window.localStorage.setItem("theme", "dark");
for (let i = 0; i < imgs.length; i += 1) {
imgs[i].src = imgs[i].src.replace("-light", "-dark");
@@ -43,9 +25,9 @@ function changeToDarkTheme() {
function changeToLightTheme() {
theme_switcher?.setAttribute("title", "turn the light off");
document.documentElement.style.setProperty("--border", "var(--light-border)");
document.documentElement.style.setProperty("--text", "var(--light-text)");
document.documentElement.style.setProperty("--bg", "var(--light-bg)");
docStyle.setProperty("--border", "var(--light-border)");
docStyle.setProperty("--text", "var(--light-text)");
docStyle.setProperty("--bg", "var(--light-bg)");
window.localStorage.setItem("theme", "light");
for (let i = 0; i < imgs.length; i += 1) {
imgs[i].src = imgs[i].src.replace("-dark", "-light");
@@ -54,41 +36,32 @@ function changeToLightTheme() {
function closeMenu() {
sections_button.setAttribute("opened", "false");
sections_button.children[0].src = sections_button.children[0].src.replace(
"opened",
"closed",
);
const menuSrc = sections_button.children[0].src
menuSrc.src = menuSrc.replace("opened", "closed");
sections_menu.style.display = "none";
}
function openMenu() {
sections_button.setAttribute("opened", "true");
sections_button.children[0].src = sections_button.children[0].src.replace(
"closed",
"opened",
);
menuSrc = menuSrc.replace("closed", "opened");
sections_menu.style.display = "flex";
sections_menu.style.flexDirection = "column";
}
sections_button.addEventListener("click", () => {
if (sections_button.getAttribute("opened") === "false") {
openMenu();
} else {
closeMenu();
}
});
window.addEventListener("resize", () => {
if (sections_button.getAttribute("opened") === "true") {
closeMenu();
}
});
main.addEventListener("click", () => {
if (sections_button.getAttribute("opened") === "true") {
closeMenu();
}
/* Listeners */
sections_button.addEventListener("click", () => isMenuOpen ? closeMenu() : openMenu());
window.addEventListener("resize", () => isMenuOpen && closeMenu());
main.addEventListener("click", () => isMenuOpen && closeMenu());
theme_switcher.addEventListener("click", () => {
const title = theme_switcher.getAttribute("title") ?? "off"
if (title.indexOf("off") !== -1) changeToDarkTheme();
else changeToLightTheme();
});
/* Rest */
const userPerfersDark = window?.matchMedia?.("(prefers-color-scheme: dark)").matches
if (!theme && userPerfersDark) changeToDarkTheme();
else theme === "light" ? changeToLightTheme() : changeToDarkTheme();