@brandocms/jupiter 4.0.0-beta.1 → 5.0.0-beta.1

package/src/modules/Lazyload/index.js

@@ -37,6 +37,7 @@ const DEFAULT_OPTIONS = {
   minSize: 40,
   updateSizes: true,
   registerCallback: true,
+  target: null,
 }
 
 /**
@@ -51,6 +52,20 @@ export default class Lazyload {
   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) {
@@ -69,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),
@@ -117,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)
@@ -130,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)
@@ -142,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() {
@@ -189,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)
               })
@@ -204,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)
@@ -214,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)
@@ -225,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)
@@ -276,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')
@@ -336,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,8 +1,8 @@
-import { Manager, Swipe } from '@egjs/hammerjs'
-import { gsap } from 'gsap/all'
+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
@@ -16,7 +16,6 @@ import Dom from '../Dom'
  * @typedef {Object} LightboxOptions
  * @property {boolean} [captions=false] - Enable captions
  * @property {boolean} [numbers=false] - Enable index numbers
- * @property {boolean} [swipe=true] - Enable swipe - this breaks native zoom
  * @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
@@ -41,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,
 
@@ -128,23 +124,17 @@ const DEFAULT_OPTIONS = {
   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) => {
     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,
@@ -152,21 +142,14 @@ const DEFAULT_OPTIONS = {
         h.elements.close,
         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()
+      })
+    })
   },
 }
 
@@ -191,8 +174,8 @@ 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) => {
@@ -294,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)
@@ -342,9 +326,6 @@ 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)
 
@@ -501,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)
-    })
-  }
 }

package/src/modules/Links/index.js

@@ -1,7 +1,6 @@
-import { gsap, ScrollToPlugin } from 'gsap/all'
+import { animate } from 'motion'
 import _defaultsDeep from 'lodash.defaultsdeep'
-
-gsap.registerPlugin(ScrollToPlugin)
+import { set } from '../../utils/motion-helpers'
 
 /**
  * @typedef {Object} LinksOptions
@@ -23,8 +22,7 @@ const DEFAULT_OPTIONS = {
   scrollOffsetNav: false,
   mobileMenuDelay: 800,
   openExternalInWindow: true,
-  linkQuery:
-    'a:not([href^="#"]):not([target="_blank"]):not([data-lightbox]):not(.noanim)',
+  linkQuery: 'a:not([href^="#"]):not([target="_blank"]):not([data-lightbox]):not(.noanim)',
   anchorQuery: 'a[href^="#"]:not(.noanim)',
 
   onAnchor: (target, links) => {
@@ -33,11 +31,7 @@ const DEFAULT_OPTIONS = {
       const headerHeight = header ? header.clientHeight : 0
       target = { y: target, offsetY: headerHeight }
     }
-    links.app.scrollTo(
-      target,
-      links.opts.scrollDuration,
-      links.opts.triggerEvents
-    )
+    links.app.scrollTo(target, links.opts.scrollDuration, links.opts.triggerEvents)
   },
 
   onTransition: (href, app) => {
@@ -47,49 +41,40 @@ const DEFAULT_OPTIONS = {
     const fader = document.querySelector('#fader')
 
     if (fader) {
-      gsap.set(fader, { display: 'block', opacity: 0 })
-      gsap.to(main, {
-        duration: 0.8,
-        y: 25,
-        ease: 'power3.out',
-      })
+      set(fader, { display: 'block', opacity: 0 })
+
+      if (main) {
+        animate(main, { y: 25 }, { duration: 0.8, ease: 'easeOut' })
+        animate(main, { opacity: 0 }, { duration: 0.2 })
+      }
 
       if (header) {
-        gsap.to(header, { duration: 0.2, opacity: 0 })
+        animate(header, { opacity: 0 }, { duration: 0.2 })
       }
 
       if (footer) {
-        gsap.to(footer, { duration: 0.2, opacity: 0 })
+        animate(footer, { opacity: 0 }, { duration: 0.2 })
       }
 
-      gsap.to(fader, {
-        duration: 0.2,
-        opacity: 1,
-        onComplete: () => {
-          window.location = href
-        },
+      animate(fader, { opacity: 1 }, { duration: 0.2 }).finished.then(() => {
+        window.location = href
       })
     } else {
-      gsap.to(main, {
-        duration: 0.8,
-        y: 25,
-        ease: 'power3.out',
-      })
+      if (main) {
+        animate(main, { y: 25 }, { duration: 0.8, ease: 'easeOut' })
+        animate(main, { opacity: 0 }, { duration: 0.2 })
+      }
 
       if (header) {
-        gsap.to(header, { duration: 0.2, opacity: 0 })
+        animate(header, { opacity: 0 }, { duration: 0.2 })
       }
 
       if (footer) {
-        gsap.to(footer, { duration: 0.2, opacity: 0 })
+        animate(footer, { opacity: 0 }, { duration: 0.2 })
       }
 
-      gsap.to(main, {
-        duration: 0.2,
-        opacity: 0,
-        onComplete: () => {
-          window.location = href
-        },
+      animate(main, { opacity: 0 }, { duration: 0.2 }).finished.then(() => {
+        window.location = href
       })
     }
   },
@@ -119,7 +104,7 @@ export default class Links {
   bindHeroLink() {
     const el = document.querySelector('[data-link-to-content]')
     if (el) {
-      el.addEventListener('click', (e) => {
+      el.addEventListener('click', e => {
         const dataTarget = document.querySelector('main')
         e.preventDefault()
         if (dataTarget) {
@@ -131,8 +116,8 @@ export default class Links {
 
   bindAnchors(anchors) {
     let wait = false
-    Array.from(anchors).forEach((anchor) => {
-      anchor.addEventListener('click', (e) => {
+    Array.from(anchors).forEach(anchor => {
+      anchor.addEventListener('click', e => {
         e.preventDefault()
         const href = anchor.getAttribute('href')
         if (href === '#') {
@@ -187,21 +172,21 @@ export default class Links {
   bindLinks(links) {
     const loadingContainer = document.querySelector('.loading-container')
 
-    Array.from(links).forEach((link) => {
+    Array.from(links).forEach(link => {
       const href = link.getAttribute('href')
       if (!href || href === '#' || href.startsWith('javascript:')) {
         return // Skip empty, anchor, or JS-based links
       }
 
       // Determine the normalized hostname of the current document.
-      const normalizedCurrentHost = this.normalizeHostname(
-        document.location.hostname
-      )
+      const normalizedCurrentHost = this.normalizeHostname(document.location.hostname)
 
       // For absolute URLs, use the URL constructor.
       let linkHostname
+      let linkUrl
       try {
-        linkHostname = new URL(href, document.location.href).hostname
+        linkUrl = new URL(href, document.location.href)
+        linkHostname = linkUrl.hostname
       } catch (error) {
         // If URL construction fails, assume it's not internal.
         console.warn(`Failed to parse URL for href "${href}":`, error) // Log errors for debugging
@@ -216,7 +201,7 @@ export default class Links {
         link.setAttribute('target', '_blank')
       }
 
-      link.addEventListener('click', (e) => {
+      link.addEventListener('click', e => {
         if (e.shiftKey || e.metaKey || e.ctrlKey) {
           return
         }
@@ -225,9 +210,29 @@ export default class Links {
           loadingContainer.style.display = 'none'
         }
 
-        if (internalLink) {
-          e.preventDefault()
-          this.opts.onTransition(href, this.app)
+        if (internalLink && linkUrl) {
+          // Check if we're navigating to the same page with just a different hash
+          const currentUrl = new URL(window.location.href)
+          const isSamePage = linkUrl.pathname === currentUrl.pathname && 
+                            linkUrl.search === currentUrl.search
+          
+          if (isSamePage && linkUrl.hash) {
+            // Same page, just different hash - treat as anchor navigation
+            e.preventDefault()
+            const target = linkUrl.hash
+            const element = document.querySelector(target)
+            if (element) {
+              this.opts.onAnchor(element, this)
+              history.pushState({}, '', href)
+            }
+          } else if (isSamePage && !linkUrl.hash && !currentUrl.hash) {
+            // Same exact page without hash - do nothing
+            e.preventDefault()
+          } else {
+            // Different page or same page with/without hash change - do transition
+            e.preventDefault()
+            this.opts.onTransition(href, this.app)
+          }
         }
       })
     })