From 54cc4bdc01ad45ec2dfcec37ffbff21fd8962db6 Mon Sep 17 00:00:00 2001
From: Cory Dransfeldt <hi@coryd.dev>
Date: Wed, 18 Sep 2024 10:55:56 -0700
Subject: [PATCH] feat: modal enhancements

---
 package-lock.json                      |  4 ++--
 package.json                           |  2 +-
 src/assets/scripts/index.js            | 32 +++++++++++++++++++++++---
 src/assets/styles/components/modal.css |  8 +++----
 4 files changed, 36 insertions(+), 10 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index e7fb9b01..4c08cdb5 100644
--- a/package-lock.json
+++ b/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",
diff --git a/package.json b/package.json
index 601a88dc..6bfa8e29 100644
--- a/package.json
+++ b/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": {
diff --git a/src/assets/scripts/index.js b/src/assets/scripts/index.js
index 89e5b2b1..99c6db46 100644
--- a/src/assets/scripts/index.js
+++ b/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()
   })()
 
   ;(() => {
diff --git a/src/assets/styles/components/modal.css b/src/assets/styles/components/modal.css
index 33a35bc6..06d8b35c 100644
--- a/src/assets/styles/components/modal.css
+++ b/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;
-      top: var(--spacing-lg);
-      right: var(--spacing-lg);
+      position: sticky;
+      top: 0;
+      left: 100%;
       height: var(--sizing-svg-base);
       width: var(--sizing-svg-base);
     }