@shelamkoff/rector 1.0.2 → 1.0.3

package/dist/renderer/renderers/gallery/index.js

@@ -9,10 +9,11 @@ import {
   createDownload,
   createFullscreen,
   exposeStylesUrl,
-} from '@shelamkoff/expose'
-import { setSafeUrlAttribute } from '../../../shared/sanitize/sanitizeUrl.js'
+} from '@shelamkoff/expose'
+import { setSafeUrlAttribute } from '../../../shared/sanitize/sanitizeUrl.js'
+import { mountGalleryMasonry } from '../../../shared/galleryMasonry.js'
 
-const styles = new URL('./styles.css', import.meta.url).href
+const styles = new URL('./styles.css', import.meta.url).href
 const exposeStyles = exposeStylesUrl
 
 const MAX_VISIBLE = 6
@@ -85,16 +86,18 @@ function selectAutoTemplate(count, orientations) {
   }
 }
 
-/**
- * Create the gallery renderer and own every opened Expose instance.
- * @param {string} classPrefix
- * @param {Record<string, import('../../../shared/localeTypes').LocaleValue>} locale
- * @returns {import('../../types').BlockRenderer<import('../../types').GalleryBlock>}
+/**
+ * Create the gallery renderer and own every opened Expose instance.
+ * @param {string} classPrefix
+ * @param {Record<string, import('../../../shared/localeTypes').LocaleValue>} locale
+ * @returns {import('../../types').BlockRenderer<import('../../types').GalleryBlock>}
  */
 export function createGalleryRenderer(classPrefix, locale) {
-  /** @type {WeakMap<HTMLElement, Set<import('@shelamkoff/expose').Expose>>} */
-  const activeInstances = new WeakMap()
-  return {
+  /** @type {WeakMap<HTMLElement, Set<import('@shelamkoff/expose').Expose>>} */
+  const activeInstances = new WeakMap()
+  /** @type {WeakMap<HTMLElement, ReturnType<typeof mountGalleryMasonry>>} */
+  const masonryMounts = new WeakMap()
+  return {
     type: 'gallery',
     styles: [styles, exposeStyles],
 
@@ -112,7 +115,7 @@ export function createGalleryRenderer(classPrefix, locale) {
         ? 'auto'
         : rawLayout
 
-      const container = document.createElement('div')
+      const container = document.createElement('div')
       /** @type {Set<import('@shelamkoff/expose').Expose>} */
       const instances = new Set()
       activeInstances.set(container, instances)
@@ -121,10 +124,12 @@ export function createGalleryRenderer(classPrefix, locale) {
       const slots = getSlotsCount(layout)
       const visibleCount = Math.min(images.length, layout === 'auto' ? MAX_VISIBLE : slots)
       const visibleImages = images.slice(0, visibleCount)
-      const overflowCount = images.length - visibleCount
+      const overflowCount = images.length - visibleCount
       const openLabel = typeof locale['renderer.gallery.open'] === 'string'
         ? locale['renderer.gallery.open']
         : 'Open image'
+      /** @type {HTMLElement[] | null} */
+      let masonryItems = null
 
       if (layout === 'auto') {
         // Set initial template class, refine after images load
@@ -146,42 +151,46 @@ export function createGalleryRenderer(classPrefix, locale) {
         }
 
         visibleImages.forEach((image, i) => {
-          const item = createItem(image, classPrefix, openLabel)
-          const img = item.querySelector('img')
-          if (img) {
-            let settled = false
-            const onImgReady = () => {
-              if (settled) return
-              settled = true
-              orientations[i] = img.naturalWidth ? detectOrientation(img) : 'S'
-              loadedCount++
-              if (loadedCount >= visibleImages.length) onAllLoaded()
-            }
-            img.addEventListener('load', onImgReady, { once: true })
-            img.addEventListener('error', onImgReady, { once: true })
-            // A cached image can become complete between assigning `src` in
-            // createItem() and registering these listeners. Account for that
-            // path without counting a later load/error event twice.
-            if (img.complete) queueMicrotask(onImgReady)
-          }
+          const item = createItem(image, classPrefix, openLabel)
+          const img = item.querySelector('img')
+          if (img) {
+            let settled = false
+            const onImgReady = () => {
+              if (settled) return
+              settled = true
+              orientations[i] = img.naturalWidth ? detectOrientation(img) : 'S'
+              loadedCount++
+              if (loadedCount >= visibleImages.length) onAllLoaded()
+            }
+            img.addEventListener('load', onImgReady, { once: true })
+            img.addEventListener('error', onImgReady, { once: true })
+            // A cached image can become complete between assigning `src` in
+            // createItem() and registering these listeners. Account for that
+            // path without counting a later load/error event twice.
+            if (img.complete) queueMicrotask(onImgReady)
+          }
           if (overflowCount > 0 && i === visibleImages.length - 1) {
             item.appendChild(createOverflow(overflowCount, classPrefix))
           }
           container.appendChild(item)
         })
-      } else if (layout === 'masonry') {
-        container.classList.add('eg--masonry')
-
-        images.forEach((image) => {
+      } else if (layout === 'masonry') {
+        container.classList.add('eg--masonry')
+        masonryItems = []
+
+        images.forEach((image) => {
           const item = createItem(image, classPrefix, openLabel)
-          container.appendChild(item)
-        })
+          const img = item.querySelector('img')
+          if (img) img.loading = 'eager'
+          masonryItems?.push(item)
+          container.appendChild(item)
+        })
       } else {
         // Specific template: 1, 2, 3a-6c, triptych, poly-*
         container.classList.add(`eg--${layout}`)
 
         visibleImages.forEach((image, i) => {
-          const item = createItem(image, classPrefix, openLabel)
+          const item = createItem(image, classPrefix, openLabel)
           if (overflowCount > 0 && i === visibleImages.length - 1) {
             item.appendChild(createOverflow(overflowCount, classPrefix))
           }
@@ -190,9 +199,12 @@ export function createGalleryRenderer(classPrefix, locale) {
       }
 
       // Apply gallery inline styles
-      if (styles) {
-        applyGalleryStyles(container, styles, classPrefix)
-      }
+      if (styles) {
+        applyGalleryStyles(container, styles, classPrefix)
+      }
+      if (masonryItems) {
+        masonryMounts.set(container, mountGalleryMasonry(container, masonryItems))
+      }
 
       // Expose lightbox on click
       container.addEventListener('click', (e) => {
@@ -221,8 +233,8 @@ export function createGalleryRenderer(classPrefix, locale) {
         if (o.captions ?? true) plugins.push(createCaptions())
         if (o.thumbnails) plugins.push(createThumbnails())
         if (o.fullscreen ?? true) plugins.push(createFullscreen())
-        const autoplay = o.autoplayInterval ? createAutoplay({ interval: o.autoplayInterval }) : null
-        if (autoplay) plugins.push(autoplay)
+        const autoplay = o.autoplayInterval ? createAutoplay({ interval: o.autoplayInterval }) : null
+        if (autoplay) plugins.push(autoplay)
         plugins.push(createTransform())
         plugins.push(createDownload())
 
@@ -231,23 +243,23 @@ export function createGalleryRenderer(classPrefix, locale) {
 
         const expose = new Expose(slides, {
           startIndex: idx,
-          animation: 'fade',
-          loop,
-          navigation: o.navigation ?? true,
-          toolbar,
-          plugins,
-        })
-        instances.add(expose)
-        expose.on('close:complete', () => {
-          expose.destroy()
-          instances.delete(expose)
-        })
-        void expose.open(idx).then(() => {
-          autoplay?.start()
-        }).catch(() => {
-          expose.destroy()
-          instances.delete(expose)
-        })
+          animation: 'fade',
+          loop,
+          navigation: o.navigation ?? true,
+          toolbar,
+          plugins,
+        })
+        instances.add(expose)
+        expose.on('close:complete', () => {
+          expose.destroy()
+          instances.delete(expose)
+        })
+        void expose.open(idx).then(() => {
+          autoplay?.start()
+        }).catch(() => {
+          expose.destroy()
+          instances.delete(expose)
+        })
       })
 
       return container
@@ -257,35 +269,38 @@ export function createGalleryRenderer(classPrefix, locale) {
      * Dispose lightboxes that are still open when rendered content is replaced.
      * @param {HTMLElement} element
      */
-    destroy(element) {
-      const instances = activeInstances.get(element)
-      if (!instances) return
-      for (const expose of instances) {
-        expose.destroy()
-      }
-      instances.clear()
-      activeInstances.delete(element)
-    },
+    destroy(element) {
+      masonryMounts.get(element)?.destroy()
+      masonryMounts.delete(element)
+      const instances = activeInstances.get(element)
+      if (instances) {
+        for (const expose of instances) {
+          expose.destroy()
+        }
+        instances.clear()
+        activeInstances.delete(element)
+      }
+    },
   }
 }
 
 /**
- * @param {{ url: string; caption?: string }} image
- * @param {string} classPrefix
- * @param {string} openLabel
- * @returns {HTMLElement}
- */
-function createItem(image, classPrefix, openLabel) {
-  const figure = document.createElement('figure')
-  figure.className = `${classPrefix}-gallery__item`
-  figure.tabIndex = 0
-  figure.setAttribute('role', 'button')
-  figure.setAttribute('aria-label', image.caption ? `${openLabel}: ${image.caption}` : openLabel)
-  figure.addEventListener('keydown', (event) => {
-    if (event.key !== 'Enter' && event.key !== ' ') return
-    event.preventDefault()
-    figure.click()
-  })
+ * @param {{ url: string; caption?: string }} image
+ * @param {string} classPrefix
+ * @param {string} openLabel
+ * @returns {HTMLElement}
+ */
+function createItem(image, classPrefix, openLabel) {
+  const figure = document.createElement('figure')
+  figure.className = `${classPrefix}-gallery__item`
+  figure.tabIndex = 0
+  figure.setAttribute('role', 'button')
+  figure.setAttribute('aria-label', image.caption ? `${openLabel}: ${image.caption}` : openLabel)
+  figure.addEventListener('keydown', (event) => {
+    if (event.key !== 'Enter' && event.key !== ' ') return
+    event.preventDefault()
+    figure.click()
+  })
 
   const img = document.createElement('img')
   img.className = `${classPrefix}-gallery__image`