@brandocms/jupiter 5.0.0-beta.3 → 5.0.0-beta.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brandocms/jupiter",
-  "version": "5.0.0-beta.3",
+  "version": "5.0.0-beta.5",
   "description": "Frontend helpers.",
   "author": "Univers/Twined",
   "license": "UNLICENSED",

package/src/modules/HeroSlider/index.js

@@ -306,20 +306,30 @@ export default class HeroSlider {
           this._currentAnimation = animate(sequence)
 
           this._currentAnimation.finished.then(() => {
-            // Cleanup and shuffle z-indexes
-            set(this._nextSlide, { zIndex: this.opts.zIndex.next, opacity: 1 })
-            set(this._currentSlide, {
-              zIndex: this.opts.zIndex.visible,
-              width: '100%',
-              opacity: 1,
+            // Reset ALL slides using instant animations to ensure Motion.js state is clean
+            Array.from(this.slides).forEach((slide) => {
+              if (slide === this._currentSlide) return
+              const img = slide.querySelector('.hero-slide-img')
+              if (img) {
+                // Use animate with duration 0 to reset Motion.js internal state
+                animate(img, { scale: 1 }, { duration: 0 })
+              }
+              const isNext = slide === this._nextSlide
+              // Reset slide using animate with duration 0
+              animate(slide, {
+                width: '100%',
+                opacity: isNext ? 1 : 0,
+              }, { duration: 0 })
+              slide.style.overflow = ''
+              slide.style.zIndex = isNext ? this.opts.zIndex.next : this.opts.zIndex.regular
             })
-            set(this._previousSlide, {
-              zIndex: this.opts.zIndex.regular,
+
+            animate(this._currentSlide, {
               width: '100%',
-              opacity: 0, // Hide previous slide
-            })
-            // Reset previous slide image scale for next time
-            set(previousSlideImg, { scale: 1.0 })
+              opacity: 1,
+            }, { duration: 0 })
+            this._currentSlide.style.zIndex = this.opts.zIndex.visible
+
             this.next()
           })
         }

package/src/modules/Lazyload/index.js

@@ -83,6 +83,65 @@ export default class Lazyload {
     this.initObserver(this.revealObserver, false)
   }
 
+  /**
+   * Observe new lazyload elements within a container
+   * Handles both [data-ll-image] and [data-ll-srcset] elements
+   * Useful for dynamically added content (e.g., Looper clones)
+   * @param {HTMLElement|HTMLElement[]|NodeList} elements - Container element(s) or lazyload element(s) to observe
+   */
+  observe(elements) {
+    // Handle NodeList, array, or single element
+    const els = elements instanceof NodeList ? Array.from(elements) :
+                Array.isArray(elements) ? elements : [elements]
+
+    let imgIdx = this.lazyImages?.length || 0
+    let picIdx = this.lazyPictures?.length || 0
+
+    els.forEach(el => {
+      // Handle [data-ll-image] elements
+      if (this.imageObserver) {
+        const images = el.matches?.('[data-ll-image]')
+          ? [el]
+          : el.querySelectorAll?.('[data-ll-image]') || []
+
+        images.forEach(img => {
+          // Skip if already observed or loaded
+          if (img.hasAttribute('data-ll-idx') || img.hasAttribute('data-ll-loaded')) return
+
+          img.setAttribute('data-ll-blurred', '')
+          img.setAttribute('data-ll-idx', imgIdx)
+          img.style.setProperty('--ll-idx', imgIdx)
+          this.imageObserver.observe(img)
+          imgIdx++
+        })
+      }
+
+      // Handle [data-ll-srcset] picture elements
+      if (this.loadObserver) {
+        const pictures = el.matches?.('[data-ll-srcset]')
+          ? [el]
+          : el.querySelectorAll?.('[data-ll-srcset]') || []
+
+        pictures.forEach(picture => {
+          // Skip if already loaded
+          if (picture.hasAttribute('data-ll-srcset-ready')) return
+
+          picture.setAttribute('data-ll-srcset-initialized', '')
+          picture.querySelectorAll('img:not([data-ll-loaded])').forEach(img => {
+            img.removeAttribute('data-ll-idx') // Clear cloned idx
+            img.setAttribute('data-ll-blurred', '')
+            img.setAttribute('data-ll-idx', picIdx)
+            img.style.setProperty('--ll-idx', picIdx)
+          })
+          // Add to both observers like initObserver does
+          this.loadObserver.observe(picture)
+          this.revealObserver?.observe(picture)
+          picIdx++
+        })
+      }
+    })
+  }
+
   initialize() {
     // initialize ResizeObserver for images with data-sizes="auto"
     this.initializeResizeObserver()
@@ -128,12 +187,7 @@ export default class Lazyload {
     )
 
     this.lazyImages = this.target.querySelectorAll('[data-ll-image]')
-    this.lazyImages.forEach((img, idx) => {
-      img.setAttribute('data-ll-blurred', '')
-      img.setAttribute('data-ll-idx', idx)
-      img.style.setProperty('--ll-idx', idx)
-      this.imageObserver.observe(img)
-    })
+    this.observe(this.lazyImages)
   }
 
   initObserver(observer, setAttrs = true) {

package/src/modules/Looper/index.js

@@ -103,6 +103,10 @@ function horizontalLoop(app, items, config) {
   let positionUnsubscribe = null // Track position listener for cleanup
   let renderUnsubscribe = null // Track frame.render loop for cleanup
 
+  // Scroll direction tracking for wrap logic
+  let scrollDirection = 0 // -1 = backward, 0 = neutral, 1 = forward
+  let lastPositionForDirection = 0
+
   // Display elements for index/count
   let indexElements = []
   let countElements = []
@@ -163,24 +167,45 @@ function horizontalLoop(app, items, config) {
     // This prevents items from visibly moving to the back before they're off-screen
     const minRequiredWidth = containerWidth * 2.5 + maxItemWidth
 
-    // Only replicate if needed
-    if (totalWidth >= minRequiredWidth) {
-      return
-    }
-
     // Store original count to prevent exponential growth
     const originalItemCount = items.length
     const maxReplications = 10
     let count = 0
     let previousTotalWidth = totalWidth
 
-    while (totalWidth < minRequiredWidth && count < maxReplications) {
+    // Always create at least one set of clones - the wrapping logic depends on clones existing
+    // Then continue until we have enough width for seamless looping
+    while ((count === 0 || totalWidth < minRequiredWidth) && count < maxReplications) {
       // Clone ONLY original items
       for (let i = 0; i < originalItemCount; i++) {
         const clone = items[i].cloneNode(true)
         clone.setAttribute('data-looper-clone', 'true')
         container.appendChild(clone)
         items.push(clone)
+
+        // Register cloned lazyload elements with Lazyload module if available
+        if (app?.lazyload?.observe) {
+          // Clear data-ll-idx from unloaded [data-ll-image] images
+          clone.querySelectorAll('[data-ll-image]:not([data-ll-loaded])').forEach(img => {
+            img.removeAttribute('data-ll-idx')
+          })
+
+          // Clear attributes from unloaded [data-ll-srcset] pictures so they can be re-observed
+          clone.querySelectorAll('[data-ll-srcset]:not([data-ll-srcset-ready])').forEach(picture => {
+            picture.removeAttribute('data-ll-srcset-initialized')
+            // Clear ready state from sources and img so they can be re-processed
+            picture.querySelectorAll('source').forEach(source => {
+              source.removeAttribute('data-ll-ready')
+            })
+            picture.querySelectorAll('img').forEach(img => {
+              img.removeAttribute('data-ll-idx')
+              img.removeAttribute('data-ll-loaded')
+              img.removeAttribute('data-ll-ready')
+            })
+          })
+
+          app.lazyload.observe(clone)
+        }
       }
 
       // Force layout recalculation
@@ -390,10 +415,11 @@ function horizontalLoop(app, items, config) {
         // In reset zone but item doesn't need reset → keep current offset
         newOffset = itemWrapOffsets[i]
       } else if (itemLeft < -(widths[i] + containerWidth * 0.5)) {
-        // Item exited LEFT edge
-        // Forward drag (low boundedPos): wrap to END
-        // Backward drag (high boundedPos): don't wrap, clones fill in from right
-        newOffset = boundedPos < originalItemsWidth / 2 ? wrapOffset : 0
+        // Item exited LEFT edge - only wrap during forward scroll
+        // During reverse scroll (scrollDirection < 0), items off-screen left
+        // will naturally scroll back into view - don't wrap them
+        const isForwardScroll = scrollDirection >= 0
+        newOffset = (isForwardScroll && boundedPos < originalItemsWidth / 2) ? wrapOffset : 0
       } else if (itemLeft > containerWidth + containerWidth * 0.5) {
         // Item exited RIGHT edge
         // This shouldn't happen much, but handle it
@@ -532,6 +558,13 @@ function horizontalLoop(app, items, config) {
       // Set up boundedPos motionValue to automatically sync with position
       // This calculates the bounded position (0 to originalItemsWidth)
       const positionUnsubscribe = position.on('change', latest => {
+        // Track scroll direction for wrap logic
+        const delta = latest - lastPositionForDirection
+        if (Math.abs(delta) > 1) {
+          scrollDirection = delta > 0 ? 1 : -1
+        }
+        lastPositionForDirection = latest
+
         const bounded = ((latest % originalItemsWidth) + originalItemsWidth) % originalItemsWidth
         boundedPos.set(bounded)
       })
@@ -1165,7 +1198,8 @@ function horizontalLoop(app, items, config) {
       const currentPos = position.get()
 
       // Calculate position within current cycle (using originalItemsWidth)
-      const cyclePos = currentPos % originalItemsWidth
+      // Use proper modulo for negative positions (dragging right/backward)
+      const cyclePos = ((currentPos % originalItemsWidth) + originalItemsWidth) % originalItemsWidth
       const remainingDist = originalItemsWidth - cyclePos
       const remainingDuration = remainingDist / pixelsPerSecond