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

[JS] Wrapped everything to DOM Loaded

Browse Source
This commit is contained in:
coja
2026-05-02 03:56:03 +02:00
parent 5958bbc24f
commit c40f101540
1 changed files with 56 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
site/scripts/main.js
View File

@@ -1,59 +1,62 @@
const getById = (id) => document.getElementById(id); window.addEventListener("DOMContentLoaded", () => {
const getByClass = (className) => document.getElementsByClassName(className)[0];
const themeBtn = getById("theme-switcher"); const getById = (id) => document.getElementById(id);
const hamburger = getByClass("hamburger"); const getByClass = (className) => document.getElementsByClassName(className)[0];
const hamburgerIcon = hamburger.children[0]
const menu = document.getElementsByTagName("nav")[0];
const imgs = document.getElementsByTagName("img");
const main = document.getElementsByTagName("main")[0];
const isMenuOpen = () => hamburger.classList.contains("open");
const theme = window.localStorage.getItem("theme");
/* Functions */ const themeBtn = getById("theme-switcher");
const hamburger = getByClass("hamburger");
const hamburgerIcon = hamburger.children[0]
const menu = document.getElementsByTagName("nav")[0];
const imgs = document.getElementsByTagName("img");
const main = document.getElementsByTagName("main")[0];
const isMenuOpen = () => hamburger.classList.contains("open");
const theme = window.localStorage.getItem("theme");
const changeToDarkTheme = () => { /* Functions */
const changeToDarkTheme = () => {
document.documentElement.classList.add("dark"); document.documentElement.classList.add("dark");
themeBtn?.setAttribute("title", "turn the light on"); themeBtn?.setAttribute("title", "turn the light on");
Array.from(imgs).forEach((img) => { Array.from(imgs).forEach((img) => {
if (img.src.includes("-light")) img.src = img.src.replace("-light", "-dark"); if (img.src.includes("-light")) img.src = img.src.replace("-light", "-dark");
}); });
} }
const changeToLightTheme = () => { const changeToLightTheme = () => {
document.documentElement.classList.remove("dark"); document.documentElement.classList.remove("dark");
themeBtn?.setAttribute("title", "turn the light off"); themeBtn?.setAttribute("title", "turn the light off");
Array.from(imgs).forEach((img) => { Array.from(imgs).forEach((img) => {
if (img.src.includes("-dark")) img.src = img.src.replace("-dark", "-light"); if (img.src.includes("-dark")) img.src = img.src.replace("-dark", "-light");
}); });
} }
const closeMenu = () => { const closeMenu = () => {
hamburger.classList = "hamburger closed" hamburger.classList = "hamburger closed"
hamburgerIcon.src = hamburgerIcon.src.replace("opened", "closed"); hamburgerIcon.src = hamburgerIcon.src.replace("opened", "closed");
menu.classList = "menu closed"; menu.classList = "menu closed";
} }
const openMenu = () => { const openMenu = () => {
hamburger.classList = "hamburger open" hamburger.classList = "hamburger open"
hamburgerIcon.src = hamburgerIcon.src.replace("closed", "opened"); hamburgerIcon.src = hamburgerIcon.src.replace("closed", "opened");
menu.classList = "menu open"; menu.classList = "menu open";
} }
/* Listeners */ /* Listeners */
window.addEventListener("resize", () => isMenuOpen() && closeMenu()); window.addEventListener("resize", () => isMenuOpen() && closeMenu());
main.addEventListener("click", () => isMenuOpen() && closeMenu()); main.addEventListener("click", () => isMenuOpen() && closeMenu());
hamburger.addEventListener("click", () => isMenuOpen() ? closeMenu() : openMenu()); hamburger?.addEventListener("click", () => isMenuOpen() ? closeMenu() : openMenu());
themeBtn.addEventListener("click", () => { themeBtn.addEventListener("click", () => {
const title = themeBtn.getAttribute("title") ?? "off" const title = themeBtn.getAttribute("title") ?? "off"
if (title.indexOf("off") !== -1) changeToDarkTheme(); if (title.indexOf("off") !== -1) changeToDarkTheme();
else changeToLightTheme(); else changeToLightTheme();
}); });
/* Rest */ /* Rest */
const userPerfersDark = window?.matchMedia?.("(prefers-color-scheme: dark)").matches const userPerfersDark = window?.matchMedia?.("(prefers-color-scheme: dark)").matches
if (!theme && userPerfersDark) changeToDarkTheme(); if (!theme && userPerfersDark) changeToDarkTheme();
else theme === "light" ? changeToLightTheme() : changeToDarkTheme(); else theme === "light" ? changeToLightTheme() : changeToDarkTheme();
})