feat: modal enhancements

package-lock.json

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

package.json

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

src/assets/scripts/index.js

@@ -26,19 +26,45 @@ window.addEventListener('load', () => {
     })
   })()
 
-  // modal keyboard controls
+  // modal keyboard controls and scroll management
   ;(() => {
     const modalInputs = document.querySelectorAll('.modal-input')
+    if (!modalInputs) return
 
-    if (!modalInputs) return // early return if dom nodes are missing
+    const toggleBodyScroll = (disableScroll) => {
+      if (disableScroll) {
+        document.body.style.overflow = 'hidden'
+      } else {
+        document.body.style.overflow = ''
+      }
+    }
+
+    const checkModals = () => {
+      let isAnyModalOpen = false
+      modalInputs.forEach((modalInput) => {
+        if (modalInput.checked) {
+          isAnyModalOpen = true
+        }
+      })
+      toggleBodyScroll(isAnyModalOpen)
+    }
+
+    modalInputs.forEach((modalInput) => {
+      modalInput.addEventListener('change', checkModals)
+    })
 
     document.addEventListener('keydown', (e) => {
       if (e.key === 'Escape') {
         modalInputs.forEach((modalInput) => {
-          if (modalInput.checked) modalInput.checked = false
+          if (modalInput.checked) {
+            modalInput.checked = false
+          }
         })
+        toggleBodyScroll(false)
       }
     })
+
+    checkModals()
   })()
 
   ;(() => {

src/assets/styles/components/modal.css

@@ -12,7 +12,7 @@
     height: 100%;
     width: 100%;
     inset: 0;
-    overflow: scroll;
+    overflow-y: scroll;
     border-radius: var(--border-radius-slight);
     padding: var(--spacing-lg) var(--spacing-2xl);
 
@@ -24,9 +24,9 @@
     }
 
     & .modal-close {
-      position: absolute;
+      position: sticky;
-      top: var(--spacing-lg);
+      top: 0;
-      right: var(--spacing-lg);
+      left: 100%;
       height: var(--sizing-svg-base);
       width: var(--sizing-svg-base);
     }