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. (default: 0)
| |columnSize|number|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. (default: 0)
| |columnSizeRatio|number|The size ratio(inlineSize / contentSize) of the columns. 0 is not set. (default: 0)
| -|align|GridAlign|Align of the position of the items. If you want to use stretch, be sure to set column or columnSize option. ("start", "center", "end", "justify", "stretch") (default: "justify")
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") (default: "justify")
Difference Threshold for Counting Columns. Since offsetSize is calculated by rounding, the number of columns may not be accurate. (default: 1)
| +|maxStretchColumnSize|number|If stretch is used, the column can be automatically calculated by setting the maximum size of the column that can be stretched. (default: Infinity)
| |horizontal|boolean|| |percentage|Array<"position" \| "size"> \| boolean|| |isEqualSize|boolean|| diff --git a/packages/docs/i18n/ko/docusaurus-plugin-content-docs/current/api/MasonryInfiniteGridOptions.mdx b/packages/docs/i18n/ko/docusaurus-plugin-content-docs/current/api/MasonryInfiniteGridOptions.mdx index 6ee760d92..aa04e9d4b 100644 --- a/packages/docs/i18n/ko/docusaurus-plugin-content-docs/current/api/MasonryInfiniteGridOptions.mdx +++ b/packages/docs/i18n/ko/docusaurus-plugin-content-docs/current/api/MasonryInfiniteGridOptions.mdx @@ -34,8 +34,9 @@ custom_edit_url: null |column|number|열의 개수. 열의 개수가 0이라면, 컨테이너의 사이즈에 의해 계산이 된다. outlineLength 대신 사용할 수 있다.(default: 0) | |columnSize|number| 열의 사이즈. 만약 열의 사이즈가 0이면, 아이템들의 첫번째 아이템의 사이즈로 계산이 된다. outlineSize 대신 사용할 수 있다.(default: 0) | |columnSizeRatio|number|열의 사이즈 비율(inlineSize / contentSize). 0은 미설정이다. | -|align|GridAlign|아이템들의 위치의 정렬.stretch를 사용하고 싶다면 column 또는 columnSize 옵션을 설정해라. ("start", "center", "end", "justify", "stretch") (default: "justify")|
+|align|GridAlign|아이템들의 위치의 정렬. stretch를 사용하고 싶다면 column, columnSize 또는 maxStretchColumnSize 옵션을 설정해라. ("start", "center", "end", "justify", "stretch") (default: "justify")|
|columnCalculationThreshold|number|칼럼 개수를 계산하기 위한 차이 임계값. offset 사이즈는 반올림으로 게산하기 때문에 정확하지 않을 수 있다. (default: 1)|
+|maxStretchColumnSize|number|stretch를 사용한 경우 최대로 늘릴 수 있는 column의 사이즈를 설정하여 column을 자동 계산할 수 있다. (default: Infinity)|
|horizontal|boolean||
|percentage|Array<"position" \| "size"> \| boolean||
|isEqualSize|boolean||
diff --git a/packages/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.6.0/api/Component.mdx b/packages/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.6.0/api/Component.mdx
new file mode 100644
index 000000000..a4d4c5e3a
--- /dev/null
+++ b/packages/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.6.0/api/Component.mdx
@@ -0,0 +1,211 @@
+---
+custom_edit_url: null
+---
+
+```ts
+class Component
+```
+
+stretch를 사용하고 싶다면 column, columnSize 또는 maxStretchColumnSize 옵션을 설정해라. ("start", "center", "end", "justify", "stretch") (default: "justify")|
+|columnCalculationThreshold|number|칼럼 개수를 계산하기 위한 차이 임계값. offset 사이즈는 반올림으로 게산하기 때문에 정확하지 않을 수 있다. (default: 1)|
+|maxStretchColumnSize|number|stretch를 사용한 경우 최대로 늘릴 수 있는 column의 사이즈를 설정하여 column을 자동 계산할 수 있다. (default: Infinity)|
+|horizontal|boolean||
+|percentage|Array<"position" \| "size"> \| boolean||
+|isEqualSize|boolean||
+|isConstantSize|boolean||
+|gap|number||
+|attributePrefix|string||
+|resizeDebounce|number||
+|maxResizeDebounce|number||
+|autoResize|boolean||
+|useFit|boolean||
+|useTransform|boolean||
+|renderOnPropertyChange|boolean||
+|preserveUIOnDestroy|boolean||
+|defaultDirection|"start" \| "end"||
+|outlineLength|number||
+|outlineSize|number||
+|useRoundedSize|boolean||
+|useResizeObserver|boolean||
+|observeChildren|boolean||
+|externalItemRenderer|ItemRenderer \| null||
+|externalContainerManager|ContainerManager \| null||
+|container|boolean \| string \| HTMLElement|container를 적용할 대상. false면 자기 자신, true면 container를 생성. string 또는 HTMLElement는 직접 대상을 지정. (default: false)|
+|containerTag|string|container를 생성한다면 container의 tag를 정할 수 있다. (default: "div")|
+|threshold|number|다음 아이템 그룹을 추가하기 위한 스크롤 영역의 크기. (default: 100)|
+|useRecycle|boolean|보이는 영역의 DOM만 보여줄지 여부. (default: true)|
+|gridConstructor|GridFunction|Infinite 기능을 적용할 Grid 클래스.|
+|renderer|Renderer \| null| DOM을 렌더하는 클래스. |
+
diff --git a/packages/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.6.0/api/OnChangeScroll.mdx b/packages/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.6.0/api/OnChangeScroll.mdx
new file mode 100644
index 000000000..c7d67a6b4
--- /dev/null
+++ b/packages/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.6.0/api/OnChangeScroll.mdx
@@ -0,0 +1,17 @@
+---
+custom_edit_url: null
+---
+
+ratioWeight + size(inlineSize * contentSize)의 변화량 * sizeWeight.|
+|horizontal|boolean||
+|percentage|Array<"position" \| "size"> \| boolean||
+|isEqualSize|boolean||
+|isConstantSize|boolean||
+|gap|number||
+|attributePrefix|string||
+|resizeDebounce|number||
+|maxResizeDebounce|number||
+|autoResize|boolean||
+|useFit|boolean||
+|useTransform|boolean||
+|renderOnPropertyChange|boolean||
+|preserveUIOnDestroy|boolean||
+|defaultDirection|"start" \| "end"||
+|outlineLength|number||
+|outlineSize|number||
+|useRoundedSize|boolean||
+|useResizeObserver|boolean||
+|observeChildren|boolean||
+|externalItemRenderer|ItemRenderer \| null||
+|externalContainerManager|ContainerManager \| null||
+|container|boolean \| string \| HTMLElement|container를 적용할 대상. false면 자기 자신, true면 container를 생성. string 또는 HTMLElement는 직접 대상을 지정. (default: false)|
+|containerTag|string|container를 생성한다면 container의 tag를 정할 수 있다. (default: "div")|
+|threshold|number|다음 아이템 그룹을 추가하기 위한 스크롤 영역의 크기. (default: 100)|
+|useRecycle|boolean|보이는 영역의 DOM만 보여줄지 여부. (default: true)|
+|gridConstructor|GridFunction|Infinite 기능을 적용할 Grid 클래스.|
+|renderer|Renderer \| null| DOM을 렌더하는 클래스. |
+
diff --git a/packages/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.6.0/api/withInfiniteGridMethods.mdx b/packages/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.6.0/api/withInfiniteGridMethods.mdx
new file mode 100644
index 000000000..38af66bec
--- /dev/null
+++ b/packages/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.6.0/api/withInfiniteGridMethods.mdx
@@ -0,0 +1,23 @@
+---
+custom_edit_url: null
+---
+
+```ts
+const withInfiniteGridMethods
+```
+
+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.6.0/api/FrameInfiniteGrid.mdx b/packages/docs/versioned_docs/version-4.6.0/api/FrameInfiniteGrid.mdx new file mode 100644 index 000000000..faac1341c --- /dev/null +++ b/packages/docs/versioned_docs/version-4.6.0/api/FrameInfiniteGrid.mdx @@ -0,0 +1,732 @@ +--- +custom_edit_url: null +--- + +```ts +class FrameInfiniteGrid extends InfiniteGrid +``` + +'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.6.0/api/FrameInfiniteGridOptions.mdx b/packages/docs/versioned_docs/version-4.6.0/api/FrameInfiniteGridOptions.mdx new file mode 100644 index 000000000..f7d0ae572 --- /dev/null +++ b/packages/docs/versioned_docs/version-4.6.0/api/FrameInfiniteGridOptions.mdx @@ -0,0 +1,64 @@ +--- +custom_edit_url: null +--- + +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. (default: [])
Make sure that the frame can be attached after the previous frame. (default: true)
| +|rectSize|number \| {inlineSize: number, contentSize: number}|1x1 rect size. If it is 0, it is determined by the number of columns in the frame. (default: 0)
| +|horizontal|boolean|| +|percentage|Array<"position" \| "size"> \| boolean|| +|isEqualSize|boolean|| +|isConstantSize|boolean|| +|gap|number|| +|attributePrefix|string|| +|resizeDebounce|number|| +|maxResizeDebounce|number|| +|autoResize|boolean|| +|useFit|boolean|| +|useTransform|boolean|| +|renderOnPropertyChange|boolean|| +|preserveUIOnDestroy|boolean|| +|defaultDirection|"start" \| "end"|| +|outlineLength|number|| +|outlineSize|number|| +|useRoundedSize|boolean|| +|useResizeObserver|boolean|| +|observeChildren|boolean|| +|externalItemRenderer|ItemRenderer \| null|| +|externalContainerManager|ContainerManager \| null|| +|container|boolean \| string \| HTMLElement|The target to which the container is applied. If false, create itself, if true, create container. A string or HTMLElement specifies the target directly. (default: false)
| +|containerTag|string|If you create a container, you can set the container's tag. (default: "div")
| +|threshold|number|The size of the scrollable area for adding the next group of items. (default: 100)
| +|useRecycle|boolean|Whether to show only the DOM of the visible area. (default: true)
| +|gridConstructor|GridFunction|Grid class to apply Infinite function.
| +|renderer|Renderer \| null|class that renders the DOM.
| + diff --git a/packages/docs/versioned_docs/version-4.6.0/api/Grid.mdx b/packages/docs/versioned_docs/version-4.6.0/api/Grid.mdx new file mode 100644 index 000000000..d059e0e32 --- /dev/null +++ b/packages/docs/versioned_docs/version-4.6.0/api/Grid.mdx @@ -0,0 +1,406 @@ +--- +custom_edit_url: null +--- + +```ts +class Grid extends eg.Component +``` + +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.
| + +## 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.6.0/api/InfiniteGrid.mdx b/packages/docs/versioned_docs/version-4.6.0/api/InfiniteGrid.mdx new file mode 100644 index 000000000..82e5ec995 --- /dev/null +++ b/packages/docs/versioned_docs/version-4.6.0/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.6.0/api/InfiniteGridItemInfo.mdx b/packages/docs/versioned_docs/version-4.6.0/api/InfiniteGridItemInfo.mdx new file mode 100644 index 000000000..a45451516 --- /dev/null +++ b/packages/docs/versioned_docs/version-4.6.0/api/InfiniteGridItemInfo.mdx @@ -0,0 +1,19 @@ +--- +custom_edit_url: null +--- + +The target to which the container is applied. If false, create itself, if true, create container. A string or HTMLElement specifies the target directly. (default: false)
| +|containerTag|string|If you create a container, you can set the container's tag. (default: "div")
| +|threshold|number|The size of the scrollable area for adding the next group of items. (default: 100)
| +|useRecycle|boolean|Whether to show only the DOM of the visible area. (default: true)
| +|gridConstructor|GridFunction|Grid class to apply Infinite function.
| +|renderer|Renderer \| null|class that renders the DOM.
| + diff --git a/packages/docs/versioned_docs/version-4.6.0/api/InfiniteGridStatus.mdx b/packages/docs/versioned_docs/version-4.6.0/api/InfiniteGridStatus.mdx new file mode 100644 index 000000000..d72132f97 --- /dev/null +++ b/packages/docs/versioned_docs/version-4.6.0/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.6.0/api/JustifiedInfiniteGrid.mdx b/packages/docs/versioned_docs/version-4.6.0/api/JustifiedInfiniteGrid.mdx new file mode 100644 index 000000000..9ab4179cc --- /dev/null +++ b/packages/docs/versioned_docs/version-4.6.0/api/JustifiedInfiniteGrid.mdx @@ -0,0 +1,732 @@ +--- +custom_edit_url: null +--- + +```ts +class JustifiedInfiniteGrid extends InfiniteGrid +``` + +'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.6.0/api/JustifiedInfiniteGridOptions.mdx b/packages/docs/versioned_docs/version-4.6.0/api/JustifiedInfiniteGridOptions.mdx new file mode 100644 index 000000000..b0fe97a63 --- /dev/null +++ b/packages/docs/versioned_docs/version-4.6.0/api/JustifiedInfiniteGridOptions.mdx @@ -0,0 +1,66 @@ +--- +custom_edit_url: null +--- + +The minimum and maximum number of items per line. (default: [1, 8])
| +|rowRange|number \| number[]|The minimum and maximum number of rows in a group, 0 is not set. (default: 0)
| +|sizeRange|number \| number[]|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. (default: [0, Infinity])
| +|displayedRow|number|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. (default: -1)
| +|isCroppedSize|boolean|Whether to crop when the row size is out of sizeRange. If set to true, this ratio can be broken. (default: false)
| +|horizontal|boolean|| +|percentage|Array<"position" \| "size"> \| boolean|| +|isEqualSize|boolean|| +|isConstantSize|boolean|| +|gap|number|| +|attributePrefix|string|| +|resizeDebounce|number|| +|maxResizeDebounce|number|| +|autoResize|boolean|| +|useFit|boolean|| +|useTransform|boolean|| +|renderOnPropertyChange|boolean|| +|preserveUIOnDestroy|boolean|| +|defaultDirection|"start" \| "end"|| +|outlineLength|number|| +|outlineSize|number|| +|useRoundedSize|boolean|| +|useResizeObserver|boolean|| +|observeChildren|boolean|| +|externalItemRenderer|ItemRenderer \| null|| +|externalContainerManager|ContainerManager \| null|| +|container|boolean \| string \| HTMLElement|The target to which the container is applied. If false, create itself, if true, create container. A string or HTMLElement specifies the target directly. (default: false)
| +|containerTag|string|If you create a container, you can set the container's tag. (default: "div")
| +|threshold|number|The size of the scrollable area for adding the next group of items. (default: 100)
| +|useRecycle|boolean|Whether to show only the DOM of the visible area. (default: true)
| +|gridConstructor|GridFunction|Grid class to apply Infinite function.
| +|renderer|Renderer \| null|class that renders the DOM.
| + diff --git a/packages/docs/versioned_docs/version-4.6.0/api/MasonryInfiniteGrid.mdx b/packages/docs/versioned_docs/version-4.6.0/api/MasonryInfiniteGrid.mdx new file mode 100644 index 000000000..4b66e4f6c --- /dev/null +++ b/packages/docs/versioned_docs/version-4.6.0/api/MasonryInfiniteGrid.mdx @@ -0,0 +1,732 @@ +--- +custom_edit_url: null +--- + +```ts +class MasonryInfiniteGrid extends InfiniteGrid +``` + +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.6.0/api/MasonryInfiniteGridOptions.mdx b/packages/docs/versioned_docs/version-4.6.0/api/MasonryInfiniteGridOptions.mdx new file mode 100644 index 000000000..a10ccc335 --- /dev/null +++ b/packages/docs/versioned_docs/version-4.6.0/api/MasonryInfiniteGridOptions.mdx @@ -0,0 +1,67 @@ +--- +custom_edit_url: null +--- + +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. (default: 0)
| +|columnSize|number|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. (default: 0)
| +|columnSizeRatio|number|The size ratio(inlineSize / contentSize) of the columns. 0 is not set. (default: 0)
| +|align|GridAlign|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") (default: "justify")
Difference Threshold for Counting Columns. Since offsetSize is calculated by rounding, the number of columns may not be accurate. (default: 1)
| +|maxStretchColumnSize|number|If stretch is used, the column can be automatically calculated by setting the maximum size of the column that can be stretched. (default: Infinity)
| +|horizontal|boolean|| +|percentage|Array<"position" \| "size"> \| boolean|| +|isEqualSize|boolean|| +|isConstantSize|boolean|| +|gap|number|| +|attributePrefix|string|| +|resizeDebounce|number|| +|maxResizeDebounce|number|| +|autoResize|boolean|| +|useFit|boolean|| +|useTransform|boolean|| +|renderOnPropertyChange|boolean|| +|preserveUIOnDestroy|boolean|| +|defaultDirection|"start" \| "end"|| +|outlineLength|number|| +|outlineSize|number|| +|useRoundedSize|boolean|| +|useResizeObserver|boolean|| +|observeChildren|boolean|| +|externalItemRenderer|ItemRenderer \| null|| +|externalContainerManager|ContainerManager \| null|| +|container|boolean \| string \| HTMLElement|The target to which the container is applied. If false, create itself, if true, create container. A string or HTMLElement specifies the target directly. (default: false)
| +|containerTag|string|If you create a container, you can set the container's tag. (default: "div")
| +|threshold|number|The size of the scrollable area for adding the next group of items. (default: 100)
| +|useRecycle|boolean|Whether to show only the DOM of the visible area. (default: true)
| +|gridConstructor|GridFunction|Grid class to apply Infinite function.
| +|renderer|Renderer \| null|class that renders the DOM.
| + diff --git a/packages/docs/versioned_docs/version-4.6.0/api/OnChangeScroll.mdx b/packages/docs/versioned_docs/version-4.6.0/api/OnChangeScroll.mdx new file mode 100644 index 000000000..11bc9deb3 --- /dev/null +++ b/packages/docs/versioned_docs/version-4.6.0/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.6.0/api/OnContentError.mdx b/packages/docs/versioned_docs/version-4.6.0/api/OnContentError.mdx new file mode 100644 index 000000000..1a1974cd6 --- /dev/null +++ b/packages/docs/versioned_docs/version-4.6.0/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.6.0/api/OnRenderComplete.mdx b/packages/docs/versioned_docs/version-4.6.0/api/OnRenderComplete.mdx new file mode 100644 index 000000000..60dc9a95b --- /dev/null +++ b/packages/docs/versioned_docs/version-4.6.0/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.6.0/api/OnRequestAppend.mdx b/packages/docs/versioned_docs/version-4.6.0/api/OnRequestAppend.mdx new file mode 100644 index 000000000..0e77174d2 --- /dev/null +++ b/packages/docs/versioned_docs/version-4.6.0/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.6.0/api/OnRequestPrepend.mdx b/packages/docs/versioned_docs/version-4.6.0/api/OnRequestPrepend.mdx new file mode 100644 index 000000000..852f9ae45 --- /dev/null +++ b/packages/docs/versioned_docs/version-4.6.0/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.6.0/api/PackingInfiniteGrid.mdx b/packages/docs/versioned_docs/version-4.6.0/api/PackingInfiniteGrid.mdx new file mode 100644 index 000000000..895a32f35 --- /dev/null +++ b/packages/docs/versioned_docs/version-4.6.0/api/PackingInfiniteGrid.mdx @@ -0,0 +1,732 @@ +--- +custom_edit_url: null +--- + +```ts +class PackingInfiniteGrid extends InfiniteGrid +``` + +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.6.0/api/PackingInfiniteGridOptions.mdx b/packages/docs/versioned_docs/version-4.6.0/api/PackingInfiniteGridOptions.mdx new file mode 100644 index 000000000..3d65c0228 --- /dev/null +++ b/packages/docs/versioned_docs/version-4.6.0/api/PackingInfiniteGridOptions.mdx @@ -0,0 +1,65 @@ +--- +custom_edit_url: null +--- + +The aspect ratio (inlineSize / contentSize) of the container with items. (default: 1)
| +|sizeWeight|number|The size weight when placing items. (default: 1)
| +|ratioWeight|number|The weight to keep ratio when placing items. (default: 1)
| +|weightPriority|"size" \| "ratio" \| "custom"|The priority that determines the weight of the item. (default: "custom"), "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.
The target to which the container is applied. If false, create itself, if true, create container. A string or HTMLElement specifies the target directly. (default: false)
| +|containerTag|string|If you create a container, you can set the container's tag. (default: "div")
| +|threshold|number|The size of the scrollable area for adding the next group of items. (default: 100)
| +|useRecycle|boolean|Whether to show only the DOM of the visible area. (default: true)
| +|gridConstructor|GridFunction|Grid class to apply Infinite function.
| +|renderer|Renderer \| null|class that renders the DOM.
| + diff --git a/packages/docs/versioned_docs/version-4.6.0/api/withInfiniteGridMethods.mdx b/packages/docs/versioned_docs/version-4.6.0/api/withInfiniteGridMethods.mdx new file mode 100644 index 000000000..1e9ec2b08 --- /dev/null +++ b/packages/docs/versioned_docs/version-4.6.0/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