Class: 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>
var some = new eg.InfiniteGrid("#grid").on("layoutComplete", function(e) {
  // ...
});

// If you already have items in the container, call "layout" method.
some.layout();
</script>

Extends

• eg.Component

Classes

FrameLayout

GridLayout

JustifiedLayout

PackingLayout

SquareLayout

Members

staticeg.InfiniteGrid.VERSIONString

Version info string

버전정보 문자열

Example

eg.InfiniteGrid.VERSION;  // ex) 3.3.3

Methods

append(elements, groupKey){eg.InfiniteGrid}

InfiniteGrid.ts, line 215

Adds a card element at the bottom of a layout. This method is available only if the isProcessing() method returns false.

카드 엘리먼트를 레이아웃 아래에 추가한다. isProcessing() 메서드의 반환값이 'false'일 때만 이 메서드를 사용할 수 있다
이 메소드는 isProcessing()의 반환값이 false일 경우에만 사용 가능하다.

• elements
  Type: HTMLElement[] | IJQuery | string[] | string

  elements Array of the card elements to be added

  추가할 카드 엘리먼트의 배열

• groupKey optional
  Type: string | number

  The group key to be configured in a card element. It is automatically generated by default.
  

  추가할 카드 엘리먼트에 설정할 그룹 키. 생략하면 값이 자동으로 생성된다.

Returns:

Type	Description
eg.InfiniteGrid	An instance of a module itself 모듈 자신의 인스턴스

Example

infinitegrid.append("<div class='item'>test1</div><div class='item'>test2</div>");

infinitegrid.append(["<div class='item'>test1</div>", "<div class='item'>test2</div>"]);

infinitegrid.append([HTMLElement1, HTMLElement2]);

infinitegrid.append(jQuery(["<div class='item'>test1</div>", "<div class='item'>test2</div>"]));

clear(){eg.InfiniteGrid}

InfiniteGrid.ts, line 580

Clears added card elements and data.

추가된 카드 엘리먼트와 데이터를 모두 지운다.

Returns:

Type	Description
eg.InfiniteGrid	An instance of a module itself 모듈 자신의 인스턴스

destroy()

InfiniteGrid.ts, line 899

Destroys elements, properties, and events used on a grid layout.

그리드 레이아웃에 사용한 엘리먼트와 속성, 이벤트를 해제한다

endLoading(userStyle){eg.InfiniteGrid}

InfiniteGrid.ts, line 697

End loading after startLoading() for append/prepend

append/prepend하길 위해 startLoading() 호출해선 걸었던 로딩을 끝낸다.

• userStyle (default: {display: "none"}) optional
  Type: Object

  custom style to apply to this loading bar for end

  로딩 시작을 위한 로딩 바에 적용할 커스텀 스타일

Returns:

Type	Description
eg.InfiniteGrid	An instance of a module itself 모듈 자신의 인스턴스

getGroupKeys(includeCached){Array}

InfiniteGrid.ts, line 483

Returns the list of group keys which belongs to card elements currently being maintained. You can use the append() or prepend() method to configure group keys so that multiple card elements can be managed at once. If you do not use these methods to configure group keys, groupkey is automatically generated.

현재 유지하고 있는 카드 엘리먼트의 그룹 키 목록을 반환한다. 여러 개의 카드 엘리먼트를 묶어서 관리할 수 있도록 append() 메서드나 prepend() 메서드에서 그룹 키를 지정할 수 있다. append() 메서드나 prepend() 메서드에서 그룹 키를 지정하지 않았다면 자동으로 그룹키가 생성된다.

• includeCached optional
  Type: Boolean

  Indicates whether to include the cached groups.

  캐싱된 그룹을 포함할지 여부를 나타낸다.

Returns:

Type	Description
Array	List of group keys 그룹 키의 목록

getItem(groupIndex, itemIndex){IInfiniteGridItem | undefined}

InfiniteGrid.ts, line 752

Retrieves the item via index or the element.

index 또는 element를 통해 아이템을 가져온다.

• groupIndex (default: 0) optional
  Type: number | HTMLElement

  The element corresponding to item or the index of the group where the item is in position

  item에 해당하는 element 또는 해당 item이 있는 group의 index

• itemIndex optional
  Type: number

  If groupIndex is used, the index of the item in the group

  groupIndex를 사용할 경우 해당 group에 있는 Item의 index

Returns:

Type	Description
IInfiniteGridItem | undefined	The item containing the content, size and position,etc content, size, position 등이 담겨있는 item 정보

Example

ig.getItem(0, 0);
ig.getItem(element);

 {
  el: HTMLElement,
  content: "<div>...</div>",
  size: {width: ..., height: ...},
  rect: {top: ..., left: ..., width: ..., height: ...},
 }

getItems(includeCached){IInfiniteGridItem[]}

InfiniteGrid.ts, line 304

Returns the layouted items.

레이아웃된 아이템들을 반환한다.

• includeCached (default: false) optional
  Type: Boolean

  Indicates whether to include the cached items.

  캐싱된 아이템을 포함할지 여부를 나타낸다.

Returns:

Type	Description
IInfiniteGridItem[]	List of items 아이템의 목록

getLoadingBar(isAppend){Element}

InfiniteGrid.ts, line 652

Returns the element of loading bar.

로딩 바의 element를 반환한다.

• isAppend (default: currentLoadingBar|true) optional
  Type: Boolean

  Checks whether the card element is added to the append () method.

  카드 엘리먼트가 append() 메서드로 추가 할 것인지 확인한다.

Returns:

Type	Description
Element	The element of loading bar. 로딩 바의 element

getStatus(startKey, endKey){Object}

InfiniteGrid.ts, line 494

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.

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

• startKey optional
  Type: string | number
• endKey optional
  Type: string | number

Returns:

Type	Description
Object	State object of the eg.InfiniteGrid module eg.InfiniteGrid 모듈의 상태 객체

inherited hasOn(eventName){boolean}

Component.ts, line 247

Checks whether an event has been attached to a component.

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

• eventName
  Type: string

  The name of the event to be attached

  등록 여부를 확인할 이벤트의 이름

Returns:

Type	Description
boolean	Indicates whether the event is attached. 이벤트 등록 여부

Example

class Some extends eg.Component {
  some() {
    this.hasOn("hi");// check hi event.
  }
}

isLoading(){Boolean}

InfiniteGrid.ts, line 643

Checks whether data is loading.

데이터 로딩 중인지 확인한다

Returns:

Type	Description
Boolean	Indicates whether data is loading 데이터 로딩 진행 중 여부

isProcessing(){Boolean}

InfiniteGrid.ts, line 635

Checks whether a card element or data is being added.

카드 엘리먼트 추가 또는 데이터 로딩이 진행 중인지 확인한다

Returns:

Type	Description
Boolean	Indicates whether a card element or data is being added 카드 엘리먼트 추가 또는 데이터 로딩 진행 중 여부

layout(isRelayout){eg.InfiniteGrid}

InfiniteGrid.ts, line 398

Rearranges a layout.

레이아웃을 다시 배치한다.

• isRelayout (default: true) optional
  Type: Boolean

  Indicates whether a card element is being relayouted

  카드 엘리먼트 재배치 여부

Returns:

Type	Description
eg.InfiniteGrid	An instance of a module itself 모듈 자신의 인스턴스

moveTo(index, itemIndex){eg.InfiniteGrid}

InfiniteGrid.ts, line 818

Move to some group or item position.

해당하는 그룹 또는 아이템의 위치로 이동한다.

• index optional
  Type: Number

  group's index

  그룹의 index

• itemIndex (default: -1) optional
  Type: Number

  item's index

  그룹의 index

Returns:

Type	Description
eg.InfiniteGrid	An instance of a module itself 모듈 자신의 인스턴스

inherited off(eventName, handlerToDetach){this}

Component.ts, line 315

Detaches an event from the component.

컴포넌트에 등록된 이벤트를 해제한다

• eventName optional
  Type: string | ...

  The name of the event to be detached

  해제할 이벤트의 이름

• handlerToDetach optional
  Type: function | ...

  The handler function of the event to be detached

  해제할 이벤트의 핸들러 함수

Returns:

Type	Description
this	An instance of a component itself 컴포넌트 자신의 인스턴스

Example

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

inherited on(eventName, handlerToAttach){this}

Component.ts, line 271

Attaches an event to a component.

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

• eventName
  Type: string | ...

  The name of the event to be attached

  등록할 이벤트의 이름

• handlerToAttach optional
  Type: function | ...

  The handler function of the event to be attached

  등록할 이벤트의 핸들러 함수

Returns:

Type	Description
this	An instance of a component itself 컴포넌트 자신의 인스턴스

Example

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

inherited once(eventName, handlerToAttach){this}

Component.ts, line 213

Executed event just one time.

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

• eventName
  Type: string | ...

  The name of the event to be attached

  등록할 이벤트의 이름

• handlerToAttach optional
  Type: function | ...

  The handler function of the event to be attached

  등록할 이벤트의 핸들러 함수

Returns:

Type	Description
this	An instance of a component itself 컴포넌트 자신의 인스턴스

Example

class Some extends eg.Component {
hi() {
  alert("hi");
}
thing() {
  this.once("hi", this.hi);
}

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

prepend(elements, groupKey){eg.InfiniteGrid}

InfiniteGrid.ts, line 236

Adds a card element at the top of a layout. This method is available only if the isProcessing() method returns false.

카드 엘리먼트를 레이아웃의 위에 추가한다. isProcessing() 메서드의 반환값이 'false'일 때만 이 메서드를 사용할 수 있다

• elements
  Type: HTMLElement[] | IJQuery | string[] | string

  elements Array of the card elements to be added

  추가할 카드 엘리먼트 배열

• groupKey optional
  Type: string | number

  The group key to be configured in a card element. It is automatically generated by default.
  

  추가할 카드 엘리먼트에 설정할 그룹 키. 생략하면 값이 자동으로 생성된다.

Returns:

Type	Description
eg.InfiniteGrid	An instance of a module itself 모듈 자신의 인스턴스

Example

infinitegrid.prepend("<div class='item'>test1</div><div class='item'>test2</div>");

infinitegrid.prepend(["<div class='item'>test1</div>", "<div class='item'>test2</div>"]);

infinitegrid.prepend([HTMLElement1, HTMLElement2]);

infinitegrid.prepend(jQuery(["<div class='item'>test1</div>", "<div class='item'>test2</div>"]));

remove(item, isLayout){Object}

InfiniteGrid.ts, line 472

Removes a item element on a grid layout.

그리드 레이아웃의 카드 엘리먼트를 삭제한다.

• item
  Type: HTMLElement

  element to be removed

  삭제될 아이템 엘리먼트

• isLayout (default: true) optional
  Type:

Returns:

Type	Description
Object	Removed items information 삭제된 아이템들 정보

removeByIndex(groupIndex, itemIndex, isLayout){Object}

InfiniteGrid.ts, line 452

Removes a item corresponding to an index on a grid layout.

그리드 레이아웃에서 인덱스에 해당하는 아이템 삭제한다.

• groupIndex
  Type: number

  Index of group corresponding to item to remove

  삭제할 아이템에 해당하는 그룹의 인덱스

• itemIndex
  Type: number

  Index of item to remove on group

  그룹에서 삭제할 아이템의 인덱스

• isLayout (default: true) optional
  Type:

Returns:

Type	Description
Object	Removed items information 삭제된 아이템들 정보

setLayout(LayoutKlass, options){eg.InfiniteGrid}

InfiniteGrid.ts, line 281

Specifies the Layout class to use.

사용할 Layout 클래스를 지정한다.

• LayoutKlass
  Type: Class | Object

  The Layout class to use or an instance of a layout moudle

  사용할 Layout 클래스 또는 레이아웃 모듈의 인스턴스

• options (default: {}) optional
  Type: Object

  Options to apply to the Layout.

  Layout에 적용할 옵션

Returns:

Type	Description
eg.InfiniteGrid	An instance of a module itself 모듈 자신의 인스턴스

Example

infinitegrid.setLayout(eg.InfiniteGrid.GridLayout, {

margin: 10,

align: "start"

});

infinitegrid.setLayout(eg.InfiniteGrid.JustifiedLayout, {

margin: 10,

minSize: 100,

maxSize: 200

});

infinitegrid.setLayout(eg.InfiniteGrid.SquareLayout, {

margin: 10,

column: 2

});

infinitegrid.setLayout(eg.InfiniteGrid.FrameLayout, {

margin: 10,

frame: [

[1, 2],

[4, 3],

]

});

infinitegrid.setLayout(eg.InfiniteGrid.PackingLayout, {

margin: 10,

aspectRatio: 1.5

});

var layout = new eg.InfiniteGrid.GridLayout({

margin: 10,

align: "start"

});

infinitegrid.setLayout(layout);

setLoadingBar(userLoadingBar){eg.InfiniteGrid}

InfiniteGrid.ts, line 594

Specifies the Loading Bar to use for append or prepend items.

아이템을 append 또는 prepend 하기 위해 사용할 로딩 바를 지정한다.

• userLoadingBar (default: {}) optional
  Type: String | Object

  The loading bar HTML markup or element or element selector

  로딩 바 HTML 또는 element 또는 selector

Returns:

Type	Description
eg.InfiniteGrid	An instance of a module itself 모듈 자신의 인스턴스

setStatus(status, applyScrollPos, syncElements){eg.InfiniteGrid}

InfiniteGrid.ts, line 510

Sets the state of the eg.InfiniteGrid module with the information returned through a call to the getStatue() method.

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

• status
  Type: Object

  State object of the eg.InfiniteGrid module

  eg.InfiniteGrid 모듈의 상태 객체

• applyScrollPos (default: true) optional
  Type: boolean

  Checks whether to scroll

  스크롤의 위치를 복원할지 결정한다.

• syncElements optional
  Type: HTMLElement[]

Returns:

Type	Description
eg.InfiniteGrid	An instance of a module itself 모듈 자신의 인스턴스

startLoading(isAppend, userStyle){eg.InfiniteGrid}

InfiniteGrid.ts, line 662

Start loading for append/prepend during loading data.

데이터가 로딩되는 동안 append/prepend하길 위해 로딩을 시작한다.

• isAppend (default: true) optional
  Type: Boolean

  Checks whether the card element is added to the append () method.

  카드 엘리먼트가 append() 메서드로 추가 할 것인지 확인한다.

• userStyle (default: {display: "block"}) optional
  Type: Object

  custom style to apply to this loading bar for start.

  로딩 시작을 위한 로딩 바에 적용할 커스텀 스타일

Returns:

Type	Description
eg.InfiniteGrid	An instance of a module itself 모듈 자신의 인스턴스

inherited trigger(eventName, customEvent, restParam){boolean}

Component.ts, line 154

Triggers a custom event.

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

• eventName
  Type: string | ...

  The name of the custom event to be triggered

  발생할 커스텀 이벤트의 이름

• customEvent
  Type: object | ...

  Event data to be sent when triggering a custom event

  커스텀 이벤트가 발생할 때 전달할 데이터

• restParam
  Type: Array.<any>

  Additional parameters when triggering a custom event

  커스텀 이벤트가 발생할 때 필요시 추가적으로 전달할 데이터

Returns:

Type	Description
boolean	Indicates whether the event has occurred. If the stop() method is called by a custom event handler, it will return false and prevent the event from occurring. Ref 이벤트 발생 여부. 커스텀 이벤트 핸들러에서 stop() 메서드를 호출하면 'false'를 반환하고 이벤트 발생을 중단한다. 참고

Example

class Some extends eg.Component {
  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.
  }
});
some.on("hi", (e) => {
  // `currentTarget` is component instance.
  console.log(some === e.currentTarget); // true
});
// 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

updateItem(groupIndex, itemIndex){eg.InfiniteGrid}

InfiniteGrid.ts, line 784

Updates the item via index or the element.

index 또는 element를 통해 아이템을 업데이트한다.

• groupIndex (default: 0) optional
  Type: number | HTMLElement

  The element corresponding to item or the index of the group where the item is in position

  item에 해당하는 element 또는 해당 item이 있는 group의 index

• itemIndex optional
  Type: number

  If groupIndex is used, the index of the item in the group

  groupIndex를 사용할 경우 해당 group에 있는 Item의 index

Returns:

Type	Description
eg.InfiniteGrid	An instance of a module itself 모듈 자신의 인스턴스

Example

element.innerHTML = "2";

element.style.height = "400px";

ig.updateItem(element);

ig.updateItem(0, 0);

updateItems(){eg.InfiniteGrid}

InfiniteGrid.ts, line 804

Update the currently displayed items.

현재보여주는 아이템들을 업데이트한다.

Returns:

Type	Description
eg.InfiniteGrid	An instance of a module itself 모듈 자신의 인스턴스

Example

element.innerHTML = "2";
element.style.height = "400px";

element2.innerHTML = "2";
element2.style.height = "400px";

ig.updateItems();

Type Definitions

eg.InfiniteGrid.IErrorCallbackOptionsTSInterface

Error Interface

에러 인터페이스

Properties:

Name	Type	Description
target	HTMLImageElement
element	HTMLElement
items	IInfiniteGridItem[]
item	IInfiniteGridItem
itemIndex	number
totalIndex	number
replace	(src?: string | HTMLElement) => void
replaceItem	(content: string) => void
remove	() => void
removeItem	() => void

eg.InfiniteGrid.IInfiniteGridItemTSInterface

Item Interface

Item Interface

Properties:

Name	Type	Argument	Description
groupKey	string | number		Key in group containing item 아이템을 포함하고 있는 그룹의 키
itemKey	string | number	<optional>	html of element in item 아이템의 엘리먼트 html
content	HTMLElement		Element for the item 아이템에 있는 엘리먼트
el	IInfiniteGridItemElement | null	<optional>	Size of elements of the rendering when the first time. 처음 렌더링 했을 때의 엘리먼트의 사이즈
orgSize	ISize | null	<optional>	Currently seen the size of element 현재 보여지는 엘리먼트의 사이즈
size	ISize | null	<optional>	Position and size of the element shown in layout 레이아웃할 때 보여지는 포지션과 사이즈
rect	IPosition & Partial<ISize>		The position and size of the element that was seen in the layout before 전에 레이아웃했을 때 보였었던 포지션과 사이즈
prevRect	IPosition & Partial<ISize> | null	<optional>
needUpdate	boolean
mounted	boolean
[key: string]	any

eg.InfiniteGrid.IPositionTSInterface

Position Interface

Position Interface

Properties:

Name	Type	Description
top	number
left	number

eg.InfiniteGrid.ISizeTSInterface

Size Interface

Size Interface

Properties:

Name	Type	Description
width	number
height	number

Events

append

InfiniteGrid.ts, line 1310

This event is fired when a card element must be added at the bottom or right of a layout because there is no card to be displayed on screen when a user scrolls near bottom or right.

카드 엘리먼트가 레이아웃의 아래나 오른쪽에 추가돼야 할 때 발생하는 이벤트. 사용자가 아래나 오른쪽으로 스크롤해서 화면에 표시될 카드가 없을 때 발생한다

• param
  Type: Object

  The object of data to be sent to an event

  이벤트에 전달되는 데이터 객체

• groupKey
  Type: String | Number

  The group key of the first group visible on the screen

  화면에 보여지는 마지막 그룹의 그룹키

• param.isTrusted
  Type: Boolean

  Returns true if an event was generated by the user action, or false if it was caused by a script or API call

  사용자의 액션에 의해 이벤트가 발생하였으면 true, 스크립트나 API호출에 의해 발생하였을 경우에는 false를 반환한다.

• param.startLoading
  Type: function

  Start loading for append loading data.

  뒷쪽에 추가되는 데이터 로딩을 시작한다.

  • userStyle
    Type: Object

    The custom style to apply to this loading bar for start.

    로딩을 시작할 때 로딩 바에 적용될 사용자 스타일

• param.endLoading
  Type: function

  End loading after startLoading() for append/prepend loading data.

  데이터 로딩을 위해 append/prepend startLoading() 호출 이후 로딩을 끝낸다.

  • userStyle
    Type: Object

    The custom style to apply to this loading bar for start.

    로딩이 끝날 때 로딩 바에 적용될 사용자 스타일

change

InfiniteGrid.ts, line 1398

This event is fired when the user scrolls.

사용자가 스크롤 할 경우 발생하는 이벤트.

• param
  Type: Object

  The object of data to be sent to an event

  이벤트에 전달되는 데이터 객체

  • isForward
    Type: Boolean

    Indicates whether the scroll progression direction is forward or backword.

    스크롤 진행방향이 앞쪽으로 진행하는 지, 뒤쪽으로 진행하는지를 나타낸다.

  • scrollPos
    Type: Number

    Current scroll position value relative to the infiniteGrid container element.

    infiniteGrid 컨테이너 엘리먼트 기준의 현재 스크롤 위치값

  • orgScrollPos
    Type: Boolean

    Current position of the scroll

    현재 스크롤 위치값

  • isTrusted
    Type: Boolean

    Returns true if an event was generated by the user action, or false if it was caused by a script or API call

    사용자의 액션에 의해 이벤트가 발생하였으면 true, 스크립트나 API호출에 의해 발생하였을 경우에는 false를 반환한다.

• options.horizontal
  Type: Boolean

  Direction of the scroll movement (true: horizontal, false: vertical)

  스크롤 이동 방향 (true 가로방향, false 세로방향

contentError

InfiniteGrid.ts, line 1225

This event is fired when an error occurs in the content.

콘텐츠 로드에 에러가 날 때 발생하는 이벤트.

• e
  Type: eg.InfiniteGrid.IErrorCallbackOptions

  The object of data to be sent to an event

  이벤트에 전달되는 데이터 객체

  • element optional
    Type: HTMLElement

    Appending card's image element.

    추가 되는 카드의 콘텐츠 엘리먼트

  • target optional
    Type: target

    The item's element with error images.

    에러난 콘텐츠를 가지고 있는 아이템의 엘리먼트

  • items optional
    Type: Array.<Item>

    The items being added.

    화면에 추가중인 아이템들

  • item optional
    Type: Item

    The item with error images.

    에러난 콘텐츠를 가지고 있는 아이템

  • index optional
    Type: number

    The item's index with error images.

    에러난 콘텐츠를 가지고 있는 아이템의 인덱스

  • totalIndex optional
    Type: number

    The item's index with error images in all items.

    전체 아이템중 에러난 콘텐츠를 가지고 있는 아이템의 인덱스

  • remove optional
    Type: function

    In the contentError event, this method expects to remove the error image.

    콘텐츠 에러 이벤트에서 이 메서드는 에러난 콘텐츠를 삭제한다.

  • removeItem optional
    Type: function

    In the contentError event, this method expects to remove the item with the error image.

    콘텐츠 에러 이벤트에서 이 메서드는 에러난 콘텐츠를 가지고 있는 아이템을 삭제한다.

  • replace optional
    Type: function

    In the contentError event, this method expects to replace the error image's source or element. If the replacement was done externally, call replace().

    콘텐츠 에러 이벤트에서 이 메서드는 에러난 엘리먼트를 교체한다. 외부에서 교체를 했다면 replace()로 호출해라.

  • replaceItem optional
    Type: function

    In the contentError event, this method expects to replace the item's contents with the error image.

    콘텐츠 에러 이벤트에서 이 메서드는 에러난 콘텐츠를 가지고 있는 아이템의 내용을 교체한다.

Example

ig.on("contentError", e => {

e.remove();

e.removeItem();

e.replace(imageElement);

// If the replacement was done externally

e.replace();

e.replaceItem("item html");

});

imageError

InfiniteGrid.ts, line 1199

This event is fired when an error occurs in the image.

이미지 로드에 에러가 날 때 발생하는 이벤트.

• e
  Type: eg.InfiniteGrid.IErrorCallbackOptions

  The object of data to be sent to an event

  이벤트에 전달되는 데이터 객체

  • element optional
    Type: HTMLElement

    Appending card's image element.

    추가 되는 카드의 이미지 엘리먼트

  • target optional
    Type: target

    The item's element with error images.

    에러난 이미지를 가지고 있는 아이템의 엘리먼트

  • items optional
    Type: Array.<Item>

    The items being added.

    화면에 추가중인 아이템들

  • item optional
    Type: Item

    The item with error images.

    에러난 이미지를 가지고 있는 아이템

  • index optional
    Type: number

    The item's index with error images.

    에러난 이미지를 가지고 있는 아이템의 인덱스

  • totalIndex optional
    Type: number

    The item's index with error images in all items.

    전체 아이템중 에러난 이미지를 가지고 있는 아이템의 인덱스

  • remove optional
    Type: function

    In the imageError event, this method expects to remove the error image.

    이미지 에러 이벤트에서 이 메서드는 에러난 이미지를 삭제한다.

  • removeItem optional
    Type: function

    In the imageError event, this method expects to remove the item with the error image.

    이미지 에러 이벤트에서 이 메서드는 에러난 이미지를 가지고 있는 아이템을 삭제한다.

  • replace optional
    Type: function

    In the imageError event, this method expects to replace the error image's source or element.

    이미지 에러 이벤트에서 이 메서드는 에러난 이미지의 주소 또는 엘리먼트를 교체한다.

  • replaceItem optional
    Type: function

    In the imageError event, this method expects to replace the item's contents with the error image.

    이미지 에러 이벤트에서 이 메서드는 에러난 이미지를 가지고 있는 아이템의 내용을 교체한다.

Example

ig.on("imageError", e => {

e.remove();

e.removeItem();

e.replace("http://...jpg");

e.replace(imageElement);

e.replaceItem("item html");

});

layoutComplete

InfiniteGrid.ts, line 1457

This event is fired when layout is successfully arranged through a call to the append(), prepend(), or layout() method.

레이아웃 배치가 완료됐을 때 발생하는 이벤트. append() 메서드나 prepend() 메서드, layout() 메서드 호출 후 카드의 배치가 완료됐을 때 발생한다

• param
  Type: Object

  The object of data to be sent to an event

  이벤트에 전달되는 데이터 객체

  • target
    Type: Array

    Rearranged card elements

    재배치된 카드 엘리먼트들

  • fromCache
    Type: Boolean

    Check whether these items are cache or not

    해당 아이템들이 캐시인지 아닌지 확인한다.

  • isLayout
    Type: Boolean

    Returns true if this is an event called by resize event or layout method. Returns false if this is an event called by adding an item.

    해당 이벤트가 리사이즈 이벤트 또는 layout() 메서드를 통해 호출됐으면 true, 아이템 추가로 호출됐으면 false를 반환한다.

  • isAppend
    Type: Boolean

    Checks whether the append() method is used to add a card element. It returns true even though the layoutComplete event is fired after the layout() method is called.

    카드 엘리먼트가 append() 메서드로 추가됐는지 확인한다. layout() 메서드가 호출된 후 layoutComplete 이벤트가 발생해도 'true'를 반환한다.

  • isScroll
    Type: Boolean

    Checks whether scrolling has occurred after the append(), prepend(), ..., etc method is called

    append, prend 등 호출 후 스크롤이 생겼는지 확인한다.

  • scrollPos
    Type: Number

    Current scroll position value relative to the infiniteGrid container element.

    infiniteGrid 컨테이너 엘리먼트 기준의 현재 스크롤 위치값

  • orgScrollPos
    Type: Number

    Current position of the scroll

    현재 스크롤 위치값

  • size
    Type: Number

    The size of container element

    컨테이너 엘리먼트의 크기

  • isTrusted
    Type: Boolean

    Returns true if an event was generated by the user action, or false if it was caused by a script or API call

    사용자의 액션에 의해 이벤트가 발생하였으면 true, 스크립트나 API호출에 의해 발생하였을 경우에는 false를 반환한다.

  • endLoading
    Type: function

    End loading after startLoading() for append/prepend loading data.

    데이터 로딩을 위해 append/prepend startLoading() 호출 이후 로딩을 끝낸다.

    • userStyle
      Type: Object

      The custom style to apply to this loading bar for start.

      로딩이 끝날 때 로딩 바에 적용될 사용자 스타일

prepend

InfiniteGrid.ts, line 1343

This event is fired when a card element must be added at the top or left of a layout because there is no card to be displayed on screen when a user scrolls near top or left.

카드가 레이아웃의 위나 왼쪽에 추가돼야 할 때 발생하는 이벤트. 사용자가 위나 왼쪽으로 스크롤해서 화면에 표시될 카드가 없을 때 발생한다.

• param
  Type: Object

  The object of data to be sent to an event

  이벤트에 전달되는 데이터 객체

• groupKey
  Type: String | Number

  The group key of the first group visible on the screen

  화면에 보여지는 첫번째 그룹의 그룹키

• param.isTrusted
  Type: Boolean

  Returns true if an event was generated by the user action, or false if it was caused by a script or API call

  사용자의 액션에 의해 이벤트가 발생하였으면 true, 스크립트나 API호출에 의해 발생하였을 경우에는 false를 반환한다.

• param.startLoading
  Type: function

  Start loading for prepend loading data.

  앞쪽에 추가되는 데이터 로딩을 시작한다.

  • userStyle
    Type: Object

    The custom style to apply to this loading bar for start.

    로딩을 시작할 때 로딩 바에 적용될 사용자 스타일

• param.endLoading
  Type: function

  End loading after startLoading() for append/prepend loading data.

  데이터 로딩을 위해 append/prepend startLoading() 호출 이후 로딩을 끝낸다.

  • userStyle
    Type: Object

    The custom style to apply to this loading bar for start.

    로딩이 끝날 때 로딩 바에 적용될 사용자 스타일