@brandocms/jupiter 3.54.4 → 4.0.0-beta.1

package/src/modules/Popup/index.js

@@ -1,7 +1,26 @@
-import { gsap } from 'gsap'
+import { gsap } from 'gsap/all'
 import _defaultsDeep from 'lodash.defaultsdeep'
 
+/**
+ * @typedef {Object} PopupOptions
+ * @property {string} [selector] - CSS selector to find popup elements
+ * @property {Function} [responsive] - Function that determines if popup should be shown on current breakpoint
+ * @property {Function} [onOpen] - Called when popup opens
+ * @property {Function} [onClose] - Called when popup closes
+ * @property {Function} [tweenIn] - Animation function for opening popup
+ * @property {Function} [tweenOut] - Animation function for closing popup
+ */
+
+/** @type {PopupOptions} */
 const DEFAULT_OPTIONS = {
+  /**
+   * selector
+   *
+   * CSS selector to find popup elements
+   * Default: '[data-popup]'
+   */
+  selector: '[data-popup]',
+
   /**
    * responsive
    *
@@ -30,104 +49,211 @@ const DEFAULT_OPTIONS = {
             x: -5,
             xPercent: -50,
             opacity: 0,
-            display: 'block'
+            display: 'block',
           },
           {
             duration: 0.3,
             yPercent: -50,
             xPercent: -50,
             x: 0,
-            opacity: 1
+            opacity: 1,
           }
         )
-      }
+      },
     })
   },
 
-  tweenOut: popup => {
-    const popups = document.querySelectorAll('[data-popup]')
-    gsap.to(popups, {
-      duration: 0.3,
-      opacity: 0,
-      display: 'none'
-    })
+  tweenOut: (popup) => {
+    console.log('default tweenOut')
+    const popupElement = popup.currentPopup
+    if (popupElement) {
+      gsap.to(popupElement, {
+        duration: 0.3,
+        opacity: 0,
+        display: 'none',
+      })
+    }
     gsap.to(popup.backdrop, {
       duration: 0.3,
       opacity: 0,
       onComplete: () => {
-        gsap.set(popup.backdrop, { display: 'none' })
-      }
+        // Remove the backdrop completely instead of just hiding it
+        popup.backdrop.remove()
+      },
     })
-  }
+  },
 }
 
+/**
+ * Popup component for modal dialogs and popups
+ */
 export default class Popup {
-  constructor(app, opts = {}) {
+  /**
+   * Create a new Popup instance
+   * @param {Object} app - Application instance
+   * @param {string} [selector] - CSS selector to find popup elements
+   * @param {PopupOptions} [opts={}] - Popup options
+   */
+  constructor(app, selector = '[data-popup]', opts = {}) {
     this.app = app
     this.opts = _defaultsDeep(opts, DEFAULT_OPTIONS)
-    this.createBackdrop()
+    this.opts.selector = selector
+    this.backdrop = null
+    this.currentPopup = null
+    this.popupKey = null
     this.bindTriggers()
   }
 
+  /**
+   * Bind click handlers to popup triggers and close buttons
+   */
   bindTriggers() {
-    const triggers = document.querySelectorAll('[data-popup-trigger]')
-    const closers = document.querySelectorAll('[data-popup-close]')
+    // Find all triggers that match this popup's selector
+    const allTriggers = document.querySelectorAll('[data-popup-trigger]')
+    const matchingTriggers = Array.from(allTriggers).filter(trigger => {
+      const target = trigger.getAttribute('data-popup-trigger')
+      if (typeof target === 'string') {
+        const element = document.querySelector(target)
+        return element && element.matches(this.opts.selector)
+      }
+      return false
+    })
 
-    Array.from(triggers).forEach(trigger => {
+    // Get all popups that match this instance's selector
+    const popups = document.querySelectorAll(this.opts.selector)
+    
+    // Find all close buttons inside matching popups
+    const closers = []
+    popups.forEach(popup => {
+      const popupClosers = popup.querySelectorAll('[data-popup-close]')
+      closers.push(...popupClosers)
+    })
+
+    // Bind click handlers to matching triggers
+    matchingTriggers.forEach((trigger) => {
       const triggerTarget = trigger.getAttribute('data-popup-trigger')
-      trigger.addEventListener('click', event => {
+      // Get the popup key if present
+      const popupKey = trigger.getAttribute('data-popup-key') || this.getKeyFromTarget(triggerTarget)
+      
+      trigger.addEventListener('click', (event) => {
         if (this.opts.responsive(this.app)) {
           event.stopImmediatePropagation()
           event.preventDefault()
-          this.open(trigger, triggerTarget)
+          this.open(trigger, triggerTarget, popupKey)
         }
       })
     })
 
-    Array.from(closers).forEach(closer => {
-      closer.addEventListener('click', event => {
+    // Bind click handlers to close buttons
+    closers.forEach((closer) => {
+      // Get the popup key from the closest parent popup element
+      const popupElement = closer.closest(this.opts.selector)
+      const popupKey = popupElement ? popupElement.getAttribute('data-popup-key') : null
+      
+      closer.addEventListener('click', (event) => {
         event.stopImmediatePropagation()
         event.preventDefault()
-        this.opts.onClose(this)
-        this.close()
+        
+        // Only close if keys match or no key is set
+        if (!this.popupKey || !popupKey || this.popupKey === popupKey) {
+          this.opts.onClose(this)
+          this.close()
+        }
       })
     })
   }
 
-  createBackdrop() {
+  /**
+   * Extract key from target selector or element
+   * @param {HTMLElement|string} target - Target element or selector
+   * @returns {string|null} - The popup key or null
+   */
+  getKeyFromTarget(target) {
+    if (typeof target === 'string') {
+      const element = document.querySelector(target)
+      return element ? element.getAttribute('data-popup-key') : null
+    } else if (target instanceof HTMLElement) {
+      return target.getAttribute('data-popup-key')
+    }
+    return null
+  }
+
+  /**
+   * Create backdrop element for popup
+   * @param {string|null} key - Optional popup key to associate with backdrop
+   * @returns {HTMLElement} The created backdrop element
+   */
+  createBackdrop(key) {
     const backdrop = document.createElement('div')
     backdrop.setAttribute('data-popup-backdrop', '')
+    if (key) {
+      backdrop.setAttribute('data-popup-key', key)
+    }
     gsap.set(backdrop, { opacity: 0, display: 'none', zIndex: 4999 })
 
-    backdrop.addEventListener('click', e => {
+    backdrop.addEventListener('click', (e) => {
       e.stopPropagation()
       this.close()
     })
 
     document.body.append(backdrop)
-    this.backdrop = backdrop
+    return backdrop
   }
 
-  open(trigger, target) {
+  /**
+   * Open a popup
+   * @param {HTMLElement} trigger - Element that triggered the popup
+   * @param {HTMLElement|string} target - Popup element or selector
+   * @param {string|null} key - Optional popup key
+   */
+  open(trigger, target, key = null) {
     this.keyUpListener = this.onKeyup.bind(this)
     document.addEventListener('keyup', this.keyUpListener)
+
+    // Store the popup key
+    this.popupKey = key || this.getKeyFromTarget(target)
+
+    // Create a new backdrop for this popup
+    this.backdrop = this.createBackdrop(this.popupKey)
+
     if (typeof target === 'string') {
       target = document.querySelector(target)
     }
 
     if (!target) {
       console.error(`JUPITER/POPUP >>> Element ${target} not found`)
+      return
+    }
+
+    // Store the current popup element for reference
+    this.currentPopup = target
+    
+    // If key isn't already set on the popup element, set it now
+    if (this.popupKey && !target.hasAttribute('data-popup-key')) {
+      target.setAttribute('data-popup-key', this.popupKey)
     }
+
     this.opts.onOpen(trigger, target, this)
     this.opts.tweenIn(trigger, target, this)
   }
 
+  /**
+   * Close the popup
+   */
   close() {
     document.removeEventListener('keyup', this.keyUpListener)
     this.opts.onClose(this)
     this.opts.tweenOut(this)
+    
+    // Reset popup state
+    this.popupKey = null
+    this.currentPopup = null
   }
 
+  /**
+   * Handle keyup event for Escape key to close popup
+   * @param {KeyboardEvent} e - Keyboard event
+   */
   onKeyup(e) {
     const key = e.keyCode || e.which
 

package/src/modules/ScrollSpy/index.js

@@ -1,17 +1,34 @@
 import _defaultsDeep from 'lodash.defaultsdeep'
 import Dom from '../Dom'
 
+/**
+ * @typedef {Object} ScrollSpyOptions
+ * @property {Function} [onIntersect] - Called when a target intersects with the viewport
+ */
+
+/** @type {ScrollSpyOptions} */
 const DEFAULT_OPTIONS = {
   onIntersect: (target, trigger) => {}
 }
 
+/**
+ * ScrollSpy component for highlighting active sections during scrolling
+ */
 export default class ScrollSpy {
+  /**
+   * Create a new ScrollSpy instance
+   * @param {Object} app - Application instance
+   * @param {ScrollSpyOptions} [opts={}] - ScrollSpy options
+   */
   constructor(app, opts = {}) {
     this.app = app
     this.opts = _defaultsDeep(opts, DEFAULT_OPTIONS)
     this.initialize()
   }
 
+  /**
+   * Initialize ScrollSpy
+   */
   initialize() {
     this.triggers = Dom.all('[data-scrollspy-trigger]')
     const config = {
@@ -29,6 +46,10 @@ export default class ScrollSpy {
     this.triggers.forEach(section => observer.observe(section))
   }
 
+  /**
+   * Handle intersection with viewport
+   * @param {IntersectionObserverEntry} entry - Intersection observer entry
+   */
   intersectionHandler(entry) {
     const id = entry.target.dataset.scrollspyTrigger
     const currentlyActive = document.querySelector('[data-scrollspy-active]')

package/src/modules/StackedBoxes/index.js

@@ -1,4 +1,4 @@
-import { gsap } from 'gsap'
+import { gsap } from 'gsap/all'
 import _defaultsDeep from 'lodash.defaultsdeep'
 
 const DEFAULT_OPTIONS = {}
@@ -13,14 +13,14 @@ export default class StackedBoxes {
   initialize() {
     const boxes = document.querySelectorAll('[data-boxes-stacked]')
 
-    const observer = new IntersectionObserver(entries => {
+    const observer = new IntersectionObserver((entries) => {
       const [{ isIntersecting, target }] = entries
       if (isIntersecting) {
         this.adjustBox(target)
       }
     })
 
-    Array.from(boxes).forEach(box => {
+    Array.from(boxes).forEach((box) => {
       observer.observe(box)
     })
   }
@@ -53,7 +53,9 @@ export default class StackedBoxes {
           break
 
         default:
-          console.error('==> JUPITER/STACKEDBOXES: `data-boxes-stacked-pull` has wrong value')
+          console.error(
+            '==> JUPITER/STACKEDBOXES: `data-boxes-stacked-pull` has wrong value'
+          )
       }
       this.pull(pull, pullPx)
     }

package/src/modules/StickyHeader/index.js

@@ -23,36 +23,36 @@
  *
  */
 
-import { gsap } from 'gsap'
+import { gsap } from 'gsap/all'
 import _defaultsDeep from 'lodash.defaultsdeep'
 import * as Events from '../../events'
 
 const DEFAULT_EVENTS = {
-  onMainVisible: h => {
+  onMainVisible: (h) => {
     gsap.to(h.el, {
       duration: 3,
       opacity: 1,
-      delay: 0.5
+      delay: 0.5,
     })
   },
 
-  onMainInvisible: h => {
+  onMainInvisible: (h) => {
     gsap.to(h.el, {
       duration: 1,
-      opacity: 0
+      opacity: 0,
     })
   },
 
-  onPin: h => {
+  onPin: (h) => {
     gsap.to(h.auxEl, {
       duration: 0.35,
       yPercent: '0',
       ease: 'sine.out',
-      autoRound: true
+      autoRound: true,
     })
   },
 
-  onUnpin: h => {
+  onUnpin: (h) => {
     h._hiding = true
     gsap.to(h.auxEl, {
       duration: 0.25,
@@ -61,10 +61,10 @@ const DEFAULT_EVENTS = {
       autoRound: true,
       onComplete: () => {
         h._hiding = false
-      }
+      },
     })
   },
-  onSmall: () => {}
+  onSmall: () => {},
 }
 
 const DEFAULT_OPTIONS = {
@@ -75,12 +75,12 @@ const DEFAULT_OPTIONS = {
   unPinOnResize: false,
 
   default: {
-    onClone: h => h.el.cloneNode(true),
+    onClone: (h) => h.el.cloneNode(true),
     canvas: window,
-    beforeEnter: h => {
+    beforeEnter: (h) => {
       gsap.set(h.el, { opacity: 0 })
     },
-    enter: h => {
+    enter: (h) => {
       const timeline = gsap.timeline()
       timeline
         .set(h.auxEl, { yPercent: -100 })
@@ -89,7 +89,7 @@ const DEFAULT_OPTIONS = {
           yPercent: 0,
           delay: h.opts.enterDelay,
           ease: 'power3.out',
-          autoRound: true
+          autoRound: true,
         })
         .staggerTo(h.lis, 0.8, { opacity: 1, ease: 'sine.in' }, 0.1, '-=1')
     },
@@ -98,8 +98,8 @@ const DEFAULT_OPTIONS = {
     offset: 0, // how far from the top before we trigger hide
     offsetSmall: 50, // how far from the top before we trigger the shrinked padding,
     offsetBg: 200, // how far down before changing backgroundcolor
-    ...DEFAULT_EVENTS
-  }
+    ...DEFAULT_EVENTS,
+  },
 }
 
 export default class StickyHeader {
@@ -174,14 +174,18 @@ export default class StickyHeader {
     this._bindMobileMenuListeners()
 
     if (this.opts.unPinOnResize) {
-      window.addEventListener(Events.APPLICATION_RESIZE, this.setResizeTimer.bind(this), false)
+      window.addEventListener(
+        Events.APPLICATION_RESIZE,
+        this.setResizeTimer.bind(this),
+        false
+      )
     }
 
     this.opts.beforeEnter(this)
   }
 
   setupObserver() {
-    this.observer = new IntersectionObserver(entries => {
+    this.observer = new IntersectionObserver((entries) => {
       const [{ isIntersecting }] = entries
 
       if (isIntersecting) {
@@ -200,7 +204,11 @@ export default class StickyHeader {
       }
     })
 
-    window.addEventListener(Events.APPLICATION_SCROLL, this.update.bind(this), false)
+    window.addEventListener(
+      Events.APPLICATION_SCROLL,
+      this.update.bind(this),
+      false
+    )
 
     if (this.mainOpts.pinOnForcedScroll) {
       window.addEventListener(Events.APPLICATION_FORCED_SCROLL_START, () => {
@@ -292,7 +300,10 @@ export default class StickyHeader {
   }
 
   checkBot(force) {
-    if (this.currentScrollY + this.getViewportHeight() >= this.getScrollerHeight()) {
+    if (
+      this.currentScrollY + this.getViewportHeight() >=
+      this.getScrollerHeight()
+    ) {
       if (force) {
         this.bottom()
       } else if (!this._bottom) {
@@ -420,7 +431,8 @@ export default class StickyHeader {
   isOutOfBounds() {
     const pastTop = this.currentScrollY < 0
     const pastBottom =
-      this.currentScrollY + this.getScrollerPhysicalHeight() > this.getScrollerHeight()
+      this.currentScrollY + this.getScrollerPhysicalHeight() >
+      this.getScrollerHeight()
 
     return pastTop || pastBottom
   }
@@ -453,7 +465,9 @@ export default class StickyHeader {
 
   getViewportHeight() {
     return (
-      window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
+      window.innerHeight ||
+      document.documentElement.clientHeight ||
+      document.body.clientHeight
     )
   }
 
@@ -472,11 +486,18 @@ export default class StickyHeader {
     if (this.opts.canvas.scrollTop !== undefined) {
       return this.opts.canvas.scrollTop
     }
-    return (document.documentElement || document.body.parentNode || document.body).scrollTop
+    return (
+      document.documentElement ||
+      document.body.parentNode ||
+      document.body
+    ).scrollTop
   }
 
   toleranceExceeded() {
-    return Math.abs(this.currentScrollY - this.lastKnownScrollY) >= this.opts.tolerance
+    return (
+      Math.abs(this.currentScrollY - this.lastKnownScrollY) >=
+      this.opts.tolerance
+    )
   }
 
   _getOptionsForSection(section, opts) {

package/src/modules/Toggler/index.js

@@ -1,17 +1,37 @@
-import { gsap } from 'gsap'
+import { gsap } from 'gsap/all'
 import Dom from '../Dom'
 
+/**
+ * Toggler component for show/hide functionality
+ * Uses [data-toggle-trigger] for the toggle button and [data-toggle-content] for toggleable content
+ */
 export default class Toggler {
+  /**
+   * Create a new Toggler instance
+   * @param {Object} app - Application instance
+   * @param {HTMLElement} el - Container element with [data-toggle] attribute
+   */
   constructor(app, el) {
     this.open = false
     this.app = app
     this.el = el
     this.trigger = Dom.find(this.el, '[data-toggle-trigger]')
+    this.triggerTarget = this.trigger.dataset.toggleTrigger
+    if (this.triggerTarget) {
+      this.content = Dom.all(
+        this.el,
+        `[data-toggle-content="${this.triggerTarget}"]`
+      )
+    } else {
+      this.content = Dom.all(this.el, '[data-toggle-content]')
+    }
     this.triggerIcon = Dom.find(this.trigger, 'span.icon')
-    this.content = Dom.find(this.el, '[data-toggle-content]')
     this.trigger.addEventListener('click', this.onClick.bind(this))
   }
 
+  /**
+   * Handle click on trigger element
+   */
   onClick() {
     this.toggleState()
 
@@ -21,7 +41,17 @@ export default class Toggler {
       }
       gsap.set(this.content, { height: 'auto', display: 'block' })
       this.el.classList.toggle('open')
-      gsap.from(this.content, { height: 0, ease: 'power1.inOut' })
+      gsap.from(this.content, {
+        height: 0,
+        ease: 'power1.inOut',
+        stagger: 0.1,
+        onComplete: () => {
+          this.content.forEach((el) => el.removeAttribute('data-toggle-hidden'))
+          this.content.forEach((el) =>
+            el.setAttribute('data-toggle-visible', '')
+          )
+        },
+      })
     } else {
       if (this.triggerIcon) {
         this.triggerIcon.classList.toggle('active')
@@ -30,13 +60,22 @@ export default class Toggler {
         duration: 0.25,
         onComplete: () => {
           this.el.classList.toggle('open')
-        }
+          this.content.forEach((el) =>
+            el.removeAttribute('data-toggle-visible')
+          )
+          this.content.forEach((el) =>
+            el.setAttribute('data-toggle-hidden', '')
+          )
+        },
       })
 
-      gsap.to(this.content, { height: 0, ease: 'power3.out' })
+      gsap.to(this.content, { height: 0, ease: 'power3.out', stagger: 0.1 })
     }
   }
 
+  /**
+   * Toggle open/closed state
+   */
   toggleState() {
     if (this.open) {
       this.open = false