Camera

class Camera

A component that manages actual movement inside the viewport

Properties

Methods

element
children
position
alignPosition
offset
circularEnabled
mode
range
rangeDiff
visiblePanels
visibleRange
anchorPoints
controlParams
atEdge
size
progress
align

init
destroy
lookAt
getPrevAnchor
getNextAnchor
getProgressInPanel
findAnchorIncludePosition
findNearestAnchor
findActiveAnchor
clampToReachablePosition
canReach
canSee
updateRange
updateAlignPos
updateAnchors
updateAdaptiveHeight
updateOffset
resetNeedPanelHistory
applyTransform

Constructor

new Camera()

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
	Partial<CameraOptions>	✔️	{}

Properties

element

readonly

The camera element(.flicking-camera)

Type: HTMLElement

children

readonly

An array of the child elements of the camera element(.flicking-camera)

Type: Array<HTMLElement>

position

readonly

Current position of the camera

Type: number

alignPosition

readonly

Align position inside the viewport where Panel's alignPosition should be located at

Type: number

offset

readonly

Position offset, used for the renderOnlyVisible option

Type: number

Default: 0

circularEnabled

readonly

Whether the circular option is enabled.
The circular option can't be enabled when sum of the panel sizes are too small.

Type: boolean

Default: false

mode

readonly

A current camera mode

Type: CameraMode

range

readonly

A range that Camera's position can reach

Type: object

PROPERTY	TYPE	DESCRIPTION
min	number	A minimum position
max	number	A maximum position

rangeDiff

readonly

A difference between Camera's minimum and maximum position that can reach

Type: number

visiblePanels

readonly

An array of visible panels from the current position

Type: Array<Panel>

visibleRange

readonly

A range of the visible area from the current position

Type: object

PROPERTY	TYPE	DESCRIPTION
min	number	A minimum position
min	number	A maximum position

anchorPoints

readonly

An array of AnchorPoints that Camera can be stopped at

Type: Array<AnchorPoint>

controlParams

readonly

A current parameters of the Camera for updating AxesController

Type: ControlParams

atEdge

readonly

A Boolean value indicating whether Camera's over the minimum or maximum position reachable

Type: boolean

size

readonly

Return the size of the viewport

Type: number

progress

readonly

Return the camera's position progress from the first panel to last panel
Range is from 0 to last panel's index

Type: number

align

A value indicating where the alignPosition should be located at inside the viewport element

Type: ALIGN | string | number

Methods

init

Initialize Camera

Returns: this

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
flicking	Flicking			An instance of Flicking

Throws: FlickingError

VAL_MUST_NOT_NULL If the camera element(.flicking-camera) does not exist inside viewport element

destroy

Destroy Camera and return to initial state

Returns: void

lookAt

Move to the given position and apply CSS transform

Returns: this

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
pos	number			A new position

Throws: FlickingError

NOT_ATTACHED_TO_FLICKING When init is not called before

getPrevAnchor

Return a previous AnchorPoint of given AnchorPoint
If it does not exist, return null instead

Returns: AnchorPoint | null

• The previous AnchorPoint

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
anchor	AnchorPoint			A reference AnchorPoint

getNextAnchor

Return a next AnchorPoint of given AnchorPoint
If it does not exist, return null instead

Returns: AnchorPoint | null

• The next AnchorPoint

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
anchor	AnchorPoint			A reference AnchorPoint

getProgressInPanel

Return the camera's position progress in the panel below
Value is from 0 to 1 when the camera's inside panel
Value can be lower than 0 or bigger than 1 when it's in the margin area

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
panel	Panel

findAnchorIncludePosition

Return AnchorPoint that includes given position
If there's no AnchorPoint that includes the given position, return null instead

Returns: AnchorPoint | null

• The AnchorPoint that includes the given position

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
position	number			A position to check

findNearestAnchor

Return AnchorPoint nearest to given position
If there're no AnchorPoints, return null instead

Returns: AnchorPoint | null

• The AnchorPoint nearest to the given position

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
position	number			A position to check

findActiveAnchor

Return AnchorPoint that matches Flicking#currentPanel

Returns: AnchorPoint | null

clampToReachablePosition

Clamp the given position between camera's range

Returns: number

• A clamped position

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
position	number			A position to clamp

canReach

Check whether the given panel is inside of the Camera's range

Returns: boolean

• Whether the panel's inside Camera's range

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
panel	Panel			An instance of Panel to check

canSee

Check whether the given panel element is visible at the current position

Returns: boolean

• Whether the panel element is visible at the current position

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
panel	Panel			An instance of Panel to check

updateRange

Update range of Camera

Returns: this

Throws: FlickingError

NOT_ATTACHED_TO_FLICKING When init is not called before

updateAlignPos

Update Camera's alignPosition

Returns: this

updateAnchors

Update Camera's anchorPoints

Returns: this

Throws: FlickingError

NOT_ATTACHED_TO_FLICKING When init is not called before

updateAdaptiveHeight

Update Viewport's height to active panel's height

Returns: this

Throws: FlickingError

NOT_ATTACHED_TO_FLICKING When init is not called before

updateOffset

Update current offset of the camera

Returns: this

resetNeedPanelHistory

Reset the history of needPanel events so it can be triggered again

Returns: this

applyTransform

Apply "transform" style with the current position to camera element

Returns: this