@brandocms/jupiter 3.55.0 → 4.0.0-beta.1

package/src/modules/Breakpoints/index.js

@@ -1,6 +1,14 @@
 import _defaultsDeep from 'lodash.defaultsdeep'
 import * as Events from '../../events'
 
+/**
+ * @typedef {Object} BreakpointsOptions
+ * @property {boolean} [runListenerOnInit=false] - Whether to run listener on initialization
+ * @property {string[]} [breakpoints=['xs', 'sm', 'md', 'lg']] - Breakpoint names
+ * @property {Object.<string, Function>} [listeners={}] - Listener functions for breakpoints
+ */
+
+/** @type {BreakpointsOptions} */
 const DEFAULT_OPTIONS = {
   runListenerOnInit: false,
   breakpoints: ['xs', 'sm', 'md', 'lg'],
@@ -13,14 +21,24 @@ const DEFAULT_OPTIONS = {
     //     // NOT XS ANYMORE
     //   }
     // }
-  }
+  },
 }
 
+/**
+ * Breakpoints module for responsive design
+ */
 export default class Breakpoints {
+  /**
+   * Create a new Breakpoints instance
+   * @param {Object} app - Application instance
+   * @param {BreakpointsOptions} [opts={}] - Breakpoints options
+   */
   constructor(app, opts = {}) {
     this.app = app
     this.mediaQueries = {}
     this.opts = _defaultsDeep(opts, DEFAULT_OPTIONS)
+    this.currentBreakpoint = null
+    this.initialized = false
     window.addEventListener(Events.APPLICATION_PRELUDIUM, () => {
       this.initialize(false)
     })
@@ -30,63 +48,125 @@ export default class Breakpoints {
   }
 
   initialize(reveal = false) {
-    this.opts.breakpoints.forEach(size => {
-      this.mediaQueries[size] = this._getVal(`--breakpoint-${size}`)
-    })
+    if (!reveal) {
+      this.opts.breakpoints.forEach((size) => {
+        this.mediaQueries[size] = this._getVal(`--breakpoint-${size}`)
+      })
 
-    const keys = Object.keys(this.mediaQueries)
-    keys.forEach(key => {
-      let query = ''
-      const next = keys[(keys.indexOf(key) + 1) % keys.length]
-      if (key === this.opts.breakpoints[0] && this.mediaQueries[key] === '0') {
-        query = `(min-width: 0px) and (max-width: ${parseInt(this.mediaQueries[next]) - 1}px)`
-      } else if (next === this.opts.breakpoints[0]) {
-        // max size
-        query = `(min-width: ${this.mediaQueries[key]})`
-      } else {
-        query = `(min-width: ${this.mediaQueries[key]}) and (max-width: ${
-          parseInt(this.mediaQueries[next]) - 1
-        }px)`
-      }
+      const keys = Object.keys(this.mediaQueries)
+      keys.forEach((key) => {
+        let query = ''
+        const next = keys[(keys.indexOf(key) + 1) % keys.length]
+        if (
+          key === this.opts.breakpoints[0] &&
+          this.mediaQueries[key] === '0'
+        ) {
+          query = `(min-width: 0px) and (max-width: ${parseInt(this.mediaQueries[next]) - 1}px)`
+        } else if (next === this.opts.breakpoints[0]) {
+          // max size
+          query = `(min-width: ${this.mediaQueries[key]})`
+        } else {
+          query = `(min-width: ${this.mediaQueries[key]}) and (max-width: ${
+            parseInt(this.mediaQueries[next]) - 1
+          }px)`
+        }
 
-      this.mediaQueries[key] = window.matchMedia(query)
-      this.mediaQueries[key].addListener(this.defaultListener.bind(this))
+        this.mediaQueries[key] = window.matchMedia(query)
 
-      if (Object.prototype.hasOwnProperty.call(this.opts.listeners, key)) {
-        this.mediaQueries[key].addListener(this.opts.listeners[key])
-      }
-    })
+        // Replace the direct listener with a combined one that handles both core and custom behavior
+        const combinedListener = (e) => {
+          if (e.matches) {
+            // Get the current breakpoint
+            const oldBreakpoint = this.currentBreakpoint
+            this.setCurrentBreakpoint()
 
-    if (reveal && this.opts.runListenerOnInit) {
-      const { key, mq } = this.getCurrentBreakpoint()
-      if (Object.prototype.hasOwnProperty.call(this.opts.listeners, key)) {
-        this.opts.listeners[key](mq)
-      }
+            // Only dispatch event if breakpoint actually changed
+            if (oldBreakpoint !== this.currentBreakpoint) {
+              const evt = new CustomEvent(Events.BREAKPOINT_CHANGE, {
+                detail: {
+                  leaveBreakpoint: oldBreakpoint,
+                  enterBreakpoint: this.currentBreakpoint,
+                },
+              })
+              window.dispatchEvent(evt)
+            }
+          }
+
+          // Run any custom listener if one exists for this breakpoint
+          if (Object.prototype.hasOwnProperty.call(this.opts.listeners, key)) {
+            this.opts.listeners[key](e)
+          }
+        }
+
+        this.mediaQueries[key].addListener(combinedListener)
+      })
     }
 
+    // Set the current breakpoint first
     this.setCurrentBreakpoint()
+
+    // Only fire events and run listeners for initialization if needed
+    if (reveal && this.opts.runListenerOnInit && !this.initialized) {
+      this.initialized = true
+      const result = this.getCurrentBreakpoint()
+
+      if (result && result.key && result.mq) {
+        // Create a fake event object that mimics MediaQueryListEvent
+        const fakeEvent = {
+          matches: result.mq.matches,
+          media: result.mq.media,
+          target: result.mq,
+        }
+
+        // Fire the BREAKPOINT_CHANGE event only once during initialization
+        const evt = new CustomEvent(Events.BREAKPOINT_CHANGE)
+        window.dispatchEvent(evt)
+
+        // Run any custom listener if one exists for this breakpoint
+        if (
+          Object.prototype.hasOwnProperty.call(this.opts.listeners, result.key)
+        ) {
+          this.opts.listeners[result.key](fakeEvent)
+        }
+      }
+    }
   }
 
   getCurrentBreakpoint() {
-    const key = Object.keys(this.mediaQueries).find(q => this.mediaQueries[q].matches)
+    // First check if mediaQueries is populated
+    if (!Object.keys(this.mediaQueries).length) {
+      return null
+    }
 
-    return { key, mq: this.mediaQueries[key] }
+    const key = Object.keys(this.mediaQueries).find((q) => {
+      return this.mediaQueries[q] && this.mediaQueries[q].matches
+    })
+
+    // Only return if we found a matching breakpoint
+    if (key && this.mediaQueries[key]) {
+      return { key, mq: this.mediaQueries[key] }
+    }
+
+    return null
   }
 
   defaultListener(e) {
     if (e.matches) {
       this.setCurrentBreakpoint()
     }
-    const evt = new CustomEvent(Events.BREAKPOINT_CHANGE)
-    window.dispatchEvent(evt)
   }
 
   setCurrentBreakpoint() {
-    const { key } = this.getCurrentBreakpoint()
-    this.app.breakpoint = key
+    const result = this.getCurrentBreakpoint()
+    if (result && result.key) {
+      this.currentBreakpoint = result.key
+      this.app.breakpoint = result.key
+    }
   }
 
   _getVal(key) {
-    return getComputedStyle(document.documentElement).getPropertyValue(key).trim()
+    return getComputedStyle(document.documentElement)
+      .getPropertyValue(key)
+      .trim()
   }
 }

package/src/modules/Cookies/index.js

@@ -1,9 +1,20 @@
-import { gsap } from 'gsap'
+import { gsap } from 'gsap/all'
 import _defaultsDeep from 'lodash.defaultsdeep'
 import * as Events from '../../events'
 
+/**
+ * @typedef {Object} CookiesOptions
+ * @property {Function} [onAccept] - Called when cookies are accepted
+ * @property {Function} [onRefuse] - Called when cookies are refused
+ * @property {Function} [alreadyConsented] - Called if user has already consented to cookies
+ * @property {Function} [alreadyRefused] - Called if user has already refused cookies
+ * @property {Function} [setCookies] - Custom function to set cookies
+ * @property {Function} [showCC] - Custom function to display cookie consent dialog
+ */
+
+/** @type {CookiesOptions} */
 const DEFAULT_OPTIONS = {
-  onAccept: c => {
+  onAccept: (c) => {
     const oneYearFromNow = new Date()
     oneYearFromNow.setFullYear(oneYearFromNow.getFullYear() + 1)
 
@@ -17,7 +28,7 @@ const DEFAULT_OPTIONS = {
       .set(c.cc, { display: 'none' })
   },
 
-  onRefuse: c => {
+  onRefuse: (c) => {
     const oneYearFromNow = new Date()
     oneYearFromNow.setFullYear(oneYearFromNow.getFullYear() + 1)
 
@@ -30,17 +41,17 @@ const DEFAULT_OPTIONS = {
       .set(c.cc, { display: 'none' })
   },
 
-  alreadyConsented: c => {
+  alreadyConsented: (c) => {
     // user has already consented to cookies. Can be used to update/load gtm etc.
   },
 
-  alreadyRefused: c => {
+  alreadyRefused: (c) => {
     // user has already refused cookies.
   },
 
-  setCookies: c => {},
+  setCookies: (c) => {},
 
-  showCC: c => {
+  showCC: (c) => {
     if (c.hasCookie('COOKIES_CONSENT_STATUS')) {
       if (c.getCookie('COOKIES_CONSENT_STATUS') === '1') {
         c.opts.alreadyConsented(c)
@@ -58,13 +69,13 @@ const DEFAULT_OPTIONS = {
         {
           duration: 0.5,
           y: '120%',
-          display: 'block'
+          display: 'block',
         },
         {
           duration: 0.5,
           y: '0%',
           delay: '0.5',
-          ease: 'power3.out'
+          ease: 'power3.out',
         },
         '0.5'
       )
@@ -72,12 +83,12 @@ const DEFAULT_OPTIONS = {
         c.text,
         {
           duration: 0.7,
-          opacity: 0
+          opacity: 0,
         },
         {
           duration: 0.7,
           opacity: 1,
-          ease: 'power3.out'
+          ease: 'power3.out',
         },
         '-=0.35'
       )
@@ -85,19 +96,27 @@ const DEFAULT_OPTIONS = {
         c.btns,
         {
           duration: 0.7,
-          opacity: 0
+          opacity: 0,
         },
         {
           duration: 0.7,
           opacity: 1,
-          ease: 'power3.out'
+          ease: 'power3.out',
         },
         '-=0.35'
       )
-  }
+  },
 }
 
+/**
+ * Cookies module for handling cookie consent
+ */
 export default class Cookies {
+  /**
+   * Create a new Cookies instance
+   * @param {Object} app - Application instance
+   * @param {CookiesOptions} [opts={}] - Cookies options
+   */
   constructor(app, opts = {}) {
     this.app = app
     this.opts = _defaultsDeep(opts, DEFAULT_OPTIONS)
@@ -127,6 +146,11 @@ export default class Cookies {
     }
   }
 
+  /**
+   * Get a cookie value by key
+   * @param {string} sKey - Cookie key
+   * @returns {string|null} Cookie value or null if not found
+   */
   getCookie(sKey) {
     if (!sKey) {
       return null
@@ -146,6 +170,16 @@ export default class Cookies {
     )
   }
 
+  /**
+   * Set a cookie
+   * @param {string} sKey - Cookie key
+   * @param {string|number} sValue - Cookie value
+   * @param {Date|string|number} vEnd - Expiration date, string date, or max age in seconds
+   * @param {string} [sPath] - Cookie path
+   * @param {string} [sDomain] - Cookie domain
+   * @param {boolean} [bSecure] - Secure flag
+   * @returns {boolean} Whether cookie was set successfully
+   */
   setCookie(sKey, sValue, vEnd, sPath, sDomain, bSecure) {
     if (!sKey || /^(?:expires|max-age|path|domain|secure)$/i.test(sKey)) {
       return false
@@ -155,7 +189,9 @@ export default class Cookies {
       switch (vEnd.constructor) {
         case Number:
           sExpires =
-            vEnd === Infinity ? '; expires=Fri, 31 Dec 9999 23:59:59 GMT' : `; max-age=${vEnd}`
+            vEnd === Infinity
+              ? '; expires=Fri, 31 Dec 9999 23:59:59 GMT'
+              : `; max-age=${vEnd}`
           break
         case String:
           sExpires = `; expires=${vEnd}`
@@ -173,6 +209,13 @@ export default class Cookies {
     return true
   }
 
+  /**
+   * Remove a cookie
+   * @param {string} sKey - Cookie key
+   * @param {string} [sPath] - Cookie path
+   * @param {string} [sDomain] - Cookie domain
+   * @returns {boolean} Whether cookie was removed successfully
+   */
   removeCookie(sKey, sPath, sDomain) {
     if (!this.hasCookie(sKey)) {
       return false
@@ -183,6 +226,11 @@ export default class Cookies {
     return true
   }
 
+  /**
+   * Check if a cookie exists
+   * @param {string} sKey - Cookie key
+   * @returns {boolean} Whether cookie exists
+   */
   hasCookie(sKey) {
     if (!sKey || /^(?:expires|max-age|path|domain|secure)$/i.test(sKey)) {
       return false
@@ -192,6 +240,10 @@ export default class Cookies {
     ).test(document.cookie)
   }
 
+  /**
+   * Get all cookie keys
+   * @returns {string[]} Array of cookie keys
+   */
   keys() {
     const aKeys = document.cookie
       .replace(/((?:^|\s*;)[^=]+)(?=;|$)|^\s*|\s*(?:=[^;]*)?(?:\1|$)/g, '')

package/src/modules/CoverOverlay/index.js

@@ -1,4 +1,4 @@
-import { gsap } from 'gsap'
+import { gsap } from 'gsap/all'
 import _defaultsDeep from 'lodash.defaultsdeep'
 
 const DEFAULT_OPTIONS = {}
@@ -13,7 +13,7 @@ export default class CoverOverlay {
   initialize() {
     const coveredModules = document.querySelectorAll('[data-cover-overlay]')
 
-    Array.from(coveredModules).forEach(v => {
+    Array.from(coveredModules).forEach((v) => {
       let player
       const overlay = v.querySelector('.picture-wrapper')
       const btn = v.querySelector('[data-cover-overlay-button]')

package/src/modules/Dom/index.js

@@ -1,4 +1,10 @@
+/**
+ * DOM utility class for simplifying DOM operations
+ */
 class DOM {
+  /**
+   * Create a new DOM utility instance
+   */
   constructor() {
     this.body = document.body
     this.html = document.documentElement

package/src/modules/Dropdown/index.js

@@ -1,4 +1,4 @@
-import { gsap } from 'gsap'
+import { gsap } from 'gsap/all'
 import _defaultsDeep from 'lodash.defaultsdeep'
 import Dom from '../Dom'
 
@@ -27,6 +27,8 @@ const DEFAULT_OPTIONS = {
     menu: '[data-dropdown-menu]',
     menuItems: '[data-dropdown-menu] > li',
   },
+  overlapTweens: true,
+  menuOpenDuration: 0.1,
   tweens: {
     items: {
       duration: 0.2,
@@ -80,7 +82,7 @@ export default class Dropdown {
         this.elements.menu,
         {
           className: `${this.elements.menu.className} zero-height`,
-          duration: 0.1,
+          duration: 0.05,
         },
         'open'
       )
@@ -88,7 +90,7 @@ export default class Dropdown {
         this.elements.menu,
         {
           height: 'auto',
-          duration: 0.1,
+          duration: 0.05,
         },
         'open'
       )
@@ -126,13 +128,16 @@ export default class Dropdown {
           this.elements.menu.style.left = `${currentLeft - (menuRect.right - viewportWidth)}px`
         }
       })
-      .to(this.elements.menu, { opacity: 1 })
+      .to(this.elements.menu, {
+        opacity: 1,
+        duration: this.opts.menuOpenDuration,
+      })
 
     if (this.elements.menuItems.length) {
       this.timeline.from(
         this.elements.menuItems,
         this.opts.tweens.items,
-        'open+=.1'
+        `open+=${this.opts.menuOpenDuration}`
       )
     }
 
@@ -160,7 +165,11 @@ export default class Dropdown {
   async openMenu() {
     if (!this.opts.multipleActive) {
       if (this.app.currentMenu) {
-        this.app.currentMenu.closeMenu()
+        if (this.opts.overlapTweens) {
+          this.app.currentMenu.closeMenu()
+        } else {
+          await this.app.currentMenu.closeMenu()
+        }
       }
       this.app.currentMenu = this
     }

package/src/modules/EqualHeightElements/index.js

@@ -1,4 +1,4 @@
-import { gsap } from 'gsap'
+import { gsap } from 'gsap/all'
 import Dom from '../Dom'
 import _defaultsDeep from 'lodash.defaultsdeep'
 import * as Events from '../../events'
@@ -13,21 +13,23 @@ export default class EqualHeightElements {
     this.selector = selector
     this.initialize()
     window.addEventListener(Events.APPLICATION_RESIZE, () => {
-      gsap.set('[data-eq-height-elements-adjusted]', { clearProps: 'minHeight' })
+      gsap.set('[data-eq-height-elements-adjusted]', {
+        clearProps: 'minHeight',
+      })
       this.initialize()
     })
   }
 
   initialize() {
     const canvases = Dom.all(this.container, '[data-eq-height-elements]')
-    Array.from(canvases).forEach(canvas => {
+    Array.from(canvases).forEach((canvas) => {
       let lastTop = null
       const actionables = []
       let elements = []
       let height = 0
       const eqElements = Dom.all(canvas, this.selector)
 
-      eqElements.forEach(el => {
+      eqElements.forEach((el) => {
         const rect = el.getBoundingClientRect()
 
         if (lastTop === null) {
@@ -58,10 +60,10 @@ export default class EqualHeightElements {
       }
 
       if (actionables.length) {
-        actionables.forEach(a => {
+        actionables.forEach((a) => {
           gsap.set(a.elements, {
             minHeight: a.height,
-            attr: { 'data-eq-height-elements-adjusted': true }
+            attr: { 'data-eq-height-elements-adjusted': true },
           })
         })
       }

package/src/modules/EqualHeightImages/index.js

@@ -1,11 +1,11 @@
-import { gsap } from 'gsap'
+import { gsap } from 'gsap/all'
 import Dom from '../Dom'
 import * as Events from '../../events'
 import imagesAreLoaded from '../../utils/imagesAreLoaded'
 import _defaultsDeep from 'lodash.defaultsdeep'
 
 const DEFAULT_OPTIONS = {
-  listenForResize: true
+  listenForResize: true,
 }
 
 export default class EqualHeightImages {
@@ -23,7 +23,7 @@ export default class EqualHeightImages {
   }
 
   run() {
-    Array.from(this.canvases).forEach(canvas => {
+    Array.from(this.canvases).forEach((canvas) => {
       let lastTop = null
       const actionables = []
       let elements = []
@@ -31,7 +31,7 @@ export default class EqualHeightImages {
       const imgs = Dom.all(canvas, 'img')
 
       imagesAreLoaded(imgs, false).then(() => {
-        imgs.forEach(el => {
+        imgs.forEach((el) => {
           const rect = el.getBoundingClientRect()
           const size = this.getImgSizeInfo(el)
 
@@ -62,7 +62,7 @@ export default class EqualHeightImages {
         }
 
         if (actionables.length) {
-          actionables.forEach(a => {
+          actionables.forEach((a) => {
             gsap.set(a.elements, { minHeight: a.height })
           })
         }
@@ -94,7 +94,10 @@ export default class EqualHeightImages {
   }
 
   getImgSizeInfo(img) {
-    const pos = window.getComputedStyle(img).getPropertyValue('object-position').split(' ')
+    const pos = window
+      .getComputedStyle(img)
+      .getPropertyValue('object-position')
+      .split(' ')
 
     return this.getRenderedSize(
       true,

package/src/modules/FixedHeader/index.js

@@ -23,11 +23,58 @@
  *
  */
 
-import { gsap } from 'gsap'
+import { gsap } from 'gsap/all'
 import _defaultsDeep from 'lodash.defaultsdeep'
 import * as Events from '../../events'
 import Dom from '../Dom'
 
+/**
+ * @typedef {Object} FixedHeaderEvents
+ * @property {Function} [onPin] - Called when header is pinned
+ * @property {Function} [onUnpin] - Called when header is unpinned
+ * @property {Function} [onAltBg] - Called when alternate background is applied
+ * @property {Function} [onNotAltBg] - Called when regular background is applied
+ * @property {Function} [onSmall] - Called when header becomes small
+ * @property {Function} [onNotSmall] - Called when header becomes normal size
+ * @property {Function} [onTop] - Called when page is at the top
+ * @property {Function} [onNotTop] - Called when page is not at the top
+ * @property {Function} [onBottom] - Called when page is at the bottom
+ * @property {Function} [onNotBottom] - Called when page is not at the bottom
+ * @property {Function} [onMobileMenuOpen] - Called when mobile menu opens
+ * @property {Function} [onMobileMenuClose] - Called when mobile menu closes
+ * @property {Function} [onIntersect] - Called when header intersects with an element
+ * @property {Function} [onOutline] - Called when user tabs (outline mode)
+ */
+
+/**
+ * @typedef {Object} FixedHeaderSectionOptions
+ * @property {boolean} [unPinOnResize=true] - Whether to unpin header on window resize
+ * @property {Window|HTMLElement} [canvas=window] - Scrolling element
+ * @property {string|null} [intersects=null] - Selector for elements to check intersection with
+ * @property {Function} [beforeEnter] - Called before header enters
+ * @property {Function} [enter] - Called when header enters
+ * @property {number} [enterDelay=0] - Delay before enter animation
+ * @property {number} [tolerance=3] - Scroll tolerance before triggering hide/show
+ * @property {number|string|Function} [offset=0] - Offset from top before triggering hide
+ * @property {number|string|Function} [offsetSmall=50] - Offset from top before shrinking header
+ * @property {number|string|Function} [offsetBg=200] - Offset from top before changing background color
+ * @property {string|null} [regBgColor=null] - Regular background color
+ * @property {string|null} [altBgColor=null] - Alternate background color
+ */
+
+/**
+ * @typedef {Object} FixedHeaderOptions
+ * @property {string|HTMLElement} [el='header[data-nav]'] - Header element or selector
+ * @property {string} [on=Events.APPLICATION_REVEALED] - Event to initialize on
+ * @property {boolean} [unpinOnForcedScrollStart=true] - Whether to unpin on forced scroll start
+ * @property {boolean} [pinOnForcedScrollEnd=true] - Whether to pin on forced scroll end
+ * @property {boolean} [ignoreForcedScroll=false] - Whether to ignore forced scroll events
+ * @property {boolean} [rafScroll=true] - Whether to use requestAnimationFrame for scrolling
+ * @property {FixedHeaderSectionOptions} [default] - Default options for all sections
+ * @property {Object.<string, FixedHeaderSectionOptions>} [sections] - Section-specific options
+ */
+
+/** @type {FixedHeaderEvents} */
 const DEFAULT_EVENTS = {
   onPin: (h) => {
     gsap.to(h.el, {
@@ -93,6 +140,7 @@ const DEFAULT_EVENTS = {
   },
 }
 
+/** @type {FixedHeaderOptions} */
 const DEFAULT_OPTIONS = {
   el: 'header[data-nav]',
   on: Events.APPLICATION_REVEALED,
@@ -134,7 +182,15 @@ const DEFAULT_OPTIONS = {
   },
 }
 
+/**
+ * FixedHeader component for sticky navigation headers with scroll behaviors
+ */
 export default class FixedHeader {
+  /**
+   * Create a new FixedHeader instance
+   * @param {Object} app - Application instance
+   * @param {FixedHeaderOptions} [opts={}] - FixedHeader options
+   */
   constructor(app, opts = {}) {
     this.app = app
     this.mainOpts = _defaultsDeep(opts, DEFAULT_OPTIONS)

package/src/modules/FooterReveal/index.js

@@ -1,9 +1,9 @@
-import { gsap } from 'gsap'
+import { gsap } from 'gsap/all'
 import _defaultsDeep from 'lodash.defaultsdeep'
 
 const DEFAULT_OPTIONS = {
   shadow: false,
-  shadowColor: 'rgba(255, 255, 255, 1)'
+  shadowColor: 'rgba(255, 255, 255, 1)',
 }
 
 export default class FooterReveal {
@@ -17,7 +17,7 @@ export default class FooterReveal {
     gsap.set(footer, {
       'z-index': -100,
       position: 'fixed',
-      bottom: 0
+      bottom: 0,
     })
     const footerHeight = footer.offsetHeight
     // add height as margin