Re-implemented design via iro-design

2 files changed, 120 insertions, 81 deletions

diff --git a/content/lightbox.js b/content/lightbox.js
deleted file mode 100644
index 4ec959d..0000000
--- a/content/lightbox.js
+++ /dev/null
@@ -1,81 +0,0 @@
-(() => {
-    let currentIndex = 0;
-    let visible = false;
-
-    const mainEl = document.querySelector("main");
-    const lightboxEl = document.querySelector(".c-lightbox");
-    const lightboxBgEl = lightboxEl.querySelector(".c-lightbox__bg");
-    const lightboxCountEl = lightboxEl.querySelector(".c-lightbox__count");
-    const lightboxCloseEl = lightboxEl.querySelector(".c-lightbox__close");
-    const lightboxPrevEl = lightboxEl.querySelector(".c-lightbox__prev");
-    const lightboxNextEl = lightboxEl.querySelector(".c-lightbox__next");
-    const lightboxImgEl = lightboxEl.querySelector(".c-lightbox__img");
-    const figureEls = Array.from(mainEl.querySelectorAll("figure")).map(el => el.querySelector("a"));
-
-    const show = () => {
-        visible = true;
-        lightboxEl.classList.add("is-shown");
-    }
-
-    const hide = () => {
-        visible = false;
-        lightboxEl.classList.remove("is-shown");
-    }
-
-    const setIndex = (i) => {
-        currentIndex = i;
-        lightboxImgEl.src = figureEls[i].href;
-        lightboxCountEl.textContent = (i + 1) + " / " + figureEls.length;
-        lightboxPrevEl.classList.toggle("u-dn", i === 0);
-        lightboxNextEl.classList.toggle("u-dn", i === figureEls.length - 1);
-    };
-
-    const prev = () => {
-        currentIndex === 0 ? void 0 : setIndex(currentIndex - 1);
-    };
-
-    const next = () => {
-        currentIndex === figureEls.length - 1 ? void 0 : setIndex(currentIndex + 1);
-    };
-
-    lightboxBgEl.addEventListener("click", hide);
-    lightboxCloseEl.addEventListener("click", hide);
-    lightboxPrevEl.addEventListener("click", prev);
-    lightboxNextEl.addEventListener("click", next);
-    
-    figureEls.forEach((figureEl, i) => {
-        figureEl.addEventListener("click", e => {
-            e.preventDefault();
-            show();
-            setIndex(i);
-        })
-    });
-
-    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);
-})();
diff --git a/content/main.js b/content/main.js
new file mode 100644
index 0000000..3257c39
--- /dev/null
+++ b/content/main.js
@@ -0,0 +1,120 @@
+(() => {
+    const enableFocusIndicator = e => {
+        if (e.key !== 'Tab') {
+            return;
+        }
+
+        document.body.classList.add('t-keyboard');
+        document.removeEventListener('keydown', enableFocusIndicator);
+        document.addEventListener('mousedown', disableFocusIndicator);
+    }
+
+    const disableFocusIndicator = () => {
+        document.body.classList.remove('t-keyboard');
+
+        document.removeEventListener('mousedown', disableFocusIndicator);
+        document.addEventListener('keydown', enableFocusIndicator);
+    }
+
+    document.addEventListener('keydown', enableFocusIndicator);
+})();
+
+(() => {
+    let currentIndex = 0;
+    let visible = false;
+
+    const mainEl = document.querySelector("main");
+    const lightboxContainerEl = document.querySelector(".js-lightbox");
+    const lightboxEl = lightboxContainerEl.querySelector(".o-lightbox");
+    const lightboxCloseEl = lightboxEl.querySelector(".o-lightbox__close-btn");
+    const lightboxPrevEl = lightboxEl.querySelector(".o-lightbox__prev-btn");
+    const lightboxNextEl = lightboxEl.querySelector(".o-lightbox__next-btn");
+    const lightboxImgEl = lightboxEl.querySelector(".o-lightbox__img");
+    const lightboxFooterEl = lightboxEl.querySelector(".o-lightbox__footer");
+    const figureEls = Array.from(mainEl.querySelectorAll("figure")).map(el => el.querySelector("a"));
+
+    const show = () => {
+        visible = true;
+        lightboxContainerEl.classList.remove("u-d-none");
+    }
+
+    const hide = () => {
+        visible = false;
+        lightboxContainerEl.classList.add("u-d-none");
+    }
+
+    const setIndex = (i) => {
+        thumbnailEls[currentIndex].classList.remove("is-selected");
+        currentIndex = i;
+        lightboxImgEl.src = figureEls[i].href;
+        thumbnailEls[i].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 thumbnailEls = figureEls.map((figureEl, i) => {
+        const go = e => {
+            e.preventDefault();
+            show();
+            setIndex(i);
+        };
+
+        figureEl.addEventListener("click", go);
+
+        const thumbnailButtonEl = document.createElement("button");
+        const thumbnailImgEl = document.createElement("img");
+
+        thumbnailImgEl.classList.add("o-lightbox__thumbnail-img");
+        thumbnailImgEl.src = figureEl.href;
+
+        thumbnailButtonEl.classList.add("o-lightbox__thumbnail");
+        thumbnailButtonEl.appendChild(thumbnailImgEl);
+        thumbnailButtonEl.addEventListener("click", go);
+
+        if (i === currentIndex) {
+            thumbnailButtonEl.classList.add("is-selected");
+        }
+
+        lightboxFooterEl.appendChild(thumbnailButtonEl);
+
+        return thumbnailButtonEl;
+    });
+
+    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);
+})();