forked from Decentrala/website
93 lines
3.2 KiB
JavaScript
93 lines
3.2 KiB
JavaScript
(function () {
|
|
const theme = window.localStorage.getItem("theme");
|
|
const prefersDark = window?.matchMedia?.("(prefers-color-scheme: dark)").matches;
|
|
const isDark = theme === "dark" || (!theme && prefersDark);
|
|
|
|
if (isDark) document.documentElement.classList.add("dark");
|
|
|
|
// Swap images as soon as DOM is ready (script runs in <head>, imgs not parsed yet)
|
|
if (isDark) {
|
|
window.addEventListener("DOMContentLoaded", () => {
|
|
document.querySelectorAll("img[src*='-light']").forEach((img) => {
|
|
img.src = img.src.replace("-light", "-dark");
|
|
});
|
|
}, { once: true });
|
|
}
|
|
|
|
window.changeTheme = (toDark) => {
|
|
if (toDark) {
|
|
window.localStorage.setItem("theme", "dark");
|
|
document.documentElement.classList.add("dark");
|
|
document.querySelectorAll("img[src*='-light']").forEach((img) => {
|
|
img.src = img.src.replace("-light", "-dark");
|
|
});
|
|
} else {
|
|
window.localStorage.setItem("theme", "light");
|
|
document.documentElement.classList.remove("dark");
|
|
document.querySelectorAll("img[src*='-dark']").forEach((img) => {
|
|
img.src = img.src.replace("-dark", "-light");
|
|
});
|
|
}
|
|
}
|
|
})();
|
|
|
|
window.addEventListener("DOMContentLoaded", () => {
|
|
const getById = (id) => document.getElementById(id);
|
|
const getByClass = (className) => document.getElementsByClassName(className)[0];
|
|
|
|
const themeBtn = getById("theme-switcher");
|
|
const hamburger = getByClass("hamburger");
|
|
const hamburgerIcon = hamburger?.children[0];
|
|
const menu = document.getElementsByTagName("nav")[0];
|
|
const main = document.getElementsByTagName("main")[0];
|
|
const isMenuOpen = () => hamburger?.classList.contains("open");
|
|
|
|
/* Functions */
|
|
|
|
const closeMenu = () => {
|
|
hamburger.classList = "hamburger closed"
|
|
hamburgerIcon.src = hamburgerIcon.src.replace("opened", "closed");
|
|
menu.classList = "menu closed";
|
|
}
|
|
|
|
const openMenu = () => {
|
|
hamburger.classList = "hamburger open"
|
|
hamburgerIcon.src = hamburgerIcon.src.replace("closed", "opened");
|
|
menu.classList = "menu open";
|
|
}
|
|
|
|
/* Listeners */
|
|
|
|
window.addEventListener("resize", () => isMenuOpen() && closeMenu());
|
|
if (main) main.addEventListener("click", () => isMenuOpen() && closeMenu());
|
|
|
|
/* Language persistence */
|
|
const currentLang = document.documentElement.lang || "sr";
|
|
const anchors = document.getElementsByTagName("a");
|
|
Array.from(anchors).forEach((a) => {
|
|
// Skip language switcher links
|
|
if (a.classList.contains("lang")) return;
|
|
const href = a.getAttribute("href");
|
|
if (!href) return;
|
|
if (href.startsWith("/")) {
|
|
// Replace existing language prefix or add one
|
|
if (href.startsWith("/sr") || href.startsWith("/en")) {
|
|
if (!href.startsWith(`/${currentLang}`)) {
|
|
a.setAttribute("href", `/${currentLang}${href.slice(3)}`);
|
|
}
|
|
} else if (currentLang !== "sr") {
|
|
// Only prepend language prefix for non-default languages
|
|
a.setAttribute("href", `/${currentLang}${href}`);
|
|
}
|
|
}
|
|
});
|
|
hamburger?.addEventListener("click", () => isMenuOpen() ? closeMenu() : openMenu());
|
|
|
|
if (themeBtn) {
|
|
themeBtn.addEventListener("click", () => {
|
|
const isDark = document.documentElement.classList.contains("dark");
|
|
changeTheme(!isDark);
|
|
});
|
|
}
|
|
});
|