99 lines
3.6 KiB
JavaScript
99 lines
3.6 KiB
JavaScript
import { setLanguage, currentLang, t } from "../i18n.js";
|
|
|
|
/**
|
|
* Sucht alle HTML-Elemente mir dem Attribut 'data-i18n'
|
|
* und aktualisiert ihren Textinhalt basierend auf der aktuellen Sprache.
|
|
*/
|
|
export function updateTranslations() {
|
|
const elements = document.querySelectorAll('[data-i18n]');
|
|
elements.forEach(el => {
|
|
const key = el.getAttribute('data-i18n');
|
|
el.innerHTML = t(key);
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Initialisiert alle Dropdowns und die Sprachauswahl.
|
|
*
|
|
* @param {Function} updatePlaceholdersCallback - Wird aufgrufen, wenn
|
|
* die Sprache gewechselt wurde,
|
|
* um Platzhalter dynamisch anzupassen.
|
|
*/
|
|
export function initDropdowns(updatePlaceholdersCallback) {
|
|
const langToggle = document.getElementById('lang-toggle');
|
|
const langMenu = document.getElementById('lang-menu');
|
|
const userToggle = document.getElementById('user-toggle');
|
|
const userMenu = document.getElementById('user-menu');
|
|
|
|
const closeAllDropdowns = () => {
|
|
if (langMenu) langMenu.classList.remove('show');
|
|
if (userMenu) userMenu.classList.remove('show');
|
|
};
|
|
|
|
if (langToggle && langMenu) {
|
|
langToggle.onclick = (e) => {
|
|
e.stopPropagation();
|
|
const isShowing = langMenu.classList.contains('show');
|
|
closeAllDropdowns();
|
|
if (!isShowing) langMenu.classList.add('show');
|
|
};
|
|
langMenu.onclick = (e) => e.stopPropagation();
|
|
}
|
|
|
|
if (userToggle && userMenu) {
|
|
userToggle.onclick = (e) => {
|
|
e.stopPropagation();
|
|
const isShowing = userMenu.classList.contains('show');
|
|
closeAllDropdowns();
|
|
if (!isShowing) userMenu.classList.add('show');
|
|
};
|
|
userMenu.onclick = (e) => e.stopPropagation();
|
|
}
|
|
|
|
document.addEventListener('click', closeAllDropdowns);
|
|
|
|
if (langMenu) {
|
|
const langItems = langMenu.querySelectorAll('.dropdown-item');
|
|
langItems.forEach(item => {
|
|
item.onclick = () => {
|
|
const selectedLang = item.getAttribute('data-lang');
|
|
|
|
document.getElementById('current-lang-text').textContent = selectedLang.toUpperCase();
|
|
document.getElementById('current-flag').textContent = item.querySelector('.flag-icon').textContent;
|
|
|
|
setLanguage(selectedLang);
|
|
updateTranslations();
|
|
|
|
if (updatePlaceholdersCallback) {
|
|
updatePlaceholdersCallback();
|
|
}
|
|
|
|
closeAllDropdowns();
|
|
};
|
|
});
|
|
}
|
|
|
|
const btnLogout = document.getElementById('btn-logout');
|
|
if (btnLogout) {
|
|
btnLogout.onclick = () => {
|
|
sessionStorage.removeItem('void_access_token');
|
|
sessionStorage.removeItem('void_refresh_token');
|
|
localStorage.removeItem('void_refresh_token');
|
|
sessionStorage.removeItem('void_user');
|
|
window.location.reload();
|
|
};
|
|
}
|
|
|
|
if (langMenu) {
|
|
const activeLangItem = langMenu.querySelector(`.dropdown-item[data-lang="${currentLang}"]`);
|
|
if (activeLangItem) {
|
|
const flag = activeLangItem.querySelector('.flag-icon').textContent;
|
|
const langText = document.getElementById('current-lang-text');
|
|
const flagIcon = document.getElementById('current-flag');
|
|
|
|
if (langText) langText.textContent = currentLang.toUpperCase();
|
|
if (flagIcon) flagIcon.textContent = flag;
|
|
}
|
|
}
|
|
}
|