summaryrefslogtreecommitdiffstats
path: root/content/lightbox.js
diff options
context:
space:
mode:
Diffstat (limited to 'content/lightbox.js')
-rw-r--r--content/lightbox.js81
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})();