@brandocms/jupiter 3.55.0 → 4.0.0-beta.2

package/src/modules/Lazyload/index.js

@@ -4,6 +4,25 @@ import imagesAreLoaded from '../../utils/imagesAreLoaded'
 import Dom from '../Dom'
 import * as Events from '../../events'
 
+/**
+ * @typedef {Object} IntersectionObserverConfig
+ * @property {string} [rootMargin] - Margin around the root
+ * @property {number} [threshold] - Threshold for intersection
+ */
+
+/**
+ * @typedef {Object} LazyloadOptions
+ * @property {IntersectionObserverConfig} [revealIntersectionObserverConfig] - Configuration for the reveal intersection observer
+ * @property {IntersectionObserverConfig} [loadIntersectionObserverConfig] - Configuration for the load intersection observer
+ * @property {IntersectionObserverConfig} [intersectionObserverConfig] - Configuration for general intersection observers
+ * @property {boolean} [useNativeLazyloadIfAvailable=true] - Whether to use native lazyloading if available
+ * @property {string} [mode='default'] - Lazyload mode
+ * @property {number} [minSize=40] - Minimum size for auto sizing
+ * @property {boolean} [updateSizes=true] - Whether to update sizes attribute
+ * @property {boolean} [registerCallback=true] - Whether to register a callback for APPLICATION_REVEALED event
+ */
+
+/** @type {LazyloadOptions} */
 const DEFAULT_OPTIONS = {
   revealIntersectionObserverConfig: {
     rootMargin: '0px 100px 0px 100px',
@@ -18,12 +37,35 @@ const DEFAULT_OPTIONS = {
   minSize: 40,
   updateSizes: true,
   registerCallback: true,
+  target: null,
 }
 
+/**
+ * Lazyload class for handling image lazy loading
+ */
 export default class Lazyload {
+  /**
+   * Create a new Lazyload instance
+   * @param {Object} app - Application instance
+   * @param {LazyloadOptions} [opts={}] - Lazyload options
+   */
   constructor(app, opts = {}) {
     this.app = app
     this.opts = _defaultsDeep(opts, DEFAULT_OPTIONS)
+    this.target = this.opts.target || document.body
+    this.resizePending = new Map()
+    this.rafId = null
+
+    // Create reusable MutationObserver for reveal handling
+    this.srcsetReadyObserver = new MutationObserver(mutations => {
+      mutations.forEach(record => {
+        if (record.type === 'attributes' && record.attributeName === 'data-ll-srcset-ready') {
+          this.revealPicture(record.target)
+          this.revealObserver.unobserve(record.target)
+        }
+      })
+    })
+
     this.initialize()
 
     if (this.opts.registerCallback) {
@@ -42,35 +84,30 @@ export default class Lazyload {
   }
 
   initialize() {
-    // initialize all images that have data-sizes="auto" and set sizes="<actual width>px"
-    this.initializeAutoSizes()
+    // initialize ResizeObserver for images with data-sizes="auto"
+    this.initializeResizeObserver()
     // look for lazyload sections. if we find, add an observer that triggers
     // lazyload for all images within.
     this.initializeSections()
 
     // if we have native lazyload, use it.
-    if (
-      'loading' in HTMLImageElement.prototype &&
-      this.opts.useNativeLazyloadIfAvailable
-    ) {
-      const lazyImages = document.querySelectorAll('[data-ll-image]')
-      lazyImages.forEach((img) => {
+    if ('loading' in HTMLImageElement.prototype && this.opts.useNativeLazyloadIfAvailable) {
+      const lazyImages = this.target.querySelectorAll('[data-ll-image]')
+      lazyImages.forEach(img => {
         img.setAttribute('loading', 'lazy')
         this.swapImage(img)
       })
 
-      const lazyPictures = document.querySelectorAll('[data-ll-srcset]')
-      lazyPictures.forEach((picture) => {
-        picture
-          .querySelectorAll('img')
-          .forEach((img) => img.setAttribute('loading', 'lazy'))
+      const lazyPictures = this.target.querySelectorAll('[data-ll-srcset]')
+      lazyPictures.forEach(picture => {
+        picture.querySelectorAll('img').forEach(img => img.setAttribute('loading', 'lazy'))
         this.swapPicture(picture)
       })
 
       return
     }
 
-    this.lazyPictures = document.querySelectorAll('[data-ll-srcset]')
+    this.lazyPictures = this.target.querySelectorAll('[data-ll-srcset]')
 
     this.loadObserver = new IntersectionObserver(
       this.handleLoadEntries.bind(this),
@@ -90,7 +127,7 @@ export default class Lazyload {
       this.opts.intersectionObserverConfig
     )
 
-    this.lazyImages = document.querySelectorAll('[data-ll-image]')
+    this.lazyImages = this.target.querySelectorAll('[data-ll-image]')
     this.lazyImages.forEach((img, idx) => {
       img.setAttribute('data-ll-blurred', '')
       img.setAttribute('data-ll-idx', idx)
@@ -103,7 +140,7 @@ export default class Lazyload {
     this.lazyPictures.forEach((picture, idx) => {
       if (setAttrs) {
         picture.setAttribute('data-ll-srcset-initialized', '')
-        picture.querySelectorAll('img:not([data-ll-loaded])').forEach((img) => {
+        picture.querySelectorAll('img:not([data-ll-loaded])').forEach(img => {
           img.setAttribute('data-ll-blurred', '')
           img.setAttribute('data-ll-idx', idx)
           img.style.setProperty('--ll-idx', idx)
@@ -115,45 +152,82 @@ export default class Lazyload {
 
   forceLoad($container = document.body) {
     const images = Dom.all($container, '[data-ll-image]')
-    images.forEach((img) => this.swapImage(img))
+    images.forEach(img => this.swapImage(img))
 
     const pictures = Dom.all($container, '[data-ll-srcset]')
-    pictures.forEach((picture) => this.revealPicture(picture))
+    pictures.forEach(picture => this.revealPicture(picture))
   }
 
-  initializeAutoSizes() {
-    if (this.opts.updateSizes) {
-      this.$autoSizesImages = Dom.all('[data-sizes="auto"]')
-      this.autoSizes()
-      window.addEventListener(Events.APPLICATION_RESIZE, () => this.autoSizes())
+  initializeResizeObserver() {
+    if (!this.opts.updateSizes) {
+      return
     }
-  }
 
-  /**
-   * Set sizes attribute for all imgs with `data-sizes="auto"` and source within the <picture>
-   */
-  autoSizes() {
-    Array.from(this.$autoSizesImages).forEach((img) => {
-      const width = this.getWidth(img)
-      img.setAttribute('sizes', `${width}px`)
-      if (img.parentNode) {
-        Array.from(Dom.all(img.parentNode, 'source')).forEach((source) =>
-          source.setAttribute('sizes', `${width}px`)
-        )
-      }
+    // Use ResizeObserver to watch images with data-sizes="auto"
+    // This eliminates layout thrashing from repeated offsetWidth reads
+    this.sizeObserver = new ResizeObserver(entries => {
+      entries.forEach(entry => {
+        const img = entry.target
+        // Use contentBoxSize for better performance (avoids layout queries)
+        let width = entry.borderBoxSize?.[0]?.inlineSize || entry.contentRect.width
+
+        // Round to prevent decimal fluctuations causing loops
+        width = Math.round(width)
+
+        // Fallback to minSize if element is too small
+        if (width < this.opts.minSize) {
+          width = this.opts.minSize
+        }
+
+        // Only queue update if width actually changed from current sizes attribute
+        const currentSizes = img.getAttribute('sizes')
+        const expectedSizes = `${width}px`
+
+        if (currentSizes !== expectedSizes) {
+          // Batch updates using RAF to avoid layout thrashing
+          this.resizePending.set(img, width)
+
+          if (!this.rafId) {
+            this.rafId = requestAnimationFrame(() => {
+              this.flushSizeUpdates()
+            })
+          }
+        }
+      })
+    })
+
+    // Observe all images with data-sizes="auto" within the target container
+    const autoSizesImages = Dom.all(this.target, '[data-sizes="auto"]')
+
+    // Deduplicate in case of multiple Lazyload instances
+    const uniqueImages = new Set(autoSizesImages)
+
+    uniqueImages.forEach(img => {
+      this.sizeObserver.observe(img)
     })
   }
 
-  getWidth(img) {
-    let width = img.offsetWidth
-    let parent = img.parentNode
+  flushSizeUpdates() {
+    // Batch all size updates together to minimize reflows
+    this.resizePending.forEach((width, img) => {
+      const currentSizes = img.getAttribute('sizes')
+      const newSizes = `${Math.round(width)}px`
 
-    while (width < this.opts.minSize && parent) {
-      width = parent.offsetWidth
-      parent = parent.parentNode
-    }
+      // Only update if value actually changed to prevent resize loops
+      if (currentSizes !== newSizes) {
+        img.setAttribute('sizes', newSizes)
+        if (img.parentNode) {
+          Array.from(Dom.all(img.parentNode, 'source')).forEach(source => {
+            if (source.getAttribute('sizes') !== newSizes) {
+              source.setAttribute('sizes', newSizes)
+            }
+          })
+        }
+      }
+    })
 
-    return width
+    this.resizePending.clear()
+    this.rafId = null
   }
 
   initializeSections() {
@@ -162,12 +236,12 @@ export default class Lazyload {
       const sectionObserver = (section, children) => {
         const imagesInSection = Dom.all(section, 'img')
         return new IntersectionObserver((entries, self) => {
-          entries.forEach((entry) => {
+          entries.forEach(entry => {
             if (entry.isIntersecting || entry.intersectionRatio > 0) {
               imagesAreLoaded(imagesInSection, true).then(() => {
                 dispatchElementEvent(section, Events.SECTION_LAZYLOADED)
               })
-              children.forEach((picture) => {
+              children.forEach(picture => {
                 this.loadPicture(picture)
                 this.loadObserver.unobserve(picture)
               })
@@ -177,7 +251,7 @@ export default class Lazyload {
         }, this.opts.intersectionObserverConfig)
       }
 
-      sections.forEach((section) => {
+      sections.forEach(section => {
         const children = section.querySelectorAll('picture')
         const obs = sectionObserver(section, children)
         obs.observe(section)
@@ -187,7 +261,7 @@ export default class Lazyload {
 
   // we load the picture a ways before it enters the viewport
   handleLoadEntries(elements) {
-    elements.forEach((item) => {
+    elements.forEach(item => {
       if (item.isIntersecting || item.intersectionRatio > 0) {
         const picture = item.target
         this.loadPicture(picture)
@@ -198,26 +272,15 @@ export default class Lazyload {
 
   // we reveal the picture when it enters the viewport
   handleRevealEntries(elements) {
-    const srcsetReadyObserver = new MutationObserver((mutations) => {
-      mutations.forEach((record) => {
-        if (
-          record.type === 'attributes' &&
-          record.attributeName === 'data-ll-srcset-ready'
-        ) {
-          this.revealPicture(record.target)
-          this.revealObserver.unobserve(record.target)
-        }
-      })
-    })
-
-    elements.forEach((item) => {
+    elements.forEach(item => {
       if (item.isIntersecting || item.intersectionRatio > 0) {
         const picture = item.target
         const ready = item.target.hasAttribute('data-ll-srcset-ready')
         if (!ready) {
           // element is not loaded, observe the picture and wait for
           // `data-ll-srcset-ready` before revealing
-          srcsetReadyObserver.observe(picture, { attributes: true })
+          // Use reusable MutationObserver to prevent memory leaks
+          this.srcsetReadyObserver.observe(picture, { attributes: true })
         } else {
           this.revealPicture(picture)
           this.revealObserver.unobserve(item.target)
@@ -249,23 +312,8 @@ export default class Lazyload {
     const img = picture.querySelector('img')
 
     const onload = () => {
-      if (
-        !img.getAttribute('data-ll-ready') &&
-        this.app.browser === 'firefox'
-      ) {
-        // set sizes attribute on load again,
-        // since firefox sometimes is a bit slow to
-        // get the actual image width
-        const width = this.getWidth(img)
-
-        img.setAttribute('sizes', `${width}px`)
-        if (img.parentNode) {
-          Array.from(Dom.all(img.parentNode, 'source')).forEach((source) =>
-            source.setAttribute('sizes', `${width}px`)
-          )
-        }
-      }
-
+      // ResizeObserver now handles size updates automatically,
+      // including Firefox's delayed dimension calculation
       img.removeAttribute('data-ll-placeholder')
       img.removeAttribute('data-ll-blurred')
       img.removeAttribute('data-ll-loading')
@@ -309,7 +357,7 @@ export default class Lazyload {
   }
 
   lazyloadImages(elements) {
-    elements.forEach((item) => {
+    elements.forEach(item => {
       if (item.isIntersecting || item.intersectionRatio > 0) {
         const image = item.target
         this.swapImage(image)

package/src/modules/Lightbox/index.js

@@ -1,9 +1,38 @@
-import { Manager, Swipe } from '@egjs/hammerjs'
-import { gsap } from 'gsap'
+import { animate } from 'motion'
 import _defaultsDeep from 'lodash.defaultsdeep'
 import imageIsLoaded from '../../utils/imageIsLoaded'
 import Dom from '../Dom'
-
+import { set, PausedTimeline } from '../../utils/motion-helpers'
+
+/**
+ * @typedef {Object} LightboxElements
+ * @property {Function} [arrowRight] - Function to create right arrow element
+ * @property {Function} [arrowLeft] - Function to create left arrow element
+ * @property {Function} [close] - Function to create close button element
+ * @property {Function} [dot] - Function to create dot/indicator element
+ */
+
+/**
+ * @typedef {Object} LightboxOptions
+ * @property {boolean} [captions=false] - Enable captions
+ * @property {boolean} [numbers=false] - Enable index numbers
+ * @property {string|boolean} [trigger=false] - Selector for trigger element to open the lightbox
+ * @property {LightboxElements} [elements] - Custom elements configuration
+ * @property {Function} [onClick] - Click handler for lightbox
+ * @property {Function} [onPointerLeft] - Called when pointer moves left
+ * @property {Function} [onPointerRight] - Called when pointer moves right
+ * @property {Function} [onCaptionOut] - Called when caption fades out
+ * @property {Function} [onCaptionIn] - Called when caption fades in
+ * @property {Function} [onImageOut] - Called when image fades out
+ * @property {Function} [onImageIn] - Called when image fades in
+ * @property {Function} [onNumbers] - Called when numbers display updates
+ * @property {Function} [onBeforeOpen] - Called before opening lightbox
+ * @property {Function} [onOpen] - Called when lightbox opens
+ * @property {Function} [onAfterClose] - Called after lightbox closes
+ * @property {Function} [onClose] - Called when lightbox closes
+ */
+
+/** @type {LightboxOptions} */
 const DEFAULT_OPTIONS = {
   /* enable captions */
   captions: false,
@@ -11,9 +40,6 @@ const DEFAULT_OPTIONS = {
   /* enable index numbers */
   numbers: false,
 
-  /* enable swipe — this breaks native zoom! */
-  swipe: true,
-
   /* set to a selector if you want a specific trigger element to open the box */
   trigger: false,
 
@@ -33,7 +59,7 @@ const DEFAULT_OPTIONS = {
     },
 
     close: () => document.createTextNode('×'),
-    dot: () => document.createTextNode('▪')
+    dot: () => document.createTextNode('▪'),
   },
 
   onClick: (lightbox, section, e) => {
@@ -56,7 +82,10 @@ const DEFAULT_OPTIONS = {
       return
     }
 
-    lightbox.timelines.caption.to(lightbox.elements.caption, { duration: 0.4, autoAlpha: 0 })
+    lightbox.timelines.caption.to(lightbox.elements.caption, {
+      duration: 0.4,
+      autoAlpha: 0,
+    })
   },
 
   onCaptionIn: (lightbox, captionHasChanged) => {
@@ -64,16 +93,26 @@ const DEFAULT_OPTIONS = {
       return
     }
 
-    lightbox.timelines.caption.to(lightbox.elements.caption, { duration: 0.4, autoAlpha: 1 })
+    lightbox.timelines.caption.to(lightbox.elements.caption, {
+      duration: 0.4,
+      autoAlpha: 1,
+    })
   },
 
-  onImageOut: lightbox => {
-    lightbox.timelines.image.to(lightbox.currentImage, { duration: 0.5, autoAlpha: 0 })
+  onImageOut: (lightbox) => {
+    lightbox.timelines.image.to(lightbox.currentImage, {
+      duration: 0.5,
+      autoAlpha: 0,
+    })
   },
 
-  onImageIn: lightbox => {
+  onImageIn: (lightbox) => {
     const delay = lightbox.firstTransition ? 0.6 : 0.4
-    lightbox.timelines.image.to(lightbox.nextImage, { duration: 0.5, autoAlpha: 1, delay })
+    lightbox.timelines.image.to(lightbox.nextImage, {
+      duration: 0.5,
+      autoAlpha: 1,
+      delay,
+    })
   },
 
   onNumbers: (lightbox, section) => {
@@ -82,52 +121,47 @@ const DEFAULT_OPTIONS = {
 
   onBeforeOpen: () => {},
 
-  onOpen: h => {
+  onOpen: (h) => {
     h.app.scrollLock()
 
-    gsap.to(h.elements.wrapper, {
-      duration: 0.5,
-      opacity: 1
-    })
+    animate(h.elements.wrapper, { opacity: 1 }, { duration: 0.5 })
   },
 
   onAfterClose: () => {},
 
-  onClose: h => {
+  onClose: (h) => {
     if (h.opts.captions) {
-      gsap.to(h.elements.caption, {
-        duration: 0.45,
-        opacity: 0
-      })
+      animate(h.elements.caption, { opacity: 0 }, { duration: 0.45 })
     }
 
-    gsap.to(
+    animate(
       [
         h.elements.imgWrapper,
         h.elements.nextArrow,
         h.elements.prevArrow,
         h.elements.close,
-        h.elements.dots
+        h.elements.dots,
       ],
-      {
-        duration: 0.5,
-        opacity: 0,
-        onComplete: () => {
-          gsap.to(h.elements.wrapper, {
-            duration: 0.45,
-            opacity: 0,
-            onComplete: () => {
-              h.app.scrollRelease()
-              h.destroy()
-            }
-          })
-        }
-      }
-    )
-  }
+      { opacity: 0 },
+      { duration: 0.5 }
+    ).finished.then(() => {
+      animate(h.elements.wrapper, { opacity: 0 }, { duration: 0.45 }).finished.then(() => {
+        h.app.scrollRelease()
+        h.destroy()
+      })
+    })
+  },
 }
 
+/**
+ * Lightbox component for displaying images in a fullscreen overlay
+ */
 export default class Lightbox {
+  /**
+   * Create a new Lightbox instance
+   * @param {Object} app - Application instance
+   * @param {LightboxOptions} [opts={}] - Lightbox options
+   */
   constructor(app, opts = {}) {
     this.app = app
     this.opts = _defaultsDeep(opts, DEFAULT_OPTIONS)
@@ -140,16 +174,17 @@ export default class Lightbox {
     this.firstTransition = true
     this.previousCaption = null
     this.timelines = {
-      caption: gsap.timeline({ paused: true }),
-      image: gsap.timeline({ paused: true })
+      caption: new PausedTimeline(),
+      image: new PausedTimeline(),
     }
 
-    this.lightboxes.forEach(lightbox => {
+    this.lightboxes.forEach((lightbox) => {
       const href = lightbox.getAttribute('data-lightbox')
       const srcset = lightbox.getAttribute('data-srcset')
       const originalImage = lightbox.querySelector('img')
       const alt = originalImage.getAttribute('alt')
-      const section = lightbox.getAttribute('data-lightbox-section') || 'general'
+      const section =
+        lightbox.getAttribute('data-lightbox-section') || 'general'
       let trigger = lightbox
       if (this.opts.trigger) {
         trigger = Dom.find(lightbox, this.opts.trigger) || lightbox
@@ -162,12 +197,12 @@ export default class Lightbox {
       const image = {
         href,
         alt,
-        srcset
+        srcset,
       }
 
       const index = this.sections[section].push(image) - 1
 
-      trigger.addEventListener('click', e => {
+      trigger.addEventListener('click', (e) => {
         e.preventDefault()
         this.showBox(section, index)
       })
@@ -207,30 +242,30 @@ export default class Lightbox {
     this.elements.nextArrow.appendChild(this.opts.elements.arrowRight())
     this.elements.nextArrow.href = '#'
 
-    this.elements.nextArrow.addEventListener('click', e => {
+    this.elements.nextArrow.addEventListener('click', (e) => {
       e.stopPropagation()
       e.preventDefault()
       this.setImg(section, this.getNextIdx(section))
     })
 
-    this.elements.prevArrow.addEventListener('click', e => {
+    this.elements.prevArrow.addEventListener('click', (e) => {
       e.stopPropagation()
       e.preventDefault()
       this.setImg(section, this.getPrevIdx(section))
     })
 
-    this.keyUpCallback = event => {
+    this.keyUpCallback = (event) => {
       this.onKeyup(event, section)
     }
 
     document.removeEventListener('keyup', this.keyUpCallback)
     document.addEventListener('keyup', this.keyUpCallback)
 
-    this.elements.wrapper.addEventListener('mousemove', event => {
+    this.elements.wrapper.addEventListener('mousemove', (event) => {
       this.onMouseMove(event)
     })
 
-    this.elements.wrapper.addEventListener('click', event => {
+    this.elements.wrapper.addEventListener('click', (event) => {
       this.onClick(event, section)
     })
 
@@ -242,7 +277,8 @@ export default class Lightbox {
 
     this.sections[section].forEach((img, x) => {
       const imgElement = document.createElement('img')
-      gsap.set(imgElement, { autoAlpha: 0 })
+      set(imgElement, { opacity: 0 })
+      imgElement.style.visibility = 'hidden'
       imgElement.classList.add('lightbox-image', 'm-lg')
       imgElement.setAttribute('data-idx', x)
       this.elements.imgWrapper.appendChild(imgElement)
@@ -257,7 +293,7 @@ export default class Lightbox {
         activeLink = a
       }
 
-      a.addEventListener('click', e => {
+      a.addEventListener('click', (e) => {
         a.classList.add('active')
         activeLink.classList.remove('active')
         activeLink = a
@@ -290,13 +326,10 @@ export default class Lightbox {
     document.body.appendChild(this.elements.wrapper)
 
     this.setImg(section, index, this.getPrevIdx(section))
-    if (this.opts.swipe) {
-      this.attachSwiper(section, this.elements.content, index)
-    }
 
     this.opts.onOpen(this)
 
-    this.elements.close.addEventListener('click', e => {
+    this.elements.close.addEventListener('click', (e) => {
       e.preventDefault()
       e.stopPropagation()
 
@@ -334,7 +367,8 @@ export default class Lightbox {
     activeDot.classList.add('active')
 
     if (this.elements.caption) {
-      captionHasChanged = this.previousCaption !== this.sections[section][index].alt
+      captionHasChanged =
+        this.previousCaption !== this.sections[section][index].alt
       this.previousCaption = this.sections[section][index].alt
       this.opts.onCaptionOut(this, captionHasChanged)
       this.timelines.caption.call(() => {
@@ -357,7 +391,10 @@ export default class Lightbox {
       if (this.imgs[index + x]) {
         this.imgs[index + x].src = this.sections[section][index + x].href
         if (this.sections[section][index + x].srcset) {
-          this.imgs[index + x].setAttribute('srcset', this.sections[section][index + x].srcset)
+          this.imgs[index + x].setAttribute(
+            'srcset',
+            this.sections[section][index + x].srcset
+          )
         }
       } else {
         break
@@ -367,7 +404,10 @@ export default class Lightbox {
     this.nextImage = this.imgs[index]
     this.nextImage.src = this.sections[section][index].href
     if (this.sections[section][index].srcset) {
-      this.nextImage.setAttribute('srcset', this.sections[section][index].srcset)
+      this.nextImage.setAttribute(
+        'srcset',
+        this.sections[section][index].srcset
+      )
     }
 
     this.opts.onImageIn(this)
@@ -442,23 +482,4 @@ export default class Lightbox {
       this.opts.onPointerRight(this)
     }
   }
-
-  attachSwiper(section, el, initialIdx) {
-    const hammerManager = new Manager(el)
-    const swipeHandler = new Swipe()
-
-    this.elements.content.setAttribute('data-current-idx', initialIdx)
-
-    hammerManager.add(swipeHandler)
-
-    hammerManager.on('swipeleft', () => {
-      const index = this.getNextIdx(section)
-      this.setImg(section, index)
-    })
-
-    hammerManager.on('swiperight', () => {
-      const index = this.getPrevIdx(section)
-      this.setImg(section, index)
-    })
-  }
 }