summaryrefslogtreecommitdiffstats
path: root/content/lightbox.js
diff options
context:
space:
mode:
Diffstat (limited to 'content/lightbox.js')
-rw-r--r--content/lightbox.js36
1 files changed, 11 insertions, 25 deletions
diff --git a/content/lightbox.js b/content/lightbox.js
index e4a2c29..e672d63 100644
--- a/content/lightbox.js
+++ b/content/lightbox.js
@@ -9,7 +9,7 @@
9 const lightboxFooterEl = lightboxEl.querySelector(".o-lightbox__footer"); 9 const lightboxFooterEl = lightboxEl.querySelector(".o-lightbox__footer");
10 const figureEls = Array.from(mainEl.querySelectorAll(".js-lightbox__image")); 10 const figureEls = Array.from(mainEl.querySelectorAll(".js-lightbox__image"));
11 11
12 const closeable = lightboxContainerEl.classList.contains("js-lightbox--closeable"); 12 const standalone = lightboxContainerEl.classList.contains("js-lightbox--standalone");
13 let currentIndex = 0; 13 let currentIndex = 0;
14 let visible = !lightboxContainerEl.classList.contains("u-d-none"); 14 let visible = !lightboxContainerEl.classList.contains("u-d-none");
15 let mouseDown = false; 15 let mouseDown = false;
@@ -20,7 +20,7 @@
20 } 20 }
21 21
22 const hide = () => { 22 const hide = () => {
23 if (closeable) { 23 if (!standalone) {
24 visible = false; 24 visible = false;
25 lightboxContainerEl.classList.add("u-d-none"); 25 lightboxContainerEl.classList.add("u-d-none");
26 } 26 }
@@ -56,41 +56,27 @@
56 setIndex(i); 56 setIndex(i);
57 }; 57 };
58 58
59 let anchorEl; 59 const imgEl = figureEl.querySelector("img");
60 let imgEl; 60 const captionEl = figureEl.querySelector("figcaption");
61
62 if (figureEl.firstElementChild.tagName === "A") {
63 anchorEl = figureEl.firstElementChild;
64 imgEl = anchorEl.firstElementChild;
65 } else {
66 imgEl = figureEl.firstElementChild;
67 anchorEl = document.createElement("a");
68 anchorEl.href = imgEl.src;
69 61
70 figureEl.insertBefore(anchorEl, imgEl); 62 const src = imgEl.src;
71 figureEl.removeChild(imgEl); 63 const description = captionEl?.innerHTML ?? "";
72 anchorEl.appendChild(imgEl);
73 }
74 64
75 anchorEl.addEventListener("click", go);
76 const thumbnailButtonEl = document.createElement("button"); 65 const thumbnailButtonEl = document.createElement("button");
77 const thumbnailImgEl = document.createElement("img"); 66 const thumbnailImgEl = document.createElement("img");
78 67
79 thumbnailImgEl.classList.add("o-lightbox__thumbnail-img"); 68 thumbnailImgEl.classList.add("o-lightbox__thumbnail-img");
80 thumbnailImgEl.src = anchorEl.href; 69 thumbnailImgEl.src = src;
81 70
82 thumbnailButtonEl.classList.add("o-lightbox__thumbnail"); 71 thumbnailButtonEl.classList.add("o-lightbox__thumbnail");
83 thumbnailButtonEl.appendChild(thumbnailImgEl); 72 thumbnailButtonEl.appendChild(thumbnailImgEl);
84 thumbnailButtonEl.addEventListener("click", go); 73 thumbnailButtonEl.addEventListener("click", go);
85 74
86 if (i === currentIndex) {
87 thumbnailButtonEl.classList.add("is-selected");
88 }
89
90 lightboxFooterEl.appendChild(thumbnailButtonEl); 75 lightboxFooterEl.appendChild(thumbnailButtonEl);
91 76
92 const captionEl = figureEl.querySelector("figcaption"); 77 if (!standalone) {
93 const description = captionEl?.innerHTML ?? ""; 78 figureEl.firstElementChild.addEventListener("click", go);
79 }
94 80
95 return { 81 return {
96 thumbnailEl: thumbnailButtonEl, 82 thumbnailEl: thumbnailButtonEl,
@@ -106,7 +92,7 @@
106 lightboxFooterEl.remove(); 92 lightboxFooterEl.remove();
107 } 93 }
108 94
109 if (closeable) { 95 if (!standalone) {
110 document.addEventListener('mousedown', (e) => { 96 document.addEventListener('mousedown', (e) => {
111 if (visible) { 97 if (visible) {
112 mouseDown = !lightboxEl.contains(e.target) || lightboxEl === e.target; 98 mouseDown = !lightboxEl.contains(e.target) || lightboxEl === e.target;