1 files changed, 137 insertions, 0 deletions

diff --git a/content/assets/lightbox.js b/content/assets/lightbox.js
new file mode 100644
index 0000000..39a5074
--- /dev/null
+++ b/content/assets/lightbox.js
@@ -0,0 +1,137 @@
+(() => {
+    const mainEl = document.querySelector("main");
+    const lightboxContainerEl = document.querySelector(".js-lightbox");
+    const lightboxEl = lightboxContainerEl.classList.contains("o-lightbox")
+        ? lightboxContainerEl
+        : lightboxContainerEl.querySelector(".o-lightbox");
+    const lightboxCloseEl = lightboxEl.querySelector(".o-lightbox__close-btn");
+    const lightboxPrevEl = lightboxEl.querySelector(".o-lightbox__nav-btn--prev");
+    const lightboxNextEl = lightboxEl.querySelector(".o-lightbox__nav-btn--next");
+    const lightboxImgEl = lightboxEl.querySelector(".o-lightbox__img");
+    const lightboxThumbnailsEl = lightboxEl.querySelector(".o-lightbox__thumbnails");
+    const figureEls = Array.from(mainEl.querySelectorAll(".js-lightbox__image"));
+
+    const standalone = lightboxContainerEl.classList.contains("js-lightbox--standalone");
+    let currentIndex = 0;
+    let visible = !lightboxContainerEl.classList.contains("u-d-none");
+    let mouseDown = false;
+
+    const show = () => {
+        visible = true;
+        lightboxContainerEl.classList.remove("u-d-none");
+    }
+
+    const hide = () => {
+        if (!standalone) {
+            visible = false;
+            lightboxContainerEl.classList.add("u-d-none");
+        }
+    }
+
+    const setIndex = (i) => {
+        if (i < 0 || i >= images.length) {
+            return;
+        }
+        images[currentIndex].thumbnailEl.classList.remove("is-selected");
+        currentIndex = i;
+        lightboxImgEl.src = figureEls[i].firstElementChild.href;
+        lightboxImgEl.alt = images[currentIndex].description;
+        images[i].thumbnailEl.classList.add("is-selected");
+    };
+
+    const prev = () => setIndex(currentIndex > 0 ? currentIndex - 1 : figureEls.length - 1);
+
+    const next = () => setIndex(currentIndex < figureEls.length - 1 ? currentIndex + 1 : 0);
+
+    lightboxCloseEl?.addEventListener("click", hide);
+    lightboxPrevEl.addEventListener("click", prev);
+    lightboxNextEl.addEventListener("click", next);
+    
+    const images = figureEls.map((figureEl, i) => {
+        const go = e => {
+            e.preventDefault();
+            show();
+            setIndex(i);
+        };
+
+        const imgEl = figureEl.querySelector("img");
+        const captionEl = figureEl.querySelector("figcaption");
+
+        const src = imgEl.src;
+        const description = captionEl?.innerHTML ?? "";
+
+        const thumbnailButtonEl = document.createElement("button");
+        const thumbnailImgEl = document.createElement("img");
+
+        thumbnailImgEl.classList.add("o-lightbox__thumbnail-img");
+        thumbnailImgEl.src = src;
+
+        thumbnailButtonEl.classList.add("o-lightbox__thumbnail");
+        thumbnailButtonEl.appendChild(thumbnailImgEl);
+        thumbnailButtonEl.addEventListener("click", go);
+
+        lightboxThumbnailsEl.appendChild(thumbnailButtonEl);
+
+        if (!standalone) {
+            figureEl.firstElementChild.addEventListener("click", go);
+        }
+
+        return {
+            thumbnailEl: thumbnailButtonEl,
+            description,
+        };
+    });
+
+    setIndex(0);
+
+    if (figureEls.length <= 1) {
+        lightboxPrevEl.remove();
+        lightboxNextEl.remove();
+        lightboxThumbnailsEl.remove();
+    }
+
+    if (!standalone) {
+        document.addEventListener('mousedown', (e) => {
+            if (visible) {
+                mouseDown = !lightboxEl.contains(e.target) || lightboxEl === e.target;
+            }
+        });
+
+        document.addEventListener('click', (e) => {
+            if (visible && mouseDown) {
+                mouseDown = false;
+                e.preventDefault();
+                e.stopPropagation();
+                hide();
+            }
+        }, { capture: true });
+    }
+
+    window.addEventListener("keydown", e => {
+        if (e.defaultPrevented || !visible) {
+            return;
+        }
+
+        switch (e.key) {
+            case "Left":
+            case "ArrowLeft":
+                prev();
+                break;
+
+            case "Right":
+            case "ArrowRight":
+                next();
+                break;
+
+            case "Esc":
+            case "Escape":
+                hide();
+                break;
+
+            default:
+                return;
+        }
+
+        e.preventDefault();
+    }, true);
+})();