Merge branch 'mai/hermes/issue-4-impressum-als': Impressum als Klick-Overlay (#4)

shared/impressum.js

@@ -10,8 +10,8 @@
  *   data-owner="msbls"          (default) — Kurzverweis auf msbls.de
  *   data-owner="flexsiebels"    — Kurzverweis auf flexsiebels.de
  *   data-owner="martinsiebels"  — volles Impressum Martin Siebels (separate Person, Osnabrück)
- *   data-variant="minimal"      (default) — Einzeiler im Footer
+ *   data-variant="minimal"      (default) — Einzeiler im Footer (inline)
- *   data-variant="full"         — vollständige Angaben nach § 5 TMG
+ *   data-variant="full"         — kleiner Trigger im Footer, voller § 5 TMG-Block im Overlay
  *
  *   Legacy-Alias: data-style (gleiche Werte wie data-variant).
  *
@@ -54,24 +54,182 @@
   };
 
   const config = owners[owner] || owners.msbls;
-  const html = config[variant] || config.minimal;
-
-  const el = document.createElement('div');
-  el.className = 'onepager-impressum';
-  el.innerHTML = html;
-
-  // Dezent, erbt Farben vom Container.
-  el.style.cssText = 'text-align:center;font-size:0.75rem;opacity:0.6;padding:12px 0;margin-top:4px;line-height:1.7;';
-  el.querySelectorAll('a').forEach(a => {
-    a.style.color = 'inherit';
-    a.style.textDecoration = 'underline';
-    a.style.textDecorationThickness = '1px';
-    a.style.textUnderlineOffset = '2px';
-  });
 
   const target = document.getElementById('impressum')
     || document.querySelector('footer .container')
     || document.querySelector('footer')
     || document.body;
-  target.appendChild(el);
+
+  if (variant === 'full') {
+    renderOverlay(config.full, target);
+  } else {
+    renderInline(config.minimal, target);
+  }
+
+  function renderInline(html, target) {
+    const el = document.createElement('div');
+    el.className = 'onepager-impressum';
+    el.innerHTML = html;
+    el.style.cssText = 'text-align:center;font-size:0.75rem;opacity:0.6;padding:12px 0;margin-top:4px;line-height:1.7;';
+    el.querySelectorAll('a').forEach(a => {
+      a.style.color = 'inherit';
+      a.style.textDecoration = 'underline';
+      a.style.textDecorationThickness = '1px';
+      a.style.textUnderlineOffset = '2px';
+    });
+    target.appendChild(el);
+  }
+
+  function renderOverlay(html, target) {
+    // Trigger im Footer — klein, dezent, erbt Farben.
+    const trigger = document.createElement('button');
+    trigger.type = 'button';
+    trigger.className = 'onepager-impressum-trigger';
+    trigger.textContent = 'Impressum';
+    trigger.style.cssText = [
+      'display:inline-block',
+      'background:none',
+      'border:none',
+      'padding:12px 8px',
+      'margin-top:4px',
+      'font:inherit',
+      'font-size:0.75rem',
+      'color:inherit',
+      'opacity:0.6',
+      'cursor:pointer',
+      'text-decoration:underline',
+      'text-decoration-thickness:1px',
+      'text-underline-offset:2px',
+      'transition:opacity 0.2s ease',
+    ].join(';');
+    trigger.addEventListener('mouseenter', () => { trigger.style.opacity = '1'; });
+    trigger.addEventListener('mouseleave', () => { trigger.style.opacity = '0.6'; });
+    trigger.addEventListener('focus', () => { trigger.style.opacity = '1'; });
+    trigger.addEventListener('blur', () => { trigger.style.opacity = '0.6'; });
+
+    const wrap = document.createElement('div');
+    wrap.className = 'onepager-impressum';
+    wrap.style.cssText = 'text-align:center;padding:8px 0;margin-top:4px;';
+    wrap.appendChild(trigger);
+    target.appendChild(wrap);
+
+    let backdrop = null;
+    let lastFocus = null;
+
+    trigger.addEventListener('click', open);
+
+    function open() {
+      if (backdrop) return;
+      lastFocus = document.activeElement;
+
+      backdrop = document.createElement('div');
+      backdrop.className = 'onepager-impressum-backdrop';
+      backdrop.style.cssText = [
+        'position:fixed',
+        'inset:0',
+        'background:rgba(0,0,0,0.55)',
+        'display:flex',
+        'align-items:center',
+        'justify-content:center',
+        'padding:24px',
+        'z-index:99999',
+        'opacity:0',
+        'transition:opacity 0.18s ease',
+      ].join(';');
+
+      const card = document.createElement('div');
+      card.className = 'onepager-impressum-card';
+      card.setAttribute('role', 'dialog');
+      card.setAttribute('aria-modal', 'true');
+      card.setAttribute('aria-label', 'Impressum');
+      card.style.cssText = [
+        'position:relative',
+        'max-width:420px',
+        'width:100%',
+        'background:#fff',
+        'color:#111',
+        'padding:32px 28px 28px',
+        'border-radius:8px',
+        'box-shadow:0 20px 60px rgba(0,0,0,0.35)',
+        'font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif',
+        'font-size:0.9rem',
+        'line-height:1.55',
+        'transform:translateY(8px)',
+        'transition:transform 0.18s ease',
+        'box-sizing:border-box',
+      ].join(';');
+
+      const close = document.createElement('button');
+      close.type = 'button';
+      close.setAttribute('aria-label', 'Schließen');
+      close.innerHTML = '×';
+      close.style.cssText = [
+        'position:absolute',
+        'top:6px',
+        'right:10px',
+        'background:none',
+        'border:none',
+        'font-size:1.6rem',
+        'line-height:1',
+        'color:#666',
+        'cursor:pointer',
+        'padding:6px 10px',
+        'border-radius:4px',
+        'transition:color 0.15s ease',
+      ].join(';');
+      close.addEventListener('mouseenter', () => { close.style.color = '#000'; });
+      close.addEventListener('mouseleave', () => { close.style.color = '#666'; });
+      close.addEventListener('click', dismiss);
+
+      const content = document.createElement('div');
+      content.innerHTML = html;
+      content.style.cssText = 'margin-top:4px;';
+      content.querySelectorAll('a').forEach(a => {
+        a.style.color = '#0057b8';
+        a.style.textDecoration = 'underline';
+      });
+      content.querySelectorAll('strong').forEach(s => {
+        s.style.display = 'block';
+        s.style.marginBottom = '8px';
+      });
+
+      card.appendChild(close);
+      card.appendChild(content);
+      backdrop.appendChild(card);
+      document.body.appendChild(backdrop);
+
+      // Trigger fade-in nach dem Mounten.
+      requestAnimationFrame(() => {
+        backdrop.style.opacity = '1';
+        card.style.transform = 'translateY(0)';
+      });
+
+      backdrop.addEventListener('click', (e) => {
+        if (e.target === backdrop) dismiss();
+      });
+      document.addEventListener('keydown', onKey);
+      close.focus();
+    }
+
+    function dismiss() {
+      if (!backdrop) return;
+      document.removeEventListener('keydown', onKey);
+      const node = backdrop;
+      backdrop = null;
+      node.style.opacity = '0';
+      setTimeout(() => {
+        if (node.parentNode) node.parentNode.removeChild(node);
+        if (lastFocus && typeof lastFocus.focus === 'function') {
+          lastFocus.focus();
+        }
+      }, 180);
+    }
+
+    function onKey(e) {
+      if (e.key === 'Escape') {
+        e.preventDefault();
+        dismiss();
+      }
+    }
+  }
 })();