@brandocms/jupiter 4.0.0-beta.1 → 5.0.0-beta.1

package/src/modules/Toggler/index.js

@@ -1,27 +1,50 @@
-import { gsap } from 'gsap/all'
+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 {
   /**
    * 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) {
+  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}"]`
-      )
+      this.content = Dom.all(this.el, `[data-toggle-content="${this.triggerTarget}"]`)
     } else {
       this.content = Dom.all(this.el, '[data-toggle-content]')
     }
@@ -29,48 +52,182 @@ export default class Toggler {
     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',
-        stagger: 0.1,
-        onComplete: () => {
-          this.content.forEach((el) => el.removeAttribute('data-toggle-hidden'))
-          this.content.forEach((el) =>
-            el.setAttribute('data-toggle-visible', '')
-          )
-        },
+      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.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
+          })
+        )
+      })
+
+      // 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) =>
+          this.content.forEach(el => {
+            el.style.display = 'none'
+            el.style.removeProperty('height')
             el.removeAttribute('data-toggle-visible')
-          )
-          this.content.forEach((el) =>
             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
+            })
           )
-        },
-      })
+        })
 
-      gsap.to(this.content, { height: 0, ease: 'power3.out', stagger: 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())
+            }
+          })
+        }
+      }
+    })
   }
 
   /**

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'
+}

package/types/index.d.ts

@@ -1,35 +1,6 @@
-import Application from './modules/Application';
-import Breakpoints from './modules/Breakpoints';
-import Cookies from './modules/Cookies';
-import CoverOverlay from './modules/CoverOverlay';
-import Dataloader from './modules/Dataloader';
-import Dom from './modules/Dom';
-import Dropdown from './modules/Dropdown';
-import EqualHeightElements from './modules/EqualHeightElements';
-import EqualHeightImages from './modules/EqualHeightImages';
-import * as Events from './events';
-import FixedHeader from './modules/FixedHeader';
-import FooterReveal from './modules/FooterReveal';
-import Parallax from './modules/Parallax';
-import HeroSlider from './modules/HeroSlider';
-import HeroVideo from './modules/HeroVideo';
-import Lazyload from './modules/Lazyload';
-import Lightbox from './modules/Lightbox';
-import Links from './modules/Links';
-import Marquee from './modules/Marquee';
-import MobileMenu from './modules/MobileMenu';
-import Moonwalk from './modules/Moonwalk';
-import Popover from './modules/Popover';
-import Popup from './modules/Popup';
-import ScrollSpy from './modules/ScrollSpy';
-import StackedBoxes from './modules/StackedBoxes';
-import StickyHeader from './modules/StickyHeader';
-import Toggler from './modules/Toggler';
-import Typography from './modules/Typography';
 import imageIsLoaded from './utils/imageIsLoaded';
 import imagesAreLoaded from './utils/imagesAreLoaded';
 import loadScript from './utils/loadScript';
 import prefersReducedMotion from './utils/prefersReducedMotion';
 import rafCallback from './utils/rafCallback';
-import Hammer from '@egjs/hammerjs';
-export { Application, Breakpoints, Cookies, CoverOverlay, Dataloader, Dom, Draggable, Dropdown, EqualHeightElements, EqualHeightImages, Events, FixedHeader, FooterReveal, Parallax, HeroSlider, HeroVideo, Lazyload, Lightbox, Links, Marquee, MobileMenu, Moonwalk, Popover, Popup, ScrollSpy, StackedBoxes, StickyHeader, Toggler, Typography, imageIsLoaded, imagesAreLoaded, loadScript, prefersReducedMotion, rafCallback, _defaultsDeep, gsap, CSSPlugin, ScrollToPlugin, ScrollTrigger, Hammer };
+export { Application, Breakpoints, Cookies, CoverOverlay, Dataloader, Dom, DoubleHeader, Draggable, Dropdown, EqualHeightElements, EqualHeightImages, Events, FixedHeader, FooterReveal, Parallax, HeroSlider, HeroVideo, Lazyload, Lightbox, Links, Looper, Marquee, MobileMenu, Moonwalk, Popover, Popup, ScrollSpy, StackedBoxes, StickyHeader, Toggler, Typography, imageIsLoaded, imagesAreLoaded, loadScript, prefersReducedMotion, rafCallback, _defaultsDeep, gsap, CSSPlugin, ScrollToPlugin, ScrollTrigger, SplitText, InertiaPlugin };

package/types/modules/Application/index.d.ts

@@ -18,16 +18,19 @@ export default class Application {
     position: {
         top: number;
         left: number;
+        lastTop: number;
+        lastLeft: number;
     };
     state: {
         revealed: boolean;
         forcedScroll: boolean;
+        scrollDirection: any;
     };
     opts: any;
     focusableSelectors: any;
-    featureTests: FeatureTests;
-    breakpoints: Breakpoints;
-    fontLoader: Fontloader;
+    featureTests: any;
+    breakpoints: any;
+    fontLoader: any;
     fader: any;
     callbacks: {};
     SCROLL_LOCKED: boolean;
@@ -163,6 +166,3 @@ export default class Application {
      */
     getFocusableSelectors(): any;
 }
-import FeatureTests from '../FeatureTests';
-import Breakpoints from '../Breakpoints';
-import Fontloader from '../Fontloader';

package/types/modules/Breakpoints/index.d.ts

@@ -11,6 +11,8 @@ export default class Breakpoints {
     app: any;
     mediaQueries: {};
     opts: any;
+    currentBreakpoint: string;
+    initialized: boolean;
     initialize(reveal?: boolean): void;
     getCurrentBreakpoint(): {
         key: string;

package/types/modules/Dataloader/index.d.ts

@@ -4,16 +4,18 @@ export default class Dataloader {
     status: string;
     app: any;
     $el: any;
+    id: any;
     $canvasEl: any;
     opts: any;
     debounce(func: any, delay?: number): (...args: any[]) => void;
     updateBaseURL(url: any): void;
     baseURL: any;
+    setInitialParams(): void;
     initialize(): void;
-    $paramEls: any[];
+    $paramEls: any;
+    urlSync: DataloaderUrlSync;
     $moreBtn: any;
     $filterInput: any;
-    id: any;
     onFilterInput(e: any): void;
     onMore(e: any): void;
     onParam(e: any): void;
@@ -33,3 +35,4 @@ export default class Dataloader {
      */
     updateButton(): void;
 }
+import DataloaderUrlSync from './url-sync';