@brandocms/jupiter 5.0.0-beta.4 → 5.0.0-beta.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brandocms/jupiter",
-  "version": "5.0.0-beta.4",
+  "version": "5.0.0-beta.6",
   "description": "Frontend helpers.",
   "author": "Univers/Twined",
   "license": "UNLICENSED",
@@ -42,16 +42,14 @@
   },
   "types": "types/index.d.ts",
   "dependencies": {
-    "body-scroll-lock": "^4.0.0-beta.0",
     "lodash.defaultsdeep": "^4.6.1",
-    "motion": "^12.23.24",
-    "virtual-scroll": "^2.2.1"
+    "motion": "^12.23.26"
   },
   "devDependencies": {
-    "@playwright/test": "^1.52.0",
-    "@types/node": "^22.15.16",
-    "typescript": "^5.8.3",
-    "vite": "^6.3.5"
+    "@playwright/test": "^1.57.0",
+    "@types/node": "^22.19.3",
+    "typescript": "^5.9.3",
+    "vite": "^6.4.1"
   },
   "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }

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

@@ -182,6 +182,30 @@ function horizontalLoop(app, items, config) {
         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