@egjs/flicking/dist/control/Control.d.ts

Everyday 30 million people experience. It's reliable, flexible and extendable carousel.

import { OnRelease } from "@egjs/axes";
import { DIRECTION } from "../constants/values";
import AxesController from "../control/AxesController";
import Panel from "../core/panel/Panel";
import Flicking from "../Flicking";
import { ValueOf } from "../types/internal";
/**
 * Parameters for {@link Control.moveToPanel}
 * @public
 */
export interface MoveToPanelParams {
    /** Duration of the animation (unit: ms) */
    duration: number;
    /** Direction to move, only available in the {@link Flicking.circular | circular} mode */
    direction?: ValueOf<typeof DIRECTION>;
    /** {@link https://naver.github.io/egjs-axes/docs/api/Axes#event-release | release} event of {@link https://naver.github.io/egjs-axes/ | Axes} */
    axesEvent?: OnRelease;
}
/**
 * A component that manages inputs and animation of Flicking
 * @public
 */
declare abstract class Control {
    protected _flicking: Flicking | null;
    protected _controller: AxesController;
    protected _activePanel: Panel | null;
    protected _nextPanel: Panel | null;
    /**
     * A controller that handles the {@link https://naver.github.io/egjs-axes/ | @egjs/axes} events
     * @readonly
     */
    get controller(): AxesController;
    /**
     * Index number of the {@link Flicking.currentPanel | currentPanel}
     * @defaultValue 0
     * @readonly
     */
    get activeIndex(): number;
    /**
     * An active panel
     * @readonly
     */
    get activePanel(): Panel | null;
    /**
     * Whether Flicking's animating
     * @readonly
     */
    get animating(): boolean;
    /**
     * Whether user is clicking or touching
     * @readonly
     */
    get holding(): boolean;
    constructor();
    /**
     * Move {@link Camera} to the given position
     * @param position - The target position to move
     * @param duration - Duration of the panel movement animation (unit: ms)
     * @param axesEvent - {@link https://naver.github.io/egjs-axes/docs/api/Axes#event-release | release} event of {@link https://naver.github.io/egjs-axes/ | Axes}
     * @fires {@link MovementEvents}
     * @throws {@link MovementErrors}
     * @returns A Promise which will be resolved after reaching the target position
     */
    abstract moveToPosition(position: number, duration: number, axesEvent?: OnRelease): Promise<void>;
    /**
     * Initialize Control
     * @remarks
     * This method is called automatically during {@link Flicking.init}. It initializes the internal controller.
     * @param flicking - An instance of {@link Flicking}
     * @returns The current instance for method chaining
     */
    init(flicking: Flicking): this;
    /**
     * Destroy Control and return to initial state
     * @remarks
     * This method destroys the internal controller and resets all internal values.
     */
    destroy(): void;
    /**
     * Enable input from the user (mouse/touch)
     * @remarks
     * This is a shorthand for `Flicking.enableInput`.
     * @returns The current instance for method chaining
     */
    enable(): this;
    /**
     * Disable input from the user (mouse/touch)
     * @remarks
     * This is a shorthand for `Flicking.disableInput`.
     * @returns The current instance for method chaining
     */
    disable(): this;
    /**
     * Releases ongoing user input (mouse/touch)
     * @remarks
     * This method immediately releases the user's input, similar to the user lifting their finger.
     * @returns The current instance for method chaining
     */
    release(): this;
    /**
     * Change the destination and duration of the animation currently playing
     * @remarks
     * This method does nothing if no animation is currently playing.
     * @param panel - The target panel to move
     * @param duration - Duration of the animation (unit: ms)
     * @param direction - Direction to move, only available in the {@link Flicking.circular | circular} mode
     * @throws {@link AnimationUpdateErrors}
     * @returns The current instance for method chaining
     */
    updateAnimation(panel: Panel, duration?: number, direction?: ValueOf<typeof DIRECTION>): this;
    /**
     * Stops the animation currently playing
     * @remarks
     * This method does nothing if no animation is currently playing.
     * @returns The current instance for method chaining
     */
    stopAnimation(): this;
    /**
     * Update position after resizing
     * @remarks
     * This method moves the camera to the active panel's position after a resize operation.
     * @param progressInPanel - Previous camera's progress in active panel before resize
     * @throws {@link InitializationErrors}
     */
    updatePosition(progressInPanel: number): void;
    /**
     * Update {@link Control.controller | controller}'s state
     * @remarks
     * This method synchronizes the controller state with the current camera parameters.
     * @returns The current instance for method chaining
     */
    updateInput(): this;
    /**
     * Reset {@link Control.activePanel | activePanel} to `null`
     * @remarks
     * This method is called when the active panel is removed from the renderer.
     * @returns The current instance for method chaining
     */
    resetActive(): this;
    /**
     * Move {@link Camera} to the given panel
     * @param panel - The target panel to move
     * @param options - {@link MoveToPanelParams}
     * @fires {@link MovementEvents}
     * @throws {@link MovementErrors}
     * @returns A Promise which will be resolved after reaching the target panel
     */
    moveToPanel(panel: Panel, { duration, direction, axesEvent }: MoveToPanelParams): Promise<void>;
    /**
     * @internal
     * @privateRemarks
     * Sets the active panel and triggers {@link ChangedEvent} or {@link RestoredEvent} based on whether the panel changed.
     */
    setActive(newActivePanel: Panel, prevActivePanel: Panel | null, isTrusted: boolean): void;
    /**
     * @internal
     * @privateRemarks
     * Copies internal state from another Control instance. Used when changing moveType option.
     */
    copy(control: Control): void;
    /**
     * @internal
     * @privateRemarks
     * Triggers {@link WillChangeEvent} or {@link WillRestoreEvent} based on whether the target panel differs from the active panel.
     */
    protected _triggerIndexChangeEvent(panel: Panel, position: number, axesEvent?: OnRelease, direction?: ValueOf<typeof DIRECTION>): void;
    /**
     * @internal
     * @privateRemarks
     * Animates the camera to the target position and handles animation completion or interruption.
     */
    protected _animateToPosition({ position, duration, newActivePanel, axesEvent }: {
        position: number;
        duration: number;
        newActivePanel: Panel;
        axesEvent?: OnRelease;
    }): Promise<void>;
    /**
     * @internal
     * @privateRemarks
     * Calculates the target position for a panel, considering circular mode and direction constraints.
     */
    private _getPosition;
}
export default Control;