From 1c0a5bab442f7cb87320566463f4219f0407c276 Mon Sep 17 00:00:00 2001
From: Lucas Larroche <lucas@larroche.com>
Date: Sat, 17 Feb 2024 11:34:23 +0700
Subject: [PATCH] refactor: modal

---
 v2-html-classless/index.html  | 26 ++++----------
 v2-html-classless/js/modal.js | 65 -----------------------------------
 v2-html/index.html            | 17 +++++----
 v2-html/js/modal.js           |  9 ++---
 4 files changed, 17 insertions(+), 100 deletions(-)
 delete mode 100644 v2-html-classless/js/modal.js

diff --git a/v2-html-classless/index.html b/v2-html-classless/index.html
index fa47f58..4dd7f32 100644
--- 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,16 +362,10 @@ <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>
@@ -381,11 +373,8 @@ <h3>Confirm your action!</h3>
           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>
@@ -393,8 +382,5 @@ <h3>Confirm your action!</h3>
 
     <!-- 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
deleted file mode 100644
index d694e83..0000000
--- a/v2-html-classless/js/modal.js
+++ /dev/null
@@ -1,65 +0,0 @@
-/*
- * Modal
- *
- * Pico.css - https://picocss.com
- * Copyright 2019-2024 - Licensed under MIT
- */
-
-// Config
-const scrollbarWidthCssVar = "--pico-scrollbar-width";
-const animationDuration = 400; // ms
-
-// Toggle modal
-const toggleModal = (event) => {
-  event.preventDefault();
-  const modal = document.getElementById(event.currentTarget.dataset.target);
-  if (!modal) return;
-  modal && (isModalOpen(modal) ? closeModal(modal) : openModal(modal));
-};
-
-// Is modal open
-const isModalOpen = (modal) => modal.hasAttribute("open") && modal.getAttribute("open") !== "false";
-
-// Open modal
-const openModal = (modal) => {
-  const scrollbarWidth = getScrollbarWidth();
-  if (scrollbarWidth) {
-    html.style.setProperty(scrollbarWidthCssVar, `${scrollbarWidth}px`);
-  }
-  const visibleModal = modal;
-  modal.setAttribute("open", true);
-};
-
-// Close modal
-const closeModal = (modal) => {
-  modal.removeAttribute("open");
-};
-
-// Close with a click outside
-document.addEventListener("click", (event) => {
-  const modal = event.target.closest("dialog");
-  const modalContent = modal && modal.querySelector("article");
-  const isClickInside = modalContent && modalContent.contains(event.target);
-  modal && !isClickInside && closeModal(modal);
-});
-
-// Close with Esc key
-document.addEventListener("keydown", (event) => {
-  const modals = document.querySelectorAll("dialog[open]:not([open=false])");
-  const isOpen = modals.length > 0;
-  if (!isOpen) return;
-  if (event.key === "Escape") {
-    modals.forEach((modal) => closeModal(modal));
-  }
-});
-
-// Get scrollbar width
-const getScrollbarWidth = () => {
-  const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
-  return scrollbarWidth;
-};
-
-// Is scrollbar visible
-const isScrollbarVisible = () => {
-  return document.body.scrollHeight > screen.height;
-};
diff --git a/v2-html/index.html b/v2-html/index.html
index 80cf492..1d4aeed 100644
--- 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,13 +467,12 @@ <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>
@@ -481,16 +480,16 @@ <h3>Confirm your action!</h3>
           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
index 92390b8..5f3fe57 100644
--- 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);
 };