reeller/dist/plugin/DragPlugin.d.ts

Flexible, powerful and modern library for creating the running horizontal blocks effect, also known as ticker or the «marquee effect».

export default class DragPlugin {
    /**
     * @typedef {Object} DragPluginOptions
     * @property {number} [speed] Inertia duration in seconds.
     * @property {number} [multiplier] Drag movement multiplier.
     * @property {number} [threshold] Minimum release velocity in px/s to start inertia.
     * @property {number} [inertiaMultiplier] Inertia distance multiplier.
     * @property {number} [activationDistance] Minimum movement in px before drag starts.
     * @property {number} [maxVelocity] Maximum release velocity in px/s.
     * @property {string} [ease] Timing function.
     * @property {boolean} [changeDirection] Change autoplay direction after drag.
     * @property {'x'|'y'} [axis] Pointer axis used for drag.
     * @property {boolean} [invertAxis] Invert drag direction on the selected axis.
     * @property {string|HTMLElement|null} [target] Drag target element or selector.
     * @property {boolean} [preventDefault] Prevent default pointer behaviour while dragging.
     */
    /**
     * Plugin name.
     *
     * @type {string}
     */
    static pluginName: string;
    /**
     * Default options.
     *
     * @type {DragPluginOptions}
     */
    static defaultOptions: {
        /**
         * Inertia duration in seconds.
         */
        speed?: number;
        /**
         * Drag movement multiplier.
         */
        multiplier?: number;
        /**
         * Minimum release velocity in px/s to start inertia.
         */
        threshold?: number;
        /**
         * Inertia distance multiplier.
         */
        inertiaMultiplier?: number;
        /**
         * Minimum movement in px before drag starts.
         */
        activationDistance?: number;
        /**
         * Maximum release velocity in px/s.
         */
        maxVelocity?: number;
        /**
         * Timing function.
         */
        ease?: string;
        /**
         * Change autoplay direction after drag.
         */
        changeDirection?: boolean;
        /**
         * Pointer axis used for drag.
         */
        axis?: 'x' | 'y';
        /**
         * Invert drag direction on the selected axis.
         */
        invertAxis?: boolean;
        /**
         * Drag target element or selector.
         */
        target?: string | HTMLElement | null;
        /**
         * Prevent default pointer behaviour while dragging.
         */
        preventDefault?: boolean;
    };
    /**
     * Reeller DragPlugin.
     *
     * @param {Reeller} reeller Reeller instance.
     * @param {object} options Options.
     */
    constructor(reeller: Reeller, options: object);
    /** @type {DragPluginOptions} **/
    options: {
        /**
         * Inertia duration in seconds.
         */
        speed?: number;
        /**
         * Drag movement multiplier.
         */
        multiplier?: number;
        /**
         * Minimum release velocity in px/s to start inertia.
         */
        threshold?: number;
        /**
         * Inertia distance multiplier.
         */
        inertiaMultiplier?: number;
        /**
         * Minimum movement in px before drag starts.
         */
        activationDistance?: number;
        /**
         * Maximum release velocity in px/s.
         */
        maxVelocity?: number;
        /**
         * Timing function.
         */
        ease?: string;
        /**
         * Change autoplay direction after drag.
         */
        changeDirection?: boolean;
        /**
         * Pointer axis used for drag.
         */
        axis?: 'x' | 'y';
        /**
         * Invert drag direction on the selected axis.
         */
        invertAxis?: boolean;
        /**
         * Drag target element or selector.
         */
        target?: string | HTMLElement | null;
        /**
         * Prevent default pointer behaviour while dragging.
         */
        preventDefault?: boolean;
    };
    reeller: Reeller;
    gsap: any;
    tl: any;
    pointerId: any;
    dragging: boolean;
    samples: any[];
    basePaused: any;
    dragDirection: number;
    nextReversed: boolean;
    /**
     * Return current movement width for one cycle.
     *
     * @return {number} Movement width in pixels.
     */
    getTrackWidth(): number;
    /**
     * Move timeline by drag delta.
     *
     * @param {number} delta Movement delta in pixels.
     */
    applyDelta(delta: number): void;
    /**
     * Return pointer position for active drag axis.
     *
     * @param {PointerEvent} event Pointer event.
     * @return {number} Pointer position.
     */
    getPointerPosition(event: PointerEvent): number;
    /**
     * Save point for release velocity calculation.
     *
     * @param {number} position Pointer position.
     */
    pushSample(position: number): void;
    /**
     * Return release velocity in px/s.
     *
     * @return {number} Release velocity in px/s.
     */
    getVelocity(): number;
    /**
     * Save autoplay direction to apply after drag.
     *
     * @param {number} velocity Release velocity in px/s.
     */
    saveDirection(velocity: number): void;
    /**
     * Start drag interaction and pause autoplay.
     */
    beginDrag(): void;
    /**
     * Restore base playback state.
     */
    restorePlayback(): void;
    /**
     * Start inertia tween.
     *
     * @param {number} velocity Release velocity in px/s.
     */
    startInertia(velocity: number): void;
    inertiaTween: any;
    /**
     * Stop current inertia tween.
     */
    stopInertia(): void;
    /**
     * Reset pointer bookkeeping.
     */
    resetPointer(): void;
    startPos: number;
    lastPos: number;
    /**
     * Initialize plugin.
     */
    init(): void;
    target: any;
    onPointerDown: (event: any) => void;
    onPointerMove: (event: any) => void;
    onPointerUp: (event: any) => void;
    onPointerCancel: (event: any) => void;
    /**
     * Destroy plugin.
     */
    destroy(): void;
}
//# sourceMappingURL=DragPlugin.d.ts.map