From 26c099aa807d8e67944f72be04a325f37da305d5 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Sat, 18 Jun 2022 00:04:21 +0200 Subject: Added page type for art pieces --- content/main.js | 135 ++------------------------------------------------------ 1 file changed, 3 insertions(+), 132 deletions(-) (limited to 'content/main.js') diff --git a/content/main.js b/content/main.js index c843947..7189312 100644 --- a/content/main.js +++ b/content/main.js @@ -1,4 +1,7 @@ (() => { + document.body.classList.remove('t-no-js'); + document.body.classList.add('t-js'); + const enableFocusIndicator = e => { if (e.key !== 'Tab') { return; @@ -18,135 +21,3 @@ document.addEventListener('keydown', enableFocusIndicator); })(); - -(() => { - let currentIndex = 0; - let visible = false; - let mouseDown = 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")); - - 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].firstElementChild.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); - }; - - let anchorEl; - let imgEl; - - if (figureEl.firstElementChild.tagName === "A") { - anchorEl = figureEl.firstElementChild; - imgEl = anchorEl.firstElementChild; - } else { - imgEl = figureEl.firstElementChild; - anchorEl = document.createElement("a"); - anchorEl.href = imgEl.src; - - figureEl.insertBefore(anchorEl, imgEl); - figureEl.removeChild(imgEl); - anchorEl.appendChild(imgEl); - } - - anchorEl.addEventListener("click", go); - - const thumbnailButtonEl = document.createElement("button"); - const thumbnailImgEl = document.createElement("img"); - - thumbnailImgEl.classList.add("o-lightbox__thumbnail-img"); - thumbnailImgEl.src = anchorEl.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; - }); - - 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); -})(); -- cgit v1.2.3-54-g00ecf