diff options
Diffstat (limited to 'content/lightbox.js')
-rw-r--r-- | content/lightbox.js | 36 |
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; |