summaryrefslogtreecommitdiffstats
path: root/content
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2021-12-29 20:20:17 +0100
committerVolpeon <git@volpeon.ink>2021-12-29 20:20:17 +0100
commit57e925e4ac877906c07eb24b8663ac34606f9b31 (patch)
tree25cc5f738942c491ba7e69c9f660a43a5e5a606e /content
parentAdded lightbox (diff)
downloadvolpeon.ink-57e925e4ac877906c07eb24b8663ac34606f9b31.tar.gz
volpeon.ink-57e925e4ac877906c07eb24b8663ac34606f9b31.tar.bz2
volpeon.ink-57e925e4ac877906c07eb24b8663ac34606f9b31.zip
Keyboard-friendly lightbox
Diffstat (limited to 'content')
-rw-r--r--content/lightbox.js50
1 files changed, 44 insertions, 6 deletions
diff --git a/content/lightbox.js b/content/lightbox.js
index e57d37c..a3e3bc0 100644
--- a/content/lightbox.js
+++ b/content/lightbox.js
@@ -1,5 +1,7 @@
1(() => { 1(() => {
2 let currentIndex = 0; 2 let currentIndex = 0;
3 let visible = false;
4
3 const mainEl = document.querySelector("main"); 5 const mainEl = document.querySelector("main");
4 const lightboxEl = document.querySelector(".c-lightbox"); 6 const lightboxEl = document.querySelector(".c-lightbox");
5 const lightboxBgEl = document.querySelector(".c-lightbox__bg"); 7 const lightboxBgEl = document.querySelector(".c-lightbox__bg");
@@ -10,26 +12,34 @@
10 const figureEls = Array.from(mainEl.querySelectorAll("figure")).map(el => el.querySelector("a")); 12 const figureEls = Array.from(mainEl.querySelectorAll("figure")).map(el => el.querySelector("a"));
11 13
12 const show = () => { 14 const show = () => {
15 visible = true;
13 lightboxEl.classList.add("is-shown"); 16 lightboxEl.classList.add("is-shown");
14 } 17 }
15 18
16 const hide = () => { 19 const hide = () => {
20 visible = false;
17 lightboxEl.classList.remove("is-shown"); 21 lightboxEl.classList.remove("is-shown");
18 } 22 }
19 23
20 const setIndex = (i) => { 24 const setIndex = (i) => {
21 currentIndex = i; 25 currentIndex = i;
22 lightboxImgEl.src = figureEls[i].href; 26 lightboxImgEl.src = figureEls[i].href;
27 lightboxPrevEl.classList.toggle("u-dn", i === 0);
28 lightboxNextEl.classList.toggle("u-dn", i === figureEls.length - 1);
29 };
30
31 const prev = () => {
32 setIndex(currentIndex === 0 ? currentIndex : currentIndex - 1);
33 };
34
35 const next = () => {
36 setIndex(currentIndex === figureEls.length - 1 ? currentIndex : currentIndex + 1);
23 }; 37 };
24 38
25 lightboxBgEl.addEventListener("click", hide); 39 lightboxBgEl.addEventListener("click", hide);
26 lightboxCloseEl.addEventListener("click", hide); 40 lightboxCloseEl.addEventListener("click", hide);
27 lightboxPrevEl.addEventListener("click", () => { 41 lightboxPrevEl.addEventListener("click", prev);
28 setIndex(currentIndex === 0 ? figureEls.length - 1 : currentIndex - 1); 42 lightboxNextEl.addEventListener("click", next);
29 });
30 lightboxNextEl.addEventListener("click", () => {
31 setIndex(currentIndex === figureEls.length - 1 ? 0 : currentIndex + 1);
32 });
33 43
34 figureEls.forEach((figureEl, i) => { 44 figureEls.forEach((figureEl, i) => {
35 figureEl.addEventListener("click", e => { 45 figureEl.addEventListener("click", e => {
@@ -38,4 +48,32 @@
38 setIndex(i); 48 setIndex(i);
39 }) 49 })
40 }); 50 });
51
52 window.addEventListener("keydown", e => {
53 if (e.defaultPrevented || !visible) {
54 return;
55 }
56
57 switch (e.key) {
58 case "Left":
59 case "ArrowLeft":
60 prev();
61 break;
62
63 case "Right":
64 case "ArrowRight":
65 next();
66 break;
67
68 case "Esc":
69 case "Escape":
70 hide();
71 break;
72
73 default:
74 return;
75 }
76
77 e.preventDefault();
78 }, true);
41})(); 79})();