diff options
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 | })(); | ||