Skip to main content
Version: 4.3.1

ElementPanel

class ElementPanel extends Panel

An slide data component that holds information of a single HTMLElement

Constructor

new ElementPanel(options, options.el, options.index, options.align, options.flicking)
PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
optionsobjectAn options object
options.elHTMLElement✔️A HTMLElement panel's referencing
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

Properties

element

readonly

HTMLElement that panel's referencing

Type: HTMLElement

index

readonlyinherited

Index of the panel

Type: number

position

readonlyinherited

Position of the panel, including alignPosition

Type: number

size

readonlyinherited

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

Type: number

sizeIncludingMargin

readonlyinherited

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

readonlyinherited

Height of the panel element

Type: number

margin

readonlyinherited

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

readonlyinherited

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

Type: number

removed

readonlyinherited

A value indicating whether the panel's removed

Type: boolean

loading

readonlyinherited

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

Type: boolean

range

readonlyinherited

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

readonlyinherited

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

Type: boolean

toggleDirection

readonlyinherited

A direction where the panel's position is toggled

Type: DIRECTION

offset

readonlyinherited

Actual position offset determined by Panel#order

Type: number

progress

readonlyinherited

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

Type: number

outsetProgress

readonlyinherited

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

readonlyinherited

Percentage of area where panel is visible in the viewport

Type: number

align

inherited

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

Type: Constants.ALIGN | string | number

Methods

resize

inherited

Update size of the panel

Returns: this

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
cachedobject✔️Predefined cached size of the panel

setSize

inherited

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

inherited

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

inherited

Reset internal state and set removed to true

Returns: void

includePosition

inherited

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

inherited

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

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

focus

inherited

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

inherited

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

inherited

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

inherited

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

inherited

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

inherited

Returns: this

⚠️ This function is for internal use only.

toggle

inherited

Returns: boolean

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

updateCircularToggleDirection

inherited

Returns: this

⚠️ This function is for internal use only.