62 lines
1.7 KiB
JavaScript
62 lines
1.7 KiB
JavaScript
import { getCookie, setCookie } from "../core/cookies.js";
|
|
|
|
const SUPPORTED_LANGUAGES = ["en", "de"];
|
|
|
|
// Language from cookie, else browser language, else "en".
|
|
export function detectLanguage() {
|
|
let lang = getCookie("lang");
|
|
if (lang == null) {
|
|
lang = navigator.language.split("-")[0];
|
|
}
|
|
if (!SUPPORTED_LANGUAGES.includes(lang)) {
|
|
lang = "en";
|
|
}
|
|
|
|
document.documentElement.lang = lang;
|
|
return lang;
|
|
}
|
|
|
|
export function setupLanguageDropdown(lang, buttonId, menuId, dropdownId) {
|
|
const button = document.getElementById(buttonId);
|
|
const menu = document.getElementById(menuId);
|
|
const dropdown = document.getElementById(dropdownId);
|
|
const items = menu.querySelectorAll(".lang-item");
|
|
|
|
button.textContent = lang;
|
|
|
|
button.addEventListener("click", (e) => {
|
|
e.stopPropagation();
|
|
|
|
items.forEach(item => {
|
|
item.classList.toggle("hidden", item.dataset.lang == lang);
|
|
});
|
|
|
|
menu.classList.toggle("hidden");
|
|
dropdown.classList.toggle("show-border");
|
|
});
|
|
|
|
items.forEach(item => {
|
|
item.addEventListener("click", () => {
|
|
const lang_selected = item.dataset.lang;
|
|
|
|
button.textContent = item.textContent;
|
|
|
|
menu.classList.add("hidden");
|
|
dropdown.classList.remove("show-border");
|
|
|
|
items.forEach(el => el.classList.add("hidden"));
|
|
|
|
setCookie("lang", lang_selected, "3600");
|
|
location.reload();
|
|
});
|
|
});
|
|
|
|
document.addEventListener("click", (e) => {
|
|
if (!e.target.closest(`#${dropdownId}`)) {
|
|
menu.classList.add("hidden");
|
|
dropdown.classList.remove("show-border");
|
|
items.forEach(el => el.classList.add("hidden"));
|
|
}
|
|
});
|
|
}
|