popup

public/assets/js/app.js

@@ -120,3 +120,71 @@ if (setupTabs.length > 0) {
   const activeSetupTab = document.querySelector('[data-setup-tab-target].is-active') || setupTabs[0];
   activateSetupTab(activeSetupTab.dataset.setupTabTarget);
 }
+
+window.NexusModal = (() => {
+  const openModals = new Set();
+
+  const syncBodyState = () => {
+    document.body.classList.toggle('has-modal-open', openModals.size > 0);
+  };
+
+  const create = (root, options = {}) => {
+    if (!root) {
+      return null;
+    }
+
+    const modal = {
+      root,
+      isOpen: () => root.classList.contains('is-open'),
+      open() {
+        root.classList.add('is-open');
+        root.setAttribute('aria-hidden', 'false');
+        openModals.add(root);
+        syncBodyState();
+        if (typeof options.onOpen === 'function') {
+          options.onOpen();
+        }
+        const focusTarget = options.initialFocus ? root.querySelector(options.initialFocus) : null;
+        if (focusTarget instanceof HTMLElement) {
+          window.setTimeout(() => focusTarget.focus(), 20);
+        }
+      },
+      close() {
+        root.classList.remove('is-open');
+        root.setAttribute('aria-hidden', 'true');
+        openModals.delete(root);
+        syncBodyState();
+        if (typeof options.onClose === 'function') {
+          options.onClose();
+        }
+      },
+    };
+
+    if (!root.dataset.modalBound) {
+      root.addEventListener('click', (event) => {
+        if (event.target === root) {
+          modal.close();
+        }
+      });
+      root.dataset.modalBound = '1';
+    }
+
+    return modal;
+  };
+
+  document.addEventListener('keydown', (event) => {
+    if (event.key !== 'Escape') {
+      return;
+    }
+    const active = Array.from(openModals).pop();
+    if (!active) {
+      return;
+    }
+    active.classList.remove('is-open');
+    active.setAttribute('aria-hidden', 'true');
+    openModals.delete(active);
+    syncBodyState();
+  });
+
+  return { create };
+})();