198 lines
6.8 KiB
JavaScript
198 lines
6.8 KiB
JavaScript
// public/assets/js/header.js
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
// --------------------------------------------------
|
|
// Sprachauflösung: basiert NUR auf usbConfig / i18n
|
|
// --------------------------------------------------
|
|
const cfg = window.usbConfig || {};
|
|
const i18nCfg = cfg.i18n || {};
|
|
const availLangs = i18nCfg.available || {};
|
|
const availCodes = Object.keys(availLangs);
|
|
|
|
function normalizeLang(code) {
|
|
if (!code) return '';
|
|
return String(code).slice(0, 2).toLowerCase();
|
|
}
|
|
|
|
function resolveCurrentLang() {
|
|
const url = new URL(window.location.href);
|
|
const urlLang = normalizeLang(url.searchParams.get('lang'));
|
|
|
|
// 1) ?lang= aus der URL, wenn gültig
|
|
if (urlLang && availCodes.includes(urlLang)) {
|
|
return urlLang;
|
|
}
|
|
|
|
// 2) localStorage (vom lang.js gesetzt)
|
|
const stored = normalizeLang(localStorage.getItem('usbcheck_lang'));
|
|
if (stored && availCodes.includes(stored)) {
|
|
return stored;
|
|
}
|
|
|
|
// 3) PHP-Konfig (fileload/app_config)
|
|
const cfgLang = normalizeLang(i18nCfg.current || cfg.lang);
|
|
if (cfgLang && availCodes.includes(cfgLang)) {
|
|
return cfgLang;
|
|
}
|
|
|
|
// 4) <html lang="...">
|
|
const docLang = normalizeLang(document.documentElement.getAttribute('lang'));
|
|
if (docLang && availCodes.includes(docLang)) {
|
|
return docLang;
|
|
}
|
|
|
|
// 5) Fallback: en, wenn vorhanden
|
|
if (availCodes.includes('en')) {
|
|
return 'en';
|
|
}
|
|
|
|
// 6) sonst erste verfügbare Sprache
|
|
if (availCodes.length > 0) {
|
|
return availCodes[0];
|
|
}
|
|
|
|
// 7) absolute Notlösung
|
|
return 'en';
|
|
}
|
|
|
|
// --------------------------------------------------
|
|
// LOGIN-BUTTON → /login mit redirect + lang
|
|
// --------------------------------------------------
|
|
const loginBtn = document.getElementById('loginButton');
|
|
|
|
if (loginBtn) {
|
|
loginBtn.addEventListener('click', function (event) {
|
|
event.preventDefault();
|
|
|
|
const currentPath = window.location.pathname || '/';
|
|
const currentQuery = window.location.search || '';
|
|
const redirect = currentPath + currentQuery;
|
|
|
|
const lang = resolveCurrentLang();
|
|
|
|
// Wenn wir bereits auf /login sind → nur zum #auth scrollen
|
|
if (currentPath === '/login' || currentPath === '/login/') {
|
|
const authEl = document.getElementById('auth');
|
|
if (authEl) {
|
|
authEl.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
|
}
|
|
return;
|
|
}
|
|
|
|
// Sonst: auf Login-Seite mit lang + redirect-Parameter
|
|
const url = '/login/?lang=' + encodeURIComponent(lang) +
|
|
'&redirect=' + encodeURIComponent(redirect) +
|
|
'#auth';
|
|
|
|
window.location.href = url;
|
|
});
|
|
}
|
|
|
|
// --------------------------------------------------
|
|
// AVATAR-MENÜ (userAvatar / userMenu)
|
|
// --------------------------------------------------
|
|
const avatarBtn = document.getElementById('userAvatar');
|
|
const userMenu = document.getElementById('userMenu');
|
|
|
|
if (avatarBtn && userMenu) {
|
|
avatarBtn.addEventListener('click', function (event) {
|
|
event.stopPropagation();
|
|
userMenu.classList.toggle('hidden');
|
|
|
|
const expanded = avatarBtn.getAttribute('aria-expanded') === 'true';
|
|
avatarBtn.setAttribute('aria-expanded', expanded ? 'false' : 'true');
|
|
});
|
|
|
|
// Klick außerhalb schließt Menü
|
|
document.addEventListener('click', function (event) {
|
|
if (userMenu.classList.contains('hidden')) {
|
|
return;
|
|
}
|
|
|
|
const clickedInsideMenu = userMenu.contains(event.target);
|
|
const clickedAvatarButton = avatarBtn.contains(event.target);
|
|
|
|
if (!clickedInsideMenu && !clickedAvatarButton) {
|
|
userMenu.classList.add('hidden');
|
|
avatarBtn.setAttribute('aria-expanded', 'false');
|
|
}
|
|
});
|
|
}
|
|
|
|
// --------------------------------------------------
|
|
// LOGOUT-MODAL
|
|
// --------------------------------------------------
|
|
const logoutButtons = document.querySelectorAll('[data-logout-link="true"]');
|
|
const backdrop = document.getElementById('logoutModalBackdrop');
|
|
const btnConfirm = document.getElementById('logoutConfirm');
|
|
const btnCancel = document.getElementById('logoutCancel');
|
|
|
|
let logoutTarget = null;
|
|
|
|
function showLogoutModal(targetHref) {
|
|
logoutTarget = targetHref || null;
|
|
if (!backdrop) return;
|
|
|
|
backdrop.classList.remove('hidden');
|
|
document.body.classList.add('overflow-hidden');
|
|
}
|
|
|
|
function hideLogoutModal() {
|
|
if (!backdrop) return;
|
|
backdrop.classList.add('hidden');
|
|
document.body.classList.remove('overflow-hidden');
|
|
logoutTarget = null;
|
|
}
|
|
|
|
if (logoutButtons.length && backdrop && btnConfirm && btnCancel) {
|
|
logoutButtons.forEach(function (btn) {
|
|
btn.addEventListener('click', function (event) {
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
|
|
const href = btn.getAttribute('data-logout-href')
|
|
|| btn.getAttribute('href')
|
|
|| '/auth/logout';
|
|
|
|
showLogoutModal(href);
|
|
|
|
// Avatar-Menü beim Öffnen des Modals schließen
|
|
if (userMenu && !userMenu.classList.contains('hidden')) {
|
|
userMenu.classList.add('hidden');
|
|
if (avatarBtn) {
|
|
avatarBtn.setAttribute('aria-expanded', 'false');
|
|
}
|
|
}
|
|
});
|
|
});
|
|
|
|
// Bestätigen → weiter zur Logout-URL
|
|
btnConfirm.addEventListener('click', function () {
|
|
if (logoutTarget) {
|
|
window.location.href = logoutTarget;
|
|
} else {
|
|
window.location.href = '/auth/logout';
|
|
}
|
|
});
|
|
|
|
// Abbrechen → Modal schließen
|
|
btnCancel.addEventListener('click', function () {
|
|
hideLogoutModal();
|
|
});
|
|
|
|
// Klick auf Hintergrund schließt Modal (außer man klickt auf die Card)
|
|
backdrop.addEventListener('click', function (event) {
|
|
const card = backdrop.querySelector('.max-w-sm');
|
|
if (card && !card.contains(event.target)) {
|
|
hideLogoutModal();
|
|
}
|
|
});
|
|
|
|
// ESC-Taste schließt Modal
|
|
document.addEventListener('keydown', function (event) {
|
|
if (event.key === 'Escape' && !backdrop.classList.contains('hidden')) {
|
|
hideLogoutModal();
|
|
}
|
|
});
|
|
}
|
|
});
|