@brandocms/jupiter 3.55.0 → 4.0.0-beta.2

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

@@ -0,0 +1,127 @@
+/**
+ * Options for configuring the Looper module
+ */
+export interface LooperOptions {
+  /** Center the loop container. Can be true, false, or a selector string */
+  center?: boolean | string;
+  /** Enable snap-to-item behavior. Can be true, false, or a number for custom snap distance */
+  snap?: boolean | number;
+  /** Enable continuous auto-scrolling */
+  crawl?: boolean;
+  /** Enable infinite looping. If false, creates linear scrolling */
+  loop?: boolean;
+  /** Enable drag interaction with mouse/touch */
+  draggable?: boolean;
+  /** Speed multipliers for different breakpoints */
+  speed?: {
+    sm?: number;
+    lg?: number;
+  };
+  /** Easing configuration for hover interactions */
+  ease?: {
+    mouseOver?: {
+      speed?: number;
+      duration?: number;
+    };
+    mouseOut?: {
+      speed?: number;
+      duration?: number;
+    };
+  };
+  /** CSS selector for looper elements */
+  selector?: string;
+  /** Extra padding on the right side in pixels */
+  paddingRight?: number | string;
+  /** Start in reversed direction */
+  reversed?: boolean;
+}
+
+/**
+ * Loop controller returned by horizontalLoop function
+ */
+export interface LoopController {
+  /** Motion value tracking the current position */
+  position: any;
+  /** Main animation instance */
+  animation: any;
+  /** Array of item elements */
+  items: HTMLElement[];
+  /** Array of snap time positions */
+  times: number[];
+  /** Whether the loop is reversed */
+  isReversed: boolean;
+  /** Whether the loop is in looping mode */
+  isLooping: boolean;
+
+  /** Start/resume the loop animation */
+  play(): void;
+
+  /** Pause the loop animation */
+  pause(): void;
+
+  /** Get the current active item index */
+  current(): number;
+
+  /** Find the closest item index to current position */
+  closestIndex(setCurrent?: boolean): number;
+
+  /** Navigate to the next item */
+  next(vars?: { duration?: number; easing?: string }): any;
+
+  /** Navigate to the previous item */
+  previous(vars?: { duration?: number; easing?: string }): any;
+
+  /** Navigate to a specific item index */
+  toIndex(index: number, vars?: { duration?: number; easing?: string }): any;
+
+  /** Refresh measurements and recalculate (useful after resize) */
+  refresh(deep?: boolean): void;
+
+  /** Clean up and destroy the loop */
+  destroy(): void;
+}
+
+/**
+ * Looper Module
+ * Creates seamless horizontal infinite scrolling carousels with drag interaction,
+ * momentum/inertia, auto-crawl, snap-to-item, and responsive resize handling
+ */
+export default class Looper {
+  /**
+   * Create a new Looper instance
+   * @param app - Jupiter application instance
+   * @param opts - Configuration options
+   */
+  constructor(app: any, opts?: Partial<LooperOptions>);
+
+  /** Configuration options */
+  opts: LooperOptions;
+
+  /** Jupiter application instance */
+  app: any;
+
+  /** Array of active loop controllers */
+  loopers: LoopController[];
+
+  /** Array of pending loopers waiting for initialization */
+  pendingLoopers: any[];
+
+  /** DOM elements matching the selector */
+  looperElements: HTMLElement[];
+
+  /**
+   * Initialize the module and find all looper elements
+   */
+  init(): void;
+
+  /**
+   * Finalize loopers after APPLICATION:REVEALED event
+   * This is when actual measurements and animations are set up
+   */
+  finalizeLoopers(): void;
+
+  /**
+   * Destroy all loopers and clean up
+   */
+  destroy(): void;
+}

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

@@ -0,0 +1,23 @@
+export default class Marquee {
+    constructor(app: any, el: any, opts: any);
+    opts: any;
+    app: any;
+    elements: {};
+    timeline: any;
+    observer: IntersectionObserver;
+    initialize(): void;
+    revealMarquee(e: any): void;
+    updateMarquee(e: any): void;
+    duration: number;
+    clearHolders(): void;
+    killTweens(): void;
+    initializeTween(): void;
+    play(rampUp?: boolean): void;
+    playing: boolean;
+    pause(): void;
+    slowDown(): void;
+    speedUp(): void;
+    setupObserver(): void;
+    fillText(): void;
+    setHeight(): void;
+}

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

@@ -0,0 +1,63 @@
+/**
+ * MobileMenu component for mobile navigation menu
+ */
+export default class MobileMenu {
+    /**
+     * Create a new MobileMenu instance
+     * @param {Object} app - Application instance
+     * @param {MobileMenuOptions} [opts={}] - MobileMenu options
+     */
+    constructor(app: any, opts?: MobileMenuOptions);
+    app: any;
+    opts: any;
+    open: boolean;
+    header: HTMLElement;
+    bg: Element;
+    logo: Element;
+    logoPath: NodeListOf<any>;
+    menuButton: Element;
+    hamburger: Element;
+    hamburgerInner: Element;
+    content: NodeListOf<any>;
+    lis: NodeListOf<any>;
+    nav: HTMLElement;
+    toggleMenu(): void;
+    toggleMenuClosed(): void;
+    toggleMenuOpen(): void;
+    _emitMobileMenuOpenEvent(): void;
+    _emitMobileMenuClosedEvent(): void;
+}
+export type MobileMenuOptions = {
+    /**
+     * - Color for logo when menu is open
+     */
+    logoColor?: string;
+    /**
+     * - Selector for logo SVG paths
+     */
+    logoPathSelector?: string;
+    /**
+     * - Selector for menu content
+     */
+    contentSelector?: string;
+    /**
+     * - Selector for menu items
+     */
+    liSelector?: string;
+    /**
+     * - Color for hamburger icon
+     */
+    hamburgerColor?: string;
+    /**
+     * - Called when window is resized
+     */
+    onResize?: Function | null;
+    /**
+     * - Animation for opening menu
+     */
+    openTween?: Function;
+    /**
+     * - Animation for closing menu
+     */
+    closeTween?: Function;
+};

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

@@ -0,0 +1,322 @@
+/**
+ * Moonwalk animation system for scroll-based reveal animations
+ */
+export default class Moonwalk {
+    /**
+     * @param {Object} app - The application instance
+     * @param {MoonwalkOptions} [opts={}] - Configuration options
+     * @param {HTMLElement} [container=document.body] - Container element
+     */
+    constructor(app: any, opts?: MoonwalkOptions, container?: HTMLElement);
+    app: any;
+    opts: any;
+    initialize(container?: HTMLElement): void;
+    sections: {
+        id: string;
+        el: any;
+        name: any;
+        timeline: any;
+        observer: any;
+        stage: {
+            name: any;
+            running: boolean;
+            firstTween: boolean;
+        };
+        elements: any[];
+    }[];
+    runs: {
+        el: Element;
+        threshold: any;
+        initialize: any;
+        onReady: any;
+        callback: any;
+        onExit: any;
+        repeated: any;
+        rootMargin: any;
+    }[];
+    /**
+     * Add `moonwalk` class to html element to identify ourselves.
+     */
+    addClass(): void;
+    /**
+     * Matching moonwalk elements before the element matching the hash should be set to visible
+     * by setting the `data-moonwalked` attribute on `data-moonwalk` elements and
+     * `data-moonwalk-section-ready` on `data-moonwalk-section` elements.
+     */
+    walkToThisPoint(hash: any): void;
+    /**
+     * Remove all moonwalks. Useful for clients who prefer reduced motion
+     */
+    removeAllWalks(container?: HTMLElement): void;
+    removeFor(container: HTMLElement, selector: any): void;
+    /**
+     * Remove run matching name
+     */
+    removeRun(container: HTMLElement, name: any): void;
+    /**
+     * Remove all runs
+     */
+    removeRuns(container?: HTMLElement): void;
+    /**
+     * Add a random ID to each moonwalk element
+     *
+     * @param {*} section
+     */
+    addIds(section: any): void;
+    /**
+     * Add index to each moonwalk element in `section`
+     *
+     * @param {*} section
+     */
+    addIndexes(section: any): void;
+    /**
+     * Go through each `data-moonwalk-run`, parse children, add IDs/indexes
+     * (if wanted), initialize a new object for each.
+     */
+    initializeRuns(container?: HTMLElement): {
+        el: Element;
+        threshold: any;
+        initialize: any;
+        onReady: any;
+        callback: any;
+        onExit: any;
+        repeated: any;
+        rootMargin: any;
+    }[];
+    /**
+     * Go through each `data-moonwalk-section`, parse children, add IDs/indexes
+     * (if wanted), initialize a new object for each.
+     */
+    initializeSections(container?: HTMLElement): {
+        id: string;
+        el: any;
+        name: any;
+        timeline: any;
+        observer: any;
+        stage: {
+            name: any;
+            running: boolean;
+            firstTween: boolean;
+        };
+        elements: any[];
+    }[];
+    initializeSection(section: any): {
+        id: string;
+        el: any;
+        name: any;
+        timeline: any;
+        observer: any;
+        stage: {
+            name: any;
+            running: boolean;
+            firstTween: boolean;
+        };
+        elements: any[];
+    };
+    /**
+     * Removes `data-moonwalk` from all elements who already have `data-ll-srcset´
+     * Can be used if Moonwalking interferes with custom lazyloading animations
+     */
+    clearLazyloads(container?: HTMLElement): void;
+    /**
+     * Look through section for `data-moonwalk-children` or
+     * `data-moonwalk-children="{walkName}"`, then convert all children to
+     * `data-moonwalk` or `data-moonwalk-{walkName}`
+     *
+     * @param {*} section
+     */
+    parseChildren(section: any): void;
+    /**
+     * Sets all `element`s childrens `data-moonwalk` to `val`
+     *
+     * @param {*} element
+     * @param {*} val
+     */
+    setAttrs(element: any, val: any): any[];
+    /**
+     * If we have advanced sections, either named sections or section stages.
+     * Resets the entry's `from` state, then creates an observer that will
+     * watch this section.
+     *
+     * @param {*} section
+     */
+    setupNamesAndStages(section: any): void;
+    /**
+     * Create and return an observer for `section`
+     *
+     * @param {*} section
+     */
+    sectionObserver(section: any): IntersectionObserver;
+    /**
+     * Order `children` by `data-moonwalk-order`.
+     *
+     * @param {*} children
+     */
+    orderChildren(children: any): any[];
+    onReady(): void;
+    /**
+     * Called on `APPLICATION_READY` event, if `config.fireOnReady`.
+     * Otherwise must be triggered manually
+     */
+    ready(): void;
+    /**
+     * Creates and returns the RUN observer for data-moonwalk-run elements
+     *
+     * @param {*} run
+     * @param {*} rootMargin
+     */
+    runObserver(run: any, rootMargin: any): IntersectionObserver;
+    /**
+     * Creates and returns the standard observer for all moonwalk elements
+     * inside a section.
+     *
+     * @param {*} section
+     * @param {*} rootMargin
+     */
+    observer(section: any, rootMargin: any): IntersectionObserver;
+    /**
+     * The main tween function
+     *
+     * @param {*} section
+     * @param {*} target
+     * @param {*} tweenDuration
+     * @param {*} tweenTransition
+     * @param {*} tweenOverlap
+     * @param {*} alphaTween
+     */
+    tweenJS(section: any, target: any, tweenDuration: any, tweenInterval: any, tweenTransition: any, tweenOverlap: any, alphaTween: any): void;
+    /**
+     * CSS version. Not quite ready yet.
+     *
+     * @param {*} section
+     * @param {*} target
+     * @param {*} duration
+     * @param {*} transition
+     * @param {*} overlap
+     */
+    tweenCSS(section: any, target: any, tweenDuration: any, tweenInterval: any, tweenTransition: any, tweenOverlap: any): void;
+}
+export type MoonwalkTransition = {
+    /**
+     * - Starting properties for the transition
+     */
+    from: any;
+    /**
+     * - Ending properties for the transition
+     */
+    to: any;
+};
+export type MoonwalkWalk = {
+    /**
+     * - Delay before the animation starts
+     */
+    startDelay?: number;
+    /**
+     * - Time between animations in a sequence
+     */
+    interval?: number;
+    /**
+     * - Duration of the animation
+     */
+    duration?: number;
+    /**
+     * - Whether to add a separate opacity tween
+     */
+    alphaTween?: boolean | any;
+    /**
+     * - The transition configuration
+     */
+    transition: MoonwalkTransition;
+    /**
+     * - CSS selector for targeting elements in named sections
+     */
+    sectionTargets?: string;
+};
+export type MoonwalkRun = {
+    /**
+     * - IntersectionObserver threshold
+     */
+    threshold?: number;
+    /**
+     * - Function called when element enters viewport
+     */
+    callback: Function;
+    /**
+     * - Function called when element exits viewport
+     */
+    onExit?: Function;
+    /**
+     * - Whether the run should repeat
+     */
+    repeated?: boolean;
+    /**
+     * - IntersectionObserver rootMargin
+     */
+    rootMargin?: string;
+    /**
+     * - Function called during initialization
+     */
+    initialize?: Function;
+    /**
+     * - Function called when APPLICATION_REVEALED fires, before viewport observers start
+     */
+    onReady?: Function;
+};
+export type MoonwalkOptions = {
+    /**
+     * - Event to trigger animations
+     */
+    on?: string | Function;
+    /**
+     * - Delay before starting animations
+     */
+    initialDelay?: number;
+    /**
+     * - Clear data-ll-srcset attributes
+     */
+    clearLazyload?: boolean;
+    /**
+     * - Remove nested data-moonwalk-section attributes
+     */
+    clearNestedSections?: boolean;
+    /**
+     * - Remove nested data-moonwalk attributes
+     */
+    clearNestedWalks?: boolean;
+    /**
+     * - Disable animations when page loaded via anchor
+     */
+    clearMoonwalkOnAnchors?: boolean;
+    /**
+     * - Warn when run and section on same element
+     */
+    warnRunWithSection?: boolean;
+    /**
+     * - Default IntersectionObserver rootMargin
+     */
+    rootMargin?: string;
+    /**
+     * - Default IntersectionObserver threshold
+     */
+    threshold?: number;
+    /**
+     * - Generate unique IDs for moonwalk elements
+     */
+    uniqueIds?: boolean;
+    /**
+     * - Add index attributes to elements
+     */
+    addIndexes?: boolean;
+    /**
+     * - Run configurations
+     */
+    runs?: {
+        [x: string]: MoonwalkRun;
+    };
+    /**
+     * - Walk configurations
+     */
+    walks: {
+        [x: string]: MoonwalkWalk;
+    };
+};

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

@@ -0,0 +1,71 @@
+/**
+ * Parallax scrolling effect inspired by SimpleParallax.js
+ */
+export default class Parallax {
+    /**
+     * Create a new Parallax instance
+     * @param {Object} app - Application instance
+     * @param {ParallaxOptions} [opts={}] - Parallax options
+     */
+    constructor(app: any, opts?: ParallaxOptions);
+    app: any;
+    opts: any;
+    elements: {};
+    parallaxElements: any[];
+    /**
+     * Handle scroll event to update parallax effect
+     */
+    onScroll(): void;
+    /**
+     * Set up a parallax element with its properties
+     * @param {HTMLElement} el - Element to set up
+     */
+    setupParallaxElement(el: HTMLElement): void;
+    /**
+     * Calculate the transform value based on scroll position
+     * @param {Object} item - Parallax element data
+     * @param {number} scrollPosition - Current scroll position
+     * @returns {Object} Transform and opacity values
+     */
+    calculateTransform(item: any, scrollPosition: number): any;
+    /**
+     * Apply a smooth transition between current and target position
+     * @param {Object} item - Parallax element data
+     * @param {Object} target - Target transform and opacity values
+     */
+    applyTransform(item: any, target: any): void;
+    /**
+     * Destroy the parallax instance and clean up
+     */
+    destroy(): void;
+}
+export type ParallaxOptions = {
+    /**
+     * - Target element selector or element
+     */
+    el?: string | HTMLElement;
+    /**
+     * - Default parallax movement factor
+     */
+    factor?: number;
+    /**
+     * - Whether to fade content while scrolling
+     */
+    fadeContent?: boolean;
+    /**
+     * - Scale factor to apply to parallax images
+     */
+    scale?: number;
+    /**
+     * - Delay factor to smooth the effect
+     */
+    delay?: number;
+    /**
+     * - Direction of parallax effect ('up', 'down', 'left', 'right')
+     */
+    orientation?: string;
+    /**
+     * - Whether to show element overflow
+     */
+    overflow?: boolean;
+};

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

@@ -0,0 +1,29 @@
+export default class Popover {
+    constructor(app: any, trigger: any, opts?: {});
+    app: any;
+    opts: any;
+    trigger: any;
+    position: any;
+    className: string;
+    orderedPositions: string[];
+    currentPosition: any;
+    popover: HTMLDivElement;
+    boundHandleDocumentClick: any;
+    boundHandleScroll: any;
+    handleMouseEnter(e: any): void;
+    handleMouseLeave(e: any): void;
+    handleTouchStart(e: any): void;
+    handleClick(e: any): void;
+    get isVisible(): boolean;
+    show(): void;
+    updatePosition(animate?: boolean): void;
+    hide(): void;
+    toggle(): void;
+    addDocumentClickHandler(): void;
+    removeDocumentClickHandler(): void;
+    handleDocumentClick(e: any): void;
+    closeAllExcept(exceptPopover: any): void;
+    handleScroll(): void;
+    addScrollListener(): void;
+    removeScrollListener(): void;
+}

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

@@ -0,0 +1,76 @@
+/**
+ * Popup component for modal dialogs and popups
+ */
+export default class Popup {
+    /**
+     * 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: any, selector?: string, opts?: PopupOptions);
+    app: any;
+    opts: any;
+    backdrop: HTMLElement;
+    currentPopup: string | HTMLElement;
+    popupKey: string;
+    /**
+     * Bind click handlers to popup triggers and close buttons
+     */
+    bindTriggers(): void;
+    /**
+     * 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: HTMLElement | string): string | 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: string | null): HTMLElement;
+    /**
+     * 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: HTMLElement, target: HTMLElement | string, key?: string | null): void;
+    keyUpListener: any;
+    /**
+     * Close the popup
+     */
+    close(): void;
+    /**
+     * Handle keyup event for Escape key to close popup
+     * @param {KeyboardEvent} e - Keyboard event
+     */
+    onKeyup(e: KeyboardEvent): void;
+}
+export type PopupOptions = {
+    /**
+     * - CSS selector to find popup elements
+     */
+    selector?: string;
+    /**
+     * - Function that determines if popup should be shown on current breakpoint
+     */
+    responsive?: Function;
+    /**
+     * - Called when popup opens
+     */
+    onOpen?: Function;
+    /**
+     * - Called when popup closes
+     */
+    onClose?: Function;
+    /**
+     * - Animation function for opening popup
+     */
+    tweenIn?: Function;
+    /**
+     * - Animation function for closing popup
+     */
+    tweenOut?: Function;
+};