@egjs/infinitegrid/declaration/InfiniteGrid.d.ts

import Component from "@egjs/component";
import { ContainerManager, Properties, RenderOptions, ItemRenderer } from "@egjs/grid";
import { STATUS_TYPE } from "./consts";
import { GroupManager } from "./GroupManager";
import { Infinite } from "./Infinite";
import { InfiniteGridItem, InfiniteGridItemStatus } from "./InfiniteGridItem";
import { ScrollManager } from "./ScrollManager";
import { InfiniteGridEvents, InfiniteGridGroup, InfiniteGridInsertedItems, InfiniteGridItemInfo, InfiniteGridOptions, InfiniteGridStatus, InsertedPlaceholdersResult } from "./types";
/**
 * A module used to arrange items including content infinitely according to layout type. With this module, you can implement various layouts composed of different items whose sizes vary. It guarantees performance by maintaining the number of DOMs the module is handling under any circumstance
 * @ko 콘텐츠가 있는 아이템을 레이아웃 타입에 따라 무한으로 배치하는 모듈. 다양한 크기의 아이템을 다양한 레이아웃으로 배치할 수 있다. 아이템의 개수가 계속 늘어나도 모듈이 처리하는 DOM의 개수를 일정하게 유지해 최적의 성능을 보장한다
 * @extends Component
 * @support {"ie": "9+(with polyfill)", "ch" : "latest", "ff" : "latest",  "sf" : "latest", "edge" : "latest", "ios" : "7+", "an" : "4.X+"}
 * @example
```html
<ul id="grid">
  <li class="card">
    <div>test1</div>
  </li>
  <li class="card">
    <div>test2</div>
  </li>
  <li class="card">
    <div>test3</div>
  </li>
  <li class="card">
    <div>test4</div>
  </li>
  <li class="card">
    <div>test5</div>
  </li>
  <li class="card">
    <div>test6</div>
  </li>
</ul>
<script>
import { MasonryInfiniteGrid } from "@egjs/infinitegrid";
var some = new MasonryInfiniteGrid("#grid").on("renderComplete", function(e) {
  // ...
});
// If you already have items in the container, call "layout" method.
some.renderItems();
</script>
```
 */
declare class InfiniteGrid<Options extends InfiniteGridOptions = InfiniteGridOptions> extends Component<InfiniteGridEvents> {
    static defaultOptions: Required<InfiniteGridOptions>;
    static propertyTypes: {
        gap: import("@egjs/grid").PROPERTY_TYPE;
        defaultDirection: import("@egjs/grid").PROPERTY_TYPE;
        renderOnPropertyChange: import("@egjs/grid").PROPERTY_TYPE;
        preserveUIOnDestroy: import("@egjs/grid").PROPERTY_TYPE;
        useFit: import("@egjs/grid").PROPERTY_TYPE;
        outlineSize: import("@egjs/grid").PROPERTY_TYPE;
        outlineLength: import("@egjs/grid").PROPERTY_TYPE;
    };
    protected wrapperElement: HTMLElement;
    protected scrollManager: ScrollManager;
    protected itemRenderer: ItemRenderer;
    protected containerManager: ContainerManager;
    protected infinite: Infinite;
    protected groupManager: GroupManager;
    protected options: Required<Options>;
    private _waitType;
    /**
     * @param - A base element for a module <ko>모듈을 적용할 기준 엘리먼트</ko>
     * @param - The option object of the InfiniteGrid module <ko>eg.InfiniteGrid 모듈의 옵션 객체</ko>
     */
    constructor(wrapper: HTMLElement | string, options: Options);
    /**
     * 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
     * ```ts
     * import { MasonryInfiniteGrid } from "@egjs/infinitegrid";
     * const grid = new MasonryInfiniteGrid();
     *
     * grid.on("renderComplete", e => {
     *   console.log(e);
     * });
     * grid.renderItems();
     * ```
     */
    renderItems(options?: RenderOptions): this;
    /**
     * Returns the wrapper element specified by the user.
     * @ko 컨테이너 엘리먼트를 반환한다.
     */
    getWrapperElement(): HTMLElement;
    /**
     * Returns the container element corresponding to the scroll area.
     * @ko 스크롤 영역에 해당하는 컨테이너 엘리먼트를 반환한다.
     */
    getScrollContainerElement(): HTMLElement;
    /**
     * Returns the container element containing item elements.
     * @ko 아이템 엘리먼트들을 담긴 컨테이너 엘리먼트를 반환한다.
     */
    getContainerElement(): HTMLElement;
    /**
     * When items change, it synchronizes and renders items.
     * @ko items가 바뀐 경우 동기화를 하고 렌더링을 한다.
     * @param - Options for rendering. <ko>렌더링을 하기 위한 옵션.</ko>
     */
    syncItems(items: InfiniteGridItemInfo[]): this;
    /**
     * Change the currently visible groups.
     * @ko 현재 보이는 그룹들을 바꾼다.
     * @param - first index of visible groups. <ko>보이는 그룹의 첫번째 index.</ko>
     * @param - last index of visible groups. <ko>보이는 그룹의 마지막 index.</ko>
     * @param - Whether the first rendering has already been done. <ko>첫 렌더링이 이미 되어있는지 여부.</ko>
     */
    setCursors(startCursor: number, endCursor: number, useFirstRender?: boolean): this;
    /**
     * Returns the first index of visible groups.
     * @ko 보이는 그룹들의 첫번째 index를 반환한다.
     */
    getStartCursor(): number;
    /**
     * Returns the last index of visible groups.
     * @ko 보이는 그룹들의 마지막 index를 반환한다.
     */
    getEndCursor(): number;
    /**
     * Add items at the bottom(right) of the grid.
     * @ko 아이템들을 grid 아래(오른쪽)에 추가한다.
     * @param - items to be added <ko>추가할 아이템들</ko>
     * @param - The group key to be configured in items. It is automatically generated by default. <ko>추가할 아이템에 설정할 그룹 키. 생략하면 값이 자동으로 생성된다.</ko>
     * @return - An instance of a module itself<ko>모듈 자신의 인스턴스</ko>
     * @example
     * ```js
     * ig.append(`<div class="item">test1</div><div class="item">test2</div>`);
     * ig.append([`<div class="item">test1</div>`, `<div class="item">test2</div>`]);
     * ig.append([HTMLElement1, HTMLElement2]);
     * ```
     */
    append(items: InfiniteGridInsertedItems, groupKey?: string | number): this;
    /**
     * Add items at the top(left) of the grid.
     * @ko 아이템들을 grid 위(왼쪽)에 추가한다.
     * @param - items to be added <ko>추가할 아이템들</ko>
     * @param - The group key to be configured in items. It is automatically generated by default. <ko>추가할 아이템에 설정할 그룹 키. 생략하면 값이 자동으로 생성된다.</ko>
     * @return - An instance of a module itself<ko>모듈 자신의 인스턴스</ko>
     * @example
     * ```ts
     * ig.prepend(`<div class="item">test1</div><div class="item">test2</div>`);
     * ig.prepend([`<div class="item">test1</div>`, `<div class="item">test2</div>`]);
     * ig.prepend([HTMLElement1, HTMLElement2]);
     * ```
     */
    prepend(items: InfiniteGridInsertedItems, groupKey?: string | number): this;
    /**
     * Add items to a specific index.
     * @ko 아이템들을 특정 index에 추가한다.
     * @param - index to add <ko>추가하기 위한 index</ko>
     * @param - items to be added <ko>추가할 아이템들</ko>
     * @param - The group key to be configured in items. It is automatically generated by default. <ko>추가할 아이템에 설정할 그룹 키. 생략하면 값이 자동으로 생성된다.</ko>
     * @return - An instance of a module itself<ko>모듈 자신의 인스턴스</ko>
     * @example
     * ```ts
     * ig.insert(2, `<div class="item">test1</div><div class="item">test2</div>`);
     * ig.insert(3, [`<div class="item">test1</div>`, `<div class="item">test2</div>`]);
     * ig.insert(4, [HTMLElement1, HTMLElement2]);
     * ```
     */
    insert(index: number, items: InfiniteGridInsertedItems, groupKey?: string | number): this;
    /**
     * Add items based on group index.
     * @ko group의 index 기준으로 item들을 추가한다.
     * @param - group index to add <ko>추가하기 위한 group의 index</ko>
     * @param - items to be added <ko>추가할 아이템들</ko>
     * @param - The group key to be configured in items. It is automatically generated by default. <ko>추가할 아이템에 설정할 그룹 키. 생략하면 값이 자동으로 생성된다.</ko>
     * @return - An instance of a module itself<ko>모듈 자신의 인스턴스</ko>
     * @example
     * ```ts
     * ig.insertByGroupIndex(2, `<div class="item">test1</div><div class="item">test2</div>`);
     * ig.insertByGroupIndex(3, [`<div class="item">test1</div>`, `<div class="item">test2</div>`]);
     * ig.insertByGroupIndex(4, [HTMLElement1, HTMLElement2]);
     * ```
     */
    insertByGroupIndex(groupIndex: number, items: InfiniteGridInsertedItems, groupKey?: string | number): this;
    /**
     * Returns the current state of a module such as location information. You can use the setStatus() method to restore the information returned through a call to this method.
     * @ko 아이템의 위치 정보 등 모듈의 현재 상태 정보를 반환한다. 이 메서드가 반환한 정보를 저장해 두었다가 setStatus() 메서드로 복원할 수 있다
     * @param - STATUS_TYPE.NOT_REMOVE = Get all information about items. STATUS_TYPE.REMOVE_INVISIBLE_ITEMS = Get information on visible items only. STATUS_TYPE.MINIMIZE_INVISIBLE_ITEMS = Compress invisible items. You can replace it with a placeholder. STATUS_TYPE.MINIMIZE_INVISIBLE_GROUPS = Compress invisible groups. <ko> STATUS_TYPE.NOT_REMOVE = 모든 아이템들의 정보를 가져온다. STATUS_TYPE.REMOVE_INVISIBLE_ITEMS = 보이는 아이템들의 정보만 가져온다. STATUS_TYPE.MINIMIZE_INVISIBLE_ITEMS = 안보이는 아이템들을 압축한다. placeholder로 대체가 가능하다. STATUS_TYPE.MINIMIZE_INVISIBLE_GROUPS = 안보이는 그룹을 압축한다.</ko>
     * @param - Whether to include items corresponding to placeholders. <ko>placeholder에 해당하는 아이템들을 포함할지 여부.</ko>
     */
    getStatus(type?: STATUS_TYPE, includePlaceholders?: boolean): InfiniteGridStatus;
    /**
     * You can set placeholders to restore status or wait for items to be added.
     * @ko status 복구 또는 아이템 추가 대기를 위한 placeholder를 설정할 수 있다.
     * @param - The placeholder status. <ko>placeholder의 status</ko>
     */
    setPlaceholder(info: Partial<InfiniteGridItemStatus> | null): this;
    /**
     * You can set placeholders to restore status or wait for items to be added.
     * @ko status 복구 또는 아이템 추가 대기를 위한 placeholder를 설정할 수 있다.
     * @param - The placeholder status. <ko>placeholder의 status</ko>
     */
    setLoading(info: Partial<InfiniteGridItemStatus> | null): this;
    /**
     * Add the placeholder at the end.
     * @ko placeholder들을 마지막에 추가한다.
     * @param - Items that correspond to placeholders. If it is a number, it duplicates the number of copies. <ko>placeholder에 해당하는 아이템들. 숫자면 갯수만큼 복제를 한다.</ko>
     * @param - The group key to be configured in items. It is automatically generated by default. <ko>추가할 아이템에 설정할 그룹 키. 생략하면 값이 자동으로 생성된다.</ko>
     */
    appendPlaceholders(items: number | InfiniteGridItemStatus[], groupKey?: string | number): InsertedPlaceholdersResult;
    /**
     * Add the placeholder at the start.
     * @ko placeholder들을 처음에 추가한다.
     * @param - Items that correspond to placeholders. If it is a number, it duplicates the number of copies. <ko>placeholder에 해당하는 아이템들. 숫자면 갯수만큼 복제를 한다.</ko>
     * @param - The group key to be configured in items. It is automatically generated by default. <ko>추가할 아이템에 설정할 그룹 키. 생략하면 값이 자동으로 생성된다.</ko>
     */
    prependPlaceholders(items: number | InfiniteGridItemStatus[], groupKey?: string | number): InsertedPlaceholdersResult;
    /**
     * Remove placeholders
     * @ko placeholder들을 삭제한다.
     * @param type - Remove the placeholders corresponding to the groupkey. When "start" or "end", remove all placeholders in that direction. <ko>groupkey에 해당하는 placeholder들을 삭제한다. "start" 또는 "end" 일 때 해당 방향의 모든 placeholder들을 삭제한다.</ko>
     */
    removePlaceholders(type: "start" | "end" | {
        groupKey: string | number;
    }): void;
    /**
     * Sets the status of the InfiniteGrid module with the information returned through a call to the getStatus() method.
     * @ko getStatus() 메서드가 저장한 정보로 InfiniteGrid 모듈의 상태를 설정한다.
     * @param - status object of the InfiniteGrid module. <ko>InfiniteGrid 모듈의 status 객체.</ko>
     * @param - Whether the first rendering has already been done. <ko>첫 렌더링이 이미 되어있는지 여부.</ko>
     */
    setStatus(status: InfiniteGridStatus, useFirstRender?: boolean): this;
    /**
     * Removes the group corresponding to index.
     * @ko index에 해당하는 그룹을 제거 한다.
     */
    removeGroupByIndex(index: number): this;
    /**
     * Removes the group corresponding to key.
     * @ko key에 해당하는 그룹을 제거 한다.
     */
    removeGroupByKey(key: number | string): this;
    /**
     * Removes the item corresponding to index.
     * @ko index에 해당하는 아이템을 제거 한다.
     */
    removeByIndex(index: number): this;
    /**
     * Removes the item corresponding to key.
     * @ko key에 해당하는 아이템을 제거 한다.
     */
    removeByKey(key: string | number): 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?: InfiniteGridItem[], options?: RenderOptions): this;
    /**
     * Return all items of InfiniteGrid.
     * @ko InfiniteGrid의 모든 아이템들을 반환한다.
     * @param - Whether to include items corresponding to placeholders. <ko>placeholder에 해당하는 아이템들을 포함할지 여부.</ko>
     */
    getItems(includePlaceholders?: boolean): InfiniteGridItem[];
    /**
     * Return visible items of InfiniteGrid.
     * @ko InfiniteGrid의 보이는 아이템들을 반환한다.
     * @param - Whether to include items corresponding to placeholders. <ko>placeholder에 해당하는 아이템들을 포함할지 여부.</ko>
     */
    getVisibleItems(includePlaceholders?: boolean): InfiniteGridItem[];
    /**
     * Return rendering items of InfiniteGrid.
     * @ko InfiniteGrid의 렌더링 아이템들을 반환한다.
     */
    getRenderingItems(): InfiniteGridItem[];
    /**
     * Return all groups of InfiniteGrid.
     * @ko InfiniteGrid의 모든 그룹들을 반환한다.
     * @param - Whether to include groups corresponding to placeholders. <ko>placeholder에 해당하는 그룹들을 포함할지 여부.</ko>
     */
    getGroups(includePlaceholders?: boolean): InfiniteGridGroup[];
    /**
     * Return visible groups of InfiniteGrid.
     * @ko InfiniteGrid의 보이는 그룹들을 반환한다.
     * @param - Whether to include groups corresponding to placeholders. <ko>placeholder에 해당하는 그룹들을 포함할지 여부.</ko>
     */
    getVisibleGroups(includePlaceholders?: boolean): InfiniteGridGroup[];
    /**
     * Set to wait to request data.
     * @ko 데이터를 요청하기 위해 대기 상태로 설정한다.
     * @param direction - direction in which data will be added. <ko>데이터를 추가하기 위한 방향.</ko>
     */
    wait(direction?: "start" | "end"): void;
    /**
     * When the data request is complete, it is set to ready state.
     * @ko 데이터 요청이 끝났다면 준비 상태로 설정한다.
     */
    ready(): void;
    /**
     * Returns whether it is set to wait to request data.
     * @ko 데이터를 요청하기 위해 대기 상태로 설정되어 있는지 여부를 반환한다.
     */
    isWait(): boolean;
    /**
     * Releases the instnace and events and returns the CSS of the container and elements.
     * @ko 인스턴스와 이벤트를 해제하고 컨테이너와 엘리먼트들의 CSS를 되돌린다.
     */
    destroy(): void;
    private _getRenderer;
    private _getRendererItems;
    private _syncItems;
    private _render;
    private _update;
    private _resizeScroll;
    private _syncGroups;
    private _syncInfinite;
    private _scroll;
    private _onScroll;
    private _onChange;
    private _onRendererUpdated;
    private _onResize;
    private _onRequestAppend;
    private _onRequestPrepend;
    private _onRequestInsert;
    private _onContentError;
    private _onRenderComplete;
    private _renderItems;
    private _checkStartLoading;
    private _checkEndLoading;
}
interface InfiniteGrid extends Properties<typeof InfiniteGrid> {
}
export default InfiniteGrid;