Add shared auth login flow

2026-06-15 11:20:22 +02:00
parent b648d789e9
commit da29732cba
9 changed files with 883 additions and 1 deletions
@@ -0,0 +1,129 @@
+(function initHelpIconOverlayModule() {
+  const CLOSE_HANDLERS = {
+    '.sg-pulldown-demo': (root) => {
+      root.querySelectorAll('.sg-pulldown-demo').forEach((demo) => {
+        const trigger = demo.querySelector('.sg-pulldown-demo__trigger');
+        demo.dataset.open = 'false';
+        if (trigger) {
+          trigger.setAttribute('aria-expanded', 'false');
+        }
+      });
+    },
+    '.sg-sandwich-menu-wrap': (root) => {
+      root.querySelectorAll('.sg-sandwich-menu-wrap').forEach((wrap) => {
+        const button = wrap.querySelector('.sg-sandwich-button');
+        wrap.dataset.open = 'false';
+        if (button) {
+          button.setAttribute('aria-expanded', 'false');
+        }
+      });
+    },
+  };
+
+  const getViewportWidth = () => {
+    if (window.visualViewport && typeof window.visualViewport.width === 'number') {
+      return window.visualViewport.width;
+    }
+    return window.innerWidth;
+  };
+
+  const getSafeInsetPx = () => {
+    const rootStyles = getComputedStyle(document.documentElement);
+    const spacingSmallRaw = rootStyles.getPropertyValue('--spacing-small').trim();
+    const rootFontSize = parseFloat(rootStyles.fontSize) || 16;
+    const spacingSmallValue = parseFloat(spacingSmallRaw);
+    if (Number.isNaN(spacingSmallValue)) {
+      return 0;
+    }
+    if (spacingSmallRaw.endsWith('rem')) {
+      return spacingSmallValue * rootFontSize;
+    }
+    return spacingSmallValue;
+  };
+
+  const closeAllHelpIcons = (root) => {
+    root.querySelectorAll('.sg-help-icon-wrap').forEach((wrap) => {
+      const button = wrap.querySelector('.sg-help-icon');
+      const panel = wrap.querySelector('.sg-help-icon-panel');
+      wrap.dataset.open = 'false';
+      if (panel) {
+        panel.style.removeProperty('transform');
+      }
+      if (button) {
+        button.setAttribute('aria-expanded', 'false');
+      }
+    });
+  };
+
+  window.sgInitHelpIconOverlays = (options = {}) => {
+    const root = options.root || document;
+    const closeOnOpenSelectors = options.closeOnOpenSelectors || [];
+    const outsideClickIgnoreSelectors = options.outsideClickIgnoreSelectors || [];
+
+    root.querySelectorAll('.sg-help-icon-wrap').forEach((wrap) => {
+      if (wrap.dataset.helpIconInit === 'true') {
+        return;
+      }
+      wrap.dataset.helpIconInit = 'true';
+
+      const button = wrap.querySelector('.sg-help-icon');
+      const panel = wrap.querySelector('.sg-help-icon-panel');
+      if (!button || !panel) {
+        return;
+      }
+
+      button.addEventListener('click', (event) => {
+        event.stopPropagation();
+        const nextState = wrap.dataset.open !== 'true';
+
+        closeAllHelpIcons(root);
+        closeOnOpenSelectors.forEach((selector) => {
+          const handler = CLOSE_HANDLERS[selector];
+          if (handler) {
+            handler(root);
+          }
+        });
+
+        if (!nextState) {
+          return;
+        }
+
+        wrap.dataset.align = 'left';
+        wrap.dataset.open = 'true';
+        button.setAttribute('aria-expanded', 'true');
+
+        const viewportWidth = getViewportWidth();
+        const panelRect = panel.getBoundingClientRect();
+        if (panelRect.right > viewportWidth) {
+          wrap.dataset.align = 'right';
+        }
+        const alignedPanelRect = panel.getBoundingClientRect();
+        if (alignedPanelRect.left < 0) {
+          wrap.dataset.align = 'left';
+        }
+
+        const clampedRect = panel.getBoundingClientRect();
+        const safeInset = getSafeInsetPx();
+        let shiftX = 0;
+        if (clampedRect.right > (viewportWidth - safeInset)) {
+          shiftX -= clampedRect.right - (viewportWidth - safeInset);
+        }
+        if ((clampedRect.left + shiftX) < safeInset) {
+          shiftX += safeInset - (clampedRect.left + shiftX);
+        }
+        if (shiftX !== 0) {
+          panel.style.transform = `translateX(${shiftX}px)`;
+        }
+      });
+    });
+
+    document.addEventListener('click', (event) => {
+      const isInsideIgnoredZone = ['.sg-help-icon-wrap', ...outsideClickIgnoreSelectors]
+        .some((selector) => event.target.closest(selector));
+      if (isInsideIgnoredZone) {
+        return;
+      }
+      closeAllHelpIcons(root);
+    });
+  };
+})();