@egjs/flicking 3.9.2-beta.0 → 3.9.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (74) hide show
  1. package/declaration/Flicking.d.ts +2 -1
  2. package/declaration/types.d.ts +4 -0
  3. package/dist/flicking.esm.js +18 -6
  4. package/dist/flicking.esm.js.map +1 -1
  5. package/dist/flicking.js +18 -6
  6. package/dist/flicking.js.map +1 -1
  7. package/dist/flicking.min.js +2 -2
  8. package/dist/flicking.min.js.map +1 -1
  9. package/dist/flicking.pkgd.js +18 -6
  10. package/dist/flicking.pkgd.js.map +1 -1
  11. package/dist/flicking.pkgd.min.js +2 -2
  12. package/dist/flicking.pkgd.min.js.map +1 -1
  13. package/package.json +1 -1
  14. package/src/Flicking.ts +10 -3
  15. package/src/components/Viewport.ts +3 -1
  16. package/src/consts.ts +1 -0
  17. package/src/types.ts +13 -0
  18. package/doc/eg.Flicking.html +0 -12669
  19. package/doc/fonts/glyphicons-halflings-regular.eot +0 -0
  20. package/doc/fonts/glyphicons-halflings-regular.svg +0 -229
  21. package/doc/fonts/glyphicons-halflings-regular.ttf +0 -0
  22. package/doc/fonts/glyphicons-halflings-regular.woff +0 -0
  23. package/doc/global.html +0 -415
  24. package/doc/img/i.png +0 -0
  25. package/doc/img/type_white.svg +0 -26
  26. package/doc/index.html +0 -501
  27. package/doc/node_modules_@egjs_component_src_Component.ts.html +0 -625
  28. package/doc/scripts/bootstrap.min.js +0 -7
  29. package/doc/scripts/jquery.min.js +0 -6
  30. package/doc/scripts/jquery.min.map +0 -1
  31. package/doc/scripts/linenumber.js +0 -29
  32. package/doc/scripts/main.js +0 -101
  33. package/doc/scripts/prettify/Apache-License-2.0.txt +0 -202
  34. package/doc/scripts/prettify/lang-css.js +0 -2
  35. package/doc/scripts/prettify/prettify.js +0 -28
  36. package/doc/scripts/underscore-min.js +0 -6
  37. package/doc/scripts/underscore-min.map +0 -1
  38. package/doc/src_Flicking.ts.html +0 -1259
  39. package/doc/src_types.ts.html +0 -816
  40. package/doc/styles/bootstrap.min.css +0 -7
  41. package/doc/styles/jaguar.css +0 -469
  42. package/doc/styles/prettify-jsdoc.css +0 -111
  43. package/doc/styles/prettify-tomorrow.css +0 -136
  44. package/doc/styles/style.css +0 -13
  45. package/docs/build/release/3.8.4/dist/flicking.esm.js +0 -5055
  46. package/docs/build/release/3.8.4/dist/flicking.esm.js.map +0 -1
  47. package/docs/build/release/3.8.4/dist/flicking.js +0 -5062
  48. package/docs/build/release/3.8.4/dist/flicking.js.map +0 -1
  49. package/docs/build/release/3.8.4/dist/flicking.min.js +0 -10
  50. package/docs/build/release/3.8.4/dist/flicking.min.js.map +0 -1
  51. package/docs/build/release/3.8.4/dist/flicking.pkgd.js +0 -11391
  52. package/docs/build/release/3.8.4/dist/flicking.pkgd.js.map +0 -1
  53. package/docs/build/release/3.8.4/dist/flicking.pkgd.min.js +0 -10
  54. package/docs/build/release/3.8.4/dist/flicking.pkgd.min.js.map +0 -1
  55. package/docs/build/release/3.9.0/dist/flicking.esm.js +0 -5124
  56. package/docs/build/release/3.9.0/dist/flicking.esm.js.map +0 -1
  57. package/docs/build/release/3.9.0/dist/flicking.js +0 -5131
  58. package/docs/build/release/3.9.0/dist/flicking.js.map +0 -1
  59. package/docs/build/release/3.9.0/dist/flicking.min.js +0 -10
  60. package/docs/build/release/3.9.0/dist/flicking.min.js.map +0 -1
  61. package/docs/build/release/3.9.0/dist/flicking.pkgd.js +0 -11460
  62. package/docs/build/release/3.9.0/dist/flicking.pkgd.js.map +0 -1
  63. package/docs/build/release/3.9.0/dist/flicking.pkgd.min.js +0 -10
  64. package/docs/build/release/3.9.0/dist/flicking.pkgd.min.js.map +0 -1
  65. package/docs/build/release/3.9.1/dist/flicking.esm.js +0 -5124
  66. package/docs/build/release/3.9.1/dist/flicking.esm.js.map +0 -1
  67. package/docs/build/release/3.9.1/dist/flicking.js +0 -5131
  68. package/docs/build/release/3.9.1/dist/flicking.js.map +0 -1
  69. package/docs/build/release/3.9.1/dist/flicking.min.js +0 -10
  70. package/docs/build/release/3.9.1/dist/flicking.min.js.map +0 -1
  71. package/docs/build/release/3.9.1/dist/flicking.pkgd.js +0 -11460
  72. package/docs/build/release/3.9.1/dist/flicking.pkgd.js.map +0 -1
  73. package/docs/build/release/3.9.1/dist/flicking.pkgd.min.js +0 -10
  74. package/docs/build/release/3.9.1/dist/flicking.pkgd.min.js.map +0 -1
@@ -1,816 +0,0 @@
1
- <!DOCTYPE html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8">
5
- <title>Source: src/types.ts | egjs::Flicking - API</title>
6
-
7
- <meta name="description" content="A module used to implement flicking interactions. With this module, you can make flicking gestures, which are ways to navigate left and right to move between panels arranged side by side." />
8
-
9
- <meta name="keywords" content="UI Component, egjs, flicking, carousel" />
10
- <meta name="keyword" content="UI Component, egjs, flicking, carousel" />
11
-
12
-
13
-
14
- <meta property="og:title" content=""/>
15
- <meta property="og:type" content="website"/>
16
- <meta property="og:image" content=""/>
17
-
18
- <meta property="og:url" content=""/>
19
-
20
- <script src="scripts/prettify/prettify.js"></script>
21
- <script src="scripts/prettify/lang-css.js"></script>
22
- <script src="scripts/jquery.min.js"></script>
23
- <!--[if lt IE 9]>
24
- <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
25
- <![endif]-->
26
-
27
- <link rel="canonical" href="https://naver.github.io/egjs-flicking/release/latest/doc/"/>
28
-
29
- <link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
30
- <link type="text/css" rel="stylesheet" href="styles/bootstrap.min.css">
31
- <link type="text/css" rel="stylesheet" href="styles/jaguar.css">
32
-
33
-
34
- <script>
35
- var config = {"monospaceLinks":true,"cleverLinks":true,"default":{"outputSourceFiles":true},"applicationName":"eg.Flicking","disqus":"egjs","googleAnalytics":"UA-70842526-17","openGraph":{"title":"","type":"website","image":"","site_name":"","url":""},"meta":{"title":"egjs::Flicking - API","description":"A module used to implement flicking interactions. With this module, you can make flicking gestures, which are ways to navigate left and right to move between panels arranged side by side.","keyword":"UI Component, egjs, flicking, carousel"},"linenums":true,"link":{"canonical":"https://naver.github.io/egjs-flicking/release/latest/doc/"}};
36
- </script>
37
-
38
-
39
-
40
- <script type="text/javascript">
41
- var _gaq = _gaq || [];
42
- _gaq.push(['_setAccount', config.googleAnalytics]);
43
- _gaq.push(['_trackPageview']);
44
-
45
- (function() {
46
- var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
47
- ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
48
- var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
49
- })();
50
- </script>
51
-
52
- </head>
53
- <body>
54
- <div id="wrap" class="clearfix">
55
-
56
- <div class="navigation">
57
- <h3 class="applicationName">
58
- <a href="//naver.github.io/egjs/"><img style="width:40px; height:20px;" src="img/type_white.svg"/></a>
59
-
60
- <!-- Homepage link (prefer link.home than applicationName) -->
61
-
62
- <a href="//naver.github.io/egjs-flicking/">Flicking</a>
63
-
64
- </h3>
65
-
66
- <div class="search">
67
- <input id="search" type="text" class="form-control input-sm" placeholder="Search Documentations">
68
- </div>
69
- <ul class="list">
70
- <li class="item">
71
- <span class="title">
72
- <a href="index.html">README</a>
73
- </span>
74
- </li>
75
-
76
- <!-- Non Grouping Version -->
77
-
78
-
79
-
80
- <li class="item" data-name="eg.Flicking">
81
- <span class="title">
82
- <a href="eg.Flicking.html">eg.Flicking</a>
83
-
84
- </span>
85
- <ul class="members itemMembers expends">
86
-
87
- <span class="subtitle">Members</span>
88
-
89
- <li data-name="eg.Flicking.DIRECTION"><a href="eg.Flicking.html#.DIRECTION">DIRECTION</a></li>
90
-
91
- <li data-name="eg.Flicking.EVENTS"><a href="eg.Flicking.html#.EVENTS">EVENTS</a></li>
92
-
93
- <li data-name="eg.Flicking.VERSION"><a href="eg.Flicking.html#.VERSION">VERSION</a></li>
94
-
95
- </ul>
96
- <ul class="typedefs itemMembers expends">
97
-
98
- <span class="subtitle">Typedefs</span>
99
-
100
- <li data-name="eg.Flicking.ChangeEvent"><a href="eg.Flicking.html#.ChangeEvent">ChangeEvent</a></li>
101
-
102
- <li data-name="eg.Flicking.ContentErrorEvent"><a href="eg.Flicking.html#.ContentErrorEvent">ContentErrorEvent</a></li>
103
-
104
- <li data-name="eg.Flicking.ElementLike"><a href="eg.Flicking.html#.ElementLike">ElementLike</a></li>
105
-
106
- <li data-name="eg.Flicking.FlickingEvent"><a href="eg.Flicking.html#.FlickingEvent">FlickingEvent</a></li>
107
-
108
- <li data-name="eg.Flicking.FlickingOptions"><a href="eg.Flicking.html#.FlickingOptions">FlickingOptions</a></li>
109
-
110
- <li data-name="eg.Flicking.FlickingPanel"><a href="eg.Flicking.html#.FlickingPanel">FlickingPanel</a></li>
111
-
112
- <li data-name="eg.Flicking.FlickingStatus"><a href="eg.Flicking.html#.FlickingStatus">FlickingStatus</a></li>
113
-
114
- <li data-name="eg.Flicking.MoveTypeFreeScrollOption"><a href="eg.Flicking.html#.MoveTypeFreeScrollOption">MoveTypeFreeScrollOption</a></li>
115
-
116
- <li data-name="eg.Flicking.MoveTypeOption"><a href="eg.Flicking.html#.MoveTypeOption">MoveTypeOption</a></li>
117
-
118
- <li data-name="eg.Flicking.MoveTypeSnapOption"><a href="eg.Flicking.html#.MoveTypeSnapOption">MoveTypeSnapOption</a></li>
119
-
120
- <li data-name="eg.Flicking.NeedPanelEvent"><a href="eg.Flicking.html#.NeedPanelEvent">NeedPanelEvent</a></li>
121
-
122
- <li data-name="eg.Flicking.Plugin"><a href="eg.Flicking.html#.Plugin">Plugin</a></li>
123
-
124
- <li data-name="eg.Flicking.SelectEvent"><a href="eg.Flicking.html#.SelectEvent">SelectEvent</a></li>
125
-
126
- <li data-name="eg.Flicking.VisibleChangeEvent"><a href="eg.Flicking.html#.VisibleChangeEvent">VisibleChangeEvent</a></li>
127
-
128
- </ul>
129
- <ul class="methods itemMembers expends">
130
-
131
- <span class="subtitle">Methods</span>
132
-
133
- <li data-name="eg.Flicking#addPlugins"><a href="eg.Flicking.html#addPlugins">addPlugins</a></li>
134
-
135
- <li data-name="eg.Flicking#append"><a href="eg.Flicking.html#append">append</a></li>
136
-
137
- <li data-name="eg.Flicking#destroy"><a href="eg.Flicking.html#destroy">destroy</a></li>
138
-
139
- <li data-name="eg.Flicking#disableInput"><a href="eg.Flicking.html#disableInput">disableInput</a></li>
140
-
141
- <li data-name="eg.Flicking#enableInput"><a href="eg.Flicking.html#enableInput">enableInput</a></li>
142
-
143
- <li data-name="eg.Flicking#getAllPanels"><a href="eg.Flicking.html#getAllPanels">getAllPanels</a></li>
144
-
145
- <li data-name="eg.Flicking#getCloneCount"><a href="eg.Flicking.html#getCloneCount">getCloneCount</a></li>
146
-
147
- <li data-name="eg.Flicking#getCurrentPanel"><a href="eg.Flicking.html#getCurrentPanel">getCurrentPanel</a></li>
148
-
149
- <li data-name="eg.Flicking#getElement"><a href="eg.Flicking.html#getElement">getElement</a></li>
150
-
151
- <li data-name="eg.Flicking#getIndex"><a href="eg.Flicking.html#getIndex">getIndex</a></li>
152
-
153
- <li data-name="eg.Flicking#getLastIndex"><a href="eg.Flicking.html#getLastIndex">getLastIndex</a></li>
154
-
155
- <li data-name="eg.Flicking#getPanel"><a href="eg.Flicking.html#getPanel">getPanel</a></li>
156
-
157
- <li data-name="eg.Flicking#getPanelCount"><a href="eg.Flicking.html#getPanelCount">getPanelCount</a></li>
158
-
159
- <li data-name="eg.Flicking#getSize"><a href="eg.Flicking.html#getSize">getSize</a></li>
160
-
161
- <li data-name="eg.Flicking#getStatus"><a href="eg.Flicking.html#getStatus">getStatus</a></li>
162
-
163
- <li data-name="eg.Flicking#getVisiblePanels"><a href="eg.Flicking.html#getVisiblePanels">getVisiblePanels</a></li>
164
-
165
- <li data-name="eg.Flicking#hasOn"><a href="eg.Flicking.html#hasOn">hasOn</a> <img src="img/i.png" width="14" title="inherited" alt="inherited"></li>
166
-
167
- <li data-name="eg.Flicking#isPlaying"><a href="eg.Flicking.html#isPlaying">isPlaying</a></li>
168
-
169
- <li data-name="eg.Flicking#moveTo"><a href="eg.Flicking.html#moveTo">moveTo</a></li>
170
-
171
- <li data-name="eg.Flicking#next"><a href="eg.Flicking.html#next">next</a></li>
172
-
173
- <li data-name="eg.Flicking#off"><a href="eg.Flicking.html#off">off</a> <img src="img/i.png" width="14" title="inherited" alt="inherited"></li>
174
-
175
- <li data-name="eg.Flicking#on"><a href="eg.Flicking.html#on">on</a> <img src="img/i.png" width="14" title="inherited" alt="inherited"></li>
176
-
177
- <li data-name="eg.Flicking#once"><a href="eg.Flicking.html#once">once</a> <img src="img/i.png" width="14" title="inherited" alt="inherited"></li>
178
-
179
- <li data-name="eg.Flicking#prepend"><a href="eg.Flicking.html#prepend">prepend</a></li>
180
-
181
- <li data-name="eg.Flicking#prev"><a href="eg.Flicking.html#prev">prev</a></li>
182
-
183
- <li data-name="eg.Flicking#remove"><a href="eg.Flicking.html#remove">remove</a></li>
184
-
185
- <li data-name="eg.Flicking#removePlugins"><a href="eg.Flicking.html#removePlugins">removePlugins</a></li>
186
-
187
- <li data-name="eg.Flicking#replace"><a href="eg.Flicking.html#replace">replace</a></li>
188
-
189
- <li data-name="eg.Flicking#resize"><a href="eg.Flicking.html#resize">resize</a></li>
190
-
191
- <li data-name="eg.Flicking#setLastIndex"><a href="eg.Flicking.html#setLastIndex">setLastIndex</a></li>
192
-
193
- <li data-name="eg.Flicking#setStatus"><a href="eg.Flicking.html#setStatus">setStatus</a></li>
194
-
195
- <li data-name="eg.Flicking#trigger"><a href="eg.Flicking.html#trigger">trigger</a> <img src="img/i.png" width="14" title="inherited" alt="inherited"></li>
196
-
197
- </ul>
198
- <ul class="events itemMembers expends">
199
-
200
- <span class="subtitle">Events</span>
201
-
202
- <li data-name="eg.Flicking#event:change"><a href="eg.Flicking.html#event:change">change</a></li>
203
-
204
- <li data-name="eg.Flicking#event:contentError"><a href="eg.Flicking.html#event:contentError">contentError</a></li>
205
-
206
- <li data-name="eg.Flicking#event:holdEnd"><a href="eg.Flicking.html#event:holdEnd">holdEnd</a></li>
207
-
208
- <li data-name="eg.Flicking#event:holdStart"><a href="eg.Flicking.html#event:holdStart">holdStart</a></li>
209
-
210
- <li data-name="eg.Flicking#event:move"><a href="eg.Flicking.html#event:move">move</a></li>
211
-
212
- <li data-name="eg.Flicking#event:moveEnd"><a href="eg.Flicking.html#event:moveEnd">moveEnd</a></li>
213
-
214
- <li data-name="eg.Flicking#event:moveStart"><a href="eg.Flicking.html#event:moveStart">moveStart</a></li>
215
-
216
- <li data-name="eg.Flicking#event:needPanel"><a href="eg.Flicking.html#event:needPanel">needPanel</a></li>
217
-
218
- <li data-name="eg.Flicking#event:restore"><a href="eg.Flicking.html#event:restore">restore</a></li>
219
-
220
- <li data-name="eg.Flicking#event:select"><a href="eg.Flicking.html#event:select">select</a></li>
221
-
222
- <li data-name="eg.Flicking#event:visibleChange"><a href="eg.Flicking.html#event:visibleChange">visibleChange</a></li>
223
-
224
- </ul>
225
-
226
-
227
- </li>
228
-
229
-
230
-
231
-
232
-
233
-
234
- </ul>
235
- </div>
236
-
237
- <div class="main">
238
- <h1 class="page-title" data-filename="src_types.ts.html">Source: src/types.ts</h1>
239
-
240
-
241
-
242
-
243
- <section>
244
- <article>
245
- <pre class="prettyprint source linenums"><code>/**
246
- * Copyright (c) 2015 NAVER Corp.
247
- * egjs projects are licensed under the MIT license
248
- */
249
-
250
- import Flicking from "./Flicking";
251
- import Viewport from "./components/Viewport";
252
- import StateMachine from "./components/StateMachine";
253
- import Panel from "./components/Panel";
254
- import Component from "@egjs/component";
255
- import State from "./states/State";
256
- import { DiffResult } from "@egjs/list-differ";
257
- import { OnRelease } from "@egjs/axes";
258
-
259
- export type ValueOf&lt;T> = T[keyof T];
260
- /**
261
- * HTML `string` of single/mutiple HTMLElement, or an instance of `HTMLElement`.
262
- * @ko 단일/복수의 HTMLElement의 outerHTML에 해당하는 `string`, 혹은 `HTMLElement`의 인스턴스.
263
- * @typedef
264
- * @memberof eg.Flicking
265
- */
266
- export type ElementLike = string | HTMLElement;
267
-
268
- /**
269
- * @typedef
270
- * @memberof eg.Flicking
271
- * @property - A prefix of class names will be added for the panels, viewport, and camera.&lt;ko>패널들과 뷰포트, 카메라에 추가될 클래스 이름의 접두사.&lt;/ko>
272
- * @property - Deceleration value for panel movement animation for animation triggered by manual user input. A higher value means a shorter running time.&lt;ko>사용자의 동작으로 가속도가 적용된 패널 이동 애니메이션의 감속도. 값이 높을수록 애니메이션 실행 시간이 짧아진다.&lt;/ko>
273
- * @property - The direction of panel movement. (true: horizontal, false: vertical)&lt;ko>패널 이동 방향. (true: 가로방향, false: 세로방향)&lt;/ko>
274
- * @property - Enables circular mode, which connects first/last panel for continuous scrolling.&lt;ko>순환 모드를 활성화한다. 순환 모드에서는 양 끝의 패널이 서로 연결되어 끊김없는 스크롤이 가능하다.&lt;/ko>
275
- * @property - Enables infinite mode, which can automatically trigger needPanel until reaching the last panel's index reaches the lastIndex.&lt;ko>무한 모드를 활성화한다. 무한 모드에서는 needPanel 이벤트를 자동으로 트리거한다. 해당 동작은 마지막 패널의 인덱스가 lastIndex와 일치할때까지 일어난다.&lt;/ko>
276
- * @property - A Threshold from viewport edge before triggering `needPanel` event in infinite mode.&lt;ko>무한 모드에서 `needPanel`이벤트가 발생하기 위한 뷰포트 끝으로부터의 최대 거리.&lt;/ko>
277
- * @property - Maximum panel index that Flicking can set. Flicking won't trigger `needPanel` when the event's panel index is greater than it.&lt;br/>Also, if the last panel's index reached a given index, you can't add more panels.&lt;ko>Flicking이 설정 가능한 패널의 최대 인덱스. `needPanel` 이벤트에 지정된 인덱스가 최대 패널의 개수보다 같거나 커야 하는 경우에 이벤트를 트리거하지 않게 한다.&lt;br>또한, 마지막 패널의 인덱스가 주어진 인덱스와 동일할 경우, 새로운 패널을 더 이상 추가할 수 없다.&lt;/ko>
278
- * @property - Movement threshold to change panel(unit: pixel). It should be dragged above the threshold to change the current panel.&lt;ko>패널 변경을 위한 이동 임계값 (단위: 픽셀). 주어진 값 이상으로 스크롤해야만 패널 변경이 가능하다.&lt;/ko>
279
- * @property - Duration of the panel movement animation. (unit: ms)&lt;ko>패널 이동 애니메이션 진행 시간.(단위: ms)&lt;/ko>
280
- * @property - An easing function applied to the panel movement animation. Default value is `easeOutCubic`.&lt;ko>패널 이동 애니메이션에 적용할 easing함수. 기본값은 `easeOutCubic`이다.&lt;/ko>
281
- * @property - Index of the panel to set as default when initializing. A zero-based integer.&lt;ko>초기화시 지정할 디폴트 패널의 인덱스로, 0부터 시작하는 정수.&lt;/ko>
282
- * @property - Types of input devices to enable.({@link https://naver.github.io/egjs-axes/release/latest/doc/global.html#PanInputOption Reference})&lt;ko>활성화할 입력 장치 종류. ({@link https://naver.github.io/egjs-axes/release/latest/doc/global.html#PanInputOption 참고})&lt;/ko>
283
- * @property - The threshold angle value(0 ~ 90).&lt;br>If the input angle from click/touched position is above or below this value in horizontal and vertical mode each, scrolling won't happen.&lt;ko>스크롤 동작을 막기 위한 임계각(0 ~ 90).&lt;br>클릭/터치한 지점으로부터 계산된 사용자 입력의 각도가 horizontal/vertical 모드에서 각각 크거나 작으면, 스크롤 동작이 이루어지지 않는다.&lt;/ko>
284
- * @property - The size value of the bounce area. Only can be enabled when `circular=false`.&lt;br>You can set different bounce value for prev/next direction by using array.&lt;br>`number` for px value, and `string` for px, and % value relative to viewport size.(ex - 0, "10px", "20%")&lt;ko>바운스 영역의 크기값. `circular=false`인 경우에만 사용할 수 있다.&lt;br>배열을 통해 prev/next 방향에 대해 서로 다른 바운스 값을 지정 가능하다.&lt;br>`number`를 통해 px값을, `stirng`을 통해 px 혹은 뷰포트 크기 대비 %값을 사용할 수 있다.(ex - 0, "10px", "20%")&lt;/ko>
285
- * @property - Whether the `resize` method should be called automatically after a window resize event.&lt;ko>window의 `resize` 이벤트 이후 자동으로 resize()메소드를 호출할지의 여부.&lt;/ko>
286
- * @property - Whether the height(horizontal)/width(vertical) of the viewport element reflects the height/width value of the panel after completing the movement.&lt;ko>목적 패널로 이동한 후 그 패널의 높이(horizontal)/너비(vertical)값을 뷰포트 요소의 높이/너비값에 반영할지 여부.&lt;/ko>
287
- * @property - z-index value for viewport element.&lt;ko>뷰포트 엘리먼트의 z-index 값.&lt;/ko>
288
- * @property - Prevent the view from going out of the first/last panel. Only can be enabled when `circular=false`.&lt;ko>뷰가 첫번째와 마지막 패널 밖으로 나가는 것을 막아준다. `circular=false`인 경우에만 사용할 수 있다.&lt;/ko>
289
- * @property - Disables CSS property `overflow: hidden` in viewport if `true`.&lt;ko>`true`로 설정시 뷰포트에 `overflow: hidden` 속성을 해제한다.&lt;/ko>
290
- * @property - The reference position of the hanger in the viewport, which hangs panel anchors should be stopped at.&lt;br>It should be provided in px or % value of viewport size.&lt;br>You can combinate those values with plus/minus sign.&lt;br>ex) "50", "100px", "0%", "25% + 100px"&lt;ko>뷰포트 내부의 행어의 위치. 패널의 앵커들이 뷰포트 내에서 멈추는 지점에 해당한다.&lt;br>px값이나, 뷰포트의 크기 대비 %값을 사용할 수 있고, 이를 + 혹은 - 기호로 연계하여 사용할 수도 있다.&lt;br>예) "50", "100px", "0%", "25% + 100px"&lt;/ko>
291
- * @property - The reference position of the anchor in panels, which can be hanged by viewport hanger.&lt;br>It should be provided in px or % value of panel size.&lt;br>You can combinate those values with plus/minus sign.&lt;br>ex) "50", "100px", "0%", "25% + 100px"&lt;ko>패널 내부의 앵커의 위치. 뷰포트의 행어와 연계하여 패널이 화면 내에서 멈추는 지점을 설정할 수 있다.&lt;br>px값이나, 패널의 크기 대비 %값을 사용할 수 있고, 이를 + 혹은 - 기호로 연계하여 사용할 수도 있다.&lt;br>예) "50", "100px", "0%", "25% + 100px"&lt;/ko>
292
- * @property - Space value between panels. Should be given in number.(px)&lt;ko>패널간에 부여할 간격의 크기를 나타내는 숫자.(px)&lt;/ko>
293
- * @property - Movement style by user input. (ex: snap, freeScroll)&lt;ko>사용자 입력에 의한 이동 방식.(ex: snap, freeScroll)&lt;/ko>
294
- * @property - Whether to use `offsetWidth`/`offsetHeight` instead of `getBoundingClientRect` for panel/viewport size calculation.&lt;br/>You can use this option to calculate the original panel size when CSS transform is applied to viewport or panel.&lt;br/>⚠️ If panel size is not fixed integer value, there can be a 1px gap between panels.&lt;ko>패널과 뷰포트의 크기를 계산할 때 `offsetWidth`/`offsetHeight`를 `getBoundingClientRect` 대신 사용할지 여부.&lt;br/>패널이나 뷰포트에 CSS transform이 설정되어 있을 때 원래 패널 크기를 계산하려면 활성화할 수 있다.&lt;br/>⚠️ 패널의 크기가 정수로 고정되어있지 않다면 패널 사이에 1px의 공간이 생길 수 있다.&lt;/ko>
295
- * @property - This option indicates whether all panels have the same size(true) of first panel, or it can hold a list of class names that determines panel size.&lt;br/>Enabling this option can increase performance while recalculating panel size.&lt;ko>모든 패널의 크기가 동일한지(true), 혹은 패널 크기를 결정하는 패널 클래스들의 리스트.&lt;br/>이 옵션을 설정하면 패널 크기 재설정시에 성능을 높일 수 있다.&lt;/ko>
296
- * @property - Whether all panels have a constant size that won't be changed after resize. Enabling this option can increase performance while recalculating panel size.&lt;ko>모든 패널의 크기가 불변인지의 여부. 이 옵션을 'true'로 설정하면 패널 크기 재설정시에 성능을 높일 수 있다.&lt;/ko>
297
- * @property - Whether to render visible panels only. This can dramatically increase performance when there're many panels.&lt;ko>보이는 패널만 렌더링할지 여부를 설정한다. 패널이 많을 경우에 퍼포먼스를 크게 향상시킬 수 있다.&lt;/ko>
298
- * @property - Whether to use external rendering. It will delegate DOM manipulation and can synchronize the rendered state by calling `sync()` method. You can use this option to use in frameworks like React, Vue, Angular, which has its states and rendering methods.&lt;ko>외부 렌더링을 사용할 지의 여부. 이 옵션을 사용시 렌더링을 외부에 위임할 수 있고, `sync()`를 호출하여 그 상태를 동기화할 수 있다. 이 옵션을 사용하여, React, Vue, Angular 등 자체적인 상태와 렌더링 방법을 갖는 프레임워크에 대응할 수 있다.&lt;/ko>
299
- * @property - Area (px) that can go to the next page when swiping the right edge in iOS safari &lt;ko>iOS Safari에서 오른쪽 엣지를 스와이프 하는 경우 다음 페이지로 넘어갈 수 있는 영역(px)&lt;/ko>
300
- * @property - Whether to collect statistics on how you are using `Flicking`. These statistical data do not contain any personal information and are used only as a basis for the development of a user-friendly product.&lt;ko>어떻게 `Flicking`을 사용하고 있는지에 대한 통계 수집 여부를 나타낸다. 이 통계자료는 개인정보를 포함하고 있지 않으며 오직 사용자 친화적인 제품으로 발전시키기 위한 근거자료로서 활용한다.&lt;/ko>
301
- */
302
- export interface FlickingOptions {
303
- classPrefix: string;
304
- deceleration: number;
305
- horizontal: boolean;
306
- circular: boolean;
307
- infinite: boolean;
308
- infiniteThreshold: number | string;
309
- lastIndex: number;
310
- threshold: number;
311
- duration: number;
312
- panelEffect: (x: number) => number;
313
- defaultIndex: number;
314
- inputType: string[];
315
- thresholdAngle: number;
316
- bounce: number | string | [number | string, number | string];
317
- autoResize: boolean;
318
- adaptive: boolean;
319
- zIndex: number | "";
320
- bound: boolean;
321
- overflow: boolean;
322
- hanger: number | string;
323
- anchor: number | string;
324
- gap: number;
325
- moveType: MoveTypeOption;
326
- useOffset: boolean;
327
- isEqualSize: boolean | string[];
328
- isConstantSize: boolean;
329
- renderOnlyVisible: boolean;
330
- renderExternal: boolean;
331
- iOSEdgeSwipeThreshold: number;
332
- resizeOnContentsReady: boolean;
333
- collectStatistics: boolean;
334
- useResizeObserver: boolean;
335
- }
336
-
337
- export type MoveTypeObjectOption = MoveTypeSnapOption | MoveTypeFreeScrollOption;
338
- export type MoveTypeStringOption = MoveTypeObjectOption["type"];
339
-
340
- export interface MoveTypeContext {
341
- viewport: Viewport;
342
- axesEvent: OnRelease;
343
- state: State;
344
- swipeDistance: number;
345
- isNextDirection: boolean;
346
- }
347
-
348
- export interface DestinationInfo {
349
- panel: Panel;
350
- destPos: number;
351
- duration: number;
352
- eventType: EventType["CHANGE"] | EventType["RESTORE"] | "";
353
- }
354
-
355
- /**
356
- * Movement style by user input.
357
- * @ko 사용자 입력에 의한 이동 방식.
358
- * @typedef {"snap" | "freeScroll" | eg.Flicking.MoveTypeSnapOption | eg.Flicking.MoveTypeFreeScrollOption}
359
- * @memberof eg.Flicking
360
- */
361
- export type MoveTypeOption = MoveTypeStringOption | MoveTypeObjectOption;
362
-
363
- /**
364
- * With "snap" move type, momentum is applied while choosing destination panel at release time.&lt;br>You can set how many panels can go after release.
365
- * @ko 입력을 중단한 시점의 가속도에 영향받아 도달할 패널을 계산하는 이동 방식.&lt;br>입력 중단 이후 최대 몇 개까지의 패널을 통과하여 이동할지 설정할 수 있다.
366
- * @typedef
367
- * @memberof eg.Flicking
368
- * @property - Should be `"snap"` to enable snap mode.&lt;ko>`"snap"`을 지정하여 snap 모드를 활성화할 수 있다.&lt;/ko>
369
- * @property {number} [count=1] - Maximum number of panels can go after release.&lt;ko>입력 중단 이후 통과하여 이동할 수 있는 패널의 최대 갯수.&lt;/ko>
370
- */
371
- export interface MoveTypeSnapOption {
372
- type: "snap";
373
- count: number;
374
- }
375
-
376
- /**
377
- * With "freeScroll" move type, it can be scrolled freely without alignment.
378
- * @ko 패널이 정해진 지점에 정렬되지 않고, 자유롭게 스크롤할 수 있는 이동 방식.
379
- * @typedef
380
- * @memberof eg.Flicking
381
- * @property - Should be `"freeScroll"` to enable free scroll mode.&lt;ko>`"freeScroll"`을 지정하여 free scroll 모드를 활성화할 수 있다.&lt;/ko>
382
- */
383
- export interface MoveTypeFreeScrollOption {
384
- type: "freeScroll";
385
- }
386
-
387
- // State interface to save instance
388
- /**
389
- * @typedef
390
- * @memberof eg.Flicking
391
- * @property - Index of current panel.&lt;ko>현재 패널의 인덱스.&lt;/ko>
392
- * @property panels - Panels Flicking has.&lt;ko>Flicking이 갖고 있는 패널들의 정보.&lt;/ko>
393
- * @property {string} [panels.html] - `outerHTML` of each panel elements.&lt;ko>각 패널 엘리먼트의 `outerHTML`.&lt;/ko>
394
- * @property {index} [panels.index] - Index of each panels.&lt;ko>각 패널의 인덱스.&lt;/ko>
395
- * @property - Camera position of Flicking.&lt;ko>Flicking의 카메라 위치.&lt;/ko>
396
- */
397
- export interface FlickingStatus {
398
- index: number;
399
- panels: Array&lt;{
400
- html: string;
401
- index: number;
402
- position: number;
403
- }>;
404
- position: number;
405
- }
406
-
407
- export interface OriginalStyle {
408
- className: string | null;
409
- style: string | null;
410
- }
411
-
412
- /**
413
- * @typedef
414
- * @memberof eg.Flicking
415
- * @property - HTML element of panel object.&lt;ko>패널 오브젝트에 지정된 HTML Element.&lt;/ko>
416
- * @property - Index of panel, zero-based integer.&lt;ko>패널의 인덱스로, 0부터 시작하는 정수.&lt;/ko>
417
- * @property - Position of panel where it is placed from left(horizontal)/top(vertical).&lt;ko>패널의 위치로, 왼쪽(horizontal)/위(vertical)을 기준으로 얼마나 떨어져 있는지를 나타내는 값.&lt;/ko>
418
- * @property - Position of panel anchor where it is actually stopped interacting with hanger position.&lt;ko>Hanger와 상호작용하여 패널에 도착했을 때의 위치를 계산하는데 사용되는 패널 내부 Anchor의 위치.&lt;/ko>
419
- * @property - Size of panel, width(horizontal)/height(vertical) in `px`.&lt;ko>`px`단위의 패널의 크기, horizontal일 때는 너비, vertical일 때는 높이에 해당한다.&lt;/ko>
420
- * @property - Progress of movement between previous or next panel relative to current panel.&lt;ko> 현재 패널로부터 이전/다음 패널으로의 이동 진행률.&lt;/ko>
421
- * @property - Progress of movement between points that panel is completely invisible outside of viewport.(prev direction: -1, selected point: 0, next direction: 1) &lt;ko>현재 패널이 뷰포트 영역 밖으로 완전히 사라지는 지점을 기준으로 하는 진행도.(prev방향: -1, 선택 지점: 0, next방향: 1)&lt;/ko>
422
- * @property - Percentage of area where panel is visible in the viewport.&lt;ko>뷰포트 안에서 패널이 보이는 영역의 비율.&lt;/ko>
423
- * @property focus - Move to this panel.&lt;ko>이 패널로 이동한다.&lt;/ko>
424
- * @property {number} [focus.duration] Duration of the panel movement. (unit: ms)&lt;ko>패널 이동 애니메이션 진행 시간.(단위: ms)&lt;/ko>
425
- * @property update - Update panel element with given function.&lt;ko>패널 요소를 주어진 함수를 이용하여 업데이트한다.&lt;/ko>
426
- * @property {function} [update.updateFunction] Callback function to update panel element. argument is panel's element.&lt;ko>패널 요소를 업데이트하기 위한 콜백 함수. 패널의 HTMLElement를 인자로 갖는다.&lt;/ko>
427
- * @property - Return previous panel of current panel, `null` if it doesn't exist.&lt;ko>현재 패널의 이전 패널을 반환한다. 패널이 존재하지 않을 시 `null`을 반환한다.&lt;/ko>
428
- * @property - Return next panel of current panel, `null` if it doesn't exist.&lt;ko>현재 패널의 다음 패널을 반환한다. 패널이 존재하지 않을 시 `null`을 반환한다.&lt;/ko>
429
- * @property - Insert new panels before reference panel. Return inserted panels.&lt;ko>새로운 패널들을 해당 패널 앞에 추가한다. 새로 추가된 패널들을 반환한다.&lt;/ko>
430
- * @property - Insert new panels after reference panel. Return inserted panels.&lt;ko>새로운 패널들을 해당 패널 뒤에 추가한다. 새로 추가된 패널들을 반환한다.&lt;/ko>
431
- * @property - Remove this panel.&lt;ko>이 패널을 제거한다.&lt;/ko>
432
- * @example
433
- * - **Updating panel**
434
- * ```javascript
435
- * // As panel elements can be cloned in circular mode, `element` parameter is provided as read-only.
436
- * // You should use `update()` function to consistently update all panel elements cloned.
437
- *
438
- * // Don't
439
- * panel.element.classList.add("foo");
440
- * // Do
441
- * panel.update(el => {
442
- * el.classList.add("foo");
443
- * });
444
- * ```
445
- */
446
-
447
- export interface FlickingPanel {
448
- getElement: () => HTMLElement;
449
- getIndex: () => number;
450
- getPosition: () => number;
451
- getAnchorPosition: () => number;
452
- getSize: () => number;
453
- getProgress: () => number;
454
- getOutsetProgress: () => number;
455
- getVisibleRatio: () => number;
456
- focus: (duration?: number) => void;
457
- update: (updateFunction: (element: HTMLElement) => any) => void;
458
- prev: () => FlickingPanel | null;
459
- next: () => FlickingPanel | null;
460
- insertBefore: (element: ElementLike | ElementLike[]) => FlickingPanel[];
461
- insertAfter: (element: ElementLike | ElementLike[]) => FlickingPanel[];
462
- remove: () => void;
463
- }
464
-
465
- export interface Direction {
466
- readonly PREV: "PREV";
467
- readonly NEXT: "NEXT";
468
- }
469
-
470
- /**
471
- * Event triggered when user started dragging.
472
- * @ko 사용자가 드래그를 시작했을 떄 발생하는 이벤트
473
- * @event eg.Flicking#holdStart
474
- * @type eg.Flicking.FlickingEvent
475
- */
476
-
477
- /**
478
- * Event triggered when user stopped dragging.
479
- * @ko 사용자가 드래그를 중단했을 때 발생하는 이벤트.
480
- * @event eg.Flicking#holdEnd
481
- * @type eg.Flicking.FlickingEvent
482
- */
483
-
484
- /**
485
- * Event triggered once before first [move]{@link eg.Flicking#event:move} event.
486
- * @ko 첫 번째 [move]{@link eg.Flicking#event:move}이벤트 직전에 단 한번 발생하는 이벤트.
487
- * @event eg.Flicking#moveStart
488
- * @type eg.Flicking.FlickingEvent
489
- */
490
-
491
- /**
492
- * Event triggered while moving to the destination panel.
493
- * @ko 목적 패널로의 이동 도중에 발생하는 이벤트.
494
- * @event eg.Flicking#move
495
- * @type eg.Flicking.FlickingEvent
496
- */
497
-
498
- /**
499
- * Event triggered after finish moving to the destination panel.
500
- * @ko 목적 패널로의 이동을 완료한 다음 발생하는 이벤트.
501
- * @event eg.Flicking#moveEnd
502
- * @type eg.Flicking.FlickingEvent
503
- */
504
-
505
- /**
506
- * Event that indicates index will be changed, and isn't restoring. Index will be changed at `moveEnd` event.&lt;br>It can be triggered when user finished input, or flicking start to move by method.&lt;br>It won't be triggered when moving to same panel, unless it's circulated more than one cycle in circular mode.&lt;br>Calling `stop()` in event will prevent index changing &amp; panel moving.&lt;br>&lt;br>`event` doesn't have `axesEvent` property when triggered by [moveTo()]{@link eg.Flicking#moveTo}, [prev()]{@link eg.Flicking#prev}, [next()]{@link eg.Flicking#next} method.
507
- * @ko `restore`되지 않고, 인덱스가 변경될 것임을 나타내는 이벤트. 실제 인덱스는 `moveEnd` 이벤트에서 변경된다.&lt;br>사용자가 입력을 마쳤을 때, 혹은 메소드를 통해 이동을 시작했을 때 발생한다.&lt;br>동일 패널로 이동시에는 발생되지 않지만, circular 모드에서 한 바퀴 이상 순환하여 동일 패널로 도착했을 때에도 발생된다.&lt;br>이벤트의 `stop()`을 호출시 패널로의 이동을 막는다.&lt;br>&lt;br>[moveTo()]{@link eg.Flicking#moveTo}, [prev()]{@link eg.Flicking#prev}, [next()]{@link eg.Flicking#next}와 같은 메소드에 의해 호출되었을 경우 `event`내의 `axesEvent` 프로퍼티 값은 undefined이다.
508
- * @event eg.Flicking#change
509
- * @type eg.Flicking.ChangeEvent
510
- */
511
-
512
- /**
513
- * Event triggered when user drag amount not reached `threshold` in [FlickingOptions]{@link eg.Flicking.FlickingOptions}.
514
- * @ko 사용자가 드래그한 정도가 [FlickingOptions]{@link eg.Flicking.FlickingOptions}의 `threshold`값보다 작을 때 발생하는 이벤트.
515
- * @event eg.Flicking#restore
516
- * @type eg.Flicking.FlickingEvent
517
- */
518
-
519
- /**
520
- * Event triggered when user statically selected (clicked) panel.
521
- * @ko 사용자가 패널을 정적으로 선택(클릭)했을 때 발생하는 이벤트.
522
- * @event eg.Flicking#select
523
- * @type eg.Flicking.SelectEvent
524
- */
525
-
526
- /**
527
- * Event triggered when Flicking confronts panels don't have successive indexes, so it needs more content to draw panel in infinite mode.
528
- * @ko 무한 모드에서, Flicking이 인덱스가 연속하지 않은 패널들을 만나 새로운 패널이 필요함을 알리고자 할 때 발생시키는 이벤트.
529
- * @event eg.Flicking#needPanel
530
- * @type eg.Flicking.NeedPanelEvent
531
- */
532
-
533
- /**
534
- * Event triggered when Flicking's visible panel changes. This event only triggered with `renderOnlyVisible` option.
535
- * @ko 보이는 패널 정보에 변화가 있을 경우에 발생되는 이벤트. `renderOnlyVisible` 옵션이 활성화된 경우에만 트리거된다.
536
- * @event eg.Flicking#visibleChange
537
- * @type eg.Flicking.VisibleChangeEvent
538
- */
539
-
540
- /**
541
- * Event triggered each time the image/video element inside Flicking fails to load. This event is only triggered with `resizeOnContentsReady` option.
542
- * @ko Flicking 내부의 이미지/비디오 엘리먼트의 로드가 실패했을때마다 발생했을 때마다 트리거되는 이벤트. `resizeOnContentsReady` 옵션이 활성화된 경우에만 트리거된다.
543
- * @event eg.Flicking#contentError
544
- * @type eg.Flicking.ContentErrorEvent
545
- */
546
-
547
- export interface EventType {
548
- readonly HOLD_START: "holdStart";
549
- readonly HOLD_END: "holdEnd";
550
- readonly MOVE_START: "moveStart";
551
- readonly MOVE: "move";
552
- readonly MOVE_END: "moveEnd";
553
- readonly CHANGE: "change";
554
- readonly RESTORE: "restore";
555
- readonly SELECT: "select";
556
- readonly NEED_PANEL: "needPanel";
557
- readonly VISIBLE_CHANGE: "visibleChange";
558
- readonly CONTENT_ERROR: "contentError";
559
- }
560
-
561
- /**
562
- * @typedef
563
- * @type object
564
- * @memberof eg.Flicking
565
- * @property {string} type Name of the event.&lt;ko>이벤트명&lt;/ko>
566
- * @property {number} index Index number of the current panel.&lt;ko>현재 패널의 인덱스 번호.&lt;/ko>
567
- * @property {eg.Flicking.FlickingPanel|null} panel Current panel.&lt;ko> 현재 패널.&lt;/ko>
568
- * @property {number} progress Absolute progress of how much it proceed from first panel. 0 at first panel, and 1 at last panel.&lt;ko>첫 번째 패널로부터 얼마만큼 진행했는지를 나타내는 진행도. 첫번째 패널에서 0, 마지막 패널에서 1의 값을 갖는다.&lt;/ko>
569
- * @property {boolean} isTrusted `true` when the event was generated by a user action("mouse" or "touch") otherwise `false`.&lt;ko>사용자 액션("mouse" 또는 "touch")에 의해 이벤트가 생성된 경우 `true`. 그 외는 `false`.&lt;/ko>
570
- * @property {boolean} holding Whether the user is inputting through the input device. (Whether it is 'mousedown' for a mouse device or 'touchmove' for a touch device.)&lt;ko>사용자가 입력 장치를 통해 입력중인지 여부. (마우스 장치라면 'mousedown' 여부, 터치 장치라면 'touchmove' 여부)&lt;/ko>
571
- * @property {function} stop Cancel the default action, and prevents every events after it.&lt;br>Not effective with events postfixed with `-End`&lt;ko>이벤트의 기본동작을 취소하고, 해당 이벤트 뒤에 발생할 이벤트들을 전부 발생하지 않도록 한다.&lt;br>`-End`가 접미사로 붙은 이벤트에서는 유효한 동작을 하지 않는다.&lt;/ko>
572
- * @property {"PREV" | "NEXT" | null} direction Direction of the panel movement. `null` if not moved at all.&lt;ko>패널 이동 방향. 아직 움직이지 않았을 경우 `null`이다.&lt;/ko>
573
- * @property {object | undefined} axesEvent Original event emitted from {@link https://naver.github.io/egjs-axes/release/latest/doc/ Axes} instance.&lt;ko>내부의 {@link https://naver.github.io/egjs-axes/release/latest/doc Axes} 인스턴스로부터 발생된 원본 이벤트.&lt;/ko>
574
- * @property {eg.Flicking} currentTarget Flicking instance that triggered event.&lt;ko>이벤트를 발생시킨 Flicking의 인스턴스&lt;/ko>
575
- */
576
- export type FlickingEvent = {
577
- type: string;
578
- index: number;
579
- panel: FlickingPanel | null;
580
- progress: number;
581
- isTrusted: boolean;
582
- holding: boolean;
583
- stop: () => void;
584
- direction: ValueOf&lt;Direction> | null;
585
- axesEvent?: any;
586
- currentTarget: Flicking;
587
- };
588
-
589
- /**
590
- * Event that indicates index will be changed, and isn't restoring. Index will be changed at `moveEnd` event.
591
- * @ko `restore`되지 않고, 인덱스가 변경될 것임을 나타내는 이벤트. 실제 인덱스는 `moveEnd`이벤트에서 변경된다.
592
- * @typedef
593
- * @type object
594
- * @memberof eg.Flicking
595
- * @property {string} type Name of the event.&lt;ko>이벤트명&lt;/ko>
596
- * @property {number} index Expected panel's index that will arrive at animation end.&lt;ko>애니메이션 종료 시점에 도착할 것으로 예측되는 패널의 인덱스.&lt;/ko>
597
- * @property {eg.Flicking.FlickingPanel | null} panel Expected panel that will arrive at animation end.&lt;ko>애니메이션 종료 시점에 도착할 것으로 예측되는 패널.&lt;/ko>
598
- * @property {number} progress Absolute progress of how much it proceed from first panel. 0 at first panel, and 1 at last panel.&lt;ko>첫 번째 패널로부터 얼마만큼 진행했는지를 나타내는 진행도. 첫번째 패널에서 0, 마지막 패널에서 1의 값을 갖는다.&lt;/ko>
599
- * @property {boolean} isTrusted `true` when the event was generated by a user action("mouse" or "touch") otherwise `false`.&lt;ko>사용자 액션("mouse" 또는 "touch")에 의해 이벤트가 생성된 경우 `true`. 그 외는 `false`.&lt;/ko>
600
- * @property {boolean} holding Whether the user is inputting through the input device. (Whether it is 'mousedown' for a mouse device or 'touchmove' for a touch device.)&lt;ko>사용자가 입력 장치를 통해 입력중인지 여부. (마우스 장치라면 'mousedown' 여부, 터치 장치라면 'touchmove' 여부)&lt;/ko>
601
- * @property {function} stop Cancel the default action, and prevents every events after it.&lt;br>Not effective with events postfixed with `-End`&lt;ko>이벤트의 기본동작을 취소하고, 해당 이벤트 뒤에 발생할 이벤트들을 전부 발생하지 않도록 한다.&lt;br>`-End`가 접미사로 붙은 이벤트에서는 유효한 동작을 하지 않는다.&lt;/ko>
602
- * @property {"PREV" | "NEXT" | null} direction Expected direction of the panel movement.&lt;ko>예측되는 패널 이동 방향.&lt;/ko>
603
- * @property {object | undefined} axesEvent Original event emitted from {@link https://naver.github.io/egjs-axes/release/latest/doc/ Axes} instance.&lt;br/>Is undefined when when triggered by [moveTo()]{@link eg.Flicking#moveTo}, [prev()]{@link eg.Flicking#prev}, [next()]{@link eg.Flicking#next}.&lt;ko>내부의 {@link https://naver.github.io/egjs-axes/release/latest/doc Axes} 인스턴스로부터 발생된 원본 이벤트.&lt;br/>[moveTo()]{@link eg.Flicking#moveTo}, [prev()]{@link eg.Flicking#prev}, [next()]{@link eg.Flicking#next}와 같은 메소드에 의해 발생되었을 경우 undefined.&lt;/ko>
604
- * @property {eg.Flicking} currentTarget Flicking instance that triggered event.&lt;ko>이벤트를 발생시킨 Flicking의 인스턴스&lt;/ko>
605
- */
606
- export type ChangeEvent = {
607
- type: string;
608
- index: number;
609
- panel: FlickingPanel | null;
610
- progress: number;
611
- isTrusted: boolean;
612
- holding: boolean;
613
- stop: () => void;
614
- direction: ValueOf&lt;Direction> | null;
615
- axesEvent?: any;
616
- currentTarget: Flicking;
617
- };
618
-
619
- /**
620
- * Event will be triggered when panel is statically click / touched.
621
- * @ko 패널이 정적으로 클릭(혹은 터치)되었을 때 발생되는 이벤트.
622
- * @typedef
623
- * @type object
624
- * @memberof eg.Flicking
625
- * @property {string} type Name of the event.&lt;ko>이벤트명&lt;/ko>
626
- * @property {number} index Selected panel's index.&lt;ko>선택된 패널의 인덱스.&lt;/ko>.
627
- * @property {eg.Flicking.FlickingPanel | null} panel Selected panel.&lt;ko>선택된 패널.&lt;/ko>.
628
- * @property {number} progress Absolute progress of how much it proceed from first panel. 0 at first panel, and 1 at last panel.&lt;ko>첫 번째 패널로부터 얼마만큼 진행했는지를 나타내는 진행도. 첫번째 패널에서 0, 마지막 패널에서 1의 값을 갖는다.&lt;/ko>
629
- * @property {boolean} isTrusted `true` when the event was generated by a user action("mouse" or "touch") otherwise `false`.&lt;ko>사용자 액션("mouse" 또는 "touch")에 의해 이벤트가 생성된 경우 `true`. 그 외는 `false`.&lt;/ko>
630
- * @property {boolean} holding Whether the user is inputting through the input device. (Whether it is 'mousedown' for a mouse device or 'touchmove' for a touch device.)&lt;ko>사용자가 입력 장치를 통해 입력중인지 여부. (마우스 장치라면 'mousedown' 여부, 터치 장치라면 'touchmove' 여부)&lt;/ko>
631
- * @property {"PREV" | "NEXT" | null} direction Expected direction of the panel movement.&lt;ko>예측되는 패널 이동 방향.&lt;/ko>
632
- * @property {object | undefined} axesEvent Original event emitted from {@link https://naver.github.io/egjs-axes/release/latest/doc/ Axes} instance.&lt;ko>내부의 {@link https://naver.github.io/egjs-axes/release/latest/doc Axes} 인스턴스로부터 발생된 원본 이벤트.&lt;/ko>
633
- * @property {eg.Flicking} currentTarget Flicking instance that triggered event.&lt;ko>이벤트를 발생시킨 Flicking의 인스턴스&lt;/ko>
634
- */
635
- export type SelectEvent = {
636
- type: string;
637
- index: number;
638
- panel: FlickingPanel | null;
639
- element: HTMLElement;
640
- progress: number;
641
- isTrusted: boolean;
642
- holding: boolean;
643
- direction: ValueOf&lt;Direction> | null;
644
- axesEvent?: any;
645
- currentTarget: Flicking;
646
- stop: () => void;
647
- };
648
-
649
- /**
650
- * Event can be triggered in infinite mode. When camera element reaches at infinite threshold, this event can be triggered to indicate there should be more content to be displayed.
651
- * @ko 무한 모드에서 발생될 수 있는 이벤트. 화면의 양 끝, 혹은 불연속적인 인덱스를 가진 패널을 기준으로 `infiniteThreshold`만큼 떨어진 지점에 도달하였을 때 발생될 수 있다.
652
- * @typedef
653
- * @type object
654
- * @memberof eg.Flicking
655
- * @property {string} type Name of the event.&lt;ko>이벤트명&lt;/ko>
656
- * @property {number} index Index of panel that needs panel before or after.&lt;ko>앞 또는 뒤에 패널이 필요한 패널의 인덱스.&lt;/ko>.
657
- * @property {eg.Flicking.FlickingPanel | null} panel Reference panel that needs panel before or after it.&lt;ko>앞 또는 뒤에 패널이 필요한 기준 패널.&lt;/ko>.
658
- * @property {boolean} progress Absolute progress of how much it proceed from first panel. 0 at first panel, and 1 at last panel.&lt;ko>첫 번째 패널로부터 얼마만큼 진행했는지를 나타내는 진행도. 첫번째 패널에서 0, 마지막 패널에서 1의 값을 갖는다.&lt;/ko>
659
- * @property {boolean} isTrusted `true` when the event was generated by a user action("mouse" or "touch") otherwise `false`.&lt;ko>사용자 액션("mouse" 또는 "touch")에 의해 이벤트가 생성된 경우 `true`. 그 외는 `false`.&lt;/ko>
660
- * @property {boolean} holding Whether the user is inputting through the input device. (Whether it is 'mousedown' for a mouse device or 'touchmove' for a touch device.)&lt;ko>사용자가 입력 장치를 통해 입력중인지 여부. (마우스 장치라면 'mousedown' 여부, 터치 장치라면 'touchmove' 여부)&lt;/ko>
661
- * @property {"PREV" | "NEXT" | null} direction Direction of panel is needed from reference panel. `null` if no panel exists.&lt;ko>기준 패널로부터 패널이 필요한 방향. 패널이 하나도 없을 경우 `null`이다.&lt;/ko>
662
- * @property {object | undefined} axesEvent Original event emitted from {@link https://naver.github.io/egjs-axes/release/latest/doc/ Axes} instance.&lt;ko>내부의 {@link https://naver.github.io/egjs-axes/release/latest/doc Axes} 인스턴스로부터 발생된 원본 이벤트.&lt;/ko>
663
- * @property {eg.Flicking} currentTarget Flicking instance that triggered event.&lt;ko>이벤트를 발생시킨 Flicking의 인스턴스&lt;/ko>
664
- * @property {function} fill A helper function that can be used to fill the empty panel area without consideration of direction.&lt;br/>Check the example below.&lt;ko>방향을 고려하지 않고 패널을 손쉽게 추가할 수 있게 해주는 헬퍼 함수.&lt;br/>사용 방법은 아래의 예를 참조.&lt;/ko>
665
- * @property {object} range - Range of indexes that is emtpy.&lt;ko>패널이 존재하지 않는 인덱스의 범위.&lt;/ko>
666
- * @property {number} [range.min] - Minimum index of panels needed.&lt;ko>필요한 패널들의 최소 인덱스.&lt;/ko>.
667
- * @property {number} [range.max] - Maximum index of panels needed.&lt;ko>필요한 패널들의 최대 인덱스.&lt;/ko>.
668
- * @property {number} [range.length] - How many panels are needed to fill empty spaces.&lt;ko>몇 개의 패널이 필요한지를 나타내는 정수.&lt;/ko>
669
- * @example
670
- * ```js
671
- * flicking.on("needPanel", e => {
672
- * // You can use "fill" method in event to add panels easily.
673
- * e.fill("&lt;div>New panel&lt;/div>");
674
- * })
675
- * ```
676
- */
677
- export type NeedPanelEvent = {
678
- type: string;
679
- index: number;
680
- panel: FlickingPanel | null;
681
- progress: number;
682
- isTrusted: boolean;
683
- holding: boolean;
684
- direction: ValueOf&lt;Direction> | null;
685
- axesEvent?: any;
686
- currentTarget: Flicking;
687
- fill: (elements: ElementLike | ElementLike[]) => FlickingPanel[];
688
- range: {
689
- min: number;
690
- max: number;
691
- length: number;
692
- };
693
- };
694
-
695
- /**
696
- * Event triggered when Flicking's visible panel changes. This event is only triggered with `renderOnlyVisible` option.
697
- * @ko 보이는 패널 정보에 변화가 있을 경우에 발생되는 이벤트. `renderOnlyVisible` 옵션이 활성화된 경우에만 트리거된다.
698
- * @typedef
699
- * @type object
700
- * @memberof eg.Flicking
701
- * @property {string} type Name of the event.&lt;ko>이벤트명&lt;/ko>
702
- * @property {object} range - Range of indexes that is newly visible.&lt;ko>새로 보이는 패널의 인덱스 범위.&lt;/ko>
703
- * @property {number} [range.min] - Minimum index of visible panels.&lt;ko>보이는 패널들 중 최소 인덱스.&lt;/ko>.
704
- * @property {number} [range.max] - Maximum index of visible panels.&lt;ko>보이는 패널들 중 최대 인덱스.&lt;/ko>.
705
- */
706
- export type VisibleChangeEvent = {
707
- type: string;
708
- range: {
709
- min: number;
710
- max: number;
711
- };
712
- };
713
-
714
- /**
715
- * Event triggered each time the image/video element inside Flicking fails to load. This event is only triggered with `resizeOnContentsReady` option.
716
- * @ko Flicking 내부의 이미지/비디오 엘리먼트의 로드가 실패했을때마다 발생했을 때마다 트리거되는 이벤트. `resizeOnContentsReady` 옵션이 활성화된 경우에만 트리거된다.
717
- * @typedef
718
- * @type object
719
- * @memberof eg.Flicking
720
- * @property {string} type Name of the event.&lt;ko>이벤트명&lt;/ko>
721
- * @property {HTMLElement} element The image/video element that error is occured.&lt;ko>에러가 발생한 이미지/비디오 엘리먼트&lt;/ko>
722
- */
723
- export type ContentErrorEvent = {
724
- type: string;
725
- element: HTMLElement;
726
- };
727
-
728
- export interface StateType {
729
- readonly IDLE: 0;
730
- readonly HOLDING: 1;
731
- readonly DRAGGING: 2;
732
- readonly ANIMATING: 3;
733
- readonly DISABLED: 4;
734
- }
735
-
736
- export interface AxesEventType {
737
- readonly HOLD: "hold";
738
- readonly CHANGE: "change";
739
- readonly RELEASE: "release";
740
- readonly ANIMATION_END: "animationEnd";
741
- readonly FINISH: "finish";
742
- }
743
-
744
- export interface TriggerCallback {
745
- onSuccess(callback: () => any): TriggerCallback;
746
- onStopped(callback: () => any): TriggerCallback;
747
- }
748
-
749
- export interface FlickingContext {
750
- flicking: Flicking;
751
- viewport: Viewport;
752
- transitTo: StateMachine["transitTo"];
753
- triggerEvent: Flicking["triggerEvent"];
754
- moveCamera: Flicking["moveCamera"];
755
- stopCamera: Viewport["stopCamera"];
756
- }
757
-
758
- export interface BoundingBox {
759
- x: number;
760
- y: number;
761
- width: number;
762
- height: number;
763
- }
764
-
765
- /**
766
- * @typedef
767
- * @memberof eg.Flicking
768
- * @property - Method called when plugin is added.&lt;ko>플러그인을 추가했을 때 발생하는 메소드.&lt;/ko>
769
- * @property - Method called when `resize` or `update` in flicking.&lt;ko>플리킹에서 `resize`가 발생하거나 `update`를 했을 때 발생하는 메소드.&lt;/ko>
770
- * @property - Method called when plugin is removed.&lt;ko>플러그인을 제거했을 때 발생하는 메소드.&lt;/ko>
771
- */
772
- export interface Plugin {
773
- init(flicking: Flicking): void;
774
- update?(flicking: Flicking): void;
775
- destroy(flicking: Flicking): void;
776
- }
777
-
778
- export type ExcludeKeys = keyof Component
779
- | "replace" | "append" | "remove" | "prepend"
780
- | "beforeSync" | "sync" | "getCloneCount" | "getRenderingIndexes"
781
- | "getLastIndex" | "setLastIndex" | "addPlugins" | "removePlugins";
782
- export type FlickingMethodsKeys = Exclude&lt;keyof Flicking, ExcludeKeys>;
783
- export type FlickingMethods = Pick&lt;Flicking, FlickingMethodsKeys>;
784
-
785
- export interface DestroyOption {
786
- preserveUI: boolean;
787
- }
788
-
789
- export type BeforeSyncResult = Pick&lt;DiffResult&lt;any>, "added" | "changed" | "maintained" | "removed">;
790
- export type SyncResult = Pick&lt;DiffResult&lt;HTMLElement>, "added" | "changed" | "maintained" | "removed" | "list">;
791
- </code></pre>
792
- </article>
793
- </section>
794
-
795
-
796
-
797
-
798
-
799
-
800
-
801
- <!-- disqus code -->
802
- <div id="disqus_thread"></div>
803
- <noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
804
- <a href="//disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>
805
- <!-- // disqus code -->
806
-
807
-
808
- <footer>
809
- Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 0.3.10</a> on Fri Feb 11 2022 19:50:08 GMT+0900 (Korean Standard Time)
810
- </footer>
811
- </div>
812
- </div>
813
- <script>prettyPrint();</script>
814
- <script src="scripts/main.js"></script>
815
- </body>
816
- </html>