From d11d7bed15bebc02619ae8e970a6a374cd24d861 Mon Sep 17 00:00:00 2001
From: Cory Dransfeldt <hi@coryd.dev>
Date: Sun, 4 Aug 2024 16:04:18 -0700
Subject: [PATCH] chore: enhance modal for esc to close if js is enabled
---
package-lock.json | 4 ++--
package.json | 2 +-
src/assets/scripts/modal.js | 8 +++++++
src/assets/styles/components/modal.css | 26 +++++++++++------------
src/includes/partials/blocks/modal.liquid | 4 ++++
5 files changed, 28 insertions(+), 16 deletions(-)
create mode 100644 src/assets/scripts/modal.js
diff --git a/package-lock.json b/package-lock.json
index 9f806b6c..e4b644de 100644
--- a/package-lock.json
+++ b/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",
diff --git a/package.json b/package.json
index 8c21b79b..e0c77c46 100644
--- a/package.json
+++ b/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": {
diff --git a/src/assets/scripts/modal.js b/src/assets/scripts/modal.js
new file mode 100644
index 00000000..59b64b07
--- /dev/null
+++ b/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
+ })
+ })
+})
\ No newline at end of file
diff --git a/src/assets/styles/components/modal.css b/src/assets/styles/components/modal.css
index bcae81ca..951abbf6 100644
--- a/src/assets/styles/components/modal.css
+++ b/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);
- }
}
\ No newline at end of file
diff --git a/src/includes/partials/blocks/modal.liquid b/src/includes/partials/blocks/modal.liquid
index 77642d50..4199f8bd 100644
--- a/src/includes/partials/blocks/modal.liquid
+++ b/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 %}