diff options
Diffstat (limited to 'content/main.js')
-rw-r--r-- | content/main.js | 135 |
1 files changed, 3 insertions, 132 deletions
diff --git a/content/main.js b/content/main.js index c843947..7189312 100644 --- a/content/main.js +++ b/content/main.js | |||
@@ -1,4 +1,7 @@ | |||
1 | (() => { | 1 | (() => { |
2 | document.body.classList.remove('t-no-js'); | ||
3 | document.body.classList.add('t-js'); | ||
4 | |||
2 | const enableFocusIndicator = e => { | 5 | const enableFocusIndicator = e => { |
3 | if (e.key !== 'Tab') { | 6 | if (e.key !== 'Tab') { |
4 | return; | 7 | return; |
@@ -18,135 +21,3 @@ | |||
18 | 21 | ||
19 | document.addEventListener('keydown', enableFocusIndicator); | 22 | document.addEventListener('keydown', enableFocusIndicator); |
20 | })(); | 23 | })(); |
21 | |||
22 | (() => { | ||
23 | let currentIndex = 0; | ||
24 | let visible = false; | ||
25 | let mouseDown = false; | ||
26 | |||
27 | const mainEl = document.querySelector("main"); | ||
28 | const lightboxContainerEl = document.querySelector(".js-lightbox"); | ||
29 | const lightboxEl = lightboxContainerEl.querySelector(".o-lightbox"); | ||
30 | const lightboxCloseEl = lightboxEl.querySelector(".o-lightbox__close-btn"); | ||
31 | const lightboxPrevEl = lightboxEl.querySelector(".o-lightbox__prev-btn"); | ||
32 | const lightboxNextEl = lightboxEl.querySelector(".o-lightbox__next-btn"); | ||
33 | const lightboxImgEl = lightboxEl.querySelector(".o-lightbox__img"); | ||
34 | const lightboxFooterEl = lightboxEl.querySelector(".o-lightbox__footer"); | ||
35 | const figureEls = Array.from(mainEl.querySelectorAll("figure")); | ||
36 | |||
37 | const show = () => { | ||
38 | visible = true; | ||
39 | lightboxContainerEl.classList.remove("u-d-none"); | ||
40 | } | ||
41 | |||
42 | const hide = () => { | ||
43 | visible = false; | ||
44 | lightboxContainerEl.classList.add("u-d-none"); | ||
45 | } | ||
46 | |||
47 | const setIndex = (i) => { | ||
48 | thumbnailEls[currentIndex].classList.remove("is-selected"); | ||
49 | currentIndex = i; | ||
50 | lightboxImgEl.src = figureEls[i].firstElementChild.href; | ||
51 | thumbnailEls[i].classList.add("is-selected"); | ||
52 | }; | ||
53 | |||
54 | const prev = () => { | ||
55 | setIndex(currentIndex > 0 ? currentIndex - 1 : figureEls.length - 1); | ||
56 | }; | ||
57 | |||
58 | const next = () => { | ||
59 | setIndex(currentIndex < figureEls.length - 1 ? currentIndex + 1 : 0); | ||
60 | }; | ||
61 | |||
62 | lightboxCloseEl.addEventListener("click", hide); | ||
63 | lightboxPrevEl.addEventListener("click", prev); | ||
64 | lightboxNextEl.addEventListener("click", next); | ||
65 | |||
66 | const thumbnailEls = figureEls.map((figureEl, i) => { | ||
67 | const go = e => { | ||
68 | e.preventDefault(); | ||
69 | show(); | ||
70 | setIndex(i); | ||
71 | }; | ||
72 | |||
73 | let anchorEl; | ||
74 | let imgEl; | ||
75 | |||
76 | if (figureEl.firstElementChild.tagName === "A") { | ||
77 | anchorEl = figureEl.firstElementChild; | ||
78 | imgEl = anchorEl.firstElementChild; | ||
79 | } else { | ||
80 | imgEl = figureEl.firstElementChild; | ||
81 | anchorEl = document.createElement("a"); | ||
82 | anchorEl.href = imgEl.src; | ||
83 | |||
84 | figureEl.insertBefore(anchorEl, imgEl); | ||
85 | figureEl.removeChild(imgEl); | ||
86 | anchorEl.appendChild(imgEl); | ||
87 | } | ||
88 | |||
89 | anchorEl.addEventListener("click", go); | ||
90 | |||
91 | const thumbnailButtonEl = document.createElement("button"); | ||
92 | const thumbnailImgEl = document.createElement("img"); | ||
93 | |||
94 | thumbnailImgEl.classList.add("o-lightbox__thumbnail-img"); | ||
95 | thumbnailImgEl.src = anchorEl.href; | ||
96 | |||
97 | thumbnailButtonEl.classList.add("o-lightbox__thumbnail"); | ||
98 | thumbnailButtonEl.appendChild(thumbnailImgEl); | ||
99 | thumbnailButtonEl.addEventListener("click", go); | ||
100 | |||
101 | if (i === currentIndex) { | ||
102 | thumbnailButtonEl.classList.add("is-selected"); | ||
103 | } | ||
104 | |||
105 | lightboxFooterEl.appendChild(thumbnailButtonEl); | ||
106 | |||
107 | return thumbnailButtonEl; | ||
108 | }); | ||
109 | |||
110 | document.addEventListener('mousedown', (e) => { | ||
111 | if (visible) { | ||
112 | mouseDown = !lightboxEl.contains(e.target) || lightboxEl === e.target; | ||
113 | } | ||
114 | }); | ||
115 | |||
116 | document.addEventListener('click', (e) => { | ||
117 | if (visible && mouseDown) { | ||
118 | mouseDown = false; | ||
119 | e.preventDefault(); | ||
120 | e.stopPropagation(); | ||
121 | hide(); | ||
122 | } | ||
123 | }, { capture: true }); | ||
124 | |||
125 | window.addEventListener("keydown", e => { | ||
126 | if (e.defaultPrevented || !visible) { | ||
127 | return; | ||
128 | } | ||
129 | |||
130 | switch (e.key) { | ||
131 | case "Left": | ||
132 | case "ArrowLeft": | ||
133 | prev(); | ||
134 | break; | ||
135 | |||
136 | case "Right": | ||
137 | case "ArrowRight": | ||
138 | next(); | ||
139 | break; | ||
140 | |||
141 | case "Esc": | ||
142 | case "Escape": | ||
143 | hide(); | ||
144 | break; | ||
145 | |||
146 | default: | ||
147 | return; | ||
148 | } | ||
149 | |||
150 | e.preventDefault(); | ||
151 | }, true); | ||
152 | })(); | ||