@brandocms/jupiter 3.55.0 → 4.0.0-beta.2

package/src/modules/Popup/index.js

@@ -1,7 +1,27 @@
-import { gsap } from 'gsap'
+import { animate } from 'motion'
+import { set } from '../../utils/motion-helpers'
 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
    *
@@ -17,117 +37,216 @@ const DEFAULT_OPTIONS = {
   onClose: () => {},
 
   tweenIn: (trigger, target, popup) => {
-    gsap.set(popup.backdrop, { display: 'block' })
-    gsap.to(popup.backdrop, {
-      duration: 0.3,
-      opacity: 1,
-      onComplete: () => {
-        gsap.fromTo(
+    popup.backdrop.style.display = 'block'
+    animate(popup.backdrop, { opacity: 1 }, { duration: 0.3 })
+      .finished
+      .then(() => {
+        target.style.display = 'block'
+        animate(
           target,
           {
-            duration: 0.3,
-            yPercent: -50,
-            x: -5,
-            xPercent: -50,
-            opacity: 0,
-            display: 'block'
+            transform: [
+              'translate(calc(-50% - 5px), -50%)',
+              'translate(-50%, -50%)'
+            ],
+            opacity: [0, 1]
           },
-          {
-            duration: 0.3,
-            yPercent: -50,
-            xPercent: -50,
-            x: 0,
-            opacity: 1
-          }
+          { duration: 0.3, ease: [0.4, 0, 0.2, 1] }
         )
-      }
-    })
+      })
   },
 
-  tweenOut: popup => {
-    const popups = document.querySelectorAll('[data-popup]')
-    gsap.to(popups, {
-      duration: 0.3,
-      opacity: 0,
-      display: 'none'
-    })
-    gsap.to(popup.backdrop, {
-      duration: 0.3,
-      opacity: 0,
-      onComplete: () => {
-        gsap.set(popup.backdrop, { display: 'none' })
-      }
-    })
-  }
+  tweenOut: (popup) => {
+    console.log('default tweenOut')
+    const popupElement = popup.currentPopup
+    if (popupElement) {
+      animate(popupElement, { opacity: 0 }, { duration: 0.3 })
+        .finished
+        .then(() => {
+          popupElement.style.display = 'none'
+        })
+    }
+    animate(popup.backdrop, { opacity: 0 }, { duration: 0.3 })
+      .finished
+      .then(() => {
+        // 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
+    })
+
+    // 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)
+    })
 
-    Array.from(triggers).forEach(trigger => {
+    // 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', '')
-    gsap.set(backdrop, { opacity: 0, display: 'none', zIndex: 4999 })
+    if (key) {
+      backdrop.setAttribute('data-popup-key', key)
+    }
+    backdrop.style.display = 'none'
+    backdrop.style.zIndex = '4999'
+    set(backdrop, { opacity: 0 })
 
-    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 { set } from '../../utils/motion-helpers'
 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,17 +53,19 @@ 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)
     }
   }
 
   pull(box, amnt) {
-    gsap.set(box, { y: amnt * -1, marginBottom: amnt * -1 })
+    set(box, { y: amnt * -1, marginBottom: amnt * -1 })
   }
 
   size(target, src) {
-    gsap.set(target, { height: src.clientHeight })
+    set(target, { height: src.clientHeight })
   }
 }