From 8b542139b5510ceb88a819810b2abbd30c12eef5 Mon Sep 17 00:00:00 2001
From: madrilene <hola@lenesaile.com>
Date: Mon, 16 Jun 2025 13:13:22 +0200
Subject: [PATCH] feat: add navigation to gallery / dialog

---
 src/_data/meta.js                   |  4 +-
 src/_includes/partials/gallery.njk  | 14 ++++-
 src/assets/css/local/gallery.css    |  5 ++
 src/assets/scripts/bundle/dialog.js | 79 +++++++++++++++++++++++++----
 src/assets/svg/misc/arrow-left.svg  |  1 +
 src/assets/svg/misc/arrow-right.svg |  1 +
 6 files changed, 90 insertions(+), 14 deletions(-)
 create mode 100644 src/assets/svg/misc/arrow-left.svg
 create mode 100644 src/assets/svg/misc/arrow-right.svg

diff --git a/src/_data/meta.js b/src/_data/meta.js
index c71faa8..29254ad 100644
--- a/src/_data/meta.js
+++ b/src/_data/meta.js
@@ -61,7 +61,9 @@ export const details = {
   collapse: 'collapse all'
 };
 export const dialog = {
-  close: 'Close'
+  close: 'Close',
+  next: 'Next',
+  previous: 'Previous'
 };
 export const navigation = {
   navLabel: 'Menu',
diff --git a/src/_includes/partials/gallery.njk b/src/_includes/partials/gallery.njk
index 19a62b0..8fcafe5 100644
--- a/src/_includes/partials/gallery.njk
+++ b/src/_includes/partials/gallery.njk
@@ -1,8 +1,18 @@
 <is-land on:idle>
-  <div class="gallery | grid mt-l-xl" role="list">
+  <div class="gallery | grid mt-l-xl gutter-xs" role="list">
     {%- for item in gallery -%}
       <dialog class="flow modal{{ loop.index }}">
-        <button class="button" autofocus>{{ meta.dialog.close }}</button>
+        <div class="cluster justify-center flow-space-m gutter-s">
+          <button data-nav="prev" class="button text-step-1" data-button-variant="primary">
+            <span class="visually-hidden">{{ meta.dialog.previous }}</span>{% svg "misc/arrow-left" %}
+          </button>
+          <button data-close class="button" autofocus data-button-variant="primary">
+            {{ meta.dialog.close }}
+          </button>
+          <button data-nav="next" class="button text-step-1" data-button-variant="primary">
+            <span class="visually-hidden">{{ meta.dialog.next }}</span>{% svg "misc/arrow-right" %}
+          </button>
+        </div>
         {%- image item.image, item.alt, item.caption -%}
       </dialog>
       <button data-index="{{ loop.index }}">{%- image item.image, item.alt -%}</button>
diff --git a/src/assets/css/local/gallery.css b/src/assets/css/local/gallery.css
index 9bdac1e..1be2fa9 100644
--- a/src/assets/css/local/gallery.css
+++ b/src/assets/css/local/gallery.css
@@ -9,6 +9,11 @@
   cursor: pointer;
 }
 
+.gallery dialog + button:focus-visible {
+  outline: 3px solid var(--focus-color, currentColor);
+  outline-offset: var(--focus-offset, 0.3ch);
+}
+
 /* the close button */
 .gallery dialog > button {
   margin-inline: auto;
diff --git a/src/assets/scripts/bundle/dialog.js b/src/assets/scripts/bundle/dialog.js
index 80819b6..73db1df 100644
--- a/src/assets/scripts/bundle/dialog.js
+++ b/src/assets/scripts/bundle/dialog.js
@@ -1,22 +1,79 @@
 // manages the behavior of modal several dialogs on a page: open / close buttons and light dismiss.
 
-const buttons = document.querySelectorAll('button[data-index]');
-const modals = document.querySelectorAll('dialog');
-const closeButtons = document.querySelectorAll('dialog button');
-buttons.forEach((button, index) => {
+const modals = Array.from(document.querySelectorAll('dialog'));
+const openButtons = document.querySelectorAll('button[data-index]');
+
+openButtons.forEach((button, index) => {
   button.addEventListener('click', () => {
     modals[index].showModal();
+    modals[index].focus();
   });
 });
-closeButtons.forEach((button, index) => {
-  button.addEventListener('click', () => {
-    modals[index].close();
+
+modals.forEach((modal, index) => {
+  const closeBtn = modal.querySelector('button[data-close]');
+  const prevBtn = modal.querySelector('button[data-nav="prev"]');
+  const nextBtn = modal.querySelector('button[data-nav="next"]');
+
+  closeBtn?.addEventListener('click', () => modal.close());
+
+  if (!prevBtn && !nextBtn) return;
+
+  prevBtn?.addEventListener('click', () => {
+    modal.close();
+    const prev = modals[(index - 1 + modals.length) % modals.length];
+    prev.showModal();
   });
-});
-window.addEventListener('click', event => {
-  modals.forEach(modal => {
-    if (event.target === modal) {
+
+  nextBtn?.addEventListener('click', () => {
+    modal.close();
+    const next = modals[(index + 1) % modals.length];
+    next.showModal();
+  });
+
+  // arrow navigation
+  modal.addEventListener('keydown', event => {
+    if (event.key === 'ArrowRight') {
+      event.preventDefault();
+      const next = modals[(index + 1) % modals.length];
       modal.close();
+      next.showModal();
+    } else if (event.key === 'ArrowLeft') {
+      event.preventDefault();
+      const prev = modals[(index - 1 + modals.length) % modals.length];
+      modal.close();
+      prev.showModal();
     }
   });
+
+  // swipe navigation
+  let startX = 0;
+  let endX = 0;
+  modal.addEventListener('touchstart', event => {
+    if (event.touches.length > 1) return;
+    startX = event.touches[0].screenX;
+  });
+  modal.addEventListener('touchend', event => {
+    if (event.changedTouches.length > 1) return;
+    endX = event.changedTouches[0].screenX;
+    handleSwipe();
+  });
+
+  function handleSwipe() {
+    const diff = endX - startX;
+    if (Math.abs(diff) < 50) return;
+    modal.close();
+    const target =
+      diff > 0
+        ? modals[(index - 1 + modals.length) % modals.length] // swipe right → prev
+        : modals[(index + 1) % modals.length]; // swipe left → next
+    target.showModal();
+    target.focus();
+  }
+});
+
+window.addEventListener('click', event => {
+  modals.forEach(modal => {
+    if (event.target === modal) modal.close();
+  });
 });
diff --git a/src/assets/svg/misc/arrow-left.svg b/src/assets/svg/misc/arrow-left.svg
new file mode 100644
index 0000000..12a63a5
--- /dev/null
+++ b/src/assets/svg/misc/arrow-left.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m12 19-7-7 7-7"/><path d="M19 12H5"/></svg>
\ No newline at end of file
diff --git a/src/assets/svg/misc/arrow-right.svg b/src/assets/svg/misc/arrow-right.svg
new file mode 100644
index 0000000..254bdb1
--- /dev/null
+++ b/src/assets/svg/misc/arrow-right.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
\ No newline at end of file