본문으로 건너뛰기
버전: 4.0.0

FrameInfiniteGrid

class FrameInfiniteGrid extends InfiniteGrid

'Frame'는 '1행의 너비에 맞게 꼭 들어찬'이라는 의미를 가진 인쇄 용어다. FrameInfiniteGrid는 용어의 의미대로 너비가 주어진 사이즈를 기준으로 아이템이 가득 차도록 배치하는 Grid다.

Constructor

new FrameInfiniteGrid(container, options)
PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
containerHTMLElement | string모듈을 적용할 기준 엘리먼트
optionsFrameInfiniteGridOptionsFrameGrid 모듈의 옵션 객체

Methods

renderItems

inherited

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

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
optionsRenderOptions✔️{}렌더링을 하기 위한 옵션.
import { MasonryInfiniteGrid } from "@egjs/infinitegrid";
const grid = new MasonryInfiniteGrid();

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

getWrapperElement

inherited

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

getScrollContainerElement

inherited

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

getContainerElement

inherited

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

syncItems

inherited

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

Returns: this

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
itemsInfiniteGridItemInfo[]렌더링을 하기 위한 옵션.

setCursors

inherited

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

Returns: this

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
startCursornumber보이는 그룹의 첫번째 index.
endCursornumber보이는 그룹의 마지막 index.
useFirstRenderboolean✔️첫 렌더링이 이미 되어있는지 여부.

getStartCursor

inherited

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

Returns: number

getEndCursor

inherited

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

Returns: number

append

inherited

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

Returns: this

  • 모듈 자신의 인스턴스
PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
itemsInfiniteGridInsertedItems추가할 아이템들
groupKeystring | 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

inherited

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

Returns: this

  • 모듈 자신의 인스턴스
PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
itemsInfiniteGridInsertedItems추가할 아이템들
groupKeystring | 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

inherited

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

Returns: this

  • 모듈 자신의 인스턴스
PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
indexnumber추가하기 위한 index
itemsInfiniteGridInsertedItems추가할 아이템들
groupKeystring | 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

inherited

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

Returns: InfiniteGridStatus

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
typeSTATUS_TYPE✔️STATUS_TYPE.NOT_REMOVE = 모든 아이템들의 정보를 가져온다. STATUS_TYPE.REMOVE_INVISIBLE_ITEMS = 보이는 아이템들의 정보만 가져온다. STATUS_TYPE.MINIMIZE_INVISIBLE_ITEMS = 안보이는 아이템들을 압축한다. placeholder로 대체가 가능하다. STATUS_TYPE.MINIMIZE_INVISIBLE_GROUPS = 안보이는 그룹을 압축한다.

setPlaceholder

inherited

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

Returns: this

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
infoPartial<InfiniteGridItemStatus> | nullplaceholder의 status

setLoading

inherited

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

Returns: this

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
infoPartial<InfiniteGridItemStatus> | nullplaceholder의 status

appendPlaceholders

inherited

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

Returns: InsertedPlaceholdersResult

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
itemsnumber | InfiniteGridItemStatus[]placeholder에 해당하는 아이템들. 숫자면 갯수만큼 복제를 한다.
groupKeystring | number✔️추가할 아이템에 설정할 그룹 키. 생략하면 값이 자동으로 생성된다.

prependPlaceholders

inherited

placeholder들을 처음에 추가한다.

Returns: InsertedPlaceholdersResult

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
itemsnumber | InfiniteGridItemStatus[]placeholder에 해당하는 아이템들. 숫자면 갯수만큼 복제를 한다.
groupKeystring | number✔️추가할 아이템에 설정할 그룹 키. 생략하면 값이 자동으로 생성된다.

removePlaceholders

inherited

placeholder들을 삭제한다.

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

setStatus

inherited

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

Returns: this

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
statusInfiniteGridStatusInfiniteGrid 모듈의 status 객체.
useFirstRenderboolean✔️첫 렌더링이 이미 되어있는지 여부.

removeGroupByIndex

inherited

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

Returns: this

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
indexnumber

removeGroupByKey

inherited

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

Returns: this

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
keynumber | string

removeByIndex

inherited

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

Returns: this

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
indexnumber

removeByKey

inherited

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

Returns: this

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
keystring | number

updateItems

inherited

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

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
itemsInfiniteGridItem[]✔️업데이트할 아이템들.
optionsRenderOptions✔️{}렌더링을 하기 위한 옵션.

getItems

inherited

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

Returns: InfiniteGridItem[]

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
includePlaceholdersboolean✔️placeholder에 해당하는 아이템들을 포함할지 여부.

getVisibleItems

inherited

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

Returns: InfiniteGridItem[]

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
includePlaceholdersboolean✔️placeholder에 해당하는 아이템들을 포함할지 여부.

getRenderingItems

inherited

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

Returns: InfiniteGridItem[]

getGroups

inherited

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

Returns: InfiniteGridGroup[]

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
includePlaceholdersboolean✔️placeholder에 해당하는 그룹들을 포함할지 여부.

getVisibleGroups

inherited

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

Returns: InfiniteGridGroup[]

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
includePlaceholdersboolean✔️placeholder에 해당하는 그룹들을 포함할지 여부.

wait

inherited

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

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
direction"start" | "end"✔️DIRECTION.END데이터를 추가하기 위한 방향.

ready

inherited

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

isWait

inherited

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

destroy

inherited

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

Returns: void

trigger

inherited

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

Returns: this

  • 컴포넌트 자신의 인스턴스
PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
eventstring | ComponentEvent발생할 커스텀 이벤트의 이름 또는 ComponentEvent의 인스턴스
paramsArray<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

  • 컴포넌트 자신의 인스턴스
PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
eventNamestring | $ts:...등록할 이벤트의 이름 또는 이벤트 이름-핸들러 오브젝트
handlerToAttachfunction | $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

  • 이벤트 등록 여부
PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
eventNamestring등록 여부를 확인할 이벤트의 이름
import Component from "@egjs/component";

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

on

inherited

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

Returns: this

  • 컴포넌트 자신의 인스턴스
PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
eventNamestring | $ts:...등록할 이벤트의 이름 또는 이벤트 이름-핸들러 오브젝트
handlerToAttachfunction | $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

  • 컴포넌트 자신의 인스턴스
PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
eventNamestring | $ts:...✔️해제할 이벤트의 이름
handlerToDetachfunction | $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

inherited

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

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
eInfiniteGrid.OnChangeScroll이벤트에 전달되는 데이터 객체

requestAppend

inherited

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

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
eInfiniteGrid.OnRequestAppend이벤트에 전달되는 데이터 객체

requestPrepend

inherited

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

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
eInfiniteGrid.OnRequestPrepend이벤트에 전달되는 데이터 객체

contentError

inherited

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

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
eInfiniteGrid.OnContentError이벤트에 전달되는 데이터 객체

renderComplete

inherited

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

PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
eInfiniteGrid.OnRenderComplete이벤트에 전달되는 데이터 객체