diff options
| author | Volpeon <git@volpeon.ink> | 2022-06-11 09:44:04 +0200 |
|---|---|---|
| committer | Volpeon <git@volpeon.ink> | 2022-06-11 09:44:04 +0200 |
| commit | 575278aba99139635adc3b1f9385befe57102541 (patch) | |
| tree | d98a160167610717da37f6340b3884ba4224fe5d /content/lightbox.js | |
| parent | Update (diff) | |
| download | volpeon.ink-575278aba99139635adc3b1f9385befe57102541.tar.gz volpeon.ink-575278aba99139635adc3b1f9385befe57102541.tar.bz2 volpeon.ink-575278aba99139635adc3b1f9385befe57102541.zip | |
Re-implemented design via iro-design
Diffstat (limited to 'content/lightbox.js')
| -rw-r--r-- | content/lightbox.js | 81 |
1 files changed, 0 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 @@ | |||
| 1 | (() => { | ||
| 2 | let currentIndex = 0; | ||
| 3 | let visible = false; | ||
| 4 | |||
| 5 | const mainEl = document.querySelector("main"); | ||
| 6 | const lightboxEl = document.querySelector(".c-lightbox"); | ||
| 7 | const lightboxBgEl = lightboxEl.querySelector(".c-lightbox__bg"); | ||
| 8 | const lightboxCountEl = lightboxEl.querySelector(".c-lightbox__count"); | ||
| 9 | const lightboxCloseEl = lightboxEl.querySelector(".c-lightbox__close"); | ||
| 10 | const lightboxPrevEl = lightboxEl.querySelector(".c-lightbox__prev"); | ||
| 11 | const lightboxNextEl = lightboxEl.querySelector(".c-lightbox__next"); | ||
| 12 | const lightboxImgEl = lightboxEl.querySelector(".c-lightbox__img"); | ||
| 13 | const figureEls = Array.from(mainEl.querySelectorAll("figure")).map(el => el.querySelector("a")); | ||
| 14 | |||
| 15 | const show = () => { | ||
| 16 | visible = true; | ||
| 17 | lightboxEl.classList.add("is-shown"); | ||
| 18 | } | ||
| 19 | |||
| 20 | const hide = () => { | ||
| 21 | visible = false; | ||
| 22 | lightboxEl.classList.remove("is-shown"); | ||
| 23 | } | ||
| 24 | |||
| 25 | const setIndex = (i) => { | ||
| 26 | currentIndex = i; | ||
| 27 | lightboxImgEl.src = figureEls[i].href; | ||
| 28 | lightboxCountEl.textContent = (i + 1) + " / " + figureEls.length; | ||
| 29 | lightboxPrevEl.classList.toggle("u-dn", i === 0); | ||
| 30 | lightboxNextEl.classList.toggle("u-dn", i === figureEls.length - 1); | ||
| 31 | }; | ||
| 32 | |||
| 33 | const prev = () => { | ||
| 34 | currentIndex === 0 ? void 0 : setIndex(currentIndex - 1); | ||
| 35 | }; | ||
| 36 | |||
| 37 | const next = () => { | ||
| 38 | currentIndex === figureEls.length - 1 ? void 0 : setIndex(currentIndex + 1); | ||
| 39 | }; | ||
| 40 | |||
| 41 | lightboxBgEl.addEventListener("click", hide); | ||
| 42 | lightboxCloseEl.addEventListener("click", hide); | ||
| 43 | lightboxPrevEl.addEventListener("click", prev); | ||
| 44 | lightboxNextEl.addEventListener("click", next); | ||
| 45 | |||
| 46 | figureEls.forEach((figureEl, i) => { | ||
| 47 | figureEl.addEventListener("click", e => { | ||
| 48 | e.preventDefault(); | ||
| 49 | show(); | ||
| 50 | setIndex(i); | ||
| 51 | }) | ||
| 52 | }); | ||
| 53 | |||
| 54 | window.addEventListener("keydown", e => { | ||
| 55 | if (e.defaultPrevented || !visible) { | ||
| 56 | return; | ||
| 57 | } | ||
| 58 | |||
| 59 | switch (e.key) { | ||
| 60 | case "Left": | ||
| 61 | case "ArrowLeft": | ||
| 62 | prev(); | ||
| 63 | break; | ||
| 64 | |||
| 65 | case "Right": | ||
| 66 | case "ArrowRight": | ||
| 67 | next(); | ||
| 68 | break; | ||
| 69 | |||
| 70 | case "Esc": | ||
| 71 | case "Escape": | ||
| 72 | hide(); | ||
| 73 | break; | ||
| 74 | |||
| 75 | default: | ||
| 76 | return; | ||
| 77 | } | ||
| 78 | |||
| 79 | e.preventDefault(); | ||
| 80 | }, true); | ||
| 81 | })(); | ||
