@egjs/flicking
Version:
Everyday 30 million people experience. It's reliable, flexible and extendable carousel.
187 lines (186 loc) • 6.43 kB
TypeScript
import Axes, { OnRelease, PanInput } from "@egjs/axes";
import Flicking from "../Flicking";
import { ControlParams } from "../types/external";
import StateMachine from "./StateMachine";
import State from "./states/State";
/**
* A controller that handles the {@link https://naver.github.io/egjs-axes/ | @egjs/axes} events
* @internal
*/
declare class AxesController {
private _flicking;
private _axes;
private _panInput;
private _stateMachine;
private _animatingContext;
private _dragged;
/**
* An {@link https://naver.github.io/egjs-axes/docs/api/Axes | Axes} instance
* @see https://naver.github.io/egjs-axes/docs/api/Axes
* @readonly
*/
get axes(): Axes | null;
/**
* An {@link https://naver.github.io/egjs-axes/docs/api/PanInput | PanInput} instance
* @see https://naver.github.io/egjs-axes/docs/api/PanInput
* @readonly
*/
get panInput(): PanInput | null;
/**
* @internal
*/
get stateMachine(): StateMachine;
/**
* A activated {@link State} that shows the current status of the user input or the animation
*/
get state(): State;
/**
* A context of the current animation playing
* @readonly
*/
get animatingContext(): {
start: number;
end: number;
offset: number;
};
/**
* A current control parameters of the Axes instance
*/
get controlParams(): ControlParams;
/**
* A Boolean indicating whether the user input is enabled
* @readonly
*/
get enabled(): boolean;
/**
* Current position value in {@link https://naver.github.io/egjs-axes/docs/api/Axes | Axes} instance
* @readonly
*/
get position(): number;
/**
* Current range value in {@link https://naver.github.io/egjs-axes/docs/api/Axes | Axes} instance
* @readonly
*/
get range(): number[];
/**
* Actual bounce size(px)
* @readonly
*/
get bounce(): number[] | undefined;
constructor();
/**
* Initialize AxesController
* @remarks
* This method creates and configures the Axes and PanInput instances.
* @param flicking - An instance of {@link Flicking}
* @returns The current instance for method chaining
*/
init(flicking: Flicking): this;
/**
* Destroy AxesController and return to initial state
* @remarks
* This method destroys the Axes and PanInput instances and removes all event handlers.
*/
destroy(): void;
/**
* Enable input from the user (mouse/touch)
* @remarks
* Enables the PanInput to receive user interactions.
* @returns The current instance for method chaining
*/
enable(): this;
/**
* Disable input from the user (mouse/touch)
* @remarks
* Disables the PanInput to ignore user interactions.
* @returns The current instance for method chaining
*/
disable(): this;
/**
* Releases ongoing user input (mouse/touch)
* @remarks
* Immediately releases the PanInput, simulating 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 updates the Axes animation target position and optionally the duration.
* @param position - A position to move
* @param duration - Duration of the animation (unit: ms)
* @returns The current instance for method chaining
*/
updateAnimation(position: number, duration?: number): this;
/**
* Stops the animation currently playing
* @remarks
* This method immediately stops the Axes animation at the current position.
* @returns The current instance for method chaining
*/
stopAnimation(): this;
/**
* Update {@link https://naver.github.io/egjs-axes/ | @egjs/axes}'s state
* @remarks
* This method synchronizes the Axes state with the given control parameters.
* @param controlParams - Control parameters
* @throws {@link InitializationErrors}
* @returns The current instance for method chaining
*/
update(controlParams: ControlParams): this;
/**
* Attach a handler to the camera element to prevent click events during animation
* @remarks
* This is used when {@link FlickingOptions.preventClickOnDrag | preventClickOnDrag} is enabled.
* @returns The current instance for method chaining
*/
addPreventClickHandler(): this;
/**
* Detach a handler to the camera element to prevent click events during animation
* @remarks
* This is used when {@link FlickingOptions.preventClickOnDrag | preventClickOnDrag} is disabled.
* @returns The current instance for method chaining
*/
removePreventClickHandler(): this;
/**
* Run Axes's {@link https://naver.github.io/egjs-axes/docs/api/Axes#setTo | setTo} using the given position
* @remarks
* If the target position equals the current position, the promise resolves immediately without animation.
* @param position - A position to move
* @param duration - Duration of the animation (unit: ms)
* @param axesEvent - If provided, it'll use its {@link https://naver.github.io/egjs-axes/docs/api/Axes#setTo | setTo} method instead
* @throws {@link MovementErrors}
* @returns A Promise which will be resolved after reaching the target position
*/
animateTo(position: number, duration: number, axesEvent?: OnRelease): Promise<void>;
/**
* Returns the current axes position
*/
getCurrentPosition(): number;
updateDirection(): void;
/**
* @internal
* @privateRemarks
* Resets all internal values to their defaults. Called during construction and destruction.
*/
private _resetInternalValues;
/**
* @internal
* @privateRemarks
* Handles the Axes hold event to reset the dragged state.
*/
private _onAxesHold;
/**
* @internal
* @privateRemarks
* Handles the Axes change event to update the dragged state.
*/
private _onAxesChange;
/**
* @internal
* @privateRemarks
* Prevents click events when the user has dragged. Used for {@link FlickingOptions.preventClickOnDrag}.
*/
private _preventClickWhenDragged;
}
export default AxesController;