Updated imprint and legal documents

public/js/legal-ui.js

@@ -1,10 +1,10 @@
 (function (ns) {
   'use strict';
 
+  const DROPDOWN_ANIMATION_MS = 180;
   const dialog = document.getElementById('info-dialog');
   const title = document.getElementById('info-dialog-title');
-  const menu = document.getElementById('info-menu');
-  const backButton = document.getElementById('info-back');
+  const dropdown = document.getElementById('info-dropdown');
   const closeButton = document.getElementById('info-close');
   const infoButton = document.getElementById('info-button');
   const pageTitles = Object.freeze({
@@ -12,6 +12,8 @@
     imprint: 'Impressum',
     technology: 'Cookies und Technik'
   });
+  let dropdownOpen = false;
+  let dropdownCloseTimer = null;
 
   function isActivation(event) {
     if (event.type === 'keydown') return event.key === 'Enter' || event.key === ' ';
@@ -21,6 +23,7 @@
   }
 
   function activate(element, handler) {
+    if (!element) return;
     element.addEventListener('pointerup', event => {
       if (!isActivation(event)) return;
       event.preventDefault();
@@ -35,6 +38,64 @@
     });
   }
 
+  function setClass(element, className, enabled) {
+    if (!element || !element.classList) return;
+    element.classList.toggle(className, enabled);
+  }
+
+  function runNextFrame(callback) {
+    if (typeof globalThis.requestAnimationFrame === 'function') {
+      globalThis.requestAnimationFrame(callback);
+      return;
+    }
+    callback();
+  }
+
+  function schedule(callback, timeout) {
+    if (typeof globalThis.setTimeout === 'function') return globalThis.setTimeout(callback, timeout);
+    callback();
+    return null;
+  }
+
+  function cancelSchedule(timer) {
+    if (timer === null || typeof globalThis.clearTimeout !== 'function') return;
+    globalThis.clearTimeout(timer);
+  }
+
+  function setDropdownOpen(open) {
+    if (!dropdown || !infoButton) return;
+    dropdownOpen = open;
+    infoButton.setAttribute('aria-expanded', open ? 'true' : 'false');
+    cancelSchedule(dropdownCloseTimer);
+    dropdownCloseTimer = null;
+
+    if (open) {
+      dropdown.hidden = false;
+      runNextFrame(() => setClass(dropdown, 'is-open', true));
+      return;
+    }
+
+    setClass(dropdown, 'is-open', false);
+    dropdownCloseTimer = schedule(() => {
+      if (dropdownOpen) return;
+      dropdown.hidden = true;
+    }, DROPDOWN_ANIMATION_MS);
+  }
+
+  function toggleDropdown() {
+    setDropdownOpen(!dropdownOpen);
+  }
+
+  function elementContains(element, target) {
+    if (!element || !target) return false;
+    if (element === target) return true;
+    return typeof element.contains === 'function' && element.contains(target);
+  }
+
+  function isInsideInfoControl(target) {
+    return elementContains(infoButton, target) || elementContains(dropdown, target);
+  }
+
   function syncStorageToggles() {
     const enabled = ns.PrivacyStorage.isProgressStorageEnabled();
     document.querySelectorAll('.progress-storage-toggle').forEach(toggle => {
@@ -45,22 +106,11 @@
     });
   }
 
-  function showMenu() {
-    title.textContent = 'Informationen';
-    menu.hidden = false;
-    backButton.hidden = true;
-    document.querySelectorAll('[data-info-page]').forEach(page => {
-      page.hidden = true;
-    });
-  }
-
   function showPage(name) {
     const page = document.querySelector(`[data-info-page="${name}"]`);
     if (!page) return;
 
     title.textContent = pageTitles[name] ?? 'Informationen';
-    menu.hidden = true;
-    backButton.hidden = false;
     document.querySelectorAll('[data-info-page]').forEach(item => {
       item.hidden = item !== page;
     });
@@ -68,18 +118,22 @@
     if (content) content.scrollTop = 0;
   }
 
-  function openDialog() {
-    if (dialog.open) return;
-    showMenu();
+  function openDialog(name = 'privacy') {
+    const pageName = Object.prototype.hasOwnProperty.call(pageTitles, name) ? name : 'privacy';
+    setDropdownOpen(false);
+    showPage(pageName);
     syncStorageToggles();
-    if (typeof dialog.showModal === 'function') dialog.showModal();
-    else dialog.setAttribute('open', '');
+    if (!dialog.open) {
+      if (typeof dialog.showModal === 'function') dialog.showModal();
+      else dialog.setAttribute('open', '');
+    }
     closeButton.focus();
   }
 
   function closeDialog() {
     if (typeof dialog.close === 'function') dialog.close();
     else dialog.removeAttribute('open');
+    setDropdownOpen(false);
     infoButton.focus();
   }
 
@@ -95,11 +149,21 @@
     });
   }
 
-  activate(infoButton, openDialog);
+  activate(infoButton, toggleDropdown);
   activate(closeButton, closeDialog);
-  activate(backButton, showMenu);
   document.querySelectorAll('[data-info-target]').forEach(button => {
-    activate(button, () => showPage(button.dataset.infoTarget));
+    activate(button, () => openDialog(button.dataset.infoTarget));
+  });
+
+  document.addEventListener('pointerup', event => {
+    if (!dropdownOpen || isInsideInfoControl(event.target)) return;
+    setDropdownOpen(false);
+  });
+  document.addEventListener('keydown', event => {
+    if (!dropdownOpen || event.key !== 'Escape' || dialog.open) return;
+    event.preventDefault();
+    setDropdownOpen(false);
+    infoButton.focus();
   });
 
   dialog.addEventListener('pointerup', event => {
@@ -116,5 +180,11 @@
   bindStorageToggles();
   syncStorageToggles();
 
-  ns.LegalUi = Object.freeze({ open: openDialog, close: closeDialog, syncStorageToggles });
+  ns.LegalUi = Object.freeze({
+    open: openDialog,
+    close: closeDialog,
+    toggleMenu: toggleDropdown,
+    closeMenu: () => setDropdownOpen(false),
+    syncStorageToggles
+  });
 }(globalThis.Wegwichtel ??= {}));