From 575278aba99139635adc3b1f9385befe57102541 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Sat, 11 Jun 2022 09:44:04 +0200 Subject: Re-implemented design via iro-design --- content/lightbox.js | 81 ----------------------------------------------------- 1 file changed, 81 deletions(-) delete mode 100644 content/lightbox.js (limited to 'content/lightbox.js') 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); -})(); -- cgit v1.2.3-54-g00ecf