vevet/lib/types/components/InView/index.d.ts

Vevet is a JavaScript library for creative development that simplifies crafting rich interactions like split text animations, carousels, marquees, preloading, and more.

import { Module, TModuleOnCallbacksProps } from '../../base/Module';
import { TRequiredProps } from '../../internal/requiredProps';
import { IInViewCallbacksMap, IInViewElement, IInViewMutableProps, IInViewStaticProps } from './types';
export * from './types';
type TC = IInViewCallbacksMap;
type TS = IInViewStaticProps;
type TM = IInViewMutableProps;
/**
 * InView is a visibility detection utility that leverages the `IntersectionObserver` API to monitor when elements enter or leave the viewport.
 * It provides customizable options for triggering events, delaying visibility changes, and dynamically adding CSS classes to elements based on their visibility state.
 *
 * [Documentation](https://vevetjs.com/docs/InView)
 *
 * @group Components
 */
export declare class InView extends Module<TC, TS, TM> {
    /**
     * Returns default static properties.
     */
    _getStatic(): TRequiredProps<TS>;
    /**
     * Returns default mutable properties.
     */
    _getMutable(): TRequiredProps<TM>;
    /** Intersection observer for detecting elements entering the viewport. */
    private _in?;
    /** Intersection observer for detecting elements leaving the viewport. */
    private _out?;
    /** Tracks whether this is the first time the elements are being observed. */
    private _isInitialStart;
    /** Stores the elements being observed. */
    private _elements;
    /** Detects if the container is RTL */
    private _isRtl;
    /**
     * Initializes the `InView` module.
     */
    constructor(props?: TS & TM & TModuleOnCallbacksProps<TC, InView>, onCallbacks?: TModuleOnCallbacksProps<TC, InView>);
    /**
     * Indicates whether the observation has started for the first time.
     */
    get isInitialStart(): boolean;
    /**
     * Returns all elements currently being observed.
     */
    get elements(): IInViewElement[];
    /**
     * Handles property mutations and updates observation events accordingly.
     */
    protected _handleProps(props: TM): void;
    /**
     * Configures or reconfigures the view observation events.
     */
    private _setup;
    /**
     * Removes all observation events and disconnects observers.
     */
    private _removeViewEvents;
    /**
     * Sets up `IntersectionObserver` instances to detect visibility changes.
     */
    private _setViewEvents;
    /**
     * Handles elements entering the viewport.
     */
    private _handleIn;
    /**
     * Handles elements leaving the viewport.
     */
    private _handleOut;
    /**
     * Toggles visibility classes and emits events for visibility changes.
     */
    private _handleInOut;
    /** Toggles visibility classes */
    private _toggleClassname;
    /** Gets element direction */
    private _getDirection;
    /**
     * Calculates the delay before triggering an element's visibility event.
     */
    private _getDelay;
    /**
     * Registers an element for visibility observation.
     *
     * If the element has a `data-in-view-class` attribute, the specified class will be applied upon entering the viewport.
     *
     * @returns A function to stop observing the element.
     */
    addElement(element: Element): () => void;
    /**
     * Removes an element from observation, preventing further visibility tracking.
     */
    removeElement(element: Element): void;
    /**
     * Cleans up the module and disconnects all observers and listeners.
     */
    protected _destroy(): void;
}
//# sourceMappingURL=index.d.ts.map