Skip to main content
Version: 4.8.1

Panel

class Panel

A slide data component that holds information of a single HTMLElement

Constructor

new Panel(options, options.index, options.align, options.flicking, options.elementProvider)
PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
optionsobjectAn options object
options.indexnumber✔️An initial index of the panel
options.alignConstants.ALIGN | string | number✔️An initial align value of the panel
options.flickingFlicking✔️A Flicking instance panel's referencing
options.elementProviderFlicking✔️A provider instance that redirects elements

Properties

element

readonly

HTMLElement that panel's referencing

Type: HTMLElement

elementProvider

readonly
⚠️ This member is for internal use only.

index

readonly

Index of the panel

Type: number

position

readonly

Position of the panel, including alignPosition

Type: number

size

readonly

Cached size of the panel element
This is equal to element's offsetWidth if horizontal is true, and offsetHeight else

Type: number

sizeIncludingMargin

readonly

Panel's size including CSS margin
This value includes element's margin left/right if horizontal is true, and margin top/bottom else

Type: number

height

readonly

Height of the panel element

Type: number

margin

readonly

Cached CSS margin value of the panel element

Type: object

PROPERTYTYPEDESCRIPTION
prevnumberCSS margin-left when the horizontal is true, and margin-top else
nextnumberCSS margin-right when the horizontal is true, and margin-bottom else

alignPosition

readonly

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

Type: number

removed

readonly

A value indicating whether the panel's removed

Type: boolean

rendered

readonly

A value indicating whether the panel's element is being rendered on the screen

Type: boolean

loading

readonly

A value indicating whether the panel's image/video is not loaded and waiting for resize

Type: boolean

range

readonly

Panel element's range of the bounding box

Type: object

PROPERTYTYPEDESCRIPTION
minnumberBounding box's left(horizontal: true) / top(horizontal: false)
maxnumberBounding box's right(horizontal: true) / bottom(horizontal: false)

toggled

readonly

A value indicating whether the panel's position is toggled by circular behavior

Type: boolean

toggleDirection

readonly

A direction where the panel's position is toggled

Type: DIRECTION

offset

readonly

Actual position offset determined by Panel#order

Type: number

progress

readonly

Progress of movement between previous or next panel relative to current panel

Type: number

outsetProgress

readonly

Progress of movement between points that panel is completely invisible outside of viewport(prev direction: -1, selected point: 0, next direction: 1)

Type: number

visibleRatio

readonly

Percentage of area where panel is visible in the viewport

Type: number

align

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

Type: Constants.ALIGN | string | number

Methods

markForShow

Mark panel element to be appended on the camera element

⚠️ This function is for internal use only.

markForHide

Mark panel element to be removed from the camera element

⚠️ This function is for internal use only.

resize

Update size of the panel

Returns: this

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
cachedobject✔️Predefined cached size of the panel

setSize

Change panel's size. This will change the actual size of the panel element by changing its CSS width/height property

Returns: this

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
sizeobject✔️New panel size
size.widthnumber | string✔️CSS string or number(in px)
size.heightnumber | string✔️CSS string or number(in px)

contains

Check whether the given element is inside of this panel's element

Returns: boolean

  • A Boolean value indicating the element is inside of this panel element
PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
elementHTMLElementThe HTMLElement to check

destroy

Reset internal state and set removed to true

Returns: void

includePosition

Check whether the given position is inside of this panel's range

Returns: boolean

  • A Boolean value indicating whether the given position is included in the panel range
PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
posnumberA position to check
includeMarginboolean✔️falseInclude margin to the range

includeRange

Check whether the given range is fully included in this panel's area (inclusive)

Returns: boolean

  • A Boolean value indicating whether the given range is fully included in the panel range
PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
minnumberMinimum value of the range to check
maxnumberMaximum value of the range to check
includeMarginboolean✔️falseInclude margin to the range

isVisibleOnRange

Check whether the panel is visble in the given range (exclusive)

Returns: boolean

  • A Boolean value indicating whether the panel is visible
PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
minnumberMinimum value of the range to check
maxnumberMaximum value of the range to check

focus

Move Camera to this panel

Returns: Promise<void>

  • A Promise which will be resolved after reaching the panel
PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
durationnumber✔️Duration of the animation (unit: ms)

prev

Get previous(index - 1) panel. When the previous panel does not exist, this will return null instead
If the circular is enabled, this will return the last panel if called from the first panel

Returns: Panel | null

  • The previous panel

next

Get next(index + 1) panel. When the next panel does not exist, this will return null instead
If the circular is enabled, this will return the first panel if called from the last panel

Returns: Panel | null

  • The previous panel

increaseIndex

Increase panel's index by the given value

Returns: this

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
valnumberAn integer greater than or equal to 0
⚠️ This function is for internal use only.

decreaseIndex

Decrease panel's index by the given value

Returns: this

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
valnumberAn integer greater than or equal to 0
⚠️ This function is for internal use only.

updatePosition

Returns: this

⚠️ This function is for internal use only.

toggle

Returns: boolean

  • toggled
PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
prevPosnumber
newPosnumber
⚠️ This function is for internal use only.

updateCircularToggleDirection

Returns: this

⚠️ This function is for internal use only.