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
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
#
Constructornew 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 |
#
Methods#
renderItemsRearrange 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();
#
getWrapperElementReturns the wrapper element specified by the user.
#
getScrollContainerElementReturns the container element corresponding to the scroll area.
#
getContainerElementReturns the container element containing item elements.
#
syncItemsWhen items change, it synchronizes and renders items.
Returns: this
PARAMETER | TYPE | OPTIONAL | DEFAULT | DESCRIPTION |
---|---|---|---|---|
items | InfiniteGridItemInfo[] | Options for rendering. |
#
setCursorsChange the currently visible groups.
Returns: this
PARAMETER | TYPE | OPTIONAL | DEFAULT | 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. |
#
getStartCursorReturns the first index of visible groups.
Returns: number
#
getEndCursorReturns the last index of visible groups.
Returns: number
#
appendAdd 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]);
#
prependAdd 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]);
#
insertAdd items to a specific index.
Returns: this
- An instance of a module itself
PARAMETER | TYPE | OPTIONAL | DEFAULT | 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]);
#
getStatusReturns 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. |
#
setPlaceholderYou 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. |
#
setLoadingYou 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. |
#
appendPlaceholdersAdd 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. |
#
prependPlaceholdersAdd 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. |
#
removePlaceholdersRemove 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. |
#
setStatusSets 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. |
#
removeGroupByIndexRemoves the group corresponding to index.
Returns: this
PARAMETER | TYPE | OPTIONAL | DEFAULT | DESCRIPTION |
---|---|---|---|---|
index | number |
#
removeGroupByKeyRemoves the group corresponding to key.
Returns: this
PARAMETER | TYPE | OPTIONAL | DEFAULT | DESCRIPTION |
---|---|---|---|---|
key | number | string |
#
removeByIndexRemoves the item corresponding to index.
Returns: this
PARAMETER | TYPE | OPTIONAL | DEFAULT | DESCRIPTION |
---|---|---|---|---|
index | number |
#
removeByKeyRemoves the item corresponding to key.
Returns: this
PARAMETER | TYPE | OPTIONAL | DEFAULT | DESCRIPTION |
---|---|---|---|---|
key | string | number |
#
updateItemsUpdate the size of the items and render them.
PARAMETER | TYPE | OPTIONAL | DEFAULT | DESCRIPTION |
---|---|---|---|---|
items | InfiniteGridItem[] | โ๏ธ | Items to be updated. | |
options | RenderOptions | โ๏ธ | {} | Options for rendering. |
#
getItemsReturn all items of InfiniteGrid.
Returns: InfiniteGridItem[]
PARAMETER | TYPE | OPTIONAL | DEFAULT | DESCRIPTION |
---|---|---|---|---|
includePlaceholders | boolean | โ๏ธ | Whether to include items corresponding to placeholders. |
#
getVisibleItemsReturn visible items of InfiniteGrid.
Returns: InfiniteGridItem[]
PARAMETER | TYPE | OPTIONAL | DEFAULT | DESCRIPTION |
---|---|---|---|---|
includePlaceholders | boolean | โ๏ธ | Whether to include items corresponding to placeholders. |
#
getRenderingItemsReturn rendering items of InfiniteGrid.
Returns: InfiniteGridItem[]
#
getGroupsReturn all groups of InfiniteGrid.
Returns: InfiniteGridGroup[]
PARAMETER | TYPE | OPTIONAL | DEFAULT | DESCRIPTION |
---|---|---|---|---|
includePlaceholders | boolean | โ๏ธ | Whether to include groups corresponding to placeholders. |
#
getVisibleGroupsReturn visible groups of InfiniteGrid.
Returns: InfiniteGridGroup[]
PARAMETER | TYPE | OPTIONAL | DEFAULT | DESCRIPTION |
---|---|---|---|---|
includePlaceholders | boolean | โ๏ธ | Whether to include groups corresponding to placeholders. |
#
waitSet to wait to request data.
PARAMETER | TYPE | OPTIONAL | DEFAULT | DESCRIPTION |
---|---|---|---|---|
direction | "start" | "end" | โ๏ธ | DIRECTION.END | direction in which data will be added. |
#
readyWhen the data request is complete, it is set to ready state.
#
isWaitReturns whether it is set to wait to request data.
#
destroyReleases the instnace and events and returns the CSS of the container and elements.
Returns: void
#
triggerTrigger 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
#
onceExecuted 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
#
hasOnChecks 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. }}
#
onAttaches 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 }}
#
offDetaches 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#
changeScrollThis event is fired when scrolling.
PARAMETER | TYPE | OPTIONAL | DEFAULT | DESCRIPTION |
---|---|---|---|---|
e | InfiniteGrid.OnChangeScroll | The object of data to be sent to an event |
#
requestAppendThe 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 |
#
requestPrependThe 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 |
#
contentErrorThe 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 |
#
renderCompleteThis 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 |