chore: enhance modal for esc to close if js is enabled

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "coryd.dev",
-  "version": "21.3.6",
+  "version": "21.3.7",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "coryd.dev",
-      "version": "21.3.6",
+      "version": "21.3.7",
       "license": "MIT",
       "dependencies": {
         "@cdransf/api-text": "^1.4.0",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "coryd.dev",
-  "version": "21.3.6",
+  "version": "21.3.7",
   "description": "The source for my personal site. Built using 11ty (and other tools).",
   "type": "module",
   "scripts": {

src/assets/scripts/modal.js

@@ -0,0 +1,8 @@
+window.addEventListener('load', () => {
+  const modalInputs = document.querySelectorAll('.modal-input')
+  document.addEventListener('keydown', e => {
+    if (e.key === 'Escape') modalInputs.forEach(modalInput => {
+      if (modalInput.checked) modalInput.checked = false
+    })
+  })
+})

src/assets/styles/components/modal.css

@@ -25,7 +25,7 @@
 
       &:focus svg,
       &:focus-within svg {
-        outline: var(--outline)
+        outline: var(--outline);
       }
 
       & svg {
@@ -34,7 +34,7 @@
         transition: transform var(--transition-duration-default) var(--transition-ease-in-out);
 
         &:focus {
-          outline: var(--outline)
+          outline: var(--outline);
         }
 
         &:hover,
@@ -46,6 +46,15 @@
       }
     }
   }
+
+  @media screen and (min-width: 768px) {
+    .modal-body {
+      max-height: 75%;
+      max-width: 75%;
+      inset: 12.5%;
+      border: 1px solid var(--gray-light);
+    }
+  }
 }
 
 .modal-input {
@@ -67,7 +76,7 @@
 
   &:focus svg,
   &:focus-within svg {
-    outline: var(--outline)
+    outline: var(--outline);
   }
 
   & svg {
@@ -77,7 +86,7 @@
     transition: transform var(--transition-duration-default) var(--transition-ease-in-out);
 
     &:focus {
-      outline: var(--outline)
+      outline: var(--outline);
     }
 
     &:hover,
@@ -87,13 +96,4 @@
       transform: rotate(8deg);
     }
   }
-}
-
-@media screen and (min-width: 768px) {
-  .modal-wrapper .modal-body {
-    max-height: 75%;
-    max-width: 75%;
-    inset: 12.5%;
-    border: 1px solid var(--gray-light);
-  }
 }

src/includes/partials/blocks/modal.liquid

@@ -1,3 +1,7 @@
+{% capture js %}
+  {% render "../../../assets/scripts/modal.js" %}
+{% endcapture %}
+<script>{{ js }}</script>
 {%- capture labelContent -%}
   {% if icon %}
     {% tablericon icon label %}