109 lines
3.9 KiB
JavaScript
109 lines
3.9 KiB
JavaScript
// public/assets/js/header.js
|
|
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
// -------------------------
|
|
// Avatar-Menü ein-/ausblenden
|
|
// -------------------------
|
|
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')) {
|
|
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');
|
|
// kleine Fokushilfe: Escape schließt, Klick auf Hintergrund auch
|
|
document.body.classList.add('overflow-hidden');
|
|
}
|
|
|
|
function hideLogoutModal() {
|
|
if (!backdrop) return;
|
|
backdrop.classList.add('hidden');
|
|
document.body.classList.remove('overflow-hidden');
|
|
logoutTarget = null;
|
|
}
|
|
|
|
// Logout-Link(s) abfangen
|
|
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 (außerhalb der Card) schließt ebenfalls
|
|
backdrop.addEventListener('click', function (event) {
|
|
const card = backdrop.querySelector('div.w-full.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();
|
|
}
|
|
});
|
|
}
|
|
});
|