From da78e10370223bda5f73f4fcaf123181b34a64a3 Mon Sep 17 00:00:00 2001 From: malangfox Date: Fri, 6 Dec 2024 19:20:58 +0900 Subject: [PATCH] chore(release): release packages --- .../current/api/Camera.mdx | 2 +- .../current/api/Flicking.mdx | 21 +- .../current/api/MOVE_DIRECTION.mdx | 21 + .../version-4.12.0/api/ALIGN.mdx | 22 + .../version-4.12.0/api/AnchorPoint.mdx | 67 + .../version-4.12.0/api/AnimatingState.mdx | 166 ++ .../version-4.12.0/api/AxesController.mdx | 273 +++ .../version-4.12.0/api/BoundCamera.mdx | 456 +++++ .../version-4.12.0/api/CIRCULAR_FALLBACK.mdx | 21 + .../version-4.12.0/api/Camera.mdx | 492 ++++++ .../version-4.12.0/api/CameraMode.mdx | 27 + .../version-4.12.0/api/CircularCamera.mdx | 456 +++++ .../version-4.12.0/api/CircularCameraMode.mdx | 14 + .../version-4.12.0/api/Component.mdx | 211 +++ .../version-4.12.0/api/Control.mdx | 267 +++ .../version-4.12.0/api/ControlParams.mdx | 20 + .../version-4.12.0/api/DIRECTION.mdx | 22 + .../version-4.12.0/api/DisabledState.mdx | 166 ++ .../version-4.12.0/api/DraggingState.mdx | 166 ++ .../version-4.12.0/api/ERROR_CODE.mdx | 34 + .../version-4.12.0/api/EVENT.mdx | 14 + .../version-4.12.0/api/EVENTS.mdx | 36 + .../version-4.12.0/api/ElementLike.mdx | 12 + .../version-4.12.0/api/ElementPanel.mdx | 433 +++++ .../version-4.12.0/api/ExternalPanel.mdx | 423 +++++ .../version-4.12.0/api/ExternalRenderer.mdx | 218 +++ .../version-4.12.0/api/Flicking.mdx | 1547 +++++++++++++++++ .../version-4.12.0/api/FlickingError.mdx | 47 + .../version-4.12.0/api/FlickingEvents.mdx | 12 + .../version-4.12.0/api/FlickingOptions.mdx | 12 + .../version-4.12.0/api/FreeControl.mdx | 298 ++++ .../version-4.12.0/api/FreeControlOptions.mdx | 18 + .../version-4.12.0/api/HoldingState.mdx | 166 ++ .../version-4.12.0/api/IdleState.mdx | 166 ++ .../version-4.12.0/api/LinearCamera.mdx | 456 +++++ .../version-4.12.0/api/MOVE_DIRECTION.mdx | 21 + .../version-4.12.0/api/MOVE_TYPE.mdx | 22 + .../version-4.12.0/api/ORDER.mdx | 21 + .../version-4.12.0/api/POSITION_KEY.mdx | 14 + .../version-4.12.0/api/Panel.mdx | 461 +++++ .../version-4.12.0/api/Plugin.mdx | 20 + .../version-4.12.0/api/Renderer.mdx | 230 +++ .../version-4.12.0/api/RenderingStrategy.mdx | 12 + .../version-4.12.0/api/SnapControl.mdx | 298 ++++ .../version-4.12.0/api/SnapControlOptions.mdx | 18 + .../version-4.12.0/api/State.mdx | 164 ++ .../version-4.12.0/api/Status.mdx | 25 + .../version-4.12.0/api/StrictControl.mdx | 298 ++++ .../api/StrictControlOptions.mdx | 18 + .../version-4.12.0/api/TogglePoint.mdx | 22 + .../version-4.12.0/api/VanillaRenderer.mdx | 216 +++ .../version-4.12.0/api/Viewport.mdx | 106 ++ .../version-4.12.0/api/VirtualPanel.mdx | 498 ++++++ docs/package-lock.json | 28 +- docs/package.json | 2 +- .../version-4.12.0/api/ALIGN.mdx | 22 + .../version-4.12.0/api/AnchorPoint.mdx | 67 + .../version-4.12.0/api/AnimatingState.mdx | 166 ++ .../version-4.12.0/api/AxesController.mdx | 273 +++ .../version-4.12.0/api/CIRCULAR_FALLBACK.mdx | 21 + .../version-4.12.0/api/Camera.mdx | 492 ++++++ .../version-4.12.0/api/CameraMode.mdx | 27 + .../version-4.12.0/api/CircularCameraMode.mdx | 14 + .../version-4.12.0/api/Control.mdx | 267 +++ .../version-4.12.0/api/ControlParams.mdx | 20 + .../version-4.12.0/api/DIRECTION.mdx | 22 + .../version-4.12.0/api/DisabledState.mdx | 166 ++ .../version-4.12.0/api/DraggingState.mdx | 166 ++ .../version-4.12.0/api/ERROR_CODE.mdx | 34 + .../version-4.12.0/api/EVENT.mdx | 14 + .../version-4.12.0/api/EVENTS.mdx | 36 + .../version-4.12.0/api/ElementLike.mdx | 12 + .../version-4.12.0/api/ExternalRenderer.mdx | 218 +++ .../version-4.12.0/api/Flicking.mdx | 1547 +++++++++++++++++ .../version-4.12.0/api/FlickingError.mdx | 47 + .../version-4.12.0/api/FlickingEvents.mdx | 12 + .../version-4.12.0/api/FlickingOptions.mdx | 12 + .../version-4.12.0/api/FreeControl.mdx | 298 ++++ .../version-4.12.0/api/FreeControlOptions.mdx | 18 + .../version-4.12.0/api/HoldingState.mdx | 166 ++ .../version-4.12.0/api/IdleState.mdx | 166 ++ .../version-4.12.0/api/MOVE_DIRECTION.mdx | 21 + .../version-4.12.0/api/MOVE_TYPE.mdx | 22 + .../version-4.12.0/api/ORDER.mdx | 21 + .../version-4.12.0/api/POSITION_KEY.mdx | 14 + .../version-4.12.0/api/Panel.mdx | 461 +++++ .../version-4.12.0/api/Plugin.mdx | 20 + .../version-4.12.0/api/Renderer.mdx | 230 +++ .../version-4.12.0/api/RenderingStrategy.mdx | 12 + .../version-4.12.0/api/SnapControl.mdx | 298 ++++ .../version-4.12.0/api/SnapControlOptions.mdx | 18 + .../version-4.12.0/api/State.mdx | 164 ++ .../version-4.12.0/api/Status.mdx | 25 + .../version-4.12.0/api/StrictControl.mdx | 298 ++++ .../api/StrictControlOptions.mdx | 18 + .../version-4.12.0/api/VanillaRenderer.mdx | 216 +++ .../version-4.12.0/api/Viewport.mdx | 106 ++ .../version-4.12.0/api/VirtualPanel.mdx | 498 ++++++ .../tutorials/error-handling.mdx | 32 + .../version-4.12.0/tutorials/installation.mdx | 165 ++ .../tutorials/listening-to-events.mdx | 150 ++ .../tutorials/migration-from-v3.mdx | 80 + .../version-4.12.0/tutorials/polyfills.mdx | 42 + .../version-4.12.0/tutorials/quick-start.mdx | 434 +++++ .../version-4.12.0/tutorials/ssr.mdx | 118 ++ .../tutorials/using-the-methods.mdx | 158 ++ .../tutorials/viewport-slot.mdx | 20 + .../version-4.12.0-sidebars.json | 83 + docs/versions.json | 1 + .../projects/ngx-flicking/package-lock.json | 18 +- .../projects/ngx-flicking/package.json | 4 +- packages/preact-flicking/package-lock.json | 34 +- packages/preact-flicking/package.json | 4 +- packages/react-flicking/package-lock.json | 18 +- packages/react-flicking/package.json | 4 +- packages/svelte-flicking/package-lock.json | 18 +- packages/svelte-flicking/package.json | 4 +- packages/vue-flicking/package-lock.json | 18 +- packages/vue-flicking/package.json | 4 +- packages/vue3-flicking/package-lock.json | 18 +- packages/vue3-flicking/package.json | 4 +- 121 files changed, 17353 insertions(+), 99 deletions(-) create mode 100644 docs/i18n/ko/docusaurus-plugin-content-docs/current/api/MOVE_DIRECTION.mdx create mode 100644 docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/ALIGN.mdx create mode 100644 docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/AnchorPoint.mdx create mode 100644 docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/AnimatingState.mdx create mode 100644 docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/AxesController.mdx create mode 100644 docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/BoundCamera.mdx create mode 100644 docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/CIRCULAR_FALLBACK.mdx create mode 100644 docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/Camera.mdx create mode 100644 docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/CameraMode.mdx create mode 100644 docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/CircularCamera.mdx create mode 100644 docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/CircularCameraMode.mdx create mode 100644 docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/Component.mdx create mode 100644 docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/Control.mdx create mode 100644 docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/ControlParams.mdx create mode 100644 docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/DIRECTION.mdx create mode 100644 docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/DisabledState.mdx create mode 100644 docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/DraggingState.mdx create mode 100644 docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/ERROR_CODE.mdx create mode 100644 docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/EVENT.mdx create mode 100644 docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/EVENTS.mdx create mode 100644 docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/ElementLike.mdx create mode 100644 docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/ElementPanel.mdx create mode 100644 docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/ExternalPanel.mdx create mode 100644 docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/ExternalRenderer.mdx create mode 100644 docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/Flicking.mdx create mode 100644 docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/FlickingError.mdx create mode 100644 docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/FlickingEvents.mdx create mode 100644 docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/FlickingOptions.mdx create mode 100644 docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/FreeControl.mdx create mode 100644 docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/FreeControlOptions.mdx create mode 100644 docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/HoldingState.mdx create mode 100644 docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/IdleState.mdx create mode 100644 docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/LinearCamera.mdx create mode 100644 docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/MOVE_DIRECTION.mdx create mode 100644 docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/MOVE_TYPE.mdx create mode 100644 docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/ORDER.mdx create mode 100644 docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/POSITION_KEY.mdx create mode 100644 docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/Panel.mdx create mode 100644 docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/Plugin.mdx create mode 100644 docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/Renderer.mdx create mode 100644 docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/RenderingStrategy.mdx create mode 100644 docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/SnapControl.mdx create mode 100644 docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/SnapControlOptions.mdx create mode 100644 docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/State.mdx create mode 100644 docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/Status.mdx create mode 100644 docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/StrictControl.mdx create mode 100644 docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/StrictControlOptions.mdx create mode 100644 docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/TogglePoint.mdx create mode 100644 docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/VanillaRenderer.mdx create mode 100644 docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/Viewport.mdx create mode 100644 docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/VirtualPanel.mdx create mode 100755 docs/versioned_docs/version-4.12.0/api/ALIGN.mdx create mode 100755 docs/versioned_docs/version-4.12.0/api/AnchorPoint.mdx create mode 100755 docs/versioned_docs/version-4.12.0/api/AnimatingState.mdx create mode 100755 docs/versioned_docs/version-4.12.0/api/AxesController.mdx create mode 100755 docs/versioned_docs/version-4.12.0/api/CIRCULAR_FALLBACK.mdx create mode 100755 docs/versioned_docs/version-4.12.0/api/Camera.mdx create mode 100755 docs/versioned_docs/version-4.12.0/api/CameraMode.mdx create mode 100755 docs/versioned_docs/version-4.12.0/api/CircularCameraMode.mdx create mode 100755 docs/versioned_docs/version-4.12.0/api/Control.mdx create mode 100755 docs/versioned_docs/version-4.12.0/api/ControlParams.mdx create mode 100755 docs/versioned_docs/version-4.12.0/api/DIRECTION.mdx create mode 100755 docs/versioned_docs/version-4.12.0/api/DisabledState.mdx create mode 100755 docs/versioned_docs/version-4.12.0/api/DraggingState.mdx create mode 100755 docs/versioned_docs/version-4.12.0/api/ERROR_CODE.mdx create mode 100755 docs/versioned_docs/version-4.12.0/api/EVENT.mdx create mode 100755 docs/versioned_docs/version-4.12.0/api/EVENTS.mdx create mode 100755 docs/versioned_docs/version-4.12.0/api/ElementLike.mdx create mode 100755 docs/versioned_docs/version-4.12.0/api/ExternalRenderer.mdx create mode 100755 docs/versioned_docs/version-4.12.0/api/Flicking.mdx create mode 100755 docs/versioned_docs/version-4.12.0/api/FlickingError.mdx create mode 100755 docs/versioned_docs/version-4.12.0/api/FlickingEvents.mdx create mode 100755 docs/versioned_docs/version-4.12.0/api/FlickingOptions.mdx create mode 100755 docs/versioned_docs/version-4.12.0/api/FreeControl.mdx create mode 100755 docs/versioned_docs/version-4.12.0/api/FreeControlOptions.mdx create mode 100755 docs/versioned_docs/version-4.12.0/api/HoldingState.mdx create mode 100755 docs/versioned_docs/version-4.12.0/api/IdleState.mdx create mode 100644 docs/versioned_docs/version-4.12.0/api/MOVE_DIRECTION.mdx create mode 100755 docs/versioned_docs/version-4.12.0/api/MOVE_TYPE.mdx create mode 100755 docs/versioned_docs/version-4.12.0/api/ORDER.mdx create mode 100755 docs/versioned_docs/version-4.12.0/api/POSITION_KEY.mdx create mode 100755 docs/versioned_docs/version-4.12.0/api/Panel.mdx create mode 100755 docs/versioned_docs/version-4.12.0/api/Plugin.mdx create mode 100755 docs/versioned_docs/version-4.12.0/api/Renderer.mdx create mode 100755 docs/versioned_docs/version-4.12.0/api/RenderingStrategy.mdx create mode 100755 docs/versioned_docs/version-4.12.0/api/SnapControl.mdx create mode 100755 docs/versioned_docs/version-4.12.0/api/SnapControlOptions.mdx create mode 100755 docs/versioned_docs/version-4.12.0/api/State.mdx create mode 100755 docs/versioned_docs/version-4.12.0/api/Status.mdx create mode 100755 docs/versioned_docs/version-4.12.0/api/StrictControl.mdx create mode 100755 docs/versioned_docs/version-4.12.0/api/StrictControlOptions.mdx create mode 100755 docs/versioned_docs/version-4.12.0/api/VanillaRenderer.mdx create mode 100755 docs/versioned_docs/version-4.12.0/api/Viewport.mdx create mode 100755 docs/versioned_docs/version-4.12.0/api/VirtualPanel.mdx create mode 100644 docs/versioned_docs/version-4.12.0/tutorials/error-handling.mdx create mode 100644 docs/versioned_docs/version-4.12.0/tutorials/installation.mdx create mode 100644 docs/versioned_docs/version-4.12.0/tutorials/listening-to-events.mdx create mode 100644 docs/versioned_docs/version-4.12.0/tutorials/migration-from-v3.mdx create mode 100644 docs/versioned_docs/version-4.12.0/tutorials/polyfills.mdx create mode 100644 docs/versioned_docs/version-4.12.0/tutorials/quick-start.mdx create mode 100644 docs/versioned_docs/version-4.12.0/tutorials/ssr.mdx create mode 100644 docs/versioned_docs/version-4.12.0/tutorials/using-the-methods.mdx create mode 100644 docs/versioned_docs/version-4.12.0/tutorials/viewport-slot.mdx create mode 100644 docs/versioned_sidebars/version-4.12.0-sidebars.json diff --git a/docs/i18n/ko/docusaurus-plugin-content-docs/current/api/Camera.mdx b/docs/i18n/ko/docusaurus-plugin-content-docs/current/api/Camera.mdx index b317038f59..4cc050d3de 100644 --- a/docs/i18n/ko/docusaurus-plugin-content-docs/current/api/Camera.mdx +++ b/docs/i18n/ko/docusaurus-plugin-content-docs/current/api/Camera.mdx @@ -442,7 +442,7 @@ Camera의 [anchorPoints](Camera#anchorPoints)를 업데이트합니다 -현재 선택된 패널의 높이와 동일하도록 뷰포트의 높이를 업데이트합니다 +현재 활성화된 패널과 보이는 패널의 최대 높이와 동일하도록 뷰포트의 높이를 업데이트합니다 **Returns**: this diff --git a/docs/i18n/ko/docusaurus-plugin-content-docs/current/api/Flicking.mdx b/docs/i18n/ko/docusaurus-plugin-content-docs/current/api/Flicking.mdx index aafacff89f..6a4ee460c3 100644 --- a/docs/i18n/ko/docusaurus-plugin-content-docs/current/api/Flicking.mdx +++ b/docs/i18n/ko/docusaurus-plugin-content-docs/current/api/Flicking.mdx @@ -12,7 +12,7 @@ class Flicking extends Component
Properties
Methods
Events
-
VERSIONstatic
control
camera
renderer
viewport
initialized
circularEnabled
virtualEnabled
index
element
currentPanel
panels
panelCount
visiblePanels
animating
holding
activePlugins
align
defaultIndex
horizontal
circular
circularFallback
bound
adaptive
panelsPerView
noPanelStyleOverride
resizeOnContentsReady
nested
needPanelThreshold
preventEventsBeforeInit
deceleration
easing
duration
inputType
moveType
threshold
interruptable
bounce
iOSEdgeSwipeThreshold
preventClickOnDrag
preventDefaultOnDrag
disableOnInit
changeOnHold
renderOnlyVisible
virtual
autoInit
autoResize
useResizeObserver
resizeDebounce
maxResizeDebounce
useFractionalSize
externalRenderer
renderExternal
init
destroy
prev
next
moveTo
updateAnimation
stopAnimation
getPanel
enableInput
disableInput
getStatus
setStatus
addPlugins
removePlugins
resize
append
prepend
insert
remove
ready
beforeResize
afterResize
holdStart
holdEnd
moveStart
move
moveEnd
willChange
changed
willRestore
restored
select
needPanel
visibleChange
reachEdge
panelChange
+
VERSIONstatic
control
camera
renderer
viewport
initialized
circularEnabled
virtualEnabled
index
element
currentPanel
panels
panelCount
visiblePanels
animating
holding
activePlugins
align
defaultIndex
horizontal
circular
circularFallback
bound
adaptive
panelsPerView
noPanelStyleOverride
resizeOnContentsReady
nested
needPanelThreshold
preventEventsBeforeInit
deceleration
easing
duration
inputType
moveType
threshold
dragThreshold
interruptable
bounce
iOSEdgeSwipeThreshold
preventClickOnDrag
preventDefaultOnDrag
disableOnInit
changeOnHold
renderOnlyVisible
virtual
autoInit
autoResize
useResizeObserver
resizeDebounce
maxResizeDebounce
useFractionalSize
externalRenderer
renderExternal
init
destroy
prev
next
moveTo
updateAnimation
stopAnimation
getPanel
enableInput
disableInput
getStatus
setStatus
addPlugins
removePlugins
resize
append
prepend
insert
remove
ready
beforeResize
afterResize
holdStart
holdEnd
moveStart
move
moveEnd
willChange
changed
willRestore
restored
select
needPanel
visibleChange
reachEdge
panelChange
## constructor @@ -305,7 +305,7 @@ possibleOptions.forEach(align => { -Flicking의 [init()](Flicking#init)이 호출될 때 이동할 디폴트 패널의 인덱스로, 0부터 시작하는 정수입니다 +Flicking의 [init()](Flicking#init)이 호출될 때 이동할 디폴트 패널의 인덱스로, 0부터 시작하는 정수입니다. **Type**: number @@ -581,7 +581,7 @@ const flicking = new Flicking({ -패널 변경을 위한 이동 임계값 (단위: px). 주어진 값 이상으로 스크롤해야만 패널 변경이 가능하다. +패널 변경을 위한 이동 임계값 (단위: px). 주어진 값 이상으로 스크롤해야만 패널 변경이 가능합니다. **Type**: number @@ -590,6 +590,21 @@ const flicking = new Flicking({ **See**: - [Threshold ( Options )](https://naver.github.io/egjs-flicking/Options#threshold) +### dragThreshold {#dragThreshold} + +
+ +
+ +사용자의 입력을 인식하기 위한 최소한의 거리 (단위: px). 주어진 값 이상으로 스크롤해야만 패널이 움직입니다. + +**Type**: number + +**Default**: 1 + +**See**: +- [dragThreshold ( Options )](https://naver.github.io/egjs-flicking/Options#dragThreshold) + ### interruptable {#interruptable}
diff --git a/docs/i18n/ko/docusaurus-plugin-content-docs/current/api/MOVE_DIRECTION.mdx b/docs/i18n/ko/docusaurus-plugin-content-docs/current/api/MOVE_DIRECTION.mdx new file mode 100644 index 0000000000..6233c072a7 --- /dev/null +++ b/docs/i18n/ko/docusaurus-plugin-content-docs/current/api/MOVE_DIRECTION.mdx @@ -0,0 +1,21 @@ +--- +custom_edit_url: null +--- + +```ts +const MOVE_DIRECTION +``` + +
+ +
+ +[Flicking](Flicking)이 움직이는 방향을 담고 있는 객체 + +**Type**: object + +|PROPERTY|TYPE|DESCRIPTION| +|:---:|:---:|:---:| +|HORIZONTAL|"horizontal"|수평 방향| +|VERTICAL|"vertical"|수직 방향| + diff --git a/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/ALIGN.mdx b/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/ALIGN.mdx new file mode 100644 index 0000000000..761bbadb89 --- /dev/null +++ b/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/ALIGN.mdx @@ -0,0 +1,22 @@ +--- +custom_edit_url: null +--- + +```ts +const ALIGN +``` + +
+ +
+ +[align](Flicking#align) 옵션에 사용되는 미리 정의된 리터럴 상수들을 담고 있는 객체 + +**Type**: object + +|PROPERTY|TYPE|DESCRIPTION| +|:---:|:---:|:---:| +|PREV|"prev"|좌/상 정렬| +|CENTER|"center"|중앙 정렬| +|NEXT|"next"|우/하 정렬| + diff --git a/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/AnchorPoint.mdx b/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/AnchorPoint.mdx new file mode 100644 index 0000000000..d232e24860 --- /dev/null +++ b/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/AnchorPoint.mdx @@ -0,0 +1,67 @@ +--- +custom_edit_url: null +--- + +```ts +class AnchorPoint +``` + +
+ +
+ +카메라가 정지해야하는 실제 위치를 담고 있는 데이터 컴포넌트 + +
+
Properties
+
index
position
panel
+
+ +## constructor +```ts +new AnchorPoint(options, options.index, options.position, options.panel) +``` + +
+ +
+ +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|options|object|||옵션 객체| +|options.index|number|✔️||AnchorPoint의 인덱스| +|options.position|number|✔️||AnchorPoint의 좌표| +|options.panel|[Panel](Panel)|✔️||AnchorPoint가 참조하고 있는 [Panel](Panel)| + +## Properties + +### index {#index} + +
+ readonly +
+ +AnchorPoint의 인덱스 + +**Type**: number + +### position {#position} + +
+ readonly +
+ +AnchorPoint의 좌표 + +**Type**: number + +### panel {#panel} + +
+ readonly +
+ +AnchorPoint가 참조하고 있는 [Panel](Panel) + +**Type**: [Panel](Panel) + diff --git a/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/AnimatingState.mdx b/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/AnimatingState.mdx new file mode 100644 index 0000000000..9c5ae9047a --- /dev/null +++ b/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/AnimatingState.mdx @@ -0,0 +1,166 @@ +--- +custom_edit_url: null +--- + +
⚠️ This class is for internal use only.
+ +```ts +class AnimatingState extends State +``` + +
+ +
+ +사용자 입력이나 메소드 호출에 의해 Flicking의 애니메이션이 동작중인 상태 + +
+
Properties
Methods
+
holding
animating
delta
targetPanel
onEnter
onHold
onChange
onRelease
onAnimationEnd
onFinish
+
+ +## Properties + +### holding {#holding} + +
+ readonly +
+ +현재 사용자가 클릭/터치중인지 여부 + +**Type**: false + +### animating {#animating} + +
+ readonly +
+ +현재 애니메이션 동작 여부 + +**Type**: true + +### delta {#delta} + +
+ readonly + inherited +
+ +이전 hold이벤트부터 change에 의해 발생한 이동 delta값의 합산 + +**Type**: number + +### targetPanel {#targetPanel} + +
+ readonly + inherited +
+ +애니메이션 종료시 [Control#activePanel](Control#activePanel)로 설정할 패널 + +**Type**: number + +## Methods + +### onEnter {#onEnter} + +
+ inherited +
+ +현재 상태로 돌입했을때 호출되는 콜백 함수 + +**Returns**: void + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|prevState|[State](State)|||이전 상태값| + +### onHold {#onHold} + +
+ inherited +
+ +Axes의 [hold](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:hold) 이벤트 핸들러 + +**Returns**: void + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|ctx|object|✔️||이벤트 콘텍스트| +|ctx.flicking|[Flicking](Flicking)|✔️||Flicking 인스턴스| +|ctx.axesEvent|object|✔️||Axes의 [hold](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:hold) 이벤트| +|ctx.transitTo|function|✔️||다른 상태로 변경하기 위한 함수| + +### onChange {#onChange} + +
+ inherited +
+ +Axes의 [change](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:change) 이벤트 핸들러 + +**Returns**: void + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|ctx|object|✔️||이벤트 콘텍스트| +|ctx.flicking|[Flicking](Flicking)|✔️||Flicking 인스턴스| +|ctx.axesEvent|object|✔️||Axes의 [change](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:change) 이벤트| +|ctx.transitTo|function|✔️||다른 상태로 변경하기 위한 함수| + +### onRelease {#onRelease} + +
+ inherited +
+ +Axes의 [release](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:release) 이벤트 핸들러 + +**Returns**: void + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|ctx|object|✔️||이벤트 콘텍스트| +|ctx.flicking|[Flicking](Flicking)|✔️||Flicking 인스턴스| +|ctx.axesEvent|object|✔️||Axes의 [release](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:release) 이벤트| +|ctx.transitTo|function|✔️||다른 상태로 변경하기 위한 함수| + +### onAnimationEnd {#onAnimationEnd} + +
+ inherited +
+ +Axes의 [animationEnd](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:animationEnd) 이벤트 핸들러 + +**Returns**: void + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|ctx|object|✔️||이벤트 콘텍스트| +|ctx.flicking|[Flicking](Flicking)|✔️||Flicking 인스턴스| +|ctx.axesEvent|object|✔️||Axes의 [animationEnd](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:animationEnd) 이벤트| +|ctx.transitTo|function|✔️||다른 상태로 변경하기 위한 함수| + +### onFinish {#onFinish} + +
+ inherited +
+ +Axes의 [finish](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:finish) 이벤트 핸들러 + +**Returns**: void + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|ctx|object|✔️||이벤트 콘텍스트| +|ctx.flicking|[Flicking](Flicking)|✔️||Flicking 인스턴스| +|ctx.axesEvent|object|✔️||Axes의 [finish](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:finish) 이벤트| +|ctx.transitTo|function|✔️||다른 상태로 변경하기 위한 함수| + diff --git a/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/AxesController.mdx b/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/AxesController.mdx new file mode 100644 index 0000000000..2aca5e5694 --- /dev/null +++ b/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/AxesController.mdx @@ -0,0 +1,273 @@ +--- +custom_edit_url: null +--- + +
⚠️ This class is for internal use only.
+ +```ts +class AxesController +``` + +
+ +
+ +[@egjs/axes](https://naver.github.io/egjs-axes/)의 이벤트를 처리하는 컨트롤러 컴포넌트 + +
+
Properties
Methods
+
axes
panInput
stateMachine
state
animatingContext
controlParams
enabled
position
range
bounce
init
destroy
enable
disable
release
updateAnimation
stopAnimation
update
addPreventClickHandler
removePreventClickHandler
animateTo
+
+ +## Properties + +### axes {#axes} + +
+ readonly +
+ +[Axes](https://naver.github.io/egjs-axes/docs/api/Axes)의 인스턴스 + +**Type**: Axes \| null + +**See**: +- https://naver.github.io/egjs-axes/docs/api/Axes + +### panInput {#panInput} + +
+ readonly +
+ +[PanInput](https://naver.github.io/egjs-axes/docs/api/PanInput)의 인스턴스 + +**Type**: PanInput \| null + +**See**: +- https://naver.github.io/egjs-axes/docs/api/PanInput + +### stateMachine {#stateMachine} + +
+ +
+ +### state {#state} + +
+ +
+ +현재 활성화된 [State](State) 인스턴스로 사용자 입력 또는 애니메이션 상태를 나타냅니다 + +**Type**: [State](State) + +### animatingContext {#animatingContext} + +
+ readonly +
+ +현재 재생중인 애니메이션 정보 + +**Type**: object + +|PROPERTY|TYPE|DESCRIPTION| +|:---:|:---:|:---:| +|start|number|애니메이션 시작 지점| +|end|number|애니메이션 끝 지점| +|offset|number|카메라 오프셋| + +### controlParams {#controlParams} + +
+ +
+ +활성화된 현재 Axes 패러미터들 + +**Type**: [ControlParams](ControlParams) + +**Returns**: [ControlParams](ControlParams) + +### enabled {#enabled} + +
+ readonly +
+ +현재 사용자 입력이 활성화되었는지를 나타내는 값 + +**Type**: boolean + +### position {#position} + +
+ readonly +
+ +[Axes](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html) 인스턴스 내부의 현재 좌표 값 + +**Type**: number + +### range {#range} + +
+ readonly +
+ +[Axes](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html) 인스턴스 내부의 현재 이동 범위 값 + +**Type**: Array<number> + +### bounce {#bounce} + +
+ readonly +
+ +적용된 bounce 크기(px 단위) + +**Type**: Array<number> + +## Methods + +### init {#init} + +
+ +
+ +AxesController를 초기화합니다 + +**Returns**: this + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|flicking|[Flicking](Flicking)|||An instance of Flicking| + +### destroy {#destroy} + +
+ +
+ +AxesController를 초기 상태로 되돌립니다 + +**Returns**: void + +### enable {#enable} + +
+ +
+ +사용자의 입력(마우스/터치)를 활성화합니다 + +**Returns**: this + +### disable {#disable} + +
+ +
+ +사용자의 입력(마우스/터치)를 막습니다 + +**Returns**: this + +### release {#release} + +
+ +
+ +사용자의 현재 입력(마우스/터치)를 중단시킵니다 + +**Returns**: this + +### updateAnimation {#updateAnimation} + +
+ +
+ +재생 중인 애니메이션의 목적지와 재생 시간을 변경합니다 + +**Returns**: this + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|position|number|||이동할 좌표| +|duration|number|✔️||애니메이션 진행 시간 (단위: ms)| + +### stopAnimation {#stopAnimation} + +
+ +
+ +재생 중인 애니메이션을 중단시킵니다 + +**Returns**: this + +### update {#update} + +
+ +
+ +[@egjs/axes](https://naver.github.io/egjs-axes/)의 상태를 갱신합니다 + +**Returns**: this + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|controlParams|[ControlParams](ControlParams)|||| + +**Throws**: [FlickingError](FlickingError) + +[init](AxesController#init)이 이전에 호출되지 않은 경우 + +### addPreventClickHandler {#addPreventClickHandler} + +
+ +
+ +카메라 엘리먼트에 애니메이션 도중에 클릭 이벤트를 방지하는 핸들러를 부착합니다 + +**Returns**: this + +### removePreventClickHandler {#removePreventClickHandler} + +
+ +
+ +카메라 엘리먼트에 애니메이션 도중에 클릭 이벤트를 방지하는 핸들러를 탈착합니다 + +**Returns**: this + +### animateTo {#animateTo} + +
+ +
+ +Axes의 [setTo](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#setTo) 메소드를 주어진 좌표를 이용하여 수행합니다 + +**Returns**: Promise<void> +- 해당 좌표 도달시에 resolve되는 Promise + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|position|number|||이동할 좌표| +|duration|number|||애니메이션 진행 시간 (단위: ms)| +|axesEvent|number|✔️||이 값이 주어졌을 경우, 해당 이벤트의 [setTo](https://naver#github#io/egjs-axes/release/latest/doc/eg#Axes#html#setTo) 메소드를 대신해서 사용합니다.| + +**Throws**: [FlickingError](FlickingError) + +

|code|condition|
|---|---|
|[NOT_ATTACHED_TO_FLICKING](ERROR_CODE)|[init](Control#init)이 이전에 호출되지 않은 경우|
|[ANIMATION_INTERRUPTED](ERROR_CODE)|사용자 입력에 의해 애니메이션이 중단된 경우|

+ diff --git a/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/BoundCamera.mdx b/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/BoundCamera.mdx new file mode 100644 index 0000000000..a497baf22b --- /dev/null +++ b/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/BoundCamera.mdx @@ -0,0 +1,456 @@ +--- +custom_edit_url: null +--- + +```ts +class BoundCamera extends Camera +``` +첫번째와 마지막 패널 밖으로 넘어가지 못하도록 범위를 설정하여, 첫번째/마지막 패널 전/후의 빈 공간을 보이지 않도록 하는 종류의 [Camera](Camera) + +
+
Properties
Methods
+
element
children
position
alignPosition
offset
range
rangeDiff
visiblePanels
visibleRange
anchorPoints
controlParams
atEdge
size
progress
align
updateRange
init
destroy
lookAt
getPrevAnchor
getNextAnchor
getProgressInPanel
findAnchorIncludePosition
findNearestAnchor
findActiveAnchor
clampToReachablePosition
canReach
canSee
updateAlignPos
updateAnchors
updateAdaptiveHeight
updateOffset
resetNeedPanelHistory
applyTransform
+
+ +## Properties + +### element {#element} + +
+ readonly + inherited +
+ +카메라 엘리먼트(`.flicking-camera`) + +**Type**: HTMLElement + +### children {#children} + +
+ readonly + inherited +
+ +카메라 엘리먼트(`.flicking-camera`)의 자식 엘리먼트 배열 + +**Type**: Array<HTMLElement> + +### position {#position} + +
+ readonly + inherited +
+ +Camera의 현재 좌표 + +**Type**: number + +### alignPosition {#alignPosition} + +
+ readonly + inherited +
+ +패널의 정렬 기준 위치. 뷰포트 내에서 [Panel](Panel)의 [alignPosition](Panel#alignPosition)이 위치해야 하는 곳입니다 + +**Type**: number + +### offset {#offset} + +
+ readonly + inherited +
+ +Camera의 좌표 오프셋. [renderOnlyVisible](Flicking#renderOnlyVisible) 옵션을 위해 사용됩니다. + +**Type**: number + +**Default**: 0 + +### range {#range} + +
+ readonly + inherited +
+ +Camera의 [position](Camera#position)이 도달 가능한 범위 + +**Type**: object + +|PROPERTY|TYPE|DESCRIPTION| +|:---:|:---:|:---:| +|min|number|최소 위치| +|max|number|최대 위치| + +### rangeDiff {#rangeDiff} + +
+ readonly + inherited +
+ +Camera가 도달 가능한 최소/최대 좌표의 차이 + +**Type**: number + +### visiblePanels {#visiblePanels} + +
+ readonly + inherited +
+ +현재 보이는 패널들의 배열 + +**Type**: Array<[Panel](Panel)> + +### visibleRange {#visibleRange} + +
+ readonly + inherited +
+ +현재 위치에서 보이는 범위 + +**Type**: object + +|PROPERTY|TYPE|DESCRIPTION| +|:---:|:---:|:---:| +|min|number|최소 위치| +|min|number|최대 위치| + +### anchorPoints {#anchorPoints} + +
+ readonly + inherited +
+ +카메라가 도달 가능한 [AnchorPoint](AnchorPoint)의 목록 + +**Type**: Array<[AnchorPoint](AnchorPoint)> + +### controlParams {#controlParams} + +
+ readonly + inherited +
+ +[AxesController](AxesController)를 업데이트하기 위한 현재 Camera 패러미터들 + +**Type**: [ControlParams](ControlParams) + +### atEdge {#atEdge} + +
+ readonly + inherited +
+ +현재 카메라가 도달 가능한 범위의 최소 혹은 최대점을 넘어섰는지를 나타냅니다 + +**Type**: boolean + +### size {#size} + +
+ readonly + inherited +
+ +뷰포트 크기를 반환합니다 + +**Type**: number + +### progress {#progress} + +
+ readonly + inherited +
+ +첫번째 패널로부터 마지막 패널까지의 카메라 위치의 진행도를 반환합니다 +범위는 0부터 마지막 패널의 인덱스까지입니다 + +**Type**: number + +### align {#align} + +
+ inherited +
+ +[alignPosition](Camera#alignPosition)이 뷰포트 엘리먼트 내의 어디에 위치해야 하는지를 나타내는 값 + +**Type**: [ALIGN](ALIGN) \| string \| number + +## Methods + +### updateRange {#updateRange} + +
+ +
+ +Camera의 [range](Camera#range)를 업데이트합니다 + +**Returns**: this + +**Throws**: [FlickingError](FlickingError) + +[NOT_ATTACHED_TO_FLICKING](ERROR_CODE) [init](Camera#init)이 이전에 호출되지 않은 경우 + +### init {#init} + +
+ inherited +
+ +Camera를 초기화합니다 + +**Returns**: this + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|flicking|[Flicking](Flicking)|||Flicking의 인스턴스| + +**Throws**: [FlickingError](FlickingError) + +[VAL_MUST_NOT_NULL](ERROR_CODE) 뷰포트 엘리먼트 내부에 카메라 엘리먼트(`.flicking-camera`)가 존재하지 않을 경우 + +### destroy {#destroy} + +
+ inherited +
+ +Camera를 초기 상태로 되돌립니다 + +**Returns**: void + +### lookAt {#lookAt} + +
+ inherited +
+ +해당 좌표로 이동하고, CSS transform을 적용합니다 + +**Returns**: this + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|pos|number|||움직일 위치| + +**Throws**: [FlickingError](FlickingError) + +[NOT_ATTACHED_TO_FLICKING](ERROR_CODE) [init](Camera#init)이 이전에 호출되지 않은 경우 + +### getPrevAnchor {#getPrevAnchor} + +
+ inherited +
+ +주어진 [AnchorPoint](AnchorPoint)의 이전 [AnchorPoint](AnchorPoint)를 반환합니다 +존재하지 않을 경우 `null`을 반환합니다 + +**Returns**: [AnchorPoint](AnchorPoint) \| null +- 이전 [AnchorPoint](AnchorPoint) + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|anchor|[AnchorPoint](AnchorPoint)|||기준 [AnchorPoint](AnchorPoint)| + +### getNextAnchor {#getNextAnchor} + +
+ inherited +
+ +주어진 [AnchorPoint](AnchorPoint)의 다음 [AnchorPoint](AnchorPoint)를 반환합니다 +존재하지 않을 경우 `null`을 반환합니다 + +**Returns**: [AnchorPoint](AnchorPoint) \| null +- 다음 [AnchorPoint](AnchorPoint) + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|anchor|[AnchorPoint](AnchorPoint)|||기준 [AnchorPoint](AnchorPoint)| + +### getProgressInPanel {#getProgressInPanel} + +
+ inherited +
+ +현재 카메라 아래 패널에서의 위치 진행도를 반환합니다 +반환값은 카메라가 패널 내부에 있을 경우 0부터 1까지의 값을 갖습니다 +패널의 margin 영역에 있을 경우 0보다 작거나 1보다 큰 값을 반환할 수 있습니다 + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|panel|[Panel](Panel)|||| + +### findAnchorIncludePosition {#findAnchorIncludePosition} + +
+ inherited +
+ +주어진 좌표를 포함하는 [AnchorPoint](AnchorPoint)를 반환합니다 +주어진 좌표를 포함하는 [AnchorPoint](AnchorPoint)가 없을 경우 `null`을 반환합니다 + +**Returns**: [AnchorPoint](AnchorPoint) \| null +- 해당 좌표를 포함하는 [AnchorPoint](AnchorPoint) + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|position|number|||확인할 좌표| + +### findNearestAnchor {#findNearestAnchor} + +
+ inherited +
+ +해당 좌표에서 가장 가까운 [AnchorPoint](AnchorPoint)를 반환합니다 +[AnchorPoint](AnchorPoint)가 하나도 없을 경우 `null`을 반환합니다 + +**Returns**: [AnchorPoint](AnchorPoint) \| null +- 해당 좌표에 가장 인접한 [AnchorPoint](AnchorPoint) + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|position|number|||확인할 좌표| + +### findActiveAnchor {#findActiveAnchor} + +
+ inherited +
+ +현재 [Flicking#currentPanel](Flicking#currentPanel)에 해당하는 [AnchorPoint](AnchorPoint)를 반환합니다 + +**Returns**: [AnchorPoint](AnchorPoint) \| null + +### clampToReachablePosition {#clampToReachablePosition} + +
+ inherited +
+ +주어진 좌표를 Camera가 도달 가능한 범위 사이의 값으로 만듭니다 + +**Returns**: number +- 범위 제한된 좌표 + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|position|number|||범위를 제한할 좌표| + +### canReach {#canReach} + +
+ inherited +
+ +해당 [Panel](Panel)이 Camera가 도달 가능한 범위 내에 있는지를 반환합니다 + +**Returns**: boolean +- 도달 가능한 범위 내에 해당 패널이 존재하는지 여부 + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|panel|[Panel](Panel)|||확인할 [Panel](Panel)의 인스턴스| + +### canSee {#canSee} + +
+ inherited +
+ +현재 좌표에서 해당 패널 엘리먼트를 볼 수 있는지 여부를 반환합니다 + +**Returns**: boolean +- 현재 위치에서 해당 패널 엘리먼트가 보이는지 여부 + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|panel|[Panel](Panel)|||확인할 [Panel](Panel)의 인스턴스| + +### updateAlignPos {#updateAlignPos} + +
+ inherited +
+ +Camera의 [alignPosition](Camera#alignPosition)을 업데이트합니다 + +**Returns**: this + +### updateAnchors {#updateAnchors} + +
+ inherited +
+ +Camera의 [anchorPoints](Camera#anchorPoints)를 업데이트합니다 + +**Returns**: this + +**Throws**: [FlickingError](FlickingError) + +[NOT_ATTACHED_TO_FLICKING](ERROR_CODE) [init](Camera#init)이 이전에 호출되지 않은 경우 + +### updateAdaptiveHeight {#updateAdaptiveHeight} + +
+ inherited +
+ +현재 선택된 패널의 높이와 동일하도록 뷰포트의 높이를 업데이트합니다 + +**Returns**: this + +**Throws**: [FlickingError](FlickingError) + +[NOT_ATTACHED_TO_FLICKING](ERROR_CODE) [init](Camera#init)이 이전에 호출되지 않은 경우 + +### updateOffset {#updateOffset} + +
+ inherited +
+ +현재 카메라의 오프셋을 업데이트합니다 + +**Returns**: this + +### resetNeedPanelHistory {#resetNeedPanelHistory} + +
+ inherited +
+ +발생한 [needPanel](Flicking#event-needPanel) 이벤트들을 초기화하여 다시 발생할 수 있도록 합니다 + +**Returns**: this + +### applyTransform {#applyTransform} + +
+ inherited +
+ +현재 위치를 기준으로한 transform 스타일을 카메라 엘리먼트에 적용합니다. + +**Returns**: this + diff --git a/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/CIRCULAR_FALLBACK.mdx b/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/CIRCULAR_FALLBACK.mdx new file mode 100644 index 0000000000..5442f833bc --- /dev/null +++ b/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/CIRCULAR_FALLBACK.mdx @@ -0,0 +1,21 @@ +--- +custom_edit_url: null +--- + +```ts +const CIRCULAR_FALLBACK +``` + +
+ +
+ +Flicking의 [circularFallback](Flicking#circularFallback)에 설정 가능한 값들을 담고 있는 객체 + +**Type**: object + +|PROPERTY|TYPE|DESCRIPTION| +|:---:|:---:|:---:| +|LINEAR|string|"linear"| +|BOUND|string|"bound"| + diff --git a/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/Camera.mdx b/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/Camera.mdx new file mode 100644 index 0000000000..4cc050d3de --- /dev/null +++ b/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/Camera.mdx @@ -0,0 +1,492 @@ +--- +custom_edit_url: null +--- + +```ts +class Camera +``` + +
+ +
+ +뷰포트 내에서의 실제 움직임을 담당하는 컴포넌트 + +
+
Properties
Methods
+
element
children
position
alignPosition
offset
circularEnabled
mode
range
rangeDiff
visiblePanels
visibleRange
anchorPoints
controlParams
atEdge
size
progress
panelOrder
align
init
destroy
lookAt
getPrevAnchor
getNextAnchor
getProgressInPanel
findAnchorIncludePosition
findNearestAnchor
findActiveAnchor
clampToReachablePosition
canReach
canSee
updateRange
updateAlignPos
updateAnchors
updateAdaptiveHeight
updateOffset
updatePanelOrder
resetNeedPanelHistory
applyTransform
+
+ +## constructor +```ts +new Camera(flicking, ) +``` + +
+ +
+ +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|flicking|[Flicking](Flicking)|||| +||Partial<CameraOptions>|✔️|{}|| + +## Properties + +### element {#element} + +
+ readonly +
+ +카메라 엘리먼트(`.flicking-camera`) + +**Type**: HTMLElement + +### children {#children} + +
+ readonly +
+ +카메라 엘리먼트(`.flicking-camera`)의 자식 엘리먼트 배열 + +**Type**: Array<HTMLElement> + +### position {#position} + +
+ readonly +
+ +Camera의 현재 좌표 + +**Type**: number + +### alignPosition {#alignPosition} + +
+ readonly +
+ +패널의 정렬 기준 위치. 뷰포트 내에서 [Panel](Panel)의 [alignPosition](Panel#alignPosition)이 위치해야 하는 곳입니다 + +**Type**: number + +### offset {#offset} + +
+ readonly +
+ +Camera의 좌표 오프셋. [renderOnlyVisible](Flicking#renderOnlyVisible) 옵션을 위해 사용됩니다. + +**Type**: number + +**Default**: 0 + +### circularEnabled {#circularEnabled} + +
+ readonly +
+ +[circular](Flicking#circular) 옵션이 활성화되었는지 여부를 나타내는 멤버 변수.
[circular](Flicking#circular) 옵션은 패널의 크기의 합이 충분하지 않을 경우 비활성화됩니다. + +**Type**: boolean + +**Default**: false + +### mode {#mode} + +
+ readonly +
+ +A current camera mode + +**Type**: [CameraMode](CameraMode) + +### range {#range} + +
+ readonly +
+ +Camera의 [position](Camera#position)이 도달 가능한 범위 + +**Type**: object + +|PROPERTY|TYPE|DESCRIPTION| +|:---:|:---:|:---:| +|min|number|최소 위치| +|max|number|최대 위치| + +### rangeDiff {#rangeDiff} + +
+ readonly +
+ +Camera가 도달 가능한 최소/최대 좌표의 차이 + +**Type**: number + +### visiblePanels {#visiblePanels} + +
+ readonly +
+ +현재 보이는 패널들의 배열 + +**Type**: Array<[Panel](Panel)> + +### visibleRange {#visibleRange} + +
+ readonly +
+ +현재 위치에서 보이는 범위 + +**Type**: object + +|PROPERTY|TYPE|DESCRIPTION| +|:---:|:---:|:---:| +|min|number|최소 위치| +|min|number|최대 위치| + +### anchorPoints {#anchorPoints} + +
+ readonly +
+ +카메라가 도달 가능한 [AnchorPoint](AnchorPoint)의 목록 + +**Type**: Array<[AnchorPoint](AnchorPoint)> + +### controlParams {#controlParams} + +
+ readonly +
+ +[AxesController](AxesController)를 업데이트하기 위한 현재 Camera 패러미터들 + +**Type**: [ControlParams](ControlParams) + +### atEdge {#atEdge} + +
+ readonly +
+ +현재 카메라가 도달 가능한 범위의 최소 혹은 최대점을 넘어섰는지를 나타냅니다 + +**Type**: boolean + +### size {#size} + +
+ readonly +
+ +뷰포트 크기를 반환합니다 + +**Type**: number + +### progress {#progress} + +
+ readonly +
+ +첫번째 패널로부터 마지막 패널까지의 카메라 위치의 진행도를 반환합니다
범위는 0부터 마지막 패널의 인덱스까지입니다 + +**Type**: number + +### panelOrder {#panelOrder} + +
+ readonly +
+ +카메라 엘리먼트(`.flicking-camera`)에 적용된 [direction](https://developer.mozilla.org/en-US/docs/Web/CSS/direction) CSS 속성 + +**Type**: string + +### align {#align} + +
+ +
+ +[alignPosition](Camera#alignPosition)이 뷰포트 엘리먼트 내의 어디에 위치해야 하는지를 나타내는 값 + +**Type**: [ALIGN](ALIGN) \| string \| number + +## Methods + +### init {#init} + +
+ +
+ +Camera를 초기화합니다 + +**Returns**: this + +**Throws**: [FlickingError](FlickingError) + +[VAL_MUST_NOT_NULL](ERROR_CODE) 뷰포트 엘리먼트 내부에 카메라 엘리먼트(`.flicking-camera`)가 존재하지 않을 경우 + +### destroy {#destroy} + +
+ +
+ +Camera를 초기 상태로 되돌립니다 + +**Returns**: void + +### lookAt {#lookAt} + +
+ +
+ +해당 좌표로 이동하고, CSS transform을 적용합니다 + +**Returns**: this + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|pos|number|||움직일 위치| + +**Throws**: [FlickingError](FlickingError) + +[NOT_ATTACHED_TO_FLICKING](ERROR_CODE) [init](Camera#init)이 이전에 호출되지 않은 경우 + +### getPrevAnchor {#getPrevAnchor} + +
+ +
+ +주어진 [AnchorPoint](AnchorPoint)의 이전 [AnchorPoint](AnchorPoint)를 반환합니다
존재하지 않을 경우 `null`을 반환합니다 + +**Returns**: [AnchorPoint](AnchorPoint) \| null +- 이전 [AnchorPoint](AnchorPoint) + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|anchor|[AnchorPoint](AnchorPoint)|||기준 [AnchorPoint](AnchorPoint)| + +### getNextAnchor {#getNextAnchor} + +
+ +
+ +주어진 [AnchorPoint](AnchorPoint)의 다음 [AnchorPoint](AnchorPoint)를 반환합니다
존재하지 않을 경우 `null`을 반환합니다 + +**Returns**: [AnchorPoint](AnchorPoint) \| null +- 다음 [AnchorPoint](AnchorPoint) + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|anchor|[AnchorPoint](AnchorPoint)|||기준 [AnchorPoint](AnchorPoint)| + +### getProgressInPanel {#getProgressInPanel} + +
+ +
+ +현재 카메라 아래 패널에서의 위치 진행도를 반환합니다
반환값은 카메라가 패널 내부에 있을 경우 0부터 1까지의 값을 갖습니다
패널의 margin 영역에 있을 경우 0보다 작거나 1보다 큰 값을 반환할 수 있습니다 + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|panel|[Panel](Panel)|||| + +### findAnchorIncludePosition {#findAnchorIncludePosition} + +
+ +
+ +주어진 좌표를 포함하는 [AnchorPoint](AnchorPoint)를 반환합니다
주어진 좌표를 포함하는 [AnchorPoint](AnchorPoint)가 없을 경우 `null`을 반환합니다 + +**Returns**: [AnchorPoint](AnchorPoint) \| null +- 해당 좌표를 포함하는 [AnchorPoint](AnchorPoint) + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|position|number|||확인할 좌표| + +### findNearestAnchor {#findNearestAnchor} + +
+ +
+ +해당 좌표에서 가장 가까운 [AnchorPoint](AnchorPoint)를 반환합니다
[AnchorPoint](AnchorPoint)가 하나도 없을 경우 `null`을 반환합니다 + +**Returns**: [AnchorPoint](AnchorPoint) \| null +- 해당 좌표에 가장 인접한 [AnchorPoint](AnchorPoint) + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|position|number|||확인할 좌표| + +### findActiveAnchor {#findActiveAnchor} + +
+ +
+ +현재 [Flicking#currentPanel](Flicking#currentPanel)에 해당하는 [AnchorPoint](AnchorPoint)를 반환합니다 + +**Returns**: [AnchorPoint](AnchorPoint) \| null + +### clampToReachablePosition {#clampToReachablePosition} + +
+ +
+ +주어진 좌표를 Camera가 도달 가능한 범위 사이의 값으로 만듭니다 + +**Returns**: number +- 범위 제한된 좌표 + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|position|number|||범위를 제한할 좌표| + +### canReach {#canReach} + +
+ +
+ +해당 [Panel](Panel)이 Camera가 도달 가능한 범위 내에 있는지를 반환합니다 + +**Returns**: boolean +- 도달 가능한 범위 내에 해당 패널이 존재하는지 여부 + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|panel|[Panel](Panel)|||확인할 [Panel](Panel)의 인스턴스| + +### canSee {#canSee} + +
+ +
+ +현재 좌표에서 해당 패널 엘리먼트를 볼 수 있는지 여부를 반환합니다 + +**Returns**: boolean +- 현재 위치에서 해당 패널 엘리먼트가 보이는지 여부 + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|panel|[Panel](Panel)|||확인할 [Panel](Panel)의 인스턴스| + +### updateRange {#updateRange} + +
+ +
+ +Camera의 [range](Camera#range)를 업데이트합니다 + +**Returns**: this + +**Throws**: [FlickingError](FlickingError) + +[NOT_ATTACHED_TO_FLICKING](ERROR_CODE) [init](Camera#init)이 이전에 호출되지 않은 경우 + +### updateAlignPos {#updateAlignPos} + +
+ +
+ +Camera의 [alignPosition](Camera#alignPosition)을 업데이트합니다 + +**Returns**: this + +### updateAnchors {#updateAnchors} + +
+ +
+ +Camera의 [anchorPoints](Camera#anchorPoints)를 업데이트합니다 + +**Returns**: this + +**Throws**: [FlickingError](FlickingError) + +[NOT_ATTACHED_TO_FLICKING](ERROR_CODE) [init](Camera#init)이 이전에 호출되지 않은 경우 + +### updateAdaptiveHeight {#updateAdaptiveHeight} + +
+ +
+ +현재 활성화된 패널과 보이는 패널의 최대 높이와 동일하도록 뷰포트의 높이를 업데이트합니다 + +**Returns**: this + +**Throws**: [FlickingError](FlickingError) + +[NOT_ATTACHED_TO_FLICKING](ERROR_CODE) [init](Camera#init)이 이전에 호출되지 않은 경우 + +### updateOffset {#updateOffset} + +
+ +
+ +현재 카메라의 오프셋을 업데이트합니다 + +**Returns**: this + +### updatePanelOrder {#updatePanelOrder} + +
+ +
+ +카메라 엘리먼트에 적용된 [direction](https://developer.mozilla.org/en-US/docs/Web/CSS/direction) CSS 속성에 맞게 방향을 업데이트합니다 + +**Returns**: this + +### resetNeedPanelHistory {#resetNeedPanelHistory} + +
+ +
+ +발생한 [needPanel](Flicking#event-needPanel) 이벤트들을 초기화하여 다시 발생할 수 있도록 합니다 + +**Returns**: this + +### applyTransform {#applyTransform} + +
+ +
+ +현재 위치를 기준으로한 transform 스타일을 카메라 엘리먼트에 적용합니다. + +**Returns**: this + diff --git a/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/CameraMode.mdx b/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/CameraMode.mdx new file mode 100644 index 0000000000..c02dffdea1 --- /dev/null +++ b/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/CameraMode.mdx @@ -0,0 +1,27 @@ +--- +custom_edit_url: null +--- + +```ts +class CameraMode +``` + +
+ +
+ +A mode of camera + +## constructor +```ts +new CameraMode(flicking) +``` + +
+ +
+ +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|flicking|[Flicking](Flicking)|||| + diff --git a/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/CircularCamera.mdx b/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/CircularCamera.mdx new file mode 100644 index 0000000000..2080bd8ab6 --- /dev/null +++ b/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/CircularCamera.mdx @@ -0,0 +1,456 @@ +--- +custom_edit_url: null +--- + +```ts +class CircularCamera extends Camera +``` +첫번째 패널과 마지막 패널이 이어진 상태로, 무한히 회전할 수 있는 종류의 [Camera](Camera) + +
+
Properties
Methods
+
element
children
position
alignPosition
offset
range
rangeDiff
visiblePanels
visibleRange
anchorPoints
controlParams
atEdge
size
progress
align
updateRange
init
destroy
lookAt
getPrevAnchor
getNextAnchor
getProgressInPanel
findAnchorIncludePosition
findNearestAnchor
findActiveAnchor
clampToReachablePosition
canReach
canSee
updateAlignPos
updateAnchors
updateAdaptiveHeight
updateOffset
resetNeedPanelHistory
applyTransform
+
+ +## Properties + +### element {#element} + +
+ readonly + inherited +
+ +카메라 엘리먼트(`.flicking-camera`) + +**Type**: HTMLElement + +### children {#children} + +
+ readonly + inherited +
+ +카메라 엘리먼트(`.flicking-camera`)의 자식 엘리먼트 배열 + +**Type**: Array<HTMLElement> + +### position {#position} + +
+ readonly + inherited +
+ +Camera의 현재 좌표 + +**Type**: number + +### alignPosition {#alignPosition} + +
+ readonly + inherited +
+ +패널의 정렬 기준 위치. 뷰포트 내에서 [Panel](Panel)의 [alignPosition](Panel#alignPosition)이 위치해야 하는 곳입니다 + +**Type**: number + +### offset {#offset} + +
+ readonly + inherited +
+ +Camera의 좌표 오프셋. [renderOnlyVisible](Flicking#renderOnlyVisible) 옵션을 위해 사용됩니다. + +**Type**: number + +**Default**: 0 + +### range {#range} + +
+ readonly + inherited +
+ +Camera의 [position](Camera#position)이 도달 가능한 범위 + +**Type**: object + +|PROPERTY|TYPE|DESCRIPTION| +|:---:|:---:|:---:| +|min|number|최소 위치| +|max|number|최대 위치| + +### rangeDiff {#rangeDiff} + +
+ readonly + inherited +
+ +Camera가 도달 가능한 최소/최대 좌표의 차이 + +**Type**: number + +### visiblePanels {#visiblePanels} + +
+ readonly + inherited +
+ +현재 보이는 패널들의 배열 + +**Type**: Array<[Panel](Panel)> + +### visibleRange {#visibleRange} + +
+ readonly + inherited +
+ +현재 위치에서 보이는 범위 + +**Type**: object + +|PROPERTY|TYPE|DESCRIPTION| +|:---:|:---:|:---:| +|min|number|최소 위치| +|min|number|최대 위치| + +### anchorPoints {#anchorPoints} + +
+ readonly + inherited +
+ +카메라가 도달 가능한 [AnchorPoint](AnchorPoint)의 목록 + +**Type**: Array<[AnchorPoint](AnchorPoint)> + +### controlParams {#controlParams} + +
+ readonly + inherited +
+ +[AxesController](AxesController)를 업데이트하기 위한 현재 Camera 패러미터들 + +**Type**: [ControlParams](ControlParams) + +### atEdge {#atEdge} + +
+ readonly + inherited +
+ +현재 카메라가 도달 가능한 범위의 최소 혹은 최대점을 넘어섰는지를 나타냅니다 + +**Type**: boolean + +### size {#size} + +
+ readonly + inherited +
+ +뷰포트 크기를 반환합니다 + +**Type**: number + +### progress {#progress} + +
+ readonly + inherited +
+ +첫번째 패널로부터 마지막 패널까지의 카메라 위치의 진행도를 반환합니다 +범위는 0부터 마지막 패널의 인덱스까지입니다 + +**Type**: number + +### align {#align} + +
+ inherited +
+ +[alignPosition](Camera#alignPosition)이 뷰포트 엘리먼트 내의 어디에 위치해야 하는지를 나타내는 값 + +**Type**: [ALIGN](ALIGN) \| string \| number + +## Methods + +### updateRange {#updateRange} + +
+ +
+ +Camera의 [range](Camera#range)를 업데이트합니다 + +**Returns**: this + +**Throws**: [FlickingError](FlickingError) + +[NOT_ATTACHED_TO_FLICKING](ERROR_CODE) [init](Camera#init)이 이전에 호출되지 않은 경우 + +### init {#init} + +
+ inherited +
+ +Camera를 초기화합니다 + +**Returns**: this + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|flicking|[Flicking](Flicking)|||Flicking의 인스턴스| + +**Throws**: [FlickingError](FlickingError) + +[VAL_MUST_NOT_NULL](ERROR_CODE) 뷰포트 엘리먼트 내부에 카메라 엘리먼트(`.flicking-camera`)가 존재하지 않을 경우 + +### destroy {#destroy} + +
+ inherited +
+ +Camera를 초기 상태로 되돌립니다 + +**Returns**: void + +### lookAt {#lookAt} + +
+ inherited +
+ +해당 좌표로 이동하고, CSS transform을 적용합니다 + +**Returns**: this + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|pos|number|||움직일 위치| + +**Throws**: [FlickingError](FlickingError) + +[NOT_ATTACHED_TO_FLICKING](ERROR_CODE) [init](Camera#init)이 이전에 호출되지 않은 경우 + +### getPrevAnchor {#getPrevAnchor} + +
+ inherited +
+ +주어진 [AnchorPoint](AnchorPoint)의 이전 [AnchorPoint](AnchorPoint)를 반환합니다 +존재하지 않을 경우 `null`을 반환합니다 + +**Returns**: [AnchorPoint](AnchorPoint) \| null +- 이전 [AnchorPoint](AnchorPoint) + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|anchor|[AnchorPoint](AnchorPoint)|||기준 [AnchorPoint](AnchorPoint)| + +### getNextAnchor {#getNextAnchor} + +
+ inherited +
+ +주어진 [AnchorPoint](AnchorPoint)의 다음 [AnchorPoint](AnchorPoint)를 반환합니다 +존재하지 않을 경우 `null`을 반환합니다 + +**Returns**: [AnchorPoint](AnchorPoint) \| null +- 다음 [AnchorPoint](AnchorPoint) + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|anchor|[AnchorPoint](AnchorPoint)|||기준 [AnchorPoint](AnchorPoint)| + +### getProgressInPanel {#getProgressInPanel} + +
+ inherited +
+ +현재 카메라 아래 패널에서의 위치 진행도를 반환합니다 +반환값은 카메라가 패널 내부에 있을 경우 0부터 1까지의 값을 갖습니다 +패널의 margin 영역에 있을 경우 0보다 작거나 1보다 큰 값을 반환할 수 있습니다 + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|panel|[Panel](Panel)|||| + +### findAnchorIncludePosition {#findAnchorIncludePosition} + +
+ inherited +
+ +주어진 좌표를 포함하는 [AnchorPoint](AnchorPoint)를 반환합니다 +주어진 좌표를 포함하는 [AnchorPoint](AnchorPoint)가 없을 경우 `null`을 반환합니다 + +**Returns**: [AnchorPoint](AnchorPoint) \| null +- 해당 좌표를 포함하는 [AnchorPoint](AnchorPoint) + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|position|number|||확인할 좌표| + +### findNearestAnchor {#findNearestAnchor} + +
+ inherited +
+ +해당 좌표에서 가장 가까운 [AnchorPoint](AnchorPoint)를 반환합니다 +[AnchorPoint](AnchorPoint)가 하나도 없을 경우 `null`을 반환합니다 + +**Returns**: [AnchorPoint](AnchorPoint) \| null +- 해당 좌표에 가장 인접한 [AnchorPoint](AnchorPoint) + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|position|number|||확인할 좌표| + +### findActiveAnchor {#findActiveAnchor} + +
+ inherited +
+ +현재 [Flicking#currentPanel](Flicking#currentPanel)에 해당하는 [AnchorPoint](AnchorPoint)를 반환합니다 + +**Returns**: [AnchorPoint](AnchorPoint) \| null + +### clampToReachablePosition {#clampToReachablePosition} + +
+ inherited +
+ +주어진 좌표를 Camera가 도달 가능한 범위 사이의 값으로 만듭니다 + +**Returns**: number +- 범위 제한된 좌표 + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|position|number|||범위를 제한할 좌표| + +### canReach {#canReach} + +
+ inherited +
+ +해당 [Panel](Panel)이 Camera가 도달 가능한 범위 내에 있는지를 반환합니다 + +**Returns**: boolean +- 도달 가능한 범위 내에 해당 패널이 존재하는지 여부 + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|panel|[Panel](Panel)|||확인할 [Panel](Panel)의 인스턴스| + +### canSee {#canSee} + +
+ inherited +
+ +현재 좌표에서 해당 패널 엘리먼트를 볼 수 있는지 여부를 반환합니다 + +**Returns**: boolean +- 현재 위치에서 해당 패널 엘리먼트가 보이는지 여부 + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|panel|[Panel](Panel)|||확인할 [Panel](Panel)의 인스턴스| + +### updateAlignPos {#updateAlignPos} + +
+ inherited +
+ +Camera의 [alignPosition](Camera#alignPosition)을 업데이트합니다 + +**Returns**: this + +### updateAnchors {#updateAnchors} + +
+ inherited +
+ +Camera의 [anchorPoints](Camera#anchorPoints)를 업데이트합니다 + +**Returns**: this + +**Throws**: [FlickingError](FlickingError) + +[NOT_ATTACHED_TO_FLICKING](ERROR_CODE) [init](Camera#init)이 이전에 호출되지 않은 경우 + +### updateAdaptiveHeight {#updateAdaptiveHeight} + +
+ inherited +
+ +현재 선택된 패널의 높이와 동일하도록 뷰포트의 높이를 업데이트합니다 + +**Returns**: this + +**Throws**: [FlickingError](FlickingError) + +[NOT_ATTACHED_TO_FLICKING](ERROR_CODE) [init](Camera#init)이 이전에 호출되지 않은 경우 + +### updateOffset {#updateOffset} + +
+ inherited +
+ +현재 카메라의 오프셋을 업데이트합니다 + +**Returns**: this + +### resetNeedPanelHistory {#resetNeedPanelHistory} + +
+ inherited +
+ +발생한 [needPanel](Flicking#event-needPanel) 이벤트들을 초기화하여 다시 발생할 수 있도록 합니다 + +**Returns**: this + +### applyTransform {#applyTransform} + +
+ inherited +
+ +현재 위치를 기준으로한 transform 스타일을 카메라 엘리먼트에 적용합니다. + +**Returns**: this + diff --git a/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/CircularCameraMode.mdx b/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/CircularCameraMode.mdx new file mode 100644 index 0000000000..e469b35d5f --- /dev/null +++ b/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/CircularCameraMode.mdx @@ -0,0 +1,14 @@ +--- +custom_edit_url: null +--- + +```ts +class CircularCameraMode extends CameraMode +``` + +
+ +
+ +첫번째 패널과 마지막 패널이 이어진 상태로, 무한히 회전할 수 있는 종류의 [Camera](Camera) 모드 + diff --git a/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/Component.mdx b/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/Component.mdx new file mode 100644 index 0000000000..a4d4c5e3ae --- /dev/null +++ b/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/Component.mdx @@ -0,0 +1,211 @@ +--- +custom_edit_url: null +--- + +```ts +class Component +``` + +
+ +
+ +컴포넌트의 이벤트을 관리할 수 있게 하는 클래스 + +
+
Properties
Methods
+
VERSIONstatic
trigger
once
hasOn
on
off
+
+ +## Properties +### VERSION {#VERSION} + +
+ static +
+ +버전정보 문자열 + +**Type**: string + +Component.VERSION; // ex) 3.0.0 + +## Methods + +### trigger {#trigger} + +
+ +
+ +커스텀 이벤트를 발생시킨다 + +**Returns**: this +- 컴포넌트 자신의 인스턴스 + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|event|string \| ComponentEvent|||발생할 커스텀 이벤트의 이름 또는 ComponentEvent의 인스턴스| +|params|Array<any> \| $ts:...|||커스텀 이벤트가 발생할 때 전달할 데이터| + +```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} + +
+ +
+ +이벤트가 한번만 실행된다. + +**Returns**: this +- 컴포넌트 자신의 인스턴스 + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|eventName|string \| $ts:...|||등록할 이벤트의 이름 또는 이벤트 이름-핸들러 오브젝트| +|handlerToAttach|function \| $ts:...|✔️||등록할 이벤트의 핸들러 함수| + +```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} + +
+ +
+ +컴포넌트에 이벤트가 등록됐는지 확인한다. + +**Returns**: boolean +- 이벤트 등록 여부 + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|eventName|string|||등록 여부를 확인할 이벤트의 이름| + +```ts +import Component from "@egjs/component"; + +class Some extends Component<{ + hi: void; +}> { + some() { + this.hasOn("hi");// check hi event. + } +} +``` + +### on {#on} + +
+ +
+ +컴포넌트에 이벤트를 등록한다. + +**Returns**: this +- 컴포넌트 자신의 인스턴스 + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|eventName|string \| $ts:...|||등록할 이벤트의 이름 또는 이벤트 이름-핸들러 오브젝트| +|handlerToAttach|function \| $ts:...|✔️||등록할 이벤트의 핸들러 함수| + +```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} + +
+ +
+ +컴포넌트에 등록된 이벤트를 해제한다.
`eventName`이 주어지지 않았을 경우 모든 이벤트 핸들러를 제거한다.
`handlerToAttach`가 주어지지 않았을 경우 `eventName`에 해당하는 모든 이벤트 핸들러를 제거한다. + +**Returns**: this +- 컴포넌트 자신의 인스턴스 + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|eventName|string \| $ts:...|✔️||해제할 이벤트의 이름| +|handlerToDetach|function \| $ts:...|✔️||해제할 이벤트의 핸들러 함수| + +```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/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/Control.mdx b/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/Control.mdx new file mode 100644 index 0000000000..9593fcff0f --- /dev/null +++ b/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/Control.mdx @@ -0,0 +1,267 @@ +--- +custom_edit_url: null +--- + +```ts +class Control +``` + +
+ +
+ +Flicking의 입력 장치 & 애니메이션을 담당하는 컴포넌트 + +
+
Properties
Methods
+
controller
activeIndex
activePanel
animating
holding
moveToPosition
init
destroy
enable
disable
release
updateAnimation
stopAnimation
updatePosition
updateInput
resetActive
moveToPanel
setActive
copy
+
+ +## Properties + +### controller {#controller} + +
+ readonly +
+ +[@egjs/axes](https://naver.github.io/egjs-axes/)의 이벤트를 처리하는 컨트롤러 컴포넌트 + +**Type**: [AxesController](AxesController) + +### activeIndex {#activeIndex} + +
+ readonly +
+ +[currentPanel](Flicking#currentPanel)의 인덱스 번호 + +**Type**: number + +**Default**: 0 + +### activePanel {#activePanel} + +
+ readonly +
+ +현재 선택된 패널 + +**Type**: [Panel](Panel) \| null + +### animating {#animating} + +
+ readonly +
+ +현재 애니메이션 동작 여부 + +**Type**: boolean + +### holding {#holding} + +
+ readonly +
+ +현재 사용자가 클릭/터치중인지 여부 + +**Type**: boolean + +## Methods + +### moveToPosition {#moveToPosition} + +
+ +
+ +[Camera](Camera)를 주어진 좌표로 이동합니다 + +**Returns**: Promise<void> +- 해당 좌표 도달시에 resolve되는 Promise + +**Emits**: [Flicking#event:moveStart](Flicking#event-moveStart), [Flicking#event:move](Flicking#event-move), [Flicking#event:moveEnd](Flicking#event-moveEnd), [Flicking#event:willChange](Flicking#event-willChange), [Flicking#event:changed](Flicking#event-changed), [Flicking#event:willRestore](Flicking#event-willRestore), [Flicking#event:restored](Flicking#event-restored), [Flicking#event:needPanel](Flicking#event-needPanel), [Flicking#event:visibleChange](Flicking#event-visibleChange), [Flicking#event:reachEdge](Flicking#event-reachEdge) + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|position|number|||이동할 좌표| +|duration|number|||패널 이동 애니메이션 진행 시간 (단위: ms)| +|axesEvent|object|✔️||[Axes](https://naver.github.io/egjs-axes/)의 [release](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:release) 이벤트| + +**Throws**: [FlickingError](FlickingError) + +

|code|condition|
|---|---|
|[POSITION_NOT_REACHABLE](ERROR_CODE)|주어진 패널이 제거되었거나, Camera의 [range](Camera#range) 밖에 있을 경우|
|[NOT_ATTACHED_TO_FLICKING](ERROR_CODE)|[init](Control#init)이 이전에 호출되지 않은 경우|
|[ANIMATION_INTERRUPTED](ERROR_CODE)|사용자 입력에 의해 애니메이션이 중단된 경우|
|[STOP_CALLED_BY_USER](ERROR_CODE)|발생된 이벤트들 중 하나라도 `stop()`이 호출된 경우|

+ +### init {#init} + +
+ +
+ +Control을 초기화합니다 + +**Returns**: this + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|flicking|[Flicking](Flicking)|||Flicking의 인스턴스| + +### destroy {#destroy} + +
+ +
+ +Control을 초기 상태로 되돌립니다 + +**Returns**: void + +### enable {#enable} + +
+ +
+ +사용자의 입력(마우스/터치)를 활성화합니다 + +**Returns**: this + +### disable {#disable} + +
+ +
+ +사용자의 입력(마우스/터치)를 막습니다 + +**Returns**: this + +### release {#release} + +
+ +
+ +사용자의 현재 입력(마우스/터치)를 중단시킵니다 + +**Returns**: this + +### updateAnimation {#updateAnimation} + +
+ +
+ +재생 중인 애니메이션의 목적지와 재생 시간을 변경합니다 + +**Returns**: this + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|panel|[Panel](Panel)|||이동할 패널| +|duration|number|✔️||애니메이션 진행 시간 (단위: ms)| +|direction|[DIRECTION](DIRECTION)|✔️||이동할 방향. [circular](Flicking#circular) 옵션 활성화시에만 사용 가능합니다| + +**Throws**: [FlickingError](FlickingError) + +[POSITION_NOT_REACHABLE](ERROR_CODE) 주어진 패널이 제거되었거나, Camera의 [range](Camera#range) 밖에 있을 경우 + +### stopAnimation {#stopAnimation} + +
+ +
+ +재생 중인 애니메이션을 중단시킵니다 + +**Returns**: this + +### updatePosition {#updatePosition} + +
+ +
+ +resize 이후에 position을 업데이트합니다 + +**Returns**: Promise<void> + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|progressInPanel|number|||Resize 이전 현재 선택된 패널 내에서의 카메라 progress 값| + +**Throws**: [FlickingError](FlickingError) + +[NOT_ATTACHED_TO_FLICKING](ERROR_CODE) [init](Camera#init)이 이전에 호출되지 않은 경우 + +### updateInput {#updateInput} + +
+ +
+ +[controller](Control#controller)의 내부 상태를 갱신합니다 + +**Returns**: this + +### resetActive {#resetActive} + +
+ +
+ +[activePanel](Control#activePanel)을 `null`로 초기화합니다 + +**Returns**: this + +### moveToPanel {#moveToPanel} + +
+ async +
+ +[Camera](Camera)를 해당 패널 위로 이동합니다 + +**Returns**: Promise<void> +- 해당 패널 도달시에 resolve되는 Promise + +**Emits**: [Flicking#event:moveStart](Flicking#event-moveStart), [Flicking#event:move](Flicking#event-move), [Flicking#event:moveEnd](Flicking#event-moveEnd), [Flicking#event:willChange](Flicking#event-willChange), [Flicking#event:changed](Flicking#event-changed), [Flicking#event:willRestore](Flicking#event-willRestore), [Flicking#event:restored](Flicking#event-restored), [Flicking#event:needPanel](Flicking#event-needPanel), [Flicking#event:visibleChange](Flicking#event-visibleChange), [Flicking#event:reachEdge](Flicking#event-reachEdge) + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|panel|[Panel](Panel)|||이동할 패널| +|options|object|||옵션 오브젝트| +|duration|number|||애니메이션 진행 시간 (단위: ms)| +|axesEvent|object|✔️||[Axes](https://naver.github.io/egjs-axes/)의 [release](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:release) 이벤트| +|direction|[DIRECTION](DIRECTION)|✔️|DIRECTION.NONE|이동할 방향. [circular](Flicking#circular) 옵션 활성화시에만 사용 가능합니다| + +**Throws**: [FlickingError](FlickingError) + +

|code|condition|
|---|---|
|[POSITION_NOT_REACHABLE](ERROR_CODE)|주어진 패널이 제거되었거나, Camera의 [range](Camera#range) 밖에 있을 경우|
|[NOT_ATTACHED_TO_FLICKING](ERROR_CODE)|[init](Control#init)이 이전에 호출되지 않은 경우|
|[ANIMATION_INTERRUPTED](ERROR_CODE)|사용자 입력에 의해 애니메이션이 중단된 경우|
|[STOP_CALLED_BY_USER](ERROR_CODE)|발생된 이벤트들 중 하나라도 `stop()`이 호출된 경우|

+ +### setActive {#setActive} + +
+ +
+ +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|newActivePanel|[Panel](Panel)|||| +|prevActivePanel|[Panel](Panel) \| null|||| +|isTrusted|boolean|||| + +### copy {#copy} + +
+ +
+ +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|control|[Control](Control)|||| + diff --git a/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/ControlParams.mdx b/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/ControlParams.mdx new file mode 100644 index 0000000000..26b4140af9 --- /dev/null +++ b/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/ControlParams.mdx @@ -0,0 +1,20 @@ +--- +custom_edit_url: null +--- + +```ts +interface ControlParams +``` + +
+ readonly +
+ +[AxesController](AxesController)를 업데이트하기 위한 현재 Camera 패러미터들 + +|PROPERTY|TYPE|DESCRIPTION| +|:---:|:---:|:---:| +|range|object|Camera가 이동 가능한 범위| +|position|number|현재 카메라 좌표| +|circular|boolean|[circular](Flicking#circular)옵션 활성화 여부| + diff --git a/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/DIRECTION.mdx b/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/DIRECTION.mdx new file mode 100644 index 0000000000..67aa6bf3cd --- /dev/null +++ b/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/DIRECTION.mdx @@ -0,0 +1,22 @@ +--- +custom_edit_url: null +--- + +```ts +const DIRECTION +``` + +
+ +
+ +방향을 나타내는 값들을 담고 있는 객체 + +**Type**: object + +|PROPERTY|TYPE|DESCRIPTION| +|:---:|:---:|:---:| +|PREV|"PREV"|[horizontal](Flicking#horizontal)가 `true`일 경우 왼쪽, [horizontal](Flicking#horizontal)가 `false`일 경우 위쪽을 의미합니다| +|NEXT|"NEXT"|[horizontal](Flicking#horizontal)가 `true`일 경우 오른쪽, [horizontal](Flicking#horizontal)가 `false`일 경우 아래쪽을 의미합니다| +|NONE|null|주로 제자리인 경우를 의미합니다| + diff --git a/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/DisabledState.mdx b/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/DisabledState.mdx new file mode 100644 index 0000000000..efb03cfdf5 --- /dev/null +++ b/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/DisabledState.mdx @@ -0,0 +1,166 @@ +--- +custom_edit_url: null +--- + +
⚠️ This class is for internal use only.
+ +```ts +class DisabledState extends State +``` + +
+ +
+ +이벤트의 `stop`호출에 의해 Flicking이 정지된 상태 + +
+
Properties
Methods
+
holding
animating
delta
targetPanel
onEnter
onHold
onChange
onRelease
onAnimationEnd
onFinish
+
+ +## Properties + +### holding {#holding} + +
+ readonly +
+ +현재 사용자가 클릭/터치중인지 여부 + +**Type**: false + +### animating {#animating} + +
+ readonly +
+ +현재 애니메이션 동작 여부 + +**Type**: true + +### delta {#delta} + +
+ readonly + inherited +
+ +이전 hold이벤트부터 change에 의해 발생한 이동 delta값의 합산 + +**Type**: number + +### targetPanel {#targetPanel} + +
+ readonly + inherited +
+ +애니메이션 종료시 [Control#activePanel](Control#activePanel)로 설정할 패널 + +**Type**: number + +## Methods + +### onEnter {#onEnter} + +
+ inherited +
+ +현재 상태로 돌입했을때 호출되는 콜백 함수 + +**Returns**: void + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|prevState|[State](State)|||이전 상태값| + +### onHold {#onHold} + +
+ inherited +
+ +Axes의 [hold](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:hold) 이벤트 핸들러 + +**Returns**: void + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|ctx|object|✔️||이벤트 콘텍스트| +|ctx.flicking|[Flicking](Flicking)|✔️||Flicking 인스턴스| +|ctx.axesEvent|object|✔️||Axes의 [hold](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:hold) 이벤트| +|ctx.transitTo|function|✔️||다른 상태로 변경하기 위한 함수| + +### onChange {#onChange} + +
+ inherited +
+ +Axes의 [change](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:change) 이벤트 핸들러 + +**Returns**: void + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|ctx|object|✔️||이벤트 콘텍스트| +|ctx.flicking|[Flicking](Flicking)|✔️||Flicking 인스턴스| +|ctx.axesEvent|object|✔️||Axes의 [change](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:change) 이벤트| +|ctx.transitTo|function|✔️||다른 상태로 변경하기 위한 함수| + +### onRelease {#onRelease} + +
+ inherited +
+ +Axes의 [release](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:release) 이벤트 핸들러 + +**Returns**: void + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|ctx|object|✔️||이벤트 콘텍스트| +|ctx.flicking|[Flicking](Flicking)|✔️||Flicking 인스턴스| +|ctx.axesEvent|object|✔️||Axes의 [release](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:release) 이벤트| +|ctx.transitTo|function|✔️||다른 상태로 변경하기 위한 함수| + +### onAnimationEnd {#onAnimationEnd} + +
+ inherited +
+ +Axes의 [animationEnd](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:animationEnd) 이벤트 핸들러 + +**Returns**: void + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|ctx|object|✔️||이벤트 콘텍스트| +|ctx.flicking|[Flicking](Flicking)|✔️||Flicking 인스턴스| +|ctx.axesEvent|object|✔️||Axes의 [animationEnd](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:animationEnd) 이벤트| +|ctx.transitTo|function|✔️||다른 상태로 변경하기 위한 함수| + +### onFinish {#onFinish} + +
+ inherited +
+ +Axes의 [finish](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:finish) 이벤트 핸들러 + +**Returns**: void + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|ctx|object|✔️||이벤트 콘텍스트| +|ctx.flicking|[Flicking](Flicking)|✔️||Flicking 인스턴스| +|ctx.axesEvent|object|✔️||Axes의 [finish](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:finish) 이벤트| +|ctx.transitTo|function|✔️||다른 상태로 변경하기 위한 함수| + diff --git a/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/DraggingState.mdx b/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/DraggingState.mdx new file mode 100644 index 0000000000..3131e32168 --- /dev/null +++ b/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/DraggingState.mdx @@ -0,0 +1,166 @@ +--- +custom_edit_url: null +--- + +
⚠️ This class is for internal use only.
+ +```ts +class DraggingState extends State +``` + +
+ +
+ +사용자가 드래깅중인 상태 + +
+
Properties
Methods
+
holding
animating
delta
targetPanel
onEnter
onHold
onChange
onRelease
onAnimationEnd
onFinish
+
+ +## Properties + +### holding {#holding} + +
+ readonly +
+ +현재 사용자가 클릭/터치중인지 여부 + +**Type**: true + +### animating {#animating} + +
+ readonly +
+ +현재 애니메이션 동작 여부 + +**Type**: true + +### delta {#delta} + +
+ readonly + inherited +
+ +이전 hold이벤트부터 change에 의해 발생한 이동 delta값의 합산 + +**Type**: number + +### targetPanel {#targetPanel} + +
+ readonly + inherited +
+ +애니메이션 종료시 [Control#activePanel](Control#activePanel)로 설정할 패널 + +**Type**: number + +## Methods + +### onEnter {#onEnter} + +
+ inherited +
+ +현재 상태로 돌입했을때 호출되는 콜백 함수 + +**Returns**: void + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|prevState|[State](State)|||이전 상태값| + +### onHold {#onHold} + +
+ inherited +
+ +Axes의 [hold](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:hold) 이벤트 핸들러 + +**Returns**: void + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|ctx|object|✔️||이벤트 콘텍스트| +|ctx.flicking|[Flicking](Flicking)|✔️||Flicking 인스턴스| +|ctx.axesEvent|object|✔️||Axes의 [hold](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:hold) 이벤트| +|ctx.transitTo|function|✔️||다른 상태로 변경하기 위한 함수| + +### onChange {#onChange} + +
+ inherited +
+ +Axes의 [change](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:change) 이벤트 핸들러 + +**Returns**: void + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|ctx|object|✔️||이벤트 콘텍스트| +|ctx.flicking|[Flicking](Flicking)|✔️||Flicking 인스턴스| +|ctx.axesEvent|object|✔️||Axes의 [change](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:change) 이벤트| +|ctx.transitTo|function|✔️||다른 상태로 변경하기 위한 함수| + +### onRelease {#onRelease} + +
+ inherited +
+ +Axes의 [release](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:release) 이벤트 핸들러 + +**Returns**: void + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|ctx|object|✔️||이벤트 콘텍스트| +|ctx.flicking|[Flicking](Flicking)|✔️||Flicking 인스턴스| +|ctx.axesEvent|object|✔️||Axes의 [release](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:release) 이벤트| +|ctx.transitTo|function|✔️||다른 상태로 변경하기 위한 함수| + +### onAnimationEnd {#onAnimationEnd} + +
+ inherited +
+ +Axes의 [animationEnd](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:animationEnd) 이벤트 핸들러 + +**Returns**: void + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|ctx|object|✔️||이벤트 콘텍스트| +|ctx.flicking|[Flicking](Flicking)|✔️||Flicking 인스턴스| +|ctx.axesEvent|object|✔️||Axes의 [animationEnd](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:animationEnd) 이벤트| +|ctx.transitTo|function|✔️||다른 상태로 변경하기 위한 함수| + +### onFinish {#onFinish} + +
+ inherited +
+ +Axes의 [finish](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:finish) 이벤트 핸들러 + +**Returns**: void + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|ctx|object|✔️||이벤트 콘텍스트| +|ctx.flicking|[Flicking](Flicking)|✔️||Flicking 인스턴스| +|ctx.axesEvent|object|✔️||Axes의 [finish](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:finish) 이벤트| +|ctx.transitTo|function|✔️||다른 상태로 변경하기 위한 함수| + diff --git a/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/ERROR_CODE.mdx b/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/ERROR_CODE.mdx new file mode 100644 index 0000000000..e09171e563 --- /dev/null +++ b/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/ERROR_CODE.mdx @@ -0,0 +1,34 @@ +--- +custom_edit_url: null +--- + +```ts +const ERROR_CODE +``` + +
+ +
+ +[FlickingError](FlickingError)의 에러 코드. 아래는 각각의 에러 코드가 발생하는 조건입니다. + +**Type**: object + +|PROPERTY|TYPE|DESCRIPTION| +|:---:|:---:|:---:| +|WRONG_TYPE|number|패러미터의 타입이 잘못되었을 경우| +|ELEMENT_NOT_FOUND|number|주어진 CSS selector로 페이지 내에서 해당 엘리먼트를 찾지 못했을 경우| +|VAL_MUST_NOT_NULL|number|값을 기대했으나, `null`이나 `undefined`를 받은 경우| +|NOT_ATTACHED_TO_FLICKING|number|Flicking 내부 컴포넌트가 초기화되지 않은 경우 ([Flicking#init](Flicking#init)이 호출되지 않은 경우)| +|WRONG_OPTION|number|옵션들 중 잘못된 값이 있을 때| +|INDEX_OUT_OF_RANGE|number|인덱스가 주어진 범위를 벗어난 경우| +|POSITION_NOT_REACHABLE|number|[Control#moveToPosition](Control#moveToPosition)의 `position` 패러미터가 도달 가능한 범위를 벗어난 경우| +|TRANSFORM_NOT_SUPPORTED|number|CSS `transform` 속성을 사용할 수 없는 경우(<=IE8)| +|STOP_CALLED_BY_USER|number|사용자에 의해 이벤트의 `stop()`이 호출된 경우| +|ANIMATION_INTERRUPTED|number|사용자에 의해 애니메이션이 중단된 경우| +|ANIMATION_ALREADY_PLAYING|number|현재 애니메이션이 이미 진행중인 경우| +|NOT_ALLOWED_IN_FRAMEWORK|number|프레임워크(React, Angular, Vue ...)에서 사용 불가능한 메소드를 호출했을 경우| +|NOT_INITIALIZED|number|[Flicking#init](Flicking#init)의 호출이 필요하나, 아직 호출되지 않았을 경우| +|NO_ACTIVE|number|현재 Flicking이 선택한 패널이 없을 경우. 일반적으로 패널이 하나도 없는 경우에 발생할 수 있습니다| +|NOT_ALLOWED_IN_VIRTUAL|number|virtual 옵션이 활성화된 상태에서 사용 불가능한 메소드가 호출되었을 경우| + diff --git a/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/EVENT.mdx b/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/EVENT.mdx new file mode 100644 index 0000000000..83a1620ac8 --- /dev/null +++ b/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/EVENT.mdx @@ -0,0 +1,14 @@ +--- +custom_edit_url: null +--- + +```ts +const EVENT +``` + +
+ +
+ +All possible @egjs/axes event keys + diff --git a/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/EVENTS.mdx b/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/EVENTS.mdx new file mode 100644 index 0000000000..22a9b7017c --- /dev/null +++ b/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/EVENTS.mdx @@ -0,0 +1,36 @@ +--- +custom_edit_url: null +--- + +```ts +const EVENTS +``` + +
+ +
+ +[Flicking](Flicking)의 이벤트 이름 문자열들을 담은 객체 + +**Type**: object + +|PROPERTY|TYPE|DESCRIPTION| +|:---:|:---:|:---:| +|HOLD_START|"holdStart"|holdStart 이벤트| +|HOLD_END|"holdEnd"|holdEnd 이벤트| +|MOVE_START|"moveStart"|moveStart 이벤트| +|MOVE|"move"|move 이벤트| +|MOVE_END|"moveEnd"|moveEnd 이벤트| +|WILL_CHANGE|"willChange"|willChange 이벤트| +|CHANGED|"changed"|changed 이벤트| +|WILL_RESTORE|"willRestore"|willRestore 이벤트| +|RESTORED|"restored"|restored 이벤트| +|SELECT|"select"|select 이벤트| +|NEED_PANEL|"needPanel"|needPanel 이벤트| +|PANEL_CHANGE|"panelChange"|panelChange 이벤트| + +```ts +import { EVENTS } from "@egjs/flicking"; +EVENTS.MOVE_START; // "moveStart" +``` + diff --git a/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/ElementLike.mdx b/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/ElementLike.mdx new file mode 100644 index 0000000000..b28b2e8e8f --- /dev/null +++ b/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/ElementLike.mdx @@ -0,0 +1,12 @@ +--- +custom_edit_url: null +--- + +
+ +
+ +단일/복수의 HTMLElement의 outerHTML에 해당하는 `string`, 혹은 `HTMLElement`의 인스턴스 + +**Type**: string \| HTMLElement + diff --git a/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/ElementPanel.mdx b/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/ElementPanel.mdx new file mode 100644 index 0000000000..543d87977e --- /dev/null +++ b/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/ElementPanel.mdx @@ -0,0 +1,433 @@ +--- +custom_edit_url: null +--- + +```ts +class ElementPanel extends Panel +``` +슬라이드 데이터 컴포넌트로, 단일 HTMLElement의 정보를 갖고 있습니다 + +
+
Properties
Methods
+
element
index
position
size
sizeIncludingMargin
height
margin
alignPosition
removed
loading
range
toggled
toggleDirection
offset
progress
outsetProgress
visibleRatio
align
resize
setSize
contains
destroy
includePosition
includeRange
focus
prev
next
increaseIndex
decreaseIndex
updatePosition
toggle
updateCircularToggleDirection
+
+ +## Constructor +```ts +new ElementPanel(options, options.el, options.index, options.align, options.flicking) +``` +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|options|object|||옵션 오브젝트| +|options.el|HTMLElement|✔️||패널이 참조하는 `HTMLElement`| +|options.index|number|✔️||패널의 초기 인덱스| +|options.align|Constants.ALIGN \| string \| number|✔️||패널의 초기 [align](Flicking#align)값| +|options.flicking|[Flicking](Flicking)|✔️||패널이 참조하는 [Flicking](Flicking) 인스턴스| + +## Properties + +### element {#element} + +
+ readonly +
+ +패널이 참조하고 있는 `HTMLElement` + +**Type**: HTMLElement + +### index {#index} + +
+ readonly + inherited +
+ +패널의 인덱스 + +**Type**: number + +### position {#position} + +
+ readonly + inherited +
+ +패널의 현재 좌표, [alignPosition](Panel#alignPosition)을 포함하고 있습니다 + +**Type**: number + +### size {#size} + +
+ readonly + inherited +
+ +패널 엘리먼트의 캐시된 크기 +이 값은 [horizontal](Flicking#horizontal)이 `true`일 경우 [element](Panel#element)의 `offsetWidth`와 동일하고, `false`일 경우 `offsetHeight`와 동일합니다 + +**Type**: number + +### sizeIncludingMargin {#sizeIncludingMargin} + +
+ readonly + inherited +
+ +CSS `margin`을 포함한 패널의 크기 +이 값은 [horizontal](Flicking#horizontal)이 `true`일 경우 margin left/right을 포함하고, `false`일 경우 margin top/bottom을 포함합니다 + +**Type**: number + +### height {#height} + +
+ readonly + inherited +
+ +패널 엘리먼트의 높이 + +**Type**: number + +### margin {#margin} + +
+ readonly + inherited +
+ +패널 엘리먼트의 CSS `margin` 값 + +**Type**: object + +|PROPERTY|TYPE|DESCRIPTION| +|:---:|:---:|:---:| +|prev|number|[horizontal](Flicking#horizontal)이 `true`일 경우 `margin-left`, `false`일 경우 `margin-top`에 해당하는 값| +|next|number|[horizontal](Flicking#horizontal)이 `true`일 경우 `margin-right`, `false`일 경우 `margin-bottom`에 해당하는 값| + +### alignPosition {#alignPosition} + +
+ readonly + inherited +
+ +패널의 정렬 기준 위치. [Camera](Camera)의 뷰포트 내에서의 [alignPosition](Camera#alignPosition)이 위치해야 하는 곳입니다 + +**Type**: number + +### removed {#removed} + +
+ readonly + inherited +
+ +패널이 [remove](Flicking#remove)되었는지 여부를 나타내는 값 + +**Type**: boolean + +### loading {#loading} + +
+ readonly + inherited +
+ +패널 내부의 이미지/비디오가 아직 로드되지 않아 [resize](Panel#resize)될 것인지를 나타내는 값 + +**Type**: boolean + +### range {#range} + +
+ readonly + inherited +
+ +패널 엘리먼트의 Bounding box 범위 + +**Type**: object + +|PROPERTY|TYPE|DESCRIPTION| +|:---:|:---:|:---:| +|min|number|Bounding box's left([horizontal](Flicking#horizontal): true) / top([horizontal](Flicking#horizontal): false)| +|max|number|Bounding box's right([horizontal](Flicking#horizontal): true) / bottom([horizontal](Flicking#horizontal): false)| + +### toggled {#toggled} + +
+ readonly + inherited +
+ +패널의 위치가 circular 동작에 의해 토글되었는지 여부를 나타내는 값 + +**Type**: boolean + +### toggleDirection {#toggleDirection} + +
+ readonly + inherited +
+ +패널의 위치가 circular 동작에 의해 토글되는 방향 + +**Type**: [DIRECTION](DIRECTION) + +### offset {#offset} + +
+ readonly + inherited +
+ +[Panel#order](Panel#order)에 의한 실제 위치 변경값 + +**Type**: number + +### progress {#progress} + +
+ readonly + inherited +
+ +이 패널로부터 이전/다음 패널으로의 이동 진행률 + +**Type**: number + +### outsetProgress {#outsetProgress} + +
+ readonly + inherited +
+ +현재 패널이 뷰포트 영역 밖으로 완전히 사라지는 지점을 기준으로 하는 진행도(prev방향: -1, 선택 지점: 0, next방향: 1) + +**Type**: number + +### visibleRatio {#visibleRatio} + +
+ readonly + inherited +
+ +뷰포트 안에서 패널이 보이는 영역의 비율 + +**Type**: number + +### align {#align} + +
+ inherited +
+ +[alignPosition](Panel#alignPosition)이 패널 내의 어디에 위치해야 하는지를 나타내는 값 + +**Type**: Constants.ALIGN \| string \| number + +## Methods + +### resize {#resize} + +
+ inherited +
+ +패널의 크기를 갱신합니다 + +**Returns**: this + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|cached|object|✔️||사전에 캐시된 패널의 크기 정보| + +### setSize {#setSize} + +
+ inherited +
+ +패널 크기를 변경합니다. 패널 엘리먼트에 해당 크기의 CSS width/height를 적용합니다 + +**Returns**: this + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|size|object|✔️||새 패널 크기| +|size.width|number \| string|✔️||CSS 문자열 또는 숫자(px)| +|size.height|number \| string|✔️||CSS 문자열 또는 숫자(px)| + +### contains {#contains} + +
+ inherited +
+ +해당 엘리먼트가 이 패널의 [element](Panel#element) 내에 포함되어 있는지를 반환합니다 + +**Returns**: boolean +- 패널의 [element](Panel#element)내에 해당 엘리먼트 포함 여부 + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|element|HTMLElement|||확인하고자 하는 HTMLElement| + +### destroy {#destroy} + +
+ inherited +
+ +내부 상태를 초기화하고 [removed](Panel#removed)를 `true`로 설정합니다. + +**Returns**: void + +### includePosition {#includePosition} + +
+ inherited +
+ +주어진 좌표가 현재 패널의 [range](Panel#range)내에 속해있는지를 반환합니다. + +**Returns**: boolean +- 해당 좌표가 패널 영역 내에 속해있는지 여부 + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|pos|number|||확인하고자 하는 좌표| +|includeMargin|boolean|✔️|false|패널 영역에 [margin](Panel#margin)값을 포함시킵니다| + +### includeRange {#includeRange} + +
+ inherited +
+ +주어진 범위가 이 패널 내부에 완전히 포함되는지를 반환합니다 + +**Returns**: boolean +- 해당 범위가 패널 영역 내에 완전히 속해있는지 여부 + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|min|number|||확인하고자 하는 최소 범위| +|max|number|||확인하고자 하는 최대 범위| +|includeMargin|boolean|✔️|false|패널 영역에 [margin](Panel#margin)값을 포함시킵니다| + +### focus {#focus} + +
+ inherited +
+ +[Camera](Camera)를 이 패널로 이동합니다 + +**Returns**: Promise<void> +- 패널 도달시에 resolve되는 Promise + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|duration|number|✔️||애니메이션 진행 시간 (단위: ms)| + +### prev {#prev} + +
+ inherited +
+ +이전(`index - 1`) 패널을 반환합니다. 이전 패널이 없을 경우 `null`을 반환합니다 +[circular](Flicking#circularEnabled) 모드가 활성화되었을 때 첫번째 패널에서 이 메소드를 호출할 경우 마지막 패널을 반환합니다 + +**Returns**: [Panel](Panel) \| null +- 이전 패널 + +### next {#next} + +
+ inherited +
+ +다음(`index + 1`) 패널을 반환합니다. 다음 패널이 없을 경우 `null`을 반환합니다 +[circular](Flicking#circularEnabled) 모드가 활성화되었을 때 마지막 패널에서 이 메소드를 호출할 경우 첫번째 패널을 반환합니다 + +**Returns**: [Panel](Panel) \| null +- 다음 패널 + +### increaseIndex {#increaseIndex} + +
+ inherited +
+ +패널의 인덱스를 주어진 값만큼 증가시킵니다 + +**Returns**: this + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|val|number|||0보다 같거나 큰 정수| + +
⚠️ This function is for internal use only.
+ +### decreaseIndex {#decreaseIndex} + +
+ inherited +
+ +패널의 인덱스를 주어진 값만큼 감소시킵니다 + +**Returns**: this + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|val|number|||0보다 같거나 큰 정수| + +
⚠️ This function is for internal use only.
+ +### updatePosition {#updatePosition} + +
+ inherited +
+ +**Returns**: this + +
⚠️ This function is for internal use only.
+ +### toggle {#toggle} + +
+ inherited +
+ +**Returns**: boolean +- toggled + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|prevPos|number|||| +|newPos|number|||| + +
⚠️ This function is for internal use only.
+ +### updateCircularToggleDirection {#updateCircularToggleDirection} + +
+ inherited +
+ +**Returns**: this + +
⚠️ This function is for internal use only.
+ diff --git a/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/ExternalPanel.mdx b/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/ExternalPanel.mdx new file mode 100644 index 0000000000..06a433f483 --- /dev/null +++ b/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/ExternalPanel.mdx @@ -0,0 +1,423 @@ +--- +custom_edit_url: null +--- + +```ts +class ExternalPanel extends Panel +``` +슬라이드 데이터 컴포넌트로, 단일 HTMLElement의 정보를 갖고 있습니다 + +
+
Properties
Methods
+
index
position
size
sizeIncludingMargin
height
margin
alignPosition
removed
loading
range
toggled
toggleDirection
offset
progress
outsetProgress
visibleRatio
align
resize
setSize
contains
destroy
includePosition
includeRange
focus
prev
next
increaseIndex
decreaseIndex
updatePosition
toggle
updateCircularToggleDirection
+
+ +## Constructor +```ts +new ExternalPanel(options, options.el, options.index, options.align, options.flicking) +``` +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|options|object|||옵션 오브젝트| +|options.el|HTMLElement|✔️||패널이 참조하는 `HTMLElement`| +|options.index|number|✔️||패널의 초기 인덱스| +|options.align|Constants.ALIGN \| string \| number|✔️||패널의 초기 [align](Flicking#align)값| +|options.flicking|[Flicking](Flicking)|✔️||패널이 참조하는 [Flicking](Flicking) 인스턴스| + +## Properties + +### index {#index} + +
+ readonly + inherited +
+ +패널의 인덱스 + +**Type**: number + +### position {#position} + +
+ readonly + inherited +
+ +패널의 현재 좌표, [alignPosition](Panel#alignPosition)을 포함하고 있습니다 + +**Type**: number + +### size {#size} + +
+ readonly + inherited +
+ +패널 엘리먼트의 캐시된 크기 +이 값은 [horizontal](Flicking#horizontal)이 `true`일 경우 [element](Panel#element)의 `offsetWidth`와 동일하고, `false`일 경우 `offsetHeight`와 동일합니다 + +**Type**: number + +### sizeIncludingMargin {#sizeIncludingMargin} + +
+ readonly + inherited +
+ +CSS `margin`을 포함한 패널의 크기 +이 값은 [horizontal](Flicking#horizontal)이 `true`일 경우 margin left/right을 포함하고, `false`일 경우 margin top/bottom을 포함합니다 + +**Type**: number + +### height {#height} + +
+ readonly + inherited +
+ +패널 엘리먼트의 높이 + +**Type**: number + +### margin {#margin} + +
+ readonly + inherited +
+ +패널 엘리먼트의 CSS `margin` 값 + +**Type**: object + +|PROPERTY|TYPE|DESCRIPTION| +|:---:|:---:|:---:| +|prev|number|[horizontal](Flicking#horizontal)이 `true`일 경우 `margin-left`, `false`일 경우 `margin-top`에 해당하는 값| +|next|number|[horizontal](Flicking#horizontal)이 `true`일 경우 `margin-right`, `false`일 경우 `margin-bottom`에 해당하는 값| + +### alignPosition {#alignPosition} + +
+ readonly + inherited +
+ +패널의 정렬 기준 위치. [Camera](Camera)의 뷰포트 내에서의 [alignPosition](Camera#alignPosition)이 위치해야 하는 곳입니다 + +**Type**: number + +### removed {#removed} + +
+ readonly + inherited +
+ +패널이 [remove](Flicking#remove)되었는지 여부를 나타내는 값 + +**Type**: boolean + +### loading {#loading} + +
+ readonly + inherited +
+ +패널 내부의 이미지/비디오가 아직 로드되지 않아 [resize](Panel#resize)될 것인지를 나타내는 값 + +**Type**: boolean + +### range {#range} + +
+ readonly + inherited +
+ +패널 엘리먼트의 Bounding box 범위 + +**Type**: object + +|PROPERTY|TYPE|DESCRIPTION| +|:---:|:---:|:---:| +|min|number|Bounding box's left([horizontal](Flicking#horizontal): true) / top([horizontal](Flicking#horizontal): false)| +|max|number|Bounding box's right([horizontal](Flicking#horizontal): true) / bottom([horizontal](Flicking#horizontal): false)| + +### toggled {#toggled} + +
+ readonly + inherited +
+ +패널의 위치가 circular 동작에 의해 토글되었는지 여부를 나타내는 값 + +**Type**: boolean + +### toggleDirection {#toggleDirection} + +
+ readonly + inherited +
+ +패널의 위치가 circular 동작에 의해 토글되는 방향 + +**Type**: [DIRECTION](DIRECTION) + +### offset {#offset} + +
+ readonly + inherited +
+ +[Panel#order](Panel#order)에 의한 실제 위치 변경값 + +**Type**: number + +### progress {#progress} + +
+ readonly + inherited +
+ +이 패널로부터 이전/다음 패널으로의 이동 진행률 + +**Type**: number + +### outsetProgress {#outsetProgress} + +
+ readonly + inherited +
+ +현재 패널이 뷰포트 영역 밖으로 완전히 사라지는 지점을 기준으로 하는 진행도(prev방향: -1, 선택 지점: 0, next방향: 1) + +**Type**: number + +### visibleRatio {#visibleRatio} + +
+ readonly + inherited +
+ +뷰포트 안에서 패널이 보이는 영역의 비율 + +**Type**: number + +### align {#align} + +
+ inherited +
+ +[alignPosition](Panel#alignPosition)이 패널 내의 어디에 위치해야 하는지를 나타내는 값 + +**Type**: Constants.ALIGN \| string \| number + +## Methods + +### resize {#resize} + +
+ inherited +
+ +패널의 크기를 갱신합니다 + +**Returns**: this + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|cached|object|✔️||사전에 캐시된 패널의 크기 정보| + +### setSize {#setSize} + +
+ inherited +
+ +패널 크기를 변경합니다. 패널 엘리먼트에 해당 크기의 CSS width/height를 적용합니다 + +**Returns**: this + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|size|object|✔️||새 패널 크기| +|size.width|number \| string|✔️||CSS 문자열 또는 숫자(px)| +|size.height|number \| string|✔️||CSS 문자열 또는 숫자(px)| + +### contains {#contains} + +
+ inherited +
+ +해당 엘리먼트가 이 패널의 [element](Panel#element) 내에 포함되어 있는지를 반환합니다 + +**Returns**: boolean +- 패널의 [element](Panel#element)내에 해당 엘리먼트 포함 여부 + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|element|HTMLElement|||확인하고자 하는 HTMLElement| + +### destroy {#destroy} + +
+ inherited +
+ +내부 상태를 초기화하고 [removed](Panel#removed)를 `true`로 설정합니다. + +**Returns**: void + +### includePosition {#includePosition} + +
+ inherited +
+ +주어진 좌표가 현재 패널의 [range](Panel#range)내에 속해있는지를 반환합니다. + +**Returns**: boolean +- 해당 좌표가 패널 영역 내에 속해있는지 여부 + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|pos|number|||확인하고자 하는 좌표| +|includeMargin|boolean|✔️|false|패널 영역에 [margin](Panel#margin)값을 포함시킵니다| + +### includeRange {#includeRange} + +
+ inherited +
+ +주어진 범위가 이 패널 내부에 완전히 포함되는지를 반환합니다 + +**Returns**: boolean +- 해당 범위가 패널 영역 내에 완전히 속해있는지 여부 + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|min|number|||확인하고자 하는 최소 범위| +|max|number|||확인하고자 하는 최대 범위| +|includeMargin|boolean|✔️|false|패널 영역에 [margin](Panel#margin)값을 포함시킵니다| + +### focus {#focus} + +
+ inherited +
+ +[Camera](Camera)를 이 패널로 이동합니다 + +**Returns**: Promise<void> +- 패널 도달시에 resolve되는 Promise + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|duration|number|✔️||애니메이션 진행 시간 (단위: ms)| + +### prev {#prev} + +
+ inherited +
+ +이전(`index - 1`) 패널을 반환합니다. 이전 패널이 없을 경우 `null`을 반환합니다 +[circular](Flicking#circularEnabled) 모드가 활성화되었을 때 첫번째 패널에서 이 메소드를 호출할 경우 마지막 패널을 반환합니다 + +**Returns**: [Panel](Panel) \| null +- 이전 패널 + +### next {#next} + +
+ inherited +
+ +다음(`index + 1`) 패널을 반환합니다. 다음 패널이 없을 경우 `null`을 반환합니다 +[circular](Flicking#circularEnabled) 모드가 활성화되었을 때 마지막 패널에서 이 메소드를 호출할 경우 첫번째 패널을 반환합니다 + +**Returns**: [Panel](Panel) \| null +- 다음 패널 + +### increaseIndex {#increaseIndex} + +
+ inherited +
+ +패널의 인덱스를 주어진 값만큼 증가시킵니다 + +**Returns**: this + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|val|number|||0보다 같거나 큰 정수| + +
⚠️ This function is for internal use only.
+ +### decreaseIndex {#decreaseIndex} + +
+ inherited +
+ +패널의 인덱스를 주어진 값만큼 감소시킵니다 + +**Returns**: this + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|val|number|||0보다 같거나 큰 정수| + +
⚠️ This function is for internal use only.
+ +### updatePosition {#updatePosition} + +
+ inherited +
+ +**Returns**: this + +
⚠️ This function is for internal use only.
+ +### toggle {#toggle} + +
+ inherited +
+ +**Returns**: boolean +- toggled + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|prevPos|number|||| +|newPos|number|||| + +
⚠️ This function is for internal use only.
+ +### updateCircularToggleDirection {#updateCircularToggleDirection} + +
+ inherited +
+ +**Returns**: this + +
⚠️ This function is for internal use only.
+ diff --git a/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/ExternalRenderer.mdx b/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/ExternalRenderer.mdx new file mode 100644 index 0000000000..04dec770e2 --- /dev/null +++ b/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/ExternalRenderer.mdx @@ -0,0 +1,218 @@ +--- +custom_edit_url: null +--- + +
⚠️ This class is for internal use only.
+ +```ts +class ExternalRenderer extends Renderer +``` + +
+ +
+ +
+
Properties
Methods
+
panels
rendering
panelCount
strategy
align
render
init
destroy
getPanel
updatePanelSize
batchInsert
batchInsertDefer
batchRemove
batchRemoveDefer
updateAfterPanelChange
checkPanelContentsReady
+
+ +## Properties + +### panels {#panels} + +
+ readonly + inherited +
+ +전체 패널들의 배열 + +**Type**: Array<[Panel](Panel)> + +**See**: +- [Panel](Panel) + +### rendering {#rendering} + +
+ readonly + inherited +
+ +현재 렌더링이 시작되어 끝나기 전까지의 상태인지의 여부 + +**Type**: boolean + +### panelCount {#panelCount} + +
+ readonly + inherited +
+ +전체 패널의 개수 + +**Type**: number + +### strategy {#strategy} + +
+ inherited +
+ +### align {#align} + +
+ inherited +
+ +[Panel](Panel)에 공통적으로 적용할 [align](Panel#align) 값 + +**Type**: Constants.ALIGN \| string \| number + +## Methods + +### render {#render} + +
+ inherited +
+ +패널 엘리먼트들을 카메라 엘리먼트 내부에 렌더링합니다 + +**Returns**: this + +### init {#init} + +
+ inherited +
+ +Renderer를 초기화합니다 + +**Returns**: this + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|flicking|[Flicking](Flicking)|||Flicking의 인스턴스| + +### destroy {#destroy} + +
+ inherited +
+ +Renderer를 초기 상태로 되돌립니다 + +**Returns**: void + +### getPanel {#getPanel} + +
+ inherited +
+ +주어진 인덱스에 해당하는 [Panel](Panel)을 반환합니다. 주어진 인덱스에 해당하는 패널이 존재하지 않을 경우 `null`을 반환합니다. + +**Returns**: [Panel](Panel) \| null +- 주어진 인덱스에 해당하는 패널 + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|index|number|||| + +**See**: +- [Panel](Panel) + +### updatePanelSize {#updatePanelSize} + +
+ inherited +
+ +모든 패널의 크기를 업데이트합니다 + +**Returns**: this + +### batchInsert {#batchInsert} + +
+ inherited +
+ +주어진 인덱스에 새로운 패널들을 추가합니다
해당 인덱스보다 같거나 큰 인덱스를 가진 기존 패널들은 추가한 패널의 개수만큼 인덱스가 증가합니다. + +**Returns**: Array<[Panel](Panel)> +- 추가된 패널들의 배열 + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|items|Array<object>|||추가할 아이템들의 배열| +|items.index|number|✔️||새로 패널들을 추가할 인덱스| +|items.elements|Array<any>|✔️||엘리먼트의 배열 혹은 프레임워크에서 엘리먼트를 포함한 컴포넌트들의 배열| +|items.hasDOMInElements|boolean|✔️||내부에 실제 DOM 엘리먼트들을 포함하고 있는지 여부. true로 설정할 경우, 렌더러는 해당 엘리먼트들을 카메라 엘리먼트 내부에 추가합니다| + +### batchInsertDefer {#batchInsertDefer} + +
+ inherited +
+ +Defers update
camera position & others will be updated after calling updateAfterPanelChange + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|...items|Array<{index: number, elements: any[], hasDOMInElements: boolean}>|||| + +### batchRemove {#batchRemove} + +
+ inherited +
+ +주어진 인덱스의 패널을 제거합니다
해당 인덱스보다 큰 인덱스를 가진 기존 패널들은 제거한 패널의 개수만큼 인덱스가 감소합니다 + +**Returns**: [Panel](Panel)[] +- 제거된 패널들의 배열 + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|items|Array<object>|||제거할 아이템들의 배열| +|items.index|number|✔️||제거할 패널의 인덱스| +|items.deleteCount|number|✔️|1|`index` 이후로 제거할 패널의 개수| +|items.hasDOMInElements|boolean|✔️|1|내부에 실제 DOM 엘리먼트들을 포함하고 있는지 여부. true로 설정할 경우, 렌더러는 해당 엘리먼트들을 카메라 엘리먼트 내부에서 제거합니다| + +### batchRemoveDefer {#batchRemoveDefer} + +
+ inherited +
+ +Defers update
camera position & others will be updated after calling updateAfterPanelChange + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|...items|Array<{index: number, deleteCount: number, hasDOMInElements: boolean}>|||| + +### updateAfterPanelChange {#updateAfterPanelChange} + +
+ inherited +
+ +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|panelsAdded|[Panel](Panel)[]|||| +|panelsRemoved|[Panel](Panel)[]|||| + +### checkPanelContentsReady {#checkPanelContentsReady} + +
+ inherited +
+ +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|checkingPanels|[Panel](Panel)[]|||| + diff --git a/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/Flicking.mdx b/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/Flicking.mdx new file mode 100644 index 0000000000..6a4ee460c3 --- /dev/null +++ b/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/Flicking.mdx @@ -0,0 +1,1547 @@ +--- +custom_edit_url: null +--- + +```ts +class Flicking extends Component +``` + +
+ +
+ +
+
Properties
Methods
Events
+
VERSIONstatic
control
camera
renderer
viewport
initialized
circularEnabled
virtualEnabled
index
element
currentPanel
panels
panelCount
visiblePanels
animating
holding
activePlugins
align
defaultIndex
horizontal
circular
circularFallback
bound
adaptive
panelsPerView
noPanelStyleOverride
resizeOnContentsReady
nested
needPanelThreshold
preventEventsBeforeInit
deceleration
easing
duration
inputType
moveType
threshold
dragThreshold
interruptable
bounce
iOSEdgeSwipeThreshold
preventClickOnDrag
preventDefaultOnDrag
disableOnInit
changeOnHold
renderOnlyVisible
virtual
autoInit
autoResize
useResizeObserver
resizeDebounce
maxResizeDebounce
useFractionalSize
externalRenderer
renderExternal
init
destroy
prev
next
moveTo
updateAnimation
stopAnimation
getPanel
enableInput
disableInput
getStatus
setStatus
addPlugins
removePlugins
resize
append
prepend
insert
remove
ready
beforeResize
afterResize
holdStart
holdEnd
moveStart
move
moveEnd
willChange
changed
willRestore
restored
select
needPanel
visibleChange
reachEdge
panelChange
+
+ +## constructor +```ts +new Flicking(root, options) +``` + +
+ +
+ +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|root|HTMLElement \| string|||Flicking을 초기화할 HTMLElement로, `string` 타입으로 지정시 css 선택자 문자열을 지정해야 합니다.| +|options|object|✔️|{}|Flicking에 적용할 옵션 오브젝트| + +**Throws**: [FlickingError](FlickingError) + +

|code|조건|
|---|---|
|[WRONG_TYPE](ERROR_CODE)|루트 엘리먼트가 string이나 HTMLElement가 아닐 경우|
|[ELEMENT_NOT_FOUND](ERROR_CODE)|주어진 CSS selector로 엘리먼트를 찾지 못했을 경우|

+ +```ts +import Flicking from "@egjs/flicking"; + +// Creating new instance of Flicking with HTMLElement +const flicking = new Flicking(document.querySelector(".flicking-viewport"), { circular: true }); + +// Creating new instance of Flicking with CSS selector +const flicking2 = new Flicking(".flicking-viewport", { circular: true }); +``` + +## Properties +### VERSION {#VERSION} + +
+ static + readonly +
+ +버전정보 문자열 + +**Type**: string + +```ts +Flicking.VERSION; // ex) 4.0.0 +``` + +### control {#control} + +
+ readonly +
+ +현재 Flicking에 활성화된 [Control](Control) 인스턴스 + +**Type**: [Control](Control) + +**Default**: [SnapControl](SnapControl) + +**See**: +- [Control](Control) +- [SnapControl](SnapControl) +- [FreeControl](FreeControl) + +### camera {#camera} + +
+ readonly +
+ +현재 Flicking에 활성화된 [Camera](Camera) 인스턴스 + +**Type**: [Camera](Camera) + +**Default**: LinearCamera + +**See**: +- [Camera](Camera) +- LinearCamera +- BoundCamera +- CircularCamera + +### renderer {#renderer} + +
+ readonly +
+ +현재 Flicking에 활성화된 [Renderer](Renderer) 인스턴스 + +**Type**: [Renderer](Renderer) + +**Default**: [VanillaRenderer](VanillaRenderer) + +**See**: +- [Renderer](Renderer) +- [VanillaRenderer](VanillaRenderer) +- [ExternalRenderer](ExternalRenderer) + +### viewport {#viewport} + +
+ readonly +
+ +뷰포트 크기 정보를 담당하는 컴포넌트 + +**Type**: [Viewport](Viewport) + +**See**: +- [Viewport](Viewport) + +### initialized {#initialized} + +
+ readonly +
+ +Flicking의 [init()](Flicking#init)이 호출되었는지를 나타내는 멤버 변수.
이 값은 [init()](Flicking#init)이 호출되었으면 `true`로 변하고, [destroy()](Flicking#destroy)호출 이후에 다시 `false`로 변경됩니다. + +**Type**: boolean + +**Default**: false + +### circularEnabled {#circularEnabled} + +
+ readonly +
+ +[circular](Flicking#circular) 옵션이 활성화되었는지 여부를 나타내는 멤버 변수.
[circular](Flicking#circular) 옵션은 패널의 크기의 합이 충분하지 않을 경우 비활성화됩니다. + +**Type**: boolean + +**Default**: false + +### virtualEnabled {#virtualEnabled} + +
+ readonly +
+ +[virtual](Flicking#virtual) 옵션이 활성화되었는지 여부를 나타내는 멤버 변수.
[virtual](Flicking#virtual) 옵션은 [panelsPerView](Flicking#panelsPerView) 옵션의 값이 0보다 같거나 작으면 비활성화됩니다. + +**Type**: boolean + +**Default**: false + +### index {#index} + +
+ readonly +
+ +[currentPanel](Flicking#currentPanel)의 인덱스 번호 + +**Type**: number + +**Default**: 0 + +### element {#element} + +
+ readonly +
+ +root(`.flicking-viewport`) 엘리먼트 + +**Type**: HTMLElement + +### currentPanel {#currentPanel} + +
+ readonly +
+ +현재 선택된 패널 + +**Type**: [Panel](Panel) + +**See**: +- [Panel](Panel) + +### panels {#panels} + +
+ readonly +
+ +전체 패널들의 배열 + +**Type**: Array<[Panel](Panel)> + +**See**: +- [Panel](Panel) + +### panelCount {#panelCount} + +
+ readonly +
+ +전체 패널의 개수 + +**Type**: number + +### visiblePanels {#visiblePanels} + +
+ readonly +
+ +현재 보이는 패널의 배열 + +**Type**: Array<[Panel](Panel)> + +**See**: +- [Panel](Panel) + +### animating {#animating} + +
+ readonly +
+ +현재 애니메이션 동작 여부 + +**Type**: boolean + +### holding {#holding} + +
+ readonly +
+ +현재 사용자가 클릭/터치중인지 여부 + +**Type**: boolean + +### activePlugins {#activePlugins} + +
+ readonly +
+ +현재 활성화된 플러그인 목록 + +**Type**: Array<[Plugin](Plugin)> + +### align {#align} + +
+ +
+ +뷰포트 내에서 패널 정렬방식을 설정하는 옵션. 카메라와 패널 개별로 옵션을 설정할 수도 있습니다 + +**Type**: [ALIGN](ALIGN) \| string \| number \| Object + +**Default**: "center" + +|PROPERTY|TYPE|DESCRIPTION| +|:---:|:---:|:---:| +|panel|[ALIGN](ALIGN) \| string \| number|개개의 [Panel](Panel)에 적용할 값| +|camera|[ALIGN](ALIGN) \| string \| number|[Camera](Camera)에 적용할 값| + +**See**: +- [align ( Options )](https://naver.github.io/egjs-flicking/Options#align) +```ts +const possibleOptions = [ + // Literal strings + "prev", "center", "next", + // % values, applied to both panel & camera + "0%", "25%", "42%", + // px values, arithmetic calculation with (+/-) is also allowed. + "0px", "100px", "50% - 25px", + // numbers, same to number + px ("0px", "100px") + 0, 100, 1000, + // Setting a different value for panel & camera + { panel: "10%", camera: "25%" } +]; + +possibleOptions.forEach(align => { + new Flicking("#el", { align }); +}); +``` + +### defaultIndex {#defaultIndex} + +
+ +
+ +Flicking의 [init()](Flicking#init)이 호출될 때 이동할 디폴트 패널의 인덱스로, 0부터 시작하는 정수입니다. + +**Type**: number + +**Default**: 0 + +**See**: +- [defaultIndex ( Options )](https://naver.github.io/egjs-flicking/Options#defaultindex) + +### horizontal {#horizontal} + +
+ +
+ +패널 이동 방향 (true: 가로방향, false: 세로방향) + +**Type**: boolean + +**Default**: true + +**See**: +- [horizontal ( Options )](https://naver.github.io/egjs-flicking/Options#horizontal) + +### circular {#circular} + +
+ +
+ +순환 모드를 활성화합니다. 순환 모드에서는 양 끝의 패널이 서로 연결되어 끊김없는 스크롤이 가능합니다. + +**Type**: boolean + +**Default**: false + +**See**: +- [circular ( Options )](https://naver.github.io/egjs-flicking/Options#circular) + +### circularFallback {#circularFallback} + +
+ +
+ +순환 모드 사용 불가능시 사용할 패널 조작 범위 설정 방식을 변경합니다.
"linear" 사용시 시점이 첫번째 엘리먼트 위에서부터 마지막 엘리먼트 위까지 움직일 수 있도록 설정합니다.
"bound" 사용시 시점이 첫번째 엘리먼트와 마지막 엘리먼트의 끝과 끝 사이에서 움직일 수 있도록 설정합니다. + +**Type**: string + +**Default**: "linear" + +**See**: +- [CIRCULAR_FALLBACK](CIRCULAR_FALLBACK) +- [circularFallback ( Options )](https://naver.github.io/egjs-flicking/Options#circularfallback) + +### bound {#bound} + +
+ +
+ +뷰(카메라 엘리먼트)가 첫번째와 마지막 패널 밖으로 넘어가지 못하게 하여, 첫번째/마지막 패널 전/후의 빈 공간을 보이지 않도록 하는 옵션입니다
`circular=false`인 경우에만 사용할 수 있습니다 + +**Type**: boolean + +**Default**: false + +**See**: +- [bound ( Options )](https://naver.github.io/egjs-flicking/Options#bound) + +### adaptive {#adaptive} + +
+ +
+ +이동한 후 뷰포트 엘리먼트의 크기를 현재 패널의 높이와 동일하게 설정합니다. `horizontal=true`인 경우에만 사용할 수 있습니다. + +**Type**: boolean + +**Default**: false + +**See**: +- [adaptive ( Options )](https://naver.github.io/egjs-flicking/Options#adaptive) + +### panelsPerView {#panelsPerView} + +
+ +
+ +한 화면에 보이는 패널의 개수. 이 옵션을 활성화할 경우 패널의 크기를 강제로 재조정합니다 + +**Type**: number + +**Default**: -1 + +**See**: +- [panelsPerView ( Options )](https://naver.github.io/egjs-flicking/Options#panelsperview) + +### noPanelStyleOverride {#noPanelStyleOverride} + +
+ +
+ +이 옵션을 활성화할 경우, [Flicking#panelsPerView](Flicking#panelsPerView) 옵션이 활성화되었을 때 패널의 `width/height` 스타일을 변경하지 않도록 설정합니다.
모든 패널들의 크기를 직접 관리하고 있을 경우, 이 옵션을 활성화하면 성능면에서 유리할 수 있습니다 + +**Type**: boolean + +**Default**: false + +### resizeOnContentsReady {#resizeOnContentsReady} + +
+ +
+ +이 옵션을 활성화할 경우, Flicking 패널 내부의 이미지/비디오들이 로드되었을 때 자동으로 [Flicking#resize](Flicking#resize)를 호출합니다.
이 동작은 Flicking 내부에 로드 전/후로 크기가 변하는 콘텐츠를 포함하고 있을 때 유용하게 사용하실 수 있습니다. + +**Type**: boolean + +**Default**: false + +**See**: +- [resizeOnContentsReady ( Options )](https://naver.github.io/egjs-flicking/Options#resizeOnContentsReady) + +### nested {#nested} + +
+ +
+ +Flicking 내부에 Flicking이 배치될 때 하위 Flicking에서 이 옵션을 활성화하면 하위 Flicking이 첫/마지막 패널에 도달한 뒤부터 같은 방향으로 상위 Flicking이 움직입니다.
만약 상위 Flicking과 하위 Flicking이 서로 다른 horizontal 옵션을 가지고 있다면 이 옵션을 설정할 필요가 없습니다. + +**Type**: boolean + +**Default**: false + +**See**: +- [nested ( Options )](https://naver.github.io/egjs-flicking/Options#nested) + +### needPanelThreshold {#needPanelThreshold} + +
+ +
+ +`needPanel`이벤트가 발생하기 위한 뷰포트 끝으로부터의 최대 거리 + +**Type**: number + +**Default**: 0 + +**See**: +- [needPanelThreshold ( Options )](https://naver.github.io/egjs-flicking/Options#needpanelthreshold) + +### preventEventsBeforeInit {#preventEventsBeforeInit} + +
+ +
+ +활성화할 경우 초기화시 `ready` 이벤트 이전의 이벤트가 발생하지 않습니다. + +**Type**: boolean + +**Default**: true + +**See**: +- [preventEventsBeforeInit ( Options )](https://naver.github.io/egjs-flicking/Options#preventeventsbeforeinit) + +### deceleration {#deceleration} + +
+ +
+ +사용자의 동작으로 가속도가 적용된 패널 이동 애니메이션의 감속도. 값이 높을수록 애니메이션 실행 시간이 짧아집니다 + +**Type**: number + +**Default**: 0.0075 + +**See**: +- [deceleration ( Options )](https://naver.github.io/egjs-flicking/Options#deceleration) + +### easing {#easing} + +
+ +
+ +패널 이동 애니메이션에 적용할 easing 함수. 기본값은 `easeOutCubic`이다 + +**Type**: function + +**Default**: x => 1 - Math.pow(1 - x, 3) + +**See**: +- 이징 함수 Cheat Sheet [http://easings.net/](http://easings.net/) +- [Easing ( Options )](https://naver.github.io/egjs-flicking/Options#easing) + +### duration {#duration} + +
+ +
+ +디폴트 애니메이션 재생 시간 (ms) + +**Type**: number + +**Default**: 500 + +**See**: +- [duration ( Options )](https://naver.github.io/egjs-flicking/Options#duration) + +### inputType {#inputType} + +
+ +
+ +활성화할 입력 장치 종류 + +**Type**: Array<string> + +**Default**: ["touch", "mouse"] + +**See**: +- [가능한 값들 (PanInputOption#inputType)](https://naver.github.io/egjs-axes/Options#paninput-options) +- [inputType ( Options )](https://naver.github.io/egjs-flicking/Options#inputtype) + +### moveType {#moveType} + +
+ +
+ +사용자 입력에 의한 이동 방식. 이 값에 따라 [Flicking#control](Flicking#control)의 인스턴스 타입이 결정됩니다
상수 [MOVE_TYPE](MOVE_TYPE)에 정의된 값들을 이용할 수 있습니다 + +**Type**: [MOVE_TYPE](MOVE_TYPE) \| Pair.<string, object> + +**Default**: "snap" + +**See**: +- [moveType ( Options )](https://naver.github.io/egjs-flicking/Options#movetype) +|moveType|control|options| +|:---:|:---:|:---:| +|"snap"|[SnapControl](SnapControl)|| +|"freeScroll"|[FreeControl](FreeControl)|[FreeControlOptions](FreeControlOptions)| + +```ts +import Flicking, { MOVE_TYPE } from "@egjs/flicking"; + +const flicking = new Flicking({ + moveType: MOVE_TYPE.SNAP +}); +``` + +```ts +const flicking = new Flicking({ + // If you want more specific settings for the moveType + // [moveType, options for that moveType] + // In this case, it's ["freeScroll", FreeControlOptions] + moveType: [MOVE_TYPE.FREE_SCROLL, { stopAtEdge: true }] +}); +``` + +### threshold {#threshold} + +
+ +
+ +패널 변경을 위한 이동 임계값 (단위: px). 주어진 값 이상으로 스크롤해야만 패널 변경이 가능합니다. + +**Type**: number + +**Default**: 40 + +**See**: +- [Threshold ( Options )](https://naver.github.io/egjs-flicking/Options#threshold) + +### dragThreshold {#dragThreshold} + +
+ +
+ +사용자의 입력을 인식하기 위한 최소한의 거리 (단위: px). 주어진 값 이상으로 스크롤해야만 패널이 움직입니다. + +**Type**: number + +**Default**: 1 + +**See**: +- [dragThreshold ( Options )](https://naver.github.io/egjs-flicking/Options#dragThreshold) + +### interruptable {#interruptable} + +
+ +
+ +사용자의 클릭/터치로 인해 애니메이션을 도중에 멈출 수 있도록 설정합니다. + +**Type**: boolean + +**Default**: true + +**See**: +- [Interruptable ( Options )](https://naver.github.io/egjs-flicking/Options#interruptable) + +### bounce {#bounce} + +
+ +
+ +Flicking이 최대 영역을 넘어서 갈 수 있는 최대 크기. `circular=false`인 경우에만 사용할 수 있습니다.
배열을 통해 prev/next 방향에 대해 서로 다른 바운스 값을 지정할 수 있습니다.
`number`를 통해 px값을, `stirng`을 통해 px 혹은 뷰포트 크기 대비 %값을 사용할 수 있습니다.
이 값을 변경시 [Control#updateInput](Control#updateInput)를 호출해야 합니다. + +**Type**: string \| number \| Array<(string\|number)> + +**Default**: "20%" + +**See**: +- [bounce ( Options )](https://naver.github.io/egjs-flicking/Options#bounce) +```ts +const possibleOptions = [ + // % values, relative to viewport element(".flicking-viewport")'s size + "0%", "25%", "42%", + // px values, arithmetic calculation with (+/-) is also allowed. + "0px", "100px", "50% - 25px", + // numbers, same to number + px ("0px", "100px") + 0, 100, 1000 +]; +``` + +```ts +const flicking = new Flicking("#el", { bounce: "20%" }); + +flicking.bounce = "100%"; +flicking.control.updateInput(); // Call this to update! +``` + +### iOSEdgeSwipeThreshold {#iOSEdgeSwipeThreshold} + +
+ +
+ +iOS Safari에서 swipe를 통한 뒤로가기/앞으로가기를 활성화하는 오른쪽 끝으로부터의 영역의 크기 (px) + +**Type**: number + +**Default**: 30 + +**See**: +- [iOSEdgeSwipeThreshold ( Options )](https://naver.github.io/egjs-flicking/Options#iosedgeswipethreshold) + +### preventClickOnDrag {#preventClickOnDrag} + +
+ +
+ +사용자가 뷰포트 영역을 1픽셀이라도 드래그했을 경우 자동으로 [click](https://developer.mozilla.org/ko/docs/Web/API/Element/click_event) 이벤트를 취소합니다 + +**Type**: boolean + +**Default**: true + +**See**: +- [preventClickOnDrag ( Options )](https://naver.github.io/egjs-flicking/Options#preventclickondrag) + +### preventDefaultOnDrag {#preventDefaultOnDrag} + +
+ +
+ +사용자가 드래그를 시작할 때 [preventDefault](https://developer.mozilla.org/ko/docs/Web/API/Event/preventDefault) 실행 여부 + +**Type**: boolean + +**Default**: false + +**See**: +- [preventDefaultOnDrag ( Options )](https://naver.github.io/egjs-flicking/Options#preventDefaultOnDrag) + +### disableOnInit {#disableOnInit} + +
+ +
+ +Flicking init시에 [disableInput()](Flicking#disableInput)을 바로 호출합니다 + +**Type**: boolean + +**Default**: false + +**See**: +- [disableOnInit ( Options )](https://naver.github.io/egjs-flicking/Options#disableoninit) + +### changeOnHold {#changeOnHold} + +
+ +
+ +애니메이션 도중 마우스/터치 입력시 현재 활성화된 패널의 인덱스를 변경합니다.
`willChange`/`willRestore` 이벤트의 `index`값이 새로운 인덱스로 사용될 것입니다. + +**Type**: boolean + +**Default**: false + +**See**: +- [changeOnHold ( Options )](https://naver.github.io/egjs-flicking/Options#changeonhold) + +### renderOnlyVisible {#renderOnlyVisible} + +
+ +
+ +보이는 패널만 렌더링할지 여부를 설정합니다. 패널이 많을 경우에 퍼포먼스를 크게 향상시킬 수 있습니다 + +**Type**: boolean + +**Default**: false + +**See**: +- [renderOnlyVisible ( Options )](https://naver.github.io/egjs-flicking/Options#renderonlyvisible) + +### virtual {#virtual} + +
+ +
+ +이 옵션을 활성화할 경우 패널 엘리먼트의 개수를 `panelsPerView + 1` 개로 고정함으로써, 메모리 사용량을 줄일 수 있습니다.
`panelsPerView` 옵션과 함께 사용되어야만 합니다.
Flicking 초기화 이후에, 이 프로퍼티는 렌더링하는 패널의 개수를 추가/제거하기 위해 사용될 수 있습니다. + +**Type**: VirtualManager + +|PROPERTY|TYPE|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:| +|renderPanel|function||패널 엘리먼트의 innerHTML을 렌더링하는 함수| +|initialPanelCount|number||최초로 렌더링할 패널의 개수| +|cache|boolean|false|렌더링된 패널의 innerHTML 정보를 캐시할지 여부| +|panelClass|string|"flicking-panel"|렌더링되는 패널 엘리먼트에 적용될 클래스 이름| + +**See**: +- [virtual ( Options )](https://naver.github.io/egjs-flicking/Options#virtual) +```ts +import Flicking, { VirtualPanel } from "@egjs/flicking"; + +const flicking = new Flicking("#some_el", { + panelsPerView: 3, + virtual: { + renderPanel: (panel: VirtualPanel, index: number) => `Panel ${index}`, + initialPanelCount: 100 + } +}); + +// Add 100 virtual panels (at the end) +flicking.virtual.append(100); + +// Remove 100 virtual panels from 0 to 100 +flicking.virtual.remove(0, 100); +``` + +### autoInit {#autoInit} + +
+ readonly +
+ +Flicking 인스턴스를 생성할 때 자동으로 [init()](Flicking#init)를 호출합니다 + +**Type**: boolean + +**Default**: true + +**See**: +- [autoInit ( Options )](https://naver.github.io/egjs-flicking/Options#autoinit) + +### autoResize {#autoResize} + +
+ +
+ +뷰포트 엘리먼트(.flicking-viewport)의 크기 변경시 [resize()](Flicking#resize) 메소드를 자동으로 호출할지 여부를 설정합니다 + +**Type**: boolean + +**Default**: true + +### useResizeObserver {#useResizeObserver} + +
+ +
+ +autoResize 옵션 사용시 [ResizeObserver](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver)의 이벤트를 Window객체의 [resize](https://developer.mozilla.org/ko/docs/Web/API/Window/resize_event) 이벤트 대신 수신할지 여부를 설정합니다 + +**Type**: boolean + +**Default**: true + +**See**: +- [useResizeObserver ( Options )](https://naver.github.io/egjs-flicking/Options#useresizeobserver) + +### resizeDebounce {#resizeDebounce} + +
+ +
+ +`autoResize` 설정시에 호출되는 크기 재계산을 주어진 시간(단위: ms)만큼 지연시킵니다.
지연시키는 도중 크기가 다시 변경되었을 경우, 이전 것을 취소하고 주어진 시간만큼 다시 지연시킵니다.
이를 통해 `resize`가 너무 많이 호출되는 것을 방지하여 성능을 향상시킬 수 있습니다. + +**Type**: number + +**Default**: 0 + +**See**: +- [resizeDebounce ( Options )](https://naver.github.io/egjs-flicking/Options#resizedebounce) + +### maxResizeDebounce {#maxResizeDebounce} + +
+ +
+ +`resizeDebounce` 사용시에 크기 재계산이 지연되는 최대 시간을 지정합니다. (단위: ms)
이를 통해, 적어도 (n)ms에 한번은 크기 재계산을 수행하는 것을 보장할 수 있습니다. + +**Type**: number + +**Default**: 100 + +**See**: +- [maxResizeDebounce ( Options )](https://naver.github.io/egjs-flicking/Options#maxresizedebounce) + +### useFractionalSize {#useFractionalSize} + +
+ +
+ +이 옵션을 활성화할 경우, Flicking은 내부의 모든 크기를 [getBoundingClientRect](https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect)를 이용하여 계산합니다.
이를 통해, 패널 크기에 소수점을 포함할 경우에 발생할 수 있는 일부 1px 오프셋 이슈를 해결 가능합니다.
모든 크기는 CSS [transform](https://developer.mozilla.org/en-US/docs/Web/CSS/transform)이 엘리먼트에 적용되기 이전의 크기를 사용할 것입니다. + +**Type**: boolean + +**Default**: false + +**See**: +- [useFractionalSize ( Options )](https://naver.github.io/egjs-flicking/Options#usefractionalsize) + +### externalRenderer {#externalRenderer} + +
+ readonly +
+ +프레임워크(React, Vue, Angular, ...)에서만 사용하는 옵션으로, 자동으로 설정되므로 따로 사용하실 필요 없습니다! + +**Default**: null + +### renderExternal {#renderExternal} + +
+ readonly +
+ +프레임워크(React, Vue, Angular, ...)에서만 사용하는 옵션으로, 자동으로 설정되므로 따로 사용하실 필요 없습니다! + +**Default**: null + +## Methods + +### init {#init} + +
+ +
+ +Flicking을 초기화하고, 디폴트 인덱스로 이동합니다
이 메소드는 `autoInit` 옵션이 true(default)일 경우 Flicking이 생성될 때 자동으로 호출됩니다 + +**Returns**: Promise<void> + +**Emits**: [Flicking#event:ready](Flicking#event-ready) + +### destroy {#destroy} + +
+ +
+ +Flicking과 하위 컴포넌트들을 초기 상태로 되돌리고, 부착된 모든 이벤트 핸들러를 제거합니다 + +**Returns**: void + +### prev {#prev} + +
+ async +
+ +이전 패널로 이동합니다 (현재 인덱스 - 1) + +**Returns**: Promise<void> +- 이전 패널 도달시에 resolve되는 Promise + +**Emits**: [Flicking#event:moveStart](Flicking#event-moveStart), [Flicking#event:move](Flicking#event-move), [Flicking#event:moveEnd](Flicking#event-moveEnd), [Flicking#event:willChange](Flicking#event-willChange), [Flicking#event:changed](Flicking#event-changed), [Flicking#event:willRestore](Flicking#event-willRestore), [Flicking#event:restored](Flicking#event-restored), [Flicking#event:needPanel](Flicking#event-needPanel), [Flicking#event:visibleChange](Flicking#event-visibleChange), [Flicking#event:reachEdge](Flicking#event-reachEdge) + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|duration|number|✔️|[options.duration](Flicking#duration)|패널 이동 애니메이션 진행 시간 (단위: ms)| + +**Throws**: [FlickingError](FlickingError) + +

|code|condition|
|---|---|
|[INDEX_OUT_OF_RANGE](ERROR_CODE)|이전 패널이 존재하지 않을 경우|
|[ANIMATION_ALREADY_PLAYING](ERROR_CODE)|애니메이션이 이미 진행중인 경우|
|[ANIMATION_INTERRUPTED](ERROR_CODE)|사용자 입력에 의해 애니메이션이 중단된 경우|
|[STOP_CALLED_BY_USER](ERROR_CODE)|발생된 이벤트들 중 하나라도 `stop()`이 호출된 경우|
+ +### next {#next} + +
+ async +
+ +다음 패널로 이동합니다 (현재 인덱스 + 1) + +**Returns**: Promise<void> +- 다음 패널 도달시에 resolve되는 Promise + +**Emits**: [Flicking#event:moveStart](Flicking#event-moveStart), [Flicking#event:move](Flicking#event-move), [Flicking#event:moveEnd](Flicking#event-moveEnd), [Flicking#event:willChange](Flicking#event-willChange), [Flicking#event:changed](Flicking#event-changed), [Flicking#event:willRestore](Flicking#event-willRestore), [Flicking#event:restored](Flicking#event-restored), [Flicking#event:needPanel](Flicking#event-needPanel), [Flicking#event:visibleChange](Flicking#event-visibleChange), [Flicking#event:reachEdge](Flicking#event-reachEdge) + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|duration|number|✔️|[options.duration](Flicking#duration)|패널 이동 애니메이션 진행 시간 (단위: ms)| + +**Throws**: [FlickingError](FlickingError) + +

|code|condition|
|---|---|
|[INDEX_OUT_OF_RANGE](ERROR_CODE)|다음 패널이 존재하지 않을 경우|
|[ANIMATION_ALREADY_PLAYING](ERROR_CODE)|애니메이션이 이미 진행중인 경우|
|[ANIMATION_INTERRUPTED](ERROR_CODE)|사용자 입력에 의해 애니메이션이 중단된 경우|
|[STOP_CALLED_BY_USER](ERROR_CODE)|발생된 이벤트들 중 하나라도 `stop()`이 호출된 경우|

+ +### moveTo {#moveTo} + +
+ async +
+ +주어진 인덱스에 해당하는 패널로 이동합니다 + +**Returns**: Promise<void> +- 해당 패널 도달시에 resolve되는 Promise + +**Emits**: [Flicking#event:moveStart](Flicking#event-moveStart), [Flicking#event:move](Flicking#event-move), [Flicking#event:moveEnd](Flicking#event-moveEnd), [Flicking#event:willChange](Flicking#event-willChange), [Flicking#event:changed](Flicking#event-changed), [Flicking#event:willRestore](Flicking#event-willRestore), [Flicking#event:restored](Flicking#event-restored), [Flicking#event:needPanel](Flicking#event-needPanel), [Flicking#event:visibleChange](Flicking#event-visibleChange), [Flicking#event:reachEdge](Flicking#event-reachEdge) + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|index|number|||이동할 패널의 인덱스| +|duration|number|✔️|[options.duration](Flicking#duration)|애니메이션 진행 시간 (단위: ms)| +|direction|[DIRECTION](DIRECTION)|✔️|DIRECTION.NONE|이동할 방향. [circular](Flicking#circular) 옵션 활성화시에만 사용 가능합니다| + +**Throws**: [FlickingError](FlickingError) + +

|code|condition|
|---|---|
|[INDEX_OUT_OF_RANGE](ERROR_CODE)|해당 인덱스를 가진 패널이 존재하지 않을 경우|
|[ANIMATION_ALREADY_PLAYING](ERROR_CODE)|애니메이션이 이미 진행중인 경우|
|[ANIMATION_INTERRUPTED](ERROR_CODE)|사용자 입력에 의해 애니메이션이 중단된 경우|
|[STOP_CALLED_BY_USER](ERROR_CODE)|발생된 이벤트들 중 하나라도 `stop()`이 호출된 경우|

+ +### updateAnimation {#updateAnimation} + +
+ +
+ +재생 중인 애니메이션의 목적지와 재생 시간을 변경합니다 + +**Returns**: void + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|index|number|||이동할 패널의 인덱스| +|duration|number|✔️||애니메이션 진행 시간 (단위: ms)| +|direction|[DIRECTION](DIRECTION)|✔️||이동할 방향. [circular](Flicking#circular) 옵션 활성화시에만 사용 가능합니다| + +**Throws**: [FlickingError](FlickingError) + +[INDEX_OUT_OF_RANGE](ERROR_CODE) 해당 인덱스를 가진 패널이 존재하지 않을 경우 + +### stopAnimation {#stopAnimation} + +
+ +
+ +재생 중인 애니메이션을 중단시킵니다 + +**Returns**: void + +**Emits**: [Flicking#event:moveEnd](Flicking#event-moveEnd) + +### getPanel {#getPanel} + +
+ +
+ +주어진 인덱스에 해당하는 [Panel](Panel)을 반환합니다. 주어진 인덱스에 해당하는 패널이 존재하지 않을 경우 `null`을 반환합니다. + +**Returns**: [Panel](Panel) \| null +- 주어진 인덱스에 해당하는 패널 + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|index|number|||| + +**See**: +- [Panel](Panel) +```ts +const panel = flicking.getPanel(0); +// Which is a shorthand to... +const samePanel = flicking.panels[0]; +``` + +### enableInput {#enableInput} + +
+ +
+ +사용자의 입력(마우스/터치)를 활성화합니다 + +**Returns**: this + +### disableInput {#disableInput} + +
+ +
+ +사용자의 입력(마우스/터치)를 막습니다 + +**Returns**: this + +### getStatus {#getStatus} + +
+ +
+ +현재 상태를 반환합니다. 반환받은 값을 [setStatus()](Flicking#setStatus) 메소드의 인자로 지정하면 현재 상태를 복원할 수 있습니다 + +**Returns**: [Status](Status) +- 현재 상태값 정보를 가진 객체. + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|options|object|✔️|{}|Status 반환 옵션| +|options.index|boolean|✔️|true|현재 패널 인덱스를 반환값에 포함시킵니다. [setStatus](Flicking#setStatus) 호출시 자동으로 해당 인덱스로 카메라를 움직입니다| +|options.position|boolean|✔️|true|카메라의 현재 위치를 반환값에 포함시킵니다. 이 옵션은 [moveType](Flicking#moveType)이 `freeScroll`일 경우에만 동작합니다| +|options.includePanelHTML|boolean|✔️|false|패널의 `outerHTML`을 반환값에 포함시킵니다| +|options.visiblePanelsOnly|boolean|✔️|false|현재 보이는 패널([visiblePanel](Flicking#visiblePanel))의 HTML만 반환합니다. `includePanelHTML`이 `true`일 경우에만 동작합니다.| + +### setStatus {#setStatus} + +
+ +
+ +주어진 [Status](Status)의 상태로 복원합니다 + +**Returns**: void + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|status|Partial<[Status](Status)>|||복원할 상태 값. [getStatus()](Flicking#getStatus) 메서드의 반환값을 지정하면 됩니다| + +### addPlugins {#addPlugins} + +
+ +
+ +플리킹에 다양한 효과를 부여할 수 있는 플러그인을 추가합니다 + +**Returns**: this + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|plugins|[Plugin](Plugin)|||추가할 플러그인(들)| + +**See**: +- https://github.com/naver/egjs-flicking-plugins + +### removePlugins {#removePlugins} + +
+ +
+ +플리킹으로부터 플러그인들을 제거합니다. + +**Returns**: this + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|plugin|[Plugin](Plugin)|||제거 플러그인(들).| + +**See**: +- https://github.com/naver/egjs-flicking-plugins + +### resize {#resize} + +
+ async +
+ +패널 및 뷰포트의 크기를 갱신합니다 + +**Returns**: this + +**Emits**: [Flicking#event:beforeResize](Flicking#event-beforeResize), [Flicking#event:afterResize](Flicking#event-afterResize) + +### append {#append} + +
+ +
+ +패널 목록의 제일 끝에 새로운 패널들을 추가합니다 + +**Returns**: Array<[Panel](Panel)> +- 추가된 패널들의 배열 + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|element|[ElementLike](ElementLike) \| Array<[ElementLike](ElementLike)>|||새로운 HTMLElement, 혹은 엘리먼트의 outerHTML, 혹은 그것들의 배열| + +**Throws**: [FlickingError](FlickingError) + +[ERROR_CODE.NOT_ALLOWED_IN_FRAMEWORK](ERROR_CODE) if called on frameworks (React, Angular, Vue...) +**See**: +- [Panel](Panel) +- [ElementLike](ElementLike) +```ts +const flicking = new Flicking("#flick"); +// These are possible parameters +flicking.append(document.createElement("div")); +flicking.append("\Panel\"); +flicking.append(["\Panel\", document.createElement("div")]); +// Even this is possible +flicking.append("\Panel 1\\Panel 2\"); +``` + +### prepend {#prepend} + +
+ +
+ +패널 목록의 제일 앞(index 0)에 새로운 패널들을 추가합니다
추가한 패널의 개수만큼 기존 패널들의 인덱스가 증가합니다. + +**Returns**: Array<[Panel](Panel)> +- 추가된 패널들의 배열 + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|element|[ElementLike](ElementLike) \| Array<[ElementLike](ElementLike)>|||새로운 HTMLElement, 혹은 엘리먼트의 outerHTML, 혹은 그것들의 배열| + +**Throws**: [FlickingError](FlickingError) + +[ERROR_CODE.NOT_ALLOWED_IN_FRAMEWORK](ERROR_CODE) if called on frameworks (React, Angular, Vue...) +**See**: +- [Panel](Panel) +- [ElementLike](ElementLike) +```ts +const flicking = new eg.Flicking("#flick"); +flicking.prepend(document.createElement("div")); +flicking.prepend("\Panel\"); +flicking.prepend(["\Panel\", document.createElement("div")]); +// Even this is possible +flicking.prepend("\Panel 1\\Panel 2\"); +``` + +### insert {#insert} + +
+ +
+ +주어진 인덱스에 새로운 패널들을 추가합니다
해당 인덱스보다 같거나 큰 인덱스를 가진 기존 패널들은 추가한 패널의 개수만큼 인덱스가 증가합니다. + +**Returns**: Array<[Panel](Panel)> +- 추가된 패널들의 배열 + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|index|number|||새로 패널들을 추가할 인덱스| +|element|[ElementLike](ElementLike) \| Array<[ElementLike](ElementLike)>|||새로운 HTMLElement, 혹은 엘리먼트의 outerHTML, 혹은 그것들의 배열| + +**Throws**: [FlickingError](FlickingError) + +[ERROR_CODE.NOT_ALLOWED_IN_FRAMEWORK](ERROR_CODE) if called on frameworks (React, Angular, Vue...) + +```ts +const flicking = new eg.Flicking("#flick"); +flicking.insert(0, document.createElement("div")); +flicking.insert(2, "\Panel\"); +flicking.insert(1, ["\Panel\", document.createElement("div")]); +// Even this is possible +flicking.insert(3, "\Panel 1\\Panel 2\"); +``` + +### remove {#remove} + +
+ +
+ +주어진 인덱스의 패널을 제거합니다
해당 인덱스보다 큰 인덱스를 가진 기존 패널들은 제거한 패널의 개수만큼 인덱스가 감소합니다 + +**Returns**: Array<[Panel](Panel)> +- 제거된 패널들의 배열 + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|index|number|||제거할 패널의 인덱스| +|deleteCount|number|✔️|1|`index` 이후로 제거할 패널의 개수| + +## Events +### ready {#event-ready} + +
+ +
+ +Flicking의 [init()](Flicking#init)이 호출되었을 때 발생하는 이벤트 + +**Type**: object + +|PROPERTY|TYPE|DESCRIPTION| +|:---:|:---:|:---:| +|currentTarget|[Flicking](Flicking)|이 이벤트를 트리거한 Flicking의 인스턴스| +|eventType|string|이벤트명| + +### beforeResize {#event-beforeResize} + +
+ +
+ +Flicking의 [resize())](Flicking#resize)이 호출되었을 때 발생하는 이벤트로, 패널 및 뷰포트의 크기를 업데이트하기 전에 발생합니다.
이 이벤트 단계에서 패널 및 뷰포트의 크기를 업데이트할 경우, 해당 크기가 최종적으로 반영됩니다. + +**Type**: object + +|PROPERTY|TYPE|DESCRIPTION| +|:---:|:---:|:---:| +|currentTarget|[Flicking](Flicking)|이 이벤트를 트리거한 Flicking의 인스턴스| +|eventType|string|이벤트명| +|width|number|기존 뷰포트 너비| +|height|number|기존 뷰포트 높이| +|element|HTMLElement|뷰포트 엘리먼트| + +### afterResize {#event-afterResize} + +
+ +
+ +Flicking의 [resize())](Flicking#resize)이 호출되었을 때 발생하는 이벤트로, 패널 및 뷰포트의 크기를 업데이트한 이후에 발생합니다. + +**Type**: object + +|PROPERTY|TYPE|DESCRIPTION| +|:---:|:---:|:---:| +|currentTarget|[Flicking](Flicking)|이 이벤트를 트리거한 Flicking의 인스턴스| +|eventType|string|이벤트명| +|width|number|업데이트된 뷰포트 너비| +|height|number|업데이트된 뷰포트 높이| +|prev|object|기존 뷰포트 크기| +|prev.width|number|기존 뷰포트 너비| +|prev.height|number|기존 뷰포트 높이| +|sizeChanged|boolean|뷰포트 너비/크기가 변경되었는지 여부를 나타내는 값| +|element|HTMLElement|뷰포트 엘리먼트| + +### holdStart {#event-holdStart} + +
+ +
+ +사용자가 드래그를 시작했을 때 발생하는 이벤트 + +**Type**: object + +|PROPERTY|TYPE|DESCRIPTION| +|:---:|:---:|:---:| +|currentTarget|[Flicking](Flicking)|이 이벤트를 트리거한 Flicking의 인스턴스| +|eventType|string|이벤트명| +|stop|function|이벤트 동작을 멈추고, 사용자가 드래그하지 못하도록 막습니다.| +|axesEvent|object|[Axes](https://naver.github.io/egjs-axes/)의 [hold](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:hold) 이벤트| + +### holdEnd {#event-holdEnd} + +
+ +
+ +사용자가 드래그를 끝냈을 때 발생하는 이벤트 + +**Type**: object + +|PROPERTY|TYPE|DESCRIPTION| +|:---:|:---:|:---:| +|currentTarget|[Flicking](Flicking)|이 이벤트를 트리거한 Flicking의 인스턴스| +|eventType|string|이벤트명| +|axesEvent|object|[Axes](https://naver.github.io/egjs-axes/)의 [release](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:release) 이벤트| + +### moveStart {#event-moveStart} + +
+ +
+ +첫 번째 [move](Flicking#event-move) 이벤트 직전에 단 한번 발생하는 이벤트 + +**Type**: object + +|PROPERTY|TYPE|DESCRIPTION| +|:---:|:---:|:---:| +|currentTarget|[Flicking](Flicking)|이 이벤트를 트리거한 Flicking의 인스턴스| +|eventType|string|이벤트명| +|stop|function|이벤트 동작을 멈추고, 사용자가 드래그하지 못하도록 막습니다.| +|isTrusted|boolean|이벤트가 사용자 입력에 의하여 발생되었는지를 나타내는 값| +|holding|boolean|사용자가 현재 viewport 엘리먼트를 드래그하고있는지를 나타내는 값| +|direction|[DIRECTION](DIRECTION)|이전 카메라 위치 대비 이동 방향| +|axesEvent|object|[Axes](https://naver.github.io/egjs-axes/)의 [change](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:change) 이벤트| + +### move {#event-move} + +
+ +
+ +이동시마다 발생하는 이벤트 + +**Type**: object + +|PROPERTY|TYPE|DESCRIPTION| +|:---:|:---:|:---:| +|currentTarget|[Flicking](Flicking)|이 이벤트를 트리거한 Flicking의 인스턴스| +|eventType|string|이벤트명| +|stop|function|이벤트 동작을 멈추고, 사용자가 드래그하지 못하도록 막습니다.| +|isTrusted|boolean|이벤트가 사용자 입력에 의하여 발생되었는지를 나타내는 값| +|holding|boolean|사용자가 현재 viewport 엘리먼트를 드래그하고있는지를 나타내는 값| +|direction|[DIRECTION](DIRECTION)|이전 카메라 위치 대비 이동 방향| +|axesEvent|object|[Axes](https://naver.github.io/egjs-axes/)의 [change](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:change) 이벤트| + +### moveEnd {#event-moveEnd} + +
+ +
+ +사용자 입력 중단/애니메이션 종료 등 이동이 끝났을 때 발생하는 이벤트 + +**Type**: object + +|PROPERTY|TYPE|DESCRIPTION| +|:---:|:---:|:---:| +|currentTarget|[Flicking](Flicking)|이 이벤트를 트리거한 Flicking의 인스턴스| +|eventType|string|이벤트명| +|isTrusted|boolean|이벤트가 사용자 입력에 의하여 발생되었는지를 나타내는 값| +|holding|boolean|사용자가 현재 viewport 엘리먼트를 드래그하고있는지를 나타내는 값| +|direction|[DIRECTION](DIRECTION)|이전 카메라 위치 대비 이동 방향| +|axesEvent|object|[Axes](https://naver.github.io/egjs-axes/)의 [finish](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:finish) 이벤트| + +### willChange {#event-willChange} + +
+ +
+ +Flicking의 인덱스가 변경될 것임을 나타내는 이벤트. 실제 인덱스는 [changed](Flicking#event-changed) 이벤트에서 변경된다.
사용자가 입력을 마쳤을 때, 혹은 메소드를 통해 이동을 시작했을 때 발생한다.
이벤트의 stop()을 호출시 인덱스 변경 및 패널로의 이동을 막는다. + +**Type**: object + +|PROPERTY|TYPE|DESCRIPTION| +|:---:|:---:|:---:| +|currentTarget|[Flicking](Flicking)|이 이벤트를 트리거한 Flicking의 인스턴스| +|eventType|string|이벤트명| +|stop|function|이벤트 동작을 멈추고, 사용자가 드래그하지 못하도록 막습니다.| +|index|number|변경할 인덱스| +|panel|[Panel](Panel)|인덱스 변경 이후 활성화된 패널로 설정할 패널| +|isTrusted|boolean|이벤트가 사용자 입력에 의하여 발생되었는지를 나타내는 값| +|direction|[DIRECTION](DIRECTION)|현재 활성화된 패널로부터 이동하고자 하는 패널의 방향| + +### changed {#event-changed} + +
+ +
+ +Event that fires when Flicking's index is changed. + +**Type**: object + +|PROPERTY|TYPE|DESCRIPTION| +|:---:|:---:|:---:| +|currentTarget|[Flicking](Flicking)|이 이벤트를 트리거한 Flicking의 인스턴스| +|eventType|string|이벤트명| +|index|number|새 인덱스| +|panel|[Panel](Panel)|새로 선택된 패널| +|prevIndex|number|이전 인덱스| +|prevPanel|[Panel](Panel) \| null|이전 패널| +|isTrusted|boolean|이벤트가 사용자 입력에 의하여 발생되었는지를 나타내는 값| +|direction|[DIRECTION](DIRECTION)|현재 활성화된 패널로부터 이동하고자 하는 패널의 방향| + +### willRestore {#event-willRestore} + +
+ +
+ +사용자가 드래그하여 이동한 거리가 [threshold](Flicking#threshold)에 도달하지 못해, 기존 [currentPanel](Flicking#currentPanel)로 돌아갈 것임을 나타내는 이벤트 + +**Type**: object + +|PROPERTY|TYPE|DESCRIPTION| +|:---:|:---:|:---:| +|currentTarget|[Flicking](Flicking)|이 이벤트를 트리거한 Flicking의 인스턴스| +|eventType|string|이벤트명| +|stop|function|이벤트 동작을 멈추고, 사용자가 드래그하지 못하도록 막습니다| +|index|number|복귀하고자 하는 패널의 인덱스| +|panel|[Panel](Panel)|복귀하고자 하는 패널| +|isTrusted|boolean|이벤트가 사용자 입력에 의하여 발생되었는지를 나타내는 값| +|direction|[DIRECTION](DIRECTION)|이전 카메라 위치 대비 이동 방향| + +### restored {#event-restored} + +
+ +
+ +Flicking이 [currentPanel](Flicking#currentPanel)의 위치로 다시 돌아왔을 때 발생하는 이벤트 + +**Type**: object + +|PROPERTY|TYPE|DESCRIPTION| +|:---:|:---:|:---:| +|currentTarget|[Flicking](Flicking)|이 이벤트를 트리거한 Flicking의 인스턴스| +|eventType|string|이벤트명| +|isTrusted|boolean|이벤트가 사용자 입력에 의하여 발생되었는지를 나타내는 값| + +### select {#event-select} + +
+ +
+ +패널이 정적으로 클릭(혹은 터치)되었을 때 발생하는 이벤트 + +**Type**: object + +|PROPERTY|TYPE|DESCRIPTION| +|:---:|:---:|:---:| +|currentTarget|[Flicking](Flicking)|이 이벤트를 트리거한 Flicking의 인스턴스| +|eventType|string|이벤트명| +|index|number|선택된 패널의 인덱스| +|panel|[Panel](Panel)|선택된 패널| +|direction|[DIRECTION](DIRECTION)|현재 카메라 위치 대비 선택된 패널의 위치| + +### needPanel {#event-needPanel} + +
+ +
+ +빈 패널 영역이 뷰포트 끝에 도달했을 때 발생하는 이벤트
[needPanelThreshold](Flicking#needPanelThreshold)를 이용해서 이벤트가 발생하는 지점을 조절할 수 있습니다 + +**Type**: object + +|PROPERTY|TYPE|DESCRIPTION| +|:---:|:---:|:---:| +|currentTarget|[Flicking](Flicking)|이 이벤트를 트리거한 Flicking의 인스턴스| +|eventType|string|이벤트명| +|direction|[DIRECTION](DIRECTION)|패널이 필요한 방향. `DIRECTION.PREV`의 경우 패널이 [prepend](Flicking#prepend)되어야 함을 의미하고, `DIRECTION.NEXT`는 패널이 [append](Flicking#append)되어야 함을 의미한다| + +### visibleChange {#event-visibleChange} + +
+ +
+ +현재 뷰포트 내에서 보이는 패널이 변경되었을 때 발생되는 이벤트 + +**Type**: object + +|PROPERTY|TYPE|DESCRIPTION| +|:---:|:---:|:---:| +|currentTarget|[Flicking](Flicking)|이 이벤트를 트리거한 Flicking의 인스턴스| +|eventType|string|이벤트명| +|added|Array<[Panel](Panel)>|새로 보이는 패널의 배열| +|removed|Array<[Panel](Panel)>|보이지 않게 된 패널의 배열| +|visiblePanels|Array<[Panel](Panel)>|현재 보이는 패널의 배열| + +### reachEdge {#event-reachEdge} + +
+ +
+ +카메라가 이동 가능한 영역의 끝에 도달했을 때 발생하는 이벤트 + +**Type**: object + +|PROPERTY|TYPE|DESCRIPTION| +|:---:|:---:|:---:| +|currentTarget|[Flicking](Flicking)|이 이벤트를 트리거한 Flicking의 인스턴스| +|eventType|string|이벤트명| +|direction|[DIRECTION](DIRECTION)|카메라의 위치가 이동 가능한 범위의 최대점([DIRECTION.NEXT](DIRECTION)) 혹은 최소점([DIRECTION.PREV](DIRECTION))에 도달했는지를 나타내는 값| + +### panelChange {#event-panelChange} + +
+ +
+ +패널 추가/제거시에 발생하는 이벤트 + +**Type**: object + +|PROPERTY|TYPE|DESCRIPTION| +|:---:|:---:|:---:| +|currentTarget|[Flicking](Flicking)|이 이벤트를 트리거한 Flicking의 인스턴스| +|eventType|string|이벤트명| +|added|Array<[Panel](Panel)>|새로 추가된 패널의 배열| +|removed|Array<[Panel](Panel)>|제거된 패널의 배열| + diff --git a/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/FlickingError.mdx b/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/FlickingError.mdx new file mode 100644 index 0000000000..1d7767674e --- /dev/null +++ b/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/FlickingError.mdx @@ -0,0 +1,47 @@ +--- +custom_edit_url: null +--- + +```ts +class FlickingError extends Error +``` + +
+ +
+ +Flicking 내부에서 알려진 오류 발생시 throw되는 에러 + +|PROPERTY|TYPE|DESCRIPTION| +|:---:|:---:|:---:| +|code|number|에러 코드| +|message|string|에러 메시지| + +**See**: +- [ERROR_CODE](ERROR_CODE) + +## constructor +```ts +new FlickingError(message, code) +``` + +
+ +
+ +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|message|string|||에러 메시지| +|code|number|||에러 코드| + +```ts +import Flicking, { FlickingError, ERROR_CODES } from "@egjs/flicking"; +try { + const flicking = new Flicking(".flicking-viewport") +} catch (e) { + if (e instanceof FlickingError && e.code === ERROR_CODES.ELEMENT_NOT_FOUND) { + console.error("Element not found") + } +} +``` + diff --git a/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/FlickingEvents.mdx b/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/FlickingEvents.mdx new file mode 100644 index 0000000000..73a1540df7 --- /dev/null +++ b/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/FlickingEvents.mdx @@ -0,0 +1,12 @@ +--- +custom_edit_url: null +--- + +```ts +interface FlickingEvents +``` + +
+ +
+ diff --git a/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/FlickingOptions.mdx b/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/FlickingOptions.mdx new file mode 100644 index 0000000000..8c1776b5cf --- /dev/null +++ b/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/FlickingOptions.mdx @@ -0,0 +1,12 @@ +--- +custom_edit_url: null +--- + +```ts +interface FlickingOptions +``` + +
+ +
+ diff --git a/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/FreeControl.mdx b/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/FreeControl.mdx new file mode 100644 index 0000000000..4aa7c2ff7e --- /dev/null +++ b/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/FreeControl.mdx @@ -0,0 +1,298 @@ +--- +custom_edit_url: null +--- + +```ts +class FreeControl extends Control +``` + +
+ +
+ +패널이 정해진 지점에 정렬되지 않고, 자유롭게 스크롤할 수 있는 이동 방식을 사용하는 [Control](Control) + +
+
Properties
Methods
+
stopAtEdge
controller
activeIndex
activePanel
animating
holding
updatePosition
moveToPosition
init
destroy
enable
disable
release
updateAnimation
stopAnimation
updateInput
resetActive
moveToPanel
setActive
copy
+
+ +## constructor +```ts +new FreeControl() +``` + +
+ +
+ +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +||Partial<[FreeControlOptions](FreeControlOptions)>|✔️|{}|| + +## Properties + +### stopAtEdge {#stopAtEdge} + +
+ +
+ +스크롤 애니메이션을 스크롤 영역의 시작과 끝부분에서 멈추도록 하여, 바운스 영역을 넘어가지 않도록 합니다 + +**Type**: boolean + +**Default**: true + +### controller {#controller} + +
+ readonly + inherited +
+ +[@egjs/axes](https://naver.github.io/egjs-axes/)의 이벤트를 처리하는 컨트롤러 컴포넌트 + +**Type**: [AxesController](AxesController) + +### activeIndex {#activeIndex} + +
+ readonly + inherited +
+ +[currentPanel](Flicking#currentPanel)의 인덱스 번호 + +**Type**: number + +**Default**: 0 + +### activePanel {#activePanel} + +
+ readonly + inherited +
+ +현재 선택된 패널 + +**Type**: [Panel](Panel) \| null + +### animating {#animating} + +
+ readonly + inherited +
+ +현재 애니메이션 동작 여부 + +**Type**: boolean + +### holding {#holding} + +
+ readonly + inherited +
+ +현재 사용자가 클릭/터치중인지 여부 + +**Type**: boolean + +## Methods + +### updatePosition {#updatePosition} + +
+ +
+ +resize 이후에 position을 업데이트합니다 + +**Returns**: Promise<void> + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|progressInPanel|number|||Resize 이전 현재 선택된 패널 내에서의 카메라 progress 값| + +**Throws**: [FlickingError](FlickingError) + +[NOT_ATTACHED_TO_FLICKING](ERROR_CODE) [init](Camera#init)이 이전에 호출되지 않은 경우 + +### moveToPosition {#moveToPosition} + +
+ +
+ +[Camera](Camera)를 주어진 좌표로 이동합니다 + +**Returns**: Promise<void> +- 해당 좌표 도달시에 resolve되는 Promise + +**Emits**: [Flicking#event:moveStart](Flicking#event-moveStart), [Flicking#event:move](Flicking#event-move), [Flicking#event:moveEnd](Flicking#event-moveEnd), [Flicking#event:willChange](Flicking#event-willChange), [Flicking#event:changed](Flicking#event-changed), [Flicking#event:willRestore](Flicking#event-willRestore), [Flicking#event:restored](Flicking#event-restored), [Flicking#event:needPanel](Flicking#event-needPanel), [Flicking#event:visibleChange](Flicking#event-visibleChange), [Flicking#event:reachEdge](Flicking#event-reachEdge) + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|position|number|||이동할 좌표| +|duration|number|||패널 이동 애니메이션 진행 시간 (단위: ms)| +|axesEvent|object|✔️||[Axes](https://naver.github.io/egjs-axes/)의 [release](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:release) 이벤트| + +**Throws**: [FlickingError](FlickingError) + +

|code|condition|
|---|---|
|[POSITION_NOT_REACHABLE](ERROR_CODE)|주어진 패널이 제거되었거나, Camera의 [range](Camera#range) 밖에 있을 경우|
|[NOT_ATTACHED_TO_FLICKING](ERROR_CODE)|[init](Control#init)이 이전에 호출되지 않은 경우|
|[ANIMATION_INTERRUPTED](ERROR_CODE)|사용자 입력에 의해 애니메이션이 중단된 경우|
|[STOP_CALLED_BY_USER](ERROR_CODE)|발생된 이벤트들 중 하나라도 `stop()`이 호출된 경우|

+ +### init {#init} + +
+ inherited +
+ +Control을 초기화합니다 + +**Returns**: this + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|flicking|[Flicking](Flicking)|||Flicking의 인스턴스| + +### destroy {#destroy} + +
+ inherited +
+ +Control을 초기 상태로 되돌립니다 + +**Returns**: void + +### enable {#enable} + +
+ inherited +
+ +사용자의 입력(마우스/터치)를 활성화합니다 + +**Returns**: this + +### disable {#disable} + +
+ inherited +
+ +사용자의 입력(마우스/터치)를 막습니다 + +**Returns**: this + +### release {#release} + +
+ inherited +
+ +사용자의 현재 입력(마우스/터치)를 중단시킵니다 + +**Returns**: this + +### updateAnimation {#updateAnimation} + +
+ inherited +
+ +재생 중인 애니메이션의 목적지와 재생 시간을 변경합니다 + +**Returns**: this + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|panel|[Panel](Panel)|||이동할 패널| +|duration|number|✔️||애니메이션 진행 시간 (단위: ms)| +|direction|[DIRECTION](DIRECTION)|✔️||이동할 방향. [circular](Flicking#circular) 옵션 활성화시에만 사용 가능합니다| + +**Throws**: [FlickingError](FlickingError) + +[POSITION_NOT_REACHABLE](ERROR_CODE) 주어진 패널이 제거되었거나, Camera의 [range](Camera#range) 밖에 있을 경우 + +### stopAnimation {#stopAnimation} + +
+ inherited +
+ +재생 중인 애니메이션을 중단시킵니다 + +**Returns**: this + +### updateInput {#updateInput} + +
+ inherited +
+ +[controller](Control#controller)의 내부 상태를 갱신합니다 + +**Returns**: this + +### resetActive {#resetActive} + +
+ inherited +
+ +[activePanel](Control#activePanel)을 `null`로 초기화합니다 + +**Returns**: this + +### moveToPanel {#moveToPanel} + +
+ inherited + async +
+ +[Camera](Camera)를 해당 패널 위로 이동합니다 + +**Returns**: Promise<void> +- 해당 패널 도달시에 resolve되는 Promise + +**Emits**: [Flicking#event:moveStart](Flicking#event-moveStart), [Flicking#event:move](Flicking#event-move), [Flicking#event:moveEnd](Flicking#event-moveEnd), [Flicking#event:willChange](Flicking#event-willChange), [Flicking#event:changed](Flicking#event-changed), [Flicking#event:willRestore](Flicking#event-willRestore), [Flicking#event:restored](Flicking#event-restored), [Flicking#event:needPanel](Flicking#event-needPanel), [Flicking#event:visibleChange](Flicking#event-visibleChange), [Flicking#event:reachEdge](Flicking#event-reachEdge) + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|panel|[Panel](Panel)|||이동할 패널| +|options|object|||옵션 오브젝트| +|duration|number|||애니메이션 진행 시간 (단위: ms)| +|axesEvent|object|✔️||[Axes](https://naver.github.io/egjs-axes/)의 [release](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:release) 이벤트| +|direction|[DIRECTION](DIRECTION)|✔️|DIRECTION.NONE|이동할 방향. [circular](Flicking#circular) 옵션 활성화시에만 사용 가능합니다| + +**Throws**: [FlickingError](FlickingError) + +

|code|condition|
|---|---|
|[POSITION_NOT_REACHABLE](ERROR_CODE)|주어진 패널이 제거되었거나, Camera의 [range](Camera#range) 밖에 있을 경우|
|[NOT_ATTACHED_TO_FLICKING](ERROR_CODE)|[init](Control#init)이 이전에 호출되지 않은 경우|
|[ANIMATION_INTERRUPTED](ERROR_CODE)|사용자 입력에 의해 애니메이션이 중단된 경우|
|[STOP_CALLED_BY_USER](ERROR_CODE)|발생된 이벤트들 중 하나라도 `stop()`이 호출된 경우|

+ +### setActive {#setActive} + +
+ inherited +
+ +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|newActivePanel|[Panel](Panel)|||| +|prevActivePanel|[Panel](Panel) \| null|||| +|isTrusted|boolean|||| + +### copy {#copy} + +
+ inherited +
+ +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|control|[Control](Control)|||| + diff --git a/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/FreeControlOptions.mdx b/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/FreeControlOptions.mdx new file mode 100644 index 0000000000..c4e1c7b395 --- /dev/null +++ b/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/FreeControlOptions.mdx @@ -0,0 +1,18 @@ +--- +custom_edit_url: null +--- + +```ts +interface FreeControlOptions +``` + +
+ +
+ +[FreeControl](FreeControl) 생성시 사용되는 옵션 + +|PROPERTY|TYPE|DESCRIPTION| +|:---:|:---:|:---:| +|stopAtEdge|boolean|스크롤 애니메이션을 스크롤 영역의 시작과 끝부분에서 멈추도록 하여, 바운스 영역을 넘어가지 않도록 합니다| + diff --git a/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/HoldingState.mdx b/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/HoldingState.mdx new file mode 100644 index 0000000000..8f063f34df --- /dev/null +++ b/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/HoldingState.mdx @@ -0,0 +1,166 @@ +--- +custom_edit_url: null +--- + +
⚠️ This class is for internal use only.
+ +```ts +class HoldingState extends State +``` + +
+ +
+ +사용자의 입력이 시작되었으나, 아직 움직이지는 않은 상태 + +
+
Properties
Methods
+
holding
animating
delta
targetPanel
onEnter
onHold
onChange
onRelease
onAnimationEnd
onFinish
+
+ +## Properties + +### holding {#holding} + +
+ readonly +
+ +현재 사용자가 클릭/터치중인지 여부 + +**Type**: true + +### animating {#animating} + +
+ readonly +
+ +현재 애니메이션 동작 여부 + +**Type**: false + +### delta {#delta} + +
+ readonly + inherited +
+ +이전 hold이벤트부터 change에 의해 발생한 이동 delta값의 합산 + +**Type**: number + +### targetPanel {#targetPanel} + +
+ readonly + inherited +
+ +애니메이션 종료시 [Control#activePanel](Control#activePanel)로 설정할 패널 + +**Type**: number + +## Methods + +### onEnter {#onEnter} + +
+ inherited +
+ +현재 상태로 돌입했을때 호출되는 콜백 함수 + +**Returns**: void + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|prevState|[State](State)|||이전 상태값| + +### onHold {#onHold} + +
+ inherited +
+ +Axes의 [hold](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:hold) 이벤트 핸들러 + +**Returns**: void + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|ctx|object|✔️||이벤트 콘텍스트| +|ctx.flicking|[Flicking](Flicking)|✔️||Flicking 인스턴스| +|ctx.axesEvent|object|✔️||Axes의 [hold](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:hold) 이벤트| +|ctx.transitTo|function|✔️||다른 상태로 변경하기 위한 함수| + +### onChange {#onChange} + +
+ inherited +
+ +Axes의 [change](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:change) 이벤트 핸들러 + +**Returns**: void + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|ctx|object|✔️||이벤트 콘텍스트| +|ctx.flicking|[Flicking](Flicking)|✔️||Flicking 인스턴스| +|ctx.axesEvent|object|✔️||Axes의 [change](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:change) 이벤트| +|ctx.transitTo|function|✔️||다른 상태로 변경하기 위한 함수| + +### onRelease {#onRelease} + +
+ inherited +
+ +Axes의 [release](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:release) 이벤트 핸들러 + +**Returns**: void + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|ctx|object|✔️||이벤트 콘텍스트| +|ctx.flicking|[Flicking](Flicking)|✔️||Flicking 인스턴스| +|ctx.axesEvent|object|✔️||Axes의 [release](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:release) 이벤트| +|ctx.transitTo|function|✔️||다른 상태로 변경하기 위한 함수| + +### onAnimationEnd {#onAnimationEnd} + +
+ inherited +
+ +Axes의 [animationEnd](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:animationEnd) 이벤트 핸들러 + +**Returns**: void + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|ctx|object|✔️||이벤트 콘텍스트| +|ctx.flicking|[Flicking](Flicking)|✔️||Flicking 인스턴스| +|ctx.axesEvent|object|✔️||Axes의 [animationEnd](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:animationEnd) 이벤트| +|ctx.transitTo|function|✔️||다른 상태로 변경하기 위한 함수| + +### onFinish {#onFinish} + +
+ inherited +
+ +Axes의 [finish](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:finish) 이벤트 핸들러 + +**Returns**: void + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|ctx|object|✔️||이벤트 콘텍스트| +|ctx.flicking|[Flicking](Flicking)|✔️||Flicking 인스턴스| +|ctx.axesEvent|object|✔️||Axes의 [finish](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:finish) 이벤트| +|ctx.transitTo|function|✔️||다른 상태로 변경하기 위한 함수| + diff --git a/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/IdleState.mdx b/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/IdleState.mdx new file mode 100644 index 0000000000..0ecb3a27ad --- /dev/null +++ b/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/IdleState.mdx @@ -0,0 +1,166 @@ +--- +custom_edit_url: null +--- + +
⚠️ This class is for internal use only.
+ +```ts +class IdleState extends State +``` + +
+ +
+ +사용자의 입력이 없고, 애니메이션이 동작하고있지 않은 기본 상태 + +
+
Properties
Methods
+
holding
animating
delta
targetPanel
onEnter
onHold
onChange
onRelease
onAnimationEnd
onFinish
+
+ +## Properties + +### holding {#holding} + +
+ readonly +
+ +현재 사용자가 클릭/터치중인지 여부 + +**Type**: false + +### animating {#animating} + +
+ readonly +
+ +현재 애니메이션 동작 여부 + +**Type**: false + +### delta {#delta} + +
+ readonly + inherited +
+ +이전 hold이벤트부터 change에 의해 발생한 이동 delta값의 합산 + +**Type**: number + +### targetPanel {#targetPanel} + +
+ readonly + inherited +
+ +애니메이션 종료시 [Control#activePanel](Control#activePanel)로 설정할 패널 + +**Type**: number + +## Methods + +### onEnter {#onEnter} + +
+ inherited +
+ +현재 상태로 돌입했을때 호출되는 콜백 함수 + +**Returns**: void + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|prevState|[State](State)|||이전 상태값| + +### onHold {#onHold} + +
+ inherited +
+ +Axes의 [hold](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:hold) 이벤트 핸들러 + +**Returns**: void + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|ctx|object|✔️||이벤트 콘텍스트| +|ctx.flicking|[Flicking](Flicking)|✔️||Flicking 인스턴스| +|ctx.axesEvent|object|✔️||Axes의 [hold](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:hold) 이벤트| +|ctx.transitTo|function|✔️||다른 상태로 변경하기 위한 함수| + +### onChange {#onChange} + +
+ inherited +
+ +Axes의 [change](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:change) 이벤트 핸들러 + +**Returns**: void + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|ctx|object|✔️||이벤트 콘텍스트| +|ctx.flicking|[Flicking](Flicking)|✔️||Flicking 인스턴스| +|ctx.axesEvent|object|✔️||Axes의 [change](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:change) 이벤트| +|ctx.transitTo|function|✔️||다른 상태로 변경하기 위한 함수| + +### onRelease {#onRelease} + +
+ inherited +
+ +Axes의 [release](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:release) 이벤트 핸들러 + +**Returns**: void + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|ctx|object|✔️||이벤트 콘텍스트| +|ctx.flicking|[Flicking](Flicking)|✔️||Flicking 인스턴스| +|ctx.axesEvent|object|✔️||Axes의 [release](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:release) 이벤트| +|ctx.transitTo|function|✔️||다른 상태로 변경하기 위한 함수| + +### onAnimationEnd {#onAnimationEnd} + +
+ inherited +
+ +Axes의 [animationEnd](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:animationEnd) 이벤트 핸들러 + +**Returns**: void + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|ctx|object|✔️||이벤트 콘텍스트| +|ctx.flicking|[Flicking](Flicking)|✔️||Flicking 인스턴스| +|ctx.axesEvent|object|✔️||Axes의 [animationEnd](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:animationEnd) 이벤트| +|ctx.transitTo|function|✔️||다른 상태로 변경하기 위한 함수| + +### onFinish {#onFinish} + +
+ inherited +
+ +Axes의 [finish](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:finish) 이벤트 핸들러 + +**Returns**: void + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|ctx|object|✔️||이벤트 콘텍스트| +|ctx.flicking|[Flicking](Flicking)|✔️||Flicking 인스턴스| +|ctx.axesEvent|object|✔️||Axes의 [finish](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:finish) 이벤트| +|ctx.transitTo|function|✔️||다른 상태로 변경하기 위한 함수| + diff --git a/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/LinearCamera.mdx b/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/LinearCamera.mdx new file mode 100644 index 0000000000..e7c3647f02 --- /dev/null +++ b/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/LinearCamera.mdx @@ -0,0 +1,456 @@ +--- +custom_edit_url: null +--- + +```ts +class LinearCamera extends Camera +``` +첫번째 패널의 좌표로부터 마지막 패널의 좌표로까지 이동할 수 있는 종류의 [Camera](Camera) + +
+
Properties
Methods
+
element
children
position
alignPosition
offset
range
rangeDiff
visiblePanels
visibleRange
anchorPoints
controlParams
atEdge
size
progress
align
updateRange
init
destroy
lookAt
getPrevAnchor
getNextAnchor
getProgressInPanel
findAnchorIncludePosition
findNearestAnchor
findActiveAnchor
clampToReachablePosition
canReach
canSee
updateAlignPos
updateAnchors
updateAdaptiveHeight
updateOffset
resetNeedPanelHistory
applyTransform
+
+ +## Properties + +### element {#element} + +
+ readonly + inherited +
+ +카메라 엘리먼트(`.flicking-camera`) + +**Type**: HTMLElement + +### children {#children} + +
+ readonly + inherited +
+ +카메라 엘리먼트(`.flicking-camera`)의 자식 엘리먼트 배열 + +**Type**: Array<HTMLElement> + +### position {#position} + +
+ readonly + inherited +
+ +Camera의 현재 좌표 + +**Type**: number + +### alignPosition {#alignPosition} + +
+ readonly + inherited +
+ +패널의 정렬 기준 위치. 뷰포트 내에서 [Panel](Panel)의 [alignPosition](Panel#alignPosition)이 위치해야 하는 곳입니다 + +**Type**: number + +### offset {#offset} + +
+ readonly + inherited +
+ +Camera의 좌표 오프셋. [renderOnlyVisible](Flicking#renderOnlyVisible) 옵션을 위해 사용됩니다. + +**Type**: number + +**Default**: 0 + +### range {#range} + +
+ readonly + inherited +
+ +Camera의 [position](Camera#position)이 도달 가능한 범위 + +**Type**: object + +|PROPERTY|TYPE|DESCRIPTION| +|:---:|:---:|:---:| +|min|number|최소 위치| +|max|number|최대 위치| + +### rangeDiff {#rangeDiff} + +
+ readonly + inherited +
+ +Camera가 도달 가능한 최소/최대 좌표의 차이 + +**Type**: number + +### visiblePanels {#visiblePanels} + +
+ readonly + inherited +
+ +현재 보이는 패널들의 배열 + +**Type**: Array<[Panel](Panel)> + +### visibleRange {#visibleRange} + +
+ readonly + inherited +
+ +현재 위치에서 보이는 범위 + +**Type**: object + +|PROPERTY|TYPE|DESCRIPTION| +|:---:|:---:|:---:| +|min|number|최소 위치| +|min|number|최대 위치| + +### anchorPoints {#anchorPoints} + +
+ readonly + inherited +
+ +카메라가 도달 가능한 [AnchorPoint](AnchorPoint)의 목록 + +**Type**: Array<[AnchorPoint](AnchorPoint)> + +### controlParams {#controlParams} + +
+ readonly + inherited +
+ +[AxesController](AxesController)를 업데이트하기 위한 현재 Camera 패러미터들 + +**Type**: [ControlParams](ControlParams) + +### atEdge {#atEdge} + +
+ readonly + inherited +
+ +현재 카메라가 도달 가능한 범위의 최소 혹은 최대점을 넘어섰는지를 나타냅니다 + +**Type**: boolean + +### size {#size} + +
+ readonly + inherited +
+ +뷰포트 크기를 반환합니다 + +**Type**: number + +### progress {#progress} + +
+ readonly + inherited +
+ +첫번째 패널로부터 마지막 패널까지의 카메라 위치의 진행도를 반환합니다 +범위는 0부터 마지막 패널의 인덱스까지입니다 + +**Type**: number + +### align {#align} + +
+ inherited +
+ +[alignPosition](Camera#alignPosition)이 뷰포트 엘리먼트 내의 어디에 위치해야 하는지를 나타내는 값 + +**Type**: [ALIGN](ALIGN) \| string \| number + +## Methods + +### updateRange {#updateRange} + +
+ +
+ +Camera의 [range](Camera#range)를 업데이트합니다 + +**Returns**: this + +**Throws**: [FlickingError](FlickingError) + +[NOT_ATTACHED_TO_FLICKING](ERROR_CODE) [init](Camera#init)이 이전에 호출되지 않은 경우 + +### init {#init} + +
+ inherited +
+ +Camera를 초기화합니다 + +**Returns**: this + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|flicking|[Flicking](Flicking)|||Flicking의 인스턴스| + +**Throws**: [FlickingError](FlickingError) + +[VAL_MUST_NOT_NULL](ERROR_CODE) 뷰포트 엘리먼트 내부에 카메라 엘리먼트(`.flicking-camera`)가 존재하지 않을 경우 + +### destroy {#destroy} + +
+ inherited +
+ +Camera를 초기 상태로 되돌립니다 + +**Returns**: void + +### lookAt {#lookAt} + +
+ inherited +
+ +해당 좌표로 이동하고, CSS transform을 적용합니다 + +**Returns**: this + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|pos|number|||움직일 위치| + +**Throws**: [FlickingError](FlickingError) + +[NOT_ATTACHED_TO_FLICKING](ERROR_CODE) [init](Camera#init)이 이전에 호출되지 않은 경우 + +### getPrevAnchor {#getPrevAnchor} + +
+ inherited +
+ +주어진 [AnchorPoint](AnchorPoint)의 이전 [AnchorPoint](AnchorPoint)를 반환합니다 +존재하지 않을 경우 `null`을 반환합니다 + +**Returns**: [AnchorPoint](AnchorPoint) \| null +- 이전 [AnchorPoint](AnchorPoint) + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|anchor|[AnchorPoint](AnchorPoint)|||기준 [AnchorPoint](AnchorPoint)| + +### getNextAnchor {#getNextAnchor} + +
+ inherited +
+ +주어진 [AnchorPoint](AnchorPoint)의 다음 [AnchorPoint](AnchorPoint)를 반환합니다 +존재하지 않을 경우 `null`을 반환합니다 + +**Returns**: [AnchorPoint](AnchorPoint) \| null +- 다음 [AnchorPoint](AnchorPoint) + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|anchor|[AnchorPoint](AnchorPoint)|||기준 [AnchorPoint](AnchorPoint)| + +### getProgressInPanel {#getProgressInPanel} + +
+ inherited +
+ +현재 카메라 아래 패널에서의 위치 진행도를 반환합니다 +반환값은 카메라가 패널 내부에 있을 경우 0부터 1까지의 값을 갖습니다 +패널의 margin 영역에 있을 경우 0보다 작거나 1보다 큰 값을 반환할 수 있습니다 + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|panel|[Panel](Panel)|||| + +### findAnchorIncludePosition {#findAnchorIncludePosition} + +
+ inherited +
+ +주어진 좌표를 포함하는 [AnchorPoint](AnchorPoint)를 반환합니다 +주어진 좌표를 포함하는 [AnchorPoint](AnchorPoint)가 없을 경우 `null`을 반환합니다 + +**Returns**: [AnchorPoint](AnchorPoint) \| null +- 해당 좌표를 포함하는 [AnchorPoint](AnchorPoint) + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|position|number|||확인할 좌표| + +### findNearestAnchor {#findNearestAnchor} + +
+ inherited +
+ +해당 좌표에서 가장 가까운 [AnchorPoint](AnchorPoint)를 반환합니다 +[AnchorPoint](AnchorPoint)가 하나도 없을 경우 `null`을 반환합니다 + +**Returns**: [AnchorPoint](AnchorPoint) \| null +- 해당 좌표에 가장 인접한 [AnchorPoint](AnchorPoint) + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|position|number|||확인할 좌표| + +### findActiveAnchor {#findActiveAnchor} + +
+ inherited +
+ +현재 [Flicking#currentPanel](Flicking#currentPanel)에 해당하는 [AnchorPoint](AnchorPoint)를 반환합니다 + +**Returns**: [AnchorPoint](AnchorPoint) \| null + +### clampToReachablePosition {#clampToReachablePosition} + +
+ inherited +
+ +주어진 좌표를 Camera가 도달 가능한 범위 사이의 값으로 만듭니다 + +**Returns**: number +- 범위 제한된 좌표 + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|position|number|||범위를 제한할 좌표| + +### canReach {#canReach} + +
+ inherited +
+ +해당 [Panel](Panel)이 Camera가 도달 가능한 범위 내에 있는지를 반환합니다 + +**Returns**: boolean +- 도달 가능한 범위 내에 해당 패널이 존재하는지 여부 + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|panel|[Panel](Panel)|||확인할 [Panel](Panel)의 인스턴스| + +### canSee {#canSee} + +
+ inherited +
+ +현재 좌표에서 해당 패널 엘리먼트를 볼 수 있는지 여부를 반환합니다 + +**Returns**: boolean +- 현재 위치에서 해당 패널 엘리먼트가 보이는지 여부 + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|panel|[Panel](Panel)|||확인할 [Panel](Panel)의 인스턴스| + +### updateAlignPos {#updateAlignPos} + +
+ inherited +
+ +Camera의 [alignPosition](Camera#alignPosition)을 업데이트합니다 + +**Returns**: this + +### updateAnchors {#updateAnchors} + +
+ inherited +
+ +Camera의 [anchorPoints](Camera#anchorPoints)를 업데이트합니다 + +**Returns**: this + +**Throws**: [FlickingError](FlickingError) + +[NOT_ATTACHED_TO_FLICKING](ERROR_CODE) [init](Camera#init)이 이전에 호출되지 않은 경우 + +### updateAdaptiveHeight {#updateAdaptiveHeight} + +
+ inherited +
+ +현재 선택된 패널의 높이와 동일하도록 뷰포트의 높이를 업데이트합니다 + +**Returns**: this + +**Throws**: [FlickingError](FlickingError) + +[NOT_ATTACHED_TO_FLICKING](ERROR_CODE) [init](Camera#init)이 이전에 호출되지 않은 경우 + +### updateOffset {#updateOffset} + +
+ inherited +
+ +현재 카메라의 오프셋을 업데이트합니다 + +**Returns**: this + +### resetNeedPanelHistory {#resetNeedPanelHistory} + +
+ inherited +
+ +발생한 [needPanel](Flicking#event-needPanel) 이벤트들을 초기화하여 다시 발생할 수 있도록 합니다 + +**Returns**: this + +### applyTransform {#applyTransform} + +
+ inherited +
+ +현재 위치를 기준으로한 transform 스타일을 카메라 엘리먼트에 적용합니다. + +**Returns**: this + diff --git a/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/MOVE_DIRECTION.mdx b/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/MOVE_DIRECTION.mdx new file mode 100644 index 0000000000..6233c072a7 --- /dev/null +++ b/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/MOVE_DIRECTION.mdx @@ -0,0 +1,21 @@ +--- +custom_edit_url: null +--- + +```ts +const MOVE_DIRECTION +``` + +
+ +
+ +[Flicking](Flicking)이 움직이는 방향을 담고 있는 객체 + +**Type**: object + +|PROPERTY|TYPE|DESCRIPTION| +|:---:|:---:|:---:| +|HORIZONTAL|"horizontal"|수평 방향| +|VERTICAL|"vertical"|수직 방향| + diff --git a/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/MOVE_TYPE.mdx b/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/MOVE_TYPE.mdx new file mode 100644 index 0000000000..546fbd7b99 --- /dev/null +++ b/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/MOVE_TYPE.mdx @@ -0,0 +1,22 @@ +--- +custom_edit_url: null +--- + +```ts +const MOVE_TYPE +``` + +
+ +
+ +Flicking이 제공하는 [moveType](Flicking#moveType)들을 담고 있는 객체 + +**Type**: object + +|PROPERTY|TYPE|DESCRIPTION| +|:---:|:---:|:---:| +|SNAP|"snap"|Flicking의 [control](Flicking#control)을 [SnapControl](SnapControl)로 설정하게 하는 [moveType](Flicking#moveType)| +|FREE_SCROLL|"freeScroll"|Flicking의 [control](Flicking#control)을 [FreeControl](FreeControl)로 설정하게 하는 [moveType](Flicking#moveType)| +|STRICT|"strict"|Flicking의 [control](Flicking#control)을 [StrictControl](StrictControl)로 설정하게 하는 [moveType](Flicking#moveType)| + diff --git a/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/ORDER.mdx b/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/ORDER.mdx new file mode 100644 index 0000000000..571424a8ef --- /dev/null +++ b/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/ORDER.mdx @@ -0,0 +1,21 @@ +--- +custom_edit_url: null +--- + +```ts +const ORDER +``` + +
+ +
+ +카메라 엘리먼트(`.flicking-camera`)에 적용된 [direction](https://developer.mozilla.org/en-US/docs/Web/CSS/direction) CSS 속성을 구분하기 위한 객체 + +**Type**: object + +|PROPERTY|TYPE|DESCRIPTION| +|:---:|:---:|:---:| +|LTR|string|"ltr"| +|RTL|string|"rtl"| + diff --git a/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/POSITION_KEY.mdx b/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/POSITION_KEY.mdx new file mode 100644 index 0000000000..b6e20054a2 --- /dev/null +++ b/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/POSITION_KEY.mdx @@ -0,0 +1,14 @@ +--- +custom_edit_url: null +--- + +```ts +const POSITION_KEY +``` + +
+ +
+ +An Axis key that Flicking uses + diff --git a/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/Panel.mdx b/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/Panel.mdx new file mode 100644 index 0000000000..83e908f297 --- /dev/null +++ b/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/Panel.mdx @@ -0,0 +1,461 @@ +--- +custom_edit_url: null +--- + +```ts +class Panel +``` + +
+ +
+ +슬라이드 데이터 컴포넌트로, 단일 HTMLElement의 정보를 갖고 있습니다 + +
+
Properties
Methods
+
element
elementProvider
index
position
size
sizeIncludingMargin
height
margin
alignPosition
removed
rendered
loading
range
toggled
toggleDirection
offset
progress
outsetProgress
visibleRatio
align
markForShow
markForHide
resize
setSize
contains
destroy
includePosition
includeRange
isVisibleOnRange
focus
prev
next
increaseIndex
decreaseIndex
updatePosition
toggle
updateCircularToggleDirection
+
+ +## constructor +```ts +new Panel(options, options.index, options.align, options.flicking, options.elementProvider) +``` + +
+ +
+ +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|options|object|||옵션 오브젝트| +|options.index|number|✔️||패널의 초기 인덱스| +|options.align|Constants.ALIGN \| string \| number|✔️||패널의 초기 [align](Flicking#align)값| +|options.flicking|[Flicking](Flicking)|✔️||패널이 참조하는 [Flicking](Flicking) 인스턴스| +|options.elementProvider|[Flicking](Flicking)|✔️||실제 엘리먼트를 반환하는 엘리먼트 공급자의 인스턴스| + +## Properties + +### element {#element} + +
+ readonly +
+ +패널이 참조하고 있는 `HTMLElement` + +**Type**: HTMLElement + +### elementProvider {#elementProvider} + +
+ readonly +
+ +### index {#index} + +
+ readonly +
+ +패널의 인덱스 + +**Type**: number + +### position {#position} + +
+ readonly +
+ +패널의 현재 좌표, [alignPosition](Panel#alignPosition)을 포함하고 있습니다 + +**Type**: number + +### size {#size} + +
+ readonly +
+ +패널 엘리먼트의 캐시된 크기
이 값은 [horizontal](Flicking#horizontal)이 `true`일 경우 [element](Panel#element)의 `offsetWidth`와 동일하고, `false`일 경우 `offsetHeight`와 동일합니다 + +**Type**: number + +### sizeIncludingMargin {#sizeIncludingMargin} + +
+ readonly +
+ +CSS `margin`을 포함한 패널의 크기
이 값은 [horizontal](Flicking#horizontal)이 `true`일 경우 margin left/right을 포함하고, `false`일 경우 margin top/bottom을 포함합니다 + +**Type**: number + +### height {#height} + +
+ readonly +
+ +패널 엘리먼트의 높이 + +**Type**: number + +### margin {#margin} + +
+ readonly +
+ +패널 엘리먼트의 CSS `margin` 값 + +**Type**: object + +|PROPERTY|TYPE|DESCRIPTION| +|:---:|:---:|:---:| +|prev|number|[horizontal](Flicking#horizontal)이 `true`일 경우 `margin-left`, `false`일 경우 `margin-top`에 해당하는 값| +|next|number|[horizontal](Flicking#horizontal)이 `true`일 경우 `margin-right`, `false`일 경우 `margin-bottom`에 해당하는 값| + +### alignPosition {#alignPosition} + +
+ readonly +
+ +패널의 정렬 기준 위치. [Camera](Camera)의 뷰포트 내에서의 [alignPosition](Camera#alignPosition)이 위치해야 하는 곳입니다 + +**Type**: number + +### removed {#removed} + +
+ readonly +
+ +패널이 [remove](Flicking#remove)되었는지 여부를 나타내는 값 + +**Type**: boolean + +### rendered {#rendered} + +
+ readonly +
+ +패널의 엘리먼트가 화면상에 렌더링되고있는지 여부를 나타내는 값 + +**Type**: boolean + +### loading {#loading} + +
+ readonly +
+ +패널 내부의 이미지/비디오가 아직 로드되지 않아 [resize](Panel#resize)될 것인지를 나타내는 값 + +**Type**: boolean + +### range {#range} + +
+ readonly +
+ +패널 엘리먼트의 Bounding box 범위 + +**Type**: object + +|PROPERTY|TYPE|DESCRIPTION| +|:---:|:---:|:---:| +|min|number|Bounding box's left([horizontal](Flicking#horizontal): true) / top([horizontal](Flicking#horizontal): false)| +|max|number|Bounding box's right([horizontal](Flicking#horizontal): true) / bottom([horizontal](Flicking#horizontal): false)| + +### toggled {#toggled} + +
+ readonly +
+ +패널의 위치가 circular 동작에 의해 토글되었는지 여부를 나타내는 값 + +**Type**: boolean + +### toggleDirection {#toggleDirection} + +
+ readonly +
+ +패널의 위치가 circular 동작에 의해 토글되는 방향 + +**Type**: [DIRECTION](DIRECTION) + +### offset {#offset} + +
+ readonly +
+ +[Panel#order](Panel#order)에 의한 실제 위치 변경값 + +**Type**: number + +### progress {#progress} + +
+ readonly +
+ +이 패널로부터 이전/다음 패널으로의 이동 진행률 + +**Type**: number + +### outsetProgress {#outsetProgress} + +
+ readonly +
+ +현재 패널이 뷰포트 영역 밖으로 완전히 사라지는 지점을 기준으로 하는 진행도(prev방향: -1, 선택 지점: 0, next방향: 1) + +**Type**: number + +### visibleRatio {#visibleRatio} + +
+ readonly +
+ +뷰포트 안에서 패널이 보이는 영역의 비율 + +**Type**: number + +### align {#align} + +
+ +
+ +[alignPosition](Panel#alignPosition)이 패널 내의 어디에 위치해야 하는지를 나타내는 값 + +**Type**: Constants.ALIGN \| string \| number + +## Methods + +### markForShow {#markForShow} + +
+ +
+ +Mark panel element to be appended on the camera element + +### markForHide {#markForHide} + +
+ +
+ +Mark panel element to be removed from the camera element + +### resize {#resize} + +
+ +
+ +패널의 크기를 갱신합니다 + +**Returns**: this + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|cached|object|✔️||사전에 캐시된 패널의 크기 정보| + +### setSize {#setSize} + +
+ +
+ +패널 크기를 변경합니다. 패널 엘리먼트에 해당 크기의 CSS width/height를 적용합니다 + +**Returns**: this + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|size|object|✔️||새 패널 크기| +|size.width|number \| string|✔️||CSS 문자열 또는 숫자(px)| +|size.height|number \| string|✔️||CSS 문자열 또는 숫자(px)| + +### contains {#contains} + +
+ +
+ +해당 엘리먼트가 이 패널의 [element](Panel#element) 내에 포함되어 있는지를 반환합니다 + +**Returns**: boolean +- 패널의 [element](Panel#element)내에 해당 엘리먼트 포함 여부 + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|element|HTMLElement|||확인하고자 하는 HTMLElement| + +### destroy {#destroy} + +
+ +
+ +내부 상태를 초기화하고 [removed](Panel#removed)를 `true`로 설정합니다. + +**Returns**: void + +### includePosition {#includePosition} + +
+ +
+ +주어진 좌표가 현재 패널의 [range](Panel#range)내에 속해있는지를 반환합니다. + +**Returns**: boolean +- 해당 좌표가 패널 영역 내에 속해있는지 여부 + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|pos|number|||확인하고자 하는 좌표| +|includeMargin|boolean|✔️|false|패널 영역에 [margin](Panel#margin)값을 포함시킵니다| + +### includeRange {#includeRange} + +
+ +
+ +주어진 범위가 이 패널 내부에 완전히 포함되는지를 반환합니다 + +**Returns**: boolean +- 해당 범위가 패널 영역 내에 완전히 속해있는지 여부 + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|min|number|||확인하고자 하는 최소 범위| +|max|number|||확인하고자 하는 최대 범위| +|includeMargin|boolean|✔️|false|패널 영역에 [margin](Panel#margin)값을 포함시킵니다| + +### isVisibleOnRange {#isVisibleOnRange} + +
+ +
+ +주어진 범위 내에서 이 패널의 일부가 보여지는지를 반환합니다 + +**Returns**: boolean +- 해당 범위 내에서 패널을 볼 수 있는지 여부 + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|min|number|||확인하고자 하는 최소 범위| +|max|number|||확인하고자 하는 최대 범위| + +### focus {#focus} + +
+ +
+ +[Camera](Camera)를 이 패널로 이동합니다 + +**Returns**: Promise<void> +- 패널 도달시에 resolve되는 Promise + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|duration|number|✔️||애니메이션 진행 시간 (단위: ms)| + +### prev {#prev} + +
+ +
+ +이전(`index - 1`) 패널을 반환합니다. 이전 패널이 없을 경우 `null`을 반환합니다
[circular](Flicking#circularEnabled) 모드가 활성화되었을 때 첫번째 패널에서 이 메소드를 호출할 경우 마지막 패널을 반환합니다 + +**Returns**: [Panel](Panel) \| null +- 이전 패널 + +### next {#next} + +
+ +
+ +다음(`index + 1`) 패널을 반환합니다. 다음 패널이 없을 경우 `null`을 반환합니다
[circular](Flicking#circularEnabled) 모드가 활성화되었을 때 마지막 패널에서 이 메소드를 호출할 경우 첫번째 패널을 반환합니다 + +**Returns**: [Panel](Panel) \| null +- 다음 패널 + +### increaseIndex {#increaseIndex} + +
+ +
+ +패널의 인덱스를 주어진 값만큼 증가시킵니다 + +**Returns**: this + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|val|number|||0보다 같거나 큰 정수| + +### decreaseIndex {#decreaseIndex} + +
+ +
+ +패널의 인덱스를 주어진 값만큼 감소시킵니다 + +**Returns**: this + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|val|number|||0보다 같거나 큰 정수| + +### updatePosition {#updatePosition} + +
+ +
+ +**Returns**: this + +### toggle {#toggle} + +
+ +
+ +**Returns**: boolean +- toggled + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|prevPos|number|||| +|newPos|number|||| + +### updateCircularToggleDirection {#updateCircularToggleDirection} + +
+ +
+ +**Returns**: this + diff --git a/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/Plugin.mdx b/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/Plugin.mdx new file mode 100644 index 0000000000..b070559035 --- /dev/null +++ b/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/Plugin.mdx @@ -0,0 +1,20 @@ +--- +custom_edit_url: null +--- + +```ts +interface Plugin +``` + +
+ +
+ +Flicking 플러그인 + +|PROPERTY|TYPE|DESCRIPTION| +|:---:|:---:|:---:| +|undefined||플러그인을 초기화합니다| +|undefined||플러그인을 제거하고 부착된 모든 이벤트들을 제거합니다.| +|undefined||현재 Flicking의 상태에 대응하도록 플러그인을 업데이트합니다.| + diff --git a/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/Renderer.mdx b/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/Renderer.mdx new file mode 100644 index 0000000000..9364923a11 --- /dev/null +++ b/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/Renderer.mdx @@ -0,0 +1,230 @@ +--- +custom_edit_url: null +--- + +```ts +class Renderer +``` + +
+ +
+ +[Panel](Panel)과 그 엘리먼트들을 관리하는 컴포넌트 + +
+
Properties
Methods
+
panels
rendering
panelCount
strategy
align
render
init
destroy
getPanel
updatePanelSize
batchInsert
batchInsertDefer
batchRemove
batchRemoveDefer
updateAfterPanelChange
checkPanelContentsReady
+
+ +## constructor +```ts +new Renderer(options, options.align, options.strategy) +``` + +
+ +
+ +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|options|object|||옵션 오브젝트| +|options.align|Constants.ALIGN \| string \| number|✔️|"center"|전체 패널에 적용될 [align](Flicking#align) 값| +|options.strategy|object|✔️||RenderingStrategy의 인스턴스(내부 모듈)| + +## Properties + +### panels {#panels} + +
+ readonly +
+ +전체 패널들의 배열 + +**Type**: Array<[Panel](Panel)> + +**See**: +- [Panel](Panel) + +### rendering {#rendering} + +
+ readonly +
+ +현재 렌더링이 시작되어 끝나기 전까지의 상태인지의 여부 + +**Type**: boolean + +### panelCount {#panelCount} + +
+ readonly +
+ +전체 패널의 개수 + +**Type**: number + +### strategy {#strategy} + +
+ +
+ +### align {#align} + +
+ +
+ +[Panel](Panel)에 공통적으로 적용할 [align](Panel#align) 값 + +**Type**: Constants.ALIGN \| string \| number + +## Methods + +### render {#render} + +
+ +
+ +패널 엘리먼트들을 카메라 엘리먼트 내부에 렌더링합니다 + +**Returns**: this + +### init {#init} + +
+ +
+ +Renderer를 초기화합니다 + +**Returns**: this + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|flicking|[Flicking](Flicking)|||Flicking의 인스턴스| + +### destroy {#destroy} + +
+ +
+ +Renderer를 초기 상태로 되돌립니다 + +**Returns**: void + +### getPanel {#getPanel} + +
+ +
+ +주어진 인덱스에 해당하는 [Panel](Panel)을 반환합니다. 주어진 인덱스에 해당하는 패널이 존재하지 않을 경우 `null`을 반환합니다. + +**Returns**: [Panel](Panel) \| null +- 주어진 인덱스에 해당하는 패널 + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|index|number|||| + +**See**: +- [Panel](Panel) + +### updatePanelSize {#updatePanelSize} + +
+ +
+ +모든 패널의 크기를 업데이트합니다 + +**Returns**: this + +### batchInsert {#batchInsert} + +
+ +
+ +주어진 인덱스에 새로운 패널들을 추가합니다
해당 인덱스보다 같거나 큰 인덱스를 가진 기존 패널들은 추가한 패널의 개수만큼 인덱스가 증가합니다. + +**Returns**: Array<[Panel](Panel)> +- 추가된 패널들의 배열 + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|items|Array<object>|||추가할 아이템들의 배열| +|items.index|number|✔️||새로 패널들을 추가할 인덱스| +|items.elements|Array<any>|✔️||엘리먼트의 배열 혹은 프레임워크에서 엘리먼트를 포함한 컴포넌트들의 배열| +|items.hasDOMInElements|boolean|✔️||내부에 실제 DOM 엘리먼트들을 포함하고 있는지 여부. true로 설정할 경우, 렌더러는 해당 엘리먼트들을 카메라 엘리먼트 내부에 추가합니다| + +### batchInsertDefer {#batchInsertDefer} + +
+ +
+ +Defers update
camera position & others will be updated after calling updateAfterPanelChange + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|...items|Array<{index: number, elements: any[], hasDOMInElements: boolean}>|||| + +### batchRemove {#batchRemove} + +
+ +
+ +주어진 인덱스의 패널을 제거합니다
해당 인덱스보다 큰 인덱스를 가진 기존 패널들은 제거한 패널의 개수만큼 인덱스가 감소합니다 + +**Returns**: [Panel](Panel)[] +- 제거된 패널들의 배열 + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|items|Array<object>|||제거할 아이템들의 배열| +|items.index|number|✔️||제거할 패널의 인덱스| +|items.deleteCount|number|✔️|1|`index` 이후로 제거할 패널의 개수| +|items.hasDOMInElements|boolean|✔️|1|내부에 실제 DOM 엘리먼트들을 포함하고 있는지 여부. true로 설정할 경우, 렌더러는 해당 엘리먼트들을 카메라 엘리먼트 내부에서 제거합니다| + +### batchRemoveDefer {#batchRemoveDefer} + +
+ +
+ +Defers update
camera position & others will be updated after calling updateAfterPanelChange + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|...items|Array<{index: number, deleteCount: number, hasDOMInElements: boolean}>|||| + +### updateAfterPanelChange {#updateAfterPanelChange} + +
+ +
+ +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|panelsAdded|[Panel](Panel)[]|||| +|panelsRemoved|[Panel](Panel)[]|||| + +### checkPanelContentsReady {#checkPanelContentsReady} + +
+ +
+ +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|checkingPanels|[Panel](Panel)[]|||| + diff --git a/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/RenderingStrategy.mdx b/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/RenderingStrategy.mdx new file mode 100644 index 0000000000..a64fc397f1 --- /dev/null +++ b/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/RenderingStrategy.mdx @@ -0,0 +1,12 @@ +--- +custom_edit_url: null +--- + +```ts +member RenderingStrategy +``` + +
+ +
+ diff --git a/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/SnapControl.mdx b/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/SnapControl.mdx new file mode 100644 index 0000000000..16eefc2476 --- /dev/null +++ b/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/SnapControl.mdx @@ -0,0 +1,298 @@ +--- +custom_edit_url: null +--- + +```ts +class SnapControl extends Control +``` + +
+ +
+ +입력을 중단한 시점의 가속도에 영향받아 도달할 패널을 계산하는 이동 방식을 사용하는 [Control](Control) + +
+
Properties
Methods
+
count
controller
activeIndex
activePanel
animating
holding
moveToPosition
init
destroy
enable
disable
release
updateAnimation
stopAnimation
updatePosition
updateInput
resetActive
moveToPanel
setActive
copy
+
+ +## constructor +```ts +new SnapControl() +``` + +
+ +
+ +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +||Partial<[SnapControlOptions](SnapControlOptions)>|✔️|{}|| + +## Properties + +### count {#count} + +
+ +
+ +입력 중단 이후 통과하여 이동할 수 있는 패널의 최대 갯수 + +**Type**: number + +**Default**: Infinity + +### controller {#controller} + +
+ readonly + inherited +
+ +[@egjs/axes](https://naver.github.io/egjs-axes/)의 이벤트를 처리하는 컨트롤러 컴포넌트 + +**Type**: [AxesController](AxesController) + +### activeIndex {#activeIndex} + +
+ readonly + inherited +
+ +[currentPanel](Flicking#currentPanel)의 인덱스 번호 + +**Type**: number + +**Default**: 0 + +### activePanel {#activePanel} + +
+ readonly + inherited +
+ +현재 선택된 패널 + +**Type**: [Panel](Panel) \| null + +### animating {#animating} + +
+ readonly + inherited +
+ +현재 애니메이션 동작 여부 + +**Type**: boolean + +### holding {#holding} + +
+ readonly + inherited +
+ +현재 사용자가 클릭/터치중인지 여부 + +**Type**: boolean + +## Methods + +### moveToPosition {#moveToPosition} + +
+ +
+ +[Camera](Camera)를 주어진 좌표로 이동합니다 + +**Returns**: Promise<void> +- 해당 좌표 도달시에 resolve되는 Promise + +**Emits**: [Flicking#event:moveStart](Flicking#event-moveStart), [Flicking#event:move](Flicking#event-move), [Flicking#event:moveEnd](Flicking#event-moveEnd), [Flicking#event:willChange](Flicking#event-willChange), [Flicking#event:changed](Flicking#event-changed), [Flicking#event:willRestore](Flicking#event-willRestore), [Flicking#event:restored](Flicking#event-restored), [Flicking#event:needPanel](Flicking#event-needPanel), [Flicking#event:visibleChange](Flicking#event-visibleChange), [Flicking#event:reachEdge](Flicking#event-reachEdge) + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|position|number|||이동할 좌표| +|duration|number|||패널 이동 애니메이션 진행 시간 (단위: ms)| +|axesEvent|object|✔️||[Axes](https://naver.github.io/egjs-axes/)의 [release](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:release) 이벤트| + +**Throws**: [FlickingError](FlickingError) + +

|code|condition|
|---|---|
|[POSITION_NOT_REACHABLE](ERROR_CODE)|주어진 패널이 제거되었거나, Camera의 [range](Camera#range) 밖에 있을 경우|
|[NOT_ATTACHED_TO_FLICKING](ERROR_CODE)|[init](Control#init)이 이전에 호출되지 않은 경우|
|[ANIMATION_INTERRUPTED](ERROR_CODE)|사용자 입력에 의해 애니메이션이 중단된 경우|
|[STOP_CALLED_BY_USER](ERROR_CODE)|발생된 이벤트들 중 하나라도 `stop()`이 호출된 경우|

+ +### init {#init} + +
+ inherited +
+ +Control을 초기화합니다 + +**Returns**: this + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|flicking|[Flicking](Flicking)|||Flicking의 인스턴스| + +### destroy {#destroy} + +
+ inherited +
+ +Control을 초기 상태로 되돌립니다 + +**Returns**: void + +### enable {#enable} + +
+ inherited +
+ +사용자의 입력(마우스/터치)를 활성화합니다 + +**Returns**: this + +### disable {#disable} + +
+ inherited +
+ +사용자의 입력(마우스/터치)를 막습니다 + +**Returns**: this + +### release {#release} + +
+ inherited +
+ +사용자의 현재 입력(마우스/터치)를 중단시킵니다 + +**Returns**: this + +### updateAnimation {#updateAnimation} + +
+ inherited +
+ +재생 중인 애니메이션의 목적지와 재생 시간을 변경합니다 + +**Returns**: this + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|panel|[Panel](Panel)|||이동할 패널| +|duration|number|✔️||애니메이션 진행 시간 (단위: ms)| +|direction|[DIRECTION](DIRECTION)|✔️||이동할 방향. [circular](Flicking#circular) 옵션 활성화시에만 사용 가능합니다| + +**Throws**: [FlickingError](FlickingError) + +[POSITION_NOT_REACHABLE](ERROR_CODE) 주어진 패널이 제거되었거나, Camera의 [range](Camera#range) 밖에 있을 경우 + +### stopAnimation {#stopAnimation} + +
+ inherited +
+ +재생 중인 애니메이션을 중단시킵니다 + +**Returns**: this + +### updatePosition {#updatePosition} + +
+ inherited +
+ +resize 이후에 position을 업데이트합니다 + +**Returns**: Promise<void> + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|progressInPanel|number|||Resize 이전 현재 선택된 패널 내에서의 카메라 progress 값| + +**Throws**: [FlickingError](FlickingError) + +[NOT_ATTACHED_TO_FLICKING](ERROR_CODE) [init](Camera#init)이 이전에 호출되지 않은 경우 + +### updateInput {#updateInput} + +
+ inherited +
+ +[controller](Control#controller)의 내부 상태를 갱신합니다 + +**Returns**: this + +### resetActive {#resetActive} + +
+ inherited +
+ +[activePanel](Control#activePanel)을 `null`로 초기화합니다 + +**Returns**: this + +### moveToPanel {#moveToPanel} + +
+ inherited + async +
+ +[Camera](Camera)를 해당 패널 위로 이동합니다 + +**Returns**: Promise<void> +- 해당 패널 도달시에 resolve되는 Promise + +**Emits**: [Flicking#event:moveStart](Flicking#event-moveStart), [Flicking#event:move](Flicking#event-move), [Flicking#event:moveEnd](Flicking#event-moveEnd), [Flicking#event:willChange](Flicking#event-willChange), [Flicking#event:changed](Flicking#event-changed), [Flicking#event:willRestore](Flicking#event-willRestore), [Flicking#event:restored](Flicking#event-restored), [Flicking#event:needPanel](Flicking#event-needPanel), [Flicking#event:visibleChange](Flicking#event-visibleChange), [Flicking#event:reachEdge](Flicking#event-reachEdge) + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|panel|[Panel](Panel)|||이동할 패널| +|options|object|||옵션 오브젝트| +|duration|number|||애니메이션 진행 시간 (단위: ms)| +|axesEvent|object|✔️||[Axes](https://naver.github.io/egjs-axes/)의 [release](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:release) 이벤트| +|direction|[DIRECTION](DIRECTION)|✔️|DIRECTION.NONE|이동할 방향. [circular](Flicking#circular) 옵션 활성화시에만 사용 가능합니다| + +**Throws**: [FlickingError](FlickingError) + +

|code|condition|
|---|---|
|[POSITION_NOT_REACHABLE](ERROR_CODE)|주어진 패널이 제거되었거나, Camera의 [range](Camera#range) 밖에 있을 경우|
|[NOT_ATTACHED_TO_FLICKING](ERROR_CODE)|[init](Control#init)이 이전에 호출되지 않은 경우|
|[ANIMATION_INTERRUPTED](ERROR_CODE)|사용자 입력에 의해 애니메이션이 중단된 경우|
|[STOP_CALLED_BY_USER](ERROR_CODE)|발생된 이벤트들 중 하나라도 `stop()`이 호출된 경우|

+ +### setActive {#setActive} + +
+ inherited +
+ +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|newActivePanel|[Panel](Panel)|||| +|prevActivePanel|[Panel](Panel) \| null|||| +|isTrusted|boolean|||| + +### copy {#copy} + +
+ inherited +
+ +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|control|[Control](Control)|||| + diff --git a/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/SnapControlOptions.mdx b/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/SnapControlOptions.mdx new file mode 100644 index 0000000000..dfd843d2f7 --- /dev/null +++ b/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/SnapControlOptions.mdx @@ -0,0 +1,18 @@ +--- +custom_edit_url: null +--- + +```ts +interface SnapControlOptions +``` + +
+ +
+ +[SnapControl](SnapControl) 생성시 사용되는 옵션 + +|PROPERTY|TYPE|DESCRIPTION| +|:---:|:---:|:---:| +|count|number|입력 중단 이후 통과하여 이동할 수 있는 패널의 최대 갯수| + diff --git a/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/State.mdx b/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/State.mdx new file mode 100644 index 0000000000..c3af7e78a7 --- /dev/null +++ b/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/State.mdx @@ -0,0 +1,164 @@ +--- +custom_edit_url: null +--- + +
⚠️ This class is for internal use only.
+ +```ts +class State +``` + +
+ +
+ +현재 사용자 입력 또는 애니메이션 상태를 나타내는 컴포넌트 + +
+
Properties
Methods
+
holding
animating
delta
targetPanel
onEnter
onHold
onChange
onRelease
onAnimationEnd
onFinish
+
+ +## Properties + +### holding {#holding} + +
+ readonly +
+ +현재 사용자가 클릭/터치중인지 여부 + +**Type**: boolean + +### animating {#animating} + +
+ readonly +
+ +현재 애니메이션 동작 여부 + +**Type**: boolean + +### delta {#delta} + +
+ readonly +
+ +이전 hold이벤트부터 change에 의해 발생한 이동 delta값의 합산 + +**Type**: number + +### targetPanel {#targetPanel} + +
+ readonly +
+ +애니메이션 종료시 [Control#activePanel](Control#activePanel)로 설정할 패널 + +**Type**: number + +## Methods + +### onEnter {#onEnter} + +
+ +
+ +현재 상태로 돌입했을때 호출되는 콜백 함수 + +**Returns**: void + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|prevState|[State](State)|||이전 상태값| + +### onHold {#onHold} + +
+ +
+ +Axes의 [hold](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:hold) 이벤트 핸들러 + +**Returns**: void + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|ctx|object|✔️||이벤트 콘텍스트| +|ctx.flicking|[Flicking](Flicking)|✔️||Flicking 인스턴스| +|ctx.axesEvent|object|✔️||Axes의 [hold](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:hold) 이벤트| +|ctx.transitTo|function|✔️||다른 상태로 변경하기 위한 함수| + +### onChange {#onChange} + +
+ +
+ +Axes의 [change](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:change) 이벤트 핸들러 + +**Returns**: void + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|ctx|object|✔️||이벤트 콘텍스트| +|ctx.flicking|[Flicking](Flicking)|✔️||Flicking 인스턴스| +|ctx.axesEvent|object|✔️||Axes의 [change](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:change) 이벤트| +|ctx.transitTo|function|✔️||다른 상태로 변경하기 위한 함수| + +### onRelease {#onRelease} + +
+ +
+ +Axes의 [release](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:release) 이벤트 핸들러 + +**Returns**: void + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|ctx|object|✔️||이벤트 콘텍스트| +|ctx.flicking|[Flicking](Flicking)|✔️||Flicking 인스턴스| +|ctx.axesEvent|object|✔️||Axes의 [release](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:release) 이벤트| +|ctx.transitTo|function|✔️||다른 상태로 변경하기 위한 함수| + +### onAnimationEnd {#onAnimationEnd} + +
+ +
+ +Axes의 [animationEnd](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:animationEnd) 이벤트 핸들러 + +**Returns**: void + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|ctx|object|✔️||이벤트 콘텍스트| +|ctx.flicking|[Flicking](Flicking)|✔️||Flicking 인스턴스| +|ctx.axesEvent|object|✔️||Axes의 [animationEnd](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:animationEnd) 이벤트| +|ctx.transitTo|function|✔️||다른 상태로 변경하기 위한 함수| + +### onFinish {#onFinish} + +
+ +
+ +Axes의 [finish](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:finish) 이벤트 핸들러 + +**Returns**: void + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|ctx|object|✔️||이벤트 콘텍스트| +|ctx.flicking|[Flicking](Flicking)|✔️||Flicking 인스턴스| +|ctx.axesEvent|object|✔️||Axes의 [finish](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:finish) 이벤트| +|ctx.transitTo|function|✔️||다른 상태로 변경하기 위한 함수| + diff --git a/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/Status.mdx b/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/Status.mdx new file mode 100644 index 0000000000..a69f2b40fe --- /dev/null +++ b/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/Status.mdx @@ -0,0 +1,25 @@ +--- +custom_edit_url: null +--- + +```ts +interface Status +``` + +
+ +
+ +[Flicking#getStatus](Flicking#getStatus)에 의해 반환된 Flicking 상태 객체 + +|PROPERTY|TYPE|DESCRIPTION| +|:---:|:---:|:---:| +|index|number|활성화된 패널의 인덱스| +|position|object|카메라 [position](Camera#position)을 설정하기 위한 정보들| +|position.panel|number|카메라가 위치한 패널의 인덱스| +|position.progressInPanel|number|패널 내에서의 카메라 위치의 진행도| +|visibleOffset|number|현재 보이는 패널들을 저장했을 때, 원래의 인덱스 대비 offset. `visiblePanelsOnly` 옵션을 사용했을 때만 사용 가능합니다| +|panels|Array<object>|패널의 정보를 담은 배열| +|panels.index|index|패널의 인덱스| +|panels.html|string \| undefined|패널 엘리먼트의 `outerHTML`| + diff --git a/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/StrictControl.mdx b/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/StrictControl.mdx new file mode 100644 index 0000000000..84c74ff373 --- /dev/null +++ b/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/StrictControl.mdx @@ -0,0 +1,298 @@ +--- +custom_edit_url: null +--- + +```ts +class StrictControl extends Control +``` + +
+ +
+ +한번에 최대로 이동할 패널의 개수를 선택 가능한 [Control](Control) + +
+
Properties
Methods
+
count
controller
activeIndex
activePanel
animating
holding
destroy
updateInput
moveToPosition
init
enable
disable
release
updateAnimation
stopAnimation
updatePosition
resetActive
moveToPanel
setActive
copy
+
+ +## constructor +```ts +new StrictControl() +``` + +
+ +
+ +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +||Partial<[StrictControlOptions](StrictControlOptions)>|✔️|{}|| + +## Properties + +### count {#count} + +
+ +
+ +최대로 움직일 수 있는 패널의 개수 + +**Type**: number + +**Default**: 1 + +### controller {#controller} + +
+ readonly + inherited +
+ +[@egjs/axes](https://naver.github.io/egjs-axes/)의 이벤트를 처리하는 컨트롤러 컴포넌트 + +**Type**: [AxesController](AxesController) + +### activeIndex {#activeIndex} + +
+ readonly + inherited +
+ +[currentPanel](Flicking#currentPanel)의 인덱스 번호 + +**Type**: number + +**Default**: 0 + +### activePanel {#activePanel} + +
+ readonly + inherited +
+ +현재 선택된 패널 + +**Type**: [Panel](Panel) \| null + +### animating {#animating} + +
+ readonly + inherited +
+ +현재 애니메이션 동작 여부 + +**Type**: boolean + +### holding {#holding} + +
+ readonly + inherited +
+ +현재 사용자가 클릭/터치중인지 여부 + +**Type**: boolean + +## Methods + +### destroy {#destroy} + +
+ +
+ +Control을 초기 상태로 되돌립니다 + +**Returns**: void + +### updateInput {#updateInput} + +
+ +
+ +[controller](Control#controller)의 내부 상태를 갱신합니다 + +**Returns**: this + +### moveToPosition {#moveToPosition} + +
+ +
+ +[Camera](Camera)를 주어진 좌표로 이동합니다 + +**Returns**: Promise<void> +- 해당 좌표 도달시에 resolve되는 Promise + +**Emits**: [Flicking#event:moveStart](Flicking#event-moveStart), [Flicking#event:move](Flicking#event-move), [Flicking#event:moveEnd](Flicking#event-moveEnd), [Flicking#event:willChange](Flicking#event-willChange), [Flicking#event:changed](Flicking#event-changed), [Flicking#event:willRestore](Flicking#event-willRestore), [Flicking#event:restored](Flicking#event-restored), [Flicking#event:needPanel](Flicking#event-needPanel), [Flicking#event:visibleChange](Flicking#event-visibleChange), [Flicking#event:reachEdge](Flicking#event-reachEdge) + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|position|number|||이동할 좌표| +|duration|number|||패널 이동 애니메이션 진행 시간 (단위: ms)| +|axesEvent|object|✔️||[Axes](https://naver.github.io/egjs-axes/)의 [release](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:release) 이벤트| + +**Throws**: [FlickingError](FlickingError) + +

|code|condition|
|---|---|
|[POSITION_NOT_REACHABLE](ERROR_CODE)|주어진 패널이 제거되었거나, Camera의 [range](Camera#range) 밖에 있을 경우|
|[NOT_ATTACHED_TO_FLICKING](ERROR_CODE)|[init](Control#init)이 이전에 호출되지 않은 경우|
|[ANIMATION_INTERRUPTED](ERROR_CODE)|사용자 입력에 의해 애니메이션이 중단된 경우|
|[STOP_CALLED_BY_USER](ERROR_CODE)|발생된 이벤트들 중 하나라도 `stop()`이 호출된 경우|

+ +### init {#init} + +
+ inherited +
+ +Control을 초기화합니다 + +**Returns**: this + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|flicking|[Flicking](Flicking)|||Flicking의 인스턴스| + +### enable {#enable} + +
+ inherited +
+ +사용자의 입력(마우스/터치)를 활성화합니다 + +**Returns**: this + +### disable {#disable} + +
+ inherited +
+ +사용자의 입력(마우스/터치)를 막습니다 + +**Returns**: this + +### release {#release} + +
+ inherited +
+ +사용자의 현재 입력(마우스/터치)를 중단시킵니다 + +**Returns**: this + +### updateAnimation {#updateAnimation} + +
+ inherited +
+ +재생 중인 애니메이션의 목적지와 재생 시간을 변경합니다 + +**Returns**: this + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|panel|[Panel](Panel)|||이동할 패널| +|duration|number|✔️||애니메이션 진행 시간 (단위: ms)| +|direction|[DIRECTION](DIRECTION)|✔️||이동할 방향. [circular](Flicking#circular) 옵션 활성화시에만 사용 가능합니다| + +**Throws**: [FlickingError](FlickingError) + +[POSITION_NOT_REACHABLE](ERROR_CODE) 주어진 패널이 제거되었거나, Camera의 [range](Camera#range) 밖에 있을 경우 + +### stopAnimation {#stopAnimation} + +
+ inherited +
+ +재생 중인 애니메이션을 중단시킵니다 + +**Returns**: this + +### updatePosition {#updatePosition} + +
+ inherited +
+ +resize 이후에 position을 업데이트합니다 + +**Returns**: Promise<void> + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|progressInPanel|number|||Resize 이전 현재 선택된 패널 내에서의 카메라 progress 값| + +**Throws**: [FlickingError](FlickingError) + +[NOT_ATTACHED_TO_FLICKING](ERROR_CODE) [init](Camera#init)이 이전에 호출되지 않은 경우 + +### resetActive {#resetActive} + +
+ inherited +
+ +[activePanel](Control#activePanel)을 `null`로 초기화합니다 + +**Returns**: this + +### moveToPanel {#moveToPanel} + +
+ inherited + async +
+ +[Camera](Camera)를 해당 패널 위로 이동합니다 + +**Returns**: Promise<void> +- 해당 패널 도달시에 resolve되는 Promise + +**Emits**: [Flicking#event:moveStart](Flicking#event-moveStart), [Flicking#event:move](Flicking#event-move), [Flicking#event:moveEnd](Flicking#event-moveEnd), [Flicking#event:willChange](Flicking#event-willChange), [Flicking#event:changed](Flicking#event-changed), [Flicking#event:willRestore](Flicking#event-willRestore), [Flicking#event:restored](Flicking#event-restored), [Flicking#event:needPanel](Flicking#event-needPanel), [Flicking#event:visibleChange](Flicking#event-visibleChange), [Flicking#event:reachEdge](Flicking#event-reachEdge) + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|panel|[Panel](Panel)|||이동할 패널| +|options|object|||옵션 오브젝트| +|duration|number|||애니메이션 진행 시간 (단위: ms)| +|axesEvent|object|✔️||[Axes](https://naver.github.io/egjs-axes/)의 [release](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:release) 이벤트| +|direction|[DIRECTION](DIRECTION)|✔️|DIRECTION.NONE|이동할 방향. [circular](Flicking#circular) 옵션 활성화시에만 사용 가능합니다| + +**Throws**: [FlickingError](FlickingError) + +

|code|condition|
|---|---|
|[POSITION_NOT_REACHABLE](ERROR_CODE)|주어진 패널이 제거되었거나, Camera의 [range](Camera#range) 밖에 있을 경우|
|[NOT_ATTACHED_TO_FLICKING](ERROR_CODE)|[init](Control#init)이 이전에 호출되지 않은 경우|
|[ANIMATION_INTERRUPTED](ERROR_CODE)|사용자 입력에 의해 애니메이션이 중단된 경우|
|[STOP_CALLED_BY_USER](ERROR_CODE)|발생된 이벤트들 중 하나라도 `stop()`이 호출된 경우|

+ +### setActive {#setActive} + +
+ inherited +
+ +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|newActivePanel|[Panel](Panel)|||| +|prevActivePanel|[Panel](Panel) \| null|||| +|isTrusted|boolean|||| + +### copy {#copy} + +
+ inherited +
+ +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|control|[Control](Control)|||| + diff --git a/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/StrictControlOptions.mdx b/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/StrictControlOptions.mdx new file mode 100644 index 0000000000..7869c8f5fb --- /dev/null +++ b/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/StrictControlOptions.mdx @@ -0,0 +1,18 @@ +--- +custom_edit_url: null +--- + +```ts +interface StrictControlOptions +``` + +
+ +
+ +[StrictControl](StrictControl) 생성시 사용되는 옵션 + +|PROPERTY|TYPE|DESCRIPTION| +|:---:|:---:|:---:| +|count|number|최대로 움직일 수 있는 패널의 개수| + diff --git a/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/TogglePoint.mdx b/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/TogglePoint.mdx new file mode 100644 index 0000000000..9f0a1b4628 --- /dev/null +++ b/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/TogglePoint.mdx @@ -0,0 +1,22 @@ +--- +custom_edit_url: null +--- + +```ts +interface TogglePoint +``` + +### TogglePoint {#TogglePoint} + +
+ +
+ +패널 엘리먼트 순서가 변경되는 좌표의 데이터 + +|PROPERTY|TYPE|DESCRIPTION| +|:---:|:---:|:---:| +|panel|[Panel](Panel)|순서를 변경할 패널| +|direction|[DIRECTION](DIRECTION)|순서를 변경할 방향| +|toggled|boolean|`direction` 방향으로 패널 위치를 변경했는지 여부를 나타내는 값| + diff --git a/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/VanillaRenderer.mdx b/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/VanillaRenderer.mdx new file mode 100644 index 0000000000..cfb04d98d4 --- /dev/null +++ b/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/VanillaRenderer.mdx @@ -0,0 +1,216 @@ +--- +custom_edit_url: null +--- + +```ts +class VanillaRenderer extends Renderer +``` + +
+ +
+ +
+
Properties
Methods
+
panels
rendering
panelCount
strategy
align
render
init
destroy
getPanel
updatePanelSize
batchInsert
batchInsertDefer
batchRemove
batchRemoveDefer
updateAfterPanelChange
checkPanelContentsReady
+
+ +## Properties + +### panels {#panels} + +
+ readonly + inherited +
+ +전체 패널들의 배열 + +**Type**: Array<[Panel](Panel)> + +**See**: +- [Panel](Panel) + +### rendering {#rendering} + +
+ readonly + inherited +
+ +현재 렌더링이 시작되어 끝나기 전까지의 상태인지의 여부 + +**Type**: boolean + +### panelCount {#panelCount} + +
+ readonly + inherited +
+ +전체 패널의 개수 + +**Type**: number + +### strategy {#strategy} + +
+ inherited +
+ +### align {#align} + +
+ inherited +
+ +[Panel](Panel)에 공통적으로 적용할 [align](Panel#align) 값 + +**Type**: Constants.ALIGN \| string \| number + +## Methods + +### render {#render} + +
+ inherited +
+ +패널 엘리먼트들을 카메라 엘리먼트 내부에 렌더링합니다 + +**Returns**: this + +### init {#init} + +
+ inherited +
+ +Renderer를 초기화합니다 + +**Returns**: this + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|flicking|[Flicking](Flicking)|||Flicking의 인스턴스| + +### destroy {#destroy} + +
+ inherited +
+ +Renderer를 초기 상태로 되돌립니다 + +**Returns**: void + +### getPanel {#getPanel} + +
+ inherited +
+ +주어진 인덱스에 해당하는 [Panel](Panel)을 반환합니다. 주어진 인덱스에 해당하는 패널이 존재하지 않을 경우 `null`을 반환합니다. + +**Returns**: [Panel](Panel) \| null +- 주어진 인덱스에 해당하는 패널 + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|index|number|||| + +**See**: +- [Panel](Panel) + +### updatePanelSize {#updatePanelSize} + +
+ inherited +
+ +모든 패널의 크기를 업데이트합니다 + +**Returns**: this + +### batchInsert {#batchInsert} + +
+ inherited +
+ +주어진 인덱스에 새로운 패널들을 추가합니다
해당 인덱스보다 같거나 큰 인덱스를 가진 기존 패널들은 추가한 패널의 개수만큼 인덱스가 증가합니다. + +**Returns**: Array<[Panel](Panel)> +- 추가된 패널들의 배열 + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|items|Array<object>|||추가할 아이템들의 배열| +|items.index|number|✔️||새로 패널들을 추가할 인덱스| +|items.elements|Array<any>|✔️||엘리먼트의 배열 혹은 프레임워크에서 엘리먼트를 포함한 컴포넌트들의 배열| +|items.hasDOMInElements|boolean|✔️||내부에 실제 DOM 엘리먼트들을 포함하고 있는지 여부. true로 설정할 경우, 렌더러는 해당 엘리먼트들을 카메라 엘리먼트 내부에 추가합니다| + +### batchInsertDefer {#batchInsertDefer} + +
+ inherited +
+ +Defers update
camera position & others will be updated after calling updateAfterPanelChange + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|...items|Array<{index: number, elements: any[], hasDOMInElements: boolean}>|||| + +### batchRemove {#batchRemove} + +
+ inherited +
+ +주어진 인덱스의 패널을 제거합니다
해당 인덱스보다 큰 인덱스를 가진 기존 패널들은 제거한 패널의 개수만큼 인덱스가 감소합니다 + +**Returns**: [Panel](Panel)[] +- 제거된 패널들의 배열 + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|items|Array<object>|||제거할 아이템들의 배열| +|items.index|number|✔️||제거할 패널의 인덱스| +|items.deleteCount|number|✔️|1|`index` 이후로 제거할 패널의 개수| +|items.hasDOMInElements|boolean|✔️|1|내부에 실제 DOM 엘리먼트들을 포함하고 있는지 여부. true로 설정할 경우, 렌더러는 해당 엘리먼트들을 카메라 엘리먼트 내부에서 제거합니다| + +### batchRemoveDefer {#batchRemoveDefer} + +
+ inherited +
+ +Defers update
camera position & others will be updated after calling updateAfterPanelChange + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|...items|Array<{index: number, deleteCount: number, hasDOMInElements: boolean}>|||| + +### updateAfterPanelChange {#updateAfterPanelChange} + +
+ inherited +
+ +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|panelsAdded|[Panel](Panel)[]|||| +|panelsRemoved|[Panel](Panel)[]|||| + +### checkPanelContentsReady {#checkPanelContentsReady} + +
+ inherited +
+ +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|checkingPanels|[Panel](Panel)[]|||| + diff --git a/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/Viewport.mdx b/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/Viewport.mdx new file mode 100644 index 0000000000..f97e7b2c39 --- /dev/null +++ b/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/Viewport.mdx @@ -0,0 +1,106 @@ +--- +custom_edit_url: null +--- + +```ts +class Viewport +``` + +
+ +
+ +뷰포트 크기 정보를 담당하는 컴포넌트 + +
+
Properties
Methods
+
element
width
height
padding
setSize
resize
+
+ +## constructor +```ts +new Viewport(el, el) +``` + +
+ +
+ +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|el|[Flicking](Flicking)|||뷰포트 엘리먼트| +|el|HTMLElement|||| + +## Properties + +### element {#element} + +
+ readonly +
+ +뷰포트(root) 엘리먼트 + +**Type**: HTMLElement + +### width {#width} + +
+ readonly +
+ +뷰포트 너비 + +**Type**: number + +### height {#height} + +
+ readonly +
+ +뷰포트 높이 + +**Type**: number + +### padding {#padding} + +
+ readonly +
+ +뷰포트 CSS padding 값 + +**Type**: object + +|PROPERTY|TYPE|DESCRIPTION| +|:---:|:---:|:---:| +|left|number|CSS `padding-left`| +|right|number|CSS `padding-right`| +|top|number|CSS `padding-top`| +|bottom|number|CSS `padding-bottom`| + +## Methods + +### setSize {#setSize} + +
+ +
+ +뷰포트 크기를 변경합니다.
`.flicking-viewport` 엘리먼트에 해당 크기의 CSS width/height를 적용합니다 + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|size|object|✔️||새 뷰포트 크기| +|size.width|number \| string|✔️||CSS 문자열 또는 숫자(px)| +|size.height|number \| string|✔️||CSS 문자열 또는 숫자(px)| + +### resize {#resize} + +
+ +
+ +현재 뷰포트 엘리먼트의 크기로 너비/높이를 업데이트합니다 + diff --git a/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/VirtualPanel.mdx b/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/VirtualPanel.mdx new file mode 100644 index 0000000000..30991fcdc5 --- /dev/null +++ b/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.12.0/api/VirtualPanel.mdx @@ -0,0 +1,498 @@ +--- +custom_edit_url: null +--- + +```ts +class VirtualPanel extends Panel +``` + +
+ +
+ +슬라이드 데이터 컴포넌트로, 단일 HTMLElement의 정보를 갖고 있습니다 + +
+
Properties
Methods
+
element
cachedInnerHTML
elementIndex
elementProvider
index
position
size
sizeIncludingMargin
height
margin
alignPosition
removed
rendered
loading
range
toggled
toggleDirection
offset
progress
outsetProgress
visibleRatio
align
markForShow
markForHide
resize
setSize
contains
destroy
includePosition
includeRange
isVisibleOnRange
focus
prev
next
increaseIndex
decreaseIndex
updatePosition
toggle
updateCircularToggleDirection
+
+ +## constructor +```ts +new VirtualPanel(options, options.index, options.align, options.flicking) +``` + +
+ +
+ +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|options|object|||옵션 오브젝트| +|options.index|number|✔️||패널의 초기 인덱스| +|options.align|Constants.ALIGN \| string \| number|✔️||패널의 초기 [align](Flicking#align)값| +|options.flicking|[Flicking](Flicking)|✔️||패널이 참조하는 [Flicking](Flicking) 인스턴스| + +## Properties + +### element {#element} + +
+ readonly +
+ +패널이 참조하고 있는 `HTMLElement` + +**Type**: HTMLElement + +### cachedInnerHTML {#cachedInnerHTML} + +
+ readonly +
+ +이전 렌더링에서 캐시된 innerHTML 정보 + +**Type**: string \| null + +### elementIndex {#elementIndex} + +
+ readonly +
+ +몇 번째 엘리먼트에 렌더링될 것인지를 나타내는 숫자 + +**Type**: number + +### elementProvider {#elementProvider} + +
+ readonly + inherited +
+ +### index {#index} + +
+ readonly + inherited +
+ +패널의 인덱스 + +**Type**: number + +### position {#position} + +
+ readonly + inherited +
+ +패널의 현재 좌표, [alignPosition](Panel#alignPosition)을 포함하고 있습니다 + +**Type**: number + +### size {#size} + +
+ readonly + inherited +
+ +패널 엘리먼트의 캐시된 크기
이 값은 [horizontal](Flicking#horizontal)이 `true`일 경우 [element](Panel#element)의 `offsetWidth`와 동일하고, `false`일 경우 `offsetHeight`와 동일합니다 + +**Type**: number + +### sizeIncludingMargin {#sizeIncludingMargin} + +
+ readonly + inherited +
+ +CSS `margin`을 포함한 패널의 크기
이 값은 [horizontal](Flicking#horizontal)이 `true`일 경우 margin left/right을 포함하고, `false`일 경우 margin top/bottom을 포함합니다 + +**Type**: number + +### height {#height} + +
+ readonly + inherited +
+ +패널 엘리먼트의 높이 + +**Type**: number + +### margin {#margin} + +
+ readonly + inherited +
+ +패널 엘리먼트의 CSS `margin` 값 + +**Type**: object + +|PROPERTY|TYPE|DESCRIPTION| +|:---:|:---:|:---:| +|prev|number|[horizontal](Flicking#horizontal)이 `true`일 경우 `margin-left`, `false`일 경우 `margin-top`에 해당하는 값| +|next|number|[horizontal](Flicking#horizontal)이 `true`일 경우 `margin-right`, `false`일 경우 `margin-bottom`에 해당하는 값| + +### alignPosition {#alignPosition} + +
+ readonly + inherited +
+ +패널의 정렬 기준 위치. [Camera](Camera)의 뷰포트 내에서의 [alignPosition](Camera#alignPosition)이 위치해야 하는 곳입니다 + +**Type**: number + +### removed {#removed} + +
+ readonly + inherited +
+ +패널이 [remove](Flicking#remove)되었는지 여부를 나타내는 값 + +**Type**: boolean + +### rendered {#rendered} + +
+ readonly + inherited +
+ +패널의 엘리먼트가 화면상에 렌더링되고있는지 여부를 나타내는 값 + +**Type**: boolean + +### loading {#loading} + +
+ readonly + inherited +
+ +패널 내부의 이미지/비디오가 아직 로드되지 않아 [resize](Panel#resize)될 것인지를 나타내는 값 + +**Type**: boolean + +### range {#range} + +
+ readonly + inherited +
+ +패널 엘리먼트의 Bounding box 범위 + +**Type**: object + +|PROPERTY|TYPE|DESCRIPTION| +|:---:|:---:|:---:| +|min|number|Bounding box's left([horizontal](Flicking#horizontal): true) / top([horizontal](Flicking#horizontal): false)| +|max|number|Bounding box's right([horizontal](Flicking#horizontal): true) / bottom([horizontal](Flicking#horizontal): false)| + +### toggled {#toggled} + +
+ readonly + inherited +
+ +패널의 위치가 circular 동작에 의해 토글되었는지 여부를 나타내는 값 + +**Type**: boolean + +### toggleDirection {#toggleDirection} + +
+ readonly + inherited +
+ +패널의 위치가 circular 동작에 의해 토글되는 방향 + +**Type**: [DIRECTION](DIRECTION) + +### offset {#offset} + +
+ readonly + inherited +
+ +[Panel#order](Panel#order)에 의한 실제 위치 변경값 + +**Type**: number + +### progress {#progress} + +
+ readonly + inherited +
+ +이 패널로부터 이전/다음 패널으로의 이동 진행률 + +**Type**: number + +### outsetProgress {#outsetProgress} + +
+ readonly + inherited +
+ +현재 패널이 뷰포트 영역 밖으로 완전히 사라지는 지점을 기준으로 하는 진행도(prev방향: -1, 선택 지점: 0, next방향: 1) + +**Type**: number + +### visibleRatio {#visibleRatio} + +
+ readonly + inherited +
+ +뷰포트 안에서 패널이 보이는 영역의 비율 + +**Type**: number + +### align {#align} + +
+ inherited +
+ +[alignPosition](Panel#alignPosition)이 패널 내의 어디에 위치해야 하는지를 나타내는 값 + +**Type**: Constants.ALIGN \| string \| number + +## Methods + +### markForShow {#markForShow} + +
+ inherited +
+ +Mark panel element to be appended on the camera element + +### markForHide {#markForHide} + +
+ inherited +
+ +Mark panel element to be removed from the camera element + +### resize {#resize} + +
+ inherited +
+ +패널의 크기를 갱신합니다 + +**Returns**: this + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|cached|object|✔️||사전에 캐시된 패널의 크기 정보| + +### setSize {#setSize} + +
+ inherited +
+ +패널 크기를 변경합니다. 패널 엘리먼트에 해당 크기의 CSS width/height를 적용합니다 + +**Returns**: this + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|size|object|✔️||새 패널 크기| +|size.width|number \| string|✔️||CSS 문자열 또는 숫자(px)| +|size.height|number \| string|✔️||CSS 문자열 또는 숫자(px)| + +### contains {#contains} + +
+ inherited +
+ +해당 엘리먼트가 이 패널의 [element](Panel#element) 내에 포함되어 있는지를 반환합니다 + +**Returns**: boolean +- 패널의 [element](Panel#element)내에 해당 엘리먼트 포함 여부 + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|element|HTMLElement|||확인하고자 하는 HTMLElement| + +### destroy {#destroy} + +
+ inherited +
+ +내부 상태를 초기화하고 [removed](Panel#removed)를 `true`로 설정합니다. + +**Returns**: void + +### includePosition {#includePosition} + +
+ inherited +
+ +주어진 좌표가 현재 패널의 [range](Panel#range)내에 속해있는지를 반환합니다. + +**Returns**: boolean +- 해당 좌표가 패널 영역 내에 속해있는지 여부 + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|pos|number|||확인하고자 하는 좌표| +|includeMargin|boolean|✔️|false|패널 영역에 [margin](Panel#margin)값을 포함시킵니다| + +### includeRange {#includeRange} + +
+ inherited +
+ +주어진 범위가 이 패널 내부에 완전히 포함되는지를 반환합니다 + +**Returns**: boolean +- 해당 범위가 패널 영역 내에 완전히 속해있는지 여부 + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|min|number|||확인하고자 하는 최소 범위| +|max|number|||확인하고자 하는 최대 범위| +|includeMargin|boolean|✔️|false|패널 영역에 [margin](Panel#margin)값을 포함시킵니다| + +### isVisibleOnRange {#isVisibleOnRange} + +
+ inherited +
+ +주어진 범위 내에서 이 패널의 일부가 보여지는지를 반환합니다 + +**Returns**: boolean +- 해당 범위 내에서 패널을 볼 수 있는지 여부 + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|min|number|||확인하고자 하는 최소 범위| +|max|number|||확인하고자 하는 최대 범위| + +### focus {#focus} + +
+ inherited +
+ +[Camera](Camera)를 이 패널로 이동합니다 + +**Returns**: Promise<void> +- 패널 도달시에 resolve되는 Promise + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|duration|number|✔️||애니메이션 진행 시간 (단위: ms)| + +### prev {#prev} + +
+ inherited +
+ +이전(`index - 1`) 패널을 반환합니다. 이전 패널이 없을 경우 `null`을 반환합니다
[circular](Flicking#circularEnabled) 모드가 활성화되었을 때 첫번째 패널에서 이 메소드를 호출할 경우 마지막 패널을 반환합니다 + +**Returns**: [Panel](Panel) \| null +- 이전 패널 + +### next {#next} + +
+ inherited +
+ +다음(`index + 1`) 패널을 반환합니다. 다음 패널이 없을 경우 `null`을 반환합니다
[circular](Flicking#circularEnabled) 모드가 활성화되었을 때 마지막 패널에서 이 메소드를 호출할 경우 첫번째 패널을 반환합니다 + +**Returns**: [Panel](Panel) \| null +- 다음 패널 + +### increaseIndex {#increaseIndex} + +
+ inherited +
+ +패널의 인덱스를 주어진 값만큼 증가시킵니다 + +**Returns**: this + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|val|number|||0보다 같거나 큰 정수| + +### decreaseIndex {#decreaseIndex} + +
+ inherited +
+ +패널의 인덱스를 주어진 값만큼 감소시킵니다 + +**Returns**: this + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|val|number|||0보다 같거나 큰 정수| + +### updatePosition {#updatePosition} + +
+ inherited +
+ +**Returns**: this + +### toggle {#toggle} + +
+ inherited +
+ +**Returns**: boolean +- toggled + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|prevPos|number|||| +|newPos|number|||| + +### updateCircularToggleDirection {#updateCircularToggleDirection} + +
+ inherited +
+ +**Returns**: this + diff --git a/docs/package-lock.json b/docs/package-lock.json index 742858c174..7d351aefeb 100644 --- a/docs/package-lock.json +++ b/docs/package-lock.json @@ -11,7 +11,7 @@ "@docusaurus/core": "2.4.3", "@docusaurus/preset-classic": "2.4.3", "@egjs/flicking-plugins": "^4.6.0", - "@egjs/react-flicking": "^4.12.0-beta.6", + "@egjs/react-flicking": "^4.12.0", "@egjs/react-grid": "^1.1.2", "@mdx-js/react": "^1.6.21", "bulma": "^0.9.2", @@ -2629,10 +2629,9 @@ "integrity": "sha512-cLcGizTrrUNA2EYE3MBmEDt2tQv1joVP1Q3oDisZ5nw0MZDx2kcgEXM+/kZpfa/PAkFvYVhRUZwytIQWoN3V/w==" }, "node_modules/@egjs/flicking": { - "version": "4.11.4", - "resolved": "https://registry.npmjs.org/@egjs/flicking/-/flicking-4.11.4.tgz", - "integrity": "sha512-ZQxJS0C9lZ/PcMfM7vo9KQW4tvmi+e+9HIxRstRCo2DGy0nJ6LklZt0b+POf6O9Ak0qZwDeHCGp6AhrDu9EPNA==", - "peer": true, + "version": "4.12.0", + "resolved": "https://registry.npmjs.org/@egjs/flicking/-/flicking-4.12.0.tgz", + "integrity": "sha512-HSducaQozc24HAxR5RfI2pRSqxZI1GxudAL52I7yoUj2yYCmY76Vhld9QzrTSWHFLfj7muv+XXB7Lv85HwZahg==", "dependencies": { "@egjs/axes": "^3.9.1", "@egjs/component": "^3.0.1", @@ -2681,23 +2680,12 @@ "integrity": "sha512-OTFTDQcWS+1ZREOdCWuk5hCBgYO4OsD30lXcOCyVOAjXMhgL5rBRDnt/otb6Nz8CzU0L/igdcaQBDLWc4t9gvg==" }, "node_modules/@egjs/react-flicking": { - "version": "4.12.0-beta.6", - "resolved": "https://registry.npmjs.org/@egjs/react-flicking/-/react-flicking-4.12.0-beta.6.tgz", - "integrity": "sha512-QJp7K+KY9vG8QdpQF0NZwib13U+6bNkEZr0ecqL1PSj9yfXVsXeluC3l1lxqdnGkSGPOn4Er2lm88kQvddKXxQ==", + "version": "4.12.0", + "resolved": "https://registry.npmjs.org/@egjs/react-flicking/-/react-flicking-4.12.0.tgz", + "integrity": "sha512-GyyzG/YOQ39r4fAy3MP2qHcshBipnWdIEbnGV50dVrmdtiy2ZADx9MhyIqlx6093lrK4Q35R0Qix+CNdGwV5GQ==", "dependencies": { "@egjs/component": "^3.0.2", - "@egjs/flicking": "~4.12.0-beta.6", - "@egjs/list-differ": "^1.0.1" - } - }, - "node_modules/@egjs/react-flicking/node_modules/@egjs/flicking": { - "version": "4.12.0-beta.7", - "resolved": "https://registry.npmjs.org/@egjs/flicking/-/flicking-4.12.0-beta.7.tgz", - "integrity": "sha512-KoT9M6nl+P3GaHtQ0gKnpzlHsIiBoMOcxTMbIGzo9D55AogfJtRrMyDV3umCY7fvMvzSvPu6Q7Mb0GJuLnsSFA==", - "dependencies": { - "@egjs/axes": "^3.9.0", - "@egjs/component": "^3.0.1", - "@egjs/imready": "^1.3.1", + "@egjs/flicking": "~4.12.0", "@egjs/list-differ": "^1.0.1" } }, diff --git a/docs/package.json b/docs/package.json index 3d21caa029..1810c14afd 100644 --- a/docs/package.json +++ b/docs/package.json @@ -17,7 +17,7 @@ "@docusaurus/core": "2.4.3", "@docusaurus/preset-classic": "2.4.3", "@egjs/flicking-plugins": "^4.6.0", - "@egjs/react-flicking": "^4.12.0-beta.6", + "@egjs/react-flicking": "^4.12.0", "@egjs/react-grid": "^1.1.2", "@mdx-js/react": "^1.6.21", "bulma": "^0.9.2", diff --git a/docs/versioned_docs/version-4.12.0/api/ALIGN.mdx b/docs/versioned_docs/version-4.12.0/api/ALIGN.mdx new file mode 100755 index 0000000000..5f08d569ff --- /dev/null +++ b/docs/versioned_docs/version-4.12.0/api/ALIGN.mdx @@ -0,0 +1,22 @@ +--- +custom_edit_url: null +--- + +```ts +const ALIGN +``` + +
+ +
+ +An object with all possible predefined literal string for the [align](Flicking#align) option + +**Type**: object + +|PROPERTY|TYPE|DESCRIPTION| +|:---:|:---:|:---:| +|PREV|"prev"|left/top align| +|CENTER|"center"|center align| +|NEXT|"next"|right/bottom align| + diff --git a/docs/versioned_docs/version-4.12.0/api/AnchorPoint.mdx b/docs/versioned_docs/version-4.12.0/api/AnchorPoint.mdx new file mode 100755 index 0000000000..7a6658952d --- /dev/null +++ b/docs/versioned_docs/version-4.12.0/api/AnchorPoint.mdx @@ -0,0 +1,67 @@ +--- +custom_edit_url: null +--- + +```ts +class AnchorPoint +``` + +
+ +
+ +A data component that has actual position where the camera should be stopped at + +
+
Properties
+
index
position
panel
+
+ +## constructor +```ts +new AnchorPoint(options, options.index, options.position, options.panel) +``` + +
+ +
+ +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|options|object|||An options object| +|options.index|number|✔️||Index of AnchorPoint| +|options.position|number|✔️||Position of AnchorPoint| +|options.panel|[Panel](Panel)|✔️||A [Panel](Panel) instance AnchorPoint is referencing to| + +## Properties + +### index {#index} + +
+ readonly +
+ +Index of AnchorPoint + +**Type**: number + +### position {#position} + +
+ readonly +
+ +Position of AnchorPoint + +**Type**: number + +### panel {#panel} + +
+ readonly +
+ +A [Panel](Panel) instance AnchorPoint is referencing to + +**Type**: [Panel](Panel) + diff --git a/docs/versioned_docs/version-4.12.0/api/AnimatingState.mdx b/docs/versioned_docs/version-4.12.0/api/AnimatingState.mdx new file mode 100755 index 0000000000..096e71e4eb --- /dev/null +++ b/docs/versioned_docs/version-4.12.0/api/AnimatingState.mdx @@ -0,0 +1,166 @@ +--- +custom_edit_url: null +--- + +
⚠️ This class is for internal use only.
+ +```ts +class AnimatingState extends State +``` + +
+ +
+ +A state that activates when Flicking's animating by user input or method call + +
+
Properties
Methods
+
holding
animating
delta
targetPanel
onEnter
onHold
onChange
onRelease
onAnimationEnd
onFinish
+
+ +## Properties + +### holding {#holding} + +
+ readonly +
+ +Whether user is clicking or touching + +**Type**: false + +### animating {#animating} + +
+ readonly +
+ +Whether Flicking's animating + +**Type**: true + +### delta {#delta} + +
+ readonly + inherited +
+ +A sum of delta values of change events from the last hold event of Axes + +**Type**: number + +### targetPanel {#targetPanel} + +
+ readonly + inherited +
+ +A panel to set as [Control#activePanel](Control#activePanel) after the animation is finished + +**Type**: number + +## Methods + +### onEnter {#onEnter} + +
+ inherited +
+ +An callback which is called when state has changed to this state + +**Returns**: void + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|prevState|[State](State)|||An previous state| + +### onHold {#onHold} + +
+ inherited +
+ +An event handler for Axes's [hold](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:hold) event + +**Returns**: void + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|ctx|object|✔️||Event context| +|ctx.flicking|[Flicking](Flicking)|✔️||An instance of Flicking| +|ctx.axesEvent|object|✔️||A [hold](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:hold) event of Axes| +|ctx.transitTo|function|✔️||A function for changing current state to other state| + +### onChange {#onChange} + +
+ inherited +
+ +An event handler for Axes's [change](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:change) event + +**Returns**: void + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|ctx|object|✔️||Event context| +|ctx.flicking|[Flicking](Flicking)|✔️||An instance of Flicking| +|ctx.axesEvent|object|✔️||A [change](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:change) event of Axes| +|ctx.transitTo|function|✔️||A function for changing current state to other state| + +### onRelease {#onRelease} + +
+ inherited +
+ +An event handler for Axes's [release](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:release) event + +**Returns**: void + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|ctx|object|✔️||Event context| +|ctx.flicking|[Flicking](Flicking)|✔️||An instance of Flicking| +|ctx.axesEvent|object|✔️||A [release](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:release) event of Axes| +|ctx.transitTo|function|✔️||A function for changing current state to other state| + +### onAnimationEnd {#onAnimationEnd} + +
+ inherited +
+ +An event handler for Axes's [animationEnd](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:animationEnd) event + +**Returns**: void + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|ctx|object|✔️||Event context| +|ctx.flicking|[Flicking](Flicking)|✔️||An instance of Flicking| +|ctx.axesEvent|object|✔️||A [animationEnd](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:animationEnd) event of Axes| +|ctx.transitTo|function|✔️||A function for changing current state to other state| + +### onFinish {#onFinish} + +
+ inherited +
+ +An event handler for Axes's [finish](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:finish) event + +**Returns**: void + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|ctx|object|✔️||Event context| +|ctx.flicking|[Flicking](Flicking)|✔️||An instance of Flicking| +|ctx.axesEvent|object|✔️||A [finish](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:finish) event of Axes| +|ctx.transitTo|function|✔️||A function for changing current state to other state| + diff --git a/docs/versioned_docs/version-4.12.0/api/AxesController.mdx b/docs/versioned_docs/version-4.12.0/api/AxesController.mdx new file mode 100755 index 0000000000..f9dea2b38f --- /dev/null +++ b/docs/versioned_docs/version-4.12.0/api/AxesController.mdx @@ -0,0 +1,273 @@ +--- +custom_edit_url: null +--- + +
⚠️ This class is for internal use only.
+ +```ts +class AxesController +``` + +
+ +
+ +A controller that handles the [@egjs/axes](https://naver.github.io/egjs-axes/) events + +
+
Properties
Methods
+
axes
panInput
stateMachine
state
animatingContext
controlParams
enabled
position
range
bounce
init
destroy
enable
disable
release
updateAnimation
stopAnimation
update
addPreventClickHandler
removePreventClickHandler
animateTo
+
+ +## Properties + +### axes {#axes} + +
+ readonly +
+ +An [Axes](https://naver.github.io/egjs-axes/docs/api/Axes) instance + +**Type**: Axes \| null + +**See**: +- https://naver.github.io/egjs-axes/docs/api/Axes + +### panInput {#panInput} + +
+ readonly +
+ +An [PanInput](https://naver.github.io/egjs-axes/docs/api/PanInput) instance + +**Type**: PanInput \| null + +**See**: +- https://naver.github.io/egjs-axes/docs/api/PanInput + +### stateMachine {#stateMachine} + +
+ +
+ +### state {#state} + +
+ +
+ +A activated [State](State) that shows the current status of the user input or the animation + +**Type**: [State](State) + +### animatingContext {#animatingContext} + +
+ readonly +
+ +A context of the current animation playing + +**Type**: object + +|PROPERTY|TYPE|DESCRIPTION| +|:---:|:---:|:---:| +|start|number|A start position of the animation| +|end|number|A end position of the animation| +|offset|number|camera offset| + +### controlParams {#controlParams} + +
+ +
+ +A current control parameters of the Axes instance + +**Type**: [ControlParams](ControlParams) + +**Returns**: [ControlParams](ControlParams) + +### enabled {#enabled} + +
+ readonly +
+ +A Boolean indicating whether the user input is enabled + +**Type**: boolean + +### position {#position} + +
+ readonly +
+ +Current position value in [Axes](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html) instance + +**Type**: number + +### range {#range} + +
+ readonly +
+ +Current range value in [Axes](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html) instance + +**Type**: Array<number> + +### bounce {#bounce} + +
+ readonly +
+ +Actual bounce size(px) + +**Type**: Array<number> + +## Methods + +### init {#init} + +
+ +
+ +Initialize AxesController + +**Returns**: this + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|flicking|[Flicking](Flicking)|||An instance of Flicking| + +### destroy {#destroy} + +
+ +
+ +Destroy AxesController and return to initial state + +**Returns**: void + +### enable {#enable} + +
+ +
+ +Enable input from the user (mouse/touch) + +**Returns**: this + +### disable {#disable} + +
+ +
+ +Disable input from the user (mouse/touch) + +**Returns**: this + +### release {#release} + +
+ +
+ +Releases ongoing user input (mouse/touch) + +**Returns**: this + +### updateAnimation {#updateAnimation} + +
+ +
+ +Change the destination and duration of the animation currently playing + +**Returns**: this + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|position|number|||A position to move| +|duration|number|✔️||Duration of the animation (unit: ms)| + +### stopAnimation {#stopAnimation} + +
+ +
+ +Stops the animation currently playing + +**Returns**: this + +### update {#update} + +
+ +
+ +Update [@egjs/axes](https://naver.github.io/egjs-axes/)'s state + +**Returns**: this + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|controlParams|[ControlParams](ControlParams)|||| + +**Throws**: [FlickingError](FlickingError) + +[NOT_ATTACHED_TO_FLICKING](ERROR_CODE) When [init](AxesController#init) is not called before + +### addPreventClickHandler {#addPreventClickHandler} + +
+ +
+ +Attach a handler to the camera element to prevent click events during animation + +**Returns**: this + +### removePreventClickHandler {#removePreventClickHandler} + +
+ +
+ +Detach a handler to the camera element to prevent click events during animation + +**Returns**: this + +### animateTo {#animateTo} + +
+ +
+ +Run Axes's [setTo](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#setTo) using the given position + +**Returns**: Promise<void> +- A Promise which will be resolved after reaching the target position + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|position|number|||A position to move| +|duration|number|||Duration of the animation (unit: ms)| +|axesEvent|number|✔️||If provided, it'll use its [setTo](https://naver#github#io/egjs-axes/release/latest/doc/eg#Axes#html#setTo) method instead| + +**Throws**: [FlickingError](FlickingError) + +|code|condition|
|---|---|
|[NOT_ATTACHED_TO_FLICKING](ERROR_CODE)|When [init](Control#init) is not called before|
|[ANIMATION_INTERRUPTED](ERROR_CODE)|When the animation is interrupted by user input| + diff --git a/docs/versioned_docs/version-4.12.0/api/CIRCULAR_FALLBACK.mdx b/docs/versioned_docs/version-4.12.0/api/CIRCULAR_FALLBACK.mdx new file mode 100755 index 0000000000..4a2e7f1b8b --- /dev/null +++ b/docs/versioned_docs/version-4.12.0/api/CIRCULAR_FALLBACK.mdx @@ -0,0 +1,21 @@ +--- +custom_edit_url: null +--- + +```ts +const CIRCULAR_FALLBACK +``` + +
+ +
+ +An object with all possible [circularFallback](Flicking#circularFallback)s + +**Type**: object + +|PROPERTY|TYPE|DESCRIPTION| +|:---:|:---:|:---:| +|LINEAR|string|"linear"| +|BOUND|string|"bound"| + diff --git a/docs/versioned_docs/version-4.12.0/api/Camera.mdx b/docs/versioned_docs/version-4.12.0/api/Camera.mdx new file mode 100755 index 0000000000..d036157a6c --- /dev/null +++ b/docs/versioned_docs/version-4.12.0/api/Camera.mdx @@ -0,0 +1,492 @@ +--- +custom_edit_url: null +--- + +```ts +class Camera +``` + +
+ +
+ +A component that manages actual movement inside the viewport + +
+
Properties
Methods
+
element
children
position
alignPosition
offset
circularEnabled
mode
range
rangeDiff
visiblePanels
visibleRange
anchorPoints
controlParams
atEdge
size
progress
panelOrder
align
init
destroy
lookAt
getPrevAnchor
getNextAnchor
getProgressInPanel
findAnchorIncludePosition
findNearestAnchor
findActiveAnchor
clampToReachablePosition
canReach
canSee
updateRange
updateAlignPos
updateAnchors
updateAdaptiveHeight
updateOffset
updatePanelOrder
resetNeedPanelHistory
applyTransform
+
+ +## constructor +```ts +new Camera(flicking, ) +``` + +
+ +
+ +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|flicking|[Flicking](Flicking)|||| +||Partial<CameraOptions>|✔️|{}|| + +## Properties + +### element {#element} + +
+ readonly +
+ +The camera element(`.flicking-camera`) + +**Type**: HTMLElement + +### children {#children} + +
+ readonly +
+ +An array of the child elements of the camera element(`.flicking-camera`) + +**Type**: Array<HTMLElement> + +### position {#position} + +
+ readonly +
+ +Current position of the camera + +**Type**: number + +### alignPosition {#alignPosition} + +
+ readonly +
+ +Align position inside the viewport where [Panel](Panel)'s [alignPosition](Panel#alignPosition) should be located at + +**Type**: number + +### offset {#offset} + +
+ readonly +
+ +Position offset, used for the [renderOnlyVisible](Flicking#renderOnlyVisible) option + +**Type**: number + +**Default**: 0 + +### circularEnabled {#circularEnabled} + +
+ readonly +
+ +Whether the `circular` option is enabled.
The [circular](Flicking#circular) option can't be enabled when sum of the panel sizes are too small. + +**Type**: boolean + +**Default**: false + +### mode {#mode} + +
+ readonly +
+ +A current camera mode + +**Type**: [CameraMode](CameraMode) + +### range {#range} + +
+ readonly +
+ +A range that Camera's [position](Camera#position) can reach + +**Type**: object + +|PROPERTY|TYPE|DESCRIPTION| +|:---:|:---:|:---:| +|min|number|A minimum position| +|max|number|A maximum position| + +### rangeDiff {#rangeDiff} + +
+ readonly +
+ +A difference between Camera's minimum and maximum position that can reach + +**Type**: number + +### visiblePanels {#visiblePanels} + +
+ readonly +
+ +An array of visible panels from the current position + +**Type**: Array<[Panel](Panel)> + +### visibleRange {#visibleRange} + +
+ readonly +
+ +A range of the visible area from the current position + +**Type**: object + +|PROPERTY|TYPE|DESCRIPTION| +|:---:|:---:|:---:| +|min|number|A minimum position| +|min|number|A maximum position| + +### anchorPoints {#anchorPoints} + +
+ readonly +
+ +An array of [AnchorPoint](AnchorPoint)s that Camera can be stopped at + +**Type**: Array<[AnchorPoint](AnchorPoint)> + +### controlParams {#controlParams} + +
+ readonly +
+ +A current parameters of the Camera for updating [AxesController](AxesController) + +**Type**: [ControlParams](ControlParams) + +### atEdge {#atEdge} + +
+ readonly +
+ +A Boolean value indicating whether Camera's over the minimum or maximum position reachable + +**Type**: boolean + +### size {#size} + +
+ readonly +
+ +Return the size of the viewport + +**Type**: number + +### progress {#progress} + +
+ readonly +
+ +Return the camera's position progress from the first panel to last panel
Range is from 0 to last panel's index + +**Type**: number + +### panelOrder {#panelOrder} + +
+ readonly +
+ +[direction](https://developer.mozilla.org/en-US/docs/Web/CSS/direction) CSS property applied to the camera element(`.flicking-camera`) + +**Type**: string + +### align {#align} + +
+ +
+ +A value indicating where the [alignPosition](Camera#alignPosition) should be located at inside the viewport element + +**Type**: [ALIGN](ALIGN) \| string \| number + +## Methods + +### init {#init} + +
+ +
+ +Initialize Camera + +**Returns**: this + +**Throws**: [FlickingError](FlickingError) + +[VAL_MUST_NOT_NULL](ERROR_CODE) If the camera element(`.flicking-camera`) does not exist inside viewport element + +### destroy {#destroy} + +
+ +
+ +Destroy Camera and return to initial state + +**Returns**: void + +### lookAt {#lookAt} + +
+ +
+ +Move to the given position and apply CSS transform + +**Returns**: this + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|pos|number|||A new position| + +**Throws**: [FlickingError](FlickingError) + +[NOT_ATTACHED_TO_FLICKING](ERROR_CODE) When [init](Camera#init) is not called before + +### getPrevAnchor {#getPrevAnchor} + +
+ +
+ +Return a previous [AnchorPoint](AnchorPoint) of given [AnchorPoint](AnchorPoint)
If it does not exist, return `null` instead + +**Returns**: [AnchorPoint](AnchorPoint) \| null +- The previous [AnchorPoint](AnchorPoint) + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|anchor|[AnchorPoint](AnchorPoint)|||A reference [AnchorPoint](AnchorPoint)| + +### getNextAnchor {#getNextAnchor} + +
+ +
+ +Return a next [AnchorPoint](AnchorPoint) of given [AnchorPoint](AnchorPoint)
If it does not exist, return `null` instead + +**Returns**: [AnchorPoint](AnchorPoint) \| null +- The next [AnchorPoint](AnchorPoint) + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|anchor|[AnchorPoint](AnchorPoint)|||A reference [AnchorPoint](AnchorPoint)| + +### getProgressInPanel {#getProgressInPanel} + +
+ +
+ +Return the camera's position progress in the panel below
Value is from 0 to 1 when the camera's inside panel
Value can be lower than 0 or bigger than 1 when it's in the margin area + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|panel|[Panel](Panel)|||| + +### findAnchorIncludePosition {#findAnchorIncludePosition} + +
+ +
+ +Return [AnchorPoint](AnchorPoint) that includes given position
If there's no [AnchorPoint](AnchorPoint) that includes the given position, return `null` instead + +**Returns**: [AnchorPoint](AnchorPoint) \| null +- The [AnchorPoint](AnchorPoint) that includes the given position + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|position|number|||A position to check| + +### findNearestAnchor {#findNearestAnchor} + +
+ +
+ +Return [AnchorPoint](AnchorPoint) nearest to given position
If there're no [AnchorPoint](AnchorPoint)s, return `null` instead + +**Returns**: [AnchorPoint](AnchorPoint) \| null +- The [AnchorPoint](AnchorPoint) nearest to the given position + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|position|number|||A position to check| + +### findActiveAnchor {#findActiveAnchor} + +
+ +
+ +Return [AnchorPoint](AnchorPoint) that matches [Flicking#currentPanel](Flicking#currentPanel) + +**Returns**: [AnchorPoint](AnchorPoint) \| null + +### clampToReachablePosition {#clampToReachablePosition} + +
+ +
+ +Clamp the given position between camera's range + +**Returns**: number +- A clamped position + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|position|number|||A position to clamp| + +### canReach {#canReach} + +
+ +
+ +Check whether the given panel is inside of the Camera's range + +**Returns**: boolean +- Whether the panel's inside Camera's range + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|panel|[Panel](Panel)|||An instance of [Panel](Panel) to check| + +### canSee {#canSee} + +
+ +
+ +Check whether the given panel element is visible at the current position + +**Returns**: boolean +- Whether the panel element is visible at the current position + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|panel|[Panel](Panel)|||An instance of [Panel](Panel) to check| + +### updateRange {#updateRange} + +
+ +
+ +Update [range](Camera#range) of Camera + +**Returns**: this + +**Throws**: [FlickingError](FlickingError) + +[NOT_ATTACHED_TO_FLICKING](ERROR_CODE) When [init](Camera#init) is not called before + +### updateAlignPos {#updateAlignPos} + +
+ +
+ +Update Camera's [alignPosition](Camera#alignPosition) + +**Returns**: this + +### updateAnchors {#updateAnchors} + +
+ +
+ +Update Camera's [anchorPoints](Camera#anchorPoints) + +**Returns**: this + +**Throws**: [FlickingError](FlickingError) + +[NOT_ATTACHED_TO_FLICKING](ERROR_CODE) When [init](Camera#init) is not called before + +### updateAdaptiveHeight {#updateAdaptiveHeight} + +
+ +
+ +Update Viewport's height to visible panel's max height + +**Returns**: this + +**Throws**: [FlickingError](FlickingError) + +[NOT_ATTACHED_TO_FLICKING](ERROR_CODE) When [init](Camera#init) is not called before + +### updateOffset {#updateOffset} + +
+ +
+ +Update current offset of the camera + +**Returns**: this + +### updatePanelOrder {#updatePanelOrder} + +
+ +
+ +Update direction to match the [direction](https://developer.mozilla.org/en-US/docs/Web/CSS/direction) CSS property applied to the camera element + +**Returns**: this + +### resetNeedPanelHistory {#resetNeedPanelHistory} + +
+ +
+ +Reset the history of [needPanel](Flicking#event-needPanel) events so it can be triggered again + +**Returns**: this + +### applyTransform {#applyTransform} + +
+ +
+ +Apply "transform" style with the current position to camera element + +**Returns**: this + diff --git a/docs/versioned_docs/version-4.12.0/api/CameraMode.mdx b/docs/versioned_docs/version-4.12.0/api/CameraMode.mdx new file mode 100755 index 0000000000..c02dffdea1 --- /dev/null +++ b/docs/versioned_docs/version-4.12.0/api/CameraMode.mdx @@ -0,0 +1,27 @@ +--- +custom_edit_url: null +--- + +```ts +class CameraMode +``` + +
+ +
+ +A mode of camera + +## constructor +```ts +new CameraMode(flicking) +``` + +
+ +
+ +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|flicking|[Flicking](Flicking)|||| + diff --git a/docs/versioned_docs/version-4.12.0/api/CircularCameraMode.mdx b/docs/versioned_docs/version-4.12.0/api/CircularCameraMode.mdx new file mode 100755 index 0000000000..f1577aa165 --- /dev/null +++ b/docs/versioned_docs/version-4.12.0/api/CircularCameraMode.mdx @@ -0,0 +1,14 @@ +--- +custom_edit_url: null +--- + +```ts +class CircularCameraMode extends CameraMode +``` + +
+ +
+ +A [Camera](Camera) mode that connects the last panel and the first panel, enabling continuous loop + diff --git a/docs/versioned_docs/version-4.12.0/api/Control.mdx b/docs/versioned_docs/version-4.12.0/api/Control.mdx new file mode 100755 index 0000000000..0dd89bbe8e --- /dev/null +++ b/docs/versioned_docs/version-4.12.0/api/Control.mdx @@ -0,0 +1,267 @@ +--- +custom_edit_url: null +--- + +```ts +class Control +``` + +
+ +
+ +A component that manages inputs and animation of Flicking + +
+
Properties
Methods
+
controller
activeIndex
activePanel
animating
holding
moveToPosition
init
destroy
enable
disable
release
updateAnimation
stopAnimation
updatePosition
updateInput
resetActive
moveToPanel
setActive
copy
+
+ +## Properties + +### controller {#controller} + +
+ readonly +
+ +A controller that handles the [@egjs/axes](https://naver.github.io/egjs-axes/) events + +**Type**: [AxesController](AxesController) + +### activeIndex {#activeIndex} + +
+ readonly +
+ +Index number of the [currentPanel](Flicking#currentPanel) + +**Type**: number + +**Default**: 0 + +### activePanel {#activePanel} + +
+ readonly +
+ +An active panel + +**Type**: [Panel](Panel) \| null + +### animating {#animating} + +
+ readonly +
+ +Whether Flicking's animating + +**Type**: boolean + +### holding {#holding} + +
+ readonly +
+ +Whether user is clicking or touching + +**Type**: boolean + +## Methods + +### moveToPosition {#moveToPosition} + +
+ +
+ +Move [Camera](Camera) to the given position + +**Returns**: Promise<void> +- A Promise which will be resolved after reaching the target position + +**Emits**: [Flicking#event:moveStart](Flicking#event-moveStart), [Flicking#event:move](Flicking#event-move), [Flicking#event:moveEnd](Flicking#event-moveEnd), [Flicking#event:willChange](Flicking#event-willChange), [Flicking#event:changed](Flicking#event-changed), [Flicking#event:willRestore](Flicking#event-willRestore), [Flicking#event:restored](Flicking#event-restored), [Flicking#event:needPanel](Flicking#event-needPanel), [Flicking#event:visibleChange](Flicking#event-visibleChange), [Flicking#event:reachEdge](Flicking#event-reachEdge) + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|position|number|||The target position to move| +|duration|number|||Duration of the panel movement animation (unit: ms).| +|axesEvent|object|✔️||[release](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:release) event of [Axes](https://naver.github.io/egjs-axes/)| + +**Throws**: [FlickingError](FlickingError) + +|code|condition|
|---|---|
|[POSITION_NOT_REACHABLE](ERROR_CODE)|When the given panel is already removed or not in the Camera's [range](Camera#range)|
|[NOT_ATTACHED_TO_FLICKING](ERROR_CODE)|When [init](Control#init) is not called before|
|[ANIMATION_INTERRUPTED](ERROR_CODE)|When the animation is interrupted by user input|
|[STOP_CALLED_BY_USER](ERROR_CODE)|When the animation is interrupted by user input| + +### init {#init} + +
+ +
+ +Initialize Control + +**Returns**: this + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|flicking|[Flicking](Flicking)|||An instance of [Flicking](Flicking)| + +### destroy {#destroy} + +
+ +
+ +Destroy Control and return to initial state + +**Returns**: void + +### enable {#enable} + +
+ +
+ +Enable input from the user (mouse/touch) + +**Returns**: this + +### disable {#disable} + +
+ +
+ +Disable input from the user (mouse/touch) + +**Returns**: this + +### release {#release} + +
+ +
+ +Releases ongoing user input (mouse/touch) + +**Returns**: this + +### updateAnimation {#updateAnimation} + +
+ +
+ +Change the destination and duration of the animation currently playing + +**Returns**: this + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|panel|[Panel](Panel)|||The target panel to move| +|duration|number|✔️||Duration of the animation (unit: ms)| +|direction|[DIRECTION](DIRECTION)|✔️||Direction to move, only available in the [circular](Flicking#circular) mode| + +**Throws**: [FlickingError](FlickingError) + +[POSITION_NOT_REACHABLE](ERROR_CODE) When the given panel is already removed or not in the Camera's [range](Camera#range) + +### stopAnimation {#stopAnimation} + +
+ +
+ +Stops the animation currently playing + +**Returns**: this + +### updatePosition {#updatePosition} + +
+ +
+ +Update position after resizing + +**Returns**: Promise<void> + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|progressInPanel|number|||Previous camera's progress in active panel before resize| + +**Throws**: [FlickingError](FlickingError) + +[NOT_ATTACHED_TO_FLICKING](ERROR_CODE) When [init](Camera#init) is not called before + +### updateInput {#updateInput} + +
+ +
+ +Update [controller](Control#controller)'s state + +**Returns**: this + +### resetActive {#resetActive} + +
+ +
+ +Reset [activePanel](Control#activePanel) to `null` + +**Returns**: this + +### moveToPanel {#moveToPanel} + +
+ async +
+ +Move [Camera](Camera) to the given panel + +**Returns**: Promise<void> +- A Promise which will be resolved after reaching the target panel + +**Emits**: [Flicking#event:moveStart](Flicking#event-moveStart), [Flicking#event:move](Flicking#event-move), [Flicking#event:moveEnd](Flicking#event-moveEnd), [Flicking#event:willChange](Flicking#event-willChange), [Flicking#event:changed](Flicking#event-changed), [Flicking#event:willRestore](Flicking#event-willRestore), [Flicking#event:restored](Flicking#event-restored), [Flicking#event:needPanel](Flicking#event-needPanel), [Flicking#event:visibleChange](Flicking#event-visibleChange), [Flicking#event:reachEdge](Flicking#event-reachEdge) + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|panel|[Panel](Panel)|||The target panel to move| +|options|object|||An options object| +|duration|number|||Duration of the animation (unit: ms)| +|axesEvent|object|✔️||[release](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:release) event of [Axes](https://naver.github.io/egjs-axes/)| +|direction|[DIRECTION](DIRECTION)|✔️|DIRECTION.NONE|Direction to move, only available in the [circular](Flicking#circular) mode| + +**Throws**: [FlickingError](FlickingError) + +|code|condition|
|---|---|
|[POSITION_NOT_REACHABLE](ERROR_CODE)|When the given panel is already removed or not in the Camera's [range](Camera#range)|
|[NOT_ATTACHED_TO_FLICKING](ERROR_CODE)|When [init](Control#init) is not called before|
|[ANIMATION_INTERRUPTED](ERROR_CODE)|When the animation is interrupted by user input|
|[STOP_CALLED_BY_USER](ERROR_CODE)|When the animation is interrupted by user input| + +### setActive {#setActive} + +
+ +
+ +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|newActivePanel|[Panel](Panel)|||| +|prevActivePanel|[Panel](Panel) \| null|||| +|isTrusted|boolean|||| + +### copy {#copy} + +
+ +
+ +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|control|[Control](Control)|||| + diff --git a/docs/versioned_docs/version-4.12.0/api/ControlParams.mdx b/docs/versioned_docs/version-4.12.0/api/ControlParams.mdx new file mode 100755 index 0000000000..ed301ead21 --- /dev/null +++ b/docs/versioned_docs/version-4.12.0/api/ControlParams.mdx @@ -0,0 +1,20 @@ +--- +custom_edit_url: null +--- + +```ts +interface ControlParams +``` + +
+ readonly +
+ +A current parameters of the Camera for updating [AxesController](AxesController) + +|PROPERTY|TYPE|DESCRIPTION| +|:---:|:---:|:---:| +|range|object|A moveable range for Camera| +|position|number|Current camera position| +|circular|boolean|A Boolean indicating whether the [circular](Flicking#circular) option is enabled| + diff --git a/docs/versioned_docs/version-4.12.0/api/DIRECTION.mdx b/docs/versioned_docs/version-4.12.0/api/DIRECTION.mdx new file mode 100755 index 0000000000..f1e97393c2 --- /dev/null +++ b/docs/versioned_docs/version-4.12.0/api/DIRECTION.mdx @@ -0,0 +1,22 @@ +--- +custom_edit_url: null +--- + +```ts +const DIRECTION +``` + +
+ +
+ +An object of directions + +**Type**: object + +|PROPERTY|TYPE|DESCRIPTION| +|:---:|:---:|:---:| +|PREV|"PREV"|"left" when [horizontal](Flicking#horizontal) is true, and "top" when [horizontal](Flicking#horizontal) is false| +|NEXT|"NEXT"|"right" when [horizontal](Flicking#horizontal) is true, and "bottom" when [horizontal](Flicking#horizontal) is false| +|NONE|null|This value usually means it's the same position| + diff --git a/docs/versioned_docs/version-4.12.0/api/DisabledState.mdx b/docs/versioned_docs/version-4.12.0/api/DisabledState.mdx new file mode 100755 index 0000000000..15c26d6806 --- /dev/null +++ b/docs/versioned_docs/version-4.12.0/api/DisabledState.mdx @@ -0,0 +1,166 @@ +--- +custom_edit_url: null +--- + +
⚠️ This class is for internal use only.
+ +```ts +class DisabledState extends State +``` + +
+ +
+ +A state that activates when Flicking is stopped by event's `stop` method + +
+
Properties
Methods
+
holding
animating
delta
targetPanel
onEnter
onHold
onChange
onRelease
onAnimationEnd
onFinish
+
+ +## Properties + +### holding {#holding} + +
+ readonly +
+ +Whether user is clicking or touching + +**Type**: false + +### animating {#animating} + +
+ readonly +
+ +Whether Flicking's animating + +**Type**: true + +### delta {#delta} + +
+ readonly + inherited +
+ +A sum of delta values of change events from the last hold event of Axes + +**Type**: number + +### targetPanel {#targetPanel} + +
+ readonly + inherited +
+ +A panel to set as [Control#activePanel](Control#activePanel) after the animation is finished + +**Type**: number + +## Methods + +### onEnter {#onEnter} + +
+ inherited +
+ +An callback which is called when state has changed to this state + +**Returns**: void + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|prevState|[State](State)|||An previous state| + +### onHold {#onHold} + +
+ inherited +
+ +An event handler for Axes's [hold](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:hold) event + +**Returns**: void + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|ctx|object|✔️||Event context| +|ctx.flicking|[Flicking](Flicking)|✔️||An instance of Flicking| +|ctx.axesEvent|object|✔️||A [hold](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:hold) event of Axes| +|ctx.transitTo|function|✔️||A function for changing current state to other state| + +### onChange {#onChange} + +
+ inherited +
+ +An event handler for Axes's [change](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:change) event + +**Returns**: void + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|ctx|object|✔️||Event context| +|ctx.flicking|[Flicking](Flicking)|✔️||An instance of Flicking| +|ctx.axesEvent|object|✔️||A [change](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:change) event of Axes| +|ctx.transitTo|function|✔️||A function for changing current state to other state| + +### onRelease {#onRelease} + +
+ inherited +
+ +An event handler for Axes's [release](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:release) event + +**Returns**: void + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|ctx|object|✔️||Event context| +|ctx.flicking|[Flicking](Flicking)|✔️||An instance of Flicking| +|ctx.axesEvent|object|✔️||A [release](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:release) event of Axes| +|ctx.transitTo|function|✔️||A function for changing current state to other state| + +### onAnimationEnd {#onAnimationEnd} + +
+ inherited +
+ +An event handler for Axes's [animationEnd](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:animationEnd) event + +**Returns**: void + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|ctx|object|✔️||Event context| +|ctx.flicking|[Flicking](Flicking)|✔️||An instance of Flicking| +|ctx.axesEvent|object|✔️||A [animationEnd](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:animationEnd) event of Axes| +|ctx.transitTo|function|✔️||A function for changing current state to other state| + +### onFinish {#onFinish} + +
+ inherited +
+ +An event handler for Axes's [finish](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:finish) event + +**Returns**: void + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|ctx|object|✔️||Event context| +|ctx.flicking|[Flicking](Flicking)|✔️||An instance of Flicking| +|ctx.axesEvent|object|✔️||A [finish](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:finish) event of Axes| +|ctx.transitTo|function|✔️||A function for changing current state to other state| + diff --git a/docs/versioned_docs/version-4.12.0/api/DraggingState.mdx b/docs/versioned_docs/version-4.12.0/api/DraggingState.mdx new file mode 100755 index 0000000000..79ab8845be --- /dev/null +++ b/docs/versioned_docs/version-4.12.0/api/DraggingState.mdx @@ -0,0 +1,166 @@ +--- +custom_edit_url: null +--- + +
⚠️ This class is for internal use only.
+ +```ts +class DraggingState extends State +``` + +
+ +
+ +A state that activates when user's dragging the Flicking area + +
+
Properties
Methods
+
holding
animating
delta
targetPanel
onEnter
onHold
onChange
onRelease
onAnimationEnd
onFinish
+
+ +## Properties + +### holding {#holding} + +
+ readonly +
+ +Whether user is clicking or touching + +**Type**: true + +### animating {#animating} + +
+ readonly +
+ +Whether Flicking's animating + +**Type**: true + +### delta {#delta} + +
+ readonly + inherited +
+ +A sum of delta values of change events from the last hold event of Axes + +**Type**: number + +### targetPanel {#targetPanel} + +
+ readonly + inherited +
+ +A panel to set as [Control#activePanel](Control#activePanel) after the animation is finished + +**Type**: number + +## Methods + +### onEnter {#onEnter} + +
+ inherited +
+ +An callback which is called when state has changed to this state + +**Returns**: void + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|prevState|[State](State)|||An previous state| + +### onHold {#onHold} + +
+ inherited +
+ +An event handler for Axes's [hold](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:hold) event + +**Returns**: void + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|ctx|object|✔️||Event context| +|ctx.flicking|[Flicking](Flicking)|✔️||An instance of Flicking| +|ctx.axesEvent|object|✔️||A [hold](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:hold) event of Axes| +|ctx.transitTo|function|✔️||A function for changing current state to other state| + +### onChange {#onChange} + +
+ inherited +
+ +An event handler for Axes's [change](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:change) event + +**Returns**: void + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|ctx|object|✔️||Event context| +|ctx.flicking|[Flicking](Flicking)|✔️||An instance of Flicking| +|ctx.axesEvent|object|✔️||A [change](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:change) event of Axes| +|ctx.transitTo|function|✔️||A function for changing current state to other state| + +### onRelease {#onRelease} + +
+ inherited +
+ +An event handler for Axes's [release](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:release) event + +**Returns**: void + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|ctx|object|✔️||Event context| +|ctx.flicking|[Flicking](Flicking)|✔️||An instance of Flicking| +|ctx.axesEvent|object|✔️||A [release](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:release) event of Axes| +|ctx.transitTo|function|✔️||A function for changing current state to other state| + +### onAnimationEnd {#onAnimationEnd} + +
+ inherited +
+ +An event handler for Axes's [animationEnd](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:animationEnd) event + +**Returns**: void + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|ctx|object|✔️||Event context| +|ctx.flicking|[Flicking](Flicking)|✔️||An instance of Flicking| +|ctx.axesEvent|object|✔️||A [animationEnd](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:animationEnd) event of Axes| +|ctx.transitTo|function|✔️||A function for changing current state to other state| + +### onFinish {#onFinish} + +
+ inherited +
+ +An event handler for Axes's [finish](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:finish) event + +**Returns**: void + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|ctx|object|✔️||Event context| +|ctx.flicking|[Flicking](Flicking)|✔️||An instance of Flicking| +|ctx.axesEvent|object|✔️||A [finish](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:finish) event of Axes| +|ctx.transitTo|function|✔️||A function for changing current state to other state| + diff --git a/docs/versioned_docs/version-4.12.0/api/ERROR_CODE.mdx b/docs/versioned_docs/version-4.12.0/api/ERROR_CODE.mdx new file mode 100755 index 0000000000..ca9e2e902f --- /dev/null +++ b/docs/versioned_docs/version-4.12.0/api/ERROR_CODE.mdx @@ -0,0 +1,34 @@ +--- +custom_edit_url: null +--- + +```ts +const ERROR_CODE +``` + +
+ +
+ +Error codes of [FlickingError](FlickingError). Below are the conditions where each error code occurs. + +**Type**: object + +|PROPERTY|TYPE|DESCRIPTION| +|:---:|:---:|:---:| +|WRONG_TYPE|number|Parameter type is wrong| +|ELEMENT_NOT_FOUND|number|Element is not found inside page with the given CSS selector| +|VAL_MUST_NOT_NULL|number|Expected non-null value, but given `null` or `undefined`| +|NOT_ATTACHED_TO_FLICKING|number|When Flicking's component is not initialized (i.e. [Flicking#init](Flicking#init) is not called)| +|WRONG_OPTION|number|One of the options is wrong| +|INDEX_OUT_OF_RANGE|number|When the given index is out of possible range| +|POSITION_NOT_REACHABLE|number|When [Control#moveToPosition](Control#moveToPosition)'s position parameter is out of possible range.| +|TRANSFORM_NOT_SUPPORTED|number|CSS `transform` property is not available(<=IE8)| +|STOP_CALLED_BY_USER|number|When the event's `stop()` is called by user.| +|ANIMATION_INTERRUPTED|number|When the animation is interrupted by user.| +|ANIMATION_ALREADY_PLAYING|number|When the animation is already playing.| +|NOT_ALLOWED_IN_FRAMEWORK|number|When the non-allowed method is called from frameworks (React, Angular, Vue...)| +|NOT_INITIALIZED|number|When the [Flicking#init](Flicking#init) is not called before but is needed| +|NO_ACTIVE|number|When there're no active panel that flicking has selected. This may be due to the absence of any panels| +|NOT_ALLOWED_IN_VIRTUAL|number|When the non-allowed method is called while the virtual option is enabled| + diff --git a/docs/versioned_docs/version-4.12.0/api/EVENT.mdx b/docs/versioned_docs/version-4.12.0/api/EVENT.mdx new file mode 100755 index 0000000000..83a1620ac8 --- /dev/null +++ b/docs/versioned_docs/version-4.12.0/api/EVENT.mdx @@ -0,0 +1,14 @@ +--- +custom_edit_url: null +--- + +```ts +const EVENT +``` + +
+ +
+ +All possible @egjs/axes event keys + diff --git a/docs/versioned_docs/version-4.12.0/api/EVENTS.mdx b/docs/versioned_docs/version-4.12.0/api/EVENTS.mdx new file mode 100755 index 0000000000..a5e58dd918 --- /dev/null +++ b/docs/versioned_docs/version-4.12.0/api/EVENTS.mdx @@ -0,0 +1,36 @@ +--- +custom_edit_url: null +--- + +```ts +const EVENTS +``` + +
+ +
+ +Event type object with event name strings of [Flicking](Flicking) + +**Type**: object + +|PROPERTY|TYPE|DESCRIPTION| +|:---:|:---:|:---:| +|HOLD_START|"holdStart"|holdStart event| +|HOLD_END|"holdEnd"|holdEnd event| +|MOVE_START|"moveStart"|moveStart event| +|MOVE|"move"|move event| +|MOVE_END|"moveEnd"|moveEnd event| +|WILL_CHANGE|"willChange"|willChange event| +|CHANGED|"changed"|changed event| +|WILL_RESTORE|"willRestore"|willRestore event| +|RESTORED|"restored"|restored event| +|SELECT|"select"|select event| +|NEED_PANEL|"needPanel"|needPanel event| +|PANEL_CHANGE|"panelChange"|panelChange event| + +```ts +import { EVENTS } from "@egjs/flicking"; +EVENTS.MOVE_START; // "moveStart" +``` + diff --git a/docs/versioned_docs/version-4.12.0/api/ElementLike.mdx b/docs/versioned_docs/version-4.12.0/api/ElementLike.mdx new file mode 100755 index 0000000000..3b7c6635e6 --- /dev/null +++ b/docs/versioned_docs/version-4.12.0/api/ElementLike.mdx @@ -0,0 +1,12 @@ +--- +custom_edit_url: null +--- + +
+ +
+ +HTML `string` of single/mutiple HTMLElement, or an instance of `HTMLElement` + +**Type**: string \| HTMLElement + diff --git a/docs/versioned_docs/version-4.12.0/api/ExternalRenderer.mdx b/docs/versioned_docs/version-4.12.0/api/ExternalRenderer.mdx new file mode 100755 index 0000000000..7738f04afe --- /dev/null +++ b/docs/versioned_docs/version-4.12.0/api/ExternalRenderer.mdx @@ -0,0 +1,218 @@ +--- +custom_edit_url: null +--- + +
⚠️ This class is for internal use only.
+ +```ts +class ExternalRenderer extends Renderer +``` + +
+ +
+ +
+
Properties
Methods
+
panels
rendering
panelCount
strategy
align
render
init
destroy
getPanel
updatePanelSize
batchInsert
batchInsertDefer
batchRemove
batchRemoveDefer
updateAfterPanelChange
checkPanelContentsReady
+
+ +## Properties + +### panels {#panels} + +
+ readonly + inherited +
+ +Array of panels + +**Type**: Array<[Panel](Panel)> + +**See**: +- [Panel](Panel) + +### rendering {#rendering} + +
+ readonly + inherited +
+ +A boolean value indicating whether rendering is in progress + +**Type**: boolean + +### panelCount {#panelCount} + +
+ readonly + inherited +
+ +Count of panels + +**Type**: number + +### strategy {#strategy} + +
+ inherited +
+ +### align {#align} + +
+ inherited +
+ +A [Panel](Panel)'s [align](Panel#align) value that applied to all panels + +**Type**: Constants.ALIGN \| string \| number + +## Methods + +### render {#render} + +
+ inherited +
+ +Render panel elements inside the camera element + +**Returns**: this + +### init {#init} + +
+ inherited +
+ +Initialize Renderer + +**Returns**: this + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|flicking|[Flicking](Flicking)|||An instance of [Flicking](Flicking)| + +### destroy {#destroy} + +
+ inherited +
+ +Destroy Renderer and return to initial state + +**Returns**: void + +### getPanel {#getPanel} + +
+ inherited +
+ +Return the [Panel](Panel) at the given index. `null` if it doesn't exists. + +**Returns**: [Panel](Panel) \| null +- Panel at the given index + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|index|number|||| + +**See**: +- [Panel](Panel) + +### updatePanelSize {#updatePanelSize} + +
+ inherited +
+ +Update all panel sizes + +**Returns**: this + +### batchInsert {#batchInsert} + +
+ inherited +
+ +Insert new panels at given index
This will increase index of panels after by the number of panels added + +**Returns**: Array<[Panel](Panel)> +- An array of prepended panels + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|items|Array<object>|||An array of items to insert| +|items.index|number|✔️||Index to insert new panels at| +|items.elements|Array<any>|✔️||An array of element or framework component with element in it| +|items.hasDOMInElements|boolean|✔️||Whether it contains actual DOM elements. If set to true, renderer will add them to the camera element| + +### batchInsertDefer {#batchInsertDefer} + +
+ inherited +
+ +Defers update
camera position & others will be updated after calling updateAfterPanelChange + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|...items|Array<{index: number, elements: any[], hasDOMInElements: boolean}>|||| + +### batchRemove {#batchRemove} + +
+ inherited +
+ +Remove the panel at the given index
This will decrease index of panels after by the number of panels removed + +**Returns**: [Panel](Panel)[] +- An array of removed panels + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|items|Array<object>|||An array of items to remove| +|items.index|number|✔️||Index of panel to remove| +|items.deleteCount|number|✔️|1|Number of panels to remove from index| +|items.hasDOMInElements|boolean|✔️|1|Whether it contains actual DOM elements. If set to true, renderer will remove them from the camera element| + +### batchRemoveDefer {#batchRemoveDefer} + +
+ inherited +
+ +Defers update
camera position & others will be updated after calling updateAfterPanelChange + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|...items|Array<{index: number, deleteCount: number, hasDOMInElements: boolean}>|||| + +### updateAfterPanelChange {#updateAfterPanelChange} + +
+ inherited +
+ +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|panelsAdded|[Panel](Panel)[]|||| +|panelsRemoved|[Panel](Panel)[]|||| + +### checkPanelContentsReady {#checkPanelContentsReady} + +
+ inherited +
+ +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|checkingPanels|[Panel](Panel)[]|||| + diff --git a/docs/versioned_docs/version-4.12.0/api/Flicking.mdx b/docs/versioned_docs/version-4.12.0/api/Flicking.mdx new file mode 100755 index 0000000000..096bb4c854 --- /dev/null +++ b/docs/versioned_docs/version-4.12.0/api/Flicking.mdx @@ -0,0 +1,1547 @@ +--- +custom_edit_url: null +--- + +```ts +class Flicking extends Component +``` + +
+ +
+ +
+
Properties
Methods
Events
+
VERSIONstatic
control
camera
renderer
viewport
initialized
circularEnabled
virtualEnabled
index
element
currentPanel
panels
panelCount
visiblePanels
animating
holding
activePlugins
align
defaultIndex
horizontal
circular
circularFallback
bound
adaptive
panelsPerView
noPanelStyleOverride
resizeOnContentsReady
nested
needPanelThreshold
preventEventsBeforeInit
deceleration
easing
duration
inputType
moveType
threshold
dragThreshold
interruptable
bounce
iOSEdgeSwipeThreshold
preventClickOnDrag
preventDefaultOnDrag
disableOnInit
changeOnHold
renderOnlyVisible
virtual
autoInit
autoResize
useResizeObserver
resizeDebounce
maxResizeDebounce
useFractionalSize
externalRenderer
renderExternal
init
destroy
prev
next
moveTo
updateAnimation
stopAnimation
getPanel
enableInput
disableInput
getStatus
setStatus
addPlugins
removePlugins
resize
append
prepend
insert
remove
ready
beforeResize
afterResize
holdStart
holdEnd
moveStart
move
moveEnd
willChange
changed
willRestore
restored
select
needPanel
visibleChange
reachEdge
panelChange
+
+ +## constructor +```ts +new Flicking(root, options) +``` + +
+ +
+ +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|root|HTMLElement \| string|||A root HTMLElement to initialize Flicking on it. When it's a typeof `string`, it should be a css selector string| +|options|object|✔️|{}|An options object for Flicking.| + +**Throws**: [FlickingError](FlickingError) + +|code|condition|
|---|---|
|[WRONG_TYPE](ERROR_CODE)|When the root is not either string or HTMLElement|
|[ELEMENT_NOT_FOUND](ERROR_CODE)|When the element with given CSS selector does not exist| + +```ts +import Flicking from "@egjs/flicking"; + +// Creating new instance of Flicking with HTMLElement +const flicking = new Flicking(document.querySelector(".flicking-viewport"), { circular: true }); + +// Creating new instance of Flicking with CSS selector +const flicking2 = new Flicking(".flicking-viewport", { circular: true }); +``` + +## Properties +### VERSION {#VERSION} + +
+ static + readonly +
+ +Version info string + +**Type**: string + +```ts +Flicking.VERSION; // ex) 4.0.0 +``` + +### control {#control} + +
+ readonly +
+ +[Control](Control) instance of the Flicking + +**Type**: [Control](Control) + +**Default**: [SnapControl](SnapControl) + +**See**: +- [Control](Control) +- [SnapControl](SnapControl) +- [FreeControl](FreeControl) + +### camera {#camera} + +
+ readonly +
+ +[Camera](Camera) instance of the Flicking + +**Type**: [Camera](Camera) + +**Default**: LinearCamera + +**See**: +- [Camera](Camera) +- LinearCamera +- BoundCamera +- CircularCamera + +### renderer {#renderer} + +
+ readonly +
+ +[Renderer](Renderer) instance of the Flicking + +**Type**: [Renderer](Renderer) + +**Default**: [VanillaRenderer](VanillaRenderer) + +**See**: +- [Renderer](Renderer) +- [VanillaRenderer](VanillaRenderer) +- [ExternalRenderer](ExternalRenderer) + +### viewport {#viewport} + +
+ readonly +
+ +A component that manages viewport size + +**Type**: [Viewport](Viewport) + +**See**: +- [Viewport](Viewport) + +### initialized {#initialized} + +
+ readonly +
+ +Whether Flicking's [init()](Flicking#init) is called.
This is `true` when [init()](Flicking#init) is called, and is `false` after calling [destroy()](Flicking#destroy). + +**Type**: boolean + +**Default**: false + +### circularEnabled {#circularEnabled} + +
+ readonly +
+ +Whether the `circular` option is enabled.
The [circular](Flicking#circular) option can't be enabled when sum of the panel sizes are too small. + +**Type**: boolean + +**Default**: false + +### virtualEnabled {#virtualEnabled} + +
+ readonly +
+ +Whether the `virtual` option is enabled.
The [virtual](Flicking#virtual) option can't be enabled when [panelsPerView](Flicking#panelsPerView) is less or equal than zero. + +**Type**: boolean + +**Default**: false + +### index {#index} + +
+ readonly +
+ +Index number of the [currentPanel](Flicking#currentPanel) + +**Type**: number + +**Default**: 0 + +### element {#element} + +
+ readonly +
+ +The root(`.flicking-viewport`) element + +**Type**: HTMLElement + +### currentPanel {#currentPanel} + +
+ readonly +
+ +Currently active panel + +**Type**: [Panel](Panel) + +**See**: +- [Panel](Panel) + +### panels {#panels} + +
+ readonly +
+ +Array of panels + +**Type**: Array<[Panel](Panel)> + +**See**: +- [Panel](Panel) + +### panelCount {#panelCount} + +
+ readonly +
+ +Count of panels + +**Type**: number + +### visiblePanels {#visiblePanels} + +
+ readonly +
+ +Array of panels that is visible at the current position + +**Type**: Array<[Panel](Panel)> + +**See**: +- [Panel](Panel) + +### animating {#animating} + +
+ readonly +
+ +Whether Flicking's animating + +**Type**: boolean + +### holding {#holding} + +
+ readonly +
+ +Whether user is clicking or touching + +**Type**: boolean + +### activePlugins {#activePlugins} + +
+ readonly +
+ +A current list of activated plugins + +**Type**: Array<[Plugin](Plugin)> + +### align {#align} + +
+ +
+ +Align position of the panels within viewport. You can set different values each for the panel and camera + +**Type**: [ALIGN](ALIGN) \| string \| number \| Object + +**Default**: "center" + +|PROPERTY|TYPE|DESCRIPTION| +|:---:|:---:|:---:| +|panel|[ALIGN](ALIGN) \| string \| number|The align value for each [Panel](Panel)s| +|camera|[ALIGN](ALIGN) \| string \| number|The align value for [Camera](Camera)| + +**See**: +- [align ( Options )](https://naver.github.io/egjs-flicking/Options#align) +```ts +const possibleOptions = [ + // Literal strings + "prev", "center", "next", + // % values, applied to both panel & camera + "0%", "25%", "42%", + // px values, arithmetic calculation with (+/-) is also allowed. + "0px", "100px", "50% - 25px", + // numbers, same to number + px ("0px", "100px") + 0, 100, 1000, + // Setting a different value for panel & camera + { panel: "10%", camera: "25%" } +]; + +possibleOptions.forEach(align => { + new Flicking("#el", { align }); +}); +``` + +### defaultIndex {#defaultIndex} + +
+ +
+ +Index of the panel to move when Flicking's [init()](Flicking#init) is called. A zero-based integer + +**Type**: number + +**Default**: 0 + +**See**: +- [defaultIndex ( Options )](https://naver.github.io/egjs-flicking/Options#defaultindex) + +### horizontal {#horizontal} + +
+ +
+ +Direction of panel movement (true: horizontal, false: vertical) + +**Type**: boolean + +**Default**: true + +**See**: +- [horizontal ( Options )](https://naver.github.io/egjs-flicking/Options#horizontal) + +### circular {#circular} + +
+ +
+ +Enables circular(continuous loop) mode, which connects first/last panel for continuous scrolling. + +**Type**: boolean + +**Default**: false + +**See**: +- [circular ( Options )](https://naver.github.io/egjs-flicking/Options#circular) + +### circularFallback {#circularFallback} + +
+ +
+ +Set panel control mode for the case when circular cannot be enabled.
"linear" will set the view's range from the top of the first panel to the top of the last panel.
"bound" will prevent the view from going out of the first/last panel, so it won't show empty spaces before/after the first/last panel. + +**Type**: string + +**Default**: "linear" + +**See**: +- [CIRCULAR_FALLBACK](CIRCULAR_FALLBACK) +- [circularFallback ( Options )](https://naver.github.io/egjs-flicking/Options#circularfallback) + +### bound {#bound} + +
+ +
+ +Prevent the view(camera element) from going out of the first/last panel, so it won't show empty spaces before/after the first/last panel
Only can be enabled when `circular=false` + +**Type**: boolean + +**Default**: false + +**See**: +- [bound ( Options )](https://naver.github.io/egjs-flicking/Options#bound) + +### adaptive {#adaptive} + +
+ +
+ +Update height of the viewport element after movement same to the height of the panel below. This can be only enabled when `horizontal=true` + +**Type**: boolean + +**Default**: false + +**See**: +- [adaptive ( Options )](https://naver.github.io/egjs-flicking/Options#adaptive) + +### panelsPerView {#panelsPerView} + +
+ +
+ +A visible number of panels on viewport. Enabling this option will automatically resize panel size + +**Type**: number + +**Default**: -1 + +**See**: +- [panelsPerView ( Options )](https://naver.github.io/egjs-flicking/Options#panelsperview) + +### noPanelStyleOverride {#noPanelStyleOverride} + +
+ +
+ +Enabling this option will not change `width/height` style of the panels if [Flicking#panelsPerView](Flicking#panelsPerView) is enabled.
This behavior can be useful in terms of performance when you're manually managing all panel sizes + +**Type**: boolean + +**Default**: false + +### resizeOnContentsReady {#resizeOnContentsReady} + +
+ +
+ +Enabling this option will automatically call [Flicking#resize](Flicking#resize) when all image/video inside panels are loaded.
This can be useful when you have contents inside Flicking that changes its size when it's loaded + +**Type**: boolean + +**Default**: false + +**See**: +- [resizeOnContentsReady ( Options )](https://naver.github.io/egjs-flicking/Options#resizeOnContentsReady) + +### nested {#nested} + +
+ +
+ +If you enable this option on child Flicking when the Flicking is placed inside the Flicking, the parent Flicking will move in the same direction after the child Flicking reaches the first/last panel.
If the parent Flicking and child Flicking have different horizontal option, you do not need to set this option. + +**Type**: boolean + +**Default**: false + +**See**: +- [nested ( Options )](https://naver.github.io/egjs-flicking/Options#nested) + +### needPanelThreshold {#needPanelThreshold} + +
+ +
+ +A Threshold from viewport edge before triggering `needPanel` event + +**Type**: number + +**Default**: 0 + +**See**: +- [needPanelThreshold ( Options )](https://naver.github.io/egjs-flicking/Options#needpanelthreshold) + +### preventEventsBeforeInit {#preventEventsBeforeInit} + +
+ +
+ +When enabled, events are not triggered before `ready` when initializing + +**Type**: boolean + +**Default**: true + +**See**: +- [preventEventsBeforeInit ( Options )](https://naver.github.io/egjs-flicking/Options#preventeventsbeforeinit) + +### deceleration {#deceleration} + +
+ +
+ +Deceleration value for panel movement animation which is triggered by user input. A higher value means a shorter animation time + +**Type**: number + +**Default**: 0.0075 + +**See**: +- [deceleration ( Options )](https://naver.github.io/egjs-flicking/Options#deceleration) + +### easing {#easing} + +
+ +
+ +An easing function applied to the panel movement animation. Default value is `easeOutCubic` + +**Type**: function + +**Default**: x => 1 - Math.pow(1 - x, 3) + +**See**: +- Easing Functions Cheat Sheet [http://easings.net/](http://easings.net/) +- [Easing ( Options )](https://naver.github.io/egjs-flicking/Options#easing) + +### duration {#duration} + +
+ +
+ +Default duration of the animation (ms) + +**Type**: number + +**Default**: 500 + +**See**: +- [duration ( Options )](https://naver.github.io/egjs-flicking/Options#duration) + +### inputType {#inputType} + +
+ +
+ +Types of input devices to enable + +**Type**: Array<string> + +**Default**: ["touch", "mouse"] + +**See**: +- [Possible values (PanInputOption#inputType)](https://naver.github.io/egjs-axes/Options#paninput-options) +- [inputType ( Options )](https://naver.github.io/egjs-flicking/Options#inputtype) + +### moveType {#moveType} + +
+ +
+ +Movement style by user input. This will change instance type of [Flicking#control](Flicking#control)
You can use the values of the constant [MOVE_TYPE](MOVE_TYPE) + +**Type**: [MOVE_TYPE](MOVE_TYPE) \| Pair.<string, object> + +**Default**: "snap" + +**See**: +- [moveType ( Options )](https://naver.github.io/egjs-flicking/Options#movetype) +|moveType|control|options| +|:---:|:---:|:---:| +|"snap"|[SnapControl](SnapControl)|| +|"freeScroll"|[FreeControl](FreeControl)|[FreeControlOptions](FreeControlOptions)| + +```ts +import Flicking, { MOVE_TYPE } from "@egjs/flicking"; + +const flicking = new Flicking({ + moveType: MOVE_TYPE.SNAP +}); +``` + +```ts +const flicking = new Flicking({ + // If you want more specific settings for the moveType + // [moveType, options for that moveType] + // In this case, it's ["freeScroll", FreeControlOptions] + moveType: [MOVE_TYPE.FREE_SCROLL, { stopAtEdge: true }] +}); +``` + +### threshold {#threshold} + +
+ +
+ +Movement threshold to change panel (unit: px). It should be dragged above the threshold to change the current panel. + +**Type**: number + +**Default**: 40 + +**See**: +- [Threshold ( Options )](https://naver.github.io/egjs-flicking/Options#threshold) + +### dragThreshold {#dragThreshold} + +
+ +
+ +Minimal distance of user input before recognizing (unit: px). It should be dragged above the dragThreshold to move the panel. + +**Type**: number + +**Default**: 1 + +**See**: +- [dragThreshold ( Options )](https://naver.github.io/egjs-flicking/Options#dragThreshold) + +### interruptable {#interruptable} + +
+ +
+ +Set animation to be interruptable by click/touch. + +**Type**: boolean + +**Default**: true + +**See**: +- [Interruptable ( Options )](https://naver.github.io/egjs-flicking/Options#interruptable) + +### bounce {#bounce} + +
+ +
+ +The size value of the bounce area. Only can be enabled when `circular=false`.
You can set different bounce value for prev/next direction by using array.
`number` for px value, and `string` for px, and % value relative to viewport size.
You have to call [Control#updateInput](Control#updateInput) after changing this to take effect. + +**Type**: string \| number \| Array<(string\|number)> + +**Default**: "20%" + +**See**: +- [bounce ( Options )](https://naver.github.io/egjs-flicking/Options#bounce) +```ts +const possibleOptions = [ + // % values, relative to viewport element(".flicking-viewport")'s size + "0%", "25%", "42%", + // px values, arithmetic calculation with (+/-) is also allowed. + "0px", "100px", "50% - 25px", + // numbers, same to number + px ("0px", "100px") + 0, 100, 1000 +]; +``` + +```ts +const flicking = new Flicking("#el", { bounce: "20%" }); + +flicking.bounce = "100%"; +flicking.control.updateInput(); // Call this to update! +``` + +### iOSEdgeSwipeThreshold {#iOSEdgeSwipeThreshold} + +
+ +
+ +Size of the area from the right edge in iOS safari (in px) which enables swipe-back or swipe-forward + +**Type**: number + +**Default**: 30 + +**See**: +- [iOSEdgeSwipeThreshold ( Options )](https://naver.github.io/egjs-flicking/Options#iosedgeswipethreshold) + +### preventClickOnDrag {#preventClickOnDrag} + +
+ +
+ +Automatically prevent `click` event if the user has dragged at least a single pixel on the viewport element + +**Type**: boolean + +**Default**: true + +**See**: +- [preventClickOnDrag ( Options )](https://naver.github.io/egjs-flicking/Options#preventclickondrag) + +### preventDefaultOnDrag {#preventDefaultOnDrag} + +
+ +
+ +Whether to use the [preventDefault](https://developer.mozilla.org/ko/docs/Web/API/Event/preventDefault) when the user starts dragging + +**Type**: boolean + +**Default**: false + +**See**: +- [preventDefaultOnDrag ( Options )](https://naver.github.io/egjs-flicking/Options#preventDefaultOnDrag) + +### disableOnInit {#disableOnInit} + +
+ +
+ +Automatically call [disableInput()](Flicking#disableInput) on initialization + +**Type**: boolean + +**Default**: false + +**See**: +- [disableOnInit ( Options )](https://naver.github.io/egjs-flicking/Options#disableoninit) + +### changeOnHold {#changeOnHold} + +
+ +
+ +Change active panel index on mouse/touch hold while animating.
`index` of the `willChange`/`willRestore` event will be used as new index. + +**Type**: boolean + +**Default**: false + +**See**: +- [changeOnHold ( Options )](https://naver.github.io/egjs-flicking/Options#changeonhold) + +### renderOnlyVisible {#renderOnlyVisible} + +
+ +
+ +Whether to render visible panels only. This can dramatically increase performance when there're many panels + +**Type**: boolean + +**Default**: false + +**See**: +- [renderOnlyVisible ( Options )](https://naver.github.io/egjs-flicking/Options#renderonlyvisible) + +### virtual {#virtual} + +
+ +
+ +By enabling this option, it will reduce memory consumption by restricting the number of DOM elements to `panelsPerView + 1`
Must be used with `panelsPerview`.
After Flicking's initialized, this property can be used to add/remove the panel count. + +**Type**: VirtualManager + +|PROPERTY|TYPE|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:| +|renderPanel|function||A rendering function for the panel element's innerHTML| +|initialPanelCount|number||Initial panel count to render| +|cache|boolean|false|Whether to cache rendered panel's innerHTML| +|panelClass|string|"flicking-panel"|The class name that will be applied to rendered panel elements| + +**See**: +- [virtual ( Options )](https://naver.github.io/egjs-flicking/Options#virtual) +```ts +import Flicking, { VirtualPanel } from "@egjs/flicking"; + +const flicking = new Flicking("#some_el", { + panelsPerView: 3, + virtual: { + renderPanel: (panel: VirtualPanel, index: number) => `Panel ${index}`, + initialPanelCount: 100 + } +}); + +// Add 100 virtual panels (at the end) +flicking.virtual.append(100); + +// Remove 100 virtual panels from 0 to 100 +flicking.virtual.remove(0, 100); +``` + +### autoInit {#autoInit} + +
+ readonly +
+ +Call [init()](Flicking#init) automatically when creating Flicking's instance + +**Type**: boolean + +**Default**: true + +**See**: +- [autoInit ( Options )](https://naver.github.io/egjs-flicking/Options#autoinit) + +### autoResize {#autoResize} + +
+ +
+ +Whether to automatically call [resize()](Flicking#resize) when the viewport element(.flicking-viewport)'s size is changed + +**Type**: boolean + +**Default**: true + +### useResizeObserver {#useResizeObserver} + +
+ +
+ +Whether to listen [ResizeObserver](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver)'s event instead of Window's [resize](https://developer.mozilla.org/ko/docs/Web/API/Window/resize_event) event when using the `autoResize` option + +**Type**: boolean + +**Default**: true + +**See**: +- [useResizeObserver ( Options )](https://naver.github.io/egjs-flicking/Options#useresizeobserver) + +### resizeDebounce {#resizeDebounce} + +
+ +
+ +Delays size recalculation from `autoResize` by the given time in milisecond.
If the size is changed again while being delayed, it cancels the previous one and delays from the beginning again.
This can increase performance by preventing `resize` being called too often. + +**Type**: number + +**Default**: 0 + +**See**: +- [resizeDebounce ( Options )](https://naver.github.io/egjs-flicking/Options#resizedebounce) + +### maxResizeDebounce {#maxResizeDebounce} + +
+ +
+ +The maximum time for size recalculation delay when using `resizeDebounce`, in milisecond.
This guarantees that size recalculation is performed at least once every (n)ms. + +**Type**: number + +**Default**: 100 + +**See**: +- [maxResizeDebounce ( Options )](https://naver.github.io/egjs-flicking/Options#maxresizedebounce) + +### useFractionalSize {#useFractionalSize} + +
+ +
+ +By enabling this, Flicking will calculate all internal size with CSS width computed with getComputedStyle.
This can prevent 1px offset issue in some cases where panel size has the fractional part.
All sizes will have the original size before CSS [transform](https://developer.mozilla.org/en-US/docs/Web/CSS/transform) is applied on the element. + +**Type**: boolean + +**Default**: false + +**See**: +- [useFractionalSize ( Options )](https://naver.github.io/egjs-flicking/Options#usefractionalsize) + +### externalRenderer {#externalRenderer} + +
+ readonly +
+ +This is an option for the frameworks(React, Vue, Angular, ...). Don't set it as it's automatically managed by Flicking. + +**Default**: null + +### renderExternal {#renderExternal} + +
+ readonly +
+ +This is an option for the frameworks(React, Vue, Angular, ...). Don't set it as it's automatically managed by Flicking. + +**Default**: null + +## Methods + +### init {#init} + +
+ +
+ +Initialize Flicking and move to the default index
This is automatically called on Flicking's constructor when `autoInit` is true(default) + +**Returns**: Promise<void> + +**Emits**: [Flicking#event:ready](Flicking#event-ready) + +### destroy {#destroy} + +
+ +
+ +Destroy Flicking and remove all event handlers + +**Returns**: void + +### prev {#prev} + +
+ async +
+ +Move to the previous panel (current index - 1) + +**Returns**: Promise<void> +- A Promise which will be resolved after reaching the previous panel + +**Emits**: [Flicking#event:moveStart](Flicking#event-moveStart), [Flicking#event:move](Flicking#event-move), [Flicking#event:moveEnd](Flicking#event-moveEnd), [Flicking#event:willChange](Flicking#event-willChange), [Flicking#event:changed](Flicking#event-changed), [Flicking#event:willRestore](Flicking#event-willRestore), [Flicking#event:restored](Flicking#event-restored), [Flicking#event:needPanel](Flicking#event-needPanel), [Flicking#event:visibleChange](Flicking#event-visibleChange), [Flicking#event:reachEdge](Flicking#event-reachEdge) + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|duration|number|✔️|[options.duration](Flicking#duration)|Duration of the panel movement animation (unit: ms)| + +**Throws**: [FlickingError](FlickingError) + +|code|condition|
|---|---|
|[INDEX_OUT_OF_RANGE](ERROR_CODE)|When the previous panel does not exist|
|[ANIMATION_ALREADY_PLAYING](ERROR_CODE)|When the animation is already playing|
|[ANIMATION_INTERRUPTED](ERROR_CODE)|When the animation is interrupted by user input|
|[STOP_CALLED_BY_USER](ERROR_CODE)|When the any of the event's `stop()` is called| + +### next {#next} + +
+ async +
+ +Move to the next panel (current index + 1) + +**Returns**: Promise<void> +- A Promise which will be resolved after reaching the next panel + +**Emits**: [Flicking#event:moveStart](Flicking#event-moveStart), [Flicking#event:move](Flicking#event-move), [Flicking#event:moveEnd](Flicking#event-moveEnd), [Flicking#event:willChange](Flicking#event-willChange), [Flicking#event:changed](Flicking#event-changed), [Flicking#event:willRestore](Flicking#event-willRestore), [Flicking#event:restored](Flicking#event-restored), [Flicking#event:needPanel](Flicking#event-needPanel), [Flicking#event:visibleChange](Flicking#event-visibleChange), [Flicking#event:reachEdge](Flicking#event-reachEdge) + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|duration|number|✔️|[options.duration](Flicking#duration)|Duration of the panel movement animation (unit: ms).| + +**Throws**: [FlickingError](FlickingError) + +|code|condition|
|---|---|
|[INDEX_OUT_OF_RANGE](ERROR_CODE)|When the next panel does not exist|
|[ANIMATION_ALREADY_PLAYING](ERROR_CODE)|When the animation is already playing|
|[ANIMATION_INTERRUPTED](ERROR_CODE)|When the animation is interrupted by user input|
|[STOP_CALLED_BY_USER](ERROR_CODE)|When the any of the event's `stop()` is called| + +### moveTo {#moveTo} + +
+ async +
+ +Move to the panel with given index + +**Returns**: Promise<void> +- A Promise which will be resolved after reaching the target panel + +**Emits**: [Flicking#event:moveStart](Flicking#event-moveStart), [Flicking#event:move](Flicking#event-move), [Flicking#event:moveEnd](Flicking#event-moveEnd), [Flicking#event:willChange](Flicking#event-willChange), [Flicking#event:changed](Flicking#event-changed), [Flicking#event:willRestore](Flicking#event-willRestore), [Flicking#event:restored](Flicking#event-restored), [Flicking#event:needPanel](Flicking#event-needPanel), [Flicking#event:visibleChange](Flicking#event-visibleChange), [Flicking#event:reachEdge](Flicking#event-reachEdge) + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|index|number|||The index of the panel to move| +|duration|number|✔️|[options.duration](Flicking#duration)|Duration of the animation (unit: ms)| +|direction|[DIRECTION](DIRECTION)|✔️|DIRECTION.NONE|Direction to move, only available in the [circular](Flicking#circular) mode| + +**Throws**: [FlickingError](FlickingError) + +|code|condition|
|---|---|
|[INDEX_OUT_OF_RANGE](ERROR_CODE)|When the root is not either string or HTMLElement|
|[ANIMATION_ALREADY_PLAYING](ERROR_CODE)|When the animation is already playing|
|[ANIMATION_INTERRUPTED](ERROR_CODE)|When the animation is interrupted by user input|
|[STOP_CALLED_BY_USER](ERROR_CODE)|When the any of the event's `stop()` is called| + +### updateAnimation {#updateAnimation} + +
+ +
+ +Change the destination and duration of the animation currently playing + +**Returns**: void + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|index|number|||The index of the panel to move| +|duration|number|✔️||Duration of the animation (unit: ms)| +|direction|[DIRECTION](DIRECTION)|✔️||Direction to move, only available in the [circular](Flicking#circular) mode| + +**Throws**: [FlickingError](FlickingError) + +[INDEX_OUT_OF_RANGE](ERROR_CODE) When the root is not either string or HTMLElement + +### stopAnimation {#stopAnimation} + +
+ +
+ +Stops the animation currently playing + +**Returns**: void + +**Emits**: [Flicking#event:moveEnd](Flicking#event-moveEnd) + +### getPanel {#getPanel} + +
+ +
+ +Return the [Panel](Panel) at the given index. `null` if it doesn't exists. + +**Returns**: [Panel](Panel) \| null +- Panel at the given index + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|index|number|||| + +**See**: +- [Panel](Panel) +```ts +const panel = flicking.getPanel(0); +// Which is a shorthand to... +const samePanel = flicking.panels[0]; +``` + +### enableInput {#enableInput} + +
+ +
+ +Enable input from the user (mouse/touch) + +**Returns**: this + +### disableInput {#disableInput} + +
+ +
+ +Disable input from the user (mouse/touch) + +**Returns**: this + +### getStatus {#getStatus} + +
+ +
+ +Get current flicking status. You can restore current state by giving returned value to [setStatus()](Flicking#setStatus) + +**Returns**: [Status](Status) +- An object with current status value information + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|options|object|✔️|{}|Status retrieving options| +|options.index|boolean|✔️|true|Include current panel index to the returning status. Camera will automatically move to the given index when the [setStatus](Flicking#setStatus) is called| +|options.position|boolean|✔️|true|Include camera position to the returning status. This works only when the [moveType](Flicking#moveType) is `freeScroll`| +|options.includePanelHTML|boolean|✔️|false|Include panel's `outerHTML` to the returning status| +|options.visiblePanelsOnly|boolean|✔️|false|Include only [visiblePanel](Flicking#visiblePanel)'s HTML. This option is available only when the `includePanelHTML` is true| + +### setStatus {#setStatus} + +
+ +
+ +Restore to the state of the given [Status](Status) + +**Returns**: void + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|status|Partial<[Status](Status)>|||Status value to be restored. You should use the return value of the [getStatus()](Flicking#getStatus) method| + +### addPlugins {#addPlugins} + +
+ +
+ +Add plugins that can have different effects on Flicking + +**Returns**: this + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|plugins|[Plugin](Plugin)|||The plugin(s) to add| + +**See**: +- https://github.com/naver/egjs-flicking-plugins + +### removePlugins {#removePlugins} + +
+ +
+ +Remove plugins from Flicking. + +**Returns**: this + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|plugin|[Plugin](Plugin)|||The plugin(s) to remove.| + +**See**: +- https://github.com/naver/egjs-flicking-plugins + +### resize {#resize} + +
+ async +
+ +Update viewport/panel sizes + +**Returns**: this + +**Emits**: [Flicking#event:beforeResize](Flicking#event-beforeResize), [Flicking#event:afterResize](Flicking#event-afterResize) + +### append {#append} + +
+ +
+ +Add new panels after the last panel + +**Returns**: Array<[Panel](Panel)> +- An array of appended panels + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|element|[ElementLike](ElementLike) \| Array<[ElementLike](ElementLike)>|||A new HTMLElement, a outerHTML of element, or an array of both| + +**Throws**: [FlickingError](FlickingError) + +[ERROR_CODE.NOT_ALLOWED_IN_FRAMEWORK](ERROR_CODE) if called on frameworks (React, Angular, Vue...) +**See**: +- [Panel](Panel) +- [ElementLike](ElementLike) +```ts +const flicking = new Flicking("#flick"); +// These are possible parameters +flicking.append(document.createElement("div")); +flicking.append("\Panel\"); +flicking.append(["\Panel\", document.createElement("div")]); +// Even this is possible +flicking.append("\Panel 1\\Panel 2\"); +``` + +### prepend {#prepend} + +
+ +
+ +Add new panels before the first panel
This will increase index of panels after by the number of panels added + +**Returns**: Array<[Panel](Panel)> +- An array of prepended panels + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|element|[ElementLike](ElementLike) \| Array<[ElementLike](ElementLike)>|||A new HTMLElement, a outerHTML of element, or an array of both| + +**Throws**: [FlickingError](FlickingError) + +[ERROR_CODE.NOT_ALLOWED_IN_FRAMEWORK](ERROR_CODE) if called on frameworks (React, Angular, Vue...) +**See**: +- [Panel](Panel) +- [ElementLike](ElementLike) +```ts +const flicking = new eg.Flicking("#flick"); +flicking.prepend(document.createElement("div")); +flicking.prepend("\Panel\"); +flicking.prepend(["\Panel\", document.createElement("div")]); +// Even this is possible +flicking.prepend("\Panel 1\\Panel 2\"); +``` + +### insert {#insert} + +
+ +
+ +Insert new panels at given index
This will increase index of panels after by the number of panels added + +**Returns**: Array<[Panel](Panel)> +- An array of prepended panels + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|index|number|||Index to insert new panels at| +|element|[ElementLike](ElementLike) \| Array<[ElementLike](ElementLike)>|||A new HTMLElement, a outerHTML of element, or an array of both| + +**Throws**: [FlickingError](FlickingError) + +[ERROR_CODE.NOT_ALLOWED_IN_FRAMEWORK](ERROR_CODE) if called on frameworks (React, Angular, Vue...) + +```ts +const flicking = new eg.Flicking("#flick"); +flicking.insert(0, document.createElement("div")); +flicking.insert(2, "\Panel\"); +flicking.insert(1, ["\Panel\", document.createElement("div")]); +// Even this is possible +flicking.insert(3, "\Panel 1\\Panel 2\"); +``` + +### remove {#remove} + +
+ +
+ +Remove the panel at the given index
This will decrease index of panels after by the number of panels removed + +**Returns**: Array<[Panel](Panel)> +- An array of removed panels + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|index|number|||Index of panel to remove| +|deleteCount|number|✔️|1|Number of panels to remove from index| + +## Events +### ready {#event-ready} + +
+ +
+ +Event that fires when Flicking's [init()](Flicking#init) is called + +**Type**: object + +|PROPERTY|TYPE|DESCRIPTION| +|:---:|:---:|:---:| +|currentTarget|[Flicking](Flicking)|An Flicking instance that triggered this event| +|eventType|string|Name of the event| + +### beforeResize {#event-beforeResize} + +
+ +
+ +Event that fires when Flicking's [resize()](Flicking#resize) is called, before updating the sizes of panels and viewport.
You can update the sizes of panels and viewport with this event, and it'll be applied after [resize()](Flicking#resize) is finished. + +**Type**: object + +|PROPERTY|TYPE|DESCRIPTION| +|:---:|:---:|:---:| +|currentTarget|[Flicking](Flicking)|An Flicking instance that triggered this event| +|eventType|string|Name of the event| +|width|number|Previous width of the viewport| +|height|number|Previous height of the viewport| +|element|HTMLElement|The viewport element| + +### afterResize {#event-afterResize} + +
+ +
+ +Event that fires when Flicking's [resize()](Flicking#resize) is called, after updating the sizes of panels and viewport. + +**Type**: object + +|PROPERTY|TYPE|DESCRIPTION| +|:---:|:---:|:---:| +|currentTarget|[Flicking](Flicking)|An Flicking instance that triggered this event| +|eventType|string|Name of the event| +|width|number|New width of the viewport| +|height|number|New height of the viewport| +|prev|object|Previous size of the viewport| +|prev.width|number|Previous width of the viewport| +|prev.height|number|Previous height of the viewport| +|sizeChanged|boolean|A Boolean value indicating whether the width/height of the viewport element is changed| +|element|HTMLElement|The viewport element| + +### holdStart {#event-holdStart} + +
+ +
+ +Event that fires when user started dragging. + +**Type**: object + +|PROPERTY|TYPE|DESCRIPTION| +|:---:|:---:|:---:| +|currentTarget|[Flicking](Flicking)|An Flicking instance that triggered this event| +|eventType|string|Name of the event| +|stop|function|Stop the event action and prevent user from dragging| +|axesEvent|object|[hold](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:hold) event of [Axes](https://naver.github.io/egjs-axes/)| + +### holdEnd {#event-holdEnd} + +
+ +
+ +Event that fires when user stopped dragging. + +**Type**: object + +|PROPERTY|TYPE|DESCRIPTION| +|:---:|:---:|:---:| +|currentTarget|[Flicking](Flicking)|An Flicking instance that triggered this event| +|eventType|string|Name of the event| +|axesEvent|object|[release](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:release) event of [Axes](https://naver.github.io/egjs-axes/)| + +### moveStart {#event-moveStart} + +
+ +
+ +Event that fires once before first [move](Flicking#event-move) event + +**Type**: object + +|PROPERTY|TYPE|DESCRIPTION| +|:---:|:---:|:---:| +|currentTarget|[Flicking](Flicking)|An Flicking instance that triggered this event| +|eventType|string|Name of the event| +|stop|function|Stop the event action and prevent user from dragging| +|isTrusted|boolean|Boolean that indicates whether the event was generated by a user action| +|holding|boolean|Boolean that indicates whether the user is dragging the viewport element| +|direction|[DIRECTION](DIRECTION)|Moving direction relative to previous position of the camera| +|axesEvent|object|[change](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:change) event of [Axes](https://naver.github.io/egjs-axes/)| + +### move {#event-move} + +
+ +
+ +Event that fires for every movement + +**Type**: object + +|PROPERTY|TYPE|DESCRIPTION| +|:---:|:---:|:---:| +|currentTarget|[Flicking](Flicking)|An Flicking instance that triggered this event| +|eventType|string|Name of the event| +|stop|function|Stop the event action and prevent user from dragging| +|isTrusted|boolean|Boolean that indicates whether the event was generated by a user action| +|holding|boolean|Boolean that indicates whether the user is dragging the viewport element| +|direction|[DIRECTION](DIRECTION)|Moving direction relative to previous position of the camera| +|axesEvent|object|[change](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:change) event of [Axes](https://naver.github.io/egjs-axes/)| + +### moveEnd {#event-moveEnd} + +
+ +
+ +Event that fires when the movement is finished by user input release or animation end. + +**Type**: object + +|PROPERTY|TYPE|DESCRIPTION| +|:---:|:---:|:---:| +|currentTarget|[Flicking](Flicking)|An Flicking instance that triggered this event| +|eventType|string|Name of the event| +|isTrusted|boolean|Boolean that indicates whether the event was generated by a user action| +|holding|boolean|Boolean that indicates whether the user is dragging the viewport element| +|direction|[DIRECTION](DIRECTION)|Moving direction relative to previous position of the camera| +|axesEvent|object|[finish](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:finish) event of [Axes](https://naver.github.io/egjs-axes/)| + +### willChange {#event-willChange} + +
+ +
+ +Event that fires when Flicking's active index will be changed. Index will be changed at the [changed](Flicking#event-changed) event.
It can be triggered when user finished input, or flicking start to move by method.
Calling `stop()` in event will prevent index change and camera movement. + +**Type**: object + +|PROPERTY|TYPE|DESCRIPTION| +|:---:|:---:|:---:| +|currentTarget|[Flicking](Flicking)|An Flicking instance that triggered this event| +|eventType|string|Name of the event| +|stop|function|Stop the event action and prevent user from dragging| +|index|number|New active index| +|panel|[Panel](Panel)|New active panel| +|isTrusted|boolean|Boolean that indicates whether the event was generated by a user action| +|direction|[DIRECTION](DIRECTION)|Moving direction from the active panel to the target panel| + +### changed {#event-changed} + +
+ +
+ +Event that fires when Flicking's index is changed. + +**Type**: object + +|PROPERTY|TYPE|DESCRIPTION| +|:---:|:---:|:---:| +|currentTarget|[Flicking](Flicking)|An Flicking instance that triggered this event| +|eventType|string|Name of the event| +|index|number|New index| +|panel|[Panel](Panel)|New active panel| +|prevIndex|number|Previous index| +|prevPanel|[Panel](Panel) \| null|Previous active panel| +|isTrusted|boolean|Boolean that indicates whether the event was generated by a user action| +|direction|[DIRECTION](DIRECTION)|Moving direction from the active panel to the target panel| + +### willRestore {#event-willRestore} + +
+ +
+ +Event fires when user drag amount not reached [threshold](Flicking#threshold) and is returning to [currentPanel](Flicking#currentPanel) + +**Type**: object + +|PROPERTY|TYPE|DESCRIPTION| +|:---:|:---:|:---:| +|currentTarget|[Flicking](Flicking)|An Flicking instance that triggered this event| +|eventType|string|Name of the event| +|stop|function|Stop the event action and prevent user from dragging| +|index|number|Index of the panel to restore| +|panel|[Panel](Panel)|Panel to restore| +|isTrusted|boolean|Boolean that indicates whether the event was generated by a user action| +|direction|[DIRECTION](DIRECTION)|Moving direction relative to previous position of the camera| + +### restored {#event-restored} + +
+ +
+ +Event that fires when Flicking has returned to [currentPanel](Flicking#currentPanel) + +**Type**: object + +|PROPERTY|TYPE|DESCRIPTION| +|:---:|:---:|:---:| +|currentTarget|[Flicking](Flicking)|An Flicking instance that triggered this event| +|eventType|string|Name of the event| +|isTrusted|boolean|Boolean that indicates whether the event was generated by a user action| + +### select {#event-select} + +
+ +
+ +Event that fires when panel is statically click / touched + +**Type**: object + +|PROPERTY|TYPE|DESCRIPTION| +|:---:|:---:|:---:| +|currentTarget|[Flicking](Flicking)|An Flicking instance that triggered this event| +|eventType|string|Name of the event| +|index|number|Selected panel's index| +|panel|[Panel](Panel)|Selected panel| +|direction|[DIRECTION](DIRECTION)|Direction from current camera position to the selected panel's position| + +### needPanel {#event-needPanel} + +
+ +
+ +Event that fires when an empty panel area is visible at the edge of viewport
You can set its threshold with [needPanelThreshold](Flicking#needPanelThreshold) + +**Type**: object + +|PROPERTY|TYPE|DESCRIPTION| +|:---:|:---:|:---:| +|currentTarget|[Flicking](Flicking)|An Flicking instance that triggered this event| +|eventType|string|Name of the event| +|direction|[DIRECTION](DIRECTION)|Direction where new panel is needed. `DIRECTION.PREV` means panels should be [prepend](Flicking#prepend)ed and `DIRECTION.NEXT` means panels should be [append](Flicking#append)ed| + +### visibleChange {#event-visibleChange} + +
+ +
+ +Event that fires when visible panel inside the viewport changes + +**Type**: object + +|PROPERTY|TYPE|DESCRIPTION| +|:---:|:---:|:---:| +|currentTarget|[Flicking](Flicking)|An Flicking instance that triggered this event| +|eventType|string|Name of the event| +|added|Array<[Panel](Panel)>|Panels that added from previous visible panels| +|removed|Array<[Panel](Panel)>|Panels that removed from previous visible panels| +|visiblePanels|Array<[Panel](Panel)>|Current visible panels| + +### reachEdge {#event-reachEdge} + +
+ +
+ +Event that fires when camera reaches the maximum/minimum range + +**Type**: object + +|PROPERTY|TYPE|DESCRIPTION| +|:---:|:---:|:---:| +|currentTarget|[Flicking](Flicking)|An Flicking instance that triggered this event| +|eventType|string|Name of the event| +|direction|[DIRECTION](DIRECTION)|Direction indicates whether the camera's position is at the maximum range([DIRECTION.NEXT](DIRECTION)) or minimum range([DIRECTION.PREV](DIRECTION))| + +### panelChange {#event-panelChange} + +
+ +
+ +Event that fires when a panel is added or removed + +**Type**: object + +|PROPERTY|TYPE|DESCRIPTION| +|:---:|:---:|:---:| +|currentTarget|[Flicking](Flicking)|An Flicking instance that triggered this event| +|eventType|string|Name of the event| +|added|Array<[Panel](Panel)>|An array of new panels added| +|removed|Array<[Panel](Panel)>|An array of panels removed| + diff --git a/docs/versioned_docs/version-4.12.0/api/FlickingError.mdx b/docs/versioned_docs/version-4.12.0/api/FlickingError.mdx new file mode 100755 index 0000000000..a630e3f84c --- /dev/null +++ b/docs/versioned_docs/version-4.12.0/api/FlickingError.mdx @@ -0,0 +1,47 @@ +--- +custom_edit_url: null +--- + +```ts +class FlickingError extends Error +``` + +
+ +
+ +Special type of known error that [Flicking](Flicking) throws. + +|PROPERTY|TYPE|DESCRIPTION| +|:---:|:---:|:---:| +|code|number|Error code| +|message|string|Error message| + +**See**: +- [ERROR_CODE](ERROR_CODE) + +## constructor +```ts +new FlickingError(message, code) +``` + +
+ +
+ +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|message|string|||Error message| +|code|number|||Error code| + +```ts +import Flicking, { FlickingError, ERROR_CODES } from "@egjs/flicking"; +try { + const flicking = new Flicking(".flicking-viewport") +} catch (e) { + if (e instanceof FlickingError && e.code === ERROR_CODES.ELEMENT_NOT_FOUND) { + console.error("Element not found") + } +} +``` + diff --git a/docs/versioned_docs/version-4.12.0/api/FlickingEvents.mdx b/docs/versioned_docs/version-4.12.0/api/FlickingEvents.mdx new file mode 100755 index 0000000000..73a1540df7 --- /dev/null +++ b/docs/versioned_docs/version-4.12.0/api/FlickingEvents.mdx @@ -0,0 +1,12 @@ +--- +custom_edit_url: null +--- + +```ts +interface FlickingEvents +``` + +
+ +
+ diff --git a/docs/versioned_docs/version-4.12.0/api/FlickingOptions.mdx b/docs/versioned_docs/version-4.12.0/api/FlickingOptions.mdx new file mode 100755 index 0000000000..8c1776b5cf --- /dev/null +++ b/docs/versioned_docs/version-4.12.0/api/FlickingOptions.mdx @@ -0,0 +1,12 @@ +--- +custom_edit_url: null +--- + +```ts +interface FlickingOptions +``` + +
+ +
+ diff --git a/docs/versioned_docs/version-4.12.0/api/FreeControl.mdx b/docs/versioned_docs/version-4.12.0/api/FreeControl.mdx new file mode 100755 index 0000000000..20e97bf181 --- /dev/null +++ b/docs/versioned_docs/version-4.12.0/api/FreeControl.mdx @@ -0,0 +1,298 @@ +--- +custom_edit_url: null +--- + +```ts +class FreeControl extends Control +``` + +
+ +
+ +A [Control](Control) that can be scrolled freely without alignment + +
+
Properties
Methods
+
stopAtEdge
controller
activeIndex
activePanel
animating
holding
updatePosition
moveToPosition
init
destroy
enable
disable
release
updateAnimation
stopAnimation
updateInput
resetActive
moveToPanel
setActive
copy
+
+ +## constructor +```ts +new FreeControl() +``` + +
+ +
+ +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +||Partial<[FreeControlOptions](FreeControlOptions)>|✔️|{}|| + +## Properties + +### stopAtEdge {#stopAtEdge} + +
+ +
+ +Make scroll animation to stop at the start/end of the scroll area, not going out the bounce area + +**Type**: boolean + +**Default**: true + +### controller {#controller} + +
+ readonly + inherited +
+ +A controller that handles the [@egjs/axes](https://naver.github.io/egjs-axes/) events + +**Type**: [AxesController](AxesController) + +### activeIndex {#activeIndex} + +
+ readonly + inherited +
+ +Index number of the [currentPanel](Flicking#currentPanel) + +**Type**: number + +**Default**: 0 + +### activePanel {#activePanel} + +
+ readonly + inherited +
+ +An active panel + +**Type**: [Panel](Panel) \| null + +### animating {#animating} + +
+ readonly + inherited +
+ +Whether Flicking's animating + +**Type**: boolean + +### holding {#holding} + +
+ readonly + inherited +
+ +Whether user is clicking or touching + +**Type**: boolean + +## Methods + +### updatePosition {#updatePosition} + +
+ +
+ +Update position after resizing + +**Returns**: Promise<void> + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|progressInPanel|number|||Previous camera's progress in active panel before resize| + +**Throws**: [FlickingError](FlickingError) + +[NOT_ATTACHED_TO_FLICKING](ERROR_CODE) When [init](Camera#init) is not called before + +### moveToPosition {#moveToPosition} + +
+ +
+ +Move [Camera](Camera) to the given position + +**Returns**: Promise<void> +- A Promise which will be resolved after reaching the target position + +**Emits**: [Flicking#event:moveStart](Flicking#event-moveStart), [Flicking#event:move](Flicking#event-move), [Flicking#event:moveEnd](Flicking#event-moveEnd), [Flicking#event:willChange](Flicking#event-willChange), [Flicking#event:changed](Flicking#event-changed), [Flicking#event:willRestore](Flicking#event-willRestore), [Flicking#event:restored](Flicking#event-restored), [Flicking#event:needPanel](Flicking#event-needPanel), [Flicking#event:visibleChange](Flicking#event-visibleChange), [Flicking#event:reachEdge](Flicking#event-reachEdge) + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|position|number|||The target position to move| +|duration|number|||Duration of the panel movement animation (unit: ms).| +|axesEvent|object|✔️||[release](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:release) event of [Axes](https://naver.github.io/egjs-axes/)| + +**Throws**: [FlickingError](FlickingError) + +|code|condition|
|---|---|
|[POSITION_NOT_REACHABLE](ERROR_CODE)|When the given panel is already removed or not in the Camera's [range](Camera#range)|
|[NOT_ATTACHED_TO_FLICKING](ERROR_CODE)|When [init](Control#init) is not called before|
|[ANIMATION_INTERRUPTED](ERROR_CODE)|When the animation is interrupted by user input|
|[STOP_CALLED_BY_USER](ERROR_CODE)|When the animation is interrupted by user input| + +### init {#init} + +
+ inherited +
+ +Initialize Control + +**Returns**: this + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|flicking|[Flicking](Flicking)|||An instance of [Flicking](Flicking)| + +### destroy {#destroy} + +
+ inherited +
+ +Destroy Control and return to initial state + +**Returns**: void + +### enable {#enable} + +
+ inherited +
+ +Enable input from the user (mouse/touch) + +**Returns**: this + +### disable {#disable} + +
+ inherited +
+ +Disable input from the user (mouse/touch) + +**Returns**: this + +### release {#release} + +
+ inherited +
+ +Releases ongoing user input (mouse/touch) + +**Returns**: this + +### updateAnimation {#updateAnimation} + +
+ inherited +
+ +Change the destination and duration of the animation currently playing + +**Returns**: this + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|panel|[Panel](Panel)|||The target panel to move| +|duration|number|✔️||Duration of the animation (unit: ms)| +|direction|[DIRECTION](DIRECTION)|✔️||Direction to move, only available in the [circular](Flicking#circular) mode| + +**Throws**: [FlickingError](FlickingError) + +[POSITION_NOT_REACHABLE](ERROR_CODE) When the given panel is already removed or not in the Camera's [range](Camera#range) + +### stopAnimation {#stopAnimation} + +
+ inherited +
+ +Stops the animation currently playing + +**Returns**: this + +### updateInput {#updateInput} + +
+ inherited +
+ +Update [controller](Control#controller)'s state + +**Returns**: this + +### resetActive {#resetActive} + +
+ inherited +
+ +Reset [activePanel](Control#activePanel) to `null` + +**Returns**: this + +### moveToPanel {#moveToPanel} + +
+ inherited + async +
+ +Move [Camera](Camera) to the given panel + +**Returns**: Promise<void> +- A Promise which will be resolved after reaching the target panel + +**Emits**: [Flicking#event:moveStart](Flicking#event-moveStart), [Flicking#event:move](Flicking#event-move), [Flicking#event:moveEnd](Flicking#event-moveEnd), [Flicking#event:willChange](Flicking#event-willChange), [Flicking#event:changed](Flicking#event-changed), [Flicking#event:willRestore](Flicking#event-willRestore), [Flicking#event:restored](Flicking#event-restored), [Flicking#event:needPanel](Flicking#event-needPanel), [Flicking#event:visibleChange](Flicking#event-visibleChange), [Flicking#event:reachEdge](Flicking#event-reachEdge) + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|panel|[Panel](Panel)|||The target panel to move| +|options|object|||An options object| +|duration|number|||Duration of the animation (unit: ms)| +|axesEvent|object|✔️||[release](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:release) event of [Axes](https://naver.github.io/egjs-axes/)| +|direction|[DIRECTION](DIRECTION)|✔️|DIRECTION.NONE|Direction to move, only available in the [circular](Flicking#circular) mode| + +**Throws**: [FlickingError](FlickingError) + +|code|condition|
|---|---|
|[POSITION_NOT_REACHABLE](ERROR_CODE)|When the given panel is already removed or not in the Camera's [range](Camera#range)|
|[NOT_ATTACHED_TO_FLICKING](ERROR_CODE)|When [init](Control#init) is not called before|
|[ANIMATION_INTERRUPTED](ERROR_CODE)|When the animation is interrupted by user input|
|[STOP_CALLED_BY_USER](ERROR_CODE)|When the animation is interrupted by user input| + +### setActive {#setActive} + +
+ inherited +
+ +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|newActivePanel|[Panel](Panel)|||| +|prevActivePanel|[Panel](Panel) \| null|||| +|isTrusted|boolean|||| + +### copy {#copy} + +
+ inherited +
+ +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|control|[Control](Control)|||| + diff --git a/docs/versioned_docs/version-4.12.0/api/FreeControlOptions.mdx b/docs/versioned_docs/version-4.12.0/api/FreeControlOptions.mdx new file mode 100755 index 0000000000..e8e4a2453d --- /dev/null +++ b/docs/versioned_docs/version-4.12.0/api/FreeControlOptions.mdx @@ -0,0 +1,18 @@ +--- +custom_edit_url: null +--- + +```ts +interface FreeControlOptions +``` + +
+ +
+ +An options for the [FreeControl](FreeControl) + +|PROPERTY|TYPE|DESCRIPTION| +|:---:|:---:|:---:| +|stopAtEdge|boolean|Make scroll animation to stop at the start/end of the scroll area, not going out the bounce area| + diff --git a/docs/versioned_docs/version-4.12.0/api/HoldingState.mdx b/docs/versioned_docs/version-4.12.0/api/HoldingState.mdx new file mode 100755 index 0000000000..ebad7c0f45 --- /dev/null +++ b/docs/versioned_docs/version-4.12.0/api/HoldingState.mdx @@ -0,0 +1,166 @@ +--- +custom_edit_url: null +--- + +
⚠️ This class is for internal use only.
+ +```ts +class HoldingState extends State +``` + +
+ +
+ +A state that activates when user's holding the Flicking area, but not moved a single pixel yet + +
+
Properties
Methods
+
holding
animating
delta
targetPanel
onEnter
onHold
onChange
onRelease
onAnimationEnd
onFinish
+
+ +## Properties + +### holding {#holding} + +
+ readonly +
+ +Whether user is clicking or touching + +**Type**: true + +### animating {#animating} + +
+ readonly +
+ +Whether Flicking's animating + +**Type**: false + +### delta {#delta} + +
+ readonly + inherited +
+ +A sum of delta values of change events from the last hold event of Axes + +**Type**: number + +### targetPanel {#targetPanel} + +
+ readonly + inherited +
+ +A panel to set as [Control#activePanel](Control#activePanel) after the animation is finished + +**Type**: number + +## Methods + +### onEnter {#onEnter} + +
+ inherited +
+ +An callback which is called when state has changed to this state + +**Returns**: void + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|prevState|[State](State)|||An previous state| + +### onHold {#onHold} + +
+ inherited +
+ +An event handler for Axes's [hold](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:hold) event + +**Returns**: void + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|ctx|object|✔️||Event context| +|ctx.flicking|[Flicking](Flicking)|✔️||An instance of Flicking| +|ctx.axesEvent|object|✔️||A [hold](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:hold) event of Axes| +|ctx.transitTo|function|✔️||A function for changing current state to other state| + +### onChange {#onChange} + +
+ inherited +
+ +An event handler for Axes's [change](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:change) event + +**Returns**: void + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|ctx|object|✔️||Event context| +|ctx.flicking|[Flicking](Flicking)|✔️||An instance of Flicking| +|ctx.axesEvent|object|✔️||A [change](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:change) event of Axes| +|ctx.transitTo|function|✔️||A function for changing current state to other state| + +### onRelease {#onRelease} + +
+ inherited +
+ +An event handler for Axes's [release](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:release) event + +**Returns**: void + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|ctx|object|✔️||Event context| +|ctx.flicking|[Flicking](Flicking)|✔️||An instance of Flicking| +|ctx.axesEvent|object|✔️||A [release](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:release) event of Axes| +|ctx.transitTo|function|✔️||A function for changing current state to other state| + +### onAnimationEnd {#onAnimationEnd} + +
+ inherited +
+ +An event handler for Axes's [animationEnd](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:animationEnd) event + +**Returns**: void + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|ctx|object|✔️||Event context| +|ctx.flicking|[Flicking](Flicking)|✔️||An instance of Flicking| +|ctx.axesEvent|object|✔️||A [animationEnd](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:animationEnd) event of Axes| +|ctx.transitTo|function|✔️||A function for changing current state to other state| + +### onFinish {#onFinish} + +
+ inherited +
+ +An event handler for Axes's [finish](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:finish) event + +**Returns**: void + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|ctx|object|✔️||Event context| +|ctx.flicking|[Flicking](Flicking)|✔️||An instance of Flicking| +|ctx.axesEvent|object|✔️||A [finish](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:finish) event of Axes| +|ctx.transitTo|function|✔️||A function for changing current state to other state| + diff --git a/docs/versioned_docs/version-4.12.0/api/IdleState.mdx b/docs/versioned_docs/version-4.12.0/api/IdleState.mdx new file mode 100755 index 0000000000..01d92fa47e --- /dev/null +++ b/docs/versioned_docs/version-4.12.0/api/IdleState.mdx @@ -0,0 +1,166 @@ +--- +custom_edit_url: null +--- + +
⚠️ This class is for internal use only.
+ +```ts +class IdleState extends State +``` + +
+ +
+ +A default state when there's no user input and no animation's playing + +
+
Properties
Methods
+
holding
animating
delta
targetPanel
onEnter
onHold
onChange
onRelease
onAnimationEnd
onFinish
+
+ +## Properties + +### holding {#holding} + +
+ readonly +
+ +Whether user is clicking or touching + +**Type**: false + +### animating {#animating} + +
+ readonly +
+ +Whether Flicking's animating + +**Type**: false + +### delta {#delta} + +
+ readonly + inherited +
+ +A sum of delta values of change events from the last hold event of Axes + +**Type**: number + +### targetPanel {#targetPanel} + +
+ readonly + inherited +
+ +A panel to set as [Control#activePanel](Control#activePanel) after the animation is finished + +**Type**: number + +## Methods + +### onEnter {#onEnter} + +
+ inherited +
+ +An callback which is called when state has changed to this state + +**Returns**: void + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|prevState|[State](State)|||An previous state| + +### onHold {#onHold} + +
+ inherited +
+ +An event handler for Axes's [hold](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:hold) event + +**Returns**: void + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|ctx|object|✔️||Event context| +|ctx.flicking|[Flicking](Flicking)|✔️||An instance of Flicking| +|ctx.axesEvent|object|✔️||A [hold](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:hold) event of Axes| +|ctx.transitTo|function|✔️||A function for changing current state to other state| + +### onChange {#onChange} + +
+ inherited +
+ +An event handler for Axes's [change](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:change) event + +**Returns**: void + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|ctx|object|✔️||Event context| +|ctx.flicking|[Flicking](Flicking)|✔️||An instance of Flicking| +|ctx.axesEvent|object|✔️||A [change](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:change) event of Axes| +|ctx.transitTo|function|✔️||A function for changing current state to other state| + +### onRelease {#onRelease} + +
+ inherited +
+ +An event handler for Axes's [release](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:release) event + +**Returns**: void + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|ctx|object|✔️||Event context| +|ctx.flicking|[Flicking](Flicking)|✔️||An instance of Flicking| +|ctx.axesEvent|object|✔️||A [release](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:release) event of Axes| +|ctx.transitTo|function|✔️||A function for changing current state to other state| + +### onAnimationEnd {#onAnimationEnd} + +
+ inherited +
+ +An event handler for Axes's [animationEnd](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:animationEnd) event + +**Returns**: void + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|ctx|object|✔️||Event context| +|ctx.flicking|[Flicking](Flicking)|✔️||An instance of Flicking| +|ctx.axesEvent|object|✔️||A [animationEnd](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:animationEnd) event of Axes| +|ctx.transitTo|function|✔️||A function for changing current state to other state| + +### onFinish {#onFinish} + +
+ inherited +
+ +An event handler for Axes's [finish](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:finish) event + +**Returns**: void + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|ctx|object|✔️||Event context| +|ctx.flicking|[Flicking](Flicking)|✔️||An instance of Flicking| +|ctx.axesEvent|object|✔️||A [finish](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:finish) event of Axes| +|ctx.transitTo|function|✔️||A function for changing current state to other state| + diff --git a/docs/versioned_docs/version-4.12.0/api/MOVE_DIRECTION.mdx b/docs/versioned_docs/version-4.12.0/api/MOVE_DIRECTION.mdx new file mode 100644 index 0000000000..bc6a8acf95 --- /dev/null +++ b/docs/versioned_docs/version-4.12.0/api/MOVE_DIRECTION.mdx @@ -0,0 +1,21 @@ +--- +custom_edit_url: null +--- + +```ts +const MOVE_DIRECTION +``` + +
+ +
+ +An object that contains the direction that [Flicking](Flicking) is moving + +**Type**: object + +|PROPERTY|TYPE|DESCRIPTION| +|:---:|:---:|:---:| +|HORIZONTAL|"horizontal"|horizontal| +|VERTICAL|"vertical"|vertical| + diff --git a/docs/versioned_docs/version-4.12.0/api/MOVE_TYPE.mdx b/docs/versioned_docs/version-4.12.0/api/MOVE_TYPE.mdx new file mode 100755 index 0000000000..e31a1da89e --- /dev/null +++ b/docs/versioned_docs/version-4.12.0/api/MOVE_TYPE.mdx @@ -0,0 +1,22 @@ +--- +custom_edit_url: null +--- + +```ts +const MOVE_TYPE +``` + +
+ +
+ +An object with all possible [moveType](Flicking#moveType)s + +**Type**: object + +|PROPERTY|TYPE|DESCRIPTION| +|:---:|:---:|:---:| +|SNAP|"snap"|Flicking's [moveType](Flicking#moveType) that enables [SnapControl](SnapControl) as a Flicking's [control](Flicking#control)| +|FREE_SCROLL|"freeScroll"|Flicking's [moveType](Flicking#moveType) that enables [FreeControl](FreeControl) as a Flicking's [control](Flicking#control)| +|STRICT|"strict"|Flicking's [moveType](Flicking#moveType) that enables [StrictControl](StrictControl) as a Flicking's [control](Flicking#control)| + diff --git a/docs/versioned_docs/version-4.12.0/api/ORDER.mdx b/docs/versioned_docs/version-4.12.0/api/ORDER.mdx new file mode 100755 index 0000000000..16ff913b3a --- /dev/null +++ b/docs/versioned_docs/version-4.12.0/api/ORDER.mdx @@ -0,0 +1,21 @@ +--- +custom_edit_url: null +--- + +```ts +const ORDER +``` + +
+ +
+ +An object for identifying [direction](https://developer.mozilla.org/en-US/docs/Web/CSS/direction) CSS property applied to the camera element(`.flicking-camera`) + +**Type**: object + +|PROPERTY|TYPE|DESCRIPTION| +|:---:|:---:|:---:| +|LTR|string|"ltr"| +|RTL|string|"rtl"| + diff --git a/docs/versioned_docs/version-4.12.0/api/POSITION_KEY.mdx b/docs/versioned_docs/version-4.12.0/api/POSITION_KEY.mdx new file mode 100755 index 0000000000..b6e20054a2 --- /dev/null +++ b/docs/versioned_docs/version-4.12.0/api/POSITION_KEY.mdx @@ -0,0 +1,14 @@ +--- +custom_edit_url: null +--- + +```ts +const POSITION_KEY +``` + +
+ +
+ +An Axis key that Flicking uses + diff --git a/docs/versioned_docs/version-4.12.0/api/Panel.mdx b/docs/versioned_docs/version-4.12.0/api/Panel.mdx new file mode 100755 index 0000000000..8959e3e1a9 --- /dev/null +++ b/docs/versioned_docs/version-4.12.0/api/Panel.mdx @@ -0,0 +1,461 @@ +--- +custom_edit_url: null +--- + +```ts +class Panel +``` + +
+ +
+ +A slide data component that holds information of a single HTMLElement + +
+
Properties
Methods
+
element
elementProvider
index
position
size
sizeIncludingMargin
height
margin
alignPosition
removed
rendered
loading
range
toggled
toggleDirection
offset
progress
outsetProgress
visibleRatio
align
markForShow
markForHide
resize
setSize
contains
destroy
includePosition
includeRange
isVisibleOnRange
focus
prev
next
increaseIndex
decreaseIndex
updatePosition
toggle
updateCircularToggleDirection
+
+ +## constructor +```ts +new Panel(options, options.index, options.align, options.flicking, options.elementProvider) +``` + +
+ +
+ +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|options|object|||An options object| +|options.index|number|✔️||An initial index of the panel| +|options.align|Constants.ALIGN \| string \| number|✔️||An initial [align](Flicking#align) value of the panel| +|options.flicking|[Flicking](Flicking)|✔️||A Flicking instance panel's referencing| +|options.elementProvider|[Flicking](Flicking)|✔️||A provider instance that redirects elements| + +## Properties + +### element {#element} + +
+ readonly +
+ +`HTMLElement` that panel's referencing + +**Type**: HTMLElement + +### elementProvider {#elementProvider} + +
+ readonly +
+ +### index {#index} + +
+ readonly +
+ +Index of the panel + +**Type**: number + +### position {#position} + +
+ readonly +
+ +Position of the panel, including [alignPosition](Panel#alignPosition) + +**Type**: number + +### size {#size} + +
+ readonly +
+ +Cached size of the panel element
This is equal to [element](Panel#element)'s `offsetWidth` if [horizontal](Flicking#horizontal) is `true`, and `offsetHeight` else + +**Type**: number + +### sizeIncludingMargin {#sizeIncludingMargin} + +
+ readonly +
+ +Panel's size including CSS `margin`
This value includes [element](Panel#element)'s margin left/right if [horizontal](Flicking#horizontal) is `true`, and margin top/bottom else + +**Type**: number + +### height {#height} + +
+ readonly +
+ +Height of the panel element + +**Type**: number + +### margin {#margin} + +
+ readonly +
+ +Cached CSS `margin` value of the panel element + +**Type**: object + +|PROPERTY|TYPE|DESCRIPTION| +|:---:|:---:|:---:| +|prev|number|CSS `margin-left` when the [horizontal](Flicking#horizontal) is `true`, and `margin-top` else| +|next|number|CSS `margin-right` when the [horizontal](Flicking#horizontal) is `true`, and `margin-bottom` else| + +### alignPosition {#alignPosition} + +
+ readonly +
+ +Align position inside the panel where [Camera](Camera)'s [alignPosition](Camera#alignPosition) inside viewport should be located at + +**Type**: number + +### removed {#removed} + +
+ readonly +
+ +A value indicating whether the panel's [remove](Flicking#remove)d + +**Type**: boolean + +### rendered {#rendered} + +
+ readonly +
+ +A value indicating whether the panel's element is being rendered on the screen + +**Type**: boolean + +### loading {#loading} + +
+ readonly +
+ +A value indicating whether the panel's image/video is not loaded and waiting for resize + +**Type**: boolean + +### range {#range} + +
+ readonly +
+ +Panel element's range of the bounding box + +**Type**: object + +|PROPERTY|TYPE|DESCRIPTION| +|:---:|:---:|:---:| +|min|number|Bounding box's left([horizontal](Flicking#horizontal): true) / top([horizontal](Flicking#horizontal): false)| +|max|number|Bounding box's right([horizontal](Flicking#horizontal): true) / bottom([horizontal](Flicking#horizontal): false)| + +### toggled {#toggled} + +
+ readonly +
+ +A value indicating whether the panel's position is toggled by circular behavior + +**Type**: boolean + +### toggleDirection {#toggleDirection} + +
+ readonly +
+ +A direction where the panel's position is toggled + +**Type**: [DIRECTION](DIRECTION) + +### offset {#offset} + +
+ readonly +
+ +Actual position offset determined by [Panel#order](Panel#order) + +**Type**: number + +### progress {#progress} + +
+ readonly +
+ +Progress of movement between previous or next panel relative to current panel + +**Type**: number + +### outsetProgress {#outsetProgress} + +
+ readonly +
+ +Progress of movement between points that panel is completely invisible outside of viewport(prev direction: -1, selected point: 0, next direction: 1) + +**Type**: number + +### visibleRatio {#visibleRatio} + +
+ readonly +
+ +Percentage of area where panel is visible in the viewport + +**Type**: number + +### align {#align} + +
+ +
+ +A value indicating where the [alignPosition](Panel#alignPosition) should be located at inside the panel element + +**Type**: Constants.ALIGN \| string \| number + +## Methods + +### markForShow {#markForShow} + +
+ +
+ +Mark panel element to be appended on the camera element + +### markForHide {#markForHide} + +
+ +
+ +Mark panel element to be removed from the camera element + +### resize {#resize} + +
+ +
+ +Update size of the panel + +**Returns**: this + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|cached|object|✔️||Predefined cached size of the panel| + +### setSize {#setSize} + +
+ +
+ +Change panel's size. This will change the actual size of the panel element by changing its CSS width/height property + +**Returns**: this + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|size|object|✔️||New panel size| +|size.width|number \| string|✔️||CSS string or number(in px)| +|size.height|number \| string|✔️||CSS string or number(in px)| + +### contains {#contains} + +
+ +
+ +Check whether the given element is inside of this panel's [element](Panel#element) + +**Returns**: boolean +- A Boolean value indicating the element is inside of this panel [element](Panel#element) + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|element|HTMLElement|||The HTMLElement to check| + +### destroy {#destroy} + +
+ +
+ +Reset internal state and set [removed](Panel#removed) to `true` + +**Returns**: void + +### includePosition {#includePosition} + +
+ +
+ +Check whether the given position is inside of this panel's [range](Panel#range) + +**Returns**: boolean +- A Boolean value indicating whether the given position is included in the panel range + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|pos|number|||A position to check| +|includeMargin|boolean|✔️|false|Include [margin](Panel#margin) to the range| + +### includeRange {#includeRange} + +
+ +
+ +Check whether the given range is fully included in this panel's area (inclusive) + +**Returns**: boolean +- A Boolean value indicating whether the given range is fully included in the panel range + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|min|number|||Minimum value of the range to check| +|max|number|||Maximum value of the range to check| +|includeMargin|boolean|✔️|false|Include [margin](Panel#margin) to the range| + +### isVisibleOnRange {#isVisibleOnRange} + +
+ +
+ +Check whether the panel is visble in the given range (exclusive) + +**Returns**: boolean +- A Boolean value indicating whether the panel is visible + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|min|number|||Minimum value of the range to check| +|max|number|||Maximum value of the range to check| + +### focus {#focus} + +
+ +
+ +Move [Camera](Camera) to this panel + +**Returns**: Promise<void> +- A Promise which will be resolved after reaching the panel + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|duration|number|✔️||Duration of the animation (unit: ms)| + +### prev {#prev} + +
+ +
+ +Get previous(`index - 1`) panel. When the previous panel does not exist, this will return `null` instead
If the [circular](Flicking#circularEnabled) is enabled, this will return the last panel if called from the first panel + +**Returns**: [Panel](Panel) \| null +- The previous panel + +### next {#next} + +
+ +
+ +Get next(`index + 1`) panel. When the next panel does not exist, this will return `null` instead
If the [circular](Flicking#circularEnabled) is enabled, this will return the first panel if called from the last panel + +**Returns**: [Panel](Panel) \| null +- The previous panel + +### increaseIndex {#increaseIndex} + +
+ +
+ +Increase panel's index by the given value + +**Returns**: this + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|val|number|||An integer greater than or equal to 0| + +### decreaseIndex {#decreaseIndex} + +
+ +
+ +Decrease panel's index by the given value + +**Returns**: this + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|val|number|||An integer greater than or equal to 0| + +### updatePosition {#updatePosition} + +
+ +
+ +**Returns**: this + +### toggle {#toggle} + +
+ +
+ +**Returns**: boolean +- toggled + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|prevPos|number|||| +|newPos|number|||| + +### updateCircularToggleDirection {#updateCircularToggleDirection} + +
+ +
+ +**Returns**: this + diff --git a/docs/versioned_docs/version-4.12.0/api/Plugin.mdx b/docs/versioned_docs/version-4.12.0/api/Plugin.mdx new file mode 100755 index 0000000000..f3fe44b04c --- /dev/null +++ b/docs/versioned_docs/version-4.12.0/api/Plugin.mdx @@ -0,0 +1,20 @@ +--- +custom_edit_url: null +--- + +```ts +interface Plugin +``` + +
+ +
+ +Flicking Plugin + +|PROPERTY|TYPE|DESCRIPTION| +|:---:|:---:|:---:| +|undefined||Initialize the plugin| +|undefined||Destroy plugin and detach all events binded| +|undefined||Update plugin to match current Flicking's status| + diff --git a/docs/versioned_docs/version-4.12.0/api/Renderer.mdx b/docs/versioned_docs/version-4.12.0/api/Renderer.mdx new file mode 100755 index 0000000000..73de2ed683 --- /dev/null +++ b/docs/versioned_docs/version-4.12.0/api/Renderer.mdx @@ -0,0 +1,230 @@ +--- +custom_edit_url: null +--- + +```ts +class Renderer +``` + +
+ +
+ +A component that manages [Panel](Panel) and its elements + +
+
Properties
Methods
+
panels
rendering
panelCount
strategy
align
render
init
destroy
getPanel
updatePanelSize
batchInsert
batchInsertDefer
batchRemove
batchRemoveDefer
updateAfterPanelChange
checkPanelContentsReady
+
+ +## constructor +```ts +new Renderer(options, options.align, options.strategy) +``` + +
+ +
+ +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|options|object|||An options object| +|options.align|Constants.ALIGN \| string \| number|✔️|"center"|An [align](Flicking#align) value that will be applied to all panels| +|options.strategy|object|✔️||An instance of RenderingStrategy(internal module)| + +## Properties + +### panels {#panels} + +
+ readonly +
+ +Array of panels + +**Type**: Array<[Panel](Panel)> + +**See**: +- [Panel](Panel) + +### rendering {#rendering} + +
+ readonly +
+ +A boolean value indicating whether rendering is in progress + +**Type**: boolean + +### panelCount {#panelCount} + +
+ readonly +
+ +Count of panels + +**Type**: number + +### strategy {#strategy} + +
+ +
+ +### align {#align} + +
+ +
+ +A [Panel](Panel)'s [align](Panel#align) value that applied to all panels + +**Type**: Constants.ALIGN \| string \| number + +## Methods + +### render {#render} + +
+ +
+ +Render panel elements inside the camera element + +**Returns**: this + +### init {#init} + +
+ +
+ +Initialize Renderer + +**Returns**: this + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|flicking|[Flicking](Flicking)|||An instance of [Flicking](Flicking)| + +### destroy {#destroy} + +
+ +
+ +Destroy Renderer and return to initial state + +**Returns**: void + +### getPanel {#getPanel} + +
+ +
+ +Return the [Panel](Panel) at the given index. `null` if it doesn't exists. + +**Returns**: [Panel](Panel) \| null +- Panel at the given index + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|index|number|||| + +**See**: +- [Panel](Panel) + +### updatePanelSize {#updatePanelSize} + +
+ +
+ +Update all panel sizes + +**Returns**: this + +### batchInsert {#batchInsert} + +
+ +
+ +Insert new panels at given index
This will increase index of panels after by the number of panels added + +**Returns**: Array<[Panel](Panel)> +- An array of prepended panels + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|items|Array<object>|||An array of items to insert| +|items.index|number|✔️||Index to insert new panels at| +|items.elements|Array<any>|✔️||An array of element or framework component with element in it| +|items.hasDOMInElements|boolean|✔️||Whether it contains actual DOM elements. If set to true, renderer will add them to the camera element| + +### batchInsertDefer {#batchInsertDefer} + +
+ +
+ +Defers update
camera position & others will be updated after calling updateAfterPanelChange + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|...items|Array<{index: number, elements: any[], hasDOMInElements: boolean}>|||| + +### batchRemove {#batchRemove} + +
+ +
+ +Remove the panel at the given index
This will decrease index of panels after by the number of panels removed + +**Returns**: [Panel](Panel)[] +- An array of removed panels + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|items|Array<object>|||An array of items to remove| +|items.index|number|✔️||Index of panel to remove| +|items.deleteCount|number|✔️|1|Number of panels to remove from index| +|items.hasDOMInElements|boolean|✔️|1|Whether it contains actual DOM elements. If set to true, renderer will remove them from the camera element| + +### batchRemoveDefer {#batchRemoveDefer} + +
+ +
+ +Defers update
camera position & others will be updated after calling updateAfterPanelChange + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|...items|Array<{index: number, deleteCount: number, hasDOMInElements: boolean}>|||| + +### updateAfterPanelChange {#updateAfterPanelChange} + +
+ +
+ +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|panelsAdded|[Panel](Panel)[]|||| +|panelsRemoved|[Panel](Panel)[]|||| + +### checkPanelContentsReady {#checkPanelContentsReady} + +
+ +
+ +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|checkingPanels|[Panel](Panel)[]|||| + diff --git a/docs/versioned_docs/version-4.12.0/api/RenderingStrategy.mdx b/docs/versioned_docs/version-4.12.0/api/RenderingStrategy.mdx new file mode 100755 index 0000000000..a64fc397f1 --- /dev/null +++ b/docs/versioned_docs/version-4.12.0/api/RenderingStrategy.mdx @@ -0,0 +1,12 @@ +--- +custom_edit_url: null +--- + +```ts +member RenderingStrategy +``` + +
+ +
+ diff --git a/docs/versioned_docs/version-4.12.0/api/SnapControl.mdx b/docs/versioned_docs/version-4.12.0/api/SnapControl.mdx new file mode 100755 index 0000000000..680ad3f6c1 --- /dev/null +++ b/docs/versioned_docs/version-4.12.0/api/SnapControl.mdx @@ -0,0 +1,298 @@ +--- +custom_edit_url: null +--- + +```ts +class SnapControl extends Control +``` + +
+ +
+ +A [Control](Control) that uses a release momentum to choose destination panel + +
+
Properties
Methods
+
count
controller
activeIndex
activePanel
animating
holding
moveToPosition
init
destroy
enable
disable
release
updateAnimation
stopAnimation
updatePosition
updateInput
resetActive
moveToPanel
setActive
copy
+
+ +## constructor +```ts +new SnapControl() +``` + +
+ +
+ +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +||Partial<[SnapControlOptions](SnapControlOptions)>|✔️|{}|| + +## Properties + +### count {#count} + +
+ +
+ +Maximum number of panels can go after release + +**Type**: number + +**Default**: Infinity + +### controller {#controller} + +
+ readonly + inherited +
+ +A controller that handles the [@egjs/axes](https://naver.github.io/egjs-axes/) events + +**Type**: [AxesController](AxesController) + +### activeIndex {#activeIndex} + +
+ readonly + inherited +
+ +Index number of the [currentPanel](Flicking#currentPanel) + +**Type**: number + +**Default**: 0 + +### activePanel {#activePanel} + +
+ readonly + inherited +
+ +An active panel + +**Type**: [Panel](Panel) \| null + +### animating {#animating} + +
+ readonly + inherited +
+ +Whether Flicking's animating + +**Type**: boolean + +### holding {#holding} + +
+ readonly + inherited +
+ +Whether user is clicking or touching + +**Type**: boolean + +## Methods + +### moveToPosition {#moveToPosition} + +
+ +
+ +Move [Camera](Camera) to the given position + +**Returns**: Promise<void> +- A Promise which will be resolved after reaching the target position + +**Emits**: [Flicking#event:moveStart](Flicking#event-moveStart), [Flicking#event:move](Flicking#event-move), [Flicking#event:moveEnd](Flicking#event-moveEnd), [Flicking#event:willChange](Flicking#event-willChange), [Flicking#event:changed](Flicking#event-changed), [Flicking#event:willRestore](Flicking#event-willRestore), [Flicking#event:restored](Flicking#event-restored), [Flicking#event:needPanel](Flicking#event-needPanel), [Flicking#event:visibleChange](Flicking#event-visibleChange), [Flicking#event:reachEdge](Flicking#event-reachEdge) + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|position|number|||The target position to move| +|duration|number|||Duration of the panel movement animation (unit: ms).| +|axesEvent|object|✔️||[release](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:release) event of [Axes](https://naver.github.io/egjs-axes/)| + +**Throws**: [FlickingError](FlickingError) + +|code|condition|
|---|---|
|[POSITION_NOT_REACHABLE](ERROR_CODE)|When the given panel is already removed or not in the Camera's [range](Camera#range)|
|[NOT_ATTACHED_TO_FLICKING](ERROR_CODE)|When [init](Control#init) is not called before|
|[ANIMATION_INTERRUPTED](ERROR_CODE)|When the animation is interrupted by user input|
|[STOP_CALLED_BY_USER](ERROR_CODE)|When the animation is interrupted by user input| + +### init {#init} + +
+ inherited +
+ +Initialize Control + +**Returns**: this + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|flicking|[Flicking](Flicking)|||An instance of [Flicking](Flicking)| + +### destroy {#destroy} + +
+ inherited +
+ +Destroy Control and return to initial state + +**Returns**: void + +### enable {#enable} + +
+ inherited +
+ +Enable input from the user (mouse/touch) + +**Returns**: this + +### disable {#disable} + +
+ inherited +
+ +Disable input from the user (mouse/touch) + +**Returns**: this + +### release {#release} + +
+ inherited +
+ +Releases ongoing user input (mouse/touch) + +**Returns**: this + +### updateAnimation {#updateAnimation} + +
+ inherited +
+ +Change the destination and duration of the animation currently playing + +**Returns**: this + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|panel|[Panel](Panel)|||The target panel to move| +|duration|number|✔️||Duration of the animation (unit: ms)| +|direction|[DIRECTION](DIRECTION)|✔️||Direction to move, only available in the [circular](Flicking#circular) mode| + +**Throws**: [FlickingError](FlickingError) + +[POSITION_NOT_REACHABLE](ERROR_CODE) When the given panel is already removed or not in the Camera's [range](Camera#range) + +### stopAnimation {#stopAnimation} + +
+ inherited +
+ +Stops the animation currently playing + +**Returns**: this + +### updatePosition {#updatePosition} + +
+ inherited +
+ +Update position after resizing + +**Returns**: Promise<void> + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|progressInPanel|number|||Previous camera's progress in active panel before resize| + +**Throws**: [FlickingError](FlickingError) + +[NOT_ATTACHED_TO_FLICKING](ERROR_CODE) When [init](Camera#init) is not called before + +### updateInput {#updateInput} + +
+ inherited +
+ +Update [controller](Control#controller)'s state + +**Returns**: this + +### resetActive {#resetActive} + +
+ inherited +
+ +Reset [activePanel](Control#activePanel) to `null` + +**Returns**: this + +### moveToPanel {#moveToPanel} + +
+ inherited + async +
+ +Move [Camera](Camera) to the given panel + +**Returns**: Promise<void> +- A Promise which will be resolved after reaching the target panel + +**Emits**: [Flicking#event:moveStart](Flicking#event-moveStart), [Flicking#event:move](Flicking#event-move), [Flicking#event:moveEnd](Flicking#event-moveEnd), [Flicking#event:willChange](Flicking#event-willChange), [Flicking#event:changed](Flicking#event-changed), [Flicking#event:willRestore](Flicking#event-willRestore), [Flicking#event:restored](Flicking#event-restored), [Flicking#event:needPanel](Flicking#event-needPanel), [Flicking#event:visibleChange](Flicking#event-visibleChange), [Flicking#event:reachEdge](Flicking#event-reachEdge) + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|panel|[Panel](Panel)|||The target panel to move| +|options|object|||An options object| +|duration|number|||Duration of the animation (unit: ms)| +|axesEvent|object|✔️||[release](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:release) event of [Axes](https://naver.github.io/egjs-axes/)| +|direction|[DIRECTION](DIRECTION)|✔️|DIRECTION.NONE|Direction to move, only available in the [circular](Flicking#circular) mode| + +**Throws**: [FlickingError](FlickingError) + +|code|condition|
|---|---|
|[POSITION_NOT_REACHABLE](ERROR_CODE)|When the given panel is already removed or not in the Camera's [range](Camera#range)|
|[NOT_ATTACHED_TO_FLICKING](ERROR_CODE)|When [init](Control#init) is not called before|
|[ANIMATION_INTERRUPTED](ERROR_CODE)|When the animation is interrupted by user input|
|[STOP_CALLED_BY_USER](ERROR_CODE)|When the animation is interrupted by user input| + +### setActive {#setActive} + +
+ inherited +
+ +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|newActivePanel|[Panel](Panel)|||| +|prevActivePanel|[Panel](Panel) \| null|||| +|isTrusted|boolean|||| + +### copy {#copy} + +
+ inherited +
+ +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|control|[Control](Control)|||| + diff --git a/docs/versioned_docs/version-4.12.0/api/SnapControlOptions.mdx b/docs/versioned_docs/version-4.12.0/api/SnapControlOptions.mdx new file mode 100755 index 0000000000..de2142cde6 --- /dev/null +++ b/docs/versioned_docs/version-4.12.0/api/SnapControlOptions.mdx @@ -0,0 +1,18 @@ +--- +custom_edit_url: null +--- + +```ts +interface SnapControlOptions +``` + +
+ +
+ +An options for the [SnapControl](SnapControl) + +|PROPERTY|TYPE|DESCRIPTION| +|:---:|:---:|:---:| +|count|number|Maximum number of panels can go after release| + diff --git a/docs/versioned_docs/version-4.12.0/api/State.mdx b/docs/versioned_docs/version-4.12.0/api/State.mdx new file mode 100755 index 0000000000..728805e3e9 --- /dev/null +++ b/docs/versioned_docs/version-4.12.0/api/State.mdx @@ -0,0 +1,164 @@ +--- +custom_edit_url: null +--- + +
⚠️ This class is for internal use only.
+ +```ts +class State +``` + +
+ +
+ +A component that shows the current status of the user input or the animation + +
+
Properties
Methods
+
holding
animating
delta
targetPanel
onEnter
onHold
onChange
onRelease
onAnimationEnd
onFinish
+
+ +## Properties + +### holding {#holding} + +
+ readonly +
+ +Whether user is clicking or touching + +**Type**: boolean + +### animating {#animating} + +
+ readonly +
+ +Whether Flicking's animating + +**Type**: boolean + +### delta {#delta} + +
+ readonly +
+ +A sum of delta values of change events from the last hold event of Axes + +**Type**: number + +### targetPanel {#targetPanel} + +
+ readonly +
+ +A panel to set as [Control#activePanel](Control#activePanel) after the animation is finished + +**Type**: number + +## Methods + +### onEnter {#onEnter} + +
+ +
+ +An callback which is called when state has changed to this state + +**Returns**: void + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|prevState|[State](State)|||An previous state| + +### onHold {#onHold} + +
+ +
+ +An event handler for Axes's [hold](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:hold) event + +**Returns**: void + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|ctx|object|✔️||Event context| +|ctx.flicking|[Flicking](Flicking)|✔️||An instance of Flicking| +|ctx.axesEvent|object|✔️||A [hold](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:hold) event of Axes| +|ctx.transitTo|function|✔️||A function for changing current state to other state| + +### onChange {#onChange} + +
+ +
+ +An event handler for Axes's [change](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:change) event + +**Returns**: void + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|ctx|object|✔️||Event context| +|ctx.flicking|[Flicking](Flicking)|✔️||An instance of Flicking| +|ctx.axesEvent|object|✔️||A [change](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:change) event of Axes| +|ctx.transitTo|function|✔️||A function for changing current state to other state| + +### onRelease {#onRelease} + +
+ +
+ +An event handler for Axes's [release](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:release) event + +**Returns**: void + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|ctx|object|✔️||Event context| +|ctx.flicking|[Flicking](Flicking)|✔️||An instance of Flicking| +|ctx.axesEvent|object|✔️||A [release](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:release) event of Axes| +|ctx.transitTo|function|✔️||A function for changing current state to other state| + +### onAnimationEnd {#onAnimationEnd} + +
+ +
+ +An event handler for Axes's [animationEnd](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:animationEnd) event + +**Returns**: void + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|ctx|object|✔️||Event context| +|ctx.flicking|[Flicking](Flicking)|✔️||An instance of Flicking| +|ctx.axesEvent|object|✔️||A [animationEnd](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:animationEnd) event of Axes| +|ctx.transitTo|function|✔️||A function for changing current state to other state| + +### onFinish {#onFinish} + +
+ +
+ +An event handler for Axes's [finish](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:finish) event + +**Returns**: void + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|ctx|object|✔️||Event context| +|ctx.flicking|[Flicking](Flicking)|✔️||An instance of Flicking| +|ctx.axesEvent|object|✔️||A [finish](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:finish) event of Axes| +|ctx.transitTo|function|✔️||A function for changing current state to other state| + diff --git a/docs/versioned_docs/version-4.12.0/api/Status.mdx b/docs/versioned_docs/version-4.12.0/api/Status.mdx new file mode 100755 index 0000000000..2973cb73b6 --- /dev/null +++ b/docs/versioned_docs/version-4.12.0/api/Status.mdx @@ -0,0 +1,25 @@ +--- +custom_edit_url: null +--- + +```ts +interface Status +``` + +
+ +
+ +Flicking Status returned by [Flicking#getStatus](Flicking#getStatus) + +|PROPERTY|TYPE|DESCRIPTION| +|:---:|:---:|:---:| +|index|number|An index of the active panel| +|position|object|A info to restore camera [position](Camera#position)| +|position.panel|number|An index of the panel camera is located at| +|position.progressInPanel|number|A progress of the camera position inside the panel| +|visibleOffset|number|An offset to visible panel's original index. This value is available only when `visiblePanelsOnly` is `true`| +|panels|Array<object>|A data array of panels| +|panels.index|index|An index of the panel| +|panels.html|string \| undefined|An `outerHTML` of the panel element| + diff --git a/docs/versioned_docs/version-4.12.0/api/StrictControl.mdx b/docs/versioned_docs/version-4.12.0/api/StrictControl.mdx new file mode 100755 index 0000000000..d74a6409ef --- /dev/null +++ b/docs/versioned_docs/version-4.12.0/api/StrictControl.mdx @@ -0,0 +1,298 @@ +--- +custom_edit_url: null +--- + +```ts +class StrictControl extends Control +``` + +
+ +
+ +A [Control](Control) that allow you to select the maximum number of panels to move at a time + +
+
Properties
Methods
+
count
controller
activeIndex
activePanel
animating
holding
destroy
updateInput
moveToPosition
init
enable
disable
release
updateAnimation
stopAnimation
updatePosition
resetActive
moveToPanel
setActive
copy
+
+ +## constructor +```ts +new StrictControl() +``` + +
+ +
+ +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +||Partial<[StrictControlOptions](StrictControlOptions)>|✔️|{}|| + +## Properties + +### count {#count} + +
+ +
+ +Maximum number of panels that can be moved at a time + +**Type**: number + +**Default**: 1 + +### controller {#controller} + +
+ readonly + inherited +
+ +A controller that handles the [@egjs/axes](https://naver.github.io/egjs-axes/) events + +**Type**: [AxesController](AxesController) + +### activeIndex {#activeIndex} + +
+ readonly + inherited +
+ +Index number of the [currentPanel](Flicking#currentPanel) + +**Type**: number + +**Default**: 0 + +### activePanel {#activePanel} + +
+ readonly + inherited +
+ +An active panel + +**Type**: [Panel](Panel) \| null + +### animating {#animating} + +
+ readonly + inherited +
+ +Whether Flicking's animating + +**Type**: boolean + +### holding {#holding} + +
+ readonly + inherited +
+ +Whether user is clicking or touching + +**Type**: boolean + +## Methods + +### destroy {#destroy} + +
+ +
+ +Destroy Control and return to initial state + +**Returns**: void + +### updateInput {#updateInput} + +
+ +
+ +Update [controller](Control#controller)'s state + +**Returns**: this + +### moveToPosition {#moveToPosition} + +
+ +
+ +Move [Camera](Camera) to the given position + +**Returns**: Promise<void> +- A Promise which will be resolved after reaching the target position + +**Emits**: [Flicking#event:moveStart](Flicking#event-moveStart), [Flicking#event:move](Flicking#event-move), [Flicking#event:moveEnd](Flicking#event-moveEnd), [Flicking#event:willChange](Flicking#event-willChange), [Flicking#event:changed](Flicking#event-changed), [Flicking#event:willRestore](Flicking#event-willRestore), [Flicking#event:restored](Flicking#event-restored), [Flicking#event:needPanel](Flicking#event-needPanel), [Flicking#event:visibleChange](Flicking#event-visibleChange), [Flicking#event:reachEdge](Flicking#event-reachEdge) + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|position|number|||The target position to move| +|duration|number|||Duration of the panel movement animation (unit: ms).| +|axesEvent|object|✔️||[release](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:release) event of [Axes](https://naver.github.io/egjs-axes/)| + +**Throws**: [FlickingError](FlickingError) + +|code|condition|
|---|---|
|[POSITION_NOT_REACHABLE](ERROR_CODE)|When the given panel is already removed or not in the Camera's [range](Camera#range)|
|[NOT_ATTACHED_TO_FLICKING](ERROR_CODE)|When [init](Control#init) is not called before|
|[ANIMATION_INTERRUPTED](ERROR_CODE)|When the animation is interrupted by user input|
|[STOP_CALLED_BY_USER](ERROR_CODE)|When the animation is interrupted by user input| + +### init {#init} + +
+ inherited +
+ +Initialize Control + +**Returns**: this + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|flicking|[Flicking](Flicking)|||An instance of [Flicking](Flicking)| + +### enable {#enable} + +
+ inherited +
+ +Enable input from the user (mouse/touch) + +**Returns**: this + +### disable {#disable} + +
+ inherited +
+ +Disable input from the user (mouse/touch) + +**Returns**: this + +### release {#release} + +
+ inherited +
+ +Releases ongoing user input (mouse/touch) + +**Returns**: this + +### updateAnimation {#updateAnimation} + +
+ inherited +
+ +Change the destination and duration of the animation currently playing + +**Returns**: this + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|panel|[Panel](Panel)|||The target panel to move| +|duration|number|✔️||Duration of the animation (unit: ms)| +|direction|[DIRECTION](DIRECTION)|✔️||Direction to move, only available in the [circular](Flicking#circular) mode| + +**Throws**: [FlickingError](FlickingError) + +[POSITION_NOT_REACHABLE](ERROR_CODE) When the given panel is already removed or not in the Camera's [range](Camera#range) + +### stopAnimation {#stopAnimation} + +
+ inherited +
+ +Stops the animation currently playing + +**Returns**: this + +### updatePosition {#updatePosition} + +
+ inherited +
+ +Update position after resizing + +**Returns**: Promise<void> + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|progressInPanel|number|||Previous camera's progress in active panel before resize| + +**Throws**: [FlickingError](FlickingError) + +[NOT_ATTACHED_TO_FLICKING](ERROR_CODE) When [init](Camera#init) is not called before + +### resetActive {#resetActive} + +
+ inherited +
+ +Reset [activePanel](Control#activePanel) to `null` + +**Returns**: this + +### moveToPanel {#moveToPanel} + +
+ inherited + async +
+ +Move [Camera](Camera) to the given panel + +**Returns**: Promise<void> +- A Promise which will be resolved after reaching the target panel + +**Emits**: [Flicking#event:moveStart](Flicking#event-moveStart), [Flicking#event:move](Flicking#event-move), [Flicking#event:moveEnd](Flicking#event-moveEnd), [Flicking#event:willChange](Flicking#event-willChange), [Flicking#event:changed](Flicking#event-changed), [Flicking#event:willRestore](Flicking#event-willRestore), [Flicking#event:restored](Flicking#event-restored), [Flicking#event:needPanel](Flicking#event-needPanel), [Flicking#event:visibleChange](Flicking#event-visibleChange), [Flicking#event:reachEdge](Flicking#event-reachEdge) + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|panel|[Panel](Panel)|||The target panel to move| +|options|object|||An options object| +|duration|number|||Duration of the animation (unit: ms)| +|axesEvent|object|✔️||[release](https://naver.github.io/egjs-axes/release/latest/doc/eg.Axes.html#event:release) event of [Axes](https://naver.github.io/egjs-axes/)| +|direction|[DIRECTION](DIRECTION)|✔️|DIRECTION.NONE|Direction to move, only available in the [circular](Flicking#circular) mode| + +**Throws**: [FlickingError](FlickingError) + +|code|condition|
|---|---|
|[POSITION_NOT_REACHABLE](ERROR_CODE)|When the given panel is already removed or not in the Camera's [range](Camera#range)|
|[NOT_ATTACHED_TO_FLICKING](ERROR_CODE)|When [init](Control#init) is not called before|
|[ANIMATION_INTERRUPTED](ERROR_CODE)|When the animation is interrupted by user input|
|[STOP_CALLED_BY_USER](ERROR_CODE)|When the animation is interrupted by user input| + +### setActive {#setActive} + +
+ inherited +
+ +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|newActivePanel|[Panel](Panel)|||| +|prevActivePanel|[Panel](Panel) \| null|||| +|isTrusted|boolean|||| + +### copy {#copy} + +
+ inherited +
+ +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|control|[Control](Control)|||| + diff --git a/docs/versioned_docs/version-4.12.0/api/StrictControlOptions.mdx b/docs/versioned_docs/version-4.12.0/api/StrictControlOptions.mdx new file mode 100755 index 0000000000..97fa4ccf9a --- /dev/null +++ b/docs/versioned_docs/version-4.12.0/api/StrictControlOptions.mdx @@ -0,0 +1,18 @@ +--- +custom_edit_url: null +--- + +```ts +interface StrictControlOptions +``` + +
+ +
+ +An options for the [StrictControl](StrictControl) + +|PROPERTY|TYPE|DESCRIPTION| +|:---:|:---:|:---:| +|count|number|Maximum number of panels that can be moved at a time| + diff --git a/docs/versioned_docs/version-4.12.0/api/VanillaRenderer.mdx b/docs/versioned_docs/version-4.12.0/api/VanillaRenderer.mdx new file mode 100755 index 0000000000..0f06a6ebae --- /dev/null +++ b/docs/versioned_docs/version-4.12.0/api/VanillaRenderer.mdx @@ -0,0 +1,216 @@ +--- +custom_edit_url: null +--- + +```ts +class VanillaRenderer extends Renderer +``` + +
+ +
+ +
+
Properties
Methods
+
panels
rendering
panelCount
strategy
align
render
init
destroy
getPanel
updatePanelSize
batchInsert
batchInsertDefer
batchRemove
batchRemoveDefer
updateAfterPanelChange
checkPanelContentsReady
+
+ +## Properties + +### panels {#panels} + +
+ readonly + inherited +
+ +Array of panels + +**Type**: Array<[Panel](Panel)> + +**See**: +- [Panel](Panel) + +### rendering {#rendering} + +
+ readonly + inherited +
+ +A boolean value indicating whether rendering is in progress + +**Type**: boolean + +### panelCount {#panelCount} + +
+ readonly + inherited +
+ +Count of panels + +**Type**: number + +### strategy {#strategy} + +
+ inherited +
+ +### align {#align} + +
+ inherited +
+ +A [Panel](Panel)'s [align](Panel#align) value that applied to all panels + +**Type**: Constants.ALIGN \| string \| number + +## Methods + +### render {#render} + +
+ inherited +
+ +Render panel elements inside the camera element + +**Returns**: this + +### init {#init} + +
+ inherited +
+ +Initialize Renderer + +**Returns**: this + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|flicking|[Flicking](Flicking)|||An instance of [Flicking](Flicking)| + +### destroy {#destroy} + +
+ inherited +
+ +Destroy Renderer and return to initial state + +**Returns**: void + +### getPanel {#getPanel} + +
+ inherited +
+ +Return the [Panel](Panel) at the given index. `null` if it doesn't exists. + +**Returns**: [Panel](Panel) \| null +- Panel at the given index + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|index|number|||| + +**See**: +- [Panel](Panel) + +### updatePanelSize {#updatePanelSize} + +
+ inherited +
+ +Update all panel sizes + +**Returns**: this + +### batchInsert {#batchInsert} + +
+ inherited +
+ +Insert new panels at given index
This will increase index of panels after by the number of panels added + +**Returns**: Array<[Panel](Panel)> +- An array of prepended panels + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|items|Array<object>|||An array of items to insert| +|items.index|number|✔️||Index to insert new panels at| +|items.elements|Array<any>|✔️||An array of element or framework component with element in it| +|items.hasDOMInElements|boolean|✔️||Whether it contains actual DOM elements. If set to true, renderer will add them to the camera element| + +### batchInsertDefer {#batchInsertDefer} + +
+ inherited +
+ +Defers update
camera position & others will be updated after calling updateAfterPanelChange + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|...items|Array<{index: number, elements: any[], hasDOMInElements: boolean}>|||| + +### batchRemove {#batchRemove} + +
+ inherited +
+ +Remove the panel at the given index
This will decrease index of panels after by the number of panels removed + +**Returns**: [Panel](Panel)[] +- An array of removed panels + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|items|Array<object>|||An array of items to remove| +|items.index|number|✔️||Index of panel to remove| +|items.deleteCount|number|✔️|1|Number of panels to remove from index| +|items.hasDOMInElements|boolean|✔️|1|Whether it contains actual DOM elements. If set to true, renderer will remove them from the camera element| + +### batchRemoveDefer {#batchRemoveDefer} + +
+ inherited +
+ +Defers update
camera position & others will be updated after calling updateAfterPanelChange + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|...items|Array<{index: number, deleteCount: number, hasDOMInElements: boolean}>|||| + +### updateAfterPanelChange {#updateAfterPanelChange} + +
+ inherited +
+ +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|panelsAdded|[Panel](Panel)[]|||| +|panelsRemoved|[Panel](Panel)[]|||| + +### checkPanelContentsReady {#checkPanelContentsReady} + +
+ inherited +
+ +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|checkingPanels|[Panel](Panel)[]|||| + diff --git a/docs/versioned_docs/version-4.12.0/api/Viewport.mdx b/docs/versioned_docs/version-4.12.0/api/Viewport.mdx new file mode 100755 index 0000000000..8f3e1b5aa2 --- /dev/null +++ b/docs/versioned_docs/version-4.12.0/api/Viewport.mdx @@ -0,0 +1,106 @@ +--- +custom_edit_url: null +--- + +```ts +class Viewport +``` + +
+ +
+ +A component that manages viewport size + +
+
Properties
Methods
+
element
width
height
padding
setSize
resize
+
+ +## constructor +```ts +new Viewport(el, el) +``` + +
+ +
+ +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|el|[Flicking](Flicking)|||A viewport element| +|el|HTMLElement|||| + +## Properties + +### element {#element} + +
+ readonly +
+ +A viewport(root) element + +**Type**: HTMLElement + +### width {#width} + +
+ readonly +
+ +Viewport width, without paddings + +**Type**: number + +### height {#height} + +
+ readonly +
+ +Viewport height, without paddings + +**Type**: number + +### padding {#padding} + +
+ readonly +
+ +Viewport paddings + +**Type**: object + +|PROPERTY|TYPE|DESCRIPTION| +|:---:|:---:|:---:| +|left|number|CSS `padding-left`| +|right|number|CSS `padding-right`| +|top|number|CSS `padding-top`| +|bottom|number|CSS `padding-bottom`| + +## Methods + +### setSize {#setSize} + +
+ +
+ +Change viewport's size.
This will change the actual size of `.flicking-viewport` element by changing its CSS width/height property + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|size|object|✔️||New viewport size| +|size.width|number \| string|✔️||CSS string or number(in px)| +|size.height|number \| string|✔️||CSS string or number(in px)| + +### resize {#resize} + +
+ +
+ +Update width/height to the current viewport element's size + diff --git a/docs/versioned_docs/version-4.12.0/api/VirtualPanel.mdx b/docs/versioned_docs/version-4.12.0/api/VirtualPanel.mdx new file mode 100755 index 0000000000..36763a5f40 --- /dev/null +++ b/docs/versioned_docs/version-4.12.0/api/VirtualPanel.mdx @@ -0,0 +1,498 @@ +--- +custom_edit_url: null +--- + +```ts +class VirtualPanel extends Panel +``` + +
+ +
+ +An slide data component that holds information of a single HTMLElement + +
+
Properties
Methods
+
element
cachedInnerHTML
elementIndex
elementProvider
index
position
size
sizeIncludingMargin
height
margin
alignPosition
removed
rendered
loading
range
toggled
toggleDirection
offset
progress
outsetProgress
visibleRatio
align
markForShow
markForHide
resize
setSize
contains
destroy
includePosition
includeRange
isVisibleOnRange
focus
prev
next
increaseIndex
decreaseIndex
updatePosition
toggle
updateCircularToggleDirection
+
+ +## constructor +```ts +new VirtualPanel(options, options.index, options.align, options.flicking) +``` + +
+ +
+ +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|options|object|||An options object| +|options.index|number|✔️||An initial index of the panel| +|options.align|Constants.ALIGN \| string \| number|✔️||An initial [align](Flicking#align) value of the panel| +|options.flicking|[Flicking](Flicking)|✔️||A Flicking instance panel's referencing| + +## Properties + +### element {#element} + +
+ readonly +
+ +`HTMLElement` that panel's referencing + +**Type**: HTMLElement + +### cachedInnerHTML {#cachedInnerHTML} + +
+ readonly +
+ +Cached innerHTML by the previous render function + +**Type**: string \| null + +### elementIndex {#elementIndex} + +
+ readonly +
+ +An number for indexing which element it will be rendered on + +**Type**: number + +### elementProvider {#elementProvider} + +
+ readonly + inherited +
+ +### index {#index} + +
+ readonly + inherited +
+ +Index of the panel + +**Type**: number + +### position {#position} + +
+ readonly + inherited +
+ +Position of the panel, including [alignPosition](Panel#alignPosition) + +**Type**: number + +### size {#size} + +
+ readonly + inherited +
+ +Cached size of the panel element
This is equal to [element](Panel#element)'s `offsetWidth` if [horizontal](Flicking#horizontal) is `true`, and `offsetHeight` else + +**Type**: number + +### sizeIncludingMargin {#sizeIncludingMargin} + +
+ readonly + inherited +
+ +Panel's size including CSS `margin`
This value includes [element](Panel#element)'s margin left/right if [horizontal](Flicking#horizontal) is `true`, and margin top/bottom else + +**Type**: number + +### height {#height} + +
+ readonly + inherited +
+ +Height of the panel element + +**Type**: number + +### margin {#margin} + +
+ readonly + inherited +
+ +Cached CSS `margin` value of the panel element + +**Type**: object + +|PROPERTY|TYPE|DESCRIPTION| +|:---:|:---:|:---:| +|prev|number|CSS `margin-left` when the [horizontal](Flicking#horizontal) is `true`, and `margin-top` else| +|next|number|CSS `margin-right` when the [horizontal](Flicking#horizontal) is `true`, and `margin-bottom` else| + +### alignPosition {#alignPosition} + +
+ readonly + inherited +
+ +Align position inside the panel where [Camera](Camera)'s [alignPosition](Camera#alignPosition) inside viewport should be located at + +**Type**: number + +### removed {#removed} + +
+ readonly + inherited +
+ +A value indicating whether the panel's [remove](Flicking#remove)d + +**Type**: boolean + +### rendered {#rendered} + +
+ readonly + inherited +
+ +A value indicating whether the panel's element is being rendered on the screen + +**Type**: boolean + +### loading {#loading} + +
+ readonly + inherited +
+ +A value indicating whether the panel's image/video is not loaded and waiting for resize + +**Type**: boolean + +### range {#range} + +
+ readonly + inherited +
+ +Panel element's range of the bounding box + +**Type**: object + +|PROPERTY|TYPE|DESCRIPTION| +|:---:|:---:|:---:| +|min|number|Bounding box's left([horizontal](Flicking#horizontal): true) / top([horizontal](Flicking#horizontal): false)| +|max|number|Bounding box's right([horizontal](Flicking#horizontal): true) / bottom([horizontal](Flicking#horizontal): false)| + +### toggled {#toggled} + +
+ readonly + inherited +
+ +A value indicating whether the panel's position is toggled by circular behavior + +**Type**: boolean + +### toggleDirection {#toggleDirection} + +
+ readonly + inherited +
+ +A direction where the panel's position is toggled + +**Type**: [DIRECTION](DIRECTION) + +### offset {#offset} + +
+ readonly + inherited +
+ +Actual position offset determined by [Panel#order](Panel#order) + +**Type**: number + +### progress {#progress} + +
+ readonly + inherited +
+ +Progress of movement between previous or next panel relative to current panel + +**Type**: number + +### outsetProgress {#outsetProgress} + +
+ readonly + inherited +
+ +Progress of movement between points that panel is completely invisible outside of viewport(prev direction: -1, selected point: 0, next direction: 1) + +**Type**: number + +### visibleRatio {#visibleRatio} + +
+ readonly + inherited +
+ +Percentage of area where panel is visible in the viewport + +**Type**: number + +### align {#align} + +
+ inherited +
+ +A value indicating where the [alignPosition](Panel#alignPosition) should be located at inside the panel element + +**Type**: Constants.ALIGN \| string \| number + +## Methods + +### markForShow {#markForShow} + +
+ inherited +
+ +Mark panel element to be appended on the camera element + +### markForHide {#markForHide} + +
+ inherited +
+ +Mark panel element to be removed from the camera element + +### resize {#resize} + +
+ inherited +
+ +Update size of the panel + +**Returns**: this + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|cached|object|✔️||Predefined cached size of the panel| + +### setSize {#setSize} + +
+ inherited +
+ +Change panel's size. This will change the actual size of the panel element by changing its CSS width/height property + +**Returns**: this + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|size|object|✔️||New panel size| +|size.width|number \| string|✔️||CSS string or number(in px)| +|size.height|number \| string|✔️||CSS string or number(in px)| + +### contains {#contains} + +
+ inherited +
+ +Check whether the given element is inside of this panel's [element](Panel#element) + +**Returns**: boolean +- A Boolean value indicating the element is inside of this panel [element](Panel#element) + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|element|HTMLElement|||The HTMLElement to check| + +### destroy {#destroy} + +
+ inherited +
+ +Reset internal state and set [removed](Panel#removed) to `true` + +**Returns**: void + +### includePosition {#includePosition} + +
+ inherited +
+ +Check whether the given position is inside of this panel's [range](Panel#range) + +**Returns**: boolean +- A Boolean value indicating whether the given position is included in the panel range + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|pos|number|||A position to check| +|includeMargin|boolean|✔️|false|Include [margin](Panel#margin) to the range| + +### includeRange {#includeRange} + +
+ inherited +
+ +Check whether the given range is fully included in this panel's area (inclusive) + +**Returns**: boolean +- A Boolean value indicating whether the given range is fully included in the panel range + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|min|number|||Minimum value of the range to check| +|max|number|||Maximum value of the range to check| +|includeMargin|boolean|✔️|false|Include [margin](Panel#margin) to the range| + +### isVisibleOnRange {#isVisibleOnRange} + +
+ inherited +
+ +Check whether the panel is visble in the given range (exclusive) + +**Returns**: boolean +- A Boolean value indicating whether the panel is visible + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|min|number|||Minimum value of the range to check| +|max|number|||Maximum value of the range to check| + +### focus {#focus} + +
+ inherited +
+ +Move [Camera](Camera) to this panel + +**Returns**: Promise<void> +- A Promise which will be resolved after reaching the panel + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|duration|number|✔️||Duration of the animation (unit: ms)| + +### prev {#prev} + +
+ inherited +
+ +Get previous(`index - 1`) panel. When the previous panel does not exist, this will return `null` instead
If the [circular](Flicking#circularEnabled) is enabled, this will return the last panel if called from the first panel + +**Returns**: [Panel](Panel) \| null +- The previous panel + +### next {#next} + +
+ inherited +
+ +Get next(`index + 1`) panel. When the next panel does not exist, this will return `null` instead
If the [circular](Flicking#circularEnabled) is enabled, this will return the first panel if called from the last panel + +**Returns**: [Panel](Panel) \| null +- The previous panel + +### increaseIndex {#increaseIndex} + +
+ inherited +
+ +Increase panel's index by the given value + +**Returns**: this + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|val|number|||An integer greater than or equal to 0| + +### decreaseIndex {#decreaseIndex} + +
+ inherited +
+ +Decrease panel's index by the given value + +**Returns**: this + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|val|number|||An integer greater than or equal to 0| + +### updatePosition {#updatePosition} + +
+ inherited +
+ +**Returns**: this + +### toggle {#toggle} + +
+ inherited +
+ +**Returns**: boolean +- toggled + +|PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| +|:---:|:---:|:---:|:---:|:---:| +|prevPos|number|||| +|newPos|number|||| + +### updateCircularToggleDirection {#updateCircularToggleDirection} + +
+ inherited +
+ +**Returns**: this + diff --git a/docs/versioned_docs/version-4.12.0/tutorials/error-handling.mdx b/docs/versioned_docs/version-4.12.0/tutorials/error-handling.mdx new file mode 100644 index 0000000000..f4b693c756 --- /dev/null +++ b/docs/versioned_docs/version-4.12.0/tutorials/error-handling.mdx @@ -0,0 +1,32 @@ +--- +title: Handling errors +id: error-handling +slug: /error-handling +custom_edit_url: null +sidebar_position: 5 +--- + +import Link from "@docusaurus/Link"; +import useBaseUrl from "@docusaurus/useBaseUrl"; + +All known Flicking errors are thrown as FlickingError with a `code` property set as listed on the ERROR_CODE. + +A common use-case for this is when you're calling a prev / next / moveTo of Flicking which can throw an error when Flicking's already animating. + +```js +import { FlickingError, ERROR_CODE } from "@egjs/flicking"; + +try { + await flicking.next(); +} catch (err) { + if (err instanceof FlickingError) { + if (err.code === ERROR_CODE.ANIMATION_ALREADY_PLAYING) { + console.error("Animation is already playing!"); + } else if (err.code === ERROR_CODE.ANIMATION_INTERRUPTED) { + console.error("Animation is interrupted by user."); + } + } +} +``` + +See all possible error codes at ERROR_CODE. diff --git a/docs/versioned_docs/version-4.12.0/tutorials/installation.mdx b/docs/versioned_docs/version-4.12.0/tutorials/installation.mdx new file mode 100644 index 0000000000..10063f7c44 --- /dev/null +++ b/docs/versioned_docs/version-4.12.0/tutorials/installation.mdx @@ -0,0 +1,165 @@ +--- +title: Installation +id: installation +slug: / +custom_edit_url: null +sidebar_position: 1 +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +## Using the package managers (recommended) +You can easily install Flicking with package managers like [npm](https://www.npmjs.com/) or [yarn](https://classic.yarnpkg.com/en/) + +### npm + + + + +```shell +npm install @egjs/flicking +``` + + + + +```shell +npm install @egjs/react-flicking +``` + + + + +```shell +npm install @egjs/vue-flicking +``` + + + + +```shell +npm install @egjs/vue3-flicking +``` + + + + +```shell +npm install @egjs/ngx-flicking +``` + + + + +```shell +npm install @egjs/preact-flicking +``` + + + + +```shell +npm install @egjs/svelte-flicking +``` + + + + +### yarn + + + +```shell +yarn add @egjs/flicking +``` + + + + +```shell +yarn add @egjs/react-flicking +``` + + + + +```shell +yarn add @egjs/vue-flicking +``` + + + + +```shell +yarn add @egjs/vue3-flicking +``` + + + + +```shell +yarn add @egjs/ngx-flicking +``` + + + + +```shell +yarn add @egjs/preact-flicking +``` + + + + +```shell +yarn add @egjs/svelte-flicking +``` + + + + +## CDN Links +Unlike individual or internal cases, CDN has unpredictable problems with services, so it is better to use your own files. + +### packaged(with dependencies) +```html + + + + +``` + +### CSS files +Choose `flicking-inline.css` if you have to support IE9 + +```html + + + + + + +``` diff --git a/docs/versioned_docs/version-4.12.0/tutorials/listening-to-events.mdx b/docs/versioned_docs/version-4.12.0/tutorials/listening-to-events.mdx new file mode 100644 index 0000000000..edb921df35 --- /dev/null +++ b/docs/versioned_docs/version-4.12.0/tutorials/listening-to-events.mdx @@ -0,0 +1,150 @@ +--- +title: Listening to Events +id: listening-to-events +slug: /listening-to-events +custom_edit_url: null +sidebar_position: 4 +--- + +import Link from "@docusaurus/Link"; +import useBaseUrl from "@docusaurus/useBaseUrl"; +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + + + + +You can listen to Flicking's events with Flicking#on + +```js +// If you're using a package manager +import { EVENTS } from "@egjs/flicking"; +// Or, if you're using a CDN +const EVENTS = Flicking.EVENTS; + +flicking.on(EVENTS.MOVE, evt => { + console.log(evt); +}) +``` + + + + +All events are prefixed with `on-`, and `camelCase`d. + +```tsx +import Flicking, { MoveEvent, NeedPanelEvent } from "@egjs/react-flicking"; + + { + console.log(e); + }} + onNeedPanel={(e: NeedPanelEvent) => { + console.log(e); + }} +> + {...} + +``` + + + + +All event names are renamed to `kebab-case`, following the [Vue event naming convention](https://vuejs.org/v2/guide/components-custom-events.html#Event-Names). + +```html + + {{ ... }} + +``` + + + + +All event names are renamed to `kebab-case`, following the [Vue event naming convention](https://vuejs.org/v2/guide/components-custom-events.html#Event-Names). + +```html + + {{ ... }} + +``` + + + + +You can listen events of the `ngx-flicking` using Angular's [event binding](https://angular.io/guide/event-binding). +```html + + {{ ... }} + +``` + + + + +All events are prefixed with `on-`, and `camelCase`d. +```tsx +import Flicking, { MoveEvent, NeedPanelEvent } from "@egjs/preact-flicking"; + + { + console.log(e); + }} + onNeedPanel={(e: NeedPanelEvent) => { + console.log(e); + }} +> + {...} + +``` + + + + +You can use `on:eventName` syntax to listen Flicking events. +All event properties are available in the event's `detail` property. + +```jsx + + + { + console.log("READY!"); +}} on:move={e => { + // Event properties are placed in "detail" + console.log(e.detail); +}}> + + 0 + 1 + 2 + +``` + + + + +See all available events at Flicking#events. diff --git a/docs/versioned_docs/version-4.12.0/tutorials/migration-from-v3.mdx b/docs/versioned_docs/version-4.12.0/tutorials/migration-from-v3.mdx new file mode 100644 index 0000000000..a7e1c4dd2e --- /dev/null +++ b/docs/versioned_docs/version-4.12.0/tutorials/migration-from-v3.mdx @@ -0,0 +1,80 @@ +--- +title: Migration Guide from v3 to v4 +id: migration-from-v3 +slug: /migration-from-v3 +custom_edit_url: null +--- + +## HTML structure +- To support SSR(Server Side Rendering), Flicking no longer generates viewport & camera element. +- So you have to create a viewport & camera element in your HTML template yourself. +- Also, now you have to import CSS file we're providing and place a correct class names + - We're now using `flicking-viewport` and `flicking-camera` instead of `eg-flick-viewport` and `eg-flick-camera` +- All framework-based Flickings don't have to consider this change, as they're still generating inner elements for you. +```html {2,5-6,10-11} + + + + +
+
+
Panel 1
+
Panel 2
+
Panel 3
+
+
+ +``` +```js +const flicking = new Flicking("#my-flicking"); +``` + +## Changes when using umd modules +- We've removed `eg` namespace on umd modules. + - `eg.Flicking` is now just `Flicking` + +## Removed Options +- CSS-related options + - To support SSR, we've removed all CSS-related properties to guarantee UI when rendered in SSR frameworks. + - **gap** + - You can now set gaps between panels with CSS margins like `margin-right` or `margin-bottom`. + - **zIndex** + - You can now directly use CSS `z-index` to viewport element(`.flicking-viewport`) instead. + - **overflow** + - You can set `overflow: visible` to viewport element(`.flicking-viewport`) instead. +- **infinite** and **lastIndex** + - `needPanel` event is now always triggered without the option **infinite** +- **collectStatistics** +- **thresholdAngle** +- **isEqualSize** and **isConstantSize** +- **anchor** and **hanger** is now merged into the new option named **align**. + - `anchor: 20` and `hanger: "40%"` is same to `align: { panel: 20, camera: "40%" }` +- **infiniteThreshold** is now renamed to **needPanelThreshold** + +## Removed methods +- **replace** + - As Flicking no longer supports isolated indexes, we've removed Flicking's **replace** and added **prepend** and **insert** instead. +- Getters + - We're now usinge a getter property instead of `get-` methods + - **getIndex()** > **index** + - **getAllPanels()** > **panels** + - **getElement()** > **element** + - **getCurrentPanel()** > **currentPanel** + +## Option Changes +- **adaptive** is now only applicable when `horizontal: true` +- **moveType** is now always a `string` + +## Option's default value changes +- Default value of **duration** is now `500` (was `100`) +- Default value of **bounce** is now `20%` (was `[10, 10]`) +- Default value of **autoResize** is now `true` (was `false`) + +## Method Changes +- **addPlugins** and **removePlugins** do not longer accept arrays + +## Event Changes +- **needPanel** is now can be triggered on the index 0 + - It always has `direction: "PREV"` +- We don't longer provide the method **fill()** in **needPanel** event + - As all panels now have continuous indexes, you can use `prepend()` or `append()` instead diff --git a/docs/versioned_docs/version-4.12.0/tutorials/polyfills.mdx b/docs/versioned_docs/version-4.12.0/tutorials/polyfills.mdx new file mode 100644 index 0000000000..b2b367f577 --- /dev/null +++ b/docs/versioned_docs/version-4.12.0/tutorials/polyfills.mdx @@ -0,0 +1,42 @@ +--- +title: Polyfills +id: polyfills +slug: /polyfills +custom_edit_url: null +sidebar_position: 6 +--- + +### Before +Flicking is based on es5 and additionally needs es6 Promise to work properly. +es5 is basically supported on IE9+ ([Source](http://kangax.github.io/compat-table/es5/)) +So, only es6 Promise is needed to run Flicking on the older browsers. + +```html + +``` + +Adding the above script will make Flicking run on the older browsers. + +### After + + +Flicking is based on es5 and additionally needs es6 Promise to work properly. +es5 is basically supported on IE9+ ([Source](http://kangax.github.io/compat-table/es5/)) +So, only es6 Promise is needed to run Flicking on the older browsers. + +* How to use it via CDN (For personal or internal use) +```html + +``` +* How to use it yourself (Unlike individual or internal cases, CDN has unpredictable problems with services, so it is better to use your own files.) +``` +# Download +https://cdn.jsdelivr.net/npm/es6-promise/dist/es6-promise.auto.js +``` +* How to use it via module (The pollution of the global scope) +```js +require('es6-promise').polyfill(); +``` + + +Adding the above script will make Flicking run on the older browsers. diff --git a/docs/versioned_docs/version-4.12.0/tutorials/quick-start.mdx b/docs/versioned_docs/version-4.12.0/tutorials/quick-start.mdx new file mode 100644 index 0000000000..36aa8aa9f3 --- /dev/null +++ b/docs/versioned_docs/version-4.12.0/tutorials/quick-start.mdx @@ -0,0 +1,434 @@ +--- +title: Quick Start +id: quick-start +slug: /quick-start +custom_edit_url: null +sidebar_position: 2 +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + + + + +Add the script/CSS to the page. (Unlike individual or internal cases, CDN has unpredictable problems with services, so it is better to use your own files.) +```html + + +``` + +Or, you can rather import them if you're using a bundler like [webpack](https://webpack.js.org/) or [rollup](https://rollupjs.org/guide/en/). +```js +import Flicking from "@egjs/flicking"; +import "@egjs/flicking/dist/flicking.css"; +``` + +Then, add some basic HTML layout of Flicking to your page. + +```html + + +``` + +You should add the `vertical` class to viewport element, if you're making a vertical carousel. +```html +
+``` + +Then initialize Flicking instance with JavaScript after. + +```js +const flicking = new Flicking("#carousel", { + align: "center", + circular: true, + bound: true, + renderOnlyVisible: true +}); +``` + + + + +You can import & use Flicking as a React Component. + +```jsx title="SomeComponent.jsx" +import Flicking from "@egjs/react-flicking"; +import "@egjs/react-flicking/dist/flicking.css"; +// Or, if you have to support IE9 +import "@egjs/react-flicking/dist/flicking-inline.css"; + +export default () => ( + { + console.log(e); + }}> +
1
+
2
+
3
+ +) +``` + +

React exclusive options

+ +- viewportTag: HTML tag for `.flicking-viewport` element. (default: **"div"**) +- cameraTag: HTML tag for `.flicking-camera` element. (default: **"div"**) +- cameraClass: `className` for `.flicking-camera` element. (default: **""**) +- renderOnSameKey: Whether to always render children even they have the same keys (default: **false**) + - Flicking doesn't rerender when children have same length & keys for performance by default. + - If you have to bypass this behavior, like when you have to update panel's innerHTML without changing the list of child elements, you can either set this option to `true`, or you can call Flicking component's `forceUpdate()`. + +

Using the components as a panel

+ +If you're using the React Component as a panel, it should use a [ref forwarding](https://reactjs.org/docs/forwarding-refs.html) + +```jsx + + + + + +``` + +```jsx title="Panel.jsx" +// If you're using a functional component +export default React.forwardRef(({ index }, ref) => (
{ index + 1 }
)); + +// Or... if you're using a class-based React component +class Panel extends React.Component { + public render() { + return
{ index + 1 }
; + } +} + +export default React.forwardRef((props, ref) => ); +``` + +:::warning +You can't use a React component that renders multiple elements +```jsx + + // This won't work + + +const Panels = () => <> +
0
+
1
+
2
+; +``` +::: + +

Bypassing ref forwarding

+ +If you don't like this behavior, there's a few ways to avoid it. +The easiest way is wrapping each `Panel` component with another element tag. +```jsx + +
+
+
+ +``` + +Or, you can use the `useFindDOMNode` option of Flicking. +```jsx + + + + + +``` +:::caution +Flicking will use [findDOMNode](https://reactjs.org/docs/react-dom.html#finddomnode) instead of using refs when the `useFindDOMNode` option is enabled. +So, if you're using the [Strict Mode](https://reactjs.org/docs/strict-mode.html), Flicking can show [warning about deprecated findDOMNode usage](https://reactjs.org/docs/strict-mode.html#warning-about-deprecated-finddomnode-usage) at the developer console. +And also, be aware that the component should always return a single DOM that never changes. +> Therefore findDOMNode only worked if components always return a single DOM node that never changes. +::: + + + + +You can register Flicking either locally... + +```js title="SomeComponent.vue - + + + + 0 + 1 + 2 + +``` + + + diff --git a/docs/versioned_docs/version-4.12.0/tutorials/ssr.mdx b/docs/versioned_docs/version-4.12.0/tutorials/ssr.mdx new file mode 100644 index 0000000000..000701b836 --- /dev/null +++ b/docs/versioned_docs/version-4.12.0/tutorials/ssr.mdx @@ -0,0 +1,118 @@ +--- +title: Server Side Rendering (SSR) +id: ssr +slug: /ssr +custom_edit_url: null +sidebar_position: 7 +--- + +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import CodeBlock from "@theme/CodeBlock"; +import useBaseUrl from "@docusaurus/useBaseUrl"; + +As Flicking does not know the size of the panel element until it is rendered, it is hard to place the panels at the correct positions on Server-Side Rendering (SSR) unless you're using the `"prev"` align or using the `bound` option. + +To solve this problem, Flicking offers 2 options for the frameworks, `firstPanelSize` and `hideBeforeInit`. + +### firstPanelSize +If you know the exact size of the first panel element, like `"200px"` or `"50%"`, you can use that value to correctly place the panel elements before Flicking's mounted. + + + +But if the panel's size is responsive for the screen size or you're using a `circular` option, this won't work well as Flicking doesn't know about other panel sizes. +In that case, please use `hideBeforeInit` instead. + + + +### hideBeforeInit +Enabling this option will hide panel elements until it's mounted. +This will show empty screen before it's mounted, so use this option only when you're okay with that. + + + +### How to use + + + In native JS, you can attach class `flicking-hidden` to the viewport element and remove that on `ready` event to mimic the behavior of `hideBeforeInit`. + +{`
+
+ ... +
+
`} + + +{`import Flicking, { EVENTS } from "@egjs/flicking";\n +const flicking = new Flicking("#flicking"); +flicking.once(EVENTS.READY, () => { + flicking.element.classList.remove("flicking-hidden"); +}`} + + + + +```jsx + + {...} + +``` + + + + +```html + + {{ ... }} + +``` + + + + +```html + + {{ ... }} + +``` + + + + +```html + + {{ ... }} + +``` + + + + +```jsx + + {...} + +``` + + + + +```jsx + + {...} + +``` + + + diff --git a/docs/versioned_docs/version-4.12.0/tutorials/using-the-methods.mdx b/docs/versioned_docs/version-4.12.0/tutorials/using-the-methods.mdx new file mode 100644 index 0000000000..b99141b62a --- /dev/null +++ b/docs/versioned_docs/version-4.12.0/tutorials/using-the-methods.mdx @@ -0,0 +1,158 @@ +--- +title: Using the Methods +id: using-the-methods +slug: /using-the-methods +custom_edit_url: null +sidebar_position: 3 +--- + +import Link from "@docusaurus/Link"; +import useBaseUrl from "@docusaurus/useBaseUrl"; +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + + + + +You can call methods directly from the Flicking instance. + +```js +const flicking = new Flicking("#el", options); + +flicking.next(); +``` + + + + +You can call methods of Flicking by getting a `ref` of Flicking + +```jsx +import { createRef, Component } from "react"; +import Flicking, { FlickingError } from "@egjs/react-flicking"; + +class MyComponent extends Component { + constructor(props) { + super(props); + this.flicking = createRef(); + this.panels = [0, 1, 2]; + } + render() { + return + { this.panels.map(idx =>
{idx}
) } + ; + } + async moveToNextPanel() { + try { + await this.flicking.next(); + } catch (e) { + console.log(e instanceof FlickingError); // true + console.log(e.code); + } + } +} +``` + +See [React Refs and the DOM](https://reactjs.org/docs/refs-and-the-dom.html) for more info. + + + + +You can access instance of Flicking component with the [ref](https://vuejs.org/v2/guide/components-edge-cases.html#Accessing-Child-Component-Instances-amp-Child-Elements) property. + +```js + +``` + +Then call methods of it like +```js +this.$refs.flicking.next(); +``` + + + + +You can access instance of Flicking component with the [ref](https://vuejs.org/v2/guide/components-edge-cases.html#Accessing-Child-Component-Instances-amp-Child-Elements) property. + +```js + +``` + +Then call methods of it like +```js +this.$refs.flicking.next(); +``` + + + + +There're few ways to interact with child component in Angular. +See [Component Interaction](https://angular.io/guide/component-interaction#parent-interacts-with-child-via-local-variable) page from Angular official document, and use that to interact with Flicking. + +```js +@Component({ + selector: 'flicking-parent', + template: ` + + + + ` +}) +export class FlickingParent { } +``` + + + + +You can call methods of Flicking by getting a `ref` of Flicking + +```jsx +import { createRef, render } from "preact"; +import Flicking, { FlickingError } from "@egjs/preact-flicking"; + +const ref = createRef(); +render({...}, dom); + +const flicking = ref.current; +flicking.next(); +``` + +See [React Refs and the DOM](https://reactjs.org/docs/refs-and-the-dom.html) for more info. + + + + +You can use [bind:this](https://svelte.dev/tutorial/bind-this) syntax of svelte to get the reference of Flicking. + +```jsx + + + + + 0 + 1 + 2 + +