@brandocms/jupiter 3.48.3 → 3.49.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@brandocms/jupiter",
-    "version": "3.48.3",
+    "version": "3.49.0",
     "description": "Frontend helpers.",
     "author": "Univers/Twined",
     "license": "UNLICENSED",

package/src/modules/Application/index.js

@@ -107,6 +107,10 @@ export default class Application {
       left: 0
     }
 
+    this.state = {
+      revealed: false
+    }
+
     this.opts = _defaultsDeep(opts, DEFAULT_OPTIONS)
     this.focusableSelectors = this.opts.focusableSelectors
 
@@ -487,6 +491,7 @@ export default class Application {
 
   _emitRevealedEvent() {
     if (!document.body.hasAttribute('data-app-revealed')) {
+      this.state.revealed = true
       document.body.dataset.appRevealed = true
       window.dispatchEvent(this.revealedEvent)
       this.executeCallbacks(Events.APPLICATION_REVEALED)

package/src/modules/Lazyload/index.js

@@ -27,9 +27,13 @@ export default class Lazyload {
     this.initialize()
 
     if (this.opts.registerCallback) {
-      this.app.registerCallback(Events.APPLICATION_REVEALED, () => {
+      if (this.app.state.revealed) {
         this.watch()
-      })
+      } else {
+        this.app.registerCallback(Events.APPLICATION_REVEALED, () => {
+          this.watch()
+        })
+      }
     }
   }
 
@@ -73,7 +77,6 @@ export default class Lazyload {
       this.opts.revealIntersectionObserverConfig
     )
 
-    this.lazyPictures = document.querySelectorAll('[data-ll-srcset]')
     this.initObserver(this.loadObserver)
 
     // Deprecate data-ll-image sometime
@@ -94,6 +97,7 @@ export default class Lazyload {
   initObserver(observer, setAttrs = true) {
     this.lazyPictures.forEach((picture, idx) => {
       if (setAttrs) {
+        picture.setAttribute('data-ll-srcset-initialized', '')
         picture.querySelectorAll('img:not([data-ll-loaded])').forEach(img => {
           img.setAttribute('data-ll-blurred', '')
           img.setAttribute('data-ll-idx', idx)
@@ -181,11 +185,27 @@ 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 => {
       if (item.isIntersecting || item.intersectionRatio > 0) {
         const picture = item.target
-        this.revealPicture(picture)
-        this.revealObserver.unobserve(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 })
+        } else {
+          this.revealPicture(picture)
+          this.revealObserver.unobserve(item.target)
+        }
       }
     })
   }

package/src/modules/StickyHeader/index.js

@@ -63,7 +63,8 @@ const DEFAULT_EVENTS = {
         h._hiding = false
       }
     })
-  }
+  },
+  onSmall: () => {}
 }
 
 const DEFAULT_OPTIONS = {