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