popup

modules/pihole/assets/pihole_instances.js

@@ -66,7 +66,15 @@
     if (primaryInput) primaryInput.checked = false;
   };
 
+  const modalApi = window.NexusModal && typeof window.NexusModal.create === 'function'
+    ? window.NexusModal.create(modal, { initialFocus: 'input[name="instance_id"]' })
+    : null;
+
   const openModal = () => {
+    if (modalApi) {
+      modalApi.open();
+      return;
+    }
     modal.classList.add('is-open');
     modal.setAttribute('aria-hidden', 'false');
     if (idInput) {
@@ -75,6 +83,10 @@
   };
 
   const closeModal = () => {
+    if (modalApi) {
+      modalApi.close();
+      return;
+    }
     modal.classList.remove('is-open');
     modal.setAttribute('aria-hidden', 'true');
   };
@@ -113,15 +125,17 @@
     });
   }
 
-  modal.addEventListener('click', (event) => {
-    if (event.target === modal) {
-      closeModal();
-    }
-  });
+  if (!modalApi) {
+    modal.addEventListener('click', (event) => {
+      if (event.target === modal) {
+        closeModal();
+      }
+    });
 
-  document.addEventListener('keydown', (event) => {
-    if (event.key === 'Escape' && modal.classList.contains('is-open')) {
-      closeModal();
-    }
-  });
+    document.addEventListener('keydown', (event) => {
+      if (event.key === 'Escape' && modal.classList.contains('is-open')) {
+        closeModal();
+      }
+    });
+  }
 })();