diff options
Diffstat (limited to 'content/main.js')
-rw-r--r-- | content/main.js | 120 |
1 files changed, 120 insertions, 0 deletions
diff --git a/content/main.js b/content/main.js new file mode 100644 index 0000000..3257c39 --- /dev/null +++ b/content/main.js | |||
@@ -0,0 +1,120 @@ | |||
1 | (() => { | ||
2 | const enableFocusIndicator = e => { | ||
3 | if (e.key !== 'Tab') { | ||
4 | return; | ||
5 | } | ||
6 | |||
7 | document.body.classList.add('t-keyboard'); | ||
8 | document.removeEventListener('keydown', enableFocusIndicator); | ||
9 | document.addEventListener('mousedown', disableFocusIndicator); | ||
10 | } | ||
11 | |||
12 | const disableFocusIndicator = () => { | ||
13 | document.body.classList.remove('t-keyboard'); | ||
14 | |||
15 | document.removeEventListener('mousedown', disableFocusIndicator); | ||
16 | document.addEventListener('keydown', enableFocusIndicator); | ||
17 | } | ||
18 | |||
19 | document.addEventListener('keydown', enableFocusIndicator); | ||
20 | })(); | ||
21 | |||
22 | (() => { | ||
23 | let currentIndex = 0; | ||
24 | let visible = false; | ||
25 | |||
26 | const mainEl = document.querySelector("main"); | ||
27 | const lightboxContainerEl = document.querySelector(".js-lightbox"); | ||
28 | const lightboxEl = lightboxContainerEl.querySelector(".o-lightbox"); | ||
29 | const lightboxCloseEl = lightboxEl.querySelector(".o-lightbox__close-btn"); | ||
30 | const lightboxPrevEl = lightboxEl.querySelector(".o-lightbox__prev-btn"); | ||
31 | const lightboxNextEl = lightboxEl.querySelector(".o-lightbox__next-btn"); | ||
32 | const lightboxImgEl = lightboxEl.querySelector(".o-lightbox__img"); | ||
33 | const lightboxFooterEl = lightboxEl.querySelector(".o-lightbox__footer"); | ||
34 | const figureEls = Array.from(mainEl.querySelectorAll("figure")).map(el => el.querySelector("a")); | ||
35 | |||
36 | const show = () => { | ||
37 | visible = true; | ||
38 | lightboxContainerEl.classList.remove("u-d-none"); | ||
39 | } | ||
40 | |||
41 | const hide = () => { | ||
42 | visible = false; | ||
43 | lightboxContainerEl.classList.add("u-d-none"); | ||
44 | } | ||
45 | |||
46 | const setIndex = (i) => { | ||
47 | thumbnailEls[currentIndex].classList.remove("is-selected"); | ||
48 | currentIndex = i; | ||
49 | lightboxImgEl.src = figureEls[i].href; | ||
50 | thumbnailEls[i].classList.add("is-selected"); | ||
51 | }; | ||
52 | |||
53 | const prev = () => { | ||
54 | setIndex(currentIndex > 0 ? currentIndex - 1 : figureEls.length - 1); | ||
55 | }; | ||
56 | |||
57 | const next = () => { | ||
58 | setIndex(currentIndex < figureEls.length - 1 ? currentIndex + 1 : 0); | ||
59 | }; | ||
60 | |||
61 | lightboxCloseEl.addEventListener("click", hide); | ||
62 | lightboxPrevEl.addEventListener("click", prev); | ||
63 | lightboxNextEl.addEventListener("click", next); | ||
64 | |||
65 | const thumbnailEls = figureEls.map((figureEl, i) => { | ||
66 | const go = e => { | ||
67 | e.preventDefault(); | ||
68 | show(); | ||
69 | setIndex(i); | ||
70 | }; | ||
71 | |||
72 | figureEl.addEventListener("click", go); | ||
73 | |||
74 | const thumbnailButtonEl = document.createElement("button"); | ||
75 | const thumbnailImgEl = document.createElement("img"); | ||
76 | |||
77 | thumbnailImgEl.classList.add("o-lightbox__thumbnail-img"); | ||
78 | thumbnailImgEl.src = figureEl.href; | ||
79 | |||
80 | thumbnailButtonEl.classList.add("o-lightbox__thumbnail"); | ||
81 | thumbnailButtonEl.appendChild(thumbnailImgEl); | ||
82 | thumbnailButtonEl.addEventListener("click", go); | ||
83 | |||
84 | if (i === currentIndex) { | ||
85 | thumbnailButtonEl.classList.add("is-selected"); | ||
86 | } | ||
87 | |||
88 | lightboxFooterEl.appendChild(thumbnailButtonEl); | ||
89 | |||
90 | return thumbnailButtonEl; | ||
91 | }); | ||
92 | |||
93 | window.addEventListener("keydown", e => { | ||
94 | if (e.defaultPrevented || !visible) { | ||
95 | return; | ||
96 | } | ||
97 | |||
98 | switch (e.key) { | ||
99 | case "Left": | ||
100 | case "ArrowLeft": | ||
101 | prev(); | ||
102 | break; | ||
103 | |||
104 | case "Right": | ||
105 | case "ArrowRight": | ||
106 | next(); | ||
107 | break; | ||
108 | |||
109 | case "Esc": | ||
110 | case "Escape": | ||
111 | hide(); | ||
112 | break; | ||
113 | |||
114 | default: | ||
115 | return; | ||
116 | } | ||
117 | |||
118 | e.preventDefault(); | ||
119 | }, true); | ||
120 | })(); | ||