@brandocms/jupiter 3.48.2 → 3.49.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@brandocms/jupiter",
-    "version": "3.48.2",
+    "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/Lightbox/index.js

@@ -8,6 +8,9 @@ const DEFAULT_OPTIONS = {
   /* enable captions */
   captions: false,
 
+  /* enable index numbers */
+  numbers: false,
+
   /* enable swipe — this breaks native zoom! */
   swipe: true,
 
@@ -73,6 +76,10 @@ const DEFAULT_OPTIONS = {
     lightbox.timelines.image.to(lightbox.nextImage, { duration: 0.5, autoAlpha: 1, delay })
   },
 
+  onNumbers: (lightbox, section) => {
+    lightbox.elements.numbers.innerHTML = `${lightbox.currentIndex + 1}/${section.length}`
+  },
+
   onBeforeOpen: () => {},
 
   onOpen: h => {
@@ -177,6 +184,7 @@ export default class Lightbox {
     this.elements.content = document.createElement('div')
     this.elements.imgWrapper = document.createElement('div')
     this.elements.dots = document.createElement('div')
+    this.elements.numbers = document.createElement('div')
     this.elements.nextArrow = document.createElement('a')
     this.elements.prevArrow = document.createElement('a')
     this.elements.close = document.createElement('a')
@@ -188,6 +196,7 @@ export default class Lightbox {
     this.elements.prevArrow.classList.add('lightbox-prev')
     this.elements.close.classList.add('lightbox-close')
     this.elements.dots.classList.add('lightbox-dots')
+    this.elements.numbers.classList.add('lightbox-numbers')
     this.elements.wrapper.classList.add('lightbox-backdrop')
     this.elements.wrapper.setAttribute('data-lightbox-wrapper-section', section)
     this.elements.imgWrapper.classList.add('lightbox-image-wrapper')
@@ -210,9 +219,12 @@ export default class Lightbox {
       this.setImg(section, this.getPrevIdx(section))
     })
 
-    document.addEventListener('keyup', 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.onMouseMove(event)
@@ -264,6 +276,10 @@ export default class Lightbox {
     this.elements.content.appendChild(this.elements.prevArrow)
     this.elements.content.appendChild(this.elements.dots)
 
+    if (this.opts.numbers) {
+      this.elements.content.appendChild(this.elements.numbers)
+    }
+
     if (this.opts.captions) {
       this.elements.caption = document.createElement('div')
       this.elements.caption.classList.add('lightbox-caption')
@@ -273,7 +289,7 @@ export default class Lightbox {
     this.elements.wrapper.appendChild(this.elements.content)
     document.body.appendChild(this.elements.wrapper)
 
-    this.setImg(section, index, this.getPrevIdx(index))
+    this.setImg(section, index, this.getPrevIdx(section))
     if (this.opts.swipe) {
       this.attachSwiper(section, this.elements.content, index)
     }
@@ -289,7 +305,7 @@ export default class Lightbox {
   }
 
   close() {
-    document.removeEventListener('keyup', this.onKeyup.bind(this))
+    document.removeEventListener('keyup', this.keyUpCallback)
     this.opts.onClose(this)
     this.opts.onAfterClose(this)
     this.currentIndex = null
@@ -326,6 +342,10 @@ export default class Lightbox {
       })
     }
 
+    if (this.elements.numbers) {
+      this.opts.onNumbers(this, this.sections[section])
+    }
+
     if (this.currentImage) {
       // fade out current image
       this.opts.onImageOut(this)

package/src/modules/StickyHeader/index.js

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