ElementPanel
An slide data component that holds information of a single HTMLElement
#
ConstructorPARAMETER | TYPE | OPTIONAL | DEFAULT | DESCRIPTION |
---|---|---|---|---|
options | object | no | An options object | |
options.el | HTMLElement | yes | A HTMLElement panel's referencing | |
options.index | number | yes | An initial index of the panel | |
options.align | Constants.ALIGN | string | number | yes | An initial align value of the panel | |
options.flicking | Flicking | yes | A Flicking instance panel's referencing |
#
Properties#
elementHTMLElement
that panel's referencing
Type: HTMLElement
#
indexIndex of the panel
Type: number
#
positionPosition of the panel, including alignPosition
Type: number
#
sizeCached size of the panel element
This is equal to element's offsetWidth
if horizontal is true
, and offsetHeight
else
Type: number
#
sizeIncludingMarginPanel's size including CSS margin
This value includes element's margin left/right if horizontal is true
, and margin top/bottom else
Type: number
#
heightHeight of the panel element
Type: number
#
marginCached CSS margin
value of the panel element
Type: object
PROPERTY | TYPE | DESCRIPTION |
---|---|---|
prev | number | CSS margin-left when the horizontal is true , and margin-top else |
next | number | CSS margin-right when the horizontal is true , and margin-bottom else |
#
alignPositionAlign position inside the panel where Camera's alignPosition inside viewport should be located at
Type: number
#
removedA value indicating whether the panel's removed
Type: boolean
#
rangePanel element's range of the bounding box
Type: object
PROPERTY | TYPE | DESCRIPTION |
---|---|---|
min | number | Bounding box's left(horizontal: true) / top(horizontal: false) |
max | number | Bounding box's right(horizontal: true) / bottom(horizontal: false) |
#
toggledA value indicating whether the panel's position is toggled by circular behavior
Type: boolean
#
toggleDirectionA direction where the panel's position is toggled
Type: DIRECTION
#
offsetActual position offset determined by Panel#order
Type: number
#
progressProgress of movement between previous or next panel relative to current panel
Type: number
#
outsetProgressProgress of movement between points that panel is completely invisible outside of viewport(prev direction: -1, selected point: 0, next direction: 1)
Type: number
#
visibleRatioPercentage of area where panel is visible in the viewport
Type: number
#
alignA value indicating where the alignPosition should be located at inside the panel element
Type: Constants.ALIGN | string | number
#
Methods#
resizeUpdate size of the panel
Returns: this
#
containsCheck 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
PARAMETER | TYPE | OPTIONAL | DEFAULT | DESCRIPTION |
---|---|---|---|---|
element | HTMLElement | no | The HTMLElement to check |
#
destroyReset internal state and set removed to true
Returns: void
#
includePositionCheck 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
PARAMETER | TYPE | OPTIONAL | DEFAULT | DESCRIPTION |
---|---|---|---|---|
pos | number | no | A position to check | |
includeMargin | boolean | yes | false | Include margin to the range |
#
includeRangeCheck 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
PARAMETER | TYPE | OPTIONAL | DEFAULT | DESCRIPTION |
---|---|---|---|---|
min | number | no | Minimum value of the range to check | |
max | number | no | Maximum value of the range to check | |
includeMargin | boolean | yes | false | Include margin to the range |
#
focusMove Camera to this panel
Returns: Promise<void>
- A Promise which will be resolved after reaching the panel
PARAMETER | TYPE | OPTIONAL | DEFAULT | DESCRIPTION |
---|---|---|---|---|
duration | number | yes | Duration of the animation (unit: ms) |
#
prevGet 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
#
nextGet 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
#
increaseIndexIncrease panel's index by the given value
Returns: this
PARAMETER | TYPE | OPTIONAL | DEFAULT | DESCRIPTION |
---|---|---|---|---|
val | number | no | An integer greater than or equal to 0 |
#
decreaseIndexDecrease panel's index by the given value
Returns: this
PARAMETER | TYPE | OPTIONAL | DEFAULT | DESCRIPTION |
---|---|---|---|---|
val | number | no | An integer greater than or equal to 0 |
#
increasePositionIncrease panel's position by the given value
Returns: this
PARAMETER | TYPE | OPTIONAL | DEFAULT | DESCRIPTION |
---|---|---|---|---|
val | number | no | An integer greater than or equal to 0 |
#
decreasePositionDecrease panel's position by the given value
Returns: this
PARAMETER | TYPE | OPTIONAL | DEFAULT | DESCRIPTION |
---|---|---|---|---|
val | number | no | An integer greater than or equal to 0 |
#
toggleReturns: boolean
- toggled
PARAMETER | TYPE | OPTIONAL | DEFAULT | DESCRIPTION |
---|---|---|---|---|
prevPos | number | no | ||
newPos | number | no |
#
updateCircularToggleDirectionReturns: this