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; |
