@egjs/flicking

import { ALIGN, DIRECTION } from "../../constants/values"; import Flicking from "../../Flicking"; import { LiteralUnion, ValueOf } from "../../types/internal"; import { SetSizeParams } from "../../types/params"; import ElementProvider from "./provider/ElementProvider"; export interface PanelOptions { /** An initial index of the panel */ index: number; /** An initial {@link Flicking.align | align} value of the panel */ align: LiteralUnion<ValueOf<typeof ALIGN>> | number; /** The Flicking instance that this panel belongs to */ flicking: Flicking; /** A provider instance that returns the actual html element */ elementProvider: ElementProvider; } export interface PanelMarginInfo { /** CSS `margin-left` when the {@link Flicking.horizontal | horizontal} is `true`, and `margin-top` else */ prev: number; /** CSS `margin-right` when the {@link Flicking.horizontal | horizontal} is `true`, and `margin-bottom` else */ next: number; } export interface PanelBoundingBoxRange { /** Bounding box's left({@link Flicking.horizontal | horizontal}: true) / top({@link Flicking.horizontal | horizontal}: false) */ min: number; /** Bounding box's right({@link Flicking.horizontal | horizontal}: true) / bottom({@link Flicking.horizontal | horizontal}: false) */ max: number; } /** * A slide data component that holds information of a single HTMLElement * @public */ declare class Panel { protected _flicking: Flicking; protected _elProvider: ElementProvider; protected _index: number; protected _pos: number; protected _size: number; protected _height: number; protected _margin: PanelMarginInfo; protected _alignPos: number; protected _rendered: boolean; protected _removed: boolean; protected _loading: boolean; protected _toggleDirection: ValueOf<typeof DIRECTION>; protected _toggled: boolean; protected _togglePosition: number; protected _align: PanelOptions["align"]; /** * `HTMLElement` that panel's referencing * @readonly */ get element(): HTMLElement; /** * @internal * @readonly */ get elementProvider(): ElementProvider; /** * Index of the panel * @readonly */ get index(): number; /** * Position of the panel, including {@link Panel.alignPosition | alignPosition} * @readonly */ get position(): number; /** * Cached size of the panel element * @remarks * This is equal to {@link Panel.element | element}'s `offsetWidth` if {@link Flicking.horizontal | horizontal} is `true`, and `offsetHeight` else * @readonly */ get size(): number; /** * Panel's size including CSS `margin` * @remarks * This value includes {@link Panel.element | element}'s margin left/right if {@link Flicking.horizontal | horizontal} is `true`, and margin top/bottom else * @readonly */ get sizeIncludingMargin(): number; /** * Height of the panel element * @readonly */ get height(): number; /** * Cached CSS `margin` value of the panel element * @readonly */ get margin(): PanelMarginInfo; /** * Align position inside the panel where {@link Camera}'s {@link Camera.alignPosition | alignPosition} inside viewport should be located at * @readonly */ get alignPosition(): number; /** * A value indicating whether the panel's {@link Flicking.remove | remove}d * @readonly */ get removed(): boolean; /** * A value indicating whether the panel's element is being rendered on the screen * @readonly */ get rendered(): boolean; /** * A value indicating whether the panel's image/video is not loaded and waiting for resize * @readonly */ get loading(): boolean; /** * Panel element's range of the bounding box * @readonly */ get range(): PanelBoundingBoxRange; /** * A value indicating whether the panel's position is toggled by circular behavior * @readonly */ get toggled(): boolean; /** * A direction where the panel's position is toggled * @readonly */ get toggleDirection(): ValueOf<typeof DIRECTION>; /** * Actual position offset determined by {@link Panel.order} * @readonly */ get offset(): number; /** * Progress of movement between previous or next panel relative to current panel * @readonly */ get progress(): number; /** * Progress of movement between points that panel is completely invisible outside of viewport(prev direction: -1, selected point: 0, next direction: 1) * @readonly */ get outsetProgress(): number; /** * Percentage of area where panel is visible in the viewport * @readonly */ get visibleRatio(): number; set loading(val: boolean); /** * A value indicating where the {@link Panel.alignPosition | alignPosition} should be located at inside the panel element */ get align(): PanelOptions["align"]; set align(val: PanelOptions["align"]); /** * Creates a new Panel instance * @param panelOptions - Options for creating the panel */ constructor(panelOptions: PanelOptions); /** * @internal * @privateRemarks * Marks this panel to be rendered on the camera element. */ markForShow(): void; /** * @internal * @privateRemarks * Marks this panel to be hidden from the camera element. */ markForHide(): void; /** * Update size of the panel * @remarks * This method recalculates the panel's size, margin, and position based on the current DOM state. * @param cached - Predefined cached size of the panel * @returns The current instance for method chaining */ resize(cached?: { size: number; height?: number; margin: { prev: number; next: number; }; }): this; /** * Change panel's size * @remarks * This will change the actual size of the panel element by changing its CSS width/height property. * @param size - {@link SetSizeParams} * @returns The current instance for method chaining */ setSize(size: SetSizeParams): this; /** * Check whether the given element is inside of this panel's {@link Panel.element | element} * @remarks * This is useful for determining which panel contains a clicked element. * @param element - The HTMLElement to check * @returns A Boolean value indicating the element is inside of this panel {@link Panel.element | element} */ contains(element: HTMLElement): boolean; /** * Reset internal state and set {@link Panel.removed | removed} to `true` * @remarks * After calling this method, the panel should no longer be used. */ destroy(): void; /** * Check whether the given position is inside of this panel's {@link Panel.range | range} * @param pos - A position to check * @param includeMargin - Include {@link Panel.margin | margin} to the range * @returns A Boolean value indicating whether the given position is included in the panel range */ includePosition(pos: number, includeMargin?: boolean): boolean; /** * Check whether the given range is fully included in this panel's area (inclusive) * @param min - Minimum value of the range to check * @param max - Maximum value of the range to check * @param includeMargin - Include {@link Panel.margin | margin} to the range * @returns A Boolean value indicating whether the given range is fully included in the panel range */ includeRange(min: number, max: number, includeMargin?: boolean): boolean; /** * Check whether the panel is visble in the given range (exclusive) * @param min - Minimum value of the range to check * @param max - Maximum value of the range to check * @returns A Boolean value indicating whether the panel is visible */ isVisibleOnRange(min: number, max: number): boolean; /** * Move {@link Camera} to this panel * @remarks * This is equivalent to calling `Flicking.moveTo(panel.index, duration)`. * @param duration - Duration of the animation (unit: ms). Defaults to {@link FlickingOptions.duration} * @fires {@link MovementEvents} * @throws {@link MovementErrors} * @returns A Promise which will be resolved after reaching the panel */ focus(duration?: number): Promise<void>; /** * Get previous(`index - 1`) panel. * @remarks * When the previous panel does not exist, this will return `null` instead * If the {@link Flicking.circularEnabled | circular} is enabled, this will return the last panel if called from the first panel * @returns The previous panel */ prev(): Panel | null; /** * Get next(`index + 1`) panel. * @remarks * When the next panel does not exist, this will return `null` instead * If the {@link Flicking.circularEnabled | circular} is enabled, this will return the first panel if called from the last panel * @returns The next panel */ next(): Panel | null; /** * @internal * @privateRemarks * Increases the panel's index by the given value. Called when panels are inserted before this panel. */ increaseIndex(val: number): this; /** * @internal * @privateRemarks * Decreases the panel's index by the given value. Called when panels are removed before this panel. */ decreaseIndex(val: number): this; /** * @internal * @privateRemarks * Recalculates the panel's position based on the previous panel's position and margins. */ updatePosition(): this; /** * @internal * @privateRemarks * Toggles the panel's position for circular mode. Returns true if the panel was toggled. */ toggle(prevPos: number, newPos: number): boolean; /** * @internal * @privateRemarks * Updates the toggle direction for circular mode based on the panel's visibility at the camera range edges. */ updateCircularToggleDirection(): this; /** * @internal * @privateRemarks * Recalculates the align position based on the align option and panel size. */ private _updateAlignPos; /** * @internal * @privateRemarks * Resets all internal state values to their defaults. */ private _resetInternalStates; } export default Panel;