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