@brandocms/jupiter 3.47.0 → 3.48.1

package/src/modules/HeroSlider/index.js

@@ -52,7 +52,9 @@ const DEFAULT_OPTIONS = {
       gsap.to(hs.el, {
         duration: 0.25,
         opacity: 1,
-        onComplete: () => { callback() }
+        onComplete: () => {
+          callback()
+        }
       })
     } else {
       gsap.to(hs.el, {
@@ -64,7 +66,7 @@ const DEFAULT_OPTIONS = {
 }
 
 export default class HeroSlider {
-  constructor (app, opts = {}) {
+  constructor(app, opts = {}) {
     this.app = app
     this.opts = _defaultsDeep(opts, DEFAULT_OPTIONS)
 
@@ -81,7 +83,7 @@ export default class HeroSlider {
     this.initialize()
   }
 
-  initialize () {
+  initialize() {
     this._addResizeHandler()
     // style the container
     gsap.set(this.el, {
@@ -132,9 +134,9 @@ export default class HeroSlider {
 
     this.opts.onInitialize(this)
 
-    const callback = (this.slides.length > 1) ? this.next.bind(this) : () => {}
+    const callback = this.slides.length > 1 ? this.next.bind(this) : () => {}
 
-    window.addEventListener(Events.APPLICATION_REVEALED, () => {
+    this.app.registerCallback(Events.APPLICATION_REVEALED, () => {
       /* Wait for the first image to load, then fade in container element */
       const firstImg = this.slides[this._currentSlideIdx].querySelector('img')
 
@@ -149,7 +151,7 @@ export default class HeroSlider {
   /**
    * Calculate which slide is next, and call the slide function
    */
-  next () {
+  next() {
     if (prefersReducedMotion() && this.app.opts.respectReducedMotion) {
       return
     }
@@ -163,7 +165,7 @@ export default class HeroSlider {
       this._previousSlide = this.slides[this._currentSlideIdx]
       this._currentSlideIdx += 1
       if (this._currentSlideIdx === this.slideCount) {
-        [this._nextSlide] = this.slides
+        ;[this._nextSlide] = this.slides
       } else {
         this._nextSlide = this.slides[this._currentSlideIdx + 1]
       }
@@ -177,7 +179,7 @@ export default class HeroSlider {
   /**
    * Switches between slides
    */
-  slide (type) {
+  slide(type) {
     const timeline = gsap.timeline()
 
     switch (type) {
@@ -205,12 +207,16 @@ export default class HeroSlider {
           .set(this._previousSlide, {
             opacity: 0
           })
-          .call(() => {
-            this._nextSlide.style.zIndex = this.opts.zIndex.visible
-            this._currentSlide.style.zIndex = this.opts.zIndex.regular
-            this._previousSlide.style.zIndex = this.opts.zIndex.regular
-            this.next()
-          }, null, this)
+          .call(
+            () => {
+              this._nextSlide.style.zIndex = this.opts.zIndex.visible
+              this._currentSlide.style.zIndex = this.opts.zIndex.regular
+              this._previousSlide.style.zIndex = this.opts.zIndex.regular
+              this.next()
+            },
+            null,
+            this
+          )
 
         break
 
@@ -221,13 +227,17 @@ export default class HeroSlider {
             scale: 1.0,
             width: '100%'
           })
-          .fromTo(this._previousSlide, {
-            duration: this.opts.interval,
-            overflow: 'hidden'
-          }, {
-            duration: this.opts.interval,
-            scale: this.opts.transition.scale
-          })
+          .fromTo(
+            this._previousSlide,
+            {
+              duration: this.opts.interval,
+              overflow: 'hidden'
+            },
+            {
+              duration: this.opts.interval,
+              scale: this.opts.transition.scale
+            }
+          )
           .to(this._previousSlide, {
             duration: this.opts.transition.duration,
             width: 0,
@@ -261,7 +271,7 @@ export default class HeroSlider {
   /**
    * Add a window resize handler that resizes slide widths
    */
-  _addResizeHandler () {
+  _addResizeHandler() {
     this.observer = new IntersectionObserver(entries => {
       const [{ isIntersecting }] = entries
       if (isIntersecting) {
@@ -275,7 +285,7 @@ export default class HeroSlider {
     this.observer.observe(this.el)
   }
 
-  _resizeSlides () {
+  _resizeSlides() {
     gsap.to(this.images, {
       duration: 0.15,
       width: document.body.clientWidth,

package/src/modules/HeroVideo/index.js

@@ -62,7 +62,7 @@ const DEFAULT_OPTIONS = {
 }
 
 export default class HeroVideo {
-  constructor (app, opts = {}) {
+  constructor(app, opts = {}) {
     this.app = app
     this.booting = true
     this.playing = false
@@ -83,7 +83,7 @@ export default class HeroVideo {
     this.initialize()
   }
 
-  initialize () {
+  initialize() {
     this._addResizeHandler()
     // style the container
     gsap.set(this.el, {
@@ -163,21 +163,23 @@ export default class HeroVideo {
     })
   }
 
-  setSrc () {
+  setSrc() {
     const dataSrc = this.video.getAttribute('data-src')
     if (!dataSrc) {
       return
     }
     const dataObj = JSON.parse(dataSrc)
-    if (this.app.breakpoints.mediaQueries.iphone.matches
-        || this.app.breakpoints.mediaQueries.mobile.matches) {
+    if (
+      this.app.breakpoints.mediaQueries.iphone.matches ||
+      this.app.breakpoints.mediaQueries.mobile.matches
+    ) {
       this.video.setAttribute('src', dataObj.phone)
     } else {
       this.video.setAttribute('src', dataObj.desktop)
     }
   }
 
-  addEvents () {
+  addEvents() {
     this.video.addEventListener('canplay', () => {
       if (!this.playing) {
         if (!prefersReducedMotion()) {
@@ -209,7 +211,7 @@ export default class HeroVideo {
     }
   }
 
-  play () {
+  play() {
     if (this.cover) {
       this.opts.onFadeOutCover(this)
     }
@@ -217,20 +219,20 @@ export default class HeroVideo {
     this.playing = true
   }
 
-  pause () {
+  pause() {
     this.video.pause()
     this.playing = false
   }
 
-  fadeIn () {
+  fadeIn() {
     this.opts.onFadeIn(this)
   }
 
-  fadeInCover () {
+  fadeInCover() {
     this.opts.onFadeInCover(this)
   }
 
-  addObserver () {
+  addObserver() {
     const observer = new IntersectionObserver(entries => {
       const [{ isIntersecting }] = entries
       if (isIntersecting) {
@@ -252,7 +254,7 @@ export default class HeroVideo {
   /**
    * Add a window resize handler that resizes video width
    */
-  _addResizeHandler () {
+  _addResizeHandler() {
     this.observer = new IntersectionObserver(entries => {
       const [{ isIntersecting }] = entries
       if (isIntersecting) {
@@ -266,7 +268,7 @@ export default class HeroVideo {
     this.observer.observe(this.el)
   }
 
-  _resize () {
+  _resize() {
     gsap.to(this.video, {
       duration: 0.15,
       width: document.body.clientWidth,

package/src/modules/Lazyload/index.js

@@ -1,29 +1,43 @@
 import _defaultsDeep from 'lodash.defaultsdeep'
-import { IMAGE_LAZYLOADED, SECTION_LAZYLOADED } from '../../events'
 import dispatchElementEvent from '../../utils/dispatchElementEvent'
 import imagesAreLoaded from '../../utils/imagesAreLoaded'
 import Dom from '../Dom'
 import * as Events from '../../events'
 
 const DEFAULT_OPTIONS = {
-  intersectionObserverConfig: {
-    rootMargin: '350px 0px',
+  revealIntersectionObserverConfig: {
+    rootMargin: '0px 100px 0px 100px',
+    threshold: 0.0
+  },
+  loadIntersectionObserverConfig: {
+    rootMargin: '850px 500px 850px 500px',
     threshold: 0.0
   },
   useNativeLazyloadIfAvailable: true,
   mode: 'default',
   minSize: 40,
-  updateSizes: true
+  updateSizes: true,
+  registerCallback: true
 }
 
 export default class Lazyload {
-  constructor (app, opts = {}) {
+  constructor(app, opts = {}) {
     this.app = app
     this.opts = _defaultsDeep(opts, DEFAULT_OPTIONS)
     this.initialize()
+
+    if (this.opts.registerCallback) {
+      this.app.registerCallback(Events.APPLICATION_REVEALED, () => {
+        this.watch()
+      })
+    }
+  }
+
+  watch() {
+    this.initObserver(this.revealObserver, false)
   }
 
-  initialize () {
+  initialize() {
     // initialize all images that have data-sizes="auto" and set sizes="<actual width>px"
     this.initializeAutoSizes()
     // look for lazyload sections. if we find, add an observer that triggers
@@ -40,43 +54,57 @@ export default class Lazyload {
 
       const lazyPictures = document.querySelectorAll('[data-ll-srcset]')
       lazyPictures.forEach(picture => {
-        picture.querySelectorAll('img').forEach(img => {
-          img.setAttribute('loading', 'lazy')
-        })
+        picture.querySelectorAll('img').forEach(img => img.setAttribute('loading', 'lazy'))
         this.swapPicture(picture)
       })
-    } else {
-      this.imgObserver = new IntersectionObserver(
-        this.lazyloadImages.bind(this),
-        this.opts.intersectionObserverConfig
-      )
-
-      this.lazyImages = document.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.imgObserver.observe(img)
-      })
 
-      this.pictureObserver = new IntersectionObserver(
-        this.lazyloadPictures.bind(this),
-        this.opts.intersectionObserverConfig
-      )
+      return
+    }
+
+    this.lazyPictures = document.querySelectorAll('[data-ll-srcset]')
+
+    this.loadObserver = new IntersectionObserver(
+      this.handleLoadEntries.bind(this),
+      this.opts.loadIntersectionObserverConfig
+    )
 
-      this.lazyPictures = document.querySelectorAll('[data-ll-srcset]')
-      this.lazyPictures.forEach((picture, idx) => {
+    this.revealObserver = new IntersectionObserver(
+      this.handleRevealEntries.bind(this),
+      this.opts.revealIntersectionObserverConfig
+    )
+
+    this.lazyPictures = document.querySelectorAll('[data-ll-srcset]')
+    this.initObserver(this.loadObserver)
+
+    // Deprecate data-ll-image sometime
+    this.imageObserver = new IntersectionObserver(
+      this.lazyloadImages.bind(this),
+      this.opts.intersectionObserverConfig
+    )
+
+    this.lazyImages = document.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)
+    })
+  }
+
+  initObserver(observer, setAttrs = true) {
+    this.lazyPictures.forEach((picture, idx) => {
+      if (setAttrs) {
         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)
         })
-        this.pictureObserver.observe(picture)
-      })
-    }
+      }
+      observer.observe(picture)
+    })
   }
 
-  initializeAutoSizes () {
+  initializeAutoSizes() {
     if (this.opts.updateSizes) {
       this.$autoSizesImages = Dom.all('[data-sizes="auto"]')
       this.autoSizes()
@@ -87,17 +115,19 @@ export default class Lazyload {
   /**
    * Set sizes attribute for all imgs with `data-sizes="auto"` and source within the <picture>
    */
-  autoSizes () {
+  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`))
+        Array.from(Dom.all(img.parentNode, 'source')).forEach(source =>
+          source.setAttribute('sizes', `${width}px`)
+        )
       }
     })
   }
 
-  getWidth (img) {
+  getWidth(img) {
     let width = img.offsetWidth
     let parent = img.parentNode
 
@@ -109,7 +139,7 @@ export default class Lazyload {
     return width
   }
 
-  initializeSections () {
+  initializeSections() {
     const sections = document.querySelectorAll('[data-lazyload-section]')
     if (sections) {
       const sectionObserver = (section, children) => {
@@ -118,17 +148,16 @@ export default class Lazyload {
           entries.forEach(entry => {
             if (entry.isIntersecting || entry.intersectionRatio > 0) {
               imagesAreLoaded(imagesInSection, true).then(() => {
-                dispatchElementEvent(section, SECTION_LAZYLOADED)
+                dispatchElementEvent(section, Events.SECTION_LAZYLOADED)
               })
               children.forEach(picture => {
-                this.swapPicture(picture)
-                this.pictureObserver.unobserve(picture)
+                this.loadPicture(picture)
+                this.loadObserver.unobserve(picture)
               })
               self.unobserve(section)
             }
           })
-        },
-        this.opts.intersectionObserverConfig)
+        }, this.opts.intersectionObserverConfig)
       }
 
       sections.forEach(section => {
@@ -139,44 +168,41 @@ export default class Lazyload {
     }
   }
 
-  lazyloadImages (elements) {
+  // we load the picture a ways before it enters the viewport
+  handleLoadEntries(elements) {
     elements.forEach(item => {
       if (item.isIntersecting || item.intersectionRatio > 0) {
-        const image = item.target
-        this.swapImage(image)
-        this.imgObserver.unobserve(image)
+        const picture = item.target
+        this.loadPicture(picture)
+        this.loadObserver.unobserve(item.target)
       }
     })
   }
 
-  lazyloadPictures (elements) {
+  // we reveal the picture when it enters the viewport
+  handleRevealEntries(elements) {
     elements.forEach(item => {
       if (item.isIntersecting || item.intersectionRatio > 0) {
         const picture = item.target
-        this.swapPicture(picture)
-        this.pictureObserver.unobserve(picture)
+        this.revealPicture(picture)
+        this.revealObserver.unobserve(item.target)
       }
     })
   }
 
-  swapImage (image) {
-    image.src = image.dataset.src
-    image.setAttribute('data-ll-loaded', '')
-  }
-
-  swapPicture (picture) {
+  loadPicture(picture) {
     // gather all the source elements in picture
     const sources = picture.querySelectorAll('source')
     let loadedSomething = false
 
     for (let s = 0; s < sources.length; s += 1) {
       const source = sources[s]
-      if (!source.hasAttribute('data-ll-loaded')) {
+      if (!source.hasAttribute('data-ll-ready')) {
         loadedSomething = true
       }
       if (source.hasAttribute('data-srcset')) {
         source.setAttribute('srcset', source.dataset.srcset)
-        source.setAttribute('data-ll-loaded', '')
+        source.setAttribute('data-ll-ready', '')
       }
     }
 
@@ -187,24 +213,25 @@ export default class Lazyload {
     const img = picture.querySelector('img')
 
     const onload = () => {
-      if (!img.getAttribute('data-ll-loaded') && this.app.browser === 'firefox') {
-        // set sizes attribute on load again, 
-        // since firefox sometimes is a bit slow to 
+      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`))
+          Array.from(Dom.all(img.parentNode, 'source')).forEach(source =>
+            source.setAttribute('sizes', `${width}px`)
+          )
         }
       }
 
       img.removeAttribute('data-ll-placeholder')
       img.removeAttribute('data-ll-blurred')
       img.removeAttribute('data-ll-loading')
-      img.setAttribute('data-ll-loaded', '')
-      picture.setAttribute('data-ll-srcset-loaded', '')
+      img.setAttribute('data-ll-ready', '')
+      picture.setAttribute('data-ll-srcset-ready', '')
     }
 
     img.addEventListener('load', onload, false)
@@ -225,8 +252,35 @@ export default class Lazyload {
     }
 
     // safari sometimes caches, so force load
-    if (img.complete) { onload() }
+    if (img.complete) {
+      onload()
+    }
+
+    dispatchElementEvent(img, Events.IMAGE_LAZYLOADED)
+  }
+
+  /* reveal by just setting `data-ll-loaded` */
+  revealPicture(picture) {
+    const img = picture.querySelector('img')
+    if (img.hasAttribute('data-ll-loaded')) {
+      return
+    }
+    img.setAttribute('data-ll-loaded', '')
+    dispatchElementEvent(img, Events.IMAGE_REVEALED)
+  }
+
+  lazyloadImages(elements) {
+    elements.forEach(item => {
+      if (item.isIntersecting || item.intersectionRatio > 0) {
+        const image = item.target
+        this.swapImage(image)
+        this.imageObserver.unobserve(image)
+      }
+    })
+  }
 
-    dispatchElementEvent(img, IMAGE_LAZYLOADED)
+  swapImage(image) {
+    image.src = image.dataset.src
+    image.setAttribute('data-ll-loaded', '')
   }
 }