add lightbox for post image previews 2

data/static/js/bits/thread.js

@@ -0,0 +1,64 @@
+export const b = {
+  init: 'activatePostImages',
+}
+
+const POST_IMAGES_SELECTOR = 'img.post-image:not(aside img.post-image)'
+
+let images = [];
+let currentIndex = 0;
+
+export function activatePostImages(_, __, ___) {
+  const images = document.querySelectorAll(POST_IMAGES_SELECTOR);
+  images.forEach(image => {
+    image.style.cursor = 'pointer';
+    image.dataset.s = 'collectImages';
+  });
+}
+
+export function collectImages(_, sender, el) {
+  if (!el.contains(sender)) return;
+  images = Array.from(el.querySelectorAll(POST_IMAGES_SELECTOR));
+  currentIndex = images.indexOf(sender);
+  b.trigger('showLightbox');
+}
+
+export function showLightbox(_, __, el) {
+  const originalImg = images[currentIndex];
+  const lightboxImg = el.querySelector('img');
+  const anchor = el.querySelector('a');
+  anchor.href = originalImg.src;
+  lightboxImg.src = originalImg.src;
+  lightboxImg.alt = originalImg.alt;
+
+  if (!el.open) {
+    el.showModal();
+  }
+
+  b.trigger('lightboxSetCounter');
+}
+
+export function closeLightbox(_, __, el) {
+  el.close();
+}
+
+export function lightboxSetCounter(_, __, el) {
+  el.innerText = `${currentIndex + 1}/${images.length}`;
+}
+
+export function lightboxNext(_, __, ___) {
+  if (images.length == 1) return;
+  currentIndex++;
+  if (currentIndex >= images.length) {
+    currentIndex = 0;
+  }
+  b.trigger('showLightbox');
+}
+
+export function lightboxPrevious(_, __, ___) {
+  if (images.length == 1) return;
+  currentIndex--;
+  if (currentIndex < 0) {
+    currentIndex = images.length - 1;
+  }
+  b.trigger('showLightbox');
+}