Skip to main content

Control

A component that manages inputs and animation of Flicking

Constructor​

constructor();

Constructs a new instance of the Control class

Properties​

_activePanel​

Type: Panel | null

_controller​

Type: AxesController

_flicking​

Type: Flicking | null

_nextPanel​

Type: Panel | null

activeIndex​

Type: number

Index number of the currentPanel

Default: 0

This property is read-only.

activePanel​

Type: Panel | null

An active panel

This property is read-only.

animating​

Type: boolean

Whether Flicking's animating

This property is read-only.

controller​

Type: AxesController

A controller that handles the @egjs/axes events

This property is read-only.

holding​

Type: boolean

Whether user is clicking or touching

This property is read-only.

Methods​

destroy​

destroy(): void

Destroy Control and return to initial state

Remarks: This method destroys the internal controller and resets all internal values.

disable​

disable(): this

Disable input from the user (mouse/touch)

Returns: The current instance for method chaining

Remarks: This is a shorthand for Flicking.disableInput.

enable​

enable(): this

Enable input from the user (mouse/touch)

Returns: The current instance for method chaining

Remarks: This is a shorthand for Flicking.enableInput.

init​

init(flicking: Flicking): this

Initialize Control

Parameters:

  • flicking (Flicking) - An instance of Flicking

Returns: The current instance for method chaining

Remarks: This method is called automatically during init. It initializes the internal controller.

moveToPanel​

moveToPanel(panel: Panel, { duration, direction, axesEvent }: MoveToPanelParams): Promise<void>

Move Camera to the given panel

Parameters:

  • panel (Panel) - The target panel to move

  • { duration, direction, axesEvent } (MoveToPanelParams) -

Returns: A Promise which will be resolved after reaching the target panel

Throws:

Fires:

moveToPosition​

abstract moveToPosition(position: number, duration: number, axesEvent?: OnRelease): Promise<void>

Move Camera to the given position

Parameters:

  • position (number) - The target position to move

  • duration (number) - Duration of the panel movement animation (unit: ms)

  • axesEvent (OnRelease) - release event of Axes

Returns: A Promise which will be resolved after reaching the target position

Throws:

Fires:

release​

release(): this

Releases ongoing user input (mouse/touch)

Returns: The current instance for method chaining

Remarks: This method immediately releases the user's input, similar to the user lifting their finger.

resetActive​

resetActive(): this

Reset activePanel to null

Returns: The current instance for method chaining

Remarks: This method is called when the active panel is removed from the renderer.

stopAnimation​

stopAnimation(): this

Stops the animation currently playing

Returns: The current instance for method chaining

Remarks: This method does nothing if no animation is currently playing.

updateAnimation​

updateAnimation(panel: Panel, duration?: number, direction?: ValueOf<typeof DIRECTION>): this

Change the destination and duration of the animation currently playing

Parameters:

  • panel (Panel) - The target panel to move

  • duration (number) - Duration of the animation (unit: ms)

  • direction (ValueOf<typeof DIRECTION>) - Direction to move, only available in the circular mode

Returns: The current instance for method chaining

Remarks: This method does nothing if no animation is currently playing.

Throws:

updateInput​

updateInput(): this

Update controller's state

Returns: The current instance for method chaining

Remarks: This method synchronizes the controller state with the current camera parameters.

updatePosition​

updatePosition(progressInPanel: number): void

Update position after resizing

Parameters:

  • progressInPanel (number) - Previous camera's progress in active panel before resize

Remarks: This method moves the camera to the active panel's position after a resize operation.

Throws: