@brandocms/jupiter 3.54.4 → 4.0.0-beta.1

package/src/modules/HeroSlider/index.js

@@ -9,8 +9,7 @@
  *
  */
 
-import { gsap } from 'gsap'
-import { CSSPlugin } from 'gsap/CSSPlugin'
+import { gsap, CSSPlugin } from 'gsap/all'
 import _defaultsDeep from 'lodash.defaultsdeep'
 import prefersReducedMotion from '../../utils/prefersReducedMotion'
 import * as Events from '../../events'
@@ -30,7 +29,7 @@ const DEFAULT_OPTIONS = {
   zIndex: {
     visible: 5,
     next: 4,
-    regular: 3
+    regular: 3,
   },
   transition: {
     /* how long the actual transition from slide to slide takes */
@@ -38,10 +37,10 @@ const DEFAULT_OPTIONS = {
     /* the transition type. 'parallax' or 'fade' */
     type: 'parallax',
     /* how much to scale when 'idle' */
-    scale: 1.05
+    scale: 1.05,
   },
 
-  onTransition: hs => {
+  onTransition: (hs) => {
     hs.slide('parallax')
   },
 
@@ -54,15 +53,15 @@ const DEFAULT_OPTIONS = {
         opacity: 1,
         onComplete: () => {
           callback()
-        }
+        },
       })
     } else {
       gsap.to(hs.el, {
         duration: 0.25,
-        opacity: 1
+        opacity: 1,
       })
     }
-  }
+  },
 }
 
 export default class HeroSlider {
@@ -92,7 +91,7 @@ export default class HeroSlider {
       left: 0,
       width: '100%',
       height: '100%',
-      overflow: 'hidden'
+      overflow: 'hidden',
     })
 
     this.slides = this.el.querySelectorAll('[data-hero-slide]')
@@ -102,14 +101,14 @@ export default class HeroSlider {
     this._currentSlideIdx = this.opts.initialSlideNumber
 
     // style the slides
-    Array.from(this.slides).forEach(s => {
+    Array.from(this.slides).forEach((s) => {
       gsap.set(s, {
         zIndex: this.opts.zIndex.regular,
         position: 'absolute',
         top: 0,
         left: 0,
         width: '100%',
-        height: '100%'
+        height: '100%',
       })
 
       const img = s.querySelector('.hero-slide-img')
@@ -120,10 +119,12 @@ export default class HeroSlider {
           height: '100%',
           top: 0,
           left: 0,
-          position: 'absolute'
+          position: 'absolute',
         })
       } else {
-        console.error('==> JUPITER/HEROSLIDER: MISSING .hero-slide-img INSIDE [data-hero-slide]')
+        console.error(
+          '==> JUPITER/HEROSLIDER: MISSING .hero-slide-img INSIDE [data-hero-slide]'
+        )
       }
     })
 
@@ -188,24 +189,24 @@ export default class HeroSlider {
           .set(this._currentSlide, {
             opacity: 0,
             scale: 1,
-            zIndex: this.opts.zIndex.visible
+            zIndex: this.opts.zIndex.visible,
           })
           .set(this._nextSlide, {
-            opacity: 0
+            opacity: 0,
           })
           .to(this._previousSlide, {
             duration: this.opts.interval,
-            scale: this.opts.transition.scale
+            scale: this.opts.transition.scale,
           })
           .to(this._currentSlide, {
             duration: this.opts.transition.duration,
             opacity: 1,
             delay: this.opts.interval - this.opts.transition.duration,
             force3D: true,
-            ease: 'sine.inOut'
+            ease: 'sine.inOut',
           })
           .set(this._previousSlide, {
-            opacity: 0
+            opacity: 0,
           })
           .call(
             () => {
@@ -225,17 +226,17 @@ export default class HeroSlider {
           .set(this._currentSlide, {
             zIndex: this.opts.zIndex.next,
             scale: 1.0,
-            width: '100%'
+            width: '100%',
           })
           .fromTo(
             this._previousSlide,
             {
               duration: this.opts.interval,
-              overflow: 'hidden'
+              overflow: 'hidden',
             },
             {
               duration: this.opts.interval,
-              scale: this.opts.transition.scale
+              scale: this.opts.transition.scale,
             }
           )
           .to(this._previousSlide, {
@@ -243,19 +244,19 @@ export default class HeroSlider {
             width: 0,
             ease: 'power3.in',
             autoRound: true,
-            overwrite: 'preexisting'
+            overwrite: 'preexisting',
           })
           .set(this._nextSlide, {
-            zIndex: this.opts.zIndex.next
+            zIndex: this.opts.zIndex.next,
           })
           .set(this._currentSlide, {
             zIndex: this.opts.zIndex.visible,
-            width: '100%'
+            width: '100%',
           })
           .set(this._previousSlide, {
             zIndex: this.opts.zIndex.regular,
             scale: 1.0,
-            width: '100%'
+            width: '100%',
           })
           .call(() => {
             this.next()
@@ -264,7 +265,9 @@ export default class HeroSlider {
         break
 
       default:
-        console.error('==> JUPITER/HEROSLIDER: Unrecognized `opts.transition.type` option.')
+        console.error(
+          '==> JUPITER/HEROSLIDER: Unrecognized `opts.transition.type` option.'
+        )
     }
   }
 
@@ -272,13 +275,19 @@ export default class HeroSlider {
    * Add a window resize handler that resizes slide widths
    */
   _addResizeHandler() {
-    this.observer = new IntersectionObserver(entries => {
+    this.observer = new IntersectionObserver((entries) => {
       const [{ isIntersecting }] = entries
       if (isIntersecting) {
         this._resizeSlides()
-        window.addEventListener(Events.APPLICATION_RESIZE, this._resizeSlides.bind(this))
+        window.addEventListener(
+          Events.APPLICATION_RESIZE,
+          this._resizeSlides.bind(this)
+        )
       } else {
-        window.removeEventListener(Events.APPLICATION_RESIZE, this._resizeSlides.bind(this))
+        window.removeEventListener(
+          Events.APPLICATION_RESIZE,
+          this._resizeSlides.bind(this)
+        )
       }
     })
 
@@ -289,7 +298,7 @@ export default class HeroSlider {
     gsap.to(this.images, {
       duration: 0.15,
       width: document.body.clientWidth,
-      overwrite: 'all'
+      overwrite: 'all',
     })
   }
 }

package/src/modules/HeroVideo/index.js

@@ -1,15 +1,15 @@
 /**
- *
  * HERO VIDEO
  *
- * ## Example
+ * Module for handling hero video elements with cover images, play/pause controls,
+ * and responsive behavior.
  *
- *    const hs = HeroVideo(opts)
+ * ## Example
  *
+ *    const heroVideo = new HeroVideo(app, opts)
  */
 
-import { gsap } from 'gsap'
-import { CSSPlugin } from 'gsap/CSSPlugin'
+import { gsap, CSSPlugin } from 'gsap/all'
 import _defaultsDeep from 'lodash.defaultsdeep'
 import * as Events from '../../events'
 import prefersReducedMotion from '../../utils/prefersReducedMotion'
@@ -18,26 +18,46 @@ import Dom from '../Dom'
 
 gsap.registerPlugin(CSSPlugin)
 
+/**
+ * @typedef {Object} HeroVideoElementGenerators
+ * @property {Function} [pause] - Function that returns the pause button HTML
+ * @property {Function} [play] - Function that returns the play button HTML
+ */
+
+/**
+ * @typedef {Object} HeroVideoOptions
+ * @property {string|HTMLElement} [el='[data-hero-video]'] - Target element selector or element
+ * @property {Function} [onFadeIn] - Called when video fades in
+ * @property {Function} [onFadeInCover] - Called when cover fades in
+ * @property {Function} [onFadeOutCover] - Called when cover fades out
+ * @property {Function} [onPlayReady] - Called when video is ready to play
+ * @property {Function} [onClickPlay] - Called when play button is clicked
+ * @property {Function} [onClickPause] - Called when pause button is clicked
+ * @property {string} [pauseParent='.hero-content'] - Selector for parent element to append pause button to
+ * @property {HeroVideoElementGenerators} [elements] - Element generators for UI components
+ */
+
+/** @type {HeroVideoOptions} */
 const DEFAULT_OPTIONS = {
   el: '[data-hero-video]',
-  onFadeIn: hero => {
+  onFadeIn: (hero) => {
     gsap.to(hero.videoDiv, {
       duration: 1,
-      autoAlpha: 1
+      autoAlpha: 1,
     })
   },
 
-  onFadeInCover: hero => {
+  onFadeInCover: (hero) => {
     gsap.to(hero.cover, {
       duration: 0.35,
-      autoAlpha: 1
+      autoAlpha: 1,
     })
   },
 
-  onFadeOutCover: hero => {
+  onFadeOutCover: (hero) => {
     gsap.set(hero.cover, {
       duration: 0.35,
-      autoAlpha: 0
+      autoAlpha: 0,
     })
   },
 
@@ -57,11 +77,19 @@ const DEFAULT_OPTIONS = {
 
     play: () => `
       <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 350 350"><circle cx="175" cy="175" r="172.5" stroke="#000" stroke-width="10"/><path stroke="#000" stroke-width="10" d="M240 174l-112-72v148l112-76z"/></svg>
-    `
-  }
+    `,
+  },
 }
 
+/**
+ * HeroVideo component for handling responsive background videos with controls
+ */
 export default class HeroVideo {
+  /**
+   * Create a new HeroVideo instance
+   * @param {Object} app - Application instance
+   * @param {HeroVideoOptions} [opts={}] - HeroVideo options
+   */
   constructor(app, opts = {}) {
     this.app = app
     this.booting = true
@@ -92,7 +120,7 @@ export default class HeroVideo {
       left: 0,
       width: '100%',
       height: '100%',
-      overflow: 'hidden'
+      overflow: 'hidden',
     })
 
     this.cover = Dom.find(this.el, '[data-cover]')
@@ -124,11 +152,13 @@ export default class HeroVideo {
       left: 0,
       width: '100%',
       height: '100%',
-      opacity: 0
+      opacity: 0,
     })
 
     if (!this.video) {
-      console.error('==> JUPITER/HEROVIDEO: MISSING <video> INSIDE [data-hero-video-content]')
+      console.error(
+        '==> JUPITER/HEROVIDEO: MISSING <video> INSIDE [data-hero-video-content]'
+      )
       return
     }
     this.video.muted = true
@@ -138,7 +168,7 @@ export default class HeroVideo {
       height: '100%',
       top: 0,
       left: 0,
-      position: 'absolute'
+      position: 'absolute',
     })
 
     if (this.cover) {
@@ -149,7 +179,11 @@ export default class HeroVideo {
 
     window.addEventListener(Events.APPLICATION_READY, () => {
       /* Wait for the video to load, then fade in container element */
-      if (!this.video.playing && !prefersReducedMotion() && this.video.readyState >= 3) {
+      if (
+        !this.video.playing &&
+        !prefersReducedMotion() &&
+        this.video.readyState >= 3
+      ) {
         this.play()
         this.fadeIn()
         this.booting = false
@@ -193,7 +227,7 @@ export default class HeroVideo {
       }
     })
     if (this.elements.pause) {
-      this.elements.pause.addEventListener('click', e => {
+      this.elements.pause.addEventListener('click', (e) => {
         e.preventDefault()
         e.stopPropagation()
         if (this.playing) {
@@ -233,7 +267,7 @@ export default class HeroVideo {
   }
 
   addObserver() {
-    const observer = new IntersectionObserver(entries => {
+    const observer = new IntersectionObserver((entries) => {
       const [{ isIntersecting }] = entries
       if (isIntersecting) {
         if (this.forcePaused) {
@@ -255,13 +289,19 @@ export default class HeroVideo {
    * Add a window resize handler that resizes video width
    */
   _addResizeHandler() {
-    this.observer = new IntersectionObserver(entries => {
+    this.observer = new IntersectionObserver((entries) => {
       const [{ isIntersecting }] = entries
       if (isIntersecting) {
         this._resize()
-        window.addEventListener(Events.APPLICATION_RESIZE, this._resize.bind(this))
+        window.addEventListener(
+          Events.APPLICATION_RESIZE,
+          this._resize.bind(this)
+        )
       } else {
-        window.removeEventListener(Events.APPLICATION_RESIZE, this._resize.bind(this))
+        window.removeEventListener(
+          Events.APPLICATION_RESIZE,
+          this._resize.bind(this)
+        )
       }
     })
 
@@ -272,7 +312,7 @@ export default class HeroVideo {
     gsap.to(this.video, {
       duration: 0.15,
       width: document.body.clientWidth,
-      overwrite: 'all'
+      overwrite: 'all',
     })
   }
 }

package/src/modules/Lazyload/index.js

@@ -4,6 +4,25 @@ import imagesAreLoaded from '../../utils/imagesAreLoaded'
 import Dom from '../Dom'
 import * as Events from '../../events'
 
+/**
+ * @typedef {Object} IntersectionObserverConfig
+ * @property {string} [rootMargin] - Margin around the root
+ * @property {number} [threshold] - Threshold for intersection
+ */
+
+/**
+ * @typedef {Object} LazyloadOptions
+ * @property {IntersectionObserverConfig} [revealIntersectionObserverConfig] - Configuration for the reveal intersection observer
+ * @property {IntersectionObserverConfig} [loadIntersectionObserverConfig] - Configuration for the load intersection observer
+ * @property {IntersectionObserverConfig} [intersectionObserverConfig] - Configuration for general intersection observers
+ * @property {boolean} [useNativeLazyloadIfAvailable=true] - Whether to use native lazyloading if available
+ * @property {string} [mode='default'] - Lazyload mode
+ * @property {number} [minSize=40] - Minimum size for auto sizing
+ * @property {boolean} [updateSizes=true] - Whether to update sizes attribute
+ * @property {boolean} [registerCallback=true] - Whether to register a callback for APPLICATION_REVEALED event
+ */
+
+/** @type {LazyloadOptions} */
 const DEFAULT_OPTIONS = {
   revealIntersectionObserverConfig: {
     rootMargin: '0px 100px 0px 100px',
@@ -20,7 +39,15 @@ const DEFAULT_OPTIONS = {
   registerCallback: true,
 }
 
+/**
+ * Lazyload class for handling image lazy loading
+ */
 export default class Lazyload {
+  /**
+   * Create a new Lazyload instance
+   * @param {Object} app - Application instance
+   * @param {LazyloadOptions} [opts={}] - Lazyload options
+   */
   constructor(app, opts = {}) {
     this.app = app
     this.opts = _defaultsDeep(opts, DEFAULT_OPTIONS)