refactor: modal

picocss · Feb 17, 2024 · 1c0a5ba · 1c0a5ba
1 parent 466a516
commit 1c0a5ba
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 100 deletions.
diff --git a/v2-html-classless/index.html b/v2-html-classless/index.html
@@ -10,7 +10,7 @@
     <!-- Pico.css -->
     <link
       rel="stylesheet"
-      href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.classless.min.css"
+      href="https://cdn.jsdelivr.net/npm/@picocss/pico@2.0.3/css/pico.classless.min.css"
     />
   </head>
 
@@ -275,9 +275,7 @@ <h2>Form elements</h2>
       <!-- Modal -->
       <section id="modal">
         <h2>Modal</h2>
-        <button class="contrast" data-target="modal-example" onclick="toggleModal(event)">
-          Launch demo modal
-        </button>
+        <button class="contrast" onclick="modalExample.showModal()">Launch demo modal</button>
       </section>
       <!-- ./ Modal -->
 
@@ -364,37 +362,25 @@ <h2>Loading</h2>
     <!-- ./ Footer -->
 
     <!-- Modal example -->
-    <dialog id="modal-example">
+    <dialog id="modalExample">
       <article>
         <header>
-          <a
-            href="#close"
-            aria-label="Close"
-            rel="prev"
-            data-target="modal-example"
-            onclick="toggleModal(event)"
-          ></a>
+          <button aria-label="Close" rel="prev" onclick="modalExample.close()"></button>
           <h3>Confirm your action!</h3>
         </header>
         <p>
           Cras sit amet maximus risus. Pellentesque sodales odio sit amet augue finibus
           pellentesque. Nullam finibus risus non semper euismod.
         </p>
         <footer>
-          <a href="#cancel" role="button" data-target="modal-example" onclick="toggleModal(event)"
-            >Cancel</a
-          ><a href="#confirm" role="button" data-target="modal-example" onclick="toggleModal(event)"
-            >Confirm</a
-          >
+          <button role="button" onclick="modalExample.close()">Cancel</button
+          ><button autofocus role="button" onclick="modalExample.close()">Confirm</button>
         </footer>
       </article>
     </dialog>
     <!-- ./ Modal example -->
 
     <!-- Minimal theme switcher -->
     <script src="js/minimal-theme-switcher.js"></script>
-
-    <!-- Modal -->
-    <script src="js/modal.js"></script>
   </body>
 </html>
diff --git a/v2-html-classless/js/modal.js b/v2-html-classless/js/modal.js
diff --git a/v2-html/index.html b/v2-html/index.html
@@ -10,7 +10,7 @@
     <!-- Pico.css -->
     <link
       rel="stylesheet"
-      href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css"
+      href="https://cdn.jsdelivr.net/npm/@picocss/pico@2.0.3/css/pico.min.css"
     />
   </head>
 
@@ -467,30 +467,29 @@ <h2>Loading</h2>
     <dialog id="modal-example">
       <article>
         <header>
-          <a
-            href="#close"
+          <button
             aria-label="Close"
             rel="prev"
             data-target="modal-example"
             onclick="toggleModal(event)"
-          ></a>
+          ></button>
           <h3>Confirm your action!</h3>
         </header>
         <p>
           Cras sit amet maximus risus. Pellentesque sodales odio sit amet augue finibus
           pellentesque. Nullam finibus risus non semper euismod.
         </p>
         <footer>
-          <a
-            href="#cancel"
+          <button
             role="button"
             class="secondary"
             data-target="modal-example"
             onclick="toggleModal(event)"
-            >Cancel</a
-          ><a href="#confirm" role="button" data-target="modal-example" onclick="toggleModal(event)"
-            >Confirm</a
           >
+            Cancel</button
+          ><button autofocus data-target="modal-example" onclick="toggleModal(event)">
+            Confirm
+          </button>
         </footer>
       </article>
     </dialog>

diff --git a/v2-html/js/modal.js b/v2-html/js/modal.js
@@ -18,12 +18,9 @@ const toggleModal = (event) => {
   event.preventDefault();
   const modal = document.getElementById(event.currentTarget.dataset.target);
   if (!modal) return;
-  modal && (isModalOpen(modal) ? closeModal(modal) : openModal(modal));
+  modal && (modal.open ? closeModal(modal) : openModal(modal));
 };
 
-// Is modal open
-const isModalOpen = (modal) => modal.hasAttribute("open") && modal.getAttribute("open") !== "false";
-
 // Open modal
 const openModal = (modal) => {
   const { documentElement: html } = document;
@@ -36,7 +33,7 @@ const openModal = (modal) => {
     visibleModal = modal;
     html.classList.remove(openingClass);
   }, animationDuration);
-  modal.setAttribute("open", true);
+  modal.showModal();
 };
 
 // Close modal
@@ -47,7 +44,7 @@ const closeModal = (modal) => {
   setTimeout(() => {
     html.classList.remove(closingClass, isOpenClass);
     html.style.removeProperty(scrollbarWidthCssVar);
-    modal.removeAttribute("open");
+    modal.close();
   }, animationDuration);
 };