버전: 4.4.0

InfiniteGrid

class InfiniteGrid extends Component

콘텐츠가 있는 아이템을 레이아웃 타입에 따라 무한으로 배치하는 모듈. 다양한 크기의 아이템을 다양한 레이아웃으로 배치할 수 있다. 아이템의 개수가 계속 늘어나도 모듈이 처리하는 DOM의 개수를 일정하게 유지해 최적의 성능을 보장한다

constructor

new InfiniteGrid(wrapper, options)

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
wrapper	HTMLElement \| string			모듈을 적용할 기준 엘리먼트
options	Options			eg.InfiniteGrid 모듈의 옵션 객체

<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>

Methods

renderItems

grid에 맞게 아이템을 재배치하고 렌더링을 한다. 배치가 완료되면 renderComplete 이벤트가 발생한다.

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
options	RenderOptions	✔️	{}	렌더링을 하기 위한 옵션.

import { MasonryInfiniteGrid } from "@egjs/infinitegrid";
const grid = new MasonryInfiniteGrid();

grid.on("renderComplete", e => {
  console.log(e);
});
grid.renderItems();

getWrapperElement

컨테이너 엘리먼트를 반환한다.

getScrollContainerElement

스크롤 영역에 해당하는 컨테이너 엘리먼트를 반환한다.

getContainerElement

아이템 엘리먼트들을 담긴 컨테이너 엘리먼트를 반환한다.

syncItems

items가 바뀐 경우 동기화를 하고 렌더링을 한다.

Returns: this

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
items	InfiniteGridItemInfo[]			렌더링을 하기 위한 옵션.

setCursors

현재 보이는 그룹들을 바꾼다.

Returns: this

PARAMETER	TYPE	OPTIONAL	DESCRIPTION
startCursor	number		보이는 그룹의 첫번째 index.
endCursor	number		보이는 그룹의 마지막 index.
useFirstRender	boolean	✔️	첫 렌더링이 이미 되어있는지 여부.

getStartCursor

보이는 그룹들의 첫번째 index를 반환한다.

Returns: number

getEndCursor

보이는 그룹들의 마지막 index를 반환한다.

Returns: number

append

아이템들을 grid 아래(오른쪽)에 추가한다.

Returns: this

모듈 자신의 인스턴스

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
items	InfiniteGridInsertedItems			추가할 아이템들
groupKey	string \| number	✔️		추가할 아이템에 설정할 그룹 키. 생략하면 값이 자동으로 생성된다.

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]);

prepend

아이템들을 grid 위(왼쪽)에 추가한다.

Returns: this

모듈 자신의 인스턴스

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
items	InfiniteGridInsertedItems			추가할 아이템들
groupKey	string \| number	✔️		추가할 아이템에 설정할 그룹 키. 생략하면 값이 자동으로 생성된다.

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]);

insert

아이템들을 특정 index에 추가한다.

Returns: this

모듈 자신의 인스턴스

PARAMETER	TYPE	OPTIONAL	DESCRIPTION
index	number		추가하기 위한 index
items	InfiniteGridInsertedItems		추가할 아이템들
groupKey	string \| number	✔️	추가할 아이템에 설정할 그룹 키. 생략하면 값이 자동으로 생성된다.

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]);

getStatus

아이템의 위치 정보 등 모듈의 현재 상태 정보를 반환한다. 이 메서드가 반환한 정보를 저장해 두었다가 setStatus() 메서드로 복원할 수 있다

Returns: InfiniteGridStatus

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
type	STATUS_TYPE	✔️		STATUS_TYPE.NOT_REMOVE = 모든 아이템들의 정보를 가져온다. STATUS_TYPE.REMOVE_INVISIBLE_ITEMS = 보이는 아이템들의 정보만 가져온다. STATUS_TYPE.MINIMIZE_INVISIBLE_ITEMS = 안보이는 아이템들을 압축한다. placeholder로 대체가 가능하다. STATUS_TYPE.MINIMIZE_INVISIBLE_GROUPS = 안보이는 그룹을 압축한다.
includePlaceholders	boolean	✔️		placeholder에 해당하는 아이템들을 포함할지 여부.

setPlaceholder

status 복구 또는 아이템 추가 대기를 위한 placeholder를 설정할 수 있다.

Returns: this

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
info	Partial<InfiniteGridItemStatus> \| null			placeholder의 status

setLoading

status 복구 또는 아이템 추가 대기를 위한 placeholder를 설정할 수 있다.

Returns: this

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
info	Partial<InfiniteGridItemStatus> \| null			placeholder의 status

appendPlaceholders

placeholder들을 마지막에 추가한다.

Returns: InsertedPlaceholdersResult

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
items	number \| InfiniteGridItemStatus[]			placeholder에 해당하는 아이템들. 숫자면 갯수만큼 복제를 한다.
groupKey	string \| number	✔️		추가할 아이템에 설정할 그룹 키. 생략하면 값이 자동으로 생성된다.

prependPlaceholders

placeholder들을 처음에 추가한다.

Returns: InsertedPlaceholdersResult

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
items	number \| InfiniteGridItemStatus[]			placeholder에 해당하는 아이템들. 숫자면 갯수만큼 복제를 한다.
groupKey	string \| number	✔️		추가할 아이템에 설정할 그룹 키. 생략하면 값이 자동으로 생성된다.

removePlaceholders

placeholder들을 삭제한다.

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
type	"start" \| "end" \| {groupKey: string \| number}			groupkey에 해당하는 placeholder들을 삭제한다. "start" 또는 "end" 일 때 해당 방향의 모든 placeholder들을 삭제한다.

setStatus

getStatus() 메서드가 저장한 정보로 InfiniteGrid 모듈의 상태를 설정한다.

Returns: this

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
status	InfiniteGridStatus			InfiniteGrid 모듈의 status 객체.
useFirstRender	boolean	✔️		첫 렌더링이 이미 되어있는지 여부.

removeGroupByIndex

index에 해당하는 그룹을 제거 한다.

Returns: this

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
index	number

removeGroupByKey

key에 해당하는 그룹을 제거 한다.

Returns: this

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
key	number \| string

removeByIndex

index에 해당하는 아이템을 제거 한다.

Returns: this

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
index	number

removeByKey

key에 해당하는 아이템을 제거 한다.

Returns: this

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
key	string \| number

updateItems

아이템들의 사이즈를 업데이트하고 렌더링을 한다.

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
items	InfiniteGridItem[]	✔️		업데이트할 아이템들.
options	RenderOptions	✔️	{}	렌더링을 하기 위한 옵션.

getItems

InfiniteGrid의 모든 아이템들을 반환한다.

Returns: InfiniteGridItem[]

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
includePlaceholders	boolean	✔️		placeholder에 해당하는 아이템들을 포함할지 여부.

getVisibleItems

InfiniteGrid의 보이는 아이템들을 반환한다.

Returns: InfiniteGridItem[]

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
includePlaceholders	boolean	✔️		placeholder에 해당하는 아이템들을 포함할지 여부.

getRenderingItems

InfiniteGrid의 렌더링 아이템들을 반환한다.

Returns: InfiniteGridItem[]

getGroups

InfiniteGrid의 모든 그룹들을 반환한다.

Returns: InfiniteGridGroup[]

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
includePlaceholders	boolean	✔️		placeholder에 해당하는 그룹들을 포함할지 여부.

getVisibleGroups

InfiniteGrid의 보이는 그룹들을 반환한다.

Returns: InfiniteGridGroup[]

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
includePlaceholders	boolean	✔️		placeholder에 해당하는 그룹들을 포함할지 여부.

wait

데이터를 요청하기 위해 대기 상태로 설정한다.

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
direction	"start" \| "end"	✔️	DIRECTION.END	데이터를 추가하기 위한 방향.

ready

데이터 요청이 끝났다면 준비 상태로 설정한다.

isWait

데이터를 요청하기 위해 대기 상태로 설정되어 있는지 여부를 반환한다.

destroy

인스턴스와 이벤트를 해제하고 컨테이너와 엘리먼트들의 CSS를 되돌린다.

Returns: void

trigger

inherited

커스텀 이벤트를 발생시킨다

Returns: this

컴포넌트 자신의 인스턴스

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
event	string \| ComponentEvent			발생할 커스텀 이벤트의 이름 또는 ComponentEvent의 인스턴스
params	Array<any> \| $ts:...			커스텀 이벤트가 발생할 때 전달할 데이터

import Component, { ComponentEvent } from "@egjs/component";

class Some extends Component<{
  beforeHi: ComponentEvent<{ foo: number; bar: string }>;
  hi: { foo: { a: number; b: boolean } };
  someEvent: (foo: number, bar: string) => void;
  someOtherEvent: void; // When there's no event argument
}> {
  some(){
    if(this.trigger("beforeHi")){ // When event call to stop return false.
      this.trigger("hi");// fire hi event.
    }
  }
}

const some = new Some();
some.on("beforeHi", e => {
  if(condition){
    e.stop(); // When event call to stop, `hi` event not call.
  }
  // `currentTarget` is component instance.
  console.log(some === e.currentTarget); // true

  typeof e.foo; // number
  typeof e.bar; // string
});
some.on("hi", e => {
  typeof e.foo.b; // boolean
});
// If you want to more know event design. You can see article.
// https://github.com/naver/egjs-component/wiki/How-to-make-Component-event-design%3F

once

inherited

이벤트가 한번만 실행된다.

Returns: this

컴포넌트 자신의 인스턴스

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
eventName	string \| $ts:...			등록할 이벤트의 이름 또는 이벤트 이름-핸들러 오브젝트
handlerToAttach	function \| $ts:...	✔️		등록할 이벤트의 핸들러 함수

import Component, { ComponentEvent } from "@egjs/component";

class Some extends Component<{
  hi: ComponentEvent;
}> {
  hi() {
    alert("hi");
  }
  thing() {
    this.once("hi", this.hi);
  }
}

var some = new Some();
some.thing();
some.trigger(new ComponentEvent("hi"));
// fire alert("hi");
some.trigger(new ComponentEvent("hi"));
// Nothing happens

hasOn

inherited

컴포넌트에 이벤트가 등록됐는지 확인한다.

Returns: boolean

이벤트 등록 여부

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
eventName	string			등록 여부를 확인할 이벤트의 이름

import Component from "@egjs/component";

class Some extends Component<{
  hi: void;
}> {
  some() {
    this.hasOn("hi");// check hi event.
  }
}

on

inherited

컴포넌트에 이벤트를 등록한다.

Returns: this

컴포넌트 자신의 인스턴스

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
eventName	string \| $ts:...			등록할 이벤트의 이름 또는 이벤트 이름-핸들러 오브젝트
handlerToAttach	function \| $ts:...	✔️		등록할 이벤트의 핸들러 함수

import Component, { ComponentEvent } from "@egjs/component";

class Some extends Component<{
  hi: void;
}> {
  hi() {
    console.log("hi");
  }
  some() {
    this.on("hi",this.hi); //attach event
  }
}

off

inherited

컴포넌트에 등록된 이벤트를 해제한다.
eventName이 주어지지 않았을 경우 모든 이벤트 핸들러를 제거한다.
handlerToAttach가 주어지지 않았을 경우 eventName에 해당하는 모든 이벤트 핸들러를 제거한다.

Returns: this

컴포넌트 자신의 인스턴스

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
eventName	string \| $ts:...	✔️		해제할 이벤트의 이름
handlerToDetach	function \| $ts:...	✔️		해제할 이벤트의 핸들러 함수

import Component, { ComponentEvent } from "@egjs/component";

class Some extends Component<{
  hi: void;
}> {
  hi() {
    console.log("hi");
  }
  some() {
    this.off("hi",this.hi); //detach event
  }
}

Events

changeScroll

스크롤하면 발생하는 이벤트이다.

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
e	InfiniteGrid.OnChangeScroll			이벤트에 전달되는 데이터 객체

requestAppend

스크롤이 끝에 도달하거나 virtual 그룹에 대한 데이터가 필요한 경우 이벤트가 발생한다.

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
e	InfiniteGrid.OnRequestAppend			이벤트에 전달되는 데이터 객체

requestPrepend

스크롤이 끝에 도달하거나 virtual 그룹에 대한 데이터가 필요한 경우 이벤트가 발생한다.

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
e	InfiniteGrid.OnRequestPrepend			이벤트에 전달되는 데이터 객체

contentError

스크롤이 끝에 도달하거나 virtual 그룹에 대한 데이터가 필요한 경우 이벤트가 발생한다.

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
e	InfiniteGrid.OnContentError			이벤트에 전달되는 데이터 객체

renderComplete

InfiniteGrid가 렌더링이 완료됐을 때 이벤트가 발생한다.

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
e	InfiniteGrid.OnRenderComplete			이벤트에 전달되는 데이터 객체

constructor​

Methods​

renderItems​

getWrapperElement​

getScrollContainerElement​

getContainerElement​

syncItems​

setCursors​

getStartCursor​

getEndCursor​

append​

prepend​

insert​

getStatus​

setPlaceholder​

setLoading​

appendPlaceholders​

prependPlaceholders​

removePlaceholders​

setStatus​

removeGroupByIndex​

removeGroupByKey​

removeByIndex​

removeByKey​

updateItems​

getItems​

getVisibleItems​

getRenderingItems​

getGroups​

getVisibleGroups​

wait​

ready​

isWait​

destroy​

trigger​

once​

hasOn​

on​

off​

Events​

changeScroll​

requestAppend​

requestPrepend​

contentError​

renderComplete​

constructor

Methods

renderItems

getWrapperElement

getScrollContainerElement

getContainerElement

syncItems

setCursors

getStartCursor

getEndCursor

append

prepend

insert

getStatus

setPlaceholder

setLoading

appendPlaceholders

prependPlaceholders

removePlaceholders

setStatus

removeGroupByIndex

removeGroupByKey

removeByIndex

removeByKey

updateItems

getItems

getVisibleItems

getRenderingItems

getGroups

getVisibleGroups

wait

ready

isWait

destroy

trigger

once

hasOn

on

off

Events

changeScroll

requestAppend

requestPrepend

contentError

renderComplete