Grid

class Grid

Properties

Methods

Events

gap
defaultDirection
useFit
preserveUIOnDestroy
outlineLength
outlineSize

applyGrid
getContainerElement
getItems
getChildren
setItems
getContainerInlineSize
getOutlines
setOutlines
syncElements
updateItems
renderItems
getStatus
setStatus
getComputedOutlineSize
getComputedOutlineLength
destroy
trigger
once
hasOn
on
off

contentError
renderComplete

constructor

new Grid(containerElement, options)

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
containerElement	HTMLElement | string			A base element for a module
options	Partial<Options>	✔️	{}	The option object of the Grid module

Properties

gap

Gap used to create space around items.

Type: $ts:Grid.GridOptions["gap"]

Default: 0

import { MasonryGrid } from "@egjs/grid";

const grid = new MasonryGrid(container, {
  gap: 0,
});

grid.gap = 5;

defaultDirection

The default direction value when direction is not set in the render option.

Type: $ts:Grid.GridOptions["defaultDirection"]

Default: "end"

import { MasonryGrid } from "@egjs/grid";

const grid = new MasonryGrid(container, {
  defaultDirection: "end",
});

grid.defaultDirection = "start";

useFit

Whether to move the outline to 0 when the top is empty when rendering. However, if it overflows above the top, the outline is forced to 0. (default: true)

Type: $ts:Grid.GridOptions["useFit"]

Default: true

import { MasonryGrid } from "@egjs/grid";

const grid = new MasonryGrid(container, {
  useFit: true,
});

grid.useFit = false;

preserveUIOnDestroy

Whether to preserve the UI of the existing container or item when destroying.

Type: $ts:Grid.GridOptions["preserveUIOnDestroy"]

Default: false

import { MasonryGrid } from "@egjs/grid";

const grid = new MasonryGrid(container, {
  preserveUIOnDestroy: false,
});

grid.preserveUIOnDestroy = true;

outlineLength

The number of outlines. If the number of outlines is 0, it is calculated according to the type of grid.

Type: $ts:Grid.GridOptions["outlineLength"]

Default: 0

import { MasonryGrid } from "@egjs/grid";

const grid = new MasonryGrid(container, {
  outlineLength: 0,
  outlineSize: 0,
});

grid.outlineLength = 3;

outlineSize

The size of the outline. If the outline size is 0, it is calculated according to the grid type.

Type: $ts:Grid.GridOptions["outlineSize"]

Default: 0

import { MasonryGrid } from "@egjs/grid";

const grid = new MasonryGrid(container, {
  outlineLength: 0,
  outlineSize: 0,
});

grid.outlineSize = 300;

Methods

applyGrid

Apply the CSS rect of items to fit the Grid and calculate the outline.

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
direcion	"start" | "end"			The direction to apply the Grid. ("end": start to end, "start": end to start)
outline	Array<number>			The start outline to apply the Grid.

getContainerElement

Return Container Element.

Returns: HTMLElement

getItems

Return items.

Returns: GridItem[]

getChildren

Returns the children of the container element.

Returns: HTMLElement[]

setItems

Set items.

Returns: this

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
items	GridItem[]			The items to set.

getContainerInlineSize

Gets the container's inline size. ("width" if horizontal is false, otherwise "height")

Returns: number

getOutlines

Returns the outlines of the start and end of the Grid.

Returns: GridOutlines

setOutlines

Set outlines.

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
outlines	GridOutlines			The outlines to set.

syncElements

When elements change, it synchronizes and renders items.

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

updateItems

Update the size of the items and render them.

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

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 { MasonryGrid } from "@egjs/grid";
const grid = new MasonryGrid();

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

getStatus

Returns current status such as item's position, size. The returned status can be restored with the setStatus() method.

Returns: GridStatus

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
minimize	boolean	✔️		Whether to minimize the status of the item. (default: false)

setStatus

Set status of the Grid module with the status returned through a call to the getStatus() method.

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
status	GridStatus

getComputedOutlineSize

Get the inline size corresponding to outline.

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
items	GridItem[]	✔️	this.items	Items to get outline size.

getComputedOutlineLength

Get the length corresponding to outline.

Returns: number

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
items	GridItem[]	✔️	this.items	Items to get outline length.

destroy

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

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
Options	DestroyOptions	✔️	{}	for destroy.

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

contentError

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

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

grid.on("contentError", e => {
  e.update();
});

renderComplete

This event is fired when the Grid has completed rendering.

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

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