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
| + +```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 {#once} + +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
| + +```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 {#hasOn} + +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
| + +```ts +import Component from "@egjs/component"; + +class Some extends Component<{ + hi: void; +}> { + some() { + this.hasOn("hi");// check hi event. + } +} +``` + +### on {#on} + +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
| + +```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 {#off} + +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.
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
| + +```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 {#event-changeScroll} diff --git a/packages/docs/docs/api/Grid.mdx b/packages/docs/docs/api/Grid.mdx index d76ca85bf..b1fc572ae 100644 --- a/packages/docs/docs/api/Grid.mdx +++ b/packages/docs/docs/api/Grid.mdx @@ -12,7 +12,7 @@ class Gridfor destroy.
| +### trigger {#trigger} + +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
| + +```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 {#once} + +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
| + +```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 {#hasOn} + +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
| + +```ts +import Component from "@egjs/component"; + +class Some extends Component<{ + hi: void; +}> { + some() { + this.hasOn("hi");// check hi event. + } +} +``` + +### on {#on} + +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
| + +```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 {#off} + +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.
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
| + +```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 ### contentError {#event-contentError} diff --git a/packages/docs/docs/api/InfiniteGrid.mdx b/packages/docs/docs/api/InfiniteGrid.mdx index b6a1f5477..82e5ec995 100644 --- a/packages/docs/docs/api/InfiniteGrid.mdx +++ b/packages/docs/docs/api/InfiniteGrid.mdx @@ -14,7 +14,7 @@ class InfiniteGrid extends ComponentTrigger 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
| + +```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 {#once} + +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
| + +```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 {#hasOn} + +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
| + +```ts +import Component from "@egjs/component"; + +class Some extends Component<{ + hi: void; +}> { + some() { + this.hasOn("hi");// check hi event. + } +} +``` + +### on {#on} + +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
| + +```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 {#off} + +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.
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
| + +```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 {#event-changeScroll} diff --git a/packages/docs/docs/api/JustifiedInfiniteGrid.mdx b/packages/docs/docs/api/JustifiedInfiniteGrid.mdx index 6158a683a..6854e91ab 100644 --- a/packages/docs/docs/api/JustifiedInfiniteGrid.mdx +++ b/packages/docs/docs/api/JustifiedInfiniteGrid.mdx @@ -14,7 +14,7 @@ class JustifiedInfiniteGridTrigger 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
| + +```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 {#once} + +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
| + +```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 {#hasOn} + +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
| + +```ts +import Component from "@egjs/component"; + +class Some extends Component<{ + hi: void; +}> { + some() { + this.hasOn("hi");// check hi event. + } +} +``` + +### on {#on} + +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
| + +```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 {#off} + +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.
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
| + +```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 {#event-changeScroll} diff --git a/packages/docs/docs/api/MasonryInfiniteGrid.mdx b/packages/docs/docs/api/MasonryInfiniteGrid.mdx index 159109699..f85c5d337 100644 --- a/packages/docs/docs/api/MasonryInfiniteGrid.mdx +++ b/packages/docs/docs/api/MasonryInfiniteGrid.mdx @@ -14,7 +14,7 @@ class MasonryInfiniteGridTrigger 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
| + +```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 {#once} + +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
| + +```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 {#hasOn} + +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
| + +```ts +import Component from "@egjs/component"; + +class Some extends Component<{ + hi: void; +}> { + some() { + this.hasOn("hi");// check hi event. + } +} +``` + +### on {#on} + +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
| + +```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 {#off} + +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.
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
| + +```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 {#event-changeScroll} diff --git a/packages/docs/docs/api/MasonryInfiniteGridOptions.mdx b/packages/docs/docs/api/MasonryInfiniteGridOptions.mdx index ecf9a0437..ca88395a6 100644 --- a/packages/docs/docs/api/MasonryInfiniteGridOptions.mdx +++ b/packages/docs/docs/api/MasonryInfiniteGridOptions.mdx @@ -35,6 +35,7 @@ custom_edit_url: null |columnSize|number|0|The size of the columns. If it is 0, it is calculated as the size of the first item in items. Can be used instead of outlineSize.
The size ratio(inlineSize / contentSize) of the columns. 0 is not set.
Align of the position of the items. If you want to use stretch, be sure to set column, columnSize or maxStretchColumnSize option. ("start", "center", "end", "justify", "stretch")
Content direction alignment of items. “Masonry” is sorted in the form of masonry. Others are applied as content direction alignment, similar to vertical-align of inline-block.
If you set multiple columns (data-grid-column), the screen may look strange.
Difference Threshold for Counting Columns. Since offsetSize is calculated by rounding, the number of columns may not be accurate.
If stretch is used, the column can be automatically calculated by setting the maximum size of the column that can be stretched.
Direction of the scroll movement. (true: horizontal, false: vertical) If horizontal is false, inlinePos is left, inlineSize is width, contentPos is top, and contentSize is height. If horizontal is true, inlinePos is top, inlineSize is height, contentPos is left, and contentSize is width.
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
| + +```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 {#once} + +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
| + +```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 {#hasOn} + +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
| + +```ts +import Component from "@egjs/component"; + +class Some extends Component<{ + hi: void; +}> { + some() { + this.hasOn("hi");// check hi event. + } +} +``` + +### on {#on} + +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
| + +```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 {#off} + +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.
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
| + +```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 {#event-changeScroll} diff --git a/packages/docs/i18n/ko/docusaurus-plugin-content-docs/current/api/FrameInfiniteGrid.mdx b/packages/docs/i18n/ko/docusaurus-plugin-content-docs/current/api/FrameInfiniteGrid.mdx index d33115b9f..71ed0aae2 100644 --- a/packages/docs/i18n/ko/docusaurus-plugin-content-docs/current/api/FrameInfiniteGrid.mdx +++ b/packages/docs/i18n/ko/docusaurus-plugin-content-docs/current/api/FrameInfiniteGrid.mdx @@ -14,7 +14,7 @@ class FrameInfiniteGridstretch를 사용하고 싶다면 column, columnSize 또는 maxStretchColumnSize 옵션을 설정해라. ("start", "center", "end", "justify", "stretch")|
+|contentAlign|MasonryGridVerticalAlign|"masonry"|아이템들의 Content 방향의 정렬. "masonry"는 masonry 형태로 정렬이 된다. 그 외는 inline-block의 vertical-align과 유사하게 content 방향 정렬로 적용이 된다.칼럼(data-grid-column )을 여러개 설정하면 화면이 이상하게 보일 수 있다. |
|columnCalculationThreshold|number|1|칼럼 개수를 계산하기 위한 차이 임계값. offset 사이즈는 반올림으로 게산하기 때문에 정확하지 않을 수 있다.|
|maxStretchColumnSize|number|Infinity|stretch를 사용한 경우 최대로 늘릴 수 있는 column의 사이즈를 설정하여 column을 자동 계산할 수 있다.|
|horizontal|boolean|false|스크롤 이동 방향. (true: 가로방향, false: 세로방향) horizontal이 false 면 inlinePos는 left, inlineSize는 width, contentPos는 top, contentSize는 height다. horizontal이 true면 inlinePos는 top, inlineSize는 height, contentPos는 left, contentSize는 width이다.|
diff --git a/packages/docs/i18n/ko/docusaurus-plugin-content-docs/current/api/PackingInfiniteGrid.mdx b/packages/docs/i18n/ko/docusaurus-plugin-content-docs/current/api/PackingInfiniteGrid.mdx
index f25421198..45df0e42f 100644
--- a/packages/docs/i18n/ko/docusaurus-plugin-content-docs/current/api/PackingInfiniteGrid.mdx
+++ b/packages/docs/i18n/ko/docusaurus-plugin-content-docs/current/api/PackingInfiniteGrid.mdx
@@ -14,7 +14,7 @@ PackingInfiniteGrid는 아이템의 본래 크기에 따른 비중을 해치지
inlinePos는 left, inlineSize는 width, contentPos는 top, contentSize는 height다. horizontal이 true면 inlinePos는 top, inlineSize는 height, contentPos는 left, contentSize는 width이다.|
+|percentage|Array<"position" \| "size"> \| boolean|false|item의 css size와 position를 %로 설정할지 여부.|
+|isEqualSize|boolean|false|카드 엘리먼트의 크기가 동일한지 여부. 배치될 카드 엘리먼트의 크기가 모두 동일할 때 이 옵션을 'true'로 설정하면 레이아웃 배치 성능을 높일 수 있다.|
+|isConstantSize|boolean|false|모든 카드 엘리먼트의 크기가 불변일 때 이 옵션을 'true'로 설정하면 레이아웃 배치 성능을 높일 수 있다.|
+|gap|number|5|아이템들 사이의 공간.|
+|attributePrefix|string|"data-grid-"|엘리먼트의 데이타 속성에 사용할 접두사.|
+|resizeDebounce|number|100|리사이즈 이벤트에 설정할 디바운스 시간.(단위: ms)|
+|maxResizeDebounce|number|0|리사이즈 이벤트를 디바운스할 수 있는 최대 시간. (0은 미설정이다)|
+|autoResize|boolean|true|window의 resize 이벤트 이후 자동으로 resize()메소드를 호출할지의 여부.|
+|useFit|boolean|true|렌더링시 상단이 비어있을 때 아웃라인을 0으로 이동시킬지 여부. 하지만 상단보다 넘치는 경우 아웃라인을 0으로 강제 이동한다.|
+|useTransform|boolean|false|left, top css 속성 쓰는 대신 transform 속성을 사용할지 여부.|
+|renderOnPropertyChange|boolean|true|property의 변화를 통해 자동으로 render를 할지 여부.|
+|preserveUIOnDestroy|boolean|false|destroy 시 기존 컨테이너, 아이템의 UI를 보존할지 여부.|
+|defaultDirection|"start" \| "end"|"end"|render옵션에서 direction을 미설정시의 기본 방향값.|
+|outlineLength|number|0|outline의 개수. 아웃라인의 개수가 0이라면 grid의 종류에 따라 계산이 된다.|
+|outlineSize|number|0| outline의 사이즈. 만약 outline의 사이즈가 0이면, grid의 종류에 따라 계산이 된다. |
+|useRoundedSize|boolean|true|사이즈를 반올림된 사이즈(offsetWidth, offsetHeight)로 가져올지 여부. container에 transform이 적용되어 있다면 true로 설정해라. false면 getBoundingClientRect를 통해 사이즈를 가져온다.|
+|useResizeObserver|boolean|false|autoResize 옵션 사용시 container의 사이즈 변화 감지를 위해 ResizeObserver 이벤트를 사용할지 여부.|
+|observeChildren|boolean|false|useResizeObserver옵션을 사용한다면 children의 사이즈 변화 감지 여부.|
+|externalItemRenderer|ItemRenderer \| null||외부에서 직접 ItemRenderer를 설정할 수 있다.|
+|externalContainerManager|ContainerManager \| null||외부에서 직접 ContainerManager를 설정할 수 있다.|
+|frame|number[][]|[]|Grid의 모양. 2d 배열([contentPos][inlinePos])로 아이템의 모양과 순서를 설정할 수 있다. 숫자로 배열을 채운만큼 아이템을 배치할 수 있으며 0과 공백은 빈 공간이다. 아이템들의 순서는 배열을 채운 숫자값의 오름차순대로 배치가 된다. (default: [])|
+|useFrameFill|boolean|true| 다음 프레임이 전 프레임에 이어 붙일 수 있는지 있는지 확인한다.|
+|rectSize|number \| {inlineSize: number, contentSize: number}|0|1x1 직사각형 크기. 0이면 frame의 column의 개수에 의해 결정된다.|
+|horizontal|boolean|false|스크롤 이동 방향. (true: 가로방향, false: 세로방향) horizontal이 false 면 inlinePos는 left, inlineSize는 width, contentPos는 top, contentSize는 height다. horizontal이 true면 inlinePos는 top, inlineSize는 height, contentPos는 left, contentSize는 width이다.|
+|percentage|Array<"position" \| "size"> \| boolean|false|item의 css size와 position를 %로 설정할지 여부.|
+|isEqualSize|boolean|false|카드 엘리먼트의 크기가 동일한지 여부. 배치될 카드 엘리먼트의 크기가 모두 동일할 때 이 옵션을 'true'로 설정하면 레이아웃 배치 성능을 높일 수 있다.|
+|isConstantSize|boolean|false|모든 카드 엘리먼트의 크기가 불변일 때 이 옵션을 'true'로 설정하면 레이아웃 배치 성능을 높일 수 있다.|
+|gap|number|5|아이템들 사이의 공간.|
+|attributePrefix|string|"data-grid-"|엘리먼트의 데이타 속성에 사용할 접두사.|
+|resizeDebounce|number|100|리사이즈 이벤트에 설정할 디바운스 시간.(단위: ms)|
+|maxResizeDebounce|number|0|리사이즈 이벤트를 디바운스할 수 있는 최대 시간. (0은 미설정이다)|
+|autoResize|boolean|true|window의 resize 이벤트 이후 자동으로 resize()메소드를 호출할지의 여부.|
+|useFit|boolean|true|렌더링시 상단이 비어있을 때 아웃라인을 0으로 이동시킬지 여부. 하지만 상단보다 넘치는 경우 아웃라인을 0으로 강제 이동한다.|
+|useTransform|boolean|false|left, top css 속성 쓰는 대신 transform 속성을 사용할지 여부.|
+|renderOnPropertyChange|boolean|true|property의 변화를 통해 자동으로 render를 할지 여부.|
+|preserveUIOnDestroy|boolean|false|destroy 시 기존 컨테이너, 아이템의 UI를 보존할지 여부.|
+|defaultDirection|"start" \| "end"|"end"|render옵션에서 direction을 미설정시의 기본 방향값.|
+|outlineLength|number|0|outline의 개수. 아웃라인의 개수가 0이라면 grid의 종류에 따라 계산이 된다.|
+|outlineSize|number|0| outline의 사이즈. 만약 outline의 사이즈가 0이면, grid의 종류에 따라 계산이 된다. |
+|useRoundedSize|boolean|true|사이즈를 반올림된 사이즈(offsetWidth, offsetHeight)로 가져올지 여부. container에 transform이 적용되어 있다면 true로 설정해라. false면 getBoundingClientRect를 통해 사이즈를 가져온다.|
+|useResizeObserver|boolean|false|autoResize 옵션 사용시 container의 사이즈 변화 감지를 위해 ResizeObserver 이벤트를 사용할지 여부.|
+|observeChildren|boolean|false|useResizeObserver옵션을 사용한다면 children의 사이즈 변화 감지 여부.|
+|externalItemRenderer|ItemRenderer \| null||외부에서 직접 ItemRenderer를 설정할 수 있다.|
+|externalContainerManager|ContainerManager \| null||외부에서 직접 ContainerManager를 설정할 수 있다.|
+|container|boolean \| HTMLElement \| string \| Ref<HTMLElement>|false|container를 적용할 대상. false면 자기 자신, true면 container를 생성. string 또는 HTMLElement는 직접 대상을 지정.inlinePos는 left, inlineSize는 width, contentPos는 top, contentSize는 height다. horizontal이 true면 inlinePos는 top, inlineSize는 height, contentPos는 left, contentSize는 width이다.|
+|percentage|Array<"position" \| "size"> \| boolean|false|item의 css size와 position를 %로 설정할지 여부.|
+|isEqualSize|boolean|false|카드 엘리먼트의 크기가 동일한지 여부. 배치될 카드 엘리먼트의 크기가 모두 동일할 때 이 옵션을 'true'로 설정하면 레이아웃 배치 성능을 높일 수 있다.|
+|isConstantSize|boolean|false|모든 카드 엘리먼트의 크기가 불변일 때 이 옵션을 'true'로 설정하면 레이아웃 배치 성능을 높일 수 있다.|
+|gap|number|5|아이템들 사이의 공간.|
+|attributePrefix|string|"data-grid-"|엘리먼트의 데이타 속성에 사용할 접두사.|
+|resizeDebounce|number|100|리사이즈 이벤트에 설정할 디바운스 시간.(단위: ms)|
+|maxResizeDebounce|number|0|리사이즈 이벤트를 디바운스할 수 있는 최대 시간. (0은 미설정이다)|
+|autoResize|boolean|true|window의 resize 이벤트 이후 자동으로 resize()메소드를 호출할지의 여부.|
+|useFit|boolean|true|렌더링시 상단이 비어있을 때 아웃라인을 0으로 이동시킬지 여부. 하지만 상단보다 넘치는 경우 아웃라인을 0으로 강제 이동한다.|
+|useTransform|boolean|false|left, top css 속성 쓰는 대신 transform 속성을 사용할지 여부.|
+|renderOnPropertyChange|boolean|true|property의 변화를 통해 자동으로 render를 할지 여부.|
+|preserveUIOnDestroy|boolean|false|destroy 시 기존 컨테이너, 아이템의 UI를 보존할지 여부.|
+|defaultDirection|"start" \| "end"|"end"|render옵션에서 direction을 미설정시의 기본 방향값.|
+|outlineLength|number|0|outline의 개수. 아웃라인의 개수가 0이라면 grid의 종류에 따라 계산이 된다.|
+|outlineSize|number|0| outline의 사이즈. 만약 outline의 사이즈가 0이면, grid의 종류에 따라 계산이 된다. |
+|useRoundedSize|boolean|true|사이즈를 반올림된 사이즈(offsetWidth, offsetHeight)로 가져올지 여부. container에 transform이 적용되어 있다면 true로 설정해라. false면 getBoundingClientRect를 통해 사이즈를 가져온다.|
+|useResizeObserver|boolean|false|autoResize 옵션 사용시 container의 사이즈 변화 감지를 위해 ResizeObserver 이벤트를 사용할지 여부.|
+|observeChildren|boolean|false|useResizeObserver옵션을 사용한다면 children의 사이즈 변화 감지 여부.|
+|externalItemRenderer|ItemRenderer \| null||외부에서 직접 ItemRenderer를 설정할 수 있다.|
+|externalContainerManager|ContainerManager \| null||외부에서 직접 ContainerManager를 설정할 수 있다.|
+|container|boolean \| HTMLElement \| string \| Ref<HTMLElement>|false|container를 적용할 대상. false면 자기 자신, true면 container를 생성. string 또는 HTMLElement는 직접 대상을 지정.inlinePos는 left, inlineSize는 width, contentPos는 top, contentSize는 height다. horizontal이 true면 inlinePos는 top, inlineSize는 height, contentPos는 left, contentSize는 width이다.|
+|percentage|Array<"position" \| "size"> \| boolean|false|item의 css size와 position를 %로 설정할지 여부.|
+|isEqualSize|boolean|false|카드 엘리먼트의 크기가 동일한지 여부. 배치될 카드 엘리먼트의 크기가 모두 동일할 때 이 옵션을 'true'로 설정하면 레이아웃 배치 성능을 높일 수 있다.|
+|isConstantSize|boolean|false|모든 카드 엘리먼트의 크기가 불변일 때 이 옵션을 'true'로 설정하면 레이아웃 배치 성능을 높일 수 있다.|
+|gap|number|5|아이템들 사이의 공간.|
+|attributePrefix|string|"data-grid-"|엘리먼트의 데이타 속성에 사용할 접두사.|
+|resizeDebounce|number|100|리사이즈 이벤트에 설정할 디바운스 시간.(단위: ms)|
+|maxResizeDebounce|number|0|리사이즈 이벤트를 디바운스할 수 있는 최대 시간. (0은 미설정이다)|
+|autoResize|boolean|true|window의 resize 이벤트 이후 자동으로 resize()메소드를 호출할지의 여부.|
+|useFit|boolean|true|렌더링시 상단이 비어있을 때 아웃라인을 0으로 이동시킬지 여부. 하지만 상단보다 넘치는 경우 아웃라인을 0으로 강제 이동한다.|
+|useTransform|boolean|false|left, top css 속성 쓰는 대신 transform 속성을 사용할지 여부.|
+|renderOnPropertyChange|boolean|true|property의 변화를 통해 자동으로 render를 할지 여부.|
+|preserveUIOnDestroy|boolean|false|destroy 시 기존 컨테이너, 아이템의 UI를 보존할지 여부.|
+|defaultDirection|"start" \| "end"|"end"|render옵션에서 direction을 미설정시의 기본 방향값.|
+|outlineLength|number|0|outline의 개수. 아웃라인의 개수가 0이라면 grid의 종류에 따라 계산이 된다.|
+|outlineSize|number|0| outline의 사이즈. 만약 outline의 사이즈가 0이면, grid의 종류에 따라 계산이 된다. |
+|useRoundedSize|boolean|true|사이즈를 반올림된 사이즈(offsetWidth, offsetHeight)로 가져올지 여부. container에 transform이 적용되어 있다면 true로 설정해라. false면 getBoundingClientRect를 통해 사이즈를 가져온다.|
+|useResizeObserver|boolean|false|autoResize 옵션 사용시 container의 사이즈 변화 감지를 위해 ResizeObserver 이벤트를 사용할지 여부.|
+|observeChildren|boolean|false|useResizeObserver옵션을 사용한다면 children의 사이즈 변화 감지 여부.|
+|externalItemRenderer|ItemRenderer \| null||외부에서 직접 ItemRenderer를 설정할 수 있다.|
+|externalContainerManager|ContainerManager \| null||외부에서 직접 ContainerManager를 설정할 수 있다.|
+|columnRange|number \| number[]|[1, 8]| 한 줄에 들어가는 아이템의 최소, 최대 개수.|
+|rowRange|number \| number[]|0| 한 그룹에 들어가는 행의 최소, 최대 개수, 0은 미설정이다.|
+|sizeRange|number \| number[]|[0, Infinity]|아이템이 조정되는 최소, 최대 사이즈. 계산이 되지 않는 경우 최소, 최대 사이즈를 벗어날 수 있다.|
+|displayedRow|number|-1|컨테이너 크기에 계산될 최대 row 개수. overflow: hidden을 설정하면 화면에 가릴 수 있다. -1은 미설정이다.|
+|isCroppedSize|boolean|false|row사이즈가 sizeRange에 벗어나면 크롭할지 여부. true로 설정하면 비율이 깨질 수 있다.|
+|horizontal|boolean|false|스크롤 이동 방향. (true: 가로방향, false: 세로방향) horizontal이 false 면 inlinePos는 left, inlineSize는 width, contentPos는 top, contentSize는 height다. horizontal이 true면 inlinePos는 top, inlineSize는 height, contentPos는 left, contentSize는 width이다.|
+|percentage|Array<"position" \| "size"> \| boolean|false|item의 css size와 position를 %로 설정할지 여부.|
+|isEqualSize|boolean|false|카드 엘리먼트의 크기가 동일한지 여부. 배치될 카드 엘리먼트의 크기가 모두 동일할 때 이 옵션을 'true'로 설정하면 레이아웃 배치 성능을 높일 수 있다.|
+|isConstantSize|boolean|false|모든 카드 엘리먼트의 크기가 불변일 때 이 옵션을 'true'로 설정하면 레이아웃 배치 성능을 높일 수 있다.|
+|gap|number|5|아이템들 사이의 공간.|
+|attributePrefix|string|"data-grid-"|엘리먼트의 데이타 속성에 사용할 접두사.|
+|resizeDebounce|number|100|리사이즈 이벤트에 설정할 디바운스 시간.(단위: ms)|
+|maxResizeDebounce|number|0|리사이즈 이벤트를 디바운스할 수 있는 최대 시간. (0은 미설정이다)|
+|autoResize|boolean|true|window의 resize 이벤트 이후 자동으로 resize()메소드를 호출할지의 여부.|
+|useFit|boolean|true|렌더링시 상단이 비어있을 때 아웃라인을 0으로 이동시킬지 여부. 하지만 상단보다 넘치는 경우 아웃라인을 0으로 강제 이동한다.|
+|useTransform|boolean|false|left, top css 속성 쓰는 대신 transform 속성을 사용할지 여부.|
+|renderOnPropertyChange|boolean|true|property의 변화를 통해 자동으로 render를 할지 여부.|
+|preserveUIOnDestroy|boolean|false|destroy 시 기존 컨테이너, 아이템의 UI를 보존할지 여부.|
+|defaultDirection|"start" \| "end"|"end"|render옵션에서 direction을 미설정시의 기본 방향값.|
+|outlineLength|number|0|outline의 개수. 아웃라인의 개수가 0이라면 grid의 종류에 따라 계산이 된다.|
+|outlineSize|number|0| outline의 사이즈. 만약 outline의 사이즈가 0이면, grid의 종류에 따라 계산이 된다. |
+|useRoundedSize|boolean|true|사이즈를 반올림된 사이즈(offsetWidth, offsetHeight)로 가져올지 여부. container에 transform이 적용되어 있다면 true로 설정해라. false면 getBoundingClientRect를 통해 사이즈를 가져온다.|
+|useResizeObserver|boolean|false|autoResize 옵션 사용시 container의 사이즈 변화 감지를 위해 ResizeObserver 이벤트를 사용할지 여부.|
+|observeChildren|boolean|false|useResizeObserver옵션을 사용한다면 children의 사이즈 변화 감지 여부.|
+|externalItemRenderer|ItemRenderer \| null||외부에서 직접 ItemRenderer를 설정할 수 있다.|
+|externalContainerManager|ContainerManager \| null||외부에서 직접 ContainerManager를 설정할 수 있다.|
+|container|boolean \| HTMLElement \| string \| Ref<HTMLElement>|false|container를 적용할 대상. false면 자기 자신, true면 container를 생성. string 또는 HTMLElement는 직접 대상을 지정.inlinePos는 left, inlineSize는 width, contentPos는 top, contentSize는 height다. horizontal이 true면 inlinePos는 top, inlineSize는 height, contentPos는 left, contentSize는 width이다.|
+|percentage|Array<"position" \| "size"> \| boolean|false|item의 css size와 position를 %로 설정할지 여부.|
+|isEqualSize|boolean|false|카드 엘리먼트의 크기가 동일한지 여부. 배치될 카드 엘리먼트의 크기가 모두 동일할 때 이 옵션을 'true'로 설정하면 레이아웃 배치 성능을 높일 수 있다.|
+|isConstantSize|boolean|false|모든 카드 엘리먼트의 크기가 불변일 때 이 옵션을 'true'로 설정하면 레이아웃 배치 성능을 높일 수 있다.|
+|gap|number|5|아이템들 사이의 공간.|
+|attributePrefix|string|"data-grid-"|엘리먼트의 데이타 속성에 사용할 접두사.|
+|resizeDebounce|number|100|리사이즈 이벤트에 설정할 디바운스 시간.(단위: ms)|
+|maxResizeDebounce|number|0|리사이즈 이벤트를 디바운스할 수 있는 최대 시간. (0은 미설정이다)|
+|autoResize|boolean|true|window의 resize 이벤트 이후 자동으로 resize()메소드를 호출할지의 여부.|
+|useFit|boolean|true|렌더링시 상단이 비어있을 때 아웃라인을 0으로 이동시킬지 여부. 하지만 상단보다 넘치는 경우 아웃라인을 0으로 강제 이동한다.|
+|useTransform|boolean|false|left, top css 속성 쓰는 대신 transform 속성을 사용할지 여부.|
+|renderOnPropertyChange|boolean|true|property의 변화를 통해 자동으로 render를 할지 여부.|
+|preserveUIOnDestroy|boolean|false|destroy 시 기존 컨테이너, 아이템의 UI를 보존할지 여부.|
+|defaultDirection|"start" \| "end"|"end"|render옵션에서 direction을 미설정시의 기본 방향값.|
+|outlineLength|number|0|outline의 개수. 아웃라인의 개수가 0이라면 grid의 종류에 따라 계산이 된다.|
+|outlineSize|number|0| outline의 사이즈. 만약 outline의 사이즈가 0이면, grid의 종류에 따라 계산이 된다. |
+|useRoundedSize|boolean|true|사이즈를 반올림된 사이즈(offsetWidth, offsetHeight)로 가져올지 여부. container에 transform이 적용되어 있다면 true로 설정해라. false면 getBoundingClientRect를 통해 사이즈를 가져온다.|
+|useResizeObserver|boolean|false|autoResize 옵션 사용시 container의 사이즈 변화 감지를 위해 ResizeObserver 이벤트를 사용할지 여부.|
+|observeChildren|boolean|false|useResizeObserver옵션을 사용한다면 children의 사이즈 변화 감지 여부.|
+|externalItemRenderer|ItemRenderer \| null||외부에서 직접 ItemRenderer를 설정할 수 있다.|
+|externalContainerManager|ContainerManager \| null||외부에서 직접 ContainerManager를 설정할 수 있다.|
+|column|number|0|열의 개수. 열의 개수가 0이라면, 컨테이너의 사이즈에 의해 계산이 된다. outlineLength 대신 사용할 수 있다.|
+|columnSize|number|0|열의 사이즈. 만약 열의 사이즈가 0이면, 아이템들의 첫번째 아이템의 사이즈로 계산이 된다. outlineSize 대신 사용할 수 있다.|
+|columnSizeRatio|number|0|열의 사이즈 비율(inlineSize / contentSize). 0은 미설정이다.|
+|align|GridAlign|"justify"|아이템들의 위치의 정렬. stretch를 사용하고 싶다면 column, columnSize 또는 maxStretchColumnSize 옵션을 설정해라. ("start", "center", "end", "justify", "stretch")|
+|contentAlign|MasonryGridVerticalAlign|"masonry"|아이템들의 Content 방향의 정렬. "masonry"는 masonry 형태로 정렬이 된다. 그 외는 inline-block의 vertical-align과 유사하게 content 방향 정렬로 적용이 된다.칼럼(data-grid-column )을 여러개 설정하면 화면이 이상하게 보일 수 있다. |
+|columnCalculationThreshold|number|1|칼럼 개수를 계산하기 위한 차이 임계값. offset 사이즈는 반올림으로 게산하기 때문에 정확하지 않을 수 있다.|
+|maxStretchColumnSize|number|Infinity|stretch를 사용한 경우 최대로 늘릴 수 있는 column의 사이즈를 설정하여 column을 자동 계산할 수 있다.|
+|horizontal|boolean|false|스크롤 이동 방향. (true: 가로방향, false: 세로방향) horizontal이 false 면 inlinePos는 left, inlineSize는 width, contentPos는 top, contentSize는 height다. horizontal이 true면 inlinePos는 top, inlineSize는 height, contentPos는 left, contentSize는 width이다.|
+|percentage|Array<"position" \| "size"> \| boolean|false|item의 css size와 position를 %로 설정할지 여부.|
+|isEqualSize|boolean|false|카드 엘리먼트의 크기가 동일한지 여부. 배치될 카드 엘리먼트의 크기가 모두 동일할 때 이 옵션을 'true'로 설정하면 레이아웃 배치 성능을 높일 수 있다.|
+|isConstantSize|boolean|false|모든 카드 엘리먼트의 크기가 불변일 때 이 옵션을 'true'로 설정하면 레이아웃 배치 성능을 높일 수 있다.|
+|gap|number|5|아이템들 사이의 공간.|
+|attributePrefix|string|"data-grid-"|엘리먼트의 데이타 속성에 사용할 접두사.|
+|resizeDebounce|number|100|리사이즈 이벤트에 설정할 디바운스 시간.(단위: ms)|
+|maxResizeDebounce|number|0|리사이즈 이벤트를 디바운스할 수 있는 최대 시간. (0은 미설정이다)|
+|autoResize|boolean|true|window의 resize 이벤트 이후 자동으로 resize()메소드를 호출할지의 여부.|
+|useFit|boolean|true|렌더링시 상단이 비어있을 때 아웃라인을 0으로 이동시킬지 여부. 하지만 상단보다 넘치는 경우 아웃라인을 0으로 강제 이동한다.|
+|useTransform|boolean|false|left, top css 속성 쓰는 대신 transform 속성을 사용할지 여부.|
+|renderOnPropertyChange|boolean|true|property의 변화를 통해 자동으로 render를 할지 여부.|
+|preserveUIOnDestroy|boolean|false|destroy 시 기존 컨테이너, 아이템의 UI를 보존할지 여부.|
+|defaultDirection|"start" \| "end"|"end"|render옵션에서 direction을 미설정시의 기본 방향값.|
+|outlineLength|number|0|outline의 개수. 아웃라인의 개수가 0이라면 grid의 종류에 따라 계산이 된다.|
+|outlineSize|number|0| outline의 사이즈. 만약 outline의 사이즈가 0이면, grid의 종류에 따라 계산이 된다. |
+|useRoundedSize|boolean|true|사이즈를 반올림된 사이즈(offsetWidth, offsetHeight)로 가져올지 여부. container에 transform이 적용되어 있다면 true로 설정해라. false면 getBoundingClientRect를 통해 사이즈를 가져온다.|
+|useResizeObserver|boolean|false|autoResize 옵션 사용시 container의 사이즈 변화 감지를 위해 ResizeObserver 이벤트를 사용할지 여부.|
+|observeChildren|boolean|false|useResizeObserver옵션을 사용한다면 children의 사이즈 변화 감지 여부.|
+|externalItemRenderer|ItemRenderer \| null||외부에서 직접 ItemRenderer를 설정할 수 있다.|
+|externalContainerManager|ContainerManager \| null||외부에서 직접 ContainerManager를 설정할 수 있다.|
+|container|boolean \| HTMLElement \| string \| Ref<HTMLElement>|false|container를 적용할 대상. false면 자기 자신, true면 container를 생성. string 또는 HTMLElement는 직접 대상을 지정.inlinePos는 left, inlineSize는 width, contentPos는 top, contentSize는 height다. horizontal이 true면 inlinePos는 top, inlineSize는 height, contentPos는 left, contentSize는 width이다.|
+|percentage|Array<"position" \| "size"> \| boolean|false|item의 css size와 position를 %로 설정할지 여부.|
+|isEqualSize|boolean|false|카드 엘리먼트의 크기가 동일한지 여부. 배치될 카드 엘리먼트의 크기가 모두 동일할 때 이 옵션을 'true'로 설정하면 레이아웃 배치 성능을 높일 수 있다.|
+|isConstantSize|boolean|false|모든 카드 엘리먼트의 크기가 불변일 때 이 옵션을 'true'로 설정하면 레이아웃 배치 성능을 높일 수 있다.|
+|gap|number|5|아이템들 사이의 공간.|
+|attributePrefix|string|"data-grid-"|엘리먼트의 데이타 속성에 사용할 접두사.|
+|resizeDebounce|number|100|리사이즈 이벤트에 설정할 디바운스 시간.(단위: ms)|
+|maxResizeDebounce|number|0|리사이즈 이벤트를 디바운스할 수 있는 최대 시간. (0은 미설정이다)|
+|autoResize|boolean|true|window의 resize 이벤트 이후 자동으로 resize()메소드를 호출할지의 여부.|
+|useFit|boolean|true|렌더링시 상단이 비어있을 때 아웃라인을 0으로 이동시킬지 여부. 하지만 상단보다 넘치는 경우 아웃라인을 0으로 강제 이동한다.|
+|useTransform|boolean|false|left, top css 속성 쓰는 대신 transform 속성을 사용할지 여부.|
+|renderOnPropertyChange|boolean|true|property의 변화를 통해 자동으로 render를 할지 여부.|
+|preserveUIOnDestroy|boolean|false|destroy 시 기존 컨테이너, 아이템의 UI를 보존할지 여부.|
+|defaultDirection|"start" \| "end"|"end"|render옵션에서 direction을 미설정시의 기본 방향값.|
+|outlineLength|number|0|outline의 개수. 아웃라인의 개수가 0이라면 grid의 종류에 따라 계산이 된다.|
+|outlineSize|number|0| outline의 사이즈. 만약 outline의 사이즈가 0이면, grid의 종류에 따라 계산이 된다. |
+|useRoundedSize|boolean|true|사이즈를 반올림된 사이즈(offsetWidth, offsetHeight)로 가져올지 여부. container에 transform이 적용되어 있다면 true로 설정해라. false면 getBoundingClientRect를 통해 사이즈를 가져온다.|
+|useResizeObserver|boolean|false|autoResize 옵션 사용시 container의 사이즈 변화 감지를 위해 ResizeObserver 이벤트를 사용할지 여부.|
+|observeChildren|boolean|false|useResizeObserver옵션을 사용한다면 children의 사이즈 변화 감지 여부.|
+|externalItemRenderer|ItemRenderer \| null||외부에서 직접 ItemRenderer를 설정할 수 있다.|
+|externalContainerManager|ContainerManager \| null||외부에서 직접 ContainerManager를 설정할 수 있다.|
+|aspectRatio|number|1|아이템들을 가진 컨테이너의 종횡비(inlineSize / contentSize).|
+|sizeWeight|number|1|아이템들을 배치하는데 사이즈 가중치.|
+|ratioWeight|number|1|아이템들을 배치하는데 비율을 유지하는 가중치.|
+|weightPriority|"size" \| "ratio" \| "custom"|"custom"| 아이템의 가중치를 결정하는 우선수치. "size" = (sizeWieght: 100, ratioWeight: 1), "ratio" = (sizeWeight: 1, ratioWeight; 100), "custom" = (set sizeWeight, ratioWeight). 아이템의 가중치 = ratio(inlineSize / contentSize)의 변화량 * ratioWeight + size(inlineSize * contentSize)의 변화량 * sizeWeight.|
+|horizontal|boolean|false|스크롤 이동 방향. (true: 가로방향, false: 세로방향) horizontal이 false 면 inlinePos는 left, inlineSize는 width, contentPos는 top, contentSize는 height다. horizontal이 true면 inlinePos는 top, inlineSize는 height, contentPos는 left, contentSize는 width이다.|
+|percentage|Array<"position" \| "size"> \| boolean|false|item의 css size와 position를 %로 설정할지 여부.|
+|isEqualSize|boolean|false|카드 엘리먼트의 크기가 동일한지 여부. 배치될 카드 엘리먼트의 크기가 모두 동일할 때 이 옵션을 'true'로 설정하면 레이아웃 배치 성능을 높일 수 있다.|
+|isConstantSize|boolean|false|모든 카드 엘리먼트의 크기가 불변일 때 이 옵션을 'true'로 설정하면 레이아웃 배치 성능을 높일 수 있다.|
+|gap|number|5|아이템들 사이의 공간.|
+|attributePrefix|string|"data-grid-"|엘리먼트의 데이타 속성에 사용할 접두사.|
+|resizeDebounce|number|100|리사이즈 이벤트에 설정할 디바운스 시간.(단위: ms)|
+|maxResizeDebounce|number|0|리사이즈 이벤트를 디바운스할 수 있는 최대 시간. (0은 미설정이다)|
+|autoResize|boolean|true|window의 resize 이벤트 이후 자동으로 resize()메소드를 호출할지의 여부.|
+|useFit|boolean|true|렌더링시 상단이 비어있을 때 아웃라인을 0으로 이동시킬지 여부. 하지만 상단보다 넘치는 경우 아웃라인을 0으로 강제 이동한다.|
+|useTransform|boolean|false|left, top css 속성 쓰는 대신 transform 속성을 사용할지 여부.|
+|renderOnPropertyChange|boolean|true|property의 변화를 통해 자동으로 render를 할지 여부.|
+|preserveUIOnDestroy|boolean|false|destroy 시 기존 컨테이너, 아이템의 UI를 보존할지 여부.|
+|defaultDirection|"start" \| "end"|"end"|render옵션에서 direction을 미설정시의 기본 방향값.|
+|outlineLength|number|0|outline의 개수. 아웃라인의 개수가 0이라면 grid의 종류에 따라 계산이 된다.|
+|outlineSize|number|0| outline의 사이즈. 만약 outline의 사이즈가 0이면, grid의 종류에 따라 계산이 된다. |
+|useRoundedSize|boolean|true|사이즈를 반올림된 사이즈(offsetWidth, offsetHeight)로 가져올지 여부. container에 transform이 적용되어 있다면 true로 설정해라. false면 getBoundingClientRect를 통해 사이즈를 가져온다.|
+|useResizeObserver|boolean|false|autoResize 옵션 사용시 container의 사이즈 변화 감지를 위해 ResizeObserver 이벤트를 사용할지 여부.|
+|observeChildren|boolean|false|useResizeObserver옵션을 사용한다면 children의 사이즈 변화 감지 여부.|
+|externalItemRenderer|ItemRenderer \| null||외부에서 직접 ItemRenderer를 설정할 수 있다.|
+|externalContainerManager|ContainerManager \| null||외부에서 직접 ContainerManager를 설정할 수 있다.|
+|container|boolean \| HTMLElement \| string \| Ref<HTMLElement>|false|container를 적용할 대상. false면 자기 자신, true면 container를 생성. string 또는 HTMLElement는 직접 대상을 지정.A class used to manage events in a component
+ + + +## Properties +### VERSION {#VERSION} + +Version info string
+ +**Type**: string + +Component.VERSION; // ex) 3.0.0 + +## Methods + +### trigger {#trigger} + +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
| + +```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 {#once} + +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
| + +```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 {#hasOn} + +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
| + +```ts +import Component from "@egjs/component"; + +class Some extends Component<{ + hi: void; +}> { + some() { + this.hasOn("hi");// check hi event. + } +} +``` + +### on {#on} + +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
| + +```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 {#off} + +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.
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
| + +```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 + } +} +``` + diff --git a/packages/docs/versioned_docs/version-4.11.1/api/FrameInfiniteGrid.mdx b/packages/docs/versioned_docs/version-4.11.1/api/FrameInfiniteGrid.mdx new file mode 100644 index 000000000..b0daa71cd --- /dev/null +++ b/packages/docs/versioned_docs/version-4.11.1/api/FrameInfiniteGrid.mdx @@ -0,0 +1,732 @@ +--- +custom_edit_url: null +--- + +```ts +class FrameInfiniteGrid +``` + +'Frame' is a printing term with the meaning that 'it fits in one row wide'. FrameInfiniteGrid is a grid that the item is filled up on the basis of a line given a size.
+ +A base element for a module
| +|options|[FrameInfiniteGridOptions](FrameInfiniteGridOptions)|||The option object of the FrameInfiniteGrid module
| + +## Methods + +### renderItems {#renderItems} + +Rearrange items to fit the grid and render them. When rearrange is complete, the renderComplete event is fired.
Options for rendering.
| + +```ts +import { MasonryInfiniteGrid } from "@egjs/infinitegrid"; +const grid = new MasonryInfiniteGrid(); + +grid.on("renderComplete", e => { + console.log(e); +}); +grid.renderItems(); +``` + +### getWrapperElement {#getWrapperElement} + +Returns the wrapper element specified by the user.
+ +### getScrollContainerElement {#getScrollContainerElement} + +Returns the container element corresponding to the scroll area.
+ +### getContainerElement {#getContainerElement} + +Returns the container element containing item elements.
+ +### syncItems {#syncItems} + +When items change, it synchronizes and renders items.
+ +**Returns**: this + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|items|[InfiniteGridItemInfo](InfiniteGridItemInfo)[]|||Options for rendering.
| + +### setCursors {#setCursors} + +Change 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.
| + +### getStartCursor {#getStartCursor} + +Returns the first index of visible groups.
+ +**Returns**: number + +### getEndCursor {#getEndCursor} + +Returns the last index of visible groups.
+ +**Returns**: number + +### append {#append} + +Add items at the bottom(right) of the grid.
+ +**Returns**: this +-items to be added
| +|groupKey|string \| number|✔️||The group key to be configured in items. It is automatically generated by default.
| + +```js +ig.append(`Add items at the top(left) of the grid.
+ +**Returns**: this +-items to be added
| +|groupKey|string \| number|✔️||The group key to be configured in items. It is automatically generated by default.
| + +```ts +ig.prepend(`Add items to a specific index.
+ +**Returns**: this +-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.
| + +```ts +ig.insert(2, `Add items based on group index.
+ +**Returns**: this +-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.
| + +```ts +ig.insertByGroupIndex(2, `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](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 {#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 {#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 {#appendPlaceholders} + +Add the placeholder at the end.
+ +**Returns**: [InsertedPlaceholdersResult](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 {#prependPlaceholders} + +Add the placeholder at the start.
+ +**Returns**: [InsertedPlaceholdersResult](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 {#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 {#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](InfiniteGridStatus)|||status object of the InfiniteGrid module.
| +|useFirstRender|boolean|✔️||Whether the first rendering has already been done.
| + +### removeGroupByIndex {#removeGroupByIndex} + +Removes the group corresponding to index.
+ +**Returns**: this + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|index|number|||| + +### removeGroupByKey {#removeGroupByKey} + +Removes the group corresponding to key.
+ +**Returns**: this + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|key|number \| string|||| + +### removeByIndex {#removeByIndex} + +Removes the item corresponding to index.
+ +**Returns**: this + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|index|number|||| + +### removeByKey {#removeByKey} + +Removes the item corresponding to key.
+ +**Returns**: this + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|key|string \| number|||| + +### updateItems {#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 {#getItems} + +Return all items of InfiniteGrid.
+ +**Returns**: InfiniteGridItem[] + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|includePlaceholders|boolean|✔️||Whether to include items corresponding to placeholders.
| + +### getVisibleItems {#getVisibleItems} + +Return visible items of InfiniteGrid.
+ +**Returns**: InfiniteGridItem[] + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|includePlaceholders|boolean|✔️||Whether to include items corresponding to placeholders.
| + +### getRenderingItems {#getRenderingItems} + +Return rendering items of InfiniteGrid.
+ +**Returns**: InfiniteGridItem[] + +### getGroups {#getGroups} + +Return all groups of InfiniteGrid.
+ +**Returns**: InfiniteGridGroup[] + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|includePlaceholders|boolean|✔️||Whether to include groups corresponding to placeholders.
| + +### getVisibleGroups {#getVisibleGroups} + +Return visible groups of InfiniteGrid.
+ +**Returns**: InfiniteGridGroup[] + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|includePlaceholders|boolean|✔️||Whether to include groups corresponding to placeholders.
| + +### wait {#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 {#ready} + +When the data request is complete, it is set to ready state.
+ +### isWait {#isWait} + +Returns whether it is set to wait to request data.
+ +### destroy {#destroy} + +Releases the instnace and events and returns the CSS of the container and elements.
+ +**Returns**: void + +### trigger {#trigger} + +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
| + +```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 {#once} + +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
| + +```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 {#hasOn} + +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
| + +```ts +import Component from "@egjs/component"; + +class Some extends Component<{ + hi: void; +}> { + some() { + this.hasOn("hi");// check hi event. + } +} +``` + +### on {#on} + +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
| + +```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 {#off} + +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.
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
| + +```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 {#event-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 {#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 {#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 {#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 {#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
| + diff --git a/packages/docs/versioned_docs/version-4.11.1/api/FrameInfiniteGridOptions.mdx b/packages/docs/versioned_docs/version-4.11.1/api/FrameInfiniteGridOptions.mdx new file mode 100644 index 000000000..deb73d805 --- /dev/null +++ b/packages/docs/versioned_docs/version-4.11.1/api/FrameInfiniteGridOptions.mdx @@ -0,0 +1,66 @@ +--- +custom_edit_url: null +--- + +Direction of the scroll movement. (true: horizontal, false: vertical) If horizontal is false, inlinePos is left, inlineSize is width, contentPos is top, and contentSize is height. If horizontal is true, inlinePos is top, inlineSize is height, contentPos is left, and contentSize is width.
Whether to set the css size and position of the item to %.
Indicates whether sizes of all card elements are equal to one another. If sizes of card elements to be arranged are all equal and this option is set to "true", the performance of layout arrangement can be improved.
Indicates whether sizes of all card elements does not change, the performance of layout arrangement can be improved.
Gap used to create space around items.
The prefix to use element's data attribute.
Debounce time to set in the resize event. (unit: ms)
Maximum time to debounce the resize event. (0 is not set)
Whether the resize method should be called automatically after a window resize event.
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.
Whether to use transform property instead of using left and top css properties.
Whether to automatically render through property change.
Whether to preserve the UI of the existing container or item when destroying.
The default direction value when direction is not set in the render option.
The number of outlines. If the number of outlines is 0, it is calculated according to the type of grid.
The size of the outline. If the outline size is 0, it is calculated according to the grid type.
Whether to get the size as rounded size(offsetWidth, offsetHeight). Set to true if transform is applied to the container. If false, get the size through getBoundingClientRect.
Whether to use ResizeObserver event to detect container size change when autoResize option is used.
Whether to detect size change of children if useResizeObserver option is used.
You can set the ItemRenderer directly externally.
You can set the ContainerManager directly externally.
The shape of the grid. You can set the shape and order of items with a 2d array ([contentPos][inlinePos]). You can place items as many times as you fill the array with numbers, and zeros and spaces are empty spaces. The order of the items is arranged in ascending order of the numeric values that fill the array.
Make sure that the frame can be attached after the previous frame.
1x1 rect size. If it is 0, it is determined by the number of columns in the frame.
Direction of the scroll movement. (true: horizontal, false: vertical) If horizontal is false, inlinePos is left, inlineSize is width, contentPos is top, and contentSize is height. If horizontal is true, inlinePos is top, inlineSize is height, contentPos is left, and contentSize is width.
Whether to set the css size and position of the item to %.
Indicates whether sizes of all card elements are equal to one another. If sizes of card elements to be arranged are all equal and this option is set to "true", the performance of layout arrangement can be improved.
Indicates whether sizes of all card elements does not change, the performance of layout arrangement can be improved.
Gap used to create space around items.
The prefix to use element's data attribute.
Debounce time to set in the resize event. (unit: ms)
Maximum time to debounce the resize event. (0 is not set)
Whether the resize method should be called automatically after a window resize event.
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.
Whether to use transform property instead of using left and top css properties.
Whether to automatically render through property change.
Whether to preserve the UI of the existing container or item when destroying.
The default direction value when direction is not set in the render option.
The number of outlines. If the number of outlines is 0, it is calculated according to the type of grid.
The size of the outline. If the outline size is 0, it is calculated according to the grid type.
Whether to get the size as rounded size(offsetWidth, offsetHeight). Set to true if transform is applied to the container. If false, get the size through getBoundingClientRect.
Whether to use ResizeObserver event to detect container size change when autoResize option is used.
Whether to detect size change of children if useResizeObserver option is used.
You can set the ItemRenderer directly externally.
You can set the ContainerManager directly externally.
The target to which the container is applied. If false, create itself, if true, create container. A string or HTMLElement specifies the target directly.
| +|containerTag|string|"div"|If you create a container, you can set the container's tag.
| +|threshold|number|100|The size of the scrollable area for adding the next group of items.
| +|useRecycle|boolean|true|Whether to show only the DOM of the visible area.
| +|scrollContainer|HTMLElement \| string \| Ref<HTMLElement> \| null||You can set the scrollContainer directly. In this case, the container becomes the wrapper itself.
| +|gridConstructor|GridFunction||Grid class to apply Infinite function.
| +|appliedItemChecker|(item: InfiniteGridItem, grid: Grid) => boolean||A function that checks whether non-rendering items are included in the Grid.
| +|renderer|Renderer \| null||class that renders the DOM.
| + diff --git a/packages/docs/versioned_docs/version-4.11.1/api/Grid.mdx b/packages/docs/versioned_docs/version-4.11.1/api/Grid.mdx new file mode 100644 index 000000000..b1fc572ae --- /dev/null +++ b/packages/docs/versioned_docs/version-4.11.1/api/Grid.mdx @@ -0,0 +1,583 @@ +--- +custom_edit_url: null +--- + +```ts +class Grid +``` + +A base element for a module
| +|options|Partial<Options>|✔️|{}|The option object of the Grid module
| + +## Properties + +### gap {#gap} + +Gap used to create space around items.
+ +**Type**: $ts:Grid.GridOptions["gap"] + +**Default**: 0 + +```js +import { MasonryGrid } from "@egjs/grid"; + +const grid = new MasonryGrid(container, { + gap: 0, +}); + +grid.gap = 5; +``` + +### defaultDirection {#defaultDirection} + +The default direction value when direction is not set in the render option.
+ +**Type**: $ts:Grid.GridOptions["defaultDirection"] + +**Default**: "end" + +```js +import { MasonryGrid } from "@egjs/grid"; + +const grid = new MasonryGrid(container, { + defaultDirection: "end", +}); + +grid.defaultDirection = "start"; +``` + +### useFit {#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 + +```js +import { MasonryGrid } from "@egjs/grid"; + +const grid = new MasonryGrid(container, { + useFit: true, +}); + +grid.useFit = false; +``` + +### preserveUIOnDestroy {#preserveUIOnDestroy} + +Whether to preserve the UI of the existing container or item when destroying.
+ +**Type**: $ts:Grid.GridOptions["preserveUIOnDestroy"] + +**Default**: false + +```js +import { MasonryGrid } from "@egjs/grid"; + +const grid = new MasonryGrid(container, { + preserveUIOnDestroy: false, +}); + +grid.preserveUIOnDestroy = true; +``` + +### outlineLength {#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 + +```js +import { MasonryGrid } from "@egjs/grid"; + +const grid = new MasonryGrid(container, { + outlineLength: 0, + outlineSize: 0, +}); + +grid.outlineLength = 3; +``` + +### outlineSize {#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 + +```js +import { MasonryGrid } from "@egjs/grid"; + +const grid = new MasonryGrid(container, { + outlineLength: 0, + outlineSize: 0, +}); + +grid.outlineSize = 300; +``` + +## Methods + +### applyGrid {#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 {#getContainerElement} + +Return Container Element.
+ +**Returns**: HTMLElement + +### getItems {#getItems} + +Return items.
+ +**Returns**: GridItem[] + +### getChildren {#getChildren} + +Returns the children of the container element.
+ +**Returns**: HTMLElement[] + +### setItems {#setItems} + +Set items.
+ +**Returns**: this + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|items|GridItem[]|||The items to set.
| + +### getContainerInlineSize {#getContainerInlineSize} + +Gets the container's inline size. ("width" if horizontal is false, otherwise "height")
+ +**Returns**: number + +### getOutlines {#getOutlines} + +Returns the outlines of the start and end of the Grid.
+ +**Returns**: GridOutlines + +### setOutlines {#setOutlines} + +Set outlines.
+ +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|outlines|GridOutlines|||The outlines to set.
| + +### syncElements {#syncElements} + +When elements change, it synchronizes and renders items.
+ +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|options|RenderOptions|✔️|{}|Options for rendering.
| + +### updateItems {#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 {#renderItems} + +Rearrange items to fit the grid and render them. When rearrange is complete, the renderComplete event is fired.
Options for rendering.
| + +```js +import { MasonryGrid } from "@egjs/grid"; +const grid = new MasonryGrid(); + +grid.on("renderComplete", e => { + console.log(e); +}); +grid.renderItems(); +``` + +### getStatus {#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 {#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 {#getComputedOutlineSize} + +Get the inline size corresponding to outline.
+ +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|items|GridItem[]|✔️|this.items|Items to get outline size.
| + +### getComputedOutlineLength {#getComputedOutlineLength} + +Get the length corresponding to outline.
+ +**Returns**: number + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|items|GridItem[]|✔️|this.items|Items to get outline length.
| + +### destroy {#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 {#trigger} + +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
| + +```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 {#once} + +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
| + +```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 {#hasOn} + +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
| + +```ts +import Component from "@egjs/component"; + +class Some extends Component<{ + hi: void; +}> { + some() { + this.hasOn("hi");// check hi event. + } +} +``` + +### on {#on} + +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
| + +```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 {#off} + +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.
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
| + +```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 +### contentError {#event-contentError} + +This event is fired when an error occurs in the content.
+ +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|e|[Grid.OnContentError](Grid:OnContentError)|||The object of data to be sent to an event
| + +```js +grid.on("contentError", e => { + e.update(); +}); +``` + +### renderComplete {#event-renderComplete} + +This event is fired when the Grid has completed rendering.
+ +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|e|[Grid.OnRenderComplete](Grid:OnRenderComplete)|||The object of data to be sent to an event
| + +```js +grid.on("renderComplete", e => { + console.log(e.mounted, e.updated, e.useResize); +}); +``` + diff --git a/packages/docs/versioned_docs/version-4.11.1/api/InfiniteGrid.mdx b/packages/docs/versioned_docs/version-4.11.1/api/InfiniteGrid.mdx new file mode 100644 index 000000000..82e5ec995 --- /dev/null +++ b/packages/docs/versioned_docs/version-4.11.1/api/InfiniteGrid.mdx @@ -0,0 +1,763 @@ +--- +custom_edit_url: null +--- + +```ts +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
+ +A base element for a module
| +|options|Options|||The option object of the InfiniteGrid module
| + +```html +Rearrange items to fit the grid and render them. When rearrange is complete, the renderComplete event is fired.
Options for rendering.
| + +```ts +import { MasonryInfiniteGrid } from "@egjs/infinitegrid"; +const grid = new MasonryInfiniteGrid(); + +grid.on("renderComplete", e => { + console.log(e); +}); +grid.renderItems(); +``` + +### getWrapperElement {#getWrapperElement} + +Returns the wrapper element specified by the user.
+ +### getScrollContainerElement {#getScrollContainerElement} + +Returns the container element corresponding to the scroll area.
+ +### getContainerElement {#getContainerElement} + +Returns the container element containing item elements.
+ +### syncItems {#syncItems} + +When items change, it synchronizes and renders items.
+ +**Returns**: this + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|items|[InfiniteGridItemInfo](InfiniteGridItemInfo)[]|||Options for rendering.
| + +### setCursors {#setCursors} + +Change 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.
| + +### getStartCursor {#getStartCursor} + +Returns the first index of visible groups.
+ +**Returns**: number + +### getEndCursor {#getEndCursor} + +Returns the last index of visible groups.
+ +**Returns**: number + +### append {#append} + +Add items at the bottom(right) of the grid.
+ +**Returns**: this +-items to be added
| +|groupKey|string \| number|✔️||The group key to be configured in items. It is automatically generated by default.
| + +```js +ig.append(`Add items at the top(left) of the grid.
+ +**Returns**: this +-items to be added
| +|groupKey|string \| number|✔️||The group key to be configured in items. It is automatically generated by default.
| + +```ts +ig.prepend(`Add items to a specific index.
+ +**Returns**: this +-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.
| + +```ts +ig.insert(2, `Add items based on group index.
+ +**Returns**: this +-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.
| + +```ts +ig.insertByGroupIndex(2, `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](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 {#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 {#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 {#appendPlaceholders} + +Add the placeholder at the end.
+ +**Returns**: [InsertedPlaceholdersResult](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 {#prependPlaceholders} + +Add the placeholder at the start.
+ +**Returns**: [InsertedPlaceholdersResult](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 {#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 {#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](InfiniteGridStatus)|||status object of the InfiniteGrid module.
| +|useFirstRender|boolean|✔️||Whether the first rendering has already been done.
| + +### removeGroupByIndex {#removeGroupByIndex} + +Removes the group corresponding to index.
+ +**Returns**: this + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|index|number|||| + +### removeGroupByKey {#removeGroupByKey} + +Removes the group corresponding to key.
+ +**Returns**: this + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|key|number \| string|||| + +### removeByIndex {#removeByIndex} + +Removes the item corresponding to index.
+ +**Returns**: this + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|index|number|||| + +### removeByKey {#removeByKey} + +Removes the item corresponding to key.
+ +**Returns**: this + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|key|string \| number|||| + +### updateItems {#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 {#getItems} + +Return all items of InfiniteGrid.
+ +**Returns**: InfiniteGridItem[] + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|includePlaceholders|boolean|✔️||Whether to include items corresponding to placeholders.
| + +### getVisibleItems {#getVisibleItems} + +Return visible items of InfiniteGrid.
+ +**Returns**: InfiniteGridItem[] + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|includePlaceholders|boolean|✔️||Whether to include items corresponding to placeholders.
| + +### getRenderingItems {#getRenderingItems} + +Return rendering items of InfiniteGrid.
+ +**Returns**: InfiniteGridItem[] + +### getGroups {#getGroups} + +Return all groups of InfiniteGrid.
+ +**Returns**: InfiniteGridGroup[] + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|includePlaceholders|boolean|✔️||Whether to include groups corresponding to placeholders.
| + +### getVisibleGroups {#getVisibleGroups} + +Return visible groups of InfiniteGrid.
+ +**Returns**: InfiniteGridGroup[] + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|includePlaceholders|boolean|✔️||Whether to include groups corresponding to placeholders.
| + +### wait {#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 {#ready} + +When the data request is complete, it is set to ready state.
+ +### isWait {#isWait} + +Returns whether it is set to wait to request data.
+ +### destroy {#destroy} + +Releases the instnace and events and returns the CSS of the container and elements.
+ +**Returns**: void + +### trigger {#trigger} + +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
| + +```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 {#once} + +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
| + +```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 {#hasOn} + +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
| + +```ts +import Component from "@egjs/component"; + +class Some extends Component<{ + hi: void; +}> { + some() { + this.hasOn("hi");// check hi event. + } +} +``` + +### on {#on} + +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
| + +```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 {#off} + +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.
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
| + +```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 {#event-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 {#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 {#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 {#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 {#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
| + diff --git a/packages/docs/versioned_docs/version-4.11.1/api/InfiniteGridItemInfo.mdx b/packages/docs/versioned_docs/version-4.11.1/api/InfiniteGridItemInfo.mdx new file mode 100644 index 000000000..82c858594 --- /dev/null +++ b/packages/docs/versioned_docs/version-4.11.1/api/InfiniteGridItemInfo.mdx @@ -0,0 +1,21 @@ +--- +custom_edit_url: null +--- + +Direction of the scroll movement. (true: horizontal, false: vertical) If horizontal is false, inlinePos is left, inlineSize is width, contentPos is top, and contentSize is height. If horizontal is true, inlinePos is top, inlineSize is height, contentPos is left, and contentSize is width.
Whether to set the css size and position of the item to %.
Indicates whether sizes of all card elements are equal to one another. If sizes of card elements to be arranged are all equal and this option is set to "true", the performance of layout arrangement can be improved.
Indicates whether sizes of all card elements does not change, the performance of layout arrangement can be improved.
Gap used to create space around items.
The prefix to use element's data attribute.
Debounce time to set in the resize event. (unit: ms)
Maximum time to debounce the resize event. (0 is not set)
Whether the resize method should be called automatically after a window resize event.
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.
Whether to use transform property instead of using left and top css properties.
Whether to automatically render through property change.
Whether to preserve the UI of the existing container or item when destroying.
The default direction value when direction is not set in the render option.
The number of outlines. If the number of outlines is 0, it is calculated according to the type of grid.
The size of the outline. If the outline size is 0, it is calculated according to the grid type.
Whether to get the size as rounded size(offsetWidth, offsetHeight). Set to true if transform is applied to the container. If false, get the size through getBoundingClientRect.
Whether to use ResizeObserver event to detect container size change when autoResize option is used.
Whether to detect size change of children if useResizeObserver option is used.
You can set the ItemRenderer directly externally.
You can set the ContainerManager directly externally.
The target to which the container is applied. If false, create itself, if true, create container. A string or HTMLElement specifies the target directly.
| +|containerTag|string|"div"|If you create a container, you can set the container's tag.
| +|threshold|number|100|The size of the scrollable area for adding the next group of items.
| +|useRecycle|boolean|true|Whether to show only the DOM of the visible area.
| +|scrollContainer|HTMLElement \| string \| Ref<HTMLElement> \| null||You can set the scrollContainer directly. In this case, the container becomes the wrapper itself.
| +|gridConstructor|GridFunction||Grid class to apply Infinite function.
| +|appliedItemChecker|(item: InfiniteGridItem, grid: Grid) => boolean||A function that checks whether non-rendering items are included in the Grid.
| +|renderer|Renderer \| null||class that renders the DOM.
| + diff --git a/packages/docs/versioned_docs/version-4.11.1/api/InfiniteGridStatus.mdx b/packages/docs/versioned_docs/version-4.11.1/api/InfiniteGridStatus.mdx new file mode 100644 index 000000000..d72132f97 --- /dev/null +++ b/packages/docs/versioned_docs/version-4.11.1/api/InfiniteGridStatus.mdx @@ -0,0 +1,17 @@ +--- +custom_edit_url: null +--- + +Groups corresponding to placeholders
| +|items|InfiniteGridItem[]|Items corresponding to placeholders
| +|remove|() => void|Remove the inserted placeholders.
| + diff --git a/packages/docs/versioned_docs/version-4.11.1/api/JustifiedInfiniteGrid.mdx b/packages/docs/versioned_docs/version-4.11.1/api/JustifiedInfiniteGrid.mdx new file mode 100644 index 000000000..6854e91ab --- /dev/null +++ b/packages/docs/versioned_docs/version-4.11.1/api/JustifiedInfiniteGrid.mdx @@ -0,0 +1,732 @@ +--- +custom_edit_url: null +--- + +```ts +class JustifiedInfiniteGrid +``` + +'justified' is a printing term with the meaning that 'it fits in one row wide'. JustifiedInfiniteGrid is a grid that the item is filled up on the basis of a line given a size.
If 'data-grid-inline-offset' or 'data-grid-content-offset' are set for item element, the ratio is maintained except for the offset value.
If 'data-grid-maintained-target' is set for an element whose ratio is to be maintained, the item is rendered while maintaining the ratio of the element.
A base element for a module
| +|options|[JustifiedInfiniteGridOptions](JustifiedInfiniteGridOptions)|||The option object of the JustifiedInfiniteGrid module
| + +## Methods + +### renderItems {#renderItems} + +Rearrange items to fit the grid and render them. When rearrange is complete, the renderComplete event is fired.
Options for rendering.
| + +```ts +import { MasonryInfiniteGrid } from "@egjs/infinitegrid"; +const grid = new MasonryInfiniteGrid(); + +grid.on("renderComplete", e => { + console.log(e); +}); +grid.renderItems(); +``` + +### getWrapperElement {#getWrapperElement} + +Returns the wrapper element specified by the user.
+ +### getScrollContainerElement {#getScrollContainerElement} + +Returns the container element corresponding to the scroll area.
+ +### getContainerElement {#getContainerElement} + +Returns the container element containing item elements.
+ +### syncItems {#syncItems} + +When items change, it synchronizes and renders items.
+ +**Returns**: this + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|items|[InfiniteGridItemInfo](InfiniteGridItemInfo)[]|||Options for rendering.
| + +### setCursors {#setCursors} + +Change 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.
| + +### getStartCursor {#getStartCursor} + +Returns the first index of visible groups.
+ +**Returns**: number + +### getEndCursor {#getEndCursor} + +Returns the last index of visible groups.
+ +**Returns**: number + +### append {#append} + +Add items at the bottom(right) of the grid.
+ +**Returns**: this +-items to be added
| +|groupKey|string \| number|✔️||The group key to be configured in items. It is automatically generated by default.
| + +```js +ig.append(`Add items at the top(left) of the grid.
+ +**Returns**: this +-items to be added
| +|groupKey|string \| number|✔️||The group key to be configured in items. It is automatically generated by default.
| + +```ts +ig.prepend(`Add items to a specific index.
+ +**Returns**: this +-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.
| + +```ts +ig.insert(2, `Add items based on group index.
+ +**Returns**: this +-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.
| + +```ts +ig.insertByGroupIndex(2, `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](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 {#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 {#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 {#appendPlaceholders} + +Add the placeholder at the end.
+ +**Returns**: [InsertedPlaceholdersResult](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 {#prependPlaceholders} + +Add the placeholder at the start.
+ +**Returns**: [InsertedPlaceholdersResult](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 {#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 {#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](InfiniteGridStatus)|||status object of the InfiniteGrid module.
| +|useFirstRender|boolean|✔️||Whether the first rendering has already been done.
| + +### removeGroupByIndex {#removeGroupByIndex} + +Removes the group corresponding to index.
+ +**Returns**: this + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|index|number|||| + +### removeGroupByKey {#removeGroupByKey} + +Removes the group corresponding to key.
+ +**Returns**: this + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|key|number \| string|||| + +### removeByIndex {#removeByIndex} + +Removes the item corresponding to index.
+ +**Returns**: this + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|index|number|||| + +### removeByKey {#removeByKey} + +Removes the item corresponding to key.
+ +**Returns**: this + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|key|string \| number|||| + +### updateItems {#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 {#getItems} + +Return all items of InfiniteGrid.
+ +**Returns**: InfiniteGridItem[] + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|includePlaceholders|boolean|✔️||Whether to include items corresponding to placeholders.
| + +### getVisibleItems {#getVisibleItems} + +Return visible items of InfiniteGrid.
+ +**Returns**: InfiniteGridItem[] + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|includePlaceholders|boolean|✔️||Whether to include items corresponding to placeholders.
| + +### getRenderingItems {#getRenderingItems} + +Return rendering items of InfiniteGrid.
+ +**Returns**: InfiniteGridItem[] + +### getGroups {#getGroups} + +Return all groups of InfiniteGrid.
+ +**Returns**: InfiniteGridGroup[] + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|includePlaceholders|boolean|✔️||Whether to include groups corresponding to placeholders.
| + +### getVisibleGroups {#getVisibleGroups} + +Return visible groups of InfiniteGrid.
+ +**Returns**: InfiniteGridGroup[] + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|includePlaceholders|boolean|✔️||Whether to include groups corresponding to placeholders.
| + +### wait {#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 {#ready} + +When the data request is complete, it is set to ready state.
+ +### isWait {#isWait} + +Returns whether it is set to wait to request data.
+ +### destroy {#destroy} + +Releases the instnace and events and returns the CSS of the container and elements.
+ +**Returns**: void + +### trigger {#trigger} + +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
| + +```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 {#once} + +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
| + +```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 {#hasOn} + +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
| + +```ts +import Component from "@egjs/component"; + +class Some extends Component<{ + hi: void; +}> { + some() { + this.hasOn("hi");// check hi event. + } +} +``` + +### on {#on} + +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
| + +```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 {#off} + +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.
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
| + +```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 {#event-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 {#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 {#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 {#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 {#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
| + diff --git a/packages/docs/versioned_docs/version-4.11.1/api/JustifiedInfiniteGridOptions.mdx b/packages/docs/versioned_docs/version-4.11.1/api/JustifiedInfiniteGridOptions.mdx new file mode 100644 index 000000000..9a2fd7d6d --- /dev/null +++ b/packages/docs/versioned_docs/version-4.11.1/api/JustifiedInfiniteGridOptions.mdx @@ -0,0 +1,68 @@ +--- +custom_edit_url: null +--- + +Direction of the scroll movement. (true: horizontal, false: vertical) If horizontal is false, inlinePos is left, inlineSize is width, contentPos is top, and contentSize is height. If horizontal is true, inlinePos is top, inlineSize is height, contentPos is left, and contentSize is width.
Whether to set the css size and position of the item to %.
Indicates whether sizes of all card elements are equal to one another. If sizes of card elements to be arranged are all equal and this option is set to "true", the performance of layout arrangement can be improved.
Indicates whether sizes of all card elements does not change, the performance of layout arrangement can be improved.
Gap used to create space around items.
The prefix to use element's data attribute.
Debounce time to set in the resize event. (unit: ms)
Maximum time to debounce the resize event. (0 is not set)
Whether the resize method should be called automatically after a window resize event.
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.
Whether to use transform property instead of using left and top css properties.
Whether to automatically render through property change.
Whether to preserve the UI of the existing container or item when destroying.
The default direction value when direction is not set in the render option.
The number of outlines. If the number of outlines is 0, it is calculated according to the type of grid.
The size of the outline. If the outline size is 0, it is calculated according to the grid type.
Whether to get the size as rounded size(offsetWidth, offsetHeight). Set to true if transform is applied to the container. If false, get the size through getBoundingClientRect.
Whether to use ResizeObserver event to detect container size change when autoResize option is used.
Whether to detect size change of children if useResizeObserver option is used.
You can set the ItemRenderer directly externally.
You can set the ContainerManager directly externally.
The minimum and maximum number of items per line.
The minimum and maximum number of rows in a group, 0 is not set.
The minimum and maximum size by which the item is adjusted. If it is not calculated, it may deviate from the minimum and maximum sizes.
Maximum number of rows to be counted for container size. You can hide it on the screen by setting overflow: hidden. -1 is not set.
Whether to crop when the row size is out of sizeRange. If set to true, this ratio can be broken.
Direction of the scroll movement. (true: horizontal, false: vertical) If horizontal is false, inlinePos is left, inlineSize is width, contentPos is top, and contentSize is height. If horizontal is true, inlinePos is top, inlineSize is height, contentPos is left, and contentSize is width.
Whether to set the css size and position of the item to %.
Indicates whether sizes of all card elements are equal to one another. If sizes of card elements to be arranged are all equal and this option is set to "true", the performance of layout arrangement can be improved.
Indicates whether sizes of all card elements does not change, the performance of layout arrangement can be improved.
Gap used to create space around items.
The prefix to use element's data attribute.
Debounce time to set in the resize event. (unit: ms)
Maximum time to debounce the resize event. (0 is not set)
Whether the resize method should be called automatically after a window resize event.
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.
Whether to use transform property instead of using left and top css properties.
Whether to automatically render through property change.
Whether to preserve the UI of the existing container or item when destroying.
The default direction value when direction is not set in the render option.
The number of outlines. If the number of outlines is 0, it is calculated according to the type of grid.
The size of the outline. If the outline size is 0, it is calculated according to the grid type.
Whether to get the size as rounded size(offsetWidth, offsetHeight). Set to true if transform is applied to the container. If false, get the size through getBoundingClientRect.
Whether to use ResizeObserver event to detect container size change when autoResize option is used.
Whether to detect size change of children if useResizeObserver option is used.
You can set the ItemRenderer directly externally.
You can set the ContainerManager directly externally.
The target to which the container is applied. If false, create itself, if true, create container. A string or HTMLElement specifies the target directly.
| +|containerTag|string|"div"|If you create a container, you can set the container's tag.
| +|threshold|number|100|The size of the scrollable area for adding the next group of items.
| +|useRecycle|boolean|true|Whether to show only the DOM of the visible area.
| +|scrollContainer|HTMLElement \| string \| Ref<HTMLElement> \| null||You can set the scrollContainer directly. In this case, the container becomes the wrapper itself.
| +|gridConstructor|GridFunction||Grid class to apply Infinite function.
| +|appliedItemChecker|(item: InfiniteGridItem, grid: Grid) => boolean||A function that checks whether non-rendering items are included in the Grid.
| +|renderer|Renderer \| null||class that renders the DOM.
| + diff --git a/packages/docs/versioned_docs/version-4.11.1/api/MasonryInfiniteGrid.mdx b/packages/docs/versioned_docs/version-4.11.1/api/MasonryInfiniteGrid.mdx new file mode 100644 index 000000000..f85c5d337 --- /dev/null +++ b/packages/docs/versioned_docs/version-4.11.1/api/MasonryInfiniteGrid.mdx @@ -0,0 +1,732 @@ +--- +custom_edit_url: null +--- + +```ts +class MasonryInfiniteGrid +``` + +MasonryInfiniteGrid is a grid that stacks items with the same width as a stack of bricks. Adjust the width of all images to the same size, find the lowest height column, and insert a new item.
+ +A base element for a module
| +|options|[MasonryInfiniteGridOptions](MasonryInfiniteGridOptions)|||The option object of the MasonryInfiniteGrid module
| + +## Methods + +### renderItems {#renderItems} + +Rearrange items to fit the grid and render them. When rearrange is complete, the renderComplete event is fired.
Options for rendering.
| + +```ts +import { MasonryInfiniteGrid } from "@egjs/infinitegrid"; +const grid = new MasonryInfiniteGrid(); + +grid.on("renderComplete", e => { + console.log(e); +}); +grid.renderItems(); +``` + +### getWrapperElement {#getWrapperElement} + +Returns the wrapper element specified by the user.
+ +### getScrollContainerElement {#getScrollContainerElement} + +Returns the container element corresponding to the scroll area.
+ +### getContainerElement {#getContainerElement} + +Returns the container element containing item elements.
+ +### syncItems {#syncItems} + +When items change, it synchronizes and renders items.
+ +**Returns**: this + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|items|[InfiniteGridItemInfo](InfiniteGridItemInfo)[]|||Options for rendering.
| + +### setCursors {#setCursors} + +Change 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.
| + +### getStartCursor {#getStartCursor} + +Returns the first index of visible groups.
+ +**Returns**: number + +### getEndCursor {#getEndCursor} + +Returns the last index of visible groups.
+ +**Returns**: number + +### append {#append} + +Add items at the bottom(right) of the grid.
+ +**Returns**: this +-items to be added
| +|groupKey|string \| number|✔️||The group key to be configured in items. It is automatically generated by default.
| + +```js +ig.append(`Add items at the top(left) of the grid.
+ +**Returns**: this +-items to be added
| +|groupKey|string \| number|✔️||The group key to be configured in items. It is automatically generated by default.
| + +```ts +ig.prepend(`Add items to a specific index.
+ +**Returns**: this +-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.
| + +```ts +ig.insert(2, `Add items based on group index.
+ +**Returns**: this +-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.
| + +```ts +ig.insertByGroupIndex(2, `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](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 {#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 {#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 {#appendPlaceholders} + +Add the placeholder at the end.
+ +**Returns**: [InsertedPlaceholdersResult](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 {#prependPlaceholders} + +Add the placeholder at the start.
+ +**Returns**: [InsertedPlaceholdersResult](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 {#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 {#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](InfiniteGridStatus)|||status object of the InfiniteGrid module.
| +|useFirstRender|boolean|✔️||Whether the first rendering has already been done.
| + +### removeGroupByIndex {#removeGroupByIndex} + +Removes the group corresponding to index.
+ +**Returns**: this + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|index|number|||| + +### removeGroupByKey {#removeGroupByKey} + +Removes the group corresponding to key.
+ +**Returns**: this + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|key|number \| string|||| + +### removeByIndex {#removeByIndex} + +Removes the item corresponding to index.
+ +**Returns**: this + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|index|number|||| + +### removeByKey {#removeByKey} + +Removes the item corresponding to key.
+ +**Returns**: this + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|key|string \| number|||| + +### updateItems {#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 {#getItems} + +Return all items of InfiniteGrid.
+ +**Returns**: InfiniteGridItem[] + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|includePlaceholders|boolean|✔️||Whether to include items corresponding to placeholders.
| + +### getVisibleItems {#getVisibleItems} + +Return visible items of InfiniteGrid.
+ +**Returns**: InfiniteGridItem[] + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|includePlaceholders|boolean|✔️||Whether to include items corresponding to placeholders.
| + +### getRenderingItems {#getRenderingItems} + +Return rendering items of InfiniteGrid.
+ +**Returns**: InfiniteGridItem[] + +### getGroups {#getGroups} + +Return all groups of InfiniteGrid.
+ +**Returns**: InfiniteGridGroup[] + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|includePlaceholders|boolean|✔️||Whether to include groups corresponding to placeholders.
| + +### getVisibleGroups {#getVisibleGroups} + +Return visible groups of InfiniteGrid.
+ +**Returns**: InfiniteGridGroup[] + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|includePlaceholders|boolean|✔️||Whether to include groups corresponding to placeholders.
| + +### wait {#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 {#ready} + +When the data request is complete, it is set to ready state.
+ +### isWait {#isWait} + +Returns whether it is set to wait to request data.
+ +### destroy {#destroy} + +Releases the instnace and events and returns the CSS of the container and elements.
+ +**Returns**: void + +### trigger {#trigger} + +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
| + +```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 {#once} + +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
| + +```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 {#hasOn} + +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
| + +```ts +import Component from "@egjs/component"; + +class Some extends Component<{ + hi: void; +}> { + some() { + this.hasOn("hi");// check hi event. + } +} +``` + +### on {#on} + +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
| + +```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 {#off} + +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.
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
| + +```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 {#event-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 {#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 {#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 {#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 {#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
| + diff --git a/packages/docs/versioned_docs/version-4.11.1/api/MasonryInfiniteGridOptions.mdx b/packages/docs/versioned_docs/version-4.11.1/api/MasonryInfiniteGridOptions.mdx new file mode 100644 index 000000000..ca88395a6 --- /dev/null +++ b/packages/docs/versioned_docs/version-4.11.1/api/MasonryInfiniteGridOptions.mdx @@ -0,0 +1,70 @@ +--- +custom_edit_url: null +--- + +Direction of the scroll movement. (true: horizontal, false: vertical) If horizontal is false, inlinePos is left, inlineSize is width, contentPos is top, and contentSize is height. If horizontal is true, inlinePos is top, inlineSize is height, contentPos is left, and contentSize is width.
Whether to set the css size and position of the item to %.
Indicates whether sizes of all card elements are equal to one another. If sizes of card elements to be arranged are all equal and this option is set to "true", the performance of layout arrangement can be improved.
Indicates whether sizes of all card elements does not change, the performance of layout arrangement can be improved.
Gap used to create space around items.
The prefix to use element's data attribute.
Debounce time to set in the resize event. (unit: ms)
Maximum time to debounce the resize event. (0 is not set)
Whether the resize method should be called automatically after a window resize event.
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.
Whether to use transform property instead of using left and top css properties.
Whether to automatically render through property change.
Whether to preserve the UI of the existing container or item when destroying.
The default direction value when direction is not set in the render option.
The number of outlines. If the number of outlines is 0, it is calculated according to the type of grid.
The size of the outline. If the outline size is 0, it is calculated according to the grid type.
Whether to get the size as rounded size(offsetWidth, offsetHeight). Set to true if transform is applied to the container. If false, get the size through getBoundingClientRect.
Whether to use ResizeObserver event to detect container size change when autoResize option is used.
Whether to detect size change of children if useResizeObserver option is used.
You can set the ItemRenderer directly externally.
You can set the ContainerManager directly externally.
The number of columns. If the number of columns is 0, it is automatically calculated according to the size of the container. Can be used instead of outlineLength.
The size of the columns. If it is 0, it is calculated as the size of the first item in items. Can be used instead of outlineSize.
The size ratio(inlineSize / contentSize) of the columns. 0 is not set.
Align of the position of the items. If you want to use stretch, be sure to set column, columnSize or maxStretchColumnSize option. ("start", "center", "end", "justify", "stretch")
Content direction alignment of items. “Masonry” is sorted in the form of masonry. Others are applied as content direction alignment, similar to vertical-align of inline-block.
If you set multiple columns (data-grid-column), the screen may look strange.
Difference Threshold for Counting Columns. Since offsetSize is calculated by rounding, the number of columns may not be accurate.
If stretch is used, the column can be automatically calculated by setting the maximum size of the column that can be stretched.
Direction of the scroll movement. (true: horizontal, false: vertical) If horizontal is false, inlinePos is left, inlineSize is width, contentPos is top, and contentSize is height. If horizontal is true, inlinePos is top, inlineSize is height, contentPos is left, and contentSize is width.
Whether to set the css size and position of the item to %.
Indicates whether sizes of all card elements are equal to one another. If sizes of card elements to be arranged are all equal and this option is set to "true", the performance of layout arrangement can be improved.
Indicates whether sizes of all card elements does not change, the performance of layout arrangement can be improved.
Gap used to create space around items.
The prefix to use element's data attribute.
Debounce time to set in the resize event. (unit: ms)
Maximum time to debounce the resize event. (0 is not set)
Whether the resize method should be called automatically after a window resize event.
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.
Whether to use transform property instead of using left and top css properties.
Whether to automatically render through property change.
Whether to preserve the UI of the existing container or item when destroying.
The default direction value when direction is not set in the render option.
The number of outlines. If the number of outlines is 0, it is calculated according to the type of grid.
The size of the outline. If the outline size is 0, it is calculated according to the grid type.
Whether to get the size as rounded size(offsetWidth, offsetHeight). Set to true if transform is applied to the container. If false, get the size through getBoundingClientRect.
Whether to use ResizeObserver event to detect container size change when autoResize option is used.
Whether to detect size change of children if useResizeObserver option is used.
You can set the ItemRenderer directly externally.
You can set the ContainerManager directly externally.
The target to which the container is applied. If false, create itself, if true, create container. A string or HTMLElement specifies the target directly.
| +|containerTag|string|"div"|If you create a container, you can set the container's tag.
| +|threshold|number|100|The size of the scrollable area for adding the next group of items.
| +|useRecycle|boolean|true|Whether to show only the DOM of the visible area.
| +|scrollContainer|HTMLElement \| string \| Ref<HTMLElement> \| null||You can set the scrollContainer directly. In this case, the container becomes the wrapper itself.
| +|gridConstructor|GridFunction||Grid class to apply Infinite function.
| +|appliedItemChecker|(item: InfiniteGridItem, grid: Grid) => boolean||A function that checks whether non-rendering items are included in the Grid.
| +|renderer|Renderer \| null||class that renders the DOM.
| + diff --git a/packages/docs/versioned_docs/version-4.11.1/api/OnChangeScroll.mdx b/packages/docs/versioned_docs/version-4.11.1/api/OnChangeScroll.mdx new file mode 100644 index 000000000..11bc9deb3 --- /dev/null +++ b/packages/docs/versioned_docs/version-4.11.1/api/OnChangeScroll.mdx @@ -0,0 +1,17 @@ +--- +custom_edit_url: null +--- + +An InfiniteGrid instance that triggered this event.
| +|direction|"start" \| "end"|The scroll direction.
| +|scrollPos|number|The scroll position.
| +|relativeScrollPos|number|The scroll position relative to container.
| + diff --git a/packages/docs/versioned_docs/version-4.11.1/api/OnContentError.mdx b/packages/docs/versioned_docs/version-4.11.1/api/OnContentError.mdx new file mode 100644 index 000000000..1a1974cd6 --- /dev/null +++ b/packages/docs/versioned_docs/version-4.11.1/api/OnContentError.mdx @@ -0,0 +1,19 @@ +--- +custom_edit_url: null +--- + +An InfiniteGrid instance that triggered this event.
| +|element|HTMLElement|The item's element.
| +|target|HTMLElement|The content element with error.
| +|item|InfiniteGridItem|The item with error content.
| +|update|() => void|If you have fixed the error and want to recheck it, call update(). If you remove an element, call the syncElements() method.
| +|remove|() => void|If you want to remove the item corresponding to the error, call remove().
| + diff --git a/packages/docs/versioned_docs/version-4.11.1/api/OnRenderComplete.mdx b/packages/docs/versioned_docs/version-4.11.1/api/OnRenderComplete.mdx new file mode 100644 index 000000000..60dc9a95b --- /dev/null +++ b/packages/docs/versioned_docs/version-4.11.1/api/OnRenderComplete.mdx @@ -0,0 +1,22 @@ +--- +custom_edit_url: null +--- + +An InfiniteGrid instance that triggered this event.
| +|mounted|InfiniteGridItem[]|The items rendered for the first time.
| +|updated|InfiniteGridItem[]|The items updated in size.
| +|direction|"start" \| "end"|The direction InfiniteGrid was rendered.
| +|isResize|boolean|Whether rendering was done using the resize event or the useResize option.
| +|startCursor|number|The key of the first group that has been rendered.
| +|endCursor|number|The key of the last group that has been rendered.
| +|items|InfiniteGridItem[]|Items that have been rendered.
| +|groups|InfiniteGridGroup[]|Groups that have been rendered.
| + diff --git a/packages/docs/versioned_docs/version-4.11.1/api/OnRequestAppend.mdx b/packages/docs/versioned_docs/version-4.11.1/api/OnRequestAppend.mdx new file mode 100644 index 000000000..0e77174d2 --- /dev/null +++ b/packages/docs/versioned_docs/version-4.11.1/api/OnRequestAppend.mdx @@ -0,0 +1,20 @@ +--- +custom_edit_url: null +--- + +An InfiniteGrid instance that triggered this event.
| +|groupKey|string \| number \| undefined|Last group key.
| +|nextGroupKey|string \| number \| undefined|The key of the next group that should replace Virtual Item(placeholder)s.
| +|nextGroupKeys|Array<string \| number>|Array of the following group keys that need to be replaced with Virtual Item(placeholder)s.
| +|isVirtual|boolean|Whether to request virtual groups corresponding to Virtual Item(placeholder)s.
| +|wait|() => void|Set to standby to request data.
| +|ready|() => void|When the data request is complete, it is set to ready state.
| + diff --git a/packages/docs/versioned_docs/version-4.11.1/api/OnRequestPrepend.mdx b/packages/docs/versioned_docs/version-4.11.1/api/OnRequestPrepend.mdx new file mode 100644 index 000000000..852f9ae45 --- /dev/null +++ b/packages/docs/versioned_docs/version-4.11.1/api/OnRequestPrepend.mdx @@ -0,0 +1,20 @@ +--- +custom_edit_url: null +--- + +An InfiniteGrid instance that triggered this event.
| +|groupKey|string \| number \| undefined|First group key.
| +|nextGroupKey|string \| number \| undefined|The key of the next group that should replace Virtual Item(placeholder)s.
| +|nextGroupKeys|Array<string \| number>|Array of the following group keys that need to be replaced with Virtual Item(placeholder)s.
| +|isVirtual|boolean|Whether to request virtual groups corresponding to Virtual Item(placeholder)s.
| +|wait|() => void|Set to standby to request data.
| +|ready|() => void|When the data request is complete, it is set to ready state.
| + diff --git a/packages/docs/versioned_docs/version-4.11.1/api/PackingInfiniteGrid.mdx b/packages/docs/versioned_docs/version-4.11.1/api/PackingInfiniteGrid.mdx new file mode 100644 index 000000000..5cedfdb3c --- /dev/null +++ b/packages/docs/versioned_docs/version-4.11.1/api/PackingInfiniteGrid.mdx @@ -0,0 +1,732 @@ +--- +custom_edit_url: null +--- + +```ts +class PackingInfiniteGrid +``` + +The PackingInfiniteGrid is a grid that shows the important items bigger without sacrificing the weight of the items.
Rows and columns are separated so that items are dynamically placed within the horizontal and vertical space rather than arranged in an orderly fashion.
If sizeWeight is higher than ratioWeight, the size of items is preserved as much as possible.
Conversely, if ratioWeight is higher than sizeWeight, the ratio of items is preserved as much as possible.
A base element for a module
| +|options|[PackingInfiniteGridOptions](PackingInfiniteGridOptions)|||The option object of the PackingInfiniteGrid module
| + +## Methods + +### renderItems {#renderItems} + +Rearrange items to fit the grid and render them. When rearrange is complete, the renderComplete event is fired.
Options for rendering.
| + +```ts +import { MasonryInfiniteGrid } from "@egjs/infinitegrid"; +const grid = new MasonryInfiniteGrid(); + +grid.on("renderComplete", e => { + console.log(e); +}); +grid.renderItems(); +``` + +### getWrapperElement {#getWrapperElement} + +Returns the wrapper element specified by the user.
+ +### getScrollContainerElement {#getScrollContainerElement} + +Returns the container element corresponding to the scroll area.
+ +### getContainerElement {#getContainerElement} + +Returns the container element containing item elements.
+ +### syncItems {#syncItems} + +When items change, it synchronizes and renders items.
+ +**Returns**: this + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|items|[InfiniteGridItemInfo](InfiniteGridItemInfo)[]|||Options for rendering.
| + +### setCursors {#setCursors} + +Change 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.
| + +### getStartCursor {#getStartCursor} + +Returns the first index of visible groups.
+ +**Returns**: number + +### getEndCursor {#getEndCursor} + +Returns the last index of visible groups.
+ +**Returns**: number + +### append {#append} + +Add items at the bottom(right) of the grid.
+ +**Returns**: this +-items to be added
| +|groupKey|string \| number|✔️||The group key to be configured in items. It is automatically generated by default.
| + +```js +ig.append(`Add items at the top(left) of the grid.
+ +**Returns**: this +-items to be added
| +|groupKey|string \| number|✔️||The group key to be configured in items. It is automatically generated by default.
| + +```ts +ig.prepend(`Add items to a specific index.
+ +**Returns**: this +-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.
| + +```ts +ig.insert(2, `Add items based on group index.
+ +**Returns**: this +-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.
| + +```ts +ig.insertByGroupIndex(2, `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](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 {#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 {#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 {#appendPlaceholders} + +Add the placeholder at the end.
+ +**Returns**: [InsertedPlaceholdersResult](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 {#prependPlaceholders} + +Add the placeholder at the start.
+ +**Returns**: [InsertedPlaceholdersResult](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 {#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 {#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](InfiniteGridStatus)|||status object of the InfiniteGrid module.
| +|useFirstRender|boolean|✔️||Whether the first rendering has already been done.
| + +### removeGroupByIndex {#removeGroupByIndex} + +Removes the group corresponding to index.
+ +**Returns**: this + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|index|number|||| + +### removeGroupByKey {#removeGroupByKey} + +Removes the group corresponding to key.
+ +**Returns**: this + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|key|number \| string|||| + +### removeByIndex {#removeByIndex} + +Removes the item corresponding to index.
+ +**Returns**: this + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|index|number|||| + +### removeByKey {#removeByKey} + +Removes the item corresponding to key.
+ +**Returns**: this + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|key|string \| number|||| + +### updateItems {#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 {#getItems} + +Return all items of InfiniteGrid.
+ +**Returns**: InfiniteGridItem[] + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|includePlaceholders|boolean|✔️||Whether to include items corresponding to placeholders.
| + +### getVisibleItems {#getVisibleItems} + +Return visible items of InfiniteGrid.
+ +**Returns**: InfiniteGridItem[] + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|includePlaceholders|boolean|✔️||Whether to include items corresponding to placeholders.
| + +### getRenderingItems {#getRenderingItems} + +Return rendering items of InfiniteGrid.
+ +**Returns**: InfiniteGridItem[] + +### getGroups {#getGroups} + +Return all groups of InfiniteGrid.
+ +**Returns**: InfiniteGridGroup[] + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|includePlaceholders|boolean|✔️||Whether to include groups corresponding to placeholders.
| + +### getVisibleGroups {#getVisibleGroups} + +Return visible groups of InfiniteGrid.
+ +**Returns**: InfiniteGridGroup[] + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|includePlaceholders|boolean|✔️||Whether to include groups corresponding to placeholders.
| + +### wait {#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 {#ready} + +When the data request is complete, it is set to ready state.
+ +### isWait {#isWait} + +Returns whether it is set to wait to request data.
+ +### destroy {#destroy} + +Releases the instnace and events and returns the CSS of the container and elements.
+ +**Returns**: void + +### trigger {#trigger} + +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
| + +```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 {#once} + +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
| + +```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 {#hasOn} + +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
| + +```ts +import Component from "@egjs/component"; + +class Some extends Component<{ + hi: void; +}> { + some() { + this.hasOn("hi");// check hi event. + } +} +``` + +### on {#on} + +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
| + +```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 {#off} + +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.
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
| + +```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 {#event-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 {#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 {#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 {#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 {#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
| + diff --git a/packages/docs/versioned_docs/version-4.11.1/api/PackingInfiniteGridOptions.mdx b/packages/docs/versioned_docs/version-4.11.1/api/PackingInfiniteGridOptions.mdx new file mode 100644 index 000000000..4758f4915 --- /dev/null +++ b/packages/docs/versioned_docs/version-4.11.1/api/PackingInfiniteGridOptions.mdx @@ -0,0 +1,67 @@ +--- +custom_edit_url: null +--- + +Direction of the scroll movement. (true: horizontal, false: vertical) If horizontal is false, inlinePos is left, inlineSize is width, contentPos is top, and contentSize is height. If horizontal is true, inlinePos is top, inlineSize is height, contentPos is left, and contentSize is width.
Whether to set the css size and position of the item to %.
Indicates whether sizes of all card elements are equal to one another. If sizes of card elements to be arranged are all equal and this option is set to "true", the performance of layout arrangement can be improved.
Indicates whether sizes of all card elements does not change, the performance of layout arrangement can be improved.
Gap used to create space around items.
The prefix to use element's data attribute.
Debounce time to set in the resize event. (unit: ms)
Maximum time to debounce the resize event. (0 is not set)
Whether the resize method should be called automatically after a window resize event.
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.
Whether to use transform property instead of using left and top css properties.
Whether to automatically render through property change.
Whether to preserve the UI of the existing container or item when destroying.
The default direction value when direction is not set in the render option.
The number of outlines. If the number of outlines is 0, it is calculated according to the type of grid.
The size of the outline. If the outline size is 0, it is calculated according to the grid type.
Whether to get the size as rounded size(offsetWidth, offsetHeight). Set to true if transform is applied to the container. If false, get the size through getBoundingClientRect.
Whether to use ResizeObserver event to detect container size change when autoResize option is used.
Whether to detect size change of children if useResizeObserver option is used.
You can set the ItemRenderer directly externally.
You can set the ContainerManager directly externally.
The aspect ratio (inlineSize / contentSize) of the container with items.
The size weight when placing items.
The weight to keep ratio when placing items.
The priority that determines the weight of the item. "size" = (sizeWieght: 100, ratioWeight: 1), "ratio" = (sizeWeight: 1, ratioWeight; 100), "custom" = (set sizeWeight, ratioWeight)
item's weight = item's ratio(inlineSize / contentSize) change * ratioWeight + size(inlineSize * contentSize) change * sizeWeight.
Direction of the scroll movement. (true: horizontal, false: vertical) If horizontal is false, inlinePos is left, inlineSize is width, contentPos is top, and contentSize is height. If horizontal is true, inlinePos is top, inlineSize is height, contentPos is left, and contentSize is width.
Whether to set the css size and position of the item to %.
Indicates whether sizes of all card elements are equal to one another. If sizes of card elements to be arranged are all equal and this option is set to "true", the performance of layout arrangement can be improved.
Indicates whether sizes of all card elements does not change, the performance of layout arrangement can be improved.
Gap used to create space around items.
The prefix to use element's data attribute.
Debounce time to set in the resize event. (unit: ms)
Maximum time to debounce the resize event. (0 is not set)
Whether the resize method should be called automatically after a window resize event.
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.
Whether to use transform property instead of using left and top css properties.
Whether to automatically render through property change.
Whether to preserve the UI of the existing container or item when destroying.
The default direction value when direction is not set in the render option.
The number of outlines. If the number of outlines is 0, it is calculated according to the type of grid.
The size of the outline. If the outline size is 0, it is calculated according to the grid type.
Whether to get the size as rounded size(offsetWidth, offsetHeight). Set to true if transform is applied to the container. If false, get the size through getBoundingClientRect.
Whether to use ResizeObserver event to detect container size change when autoResize option is used.
Whether to detect size change of children if useResizeObserver option is used.
You can set the ItemRenderer directly externally.
You can set the ContainerManager directly externally.
The target to which the container is applied. If false, create itself, if true, create container. A string or HTMLElement specifies the target directly.
| +|containerTag|string|"div"|If you create a container, you can set the container's tag.
| +|threshold|number|100|The size of the scrollable area for adding the next group of items.
| +|useRecycle|boolean|true|Whether to show only the DOM of the visible area.
| +|scrollContainer|HTMLElement \| string \| Ref<HTMLElement> \| null||You can set the scrollContainer directly. In this case, the container becomes the wrapper itself.
| +|gridConstructor|GridFunction||Grid class to apply Infinite function.
| +|appliedItemChecker|(item: InfiniteGridItem, grid: Grid) => boolean||A function that checks whether non-rendering items are included in the Grid.
| +|renderer|Renderer \| null||class that renders the DOM.
| + diff --git a/packages/docs/versioned_docs/version-4.11.1/api/withInfiniteGridMethods.mdx b/packages/docs/versioned_docs/version-4.11.1/api/withInfiniteGridMethods.mdx new file mode 100644 index 000000000..1e9ec2b08 --- /dev/null +++ b/packages/docs/versioned_docs/version-4.11.1/api/withInfiniteGridMethods.mdx @@ -0,0 +1,23 @@ +--- +custom_edit_url: null +--- + +```ts +const withInfiniteGridMethods +``` + +Decorator that makes the method of InfiniteGrid available in the framework.
+ +```js +import { withInfiniteGridMethods } from "@egjs/infinitegrid"; + +class Grid extends React.Component