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