@brandocms/jupiter 3.55.0 → 4.0.0-beta.2

package/src/modules/Toggler/index.js

@@ -1,42 +1,238 @@
-import { gsap } from 'gsap'
+import { animate } from 'motion'
 import Dom from '../Dom'
+import { set } from '../../utils/motion-helpers'
 
+/**
+ * Toggler component for show/hide functionality
+ * Uses [data-toggle-trigger] for the toggle button and [data-toggle-content] for toggleable content
+ * Can be grouped using [data-toggle-group] to create accordion-like behavior
+ *
+ * IMPORTANT: For smooth animations, avoid padding/margins on [data-toggle-content].
+ * Instead, wrap content in a child element with padding/margins:
+ *
+ * @example
+ * // ❌ DON'T: Padding/margins directly on toggle content
+ * <div data-toggle-content style="padding: 20px; margin-top: 10px">
+ *   Content here
+ * </div>
+ *
+ * // ✅ DO: Wrap content in child element
+ * <div data-toggle-content>
+ *   <div style="padding: 20px; margin-top: 10px">
+ *     Content here
+ *   </div>
+ * </div>
+ */
 export default class Toggler {
-  constructor(app, el) {
+  /**
+   * Create a new Toggler instance
+   * @param {Object} app - Application instance
+   * @param {HTMLElement} el - Container element with [data-toggle] attribute
+   * @param {Object} options - Configuration options
+   * @param {Function} options.onOpen - Callback when toggle opens
+   * @param {Function} options.onClose - Callback when toggle closes
+   */
+  constructor(app, el, options = {}) {
     this.open = false
     this.app = app
     this.el = el
+    this.onOpen = options.onOpen
+    this.onClose = options.onClose
+    this.onBeforeOpen = options.onBeforeOpen
+    this.onBeforeClose = options.onBeforeClose
     this.trigger = Dom.find(this.el, '[data-toggle-trigger]')
+    this.triggerTarget = this.trigger.dataset.toggleTrigger
+    this.group = this.el.dataset.toggleGroup
+    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))
   }
 
+  /**
+   * Get the index of this toggle within its group (1-based)
+   * @returns {number} The 1-based index of this toggle in its group
+   */
+  getGroupIndex() {
+    if (!this.group || !this.app.togglers) return 1
+
+    const groupTogglers = this.app.togglers.filter(t => t.group === this.group)
+    return groupTogglers.indexOf(this) + 1
+  }
+
+  /**
+   * Handle click on trigger element
+   */
   onClick() {
+    // If this toggler belongs to a group and is currently closed,
+    // close all others in the same group
+    if (this.group && !this.open) {
+      this.closeOthersInGroup()
+    }
+
     this.toggleState()
 
     if (this.open) {
       if (this.triggerIcon) {
         this.triggerIcon.classList.toggle('active')
       }
-      gsap.set(this.content, { height: 'auto', display: 'block' })
+      this.trigger.setAttribute('data-toggle-trigger-active', '')
+
+      // Set initial state before making visible
+      this.content.forEach(el => {
+        el.style.height = '0'
+        el.style.display = 'block'
+        // Force layout reflow to ensure 0 height is applied
+        el.offsetHeight
+      })
+
       this.el.classList.toggle('open')
-      gsap.from(this.content, { height: 0, ease: 'power1.inOut' })
+      if (this.onBeforeOpen) {
+        this.onBeforeOpen(this, this.getGroupIndex())
+      }
+
+      // Animate each content element with stagger
+      const animations = []
+      this.content.forEach((el, index) => {
+        // Measure the actual height now
+        const targetHeight = el.scrollHeight
+
+        animations.push(
+          animate(el, { height: [0, targetHeight + 'px'] }, {
+            ease: 'easeInOut',
+            delay: index * 0.1
+          })
+        )
+      })
+
+      // Wait for the last animation to complete
+      const lastAnimation = animations[animations.length - 1]
+      if (lastAnimation) {
+        lastAnimation.finished.then(() => {
+          // Set height to auto for responsiveness
+          this.content.forEach(el => {
+            el.style.height = 'auto'
+            el.removeAttribute('data-toggle-hidden')
+            el.setAttribute('data-toggle-visible', '')
+          })
+          if (this.onOpen) {
+            this.onOpen(this, this.getGroupIndex())
+          }
+        })
+      }
     } else {
       if (this.triggerIcon) {
         this.triggerIcon.classList.toggle('active')
       }
-      gsap.to(this.content, {
-        duration: 0.25,
-        onComplete: () => {
-          this.el.classList.toggle('open')
-        }
+      this.trigger.removeAttribute('data-toggle-trigger-active')
+      if (this.onBeforeClose) {
+        this.onBeforeClose(this, this.getGroupIndex())
+      }
+
+      // Animate each content element with stagger
+      const animations = []
+      this.content.forEach((el, index) => {
+        // Get current height and set explicitly before animating
+        const currentHeight = el.scrollHeight
+        el.style.height = currentHeight + 'px'
+        // Force layout reflow to ensure pixel height is applied
+        el.offsetHeight
+
+        animations.push(
+          animate(el, { height: 0 }, {
+            duration: 0.25,
+            ease: 'easeOut',
+            delay: index * 0.1
+          })
+        )
       })
 
-      gsap.to(this.content, { height: 0, ease: 'power3.out' })
+      // Wait for the last animation to complete
+      const lastAnimation = animations[animations.length - 1]
+      if (lastAnimation) {
+        lastAnimation.finished.then(() => {
+          this.el.classList.toggle('open')
+          this.content.forEach(el => {
+            el.style.display = 'none'
+            el.style.removeProperty('height')
+            el.removeAttribute('data-toggle-visible')
+            el.setAttribute('data-toggle-hidden', '')
+          })
+          if (this.onClose) {
+            this.onClose(this, this.getGroupIndex())
+          }
+        })
+      }
     }
   }
 
+  /**
+   * Close all other togglers in the same group
+   */
+  closeOthersInGroup() {
+    if (!this.group || !this.app.togglers) return
+
+    this.app.togglers.forEach(toggler => {
+      // Skip if it's this toggler or not in the same group
+      if (toggler === this || toggler.group !== this.group) return
+
+      // Only close if it's open
+      if (toggler.open) {
+        // Close the toggler
+        toggler.open = false
+
+        // Update UI
+        if (toggler.triggerIcon) {
+          toggler.triggerIcon.classList.remove('active')
+        }
+
+        toggler.trigger.removeAttribute('data-toggle-trigger-active')
+        toggler.el.classList.remove('open')
+
+        // Animate content closing with stagger
+        const animations = []
+        toggler.content.forEach((el, index) => {
+          // Get current height and set explicitly before animating
+          const currentHeight = el.scrollHeight
+          el.style.height = currentHeight + 'px'
+          // Force layout reflow to ensure pixel height is applied
+          el.offsetHeight
+
+          animations.push(
+            animate(el, { height: 0 }, {
+              duration: 0.25,
+              ease: 'easeOut',
+              delay: index * 0.1
+            })
+          )
+        })
+
+        // Wait for the last animation to complete
+        const lastAnimation = animations[animations.length - 1]
+        if (lastAnimation) {
+          lastAnimation.finished.then(() => {
+            toggler.content.forEach(el => {
+              el.style.display = 'none'
+              el.style.removeProperty('height')
+              el.removeAttribute('data-toggle-visible')
+              el.setAttribute('data-toggle-hidden', '')
+            })
+
+            if (toggler.onClose) {
+              toggler.onClose(toggler, toggler.getGroupIndex())
+            }
+          })
+        }
+      }
+    })
+  }
+
+  /**
+   * Toggle open/closed state
+   */
   toggleState() {
     if (this.open) {
       this.open = false

package/src/modules/Typography/index.js

@@ -1,9 +1,23 @@
+/**
+ * @typedef {Object} TypographySettings
+ * @property {number} [minWords=4] - Minimum number of words required to apply fixes
+ * @property {string} [selector='[data-typo]'] - Selector for elements to process
+ * @property {string} [ignoreClass='no-typo-fix'] - Class to exclude elements from processing
+ * @property {boolean} [ignoreExistingSpaceChars=false] - Whether to ignore elements with existing non-breaking spaces
+ */
+
+/**
+ * Typography class for enhancing text presentation, including orphan prevention
+ */
 export default class Typography {
+  /**
+   * Create a new Typography instance
+   * @param {HTMLElement|undefined} parent - Parent element to search for typography elements, or undefined for document
+   * @param {TypographySettings} settings - Typography settings
+   */
   constructor(parent, settings = {}) {
-    const self = this
-
     // Set some settings, by merging defaults and passed settings
-    self.settings = {
+    this.settings = {
       minWords: 4,
       selector: '[data-typo]',
       ignoreClass: 'no-typo-fix',
@@ -11,19 +25,19 @@ export default class Typography {
       ...settings
     }
 
-    self.elems = []
+    this.elems = []
 
     // Either load from root or the passed parent element
     if (typeof parent === 'undefined') {
-      self.elems = [...self.elems, ...document.querySelectorAll(self.settings.selector)]
+      this.elems = [...this.elems, ...document.querySelectorAll(this.settings.selector)]
     } else {
-      self.elems = [...self.elems, ...parent.querySelectorAll(self.settings.selector)]
+      this.elems = [...this.elems, ...parent.querySelectorAll(this.settings.selector)]
     }
 
     // load children
     const typoParents = document.querySelectorAll('[data-typo-children]')
     typoParents.forEach(typoParent => {
-      self.elems = [...self.elems, ...typoParent.children]
+      this.elems = [...this.elems, ...typoParent.children]
     })
 
     this.apply()
@@ -34,11 +48,9 @@ export default class Typography {
    * @return void
    */
   apply() {
-    const self = this
-
-    self.elems.map(elem => {
+    this.elems.map(elem => {
       // Run the ignore checker nd bail if required
-      if (self.shouldElementBeIgnored(elem)) {
+      if (this.shouldElementBeIgnored(elem)) {
         return false
       }
 
@@ -52,12 +64,12 @@ export default class Typography {
         .split(/ (?=[^>]*(?:<|$))/)
 
       // Check if the text warrants this module
-      if (textItems.length < self.settings.minWords) {
+      if (textItems.length < this.settings.minWords) {
         return false
       }
 
       // Run orphans filter
-      textItems = self.preventOrphans(textItems)
+      textItems = this.preventOrphans(textItems)
 
       // Join the words back together
       result = textItems.join(' ')
@@ -91,11 +103,9 @@ export default class Typography {
    * @return void
    */
   reset() {
-    const self = this
-
-    self.elems.map(elem => {
+    this.elems.map(elem => {
       // Run the ignore checker nd bail if required
-      if (self.shouldElementBeIgnored(elem)) {
+      if (this.shouldElementBeIgnored(elem)) {
         return false
       }
 
@@ -111,11 +121,14 @@ export default class Typography {
    * @returns boolean
    */
   shouldElementBeIgnored(elem) {
-    const self = this
-
     // Check if the element already contains 1 or more &nbsp; characters and the
     // ignore setting is true. If so: bail.
-    if (elem.innerHTML.indexOf('&nbsp;') > -1 && self.settings.ignoreExistingSpaceChars) {
+    if (elem.innerHTML.indexOf('&nbsp;') > -1 && this.settings.ignoreExistingSpaceChars) {
+      return true
+    }
+
+    // Check if the element has the ignore class
+    if (elem.classList.contains(this.settings.ignoreClass)) {
       return true
     }
 

package/src/utils/motion-helpers.js

@@ -0,0 +1,330 @@
+import { animate, delay } from 'motion'
+
+/**
+ * Set properties immediately (like gsap.set)
+ * Uses direct DOM manipulation for synchronous style application
+ *
+ * @param {Element|string|NodeList|Array} target - Element(s) or selector
+ * @param {Object} values - Properties to set
+ */
+export function set(target, values) {
+  // Get elements as array
+  let elements
+  if (typeof target === 'string') {
+    elements = Array.from(document.querySelectorAll(target))
+  } else if (target instanceof NodeList) {
+    elements = Array.from(target)
+  } else if (Array.isArray(target)) {
+    elements = target
+  } else {
+    elements = [target]
+  }
+
+  elements.forEach((element) => {
+    if (!element) return
+
+    // Build transform string from transform properties
+    const transformProps = []
+    const styleProps = {}
+
+    Object.entries(values).forEach(([key, value]) => {
+      // Handle transform properties
+      if (key === 'x') {
+        transformProps.push(`translateX(${typeof value === 'number' ? value + 'px' : value})`)
+      } else if (key === 'y') {
+        transformProps.push(`translateY(${typeof value === 'number' ? value + 'px' : value})`)
+      } else if (key === 'scale') {
+        transformProps.push(`scale(${value})`)
+      } else if (key === 'scaleX') {
+        transformProps.push(`scaleX(${value})`)
+      } else if (key === 'scaleY') {
+        transformProps.push(`scaleY(${value})`)
+      } else if (key === 'rotate') {
+        transformProps.push(`rotate(${typeof value === 'number' ? value + 'deg' : value})`)
+      } else if (key === 'rotateX') {
+        transformProps.push(`rotateX(${typeof value === 'number' ? value + 'deg' : value})`)
+      } else if (key === 'rotateY') {
+        transformProps.push(`rotateY(${typeof value === 'number' ? value + 'deg' : value})`)
+      } else if (key === 'rotateZ') {
+        transformProps.push(`rotateZ(${typeof value === 'number' ? value + 'deg' : value})`)
+      } else {
+        // Regular CSS property
+        styleProps[key] = value
+      }
+    })
+
+    // Apply transform
+    if (transformProps.length > 0) {
+      element.style.transform = transformProps.join(' ')
+    }
+
+    // Apply other styles
+    Object.entries(styleProps).forEach(([key, value]) => {
+      element.style[key] = value
+    })
+  })
+}
+
+/**
+ * Animate autoAlpha (opacity + visibility)
+ * Mimics GSAP's autoAlpha property
+ *
+ * @param {Element|string} target - Element or selector
+ * @param {number} value - Target alpha value (0 or 1)
+ * @param {Object} options - Animation options
+ * @returns {Object} Animation object
+ */
+export function animateAutoAlpha(target, value, options = {}) {
+  const element = typeof target === 'string'
+    ? document.querySelector(target)
+    : target
+
+  if (value === 0) {
+    // Fade out, then hide
+    return animate(element, { opacity: 0 }, {
+      ...options,
+      onComplete: () => {
+        element.style.visibility = 'hidden'
+        options.onComplete?.()
+      }
+    })
+  } else {
+    // Show, then fade in
+    element.style.visibility = 'visible'
+    return animate(element, { opacity: value }, options)
+  }
+}
+
+/**
+ * Clear inline styles
+ * Mimics GSAP's clearProps
+ *
+ * @param {Element|string|NodeList|Array} target - Element(s) or selector
+ * @param {string|Array} props - Properties to clear or 'all'
+ */
+export function clearProps(target, props = 'all') {
+  // Get elements as array
+  let elements
+  if (typeof target === 'string') {
+    elements = Array.from(document.querySelectorAll(target))
+  } else if (target instanceof NodeList) {
+    elements = Array.from(target)
+  } else if (Array.isArray(target)) {
+    elements = target
+  } else {
+    elements = [target]
+  }
+
+  elements.forEach(element => {
+    if (!element) return
+
+    if (props === 'all') {
+      element.removeAttribute('style')
+    } else {
+      const properties = Array.isArray(props) ? props : [props]
+      properties.forEach(prop => {
+        element.style.removeProperty(prop)
+      })
+    }
+  })
+}
+
+/**
+ * Delayed call helper
+ * Mimics gsap.delayedCall
+ * Uses Motion's delay function (locked to animation frame loop for better sync)
+ *
+ * @param {number} duration - Delay in seconds
+ * @param {Function} callback - Callback function
+ * @returns {Promise} Promise that resolves after delay
+ */
+export function delayedCall(duration, callback) {
+  return new Promise(resolve => {
+    delay(() => {
+      callback()
+      resolve()
+    }, duration)
+  })
+}
+
+/**
+ * Paused Timeline helper
+ * Mimics GSAP's paused timeline pattern for building sequences
+ * Used by modules like Lightbox that build animations before playing them
+ */
+export class PausedTimeline {
+  constructor() {
+    this.sequence = []
+  }
+
+  /**
+   * Add animation to timeline
+   * @param {Element|string} target - Element or selector
+   * @param {Object} values - Properties to animate
+   * @param {Object} options - Animation options
+   * @returns {PausedTimeline} this for chaining
+   */
+  to(target, values, options = {}) {
+    this.sequence.push(['animate', target, values, options])
+    return this
+  }
+
+  /**
+   * Add callback to timeline
+   * @param {Function} callback - Function to call
+   * @returns {PausedTimeline} this for chaining
+   */
+  call(callback) {
+    this.sequence.push(['call', callback])
+    return this
+  }
+
+  /**
+   * Clear timeline sequence
+   * @returns {PausedTimeline} this for chaining
+   */
+  clear() {
+    this.sequence = []
+    return this
+  }
+
+  /**
+   * Play timeline sequence
+   * Executes all animations and callbacks in order
+   * @returns {Promise} Promise that resolves when sequence completes
+   */
+  async play() {
+    const sequence = [...this.sequence] // Copy so we can clear while playing
+    this.sequence = [] // Clear for next time
+
+    for (const item of sequence) {
+      if (item[0] === 'animate') {
+        const [, target, values, options] = item
+        // Handle autoAlpha
+        if (values.autoAlpha !== undefined) {
+          const autoAlphaOptions = { ...options }
+          delete autoAlphaOptions.autoAlpha
+          await animateAutoAlpha(target, values.autoAlpha, autoAlphaOptions).finished
+        } else {
+          await animate(target, values, options).finished
+        }
+      } else if (item[0] === 'call') {
+        item[1]() // Execute callback
+      }
+    }
+  }
+}
+
+/**
+ * Convert GSAP easing strings to Motion.js compatible easings
+ * Handles common GSAP easing types and returns valid Motion.js easing
+ *
+ * @param {string|Array} easing - GSAP easing string or bezier array
+ * @returns {string|Array} Motion.js compatible easing
+ *
+ * Valid Motion.js easings:
+ * - "linear"
+ * - "easeIn"
+ * - "easeInOut"
+ * - "easeOut"
+ * - "circIn"
+ * - "circInOut"
+ * - "circOut"
+ * - "backIn"
+ * - "backInOut"
+ * - "backOut"
+ * - "anticipate"
+ * - Bezier arrays: [x1, y1, x2, y2]
+ */
+export function convertEasing(easing) {
+  // If already an array (bezier), return as-is
+  if (Array.isArray(easing)) {
+    return easing
+  }
+
+  // If not a string, return default
+  if (typeof easing !== 'string') {
+    return 'easeOut'
+  }
+
+  // Already a valid Motion.js easing
+  const validMotionEasings = [
+    'linear',
+    'easeIn',
+    'easeInOut',
+    'easeOut',
+    'circIn',
+    'circInOut',
+    'circOut',
+    'backIn',
+    'backInOut',
+    'backOut',
+    'anticipate',
+  ]
+
+  if (validMotionEasings.includes(easing)) {
+    return easing
+  }
+
+  // Convert GSAP easings to Motion.js equivalents
+  const easingMap = {
+    // Power easings (most common)
+    'power1.in': 'easeIn',
+    'power1.out': 'easeOut',
+    'power1.inOut': 'easeInOut',
+    'power2.in': 'easeIn',
+    'power2.out': 'easeOut',
+    'power2.inOut': 'easeInOut',
+    'power3.in': 'easeIn',
+    'power3.out': 'easeOut',
+    'power3.inOut': 'easeInOut',
+    'power4.in': 'easeIn',
+    'power4.out': 'easeOut',
+    'power4.inOut': 'easeInOut',
+
+    // Sine easings
+    'sine.in': 'easeIn',
+    'sine.out': 'easeOut',
+    'sine.inOut': 'easeInOut',
+
+    // Expo easings
+    'expo.in': 'easeIn',
+    'expo.out': 'easeOut',
+    'expo.inOut': 'easeInOut',
+
+    // Circ easings (Motion.js has these!)
+    'circ.in': 'circIn',
+    'circ.out': 'circOut',
+    'circ.inOut': 'circInOut',
+
+    // Back easings (Motion.js has these!)
+    'back.in': 'backIn',
+    'back.out': 'backOut',
+    'back.inOut': 'backInOut',
+
+    // Elastic and bounce - no direct equivalent, use anticipate or backOut
+    'elastic.in': 'backIn',
+    'elastic.out': 'backOut',
+    'elastic.inOut': 'backInOut',
+    'bounce.in': 'backIn',
+    'bounce.out': 'anticipate',
+    'bounce.inOut': 'backInOut',
+
+    // Common aliases
+    none: 'linear',
+    'linear': 'linear',
+  }
+
+  // Try to find a mapping
+  const converted = easingMap[easing.toLowerCase()]
+
+  if (converted) {
+    return converted
+  }
+
+  // If no mapping found, log warning and return default
+  console.warn(
+    `[Motion Helpers] Unknown easing type "${easing}", using "easeOut" as fallback`
+  )
+  return 'easeOut'
+}