feat: move lightbox over to web components

static/js/lightbox.js

···
-let currentLightboxImages = [];
-let currentLightboxIndex = 0;
+class ImageLightbox extends HTMLElement {
+  constructor() {
+    super();
+    this.currentImages = [];
+    this.currentIndex = 0;
+    this.handleImageClick = this.handleImageClick.bind(this);
+    this.handleKeyPress = this.handleKeyPress.bind(this);
+  }
 
-function openLightbox(src) {
-  currentLightboxImages = [src];
-  currentLightboxIndex = 0;
-  showLightbox();
-}
+  connectedCallback() {
+    this.render();
+    this.setupEventListeners();
+  }
 
-function openLightboxGroup(element) {
-  const group = element.closest('.img-group');
-  const images = Array.from(group.querySelectorAll('img')).map(img => img.src);
-  const clickedImg = element.querySelector('img');
-  
-  currentLightboxImages = images;
-  currentLightboxIndex = images.indexOf(clickedImg.src);
-  showLightbox();
-}
+  disconnectedCallback() {
+    this.cleanup();
+  }
 
-function showLightbox() {
-  let lightbox = document.getElementById('lightbox');
-  
-  if (!lightbox) {
-    lightbox = document.createElement('div');
-    lightbox.id = 'lightbox';
-    lightbox.innerHTML = `
+  render() {
+    this.id = 'lightbox';
+    this.style.display = 'none';
+    this.innerHTML = `
       <div class="lightbox-content">
-        <button class="lightbox-close" onclick="closeLightbox()">&times;</button>
-        <img id="lightbox-img" src="" alt="">
+        <button class="lightbox-close" aria-label="Close lightbox">&times;</button>
+        <img id="lightbox-img" src="" alt="" />
         <div class="lightbox-controls">
-          <button class="lightbox-prev" onclick="prevImage()">←</button>
-          <button class="lightbox-next" onclick="nextImage()">→</button>
+          <button class="lightbox-prev" aria-label="Previous image">←</button>
+          <button class="lightbox-next" aria-label="Next image">→</button>
         </div>
       </div>
     `;
-    document.body.appendChild(lightbox);
-    
-    lightbox.addEventListener('click', (e) => {
-      if (e.target === lightbox) closeLightbox();
+  }
+
+  setupEventListeners() {
+    // Delegate clicks on images with data-lightbox attribute
+    document.addEventListener('click', this.handleImageClick);
+
+    // Lightbox controls
+    this.querySelector('.lightbox-close').addEventListener('click', () => this.close());
+    this.querySelector('.lightbox-prev').addEventListener('click', () => this.prev());
+    this.querySelector('.lightbox-next').addEventListener('click', () => this.next());
+
+    // Click backdrop to close
+    this.addEventListener('click', (e) => {
+      if (e.target === this) this.close();
     });
-    
-    document.addEventListener('keydown', handleKeyPress);
+
+    // Keyboard navigation
+    document.addEventListener('keydown', this.handleKeyPress);
   }
-  
-  updateLightboxImage();
-  lightbox.style.display = 'flex';
-  document.body.style.overflow = 'hidden';
-}
+
+  handleImageClick(e) {
+    // Check if clicked element or its parent has data-lightbox
+    const target = e.target.closest('[data-lightbox]');
+    if (!target) return;
+
+    e.preventDefault();
+
+    const group = target.dataset.lightboxGroup;
+
+    if (group) {
+      // Find all images in the same group
+      const groupElements = Array.from(
+        document.querySelectorAll(`[data-lightbox-group="${group}"]`)
+      );
 
-function closeLightbox() {
-  const lightbox = document.getElementById('lightbox');
-  if (lightbox) {
-    lightbox.style.display = 'none';
+      // Extract image sources
+      this.currentImages = groupElements.map(el => {
+        const img = el.tagName === 'IMG' ? el : el.querySelector('img');
+        return img ? img.src : null;
+      }).filter(Boolean);
+
+      // Find the index of the clicked image
+      this.currentIndex = groupElements.indexOf(target);
+    } else {
+      // Single image
+      const img = target.tagName === 'IMG' ? target : target.querySelector('img');
+      this.currentImages = img ? [img.src] : [];
+      this.currentIndex = 0;
+    }
+
+    if (this.currentImages.length > 0) {
+      this.open();
+    }
+  }
+
+  handleKeyPress(e) {
+    if (this.style.display !== 'flex') return;
+
+    if (e.key === 'Escape') {
+      this.close();
+    } else if (e.key === 'ArrowLeft') {
+      this.prev();
+    } else if (e.key === 'ArrowRight') {
+      this.next();
+    }
+  }
+
+  open() {
+    this.style.display = 'flex';
+    const controls = this.querySelector('.lightbox-controls');
+    if (this.currentImages.length > 1) {
+      controls.style.display = 'flex';
+    } else {
+      controls.style.display = 'none';
+    }
+    document.body.style.overflow = 'hidden';
+    this.updateImage();
+  }
+
+  close() {
+    this.style.display = 'none';
     document.body.style.overflow = '';
   }
-}
 
-function updateLightboxImage() {
-  const img = document.getElementById('lightbox-img');
-  const controls = document.querySelector('.lightbox-controls');
-  
-  img.src = currentLightboxImages[currentLightboxIndex];
-  
-  if (currentLightboxImages.length === 1) {
-    controls.style.display = 'none';
-  } else {
-    controls.style.display = 'flex';
+  updateImage() {
+    const img = this.querySelector('#lightbox-img');
+    img.src = this.currentImages[this.currentIndex];
+  }
+
+  prev() {
+    this.currentIndex = (this.currentIndex - 1 + this.currentImages.length) % this.currentImages.length;
+    this.updateImage();
+  }
+
+  next() {
+    this.currentIndex = (this.currentIndex + 1) % this.currentImages.length;
+    this.updateImage();
   }
-}
 
-function prevImage() {
-  currentLightboxIndex = (currentLightboxIndex - 1 + currentLightboxImages.length) % currentLightboxImages.length;
-  updateLightboxImage();
+  cleanup() {
+    document.removeEventListener('click', this.handleImageClick);
+    document.removeEventListener('keydown', this.handleKeyPress);
+    document.body.style.overflow = '';
+  }
 }
 
-function nextImage() {
-  currentLightboxIndex = (currentLightboxIndex + 1) % currentLightboxImages.length;
-  updateLightboxImage();
+customElements.define('image-lightbox', ImageLightbox);
+
+// Auto-initialize: add lightbox to page if not already present
+if (document.readyState === 'loading') {
+  document.addEventListener('DOMContentLoaded', initLightbox);
+} else {
+  initLightbox();
 }
 
-function handleKeyPress(e) {
-  const lightbox = document.getElementById('lightbox');
-  if (!lightbox || lightbox.style.display !== 'flex') return;
-  
-  if (e.key === 'Escape') {
-    closeLightbox();
-  } else if (e.key === 'ArrowLeft') {
-    prevImage();
-  } else if (e.key === 'ArrowRight') {
-    nextImage();
+function initLightbox() {
+  if (!document.querySelector('image-lightbox')) {
+    const lightbox = document.createElement('image-lightbox');
+    document.body.appendChild(lightbox);
   }
 }

templates/shortcodes/img.html

···
 <figure {% if class %}class="{{class}}" {% else %}class="center" {% endif %}>
-    <div class="img-container" onclick="openLightbox('{{id}}')">
+    <div class="img-container" data-lightbox>
         <img src="{{id}}" {% if alt %}alt="{{alt}}" {% endif %} />
     </div>
     {% if caption %}

templates/shortcodes/imgs.html

···
     {% set images = id | split(pat=",") %}
     {% set alts = alt | default(value="") | split(pat=",") %}
     {% for image in images %}
-        <div class="img-container" onclick="openLightboxGroup(this)">
+        <div class="img-container" data-lightbox data-lightbox-group="group-{{ id | slugify }}">
             <img src="{{image | trim}}" {% if alts[loop.index0] %}alt="{{alts[loop.index0] | trim}}" {% endif %} />
         </div>
     {% endfor %}