@egjs/grid/declaration/Grid.d.ts

A component that can arrange items according to the type of grids

/**
 * egjs-grid
 * Copyright (c) 2021-present NAVER Corp.
 * MIT license
 */
import Component from "@egjs/component";
import { ContainerManager } from "./ContainerManager";
import { DestroyOptions, GridEvents, GridOptions, GridOutlines, GridStatus, Properties, RenderOptions } from "./types";
import { ItemRenderer } from "./ItemRenderer";
import { GridItem } from "./GridItem";
/**
 * @extends eg.Component
 */
declare abstract class Grid<Options extends GridOptions = GridOptions> extends Component<GridEvents> {
    static defaultOptions: Required<GridOptions>;
    static propertyTypes: {
        gap: import("./consts").PROPERTY_TYPE;
        defaultDirection: import("./consts").PROPERTY_TYPE;
        renderOnPropertyChange: import("./consts").PROPERTY_TYPE;
        preserveUIOnDestroy: import("./consts").PROPERTY_TYPE;
        useFit: import("./consts").PROPERTY_TYPE;
        outlineSize: import("./consts").PROPERTY_TYPE;
        outlineLength: import("./consts").PROPERTY_TYPE;
    };
    options: Required<Options>;
    protected containerElement: HTMLElement;
    protected containerManager: ContainerManager;
    protected itemRenderer: ItemRenderer;
    protected items: GridItem[];
    protected outlines: GridOutlines;
    private _renderTimer;
    private _im;
    /**
    * Apply the CSS rect of items to fit the Grid and calculate the outline.
    * @ko  Grid에 맞게 아이템들의 CSS rect를 적용하고 outline을 계산한다.
    * @abstract
    * @method Grid#applyGrid
    * @param {"start" | "end"} direcion - The direction to apply the Grid. ("end": start to end, "start": end to start) <ko>Grid를 적용할 방향. ("end": 시작에서 끝 방향, "start": 끝에서 시작 방향)</ko>
    * @param {number[]} outline - The start outline to apply the Grid. <ko>Grid를 적용할 시작 outline.</ko>
    */
    abstract applyGrid(items: GridItem[], direction: "start" | "end", outline: number[]): GridOutlines;
    /**
     * @param - A base element for a module <ko>모듈을 적용할 기준 엘리먼트</ko>
     * @param - The option object of the Grid module <ko>Grid 모듈의 옵션 객체</ko>
     */
    constructor(containerElement: HTMLElement | string, options?: Partial<Options>);
    /**
     * Return Container Element.
     * @ko 컨테이너 엘리먼트를 반환한다.
     */
    getContainerElement(): HTMLElement;
    /**
     * Return items.
     * @ko 아이템들을 반환한다.
     */
    getItems(): GridItem[];
    /**
     * Returns the children of the container element.
     * @ko 컨테이너 엘리먼트의 children을 반환한다.
     */
    getChildren(): HTMLElement[];
    /**
     * Set items.
     * @ko 아이템들을 설정한다.
     * @param items - The items to set. <ko>설정할 아이템들</ko>
     */
    setItems(items: GridItem[]): this;
    /**
     * Gets the container's inline size. ("width" if horizontal is false, otherwise "height")
     * @ko container의 inline 사이즈를 가져온다. (horizontal이 false면 "width", 아니면 "height")
     */
    getContainerInlineSize(): number;
    /**
     * Returns the outlines of the start and end of the Grid.
     * @ko Grid의 처음과 끝의 outline을 반환한다.
     */
    getOutlines(): GridOutlines;
    /**
     * Set outlines.
     * @ko 아웃라인을 설정한다.
     * @param outlines - The outlines to set. <ko>설정할 아웃라인.</ko>
     */
    setOutlines(outlines: GridOutlines): this;
    /**
     * When elements change, it synchronizes and renders items.
     * @ko elements가 바뀐 경우 동기화를 하고 렌더링을 한다.
     * @param - Options for rendering. <ko>렌더링을 하기 위한 옵션.</ko>
     */
    syncElements(options?: RenderOptions): this;
    /**
     * Update the size of the items and render them.
     * @ko 아이템들의 사이즈를 업데이트하고 렌더링을 한다.
     * @param - Items to be updated. <ko>업데이트할 아이템들.</ko>
     * @param - Options for rendering. <ko>렌더링을 하기 위한 옵션.</ko>
     */
    updateItems(items?: GridItem[], options?: RenderOptions): this;
    /**
     * Rearrange items to fit the grid and render them. When rearrange is complete, the `renderComplete` event is fired.
     * @ko grid에 맞게 아이템을 재배치하고 렌더링을 한다. 배치가 완료되면 `renderComplete` 이벤트가 발생한다.
     * @param - Options for rendering. <ko>렌더링을 하기 위한 옵션.</ko>
     * @example
     * ```js
     * import { MasonryGrid } from "@egjs/grid";
     * const grid = new MasonryGrid();
     *
     * grid.on("renderComplete", e => {
     *   console.log(e);
     * });
     * grid.renderItems();
     * ```
     */
    renderItems(options?: RenderOptions): this;
    /**
     * Returns current status such as item's position, size. The returned status can be restored with the setStatus() method.
     * @ko 아이템의 위치, 사이즈 등 현재 상태를 반환한다. 반환한 상태는 setStatus() 메서드로 복원할 수 있다.
     * @param - Whether to minimize the status of the item. (default: false) <ko>item의 status를 최소화할지 여부. (default: false)</ko>
     */
    getStatus(minimize?: boolean): GridStatus;
    /**
     * Set status of the Grid module with the status returned through a call to the getStatus() method.
     * @ko getStatus() 메서드에 대한 호출을 통해 반환된 상태로 Grid 모듈의 상태를 설정한다.
     */
    setStatus(status: GridStatus): this;
    /**
     * Get the inline size corresponding to outline.
     * @ko outline에 해당하는 inline 사이즈를 구한다.
     * @param items - Items to get outline size. <ko>outline 사이즈를 구하기 위한 아이템들.</ko>
     */
    getComputedOutlineSize(items?: GridItem[]): number;
    /**
     * Get the length corresponding to outline.
     * @ko outline에 해당하는 length를 가져온다.
     * @param items - Items to get outline length. <ko>outline length를 구하기 위한 아이템들.</ko>
     */
    getComputedOutlineLength(items?: GridItem[]): number;
    /**
     * Releases the instnace and events and returns the CSS of the container and elements.
     * @ko 인스턴스와 이벤트를 해제하고 컨테이너와 엘리먼트들의 CSS를 되돌린다.
     * @param Options for destroy. <ko>destory()를 위한 옵션</ko>
     */
    destroy(options?: DestroyOptions): void;
    protected getInlineGap(): number;
    protected getContentGap(): number;
    protected checkReady(options?: RenderOptions): void;
    protected scheduleRender(): void;
    protected fitOutlines(useFit?: boolean): void;
    protected readyItems(mounted: GridItem[], updated: GridItem[], options: RenderOptions): void;
    protected _isObserverEnabled(): boolean;
    protected _updateItems(items: GridItem[]): void;
    private _getDirectionalGap;
    private _renderComplete;
    private _clearRenderTimer;
    private _refreshContainerContentSize;
    private _resizeContainer;
    private _onResize;
    private _init;
    private _renderItems;
}
interface Grid extends Properties<typeof Grid> {
}
export default Grid;
/**
 * Gap used to create space around items.
 * @ko 아이템들 사이의 공간.
 * @name Grid#gap
 * @type {$ts:Grid.GridOptions["gap"]}
 * @default 0
 * @example
 * ```js
 * import { MasonryGrid } from "@egjs/grid";
 *
 * const grid = new MasonryGrid(container, {
 *   gap: 0,
 * });
 *
 * grid.gap = 5;
 * ```
 */
/**
 * The default direction value when direction is not set in the render option.
 * @ko render옵션에서 direction을 미설정시의 기본 방향값.
 * @name Grid#defaultDirection
 * @type {$ts:Grid.GridOptions["defaultDirection"]}
 * @default "end"
 * @example
 * ```js
 * import { MasonryGrid } from "@egjs/grid";
 *
 * const grid = new MasonryGrid(container, {
 *   defaultDirection: "end",
 * });
 *
 * grid.defaultDirection = "start";
 * ```
 */
/**
 * Whether to move the outline to 0 when the top is empty when rendering. However, if it overflows above the top, the outline is forced to 0. (default: true)
 * @ko 렌더링시 상단이 비어있을 때 아웃라인을 0으로 이동시킬지 여부. 하지만 상단보다 넘치는 경우 아웃라인을 0으로 강제 이동한다. (default: true)
 * @name Grid#useFit
 * @type {$ts:Grid.GridOptions["useFit"]}
 * @default true
 * @example
 * ```js
 * import { MasonryGrid } from "@egjs/grid";
 *
 * const grid = new MasonryGrid(container, {
 *   useFit: true,
 * });
 *
 * grid.useFit = false;
 * ```
 */
/**
 * Whether to preserve the UI of the existing container or item when destroying.
 * @ko destroy 시 기존 컨테이너, 아이템의 UI를 보존할지 여부.
 * @name Grid#preserveUIOnDestroy
 * @type {$ts:Grid.GridOptions["preserveUIOnDestroy"]}
 * @default false
 * @example
 * ```js
 * import { MasonryGrid } from "@egjs/grid";
 *
 * const grid = new MasonryGrid(container, {
 *   preserveUIOnDestroy: false,
 * });
 *
 * grid.preserveUIOnDestroy = true;
 * ```
 */
/**
 * The number of outlines. If the number of outlines is 0, it is calculated according to the type of grid.
 * @ko outline의 개수. 아웃라인의 개수가 0이라면 grid의 종류에 따라 계산이 된다.
 * @name Grid#outlineLength
 * @type {$ts:Grid.GridOptions["outlineLength"]}
 * @default 0
 * @example
 * ```js
 * import { MasonryGrid } from "@egjs/grid";
 *
 * const grid = new MasonryGrid(container, {
 *   outlineLength: 0,
 *   outlineSize: 0,
 * });
 *
 * grid.outlineLength = 3;
 * ```
 */
/**
 * The size of the outline. If the outline size is 0, it is calculated according to the grid type.
 * @ko outline의 사이즈. 만약 outline의 사이즈가 0이면, grid의 종류에 따라 계산이 된다.
 * @name Grid#outlineSize
 * @type {$ts:Grid.GridOptions["outlineSize"]}
 * @default 0
 * @example
 * ```js
 * import { MasonryGrid } from "@egjs/grid";
 *
 * const grid = new MasonryGrid(container, {
 *   outlineLength: 0,
 *   outlineSize: 0,
 * });
 *
 * grid.outlineSize = 300;
 * ```
 */