Version: 4.12.0

InfiniteGrid

class InfiniteGrid extends Component

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

constructor

new InfiniteGrid(wrapper, options)

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
wrapper	HTMLElement \| string			A base element for a module
options	Options			The option object of the InfiniteGrid module

<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

Rearrange items to fit the grid and render them. When rearrange is complete, the renderComplete event is fired.

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
options	RenderOptions	✔️	{}	Options for rendering.

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

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

getWrapperElement

Returns the wrapper element specified by the user.

getScrollContainerElement

Returns the container element corresponding to the scroll area.

getContainerElement

Returns the container element containing item elements.

syncItems

When items change, it synchronizes and renders items.

Returns: this

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
items	InfiniteGridItemInfo[]			Options for rendering.

setCursors

Change the currently visible groups.

Returns: this

PARAMETER	TYPE	OPTIONAL	DESCRIPTION
startCursor	number		first index of visible groups.
endCursor	number		last index of visible groups.
useFirstRender	boolean	✔️	Whether the first rendering has already been done.

getStartCursor

Returns the first index of visible groups.

Returns: number

getEndCursor

Returns the last index of visible groups.

Returns: number

append

Add items at the bottom(right) of the grid.

Returns: this

- An instance of a module itself

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
items	InfiniteGridInsertedItems			items to be added
groupKey	string \| number	✔️		The group key to be configured in items. It is automatically generated by default.

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

Add items at the top(left) of the grid.

Returns: this

- An instance of a module itself

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
items	InfiniteGridInsertedItems			items to be added
groupKey	string \| number	✔️		The group key to be configured in items. It is automatically generated by default.

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

Add items to a specific index.

Returns: this

- An instance of a module itself

PARAMETER	TYPE	OPTIONAL	DESCRIPTION
index	number		index to add
items	InfiniteGridInsertedItems		items to be added
groupKey	string \| number	✔️	The group key to be configured in items. It is automatically generated by default.

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

insertByGroupIndex

Add items based on group index.

Returns: this

- An instance of a module itself

PARAMETER	TYPE	OPTIONAL	DESCRIPTION
groupIndex	number		group index to add
items	InfiniteGridInsertedItems		items to be added
groupKey	string \| number	✔️	The group key to be configured in items. It is automatically generated by default.

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

getStatus

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.

Returns: InfiniteGridStatus

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
type	STATUS_TYPE	✔️		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.
includePlaceholders	boolean	✔️		Whether to include items corresponding to placeholders.

setPlaceholder

You can set placeholders to restore status or wait for items to be added.

Returns: this

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

setLoading

You can set placeholders to restore status or wait for items to be added.

Returns: this

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

appendPlaceholders

Add the placeholder at the end.

Returns: InsertedPlaceholdersResult

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
items	number \| InfiniteGridItemStatus[]			Items that correspond to placeholders. If it is a number, it duplicates the number of copies.
groupKey	string \| number	✔️		The group key to be configured in items. It is automatically generated by default.

prependPlaceholders

Add the placeholder at the start.

Returns: InsertedPlaceholdersResult

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
items	number \| InfiniteGridItemStatus[]			Items that correspond to placeholders. If it is a number, it duplicates the number of copies.
groupKey	string \| number	✔️		The group key to be configured in items. It is automatically generated by default.

removePlaceholders

Remove placeholders

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
type	"start" \| "end" \| {groupKey: string \| number}			Remove the placeholders corresponding to the groupkey. When "start" or "end", remove all placeholders in that direction.

setStatus

Sets the status of the InfiniteGrid module with the information returned through a call to the getStatus() method.

Returns: this

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
status	InfiniteGridStatus			status object of the InfiniteGrid module.
useFirstRender	boolean	✔️		Whether the first rendering has already been done.

removeGroupByIndex

Removes the group corresponding to index.

Returns: this

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
index	number

removeGroupByKey

Removes the group corresponding to key.

Returns: this

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
key	number \| string

removeByIndex

Removes the item corresponding to index.

Returns: this

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
index	number

removeByKey

Removes the item corresponding to key.

Returns: this

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
key	string \| number

updateItems

Update the size of the items and render them.

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
items	InfiniteGridItem[]	✔️		Items to be updated.
options	RenderOptions	✔️	{}	Options for rendering.

getItems

Return all items of InfiniteGrid.

Returns: InfiniteGridItem[]

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
includePlaceholders	boolean	✔️		Whether to include items corresponding to placeholders.

getVisibleItems

Return visible items of InfiniteGrid.

Returns: InfiniteGridItem[]

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
includePlaceholders	boolean	✔️		Whether to include items corresponding to placeholders.

getRenderingItems

Return rendering items of InfiniteGrid.

Returns: InfiniteGridItem[]

getGroups

Return all groups of InfiniteGrid.

Returns: InfiniteGridGroup[]

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
includePlaceholders	boolean	✔️		Whether to include groups corresponding to placeholders.

getVisibleGroups

Return visible groups of InfiniteGrid.

Returns: InfiniteGridGroup[]

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
includePlaceholders	boolean	✔️		Whether to include groups corresponding to placeholders.

wait

Set to wait to request data.

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
direction	"start" \| "end"	✔️	DIRECTION.END	direction in which data will be added.

ready

When the data request is complete, it is set to ready state.

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
hasNoData	boolean	✔️

isWait

Returns whether it is set to wait to request data.

destroy

Releases the instnace and events and returns the CSS of the container and elements.

Returns: void

trigger

inherited

Trigger a custom event.

Returns: this

An instance of the component itself

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
event	string \| ComponentEvent			The name of the custom event to be triggered or an instance of the ComponentEvent
params	Array<any> \| $ts:...			Event data to be sent when triggering a custom event

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

Executed event just one time.

Returns: this

An instance of the component itself

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
eventName	string \| $ts:...			The name of the event to be attached or an event name - event handler mapped object.
handlerToAttach	function \| $ts:...	✔️		The handler function of the event to be attached

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

Checks whether an event has been attached to a component.

Returns: boolean

Indicates whether the event is attached.

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
eventName	string			The name of the event to be attached

import Component from "@egjs/component";

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

on

inherited

Attaches an event to a component.

Returns: this

An instance of a component itself

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
eventName	string \| $ts:...			The name of the event to be attached or an event name - event handler mapped object.
handlerToAttach	function \| $ts:...	✔️		The handler function of the event to be attached

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

Detaches an event from the component.
If the eventName is not given this will detach all event handlers attached.
If the handlerToDetach is not given, this will detach all event handlers for eventName.

Returns: this

An instance of a component itself

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
eventName	string \| $ts:...	✔️		The name of the event to be detached
handlerToDetach	function \| $ts:...	✔️		The handler function of the event to be detached

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

This event is fired when scrolling.

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
e	InfiniteGrid.OnChangeScroll			The object of data to be sent to an event

requestAppend

The event is fired when scrolling reaches the end or when data for a virtual group is required.

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
e	InfiniteGrid.OnRequestAppend			The object of data to be sent to an event

requestPrepend

The event is fired when scrolling reaches the start or when data for a virtual group is required.

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
e	InfiniteGrid.OnRequestPrepend			The object of data to be sent to an event

contentError

The event is fired when scrolling reaches the start or when data for a virtual group is required.

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
e	InfiniteGrid.OnContentError			The object of data to be sent to an event

renderComplete

This event is fired when the InfiniteGrid has completed rendering.

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
e	InfiniteGrid.OnRenderComplete			The object of data to be sent to an event

constructor​

Methods​

renderItems​

getWrapperElement​

getScrollContainerElement​

getContainerElement​

syncItems​

setCursors​

getStartCursor​

getEndCursor​

append​

prepend​

insert​

insertByGroupIndex​

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

insertByGroupIndex

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