@egjs/flicking 3.9.2 → 3.9.3
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.
- package/dist/flicking.esm.js +8 -2
- package/dist/flicking.esm.js.map +1 -1
- package/dist/flicking.js +8 -2
- package/dist/flicking.js.map +1 -1
- package/dist/flicking.min.js +2 -2
- package/dist/flicking.min.js.map +1 -1
- package/dist/flicking.pkgd.js +8 -2
- package/dist/flicking.pkgd.js.map +1 -1
- package/dist/flicking.pkgd.min.js +2 -2
- package/dist/flicking.pkgd.min.js.map +1 -1
- package/doc/eg.Flicking.html +12780 -0
- package/doc/fonts/glyphicons-halflings-regular.eot +0 -0
- package/doc/fonts/glyphicons-halflings-regular.svg +229 -0
- package/doc/fonts/glyphicons-halflings-regular.ttf +0 -0
- package/doc/fonts/glyphicons-halflings-regular.woff +0 -0
- package/doc/global.html +417 -0
- package/doc/img/i.png +0 -0
- package/doc/img/type_white.svg +26 -0
- package/doc/index.html +503 -0
- package/doc/node_modules_@egjs_component_src_Component.ts.html +627 -0
- package/doc/scripts/bootstrap.min.js +7 -0
- package/doc/scripts/jquery.min.js +6 -0
- package/doc/scripts/jquery.min.map +1 -0
- package/doc/scripts/linenumber.js +29 -0
- package/doc/scripts/main.js +101 -0
- package/doc/scripts/prettify/Apache-License-2.0.txt +202 -0
- package/doc/scripts/prettify/lang-css.js +2 -0
- package/doc/scripts/prettify/prettify.js +28 -0
- package/doc/scripts/underscore-min.js +6 -0
- package/doc/scripts/underscore-min.map +1 -0
- package/doc/src_Flicking.ts.html +1268 -0
- package/doc/src_types.ts.html +831 -0
- package/doc/styles/bootstrap.min.css +7 -0
- package/doc/styles/jaguar.css +469 -0
- package/doc/styles/prettify-jsdoc.css +111 -0
- package/doc/styles/prettify-tomorrow.css +136 -0
- package/doc/styles/style.css +13 -0
- package/docs/build/release/3.9.2/dist/flicking.esm.js +5137 -0
- package/docs/build/release/3.9.2/dist/flicking.esm.js.map +1 -0
- package/docs/build/release/3.9.2/dist/flicking.js +5144 -0
- package/docs/build/release/3.9.2/dist/flicking.js.map +1 -0
- package/docs/build/release/3.9.2/dist/flicking.min.js +10 -0
- package/docs/build/release/3.9.2/dist/flicking.min.js.map +1 -0
- package/docs/build/release/3.9.2/dist/flicking.pkgd.js +11473 -0
- package/docs/build/release/3.9.2/dist/flicking.pkgd.js.map +1 -0
- package/docs/build/release/3.9.2/dist/flicking.pkgd.min.js +10 -0
- package/docs/build/release/3.9.2/dist/flicking.pkgd.min.js.map +1 -0
- package/docs/build/release/3.9.3/dist/flicking.esm.js +5143 -0
- package/docs/build/release/3.9.3/dist/flicking.esm.js.map +1 -0
- package/docs/build/release/3.9.3/dist/flicking.js +5150 -0
- package/docs/build/release/3.9.3/dist/flicking.js.map +1 -0
- package/docs/build/release/3.9.3/dist/flicking.min.js +10 -0
- package/docs/build/release/3.9.3/dist/flicking.min.js.map +1 -0
- package/docs/build/release/3.9.3/dist/flicking.pkgd.js +11479 -0
- package/docs/build/release/3.9.3/dist/flicking.pkgd.js.map +1 -0
- package/docs/build/release/3.9.3/dist/flicking.pkgd.min.js +10 -0
- package/docs/build/release/3.9.3/dist/flicking.pkgd.min.js.map +1 -0
- package/package.json +1 -1
- package/src/components/PanelManager.ts +5 -0
|
@@ -0,0 +1,1268 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8">
|
|
5
|
+
<title>Source: src/Flicking.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.ContentLoadEvent"><a href="eg.Flicking.html#.ContentLoadEvent">ContentLoadEvent</a></li>
|
|
105
|
+
|
|
106
|
+
<li data-name="eg.Flicking.ElementLike"><a href="eg.Flicking.html#.ElementLike">ElementLike</a></li>
|
|
107
|
+
|
|
108
|
+
<li data-name="eg.Flicking.FlickingEvent"><a href="eg.Flicking.html#.FlickingEvent">FlickingEvent</a></li>
|
|
109
|
+
|
|
110
|
+
<li data-name="eg.Flicking.FlickingOptions"><a href="eg.Flicking.html#.FlickingOptions">FlickingOptions</a></li>
|
|
111
|
+
|
|
112
|
+
<li data-name="eg.Flicking.FlickingPanel"><a href="eg.Flicking.html#.FlickingPanel">FlickingPanel</a></li>
|
|
113
|
+
|
|
114
|
+
<li data-name="eg.Flicking.FlickingStatus"><a href="eg.Flicking.html#.FlickingStatus">FlickingStatus</a></li>
|
|
115
|
+
|
|
116
|
+
<li data-name="eg.Flicking.MoveTypeFreeScrollOption"><a href="eg.Flicking.html#.MoveTypeFreeScrollOption">MoveTypeFreeScrollOption</a></li>
|
|
117
|
+
|
|
118
|
+
<li data-name="eg.Flicking.MoveTypeOption"><a href="eg.Flicking.html#.MoveTypeOption">MoveTypeOption</a></li>
|
|
119
|
+
|
|
120
|
+
<li data-name="eg.Flicking.MoveTypeSnapOption"><a href="eg.Flicking.html#.MoveTypeSnapOption">MoveTypeSnapOption</a></li>
|
|
121
|
+
|
|
122
|
+
<li data-name="eg.Flicking.NeedPanelEvent"><a href="eg.Flicking.html#.NeedPanelEvent">NeedPanelEvent</a></li>
|
|
123
|
+
|
|
124
|
+
<li data-name="eg.Flicking.Plugin"><a href="eg.Flicking.html#.Plugin">Plugin</a></li>
|
|
125
|
+
|
|
126
|
+
<li data-name="eg.Flicking.SelectEvent"><a href="eg.Flicking.html#.SelectEvent">SelectEvent</a></li>
|
|
127
|
+
|
|
128
|
+
<li data-name="eg.Flicking.VisibleChangeEvent"><a href="eg.Flicking.html#.VisibleChangeEvent">VisibleChangeEvent</a></li>
|
|
129
|
+
|
|
130
|
+
</ul>
|
|
131
|
+
<ul class="methods itemMembers expends">
|
|
132
|
+
|
|
133
|
+
<span class="subtitle">Methods</span>
|
|
134
|
+
|
|
135
|
+
<li data-name="eg.Flicking#addPlugins"><a href="eg.Flicking.html#addPlugins">addPlugins</a></li>
|
|
136
|
+
|
|
137
|
+
<li data-name="eg.Flicking#append"><a href="eg.Flicking.html#append">append</a></li>
|
|
138
|
+
|
|
139
|
+
<li data-name="eg.Flicking#destroy"><a href="eg.Flicking.html#destroy">destroy</a></li>
|
|
140
|
+
|
|
141
|
+
<li data-name="eg.Flicking#disableInput"><a href="eg.Flicking.html#disableInput">disableInput</a></li>
|
|
142
|
+
|
|
143
|
+
<li data-name="eg.Flicking#enableInput"><a href="eg.Flicking.html#enableInput">enableInput</a></li>
|
|
144
|
+
|
|
145
|
+
<li data-name="eg.Flicking#getAllPanels"><a href="eg.Flicking.html#getAllPanels">getAllPanels</a></li>
|
|
146
|
+
|
|
147
|
+
<li data-name="eg.Flicking#getCloneCount"><a href="eg.Flicking.html#getCloneCount">getCloneCount</a></li>
|
|
148
|
+
|
|
149
|
+
<li data-name="eg.Flicking#getCurrentPanel"><a href="eg.Flicking.html#getCurrentPanel">getCurrentPanel</a></li>
|
|
150
|
+
|
|
151
|
+
<li data-name="eg.Flicking#getElement"><a href="eg.Flicking.html#getElement">getElement</a></li>
|
|
152
|
+
|
|
153
|
+
<li data-name="eg.Flicking#getIndex"><a href="eg.Flicking.html#getIndex">getIndex</a></li>
|
|
154
|
+
|
|
155
|
+
<li data-name="eg.Flicking#getLastIndex"><a href="eg.Flicking.html#getLastIndex">getLastIndex</a></li>
|
|
156
|
+
|
|
157
|
+
<li data-name="eg.Flicking#getPanel"><a href="eg.Flicking.html#getPanel">getPanel</a></li>
|
|
158
|
+
|
|
159
|
+
<li data-name="eg.Flicking#getPanelCount"><a href="eg.Flicking.html#getPanelCount">getPanelCount</a></li>
|
|
160
|
+
|
|
161
|
+
<li data-name="eg.Flicking#getSize"><a href="eg.Flicking.html#getSize">getSize</a></li>
|
|
162
|
+
|
|
163
|
+
<li data-name="eg.Flicking#getStatus"><a href="eg.Flicking.html#getStatus">getStatus</a></li>
|
|
164
|
+
|
|
165
|
+
<li data-name="eg.Flicking#getVisiblePanels"><a href="eg.Flicking.html#getVisiblePanels">getVisiblePanels</a></li>
|
|
166
|
+
|
|
167
|
+
<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>
|
|
168
|
+
|
|
169
|
+
<li data-name="eg.Flicking#isPlaying"><a href="eg.Flicking.html#isPlaying">isPlaying</a></li>
|
|
170
|
+
|
|
171
|
+
<li data-name="eg.Flicking#moveTo"><a href="eg.Flicking.html#moveTo">moveTo</a></li>
|
|
172
|
+
|
|
173
|
+
<li data-name="eg.Flicking#next"><a href="eg.Flicking.html#next">next</a></li>
|
|
174
|
+
|
|
175
|
+
<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>
|
|
176
|
+
|
|
177
|
+
<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>
|
|
178
|
+
|
|
179
|
+
<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>
|
|
180
|
+
|
|
181
|
+
<li data-name="eg.Flicking#prepend"><a href="eg.Flicking.html#prepend">prepend</a></li>
|
|
182
|
+
|
|
183
|
+
<li data-name="eg.Flicking#prev"><a href="eg.Flicking.html#prev">prev</a></li>
|
|
184
|
+
|
|
185
|
+
<li data-name="eg.Flicking#remove"><a href="eg.Flicking.html#remove">remove</a></li>
|
|
186
|
+
|
|
187
|
+
<li data-name="eg.Flicking#removePlugins"><a href="eg.Flicking.html#removePlugins">removePlugins</a></li>
|
|
188
|
+
|
|
189
|
+
<li data-name="eg.Flicking#replace"><a href="eg.Flicking.html#replace">replace</a></li>
|
|
190
|
+
|
|
191
|
+
<li data-name="eg.Flicking#resize"><a href="eg.Flicking.html#resize">resize</a></li>
|
|
192
|
+
|
|
193
|
+
<li data-name="eg.Flicking#setLastIndex"><a href="eg.Flicking.html#setLastIndex">setLastIndex</a></li>
|
|
194
|
+
|
|
195
|
+
<li data-name="eg.Flicking#setStatus"><a href="eg.Flicking.html#setStatus">setStatus</a></li>
|
|
196
|
+
|
|
197
|
+
<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>
|
|
198
|
+
|
|
199
|
+
</ul>
|
|
200
|
+
<ul class="events itemMembers expends">
|
|
201
|
+
|
|
202
|
+
<span class="subtitle">Events</span>
|
|
203
|
+
|
|
204
|
+
<li data-name="eg.Flicking#event:change"><a href="eg.Flicking.html#event:change">change</a></li>
|
|
205
|
+
|
|
206
|
+
<li data-name="eg.Flicking#event:contentError"><a href="eg.Flicking.html#event:contentError">contentError</a></li>
|
|
207
|
+
|
|
208
|
+
<li data-name="eg.Flicking#event:holdEnd"><a href="eg.Flicking.html#event:holdEnd">holdEnd</a></li>
|
|
209
|
+
|
|
210
|
+
<li data-name="eg.Flicking#event:holdStart"><a href="eg.Flicking.html#event:holdStart">holdStart</a></li>
|
|
211
|
+
|
|
212
|
+
<li data-name="eg.Flicking#event:move"><a href="eg.Flicking.html#event:move">move</a></li>
|
|
213
|
+
|
|
214
|
+
<li data-name="eg.Flicking#event:moveEnd"><a href="eg.Flicking.html#event:moveEnd">moveEnd</a></li>
|
|
215
|
+
|
|
216
|
+
<li data-name="eg.Flicking#event:moveStart"><a href="eg.Flicking.html#event:moveStart">moveStart</a></li>
|
|
217
|
+
|
|
218
|
+
<li data-name="eg.Flicking#event:needPanel"><a href="eg.Flicking.html#event:needPanel">needPanel</a></li>
|
|
219
|
+
|
|
220
|
+
<li data-name="eg.Flicking#event:restore"><a href="eg.Flicking.html#event:restore">restore</a></li>
|
|
221
|
+
|
|
222
|
+
<li data-name="eg.Flicking#event:select"><a href="eg.Flicking.html#event:select">select</a></li>
|
|
223
|
+
|
|
224
|
+
<li data-name="eg.Flicking#event:visibleChange"><a href="eg.Flicking.html#event:visibleChange">visibleChange</a></li>
|
|
225
|
+
|
|
226
|
+
</ul>
|
|
227
|
+
|
|
228
|
+
|
|
229
|
+
</li>
|
|
230
|
+
|
|
231
|
+
|
|
232
|
+
|
|
233
|
+
|
|
234
|
+
|
|
235
|
+
|
|
236
|
+
</ul>
|
|
237
|
+
</div>
|
|
238
|
+
|
|
239
|
+
<div class="main">
|
|
240
|
+
<h1 class="page-title" data-filename="src_Flicking.ts.html">Source: src/Flicking.ts</h1>
|
|
241
|
+
|
|
242
|
+
|
|
243
|
+
|
|
244
|
+
|
|
245
|
+
<section>
|
|
246
|
+
<article>
|
|
247
|
+
<pre class="prettyprint source linenums"><code>/**
|
|
248
|
+
* Copyright (c) 2015 NAVER Corp.
|
|
249
|
+
* egjs projects are licensed under the MIT license
|
|
250
|
+
*/
|
|
251
|
+
|
|
252
|
+
import Component from "@egjs/component";
|
|
253
|
+
import ImReady from "@egjs/imready";
|
|
254
|
+
import { DiffResult } from "@egjs/list-differ";
|
|
255
|
+
import Viewport from "./components/Viewport";
|
|
256
|
+
import Panel from "./components/Panel";
|
|
257
|
+
import AutoResizer from "./components/AutoResizer";
|
|
258
|
+
|
|
259
|
+
import { merge, getProgress, parseElement, isString, counter, findIndex } from "./utils";
|
|
260
|
+
import { DEFAULT_OPTIONS, EVENTS, DIRECTION, AXES_EVENTS, STATE_TYPE, DEFAULT_MOVE_TYPE_OPTIONS } from "./consts";
|
|
261
|
+
import {
|
|
262
|
+
FlickingOptions,
|
|
263
|
+
FlickingEvent,
|
|
264
|
+
Direction,
|
|
265
|
+
EventType,
|
|
266
|
+
FlickingPanel,
|
|
267
|
+
TriggerCallback,
|
|
268
|
+
FlickingContext,
|
|
269
|
+
FlickingStatus,
|
|
270
|
+
Plugin,
|
|
271
|
+
ElementLike,
|
|
272
|
+
DestroyOption,
|
|
273
|
+
BeforeSyncResult,
|
|
274
|
+
SyncResult,
|
|
275
|
+
ChangeEvent,
|
|
276
|
+
SelectEvent,
|
|
277
|
+
NeedPanelEvent,
|
|
278
|
+
VisibleChangeEvent,
|
|
279
|
+
ContentLoadEvent,
|
|
280
|
+
ContentErrorEvent,
|
|
281
|
+
MoveTypeStringOption,
|
|
282
|
+
ValueOf,
|
|
283
|
+
} from "./types";
|
|
284
|
+
|
|
285
|
+
/**
|
|
286
|
+
* @memberof eg
|
|
287
|
+
* @extends eg.Component
|
|
288
|
+
* @support {"ie": "10+", "ch" : "latest", "ff" : "latest", "sf" : "latest" , "edge" : "latest", "ios" : "7+", "an" : "4.X+"}
|
|
289
|
+
* @requires {@link https://github.com/naver/egjs-component|eg.Component}
|
|
290
|
+
* @requires {@link https://github.com/naver/egjs-axes|eg.Axes}
|
|
291
|
+
* @see Easing Functions Cheat Sheet {@link http://easings.net/} <ko>이징 함수 Cheat Sheet {@link http://easings.net/}</ko>
|
|
292
|
+
*/
|
|
293
|
+
class Flicking extends Component<{
|
|
294
|
+
holdStart: FlickingEvent;
|
|
295
|
+
holdEnd: FlickingEvent;
|
|
296
|
+
moveStart: FlickingEvent;
|
|
297
|
+
move: FlickingEvent;
|
|
298
|
+
moveEnd: FlickingEvent;
|
|
299
|
+
change: ChangeEvent;
|
|
300
|
+
restore: FlickingEvent;
|
|
301
|
+
select: SelectEvent;
|
|
302
|
+
needPanel: NeedPanelEvent;
|
|
303
|
+
visibleChange: VisibleChangeEvent;
|
|
304
|
+
contentLoad: ContentLoadEvent;
|
|
305
|
+
contentError: ContentErrorEvent;
|
|
306
|
+
}> {
|
|
307
|
+
/**
|
|
308
|
+
* Version info string
|
|
309
|
+
* @ko 버전정보 문자열
|
|
310
|
+
* @example
|
|
311
|
+
* eg.Flicking.VERSION; // ex) 3.0.0
|
|
312
|
+
* @memberof eg.Flicking
|
|
313
|
+
*/
|
|
314
|
+
public static VERSION: string = "#__VERSION__#";
|
|
315
|
+
/**
|
|
316
|
+
* Direction constant - "PREV" or "NEXT"
|
|
317
|
+
* @ko 방향 상수 - "PREV" 또는 "NEXT"
|
|
318
|
+
* @type {object}
|
|
319
|
+
* @property {"PREV"} PREV - Prev direction from current hanger position.<br/>It's `left(←️)` direction when `horizontal: true`.<br/>Or, `up(↑️)` direction when `horizontal: false`.<ko>현재 행어를 기준으로 이전 방향.<br/>`horizontal: true`일 경우 `왼쪽(←️)` 방향.<br/>`horizontal: false`일 경우 `위쪽(↑️)`방향이다.</ko>
|
|
320
|
+
* @property {"NEXT"} NEXT - Next direction from current hanger position.<br/>It's `right(→)` direction when `horizontal: true`.<br/>Or, `down(↓️)` direction when `horizontal: false`.<ko>현재 행어를 기준으로 다음 방향.<br/>`horizontal: true`일 경우 `오른쪽(→)` 방향.<br/>`horizontal: false`일 경우 `아래쪽(↓️)`방향이다.</ko>
|
|
321
|
+
* @example
|
|
322
|
+
* eg.Flicking.DIRECTION.PREV; // "PREV"
|
|
323
|
+
* eg.Flicking.DIRECTION.NEXT; // "NEXT"
|
|
324
|
+
*/
|
|
325
|
+
public static DIRECTION: Direction = DIRECTION;
|
|
326
|
+
|
|
327
|
+
/**
|
|
328
|
+
* Event type object with event name strings.
|
|
329
|
+
* @ko 이벤트 이름 문자열들을 담은 객체
|
|
330
|
+
* @type {object}
|
|
331
|
+
* @property {"holdStart"} HOLD_START - holdStart event<ko>holdStart 이벤트</ko>
|
|
332
|
+
* @property {"holdEnd"} HOLD_END - holdEnd event<ko>holdEnd 이벤트</ko>
|
|
333
|
+
* @property {"moveStart"} MOVE_START - moveStart event<ko>moveStart 이벤트</ko>
|
|
334
|
+
* @property {"move"} MOVE - move event<ko>move 이벤트</ko>
|
|
335
|
+
* @property {"moveEnd"} MOVE_END - moveEnd event<ko>moveEnd 이벤트</ko>
|
|
336
|
+
* @property {"change"} CHANGE - change event<ko>change 이벤트</ko>
|
|
337
|
+
* @property {"restore"} RESTORE - restore event<ko>restore 이벤트</ko>
|
|
338
|
+
* @property {"select"} SELECT - select event<ko>select 이벤트</ko>
|
|
339
|
+
* @property {"needPanel"} NEED_PANEL - needPanel event<ko>needPanel 이벤트</ko>
|
|
340
|
+
* @example
|
|
341
|
+
* eg.Flicking.EVENTS.MOVE_START; // "MOVE_START"
|
|
342
|
+
*/
|
|
343
|
+
public static EVENTS: EventType = EVENTS;
|
|
344
|
+
|
|
345
|
+
public options: FlickingOptions;
|
|
346
|
+
|
|
347
|
+
private wrapper: HTMLElement;
|
|
348
|
+
private viewport: Viewport;
|
|
349
|
+
private autoResizer: AutoResizer;
|
|
350
|
+
private contentsReadyChecker: ImReady | null = null;
|
|
351
|
+
|
|
352
|
+
private eventContext: FlickingContext;
|
|
353
|
+
private isPanelChangedAtBeforeSync: boolean = false;
|
|
354
|
+
|
|
355
|
+
/**
|
|
356
|
+
* @param element A base element for the eg.Flicking module. When specifying a value as a `string` type, you must specify a css selector string to select the element.<ko>eg.Flicking 모듈을 사용할 기준 요소. `string`타입으로 값 지정시 요소를 선택하기 위한 css 선택자 문자열을 지정해야 한다.</ko>
|
|
357
|
+
* @param options An option object of the eg.Flicking module<ko>eg.Flicking 모듈의 옵션 객체</ko>
|
|
358
|
+
* @param {string} [options.classPrefix="eg-flick"] A prefix of class names will be added for the panels, viewport, and camera.<ko>패널들과 뷰포트, 카메라에 추가될 클래스 이름의 접두사.</ko>
|
|
359
|
+
* @param {number} [options.deceleration=0.0075] Deceleration value for panel movement animation for animation triggered by manual user input. A higher value means a shorter running time.<ko>사용자의 동작으로 가속도가 적용된 패널 이동 애니메이션의 감속도. 값이 높을수록 애니메이션 실행 시간이 짧아진다.</ko>
|
|
360
|
+
* @param {boolean} [options.horizontal=true] The direction of panel movement. (true: horizontal, false: vertical)<ko>패널 이동 방향. (true: 가로방향, false: 세로방향)</ko>
|
|
361
|
+
* @param {boolean} [options.circular=false] Enables circular mode, which connects first/last panel for continuous scrolling.<ko>순환 모드를 활성화한다. 순환 모드에서는 양 끝의 패널이 서로 연결되어 끊김없는 스크롤이 가능하다.</ko>
|
|
362
|
+
* @param {boolean} [options.infinite=false] Enables infinite mode, which can automatically trigger needPanel until reaching the last panel's index reaches the lastIndex.<ko>무한 모드를 활성화한다. 무한 모드에서는 needPanel 이벤트를 자동으로 트리거한다. 해당 동작은 마지막 패널의 인덱스가 lastIndex와 일치할때까지 일어난다.</ko>
|
|
363
|
+
* @param {number} [options.infiniteThreshold=0] A Threshold from viewport edge before triggering `needPanel` event in infinite mode.<ko>무한 모드에서 `needPanel`이벤트가 발생하기 위한 뷰포트 끝으로부터의 최대 거리.</ko>
|
|
364
|
+
* @param {number} [options.lastIndex=Infinity] Maximum panel index that Flicking can set. Flicking won't trigger `needPanel` when the event's panel index is greater than it.<br/>Also, if the last panel's index reached a given index, you can't add more panels.<ko>Flicking이 설정 가능한 패널의 최대 인덱스. `needPanel` 이벤트에 지정된 인덱스가 최대 패널의 개수보다 같거나 커야 하는 경우에 이벤트를 트리거하지 않게 한다.<br>또한, 마지막 패널의 인덱스가 주어진 인덱스와 동일할 경우, 새로운 패널을 더 이상 추가할 수 없다.</ko>
|
|
365
|
+
* @param {number} [options.threshold=40] Movement threshold to change panel(unit: pixel). It should be dragged above the threshold to change the current panel.<ko>패널 변경을 위한 이동 임계값 (단위: 픽셀). 주어진 값 이상으로 스크롤해야만 패널 변경이 가능하다.</ko>
|
|
366
|
+
* @param {number} [options.duration=100] Duration of the panel movement animation. (unit: ms)<ko>패널 이동 애니메이션 진행 시간.(단위: ms)</ko>
|
|
367
|
+
* @param {function} [options.panelEffect=x => 1 - Math.pow(1 - x, 3)] An easing function applied to the panel movement animation. Default value is `easeOutCubic`.<ko>패널 이동 애니메이션에 적용할 easing함수. 기본값은 `easeOutCubic`이다.</ko>
|
|
368
|
+
* @param {number} [options.defaultIndex=0] Index of the panel to set as default when initializing. A zero-based integer.<ko>초기화시 지정할 디폴트 패널의 인덱스로, 0부터 시작하는 정수.</ko>
|
|
369
|
+
* @param {string[]} [options.inputType=["touch,"mouse"]] Types of input devices to enable.({@link https://naver.github.io/egjs-axes/release/latest/doc/global.html#PanInputOption Reference})<ko>활성화할 입력 장치 종류. ({@link https://naver.github.io/egjs-axes/release/latest/doc/global.html#PanInputOption 참고})</ko>
|
|
370
|
+
* @param {number} [options.thresholdAngle=45] The threshold angle value(0 ~ 90).<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.<ko>스크롤 동작을 막기 위한 임계각(0 ~ 90).<br>클릭/터치한 지점으로부터 계산된 사용자 입력의 각도가 horizontal/vertical 모드에서 각각 크거나 작으면, 스크롤 동작이 이루어지지 않는다.</ko>
|
|
371
|
+
* @param {number|string|number[]|string[]} [options.bounce=[10,10]] The size value of the bounce area. Only can be enabled when `circular=false`.<br>You can set different bounce value for prev/next direction by using array.<br>`number` for px value, and `string` for px, and % value relative to viewport size.(ex - 0, "10px", "20%")<ko>바운스 영역의 크기값. `circular=false`인 경우에만 사용할 수 있다.<br>배열을 통해 prev/next 방향에 대해 서로 다른 바운스 값을 지정 가능하다.<br>`number`를 통해 px값을, `stirng`을 통해 px 혹은 뷰포트 크기 대비 %값을 사용할 수 있다.(ex - 0, "10px", "20%")</ko>
|
|
372
|
+
* @param {boolean} [options.autoResize=false] Whether the `resize` method should be called automatically after a window resize event.<ko>window의 `resize` 이벤트 이후 자동으로 resize()메소드를 호출할지의 여부.</ko>
|
|
373
|
+
* @param {boolean} [options.adaptive=false] Whether the height(horizontal)/width(vertical) of the viewport element reflects the height/width value of the panel after completing the movement.<ko>목적 패널로 이동한 후 그 패널의 높이(horizontal)/너비(vertical)값을 뷰포트 요소의 높이/너비값에 반영할지 여부.</ko>
|
|
374
|
+
* @param {number|""} [options.zIndex=2000] z-index value for viewport element.<ko>뷰포트 엘리먼트의 z-index 값.</ko>
|
|
375
|
+
* @param {boolean} [options.bound=false] Prevent the view from going out of the first/last panel. Only can be enabled when `circular=false`.<ko>뷰가 첫번째와 마지막 패널 밖으로 나가는 것을 막아준다. `circular=false`인 경우에만 사용할 수 있다.</ko>
|
|
376
|
+
* @param {boolean} [options.overflow=false] Disables CSS property `overflow: hidden` in viewport if `true`.<ko>`true`로 설정시 뷰포트에 `overflow: hidden` 속성을 해제한다.</ko>
|
|
377
|
+
* @param {string} [options.hanger="50%"] The reference position of the hanger in the viewport, which hangs panel anchors should be stopped at.<br>It should be provided in px or % value of viewport size.<br>You can combinate those values with plus/minus sign.<br>ex) "50", "100px", "0%", "25% + 100px"<ko>뷰포트 내부의 행어의 위치. 패널의 앵커들이 뷰포트 내에서 멈추는 지점에 해당한다.<br>px값이나, 뷰포트의 크기 대비 %값을 사용할 수 있고, 이를 + 혹은 - 기호로 연계하여 사용할 수도 있다.<br>예) "50", "100px", "0%", "25% + 100px"</ko>
|
|
378
|
+
* @param {string} [options.anchor="50%"] The reference position of the anchor in panels, which can be hanged by viewport hanger.<br>It should be provided in px or % value of panel size.<br>You can combinate those values with plus/minus sign.<br>ex) "50", "100px", "0%", "25% + 100px"<ko>패널 내부의 앵커의 위치. 뷰포트의 행어와 연계하여 패널이 화면 내에서 멈추는 지점을 설정할 수 있다.<br>px값이나, 패널의 크기 대비 %값을 사용할 수 있고, 이를 + 혹은 - 기호로 연계하여 사용할 수도 있다.<br>예) "50", "100px", "0%", "25% + 100px"</ko>
|
|
379
|
+
* @param {number} [options.gap=0] Space value between panels. Should be given in number.(px)<ko>패널간에 부여할 간격의 크기를 나타내는 숫자.(px)</ko>
|
|
380
|
+
* @param {eg.Flicking.MoveTypeOption} [options.moveType="snap"] Movement style by user input. (ex: snap, freeScroll)<ko>사용자 입력에 의한 이동 방식.(ex: snap, freeScroll)</ko>
|
|
381
|
+
* @param {boolean} [options.useOffset=false] Whether to use `offsetWidth`/`offsetHeight` instead of `getBoundingClientRect` for panel/viewport size calculation.<br/>You can use this option to calculate the original panel size when CSS transform is applied to viewport or panel.<br/>⚠️ If panel size is not fixed integer value, there can be a 1px gap between panels.<ko>패널과 뷰포트의 크기를 계산할 때 `offsetWidth`/`offsetHeight`를 `getBoundingClientRect` 대신 사용할지 여부.<br/>패널이나 뷰포트에 CSS transform이 설정되어 있을 때 원래 패널 크기를 계산하려면 옵션을 활성화한다.<br/>⚠️ 패널의 크기가 정수로 고정되어있지 않다면 패널 사이에 1px의 공간이 생길 수 있다.</ko>
|
|
382
|
+
* @param {boolean} [options.renderOnlyVisible=false] Whether to render visible panels only. This can dramatically increase performance when there're many panels.<ko>보이는 패널만 렌더링할지 여부를 설정한다. 패널이 많을 경우에 퍼포먼스를 크게 향상시킬 수 있다.</ko>
|
|
383
|
+
* @param {boolean|string[]} [options.isEqualSize=false] 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.<br/>Enabling this option can increase performance while recalculating panel size.<ko>모든 패널의 크기가 동일한지(true), 혹은 패널 크기를 결정하는 패널 클래스들의 리스트.<br/>이 옵션을 설정하면 패널 크기 재설정시에 성능을 높일 수 있다.</ko>
|
|
384
|
+
* @param {boolean} [options.isConstantSize=false] Whether all panels have a constant size that won't be changed after resize. Enabling this option can increase performance while recalculating panel size.<ko>모든 패널의 크기가 불변인지의 여부. 이 옵션을 'true'로 설정하면 패널 크기 재설정시에 성능을 높일 수 있다.</ko>
|
|
385
|
+
* @param {boolean} [options.renderExternal=false] 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.<ko>외부 렌더링을 사용할 지의 여부. 이 옵션을 사용시 렌더링을 외부에 위임할 수 있고, `sync()`를 호출하여 그 상태를 동기화할 수 있다. 이 옵션을 사용하여, React, Vue, Angular 등 자체적인 상태와 렌더링 방법을 갖는 프레임워크에 대응할 수 있다.</ko>
|
|
386
|
+
* @param {boolean} [options.resizeOnContentsReady=false] Whether to resize the Flicking after the image/video elements inside viewport are ready.<br/>Use this property to prevent wrong Flicking layout caused by dynamic image / video sizes.<ko>Flicking 내부의 이미지 / 비디오 엘리먼트들이 전부 로드되었을 때 Flicking의 크기를 재계산하기 위한 옵션.<br/>이미지 / 비디오 크기가 고정 크기가 아닐 경우 사용하여 레이아웃이 잘못되는 것을 방지할 수 있다.</ko>
|
|
387
|
+
* @param {boolean} [options.useResizeObserver=true] Whether to listen {@link https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver ResizeObserver}'s event instead of Window's {@link https://developer.mozilla.org/ko/docs/Web/API/Window/resize_event resize} event when using the `autoResize` option<ko>autoResize 옵션 사용시 {@link https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver ResizeObserver}의 이벤트를 Window객체의 {@link https://developer.mozilla.org/ko/docs/Web/API/Window/resize_event resize} 이벤트 대신 수신할지 여부를 설정합니다</ko>
|
|
388
|
+
* @param {boolean} [options.collectStatistics=true] 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.<ko>어떻게 `Flicking`을 사용하고 있는지에 대한 통계 수집 여부를 나타낸다. 이 통계자료는 개인정보를 포함하고 있지 않으며 오직 사용자 친화적인 제품으로 발전시키기 위한 근거자료로서 활용한다.</ko>
|
|
389
|
+
*/
|
|
390
|
+
constructor(
|
|
391
|
+
element: string | HTMLElement,
|
|
392
|
+
options: Partial<FlickingOptions> = {},
|
|
393
|
+
) {
|
|
394
|
+
super();
|
|
395
|
+
|
|
396
|
+
// Set flicking wrapper user provided
|
|
397
|
+
let wrapper: HTMLElement | null;
|
|
398
|
+
if (isString(element)) {
|
|
399
|
+
wrapper = document.querySelector(element);
|
|
400
|
+
if (!wrapper) {
|
|
401
|
+
throw new Error("Base element doesn't exist.");
|
|
402
|
+
}
|
|
403
|
+
} else if (element.nodeName && element.nodeType === 1) {
|
|
404
|
+
wrapper = element;
|
|
405
|
+
} else {
|
|
406
|
+
throw new Error("Element should be provided in string or HTMLElement.");
|
|
407
|
+
}
|
|
408
|
+
|
|
409
|
+
this.wrapper = wrapper;
|
|
410
|
+
// Override default options
|
|
411
|
+
this.options = merge({}, DEFAULT_OPTIONS, options) as FlickingOptions;
|
|
412
|
+
// Override moveType option
|
|
413
|
+
const currentOptions = this.options;
|
|
414
|
+
const moveType = currentOptions.moveType as MoveTypeStringOption;
|
|
415
|
+
|
|
416
|
+
if (moveType in DEFAULT_MOVE_TYPE_OPTIONS) {
|
|
417
|
+
currentOptions.moveType = DEFAULT_MOVE_TYPE_OPTIONS[moveType as keyof typeof DEFAULT_MOVE_TYPE_OPTIONS];
|
|
418
|
+
}
|
|
419
|
+
|
|
420
|
+
// Make viewport instance with panel container element
|
|
421
|
+
this.viewport = new Viewport(this, this.options, this.triggerEvent);
|
|
422
|
+
this.autoResizer = new AutoResizer(this);
|
|
423
|
+
|
|
424
|
+
this.listenInput();
|
|
425
|
+
this.listenResize();
|
|
426
|
+
}
|
|
427
|
+
|
|
428
|
+
/**
|
|
429
|
+
* Move to the previous panel if it exists.
|
|
430
|
+
* @ko 이전 패널이 존재시 해당 패널로 이동한다.
|
|
431
|
+
* @param [duration=options.duration] Duration of the panel movement animation.(unit: ms)<ko>패널 이동 애니메이션 진행 시간.(단위: ms)</ko>
|
|
432
|
+
* @return {eg.Flicking} The instance itself.<ko>인스턴스 자기 자신.</ko>
|
|
433
|
+
*/
|
|
434
|
+
public prev(duration?: number): this {
|
|
435
|
+
const currentPanel = this.getCurrentPanel();
|
|
436
|
+
const currentState = this.viewport.stateMachine.getState();
|
|
437
|
+
|
|
438
|
+
if (currentPanel && currentState.type === STATE_TYPE.IDLE) {
|
|
439
|
+
const prevPanel = currentPanel.prev();
|
|
440
|
+
if (prevPanel) {
|
|
441
|
+
prevPanel.focus(duration);
|
|
442
|
+
}
|
|
443
|
+
}
|
|
444
|
+
|
|
445
|
+
return this;
|
|
446
|
+
}
|
|
447
|
+
|
|
448
|
+
/**
|
|
449
|
+
* Move to the next panel if it exists.
|
|
450
|
+
* @ko 다음 패널이 존재시 해당 패널로 이동한다.
|
|
451
|
+
* @param [duration=options.duration] Duration of the panel movement animation(unit: ms).<ko>패널 이동 애니메이션 진행 시간.(단위: ms)</ko>
|
|
452
|
+
* @return {eg.Flicking} The instance itself.<ko>인스턴스 자기 자신.</ko>
|
|
453
|
+
*/
|
|
454
|
+
public next(duration?: number): this {
|
|
455
|
+
const currentPanel = this.getCurrentPanel();
|
|
456
|
+
const currentState = this.viewport.stateMachine.getState();
|
|
457
|
+
|
|
458
|
+
if (currentPanel && currentState.type === STATE_TYPE.IDLE) {
|
|
459
|
+
const nextPanel = currentPanel.next();
|
|
460
|
+
if (nextPanel) {
|
|
461
|
+
nextPanel.focus(duration);
|
|
462
|
+
}
|
|
463
|
+
}
|
|
464
|
+
|
|
465
|
+
return this;
|
|
466
|
+
}
|
|
467
|
+
|
|
468
|
+
/**
|
|
469
|
+
* Move to the panel of given index.
|
|
470
|
+
* @ko 주어진 인덱스에 해당하는 패널로 이동한다.
|
|
471
|
+
* @param index The index number of the panel to move.<ko>이동할 패널의 인덱스 번호.</ko>
|
|
472
|
+
* @param duration [duration=options.duration] Duration of the panel movement.(unit: ms)<ko>패널 이동 애니메이션 진행 시간.(단위: ms)</ko>
|
|
473
|
+
* @return {eg.Flicking} The instance itself.<ko>인스턴스 자기 자신.</ko>
|
|
474
|
+
*/
|
|
475
|
+
public moveTo(index: number, duration?: number): this {
|
|
476
|
+
const viewport = this.viewport;
|
|
477
|
+
const panel = viewport.panelManager.get(index);
|
|
478
|
+
const state = viewport.stateMachine.getState();
|
|
479
|
+
|
|
480
|
+
if (!panel || state.type !== STATE_TYPE.IDLE) {
|
|
481
|
+
return this;
|
|
482
|
+
}
|
|
483
|
+
|
|
484
|
+
const anchorPosition = panel.getAnchorPosition();
|
|
485
|
+
const hangerPosition = viewport.getHangerPosition();
|
|
486
|
+
|
|
487
|
+
let targetPanel = panel;
|
|
488
|
+
if (this.options.circular) {
|
|
489
|
+
const scrollAreaSize = viewport.getScrollAreaSize();
|
|
490
|
+
// Check all three possible locations, find the nearest position among them.
|
|
491
|
+
const possiblePositions = [
|
|
492
|
+
anchorPosition - scrollAreaSize,
|
|
493
|
+
anchorPosition,
|
|
494
|
+
anchorPosition + scrollAreaSize,
|
|
495
|
+
];
|
|
496
|
+
const nearestPosition = possiblePositions.reduce((nearest, current) => {
|
|
497
|
+
return (Math.abs(current - hangerPosition) < Math.abs(nearest - hangerPosition))
|
|
498
|
+
? current
|
|
499
|
+
: nearest;
|
|
500
|
+
}, Infinity) - panel.getRelativeAnchorPosition();
|
|
501
|
+
|
|
502
|
+
const identicals = panel.getIdenticalPanels();
|
|
503
|
+
const offset = nearestPosition - anchorPosition;
|
|
504
|
+
if (offset > 0) {
|
|
505
|
+
// First cloned panel is nearest
|
|
506
|
+
targetPanel = identicals[1];
|
|
507
|
+
} else if (offset < 0) {
|
|
508
|
+
// Last cloned panel is nearest
|
|
509
|
+
targetPanel = identicals[identicals.length - 1];
|
|
510
|
+
}
|
|
511
|
+
|
|
512
|
+
targetPanel = targetPanel.clone(targetPanel.getCloneIndex(), true);
|
|
513
|
+
targetPanel.setPosition(nearestPosition);
|
|
514
|
+
}
|
|
515
|
+
const currentIndex = this.getIndex();
|
|
516
|
+
|
|
517
|
+
if (hangerPosition === targetPanel.getAnchorPosition() && currentIndex === index) {
|
|
518
|
+
return this;
|
|
519
|
+
}
|
|
520
|
+
|
|
521
|
+
const eventType = panel.getIndex() === viewport.getCurrentIndex()
|
|
522
|
+
? ""
|
|
523
|
+
: EVENTS.CHANGE;
|
|
524
|
+
|
|
525
|
+
viewport.moveTo(
|
|
526
|
+
targetPanel,
|
|
527
|
+
viewport.findEstimatedPosition(targetPanel),
|
|
528
|
+
eventType,
|
|
529
|
+
null,
|
|
530
|
+
duration,
|
|
531
|
+
);
|
|
532
|
+
return this;
|
|
533
|
+
}
|
|
534
|
+
|
|
535
|
+
/**
|
|
536
|
+
* Return index of the current panel. `-1` if no panel exists.
|
|
537
|
+
* @ko 현재 패널의 인덱스 번호를 반환한다. 패널이 하나도 없을 경우 `-1`을 반환한다.
|
|
538
|
+
* @return Current panel's index, zero-based integer.<ko>현재 패널의 인덱스 번호. 0부터 시작하는 정수.</ko>
|
|
539
|
+
*/
|
|
540
|
+
public getIndex(): number {
|
|
541
|
+
return this.viewport.getCurrentIndex();
|
|
542
|
+
}
|
|
543
|
+
|
|
544
|
+
/**
|
|
545
|
+
* Return the wrapper element user provided in constructor.
|
|
546
|
+
* @ko 사용자가 생성자에서 제공한 래퍼 엘리먼트를 반환한다.
|
|
547
|
+
* @return Wrapper element user provided.<ko>사용자가 제공한 래퍼 엘리먼트.</ko>
|
|
548
|
+
*/
|
|
549
|
+
public getElement(): HTMLElement {
|
|
550
|
+
return this.wrapper;
|
|
551
|
+
}
|
|
552
|
+
|
|
553
|
+
/**
|
|
554
|
+
* Return the viewport element's size.
|
|
555
|
+
* @ko 뷰포트 엘리먼트의 크기를 반환한다.
|
|
556
|
+
* @return Width if horizontal: true, height if horizontal: false
|
|
557
|
+
*/
|
|
558
|
+
public getSize(): number {
|
|
559
|
+
return this.viewport.getSize();
|
|
560
|
+
}
|
|
561
|
+
|
|
562
|
+
/**
|
|
563
|
+
* Return current panel. `null` if no panel exists.
|
|
564
|
+
* @ko 현재 패널을 반환한다. 패널이 하나도 없을 경우 `null`을 반환한다.
|
|
565
|
+
* @return Current panel.<ko>현재 패널.</ko>
|
|
566
|
+
*/
|
|
567
|
+
public getCurrentPanel(): FlickingPanel | null {
|
|
568
|
+
const viewport = this.viewport;
|
|
569
|
+
const panel = viewport.getCurrentPanel();
|
|
570
|
+
return panel
|
|
571
|
+
? panel
|
|
572
|
+
: null;
|
|
573
|
+
}
|
|
574
|
+
|
|
575
|
+
/**
|
|
576
|
+
* Return the panel of given index. `null` if it doesn't exists.
|
|
577
|
+
* @ko 주어진 인덱스에 해당하는 패널을 반환한다. 해당 패널이 존재하지 않을 시 `null`이다.
|
|
578
|
+
* @return Panel of given index.<ko>주어진 인덱스에 해당하는 패널.</ko>
|
|
579
|
+
*/
|
|
580
|
+
public getPanel(index: number): FlickingPanel | null {
|
|
581
|
+
const viewport = this.viewport;
|
|
582
|
+
const panel = viewport.panelManager.get(index);
|
|
583
|
+
return panel
|
|
584
|
+
? panel
|
|
585
|
+
: null;
|
|
586
|
+
}
|
|
587
|
+
|
|
588
|
+
/**
|
|
589
|
+
* Return all panels.
|
|
590
|
+
* @ko 모든 패널들을 반환한다.
|
|
591
|
+
* @param - Should include cloned panels or not.<ko>복사된 패널들을 포함할지의 여부.</ko>
|
|
592
|
+
* @return All panels.<ko>모든 패널들.</ko>
|
|
593
|
+
*/
|
|
594
|
+
public getAllPanels(includeClone?: boolean): FlickingPanel[] {
|
|
595
|
+
const viewport = this.viewport;
|
|
596
|
+
const panelManager = viewport.panelManager;
|
|
597
|
+
const panels = includeClone
|
|
598
|
+
? panelManager.allPanels()
|
|
599
|
+
: panelManager.originalPanels();
|
|
600
|
+
|
|
601
|
+
return panels
|
|
602
|
+
.filter(panel => !!panel);
|
|
603
|
+
}
|
|
604
|
+
|
|
605
|
+
/**
|
|
606
|
+
* Return the panels currently shown in viewport area.
|
|
607
|
+
* @ko 현재 뷰포트 영역에서 보여지고 있는 패널들을 반환한다.
|
|
608
|
+
* @return Panels currently shown in viewport area.<ko>현재 뷰포트 영역에 보여지는 패널들</ko>
|
|
609
|
+
*/
|
|
610
|
+
public getVisiblePanels(): FlickingPanel[] {
|
|
611
|
+
return this.viewport.calcVisiblePanels();
|
|
612
|
+
}
|
|
613
|
+
|
|
614
|
+
/**
|
|
615
|
+
* Return length of original panels.
|
|
616
|
+
* @ko 원본 패널의 개수를 반환한다.
|
|
617
|
+
* @return Length of original panels.<ko>원본 패널의 개수</ko>
|
|
618
|
+
*/
|
|
619
|
+
public getPanelCount(): number {
|
|
620
|
+
return this.viewport.panelManager.getPanelCount();
|
|
621
|
+
}
|
|
622
|
+
|
|
623
|
+
/**
|
|
624
|
+
* Return how many groups of clones are created.
|
|
625
|
+
* @ko 몇 개의 클론 그룹이 생성되었는지를 반환한다.
|
|
626
|
+
* @return Length of cloned panel groups.<ko>클론된 패널 그룹의 개수</ko>
|
|
627
|
+
*/
|
|
628
|
+
public getCloneCount(): number {
|
|
629
|
+
return this.viewport.panelManager.getCloneCount();
|
|
630
|
+
}
|
|
631
|
+
|
|
632
|
+
/**
|
|
633
|
+
* Get maximum panel index for `infinite` mode.
|
|
634
|
+
* @ko `infinite` 모드에서 적용되는 추가 가능한 패널의 최대 인덱스 값을 반환한다.
|
|
635
|
+
* @see {@link eg.Flicking.FlickingOptions}
|
|
636
|
+
* @return Maximum index of panel that can be added.<ko>최대 추가 가능한 패널의 인덱스.</ko>
|
|
637
|
+
*/
|
|
638
|
+
public getLastIndex(): number {
|
|
639
|
+
return this.viewport.panelManager.getLastIndex();
|
|
640
|
+
}
|
|
641
|
+
|
|
642
|
+
/**
|
|
643
|
+
* Set maximum panel index for `infinite' mode.<br>[needPanel]{@link eg.Flicking#events:needPanel} won't be triggered anymore when last panel's index reaches it.<br>Also, you can't add more panels after it.
|
|
644
|
+
* @ko `infinite` 모드에서 적용되는 패널의 최대 인덱스를 설정한다.<br>마지막 패널의 인덱스가 설정한 값에 도달할 경우 더 이상 [needPanel]{@link eg.Flicking#events:needPanel} 이벤트가 발생되지 않는다.<br>또한, 설정한 인덱스 이후로 새로운 패널을 추가할 수 없다.
|
|
645
|
+
* @param - Maximum panel index.
|
|
646
|
+
* @see {@link eg.Flicking.FlickingOptions}
|
|
647
|
+
* @return {eg.Flicking} The instance itself.<ko>인스턴스 자기 자신.</ko>
|
|
648
|
+
*/
|
|
649
|
+
public setLastIndex(index: number): this {
|
|
650
|
+
this.viewport.setLastIndex(index);
|
|
651
|
+
|
|
652
|
+
return this;
|
|
653
|
+
}
|
|
654
|
+
|
|
655
|
+
/**
|
|
656
|
+
* Return panel movement animation.
|
|
657
|
+
* @ko 현재 패널 이동 애니메이션이 진행 중인지를 반환한다.
|
|
658
|
+
* @return Is animating or not.<ko>애니메이션 진행 여부.</ko>
|
|
659
|
+
*/
|
|
660
|
+
public isPlaying(): boolean {
|
|
661
|
+
return this.viewport.stateMachine.getState().playing;
|
|
662
|
+
}
|
|
663
|
+
|
|
664
|
+
/**
|
|
665
|
+
* Unblock input devices.
|
|
666
|
+
* @ko 막았던 입력 장치로부터의 입력을 푼다.
|
|
667
|
+
* @return {eg.Flicking} The instance itself.<ko>인스턴스 자기 자신.</ko>
|
|
668
|
+
*/
|
|
669
|
+
public enableInput(): this {
|
|
670
|
+
this.viewport.enable();
|
|
671
|
+
|
|
672
|
+
return this;
|
|
673
|
+
}
|
|
674
|
+
|
|
675
|
+
/**
|
|
676
|
+
* Block input devices.
|
|
677
|
+
* @ko 입력 장치로부터의 입력을 막는다.
|
|
678
|
+
* @return {eg.Flicking} The instance itself.<ko>인스턴스 자기 자신.</ko>
|
|
679
|
+
*/
|
|
680
|
+
public disableInput(): this {
|
|
681
|
+
this.viewport.disable();
|
|
682
|
+
|
|
683
|
+
return this;
|
|
684
|
+
}
|
|
685
|
+
|
|
686
|
+
/**
|
|
687
|
+
* Get current flicking status. You can restore current state by giving returned value to [setStatus()]{@link eg.Flicking#setStatus}.
|
|
688
|
+
* @ko 현재 상태 값을 반환한다. 반환받은 값을 [setStatus()]{@link eg.Flicking#setStatus} 메소드의 인자로 지정하면 현재 상태를 복원할 수 있다.
|
|
689
|
+
* @return An object with current status value information.<ko>현재 상태값 정보를 가진 객체.</ko>
|
|
690
|
+
*/
|
|
691
|
+
public getStatus(): FlickingStatus {
|
|
692
|
+
const viewport = this.viewport;
|
|
693
|
+
|
|
694
|
+
const panels = viewport.panelManager.originalPanels()
|
|
695
|
+
.filter(panel => !!panel)
|
|
696
|
+
.map(panel => {
|
|
697
|
+
return {
|
|
698
|
+
html: panel.getElement().outerHTML,
|
|
699
|
+
index: panel.getIndex(),
|
|
700
|
+
position: panel.getPosition(),
|
|
701
|
+
};
|
|
702
|
+
});
|
|
703
|
+
|
|
704
|
+
return {
|
|
705
|
+
index: viewport.getCurrentIndex(),
|
|
706
|
+
panels,
|
|
707
|
+
position: viewport.getCameraPosition(),
|
|
708
|
+
};
|
|
709
|
+
}
|
|
710
|
+
|
|
711
|
+
/**
|
|
712
|
+
* Restore to the state of the `status`.
|
|
713
|
+
* @ko `status`의 상태로 복원한다.
|
|
714
|
+
* @param status Status value to be restored. You can specify the return value of the [getStatus()]{@link eg.Flicking#getStatus} method.<ko>복원할 상태 값. [getStatus()]{@link eg.Flicking#getStatus}메서드의 반환값을 지정하면 된다.</ko>
|
|
715
|
+
*/
|
|
716
|
+
public setStatus(status: FlickingStatus): void {
|
|
717
|
+
this.viewport.restore(status);
|
|
718
|
+
}
|
|
719
|
+
|
|
720
|
+
/**
|
|
721
|
+
* Add plugins that can have different effects on Flicking.
|
|
722
|
+
* @ko 플리킹에 다양한 효과를 부여할 수 있는 플러그인을 추가한다.
|
|
723
|
+
* @param - The plugin(s) to add.<ko>추가할 플러그인(들).</ko>
|
|
724
|
+
* @return {eg.Flicking} The instance itself.<ko>인스턴스 자기 자신.</ko>
|
|
725
|
+
*/
|
|
726
|
+
public addPlugins(plugins: Plugin | Plugin[]) {
|
|
727
|
+
this.viewport.addPlugins(plugins);
|
|
728
|
+
return this;
|
|
729
|
+
}
|
|
730
|
+
|
|
731
|
+
/**
|
|
732
|
+
* Remove plugins from Flicking.
|
|
733
|
+
* @ko 플리킹으로부터 플러그인들을 제거한다.
|
|
734
|
+
* @param - The plugin(s) to remove.<ko>제거 플러그인(들).</ko>
|
|
735
|
+
* @return {eg.Flicking} The instance itself.<ko>인스턴스 자기 자신.</ko>
|
|
736
|
+
*/
|
|
737
|
+
public removePlugins(plugins: Plugin | Plugin[]) {
|
|
738
|
+
this.viewport.removePlugins(plugins);
|
|
739
|
+
return this;
|
|
740
|
+
}
|
|
741
|
+
|
|
742
|
+
/**
|
|
743
|
+
* Return the reference element and all its children to the state they were in before the instance was created. Remove all attached event handlers. Specify `null` for all attributes of the instance (including inherited attributes).
|
|
744
|
+
* @ko 기준 요소와 그 하위 패널들을 인스턴스 생성전의 상태로 되돌린다. 부착된 모든 이벤트 핸들러를 탈거한다. 인스턴스의 모든 속성(상속받은 속성포함)에 `null`을 지정한다.
|
|
745
|
+
* @example
|
|
746
|
+
* const flick = new eg.Flicking("#flick");
|
|
747
|
+
* flick.destroy();
|
|
748
|
+
* console.log(flick.moveTo); // null
|
|
749
|
+
*/
|
|
750
|
+
public destroy(option: Partial<DestroyOption> = {}): void {
|
|
751
|
+
this.off();
|
|
752
|
+
|
|
753
|
+
this.autoResizer.disable();
|
|
754
|
+
this.viewport.destroy(option);
|
|
755
|
+
this.contentsReadyChecker?.destroy();
|
|
756
|
+
|
|
757
|
+
// release resources
|
|
758
|
+
for (const x in this) {
|
|
759
|
+
(this as any)[x] = null;
|
|
760
|
+
}
|
|
761
|
+
}
|
|
762
|
+
|
|
763
|
+
/**
|
|
764
|
+
* Update panels to current state.
|
|
765
|
+
* @ko 패널들을 현재 상태에 맞춰 갱신한다.
|
|
766
|
+
* @method
|
|
767
|
+
* @return {eg.Flicking} The instance itself.<ko>인스턴스 자기 자신.</ko>
|
|
768
|
+
*/
|
|
769
|
+
public resize = (): this => {
|
|
770
|
+
const viewport = this.viewport;
|
|
771
|
+
const options = this.options;
|
|
772
|
+
const wrapper = this.getElement();
|
|
773
|
+
|
|
774
|
+
const allPanels = viewport.panelManager.allPanels();
|
|
775
|
+
if (!options.isConstantSize) {
|
|
776
|
+
allPanels
|
|
777
|
+
.filter(panel => !!panel)
|
|
778
|
+
.forEach(panel => panel.unCacheBbox());
|
|
779
|
+
}
|
|
780
|
+
|
|
781
|
+
const shouldResetElements = options.renderOnlyVisible
|
|
782
|
+
&& !options.isConstantSize
|
|
783
|
+
&& options.isEqualSize !== true;
|
|
784
|
+
|
|
785
|
+
// Temporarily set parent's height to prevent scroll (#333)
|
|
786
|
+
const parent = wrapper.parentElement!;
|
|
787
|
+
const origStyle = parent.style.height;
|
|
788
|
+
parent.style.height = `${parent.offsetHeight}px`;
|
|
789
|
+
|
|
790
|
+
viewport.unCacheBbox();
|
|
791
|
+
// This should be done before adding panels, to lower performance issue
|
|
792
|
+
viewport.updateBbox();
|
|
793
|
+
|
|
794
|
+
if (shouldResetElements) {
|
|
795
|
+
viewport.appendUncachedPanelElements(allPanels as Panel[]);
|
|
796
|
+
}
|
|
797
|
+
|
|
798
|
+
viewport.resize();
|
|
799
|
+
parent.style.height = origStyle;
|
|
800
|
+
|
|
801
|
+
return this;
|
|
802
|
+
}
|
|
803
|
+
|
|
804
|
+
/**
|
|
805
|
+
* Add new panels at the beginning of panels.
|
|
806
|
+
* @ko 제일 앞에 새로운 패널을 추가한다.
|
|
807
|
+
* @param element - Either HTMLElement, HTML string, or array of them.<br>It can be also HTML string of multiple elements with same depth.<ko>HTMLElement 혹은 HTML 문자열, 혹은 그것들의 배열도 가능하다.<br>또한, 같은 depth의 여러 개의 엘리먼트에 해당하는 HTML 문자열도 가능하다.</ko>
|
|
808
|
+
* @return Array of appended panels.<ko>추가된 패널들의 배열</ko>
|
|
809
|
+
* @example
|
|
810
|
+
* // Suppose there were no panels at initialization
|
|
811
|
+
* const flicking = new eg.Flicking("#flick");
|
|
812
|
+
* flicking.replace(3, document.createElement("div")); // Add new panel at index 3
|
|
813
|
+
* flicking.prepend("\<div\>Panel\</div\>"); // Prepended at index 2
|
|
814
|
+
* flicking.prepend(["\<div\>Panel\</div\>", document.createElement("div")]); // Prepended at index 0, 1
|
|
815
|
+
* flicking.prepend("\<div\>Panel\</div\>"); // Prepended at index 0, pushing every panels behind it.
|
|
816
|
+
*/
|
|
817
|
+
public prepend(element: ElementLike | ElementLike[]): FlickingPanel[] {
|
|
818
|
+
const viewport = this.viewport;
|
|
819
|
+
const parsedElements = parseElement(element);
|
|
820
|
+
|
|
821
|
+
const insertingIndex = Math.max(viewport.panelManager.getRange().min - parsedElements.length, 0);
|
|
822
|
+
const prependedPanels = viewport.insert(insertingIndex, parsedElements);
|
|
823
|
+
|
|
824
|
+
this.checkContentsReady(prependedPanels);
|
|
825
|
+
|
|
826
|
+
return prependedPanels;
|
|
827
|
+
}
|
|
828
|
+
|
|
829
|
+
/**
|
|
830
|
+
* Add new panels at the end of panels.
|
|
831
|
+
* @ko 제일 끝에 새로운 패널을 추가한다.
|
|
832
|
+
* @param element - Either HTMLElement, HTML string, or array of them.<br>It can be also HTML string of multiple elements with same depth.<ko>HTMLElement 혹은 HTML 문자열, 혹은 그것들의 배열도 가능하다.<br>또한, 같은 depth의 여러 개의 엘리먼트에 해당하는 HTML 문자열도 가능하다.</ko>
|
|
833
|
+
* @return Array of appended panels.<ko>추가된 패널들의 배열</ko>
|
|
834
|
+
* @example
|
|
835
|
+
* // Suppose there were no panels at initialization
|
|
836
|
+
* const flicking = new eg.Flicking("#flick");
|
|
837
|
+
* flicking.append(document.createElement("div")); // Appended at index 0
|
|
838
|
+
* flicking.append("\<div\>Panel\</div\>"); // Appended at index 1
|
|
839
|
+
* flicking.append(["\<div\>Panel\</div\>", document.createElement("div")]); // Appended at index 2, 3
|
|
840
|
+
* // Even this is possible
|
|
841
|
+
* flicking.append("\<div\>Panel 1\</div\>\<div\>Panel 2\</div\>"); // Appended at index 4, 5
|
|
842
|
+
*/
|
|
843
|
+
public append(element: ElementLike | ElementLike[]): FlickingPanel[] {
|
|
844
|
+
const viewport = this.viewport;
|
|
845
|
+
const appendedPanels = viewport.insert(viewport.panelManager.getRange().max + 1, element);
|
|
846
|
+
|
|
847
|
+
this.checkContentsReady(appendedPanels);
|
|
848
|
+
|
|
849
|
+
return appendedPanels;
|
|
850
|
+
}
|
|
851
|
+
|
|
852
|
+
/**
|
|
853
|
+
* Replace existing panels with new panels from given index. If target index is empty, add new panel at target index.
|
|
854
|
+
* @ko 주어진 인덱스로부터의 패널들을 새로운 패널들로 교체한다. 인덱스에 해당하는 자리가 비어있다면, 새로운 패널을 해당 자리에 집어넣는다.
|
|
855
|
+
* @param index - Start index to replace new panels.<ko>새로운 패널들로 교체할 시작 인덱스</ko>
|
|
856
|
+
* @param element - Either HTMLElement, HTML string, or array of them.<br>It can be also HTML string of multiple elements with same depth.<ko>HTMLElement 혹은 HTML 문자열, 혹은 그것들의 배열도 가능하다.<br>또한, 같은 depth의 여러 개의 엘리먼트에 해당하는 HTML 문자열도 가능하다.</ko>
|
|
857
|
+
* @return Array of created panels by replace.<ko>교체되어 새롭게 추가된 패널들의 배열</ko>
|
|
858
|
+
* @example
|
|
859
|
+
* // Suppose there were no panels at initialization
|
|
860
|
+
* const flicking = new eg.Flicking("#flick");
|
|
861
|
+
*
|
|
862
|
+
* // This will add new panel at index 3,
|
|
863
|
+
* // Index 0, 1, 2 is empty at this moment.
|
|
864
|
+
* // [empty, empty, empty, PANEL]
|
|
865
|
+
* flicking.replace(3, document.createElement("div"));
|
|
866
|
+
*
|
|
867
|
+
* // As index 2 was empty, this will also add new panel at index 2.
|
|
868
|
+
* // [empty, empty, PANEL, PANEL]
|
|
869
|
+
* flicking.replace(2, "\<div\>Panel\</div\>");
|
|
870
|
+
*
|
|
871
|
+
* // Index 3 was not empty, so it will replace previous one.
|
|
872
|
+
* // It will also add new panels at index 4 and 5.
|
|
873
|
+
* // before - [empty, empty, PANEL, PANEL]
|
|
874
|
+
* // after - [empty, empty, PANEL, NEW_PANEL, NEW_PANEL, NEW_PANEL]
|
|
875
|
+
* flicking.replace(3, ["\<div\>Panel\</div\>", "\<div\>Panel\</div\>", "\<div\>Panel\</div\>"])
|
|
876
|
+
*/
|
|
877
|
+
public replace(index: number, element: ElementLike | ElementLike[]): FlickingPanel[] {
|
|
878
|
+
const replacedPanels = this.viewport.replace(index, element);
|
|
879
|
+
|
|
880
|
+
this.checkContentsReady(replacedPanels);
|
|
881
|
+
|
|
882
|
+
return replacedPanels;
|
|
883
|
+
}
|
|
884
|
+
|
|
885
|
+
/**
|
|
886
|
+
* Remove panel at target index. This will decrease index of panels behind it.
|
|
887
|
+
* @ko `index`에 해당하는 자리의 패널을 제거한다. 수행시 `index` 이후의 패널들의 인덱스가 감소된다.
|
|
888
|
+
* @param index - Index of panel to remove.<ko>제거할 패널의 인덱스</ko>
|
|
889
|
+
* @param {number} [deleteCount=1] - Number of panels to remove from index.<ko>`index` 이후로 제거할 패널의 개수.</ko>
|
|
890
|
+
* @return Array of removed panels<ko>제거된 패널들의 배열</ko>
|
|
891
|
+
*/
|
|
892
|
+
public remove(index: number, deleteCount: number = 1): FlickingPanel[] {
|
|
893
|
+
return this.viewport.remove(index, deleteCount);
|
|
894
|
+
}
|
|
895
|
+
|
|
896
|
+
/**
|
|
897
|
+
* Get indexes to render. Should be used with `renderOnlyVisible` option.
|
|
898
|
+
* `beforeSync` should be called before this method for a correct result.
|
|
899
|
+
* @private
|
|
900
|
+
* @ko 렌더링이 필요한 인덱스들을 반환한다. `renderOnlyVisible` 옵션과 함께 사용해야 한다. 정확한 결과를 위해선 `beforeSync`를 이전에 호출해야만 합니다.
|
|
901
|
+
* @param - Info object of how panel infos are changed.<ko>패널 정보들의 변경 정보를 담는 오브젝트.</ko>
|
|
902
|
+
* @return Array of indexes to render.<ko>렌더링할 인덱스의 배열</ko>
|
|
903
|
+
*/
|
|
904
|
+
public getRenderingIndexes(diffResult: DiffResult<any>): number[] {
|
|
905
|
+
const viewport = this.viewport;
|
|
906
|
+
const visiblePanels = viewport.getVisiblePanels();
|
|
907
|
+
const maintained = diffResult.maintained.reduce((values: {[key: number]: number}, [before, after]) => {
|
|
908
|
+
values[after] = before;
|
|
909
|
+
return values;
|
|
910
|
+
}, {});
|
|
911
|
+
|
|
912
|
+
const panelCount = diffResult.list.length;
|
|
913
|
+
const added = diffResult.added;
|
|
914
|
+
const getPanelAbsIndex = (panel: Panel) => {
|
|
915
|
+
return panel.getIndex() + (panel.getCloneIndex() + 1) * panelCount;
|
|
916
|
+
};
|
|
917
|
+
|
|
918
|
+
const visibleIndexes = visiblePanels.map(panel => getPanelAbsIndex(panel))
|
|
919
|
+
.filter(val => maintained[val % panelCount] != null);
|
|
920
|
+
|
|
921
|
+
const renderingPanels = [...visibleIndexes, ...added];
|
|
922
|
+
const allPanels = viewport.panelManager.allPanels();
|
|
923
|
+
|
|
924
|
+
viewport.setVisiblePanels(renderingPanels.map(index => allPanels[index]));
|
|
925
|
+
|
|
926
|
+
return renderingPanels;
|
|
927
|
+
}
|
|
928
|
+
|
|
929
|
+
/**
|
|
930
|
+
* Synchronize info of panels instance with info given by external rendering.
|
|
931
|
+
* @ko 외부 렌더링 방식에 의해 입력받은 패널의 정보와 현재 플리킹이 갖는 패널 정보를 동기화한다.
|
|
932
|
+
* @private
|
|
933
|
+
* @param - Info object of how panel infos are changed.<ko>패널 정보들의 변경 정보를 담는 오브젝트.</ko>
|
|
934
|
+
* @param - Whether called from sync method <ko> sync 메소드로부터 호출됐는지 여부 </ko>
|
|
935
|
+
*/
|
|
936
|
+
public beforeSync(diffInfo: BeforeSyncResult) {
|
|
937
|
+
const { maintained, added, changed, removed } = diffInfo;
|
|
938
|
+
const viewport = this.viewport;
|
|
939
|
+
const panelManager = viewport.panelManager;
|
|
940
|
+
const isCircular = this.options.circular;
|
|
941
|
+
const currentPanel = viewport.getCurrentPanel();
|
|
942
|
+
const cloneCount = panelManager.getCloneCount();
|
|
943
|
+
const prevClonedPanels = panelManager.clonedPanels();
|
|
944
|
+
|
|
945
|
+
// Update visible panels
|
|
946
|
+
const newVisiblePanels = viewport.getVisiblePanels()
|
|
947
|
+
.filter(panel => findIndex(removed, index => {
|
|
948
|
+
return index === panel.getIndex();
|
|
949
|
+
}) < 0);
|
|
950
|
+
viewport.setVisiblePanels(newVisiblePanels);
|
|
951
|
+
|
|
952
|
+
// Did not changed at all
|
|
953
|
+
if (
|
|
954
|
+
added.length <= 0
|
|
955
|
+
&& removed.length <= 0
|
|
956
|
+
&& changed.length <= 0
|
|
957
|
+
&& cloneCount === prevClonedPanels.length
|
|
958
|
+
) {
|
|
959
|
+
return this;
|
|
960
|
+
}
|
|
961
|
+
const prevOriginalPanels = panelManager.originalPanels();
|
|
962
|
+
const newPanels: Panel[] = [];
|
|
963
|
+
const newClones: Panel[][] = counter(cloneCount).map(() => []);
|
|
964
|
+
|
|
965
|
+
maintained.forEach(([beforeIdx, afterIdx]) => {
|
|
966
|
+
newPanels[afterIdx] = prevOriginalPanels[beforeIdx];
|
|
967
|
+
newPanels[afterIdx].setIndex(afterIdx);
|
|
968
|
+
});
|
|
969
|
+
|
|
970
|
+
added.forEach(addIndex => {
|
|
971
|
+
newPanels[addIndex] = new Panel(null, addIndex, this.viewport);
|
|
972
|
+
});
|
|
973
|
+
|
|
974
|
+
if (isCircular) {
|
|
975
|
+
counter(cloneCount).forEach(groupIndex => {
|
|
976
|
+
const prevCloneGroup = prevClonedPanels[groupIndex];
|
|
977
|
+
const newCloneGroup = newClones[groupIndex];
|
|
978
|
+
|
|
979
|
+
maintained.forEach(([beforeIdx, afterIdx]) => {
|
|
980
|
+
newCloneGroup[afterIdx] = prevCloneGroup
|
|
981
|
+
? prevCloneGroup[beforeIdx]
|
|
982
|
+
: newPanels[afterIdx].clone(groupIndex, false);
|
|
983
|
+
|
|
984
|
+
newCloneGroup[afterIdx].setIndex(afterIdx);
|
|
985
|
+
});
|
|
986
|
+
|
|
987
|
+
added.forEach(addIndex => {
|
|
988
|
+
const newPanel = newPanels[addIndex];
|
|
989
|
+
|
|
990
|
+
newCloneGroup[addIndex] = newPanel.clone(groupIndex, false);
|
|
991
|
+
});
|
|
992
|
+
});
|
|
993
|
+
}
|
|
994
|
+
|
|
995
|
+
added.forEach(index => { viewport.updateCheckedIndexes({ min: index, max: index }); });
|
|
996
|
+
removed.forEach(index => { viewport.updateCheckedIndexes({ min: index - 1, max: index + 1 }); });
|
|
997
|
+
|
|
998
|
+
const checkedIndexes = viewport.getCheckedIndexes();
|
|
999
|
+
checkedIndexes.forEach(([min, max], idx) => {
|
|
1000
|
+
// Push checked indexes backward
|
|
1001
|
+
const pushedIndex = added.filter(index => index < min && panelManager.has(index)).length
|
|
1002
|
+
- removed.filter(index => index < min).length;
|
|
1003
|
+
checkedIndexes.splice(idx, 1, [min + pushedIndex, max + pushedIndex]);
|
|
1004
|
+
});
|
|
1005
|
+
|
|
1006
|
+
// Only effective only when there are least one panel which have changed its index
|
|
1007
|
+
if (changed.length > 0) {
|
|
1008
|
+
// Removed checked index by changed ones after pushing
|
|
1009
|
+
maintained.forEach(([, next]) => { viewport.updateCheckedIndexes({ min: next, max: next }); });
|
|
1010
|
+
}
|
|
1011
|
+
panelManager.replacePanels(newPanels, newClones);
|
|
1012
|
+
|
|
1013
|
+
const currentPanelIndex = currentPanel?.getIndex() ?? -1;
|
|
1014
|
+
const currentPanelIsRemoved = findIndex(removed, index => index === currentPanelIndex) >= 0;
|
|
1015
|
+
|
|
1016
|
+
if ((!currentPanel || currentPanelIsRemoved) && newPanels.length > 0) {
|
|
1017
|
+
viewport.setCurrentPanel(newPanels[0]);
|
|
1018
|
+
} else if (newPanels.length <= 0) {
|
|
1019
|
+
viewport.setCurrentPanel(undefined);
|
|
1020
|
+
}
|
|
1021
|
+
|
|
1022
|
+
this.isPanelChangedAtBeforeSync = true;
|
|
1023
|
+
}
|
|
1024
|
+
|
|
1025
|
+
/**
|
|
1026
|
+
* Synchronize info of panels with DOM info given by external rendering.
|
|
1027
|
+
* @ko 외부 렌더링 방식에 의해 입력받은 DOM의 정보와 현재 플리킹이 갖는 패널 정보를 동기화 한다.
|
|
1028
|
+
* @private
|
|
1029
|
+
* @param - Info object of how panel elements are changed.<ko>패널의 DOM 요소들의 변경 정보를 담는 오브젝트.</ko>
|
|
1030
|
+
*/
|
|
1031
|
+
public sync(diffInfo: SyncResult): this {
|
|
1032
|
+
const { list, maintained, added, changed, removed } = diffInfo;
|
|
1033
|
+
|
|
1034
|
+
// Did not changed at all
|
|
1035
|
+
if (added.length <= 0 && removed.length <= 0 && changed.length <= 0) {
|
|
1036
|
+
return this;
|
|
1037
|
+
}
|
|
1038
|
+
const viewport = this.viewport;
|
|
1039
|
+
const { renderOnlyVisible, circular } = this.options;
|
|
1040
|
+
const panelManager = viewport.panelManager;
|
|
1041
|
+
|
|
1042
|
+
if (!renderOnlyVisible) {
|
|
1043
|
+
const indexRange = panelManager.getRange();
|
|
1044
|
+
let beforeDiffInfo: BeforeSyncResult = diffInfo;
|
|
1045
|
+
|
|
1046
|
+
if (circular) {
|
|
1047
|
+
const prevOriginalPanelCount = indexRange.max;
|
|
1048
|
+
const originalPanelCount = (list.length / (panelManager.getCloneCount() + 1)) >> 0;
|
|
1049
|
+
const originalAdded = added.filter(index => index < originalPanelCount);
|
|
1050
|
+
const originalRemoved = removed.filter(index => index <= prevOriginalPanelCount);
|
|
1051
|
+
const originalMaintained = maintained.filter(([beforeIdx]) => beforeIdx <= prevOriginalPanelCount);
|
|
1052
|
+
const originalChanged = changed.filter(([beforeIdx]) => beforeIdx <= prevOriginalPanelCount);
|
|
1053
|
+
|
|
1054
|
+
beforeDiffInfo = {
|
|
1055
|
+
added: originalAdded,
|
|
1056
|
+
maintained: originalMaintained,
|
|
1057
|
+
removed: originalRemoved,
|
|
1058
|
+
changed: originalChanged,
|
|
1059
|
+
};
|
|
1060
|
+
}
|
|
1061
|
+
this.beforeSync(beforeDiffInfo);
|
|
1062
|
+
}
|
|
1063
|
+
|
|
1064
|
+
const visiblePanels = renderOnlyVisible
|
|
1065
|
+
? viewport.getVisiblePanels()
|
|
1066
|
+
: this.getAllPanels(true);
|
|
1067
|
+
|
|
1068
|
+
added.forEach(addedIndex => {
|
|
1069
|
+
const addedElement = list[addedIndex];
|
|
1070
|
+
const beforePanel = visiblePanels[addedIndex] as Panel;
|
|
1071
|
+
|
|
1072
|
+
beforePanel.setElement(addedElement);
|
|
1073
|
+
// As it can be 0
|
|
1074
|
+
beforePanel.unCacheBbox();
|
|
1075
|
+
});
|
|
1076
|
+
if (this.isPanelChangedAtBeforeSync) {
|
|
1077
|
+
// Reset visible panels
|
|
1078
|
+
viewport.setVisiblePanels([]);
|
|
1079
|
+
this.isPanelChangedAtBeforeSync = false;
|
|
1080
|
+
}
|
|
1081
|
+
viewport.resize();
|
|
1082
|
+
|
|
1083
|
+
return this;
|
|
1084
|
+
}
|
|
1085
|
+
|
|
1086
|
+
private listenInput(): void {
|
|
1087
|
+
const flicking = this;
|
|
1088
|
+
const viewport = flicking.viewport;
|
|
1089
|
+
const stateMachine = viewport.stateMachine;
|
|
1090
|
+
|
|
1091
|
+
// Set event context
|
|
1092
|
+
flicking.eventContext = {
|
|
1093
|
+
flicking,
|
|
1094
|
+
viewport: flicking.viewport,
|
|
1095
|
+
transitTo: stateMachine.transitTo,
|
|
1096
|
+
triggerEvent: flicking.triggerEvent,
|
|
1097
|
+
moveCamera: flicking.moveCamera,
|
|
1098
|
+
stopCamera: viewport.stopCamera,
|
|
1099
|
+
};
|
|
1100
|
+
|
|
1101
|
+
const handlers = {};
|
|
1102
|
+
for (const key in AXES_EVENTS) {
|
|
1103
|
+
const eventType = AXES_EVENTS[key];
|
|
1104
|
+
|
|
1105
|
+
handlers[eventType] = (e: any) => stateMachine.fire(eventType, e, flicking.eventContext);
|
|
1106
|
+
}
|
|
1107
|
+
|
|
1108
|
+
// Connect Axes instance with PanInput
|
|
1109
|
+
flicking.viewport.connectAxesHandler(handlers);
|
|
1110
|
+
}
|
|
1111
|
+
|
|
1112
|
+
private listenResize(): void {
|
|
1113
|
+
const options = this.options;
|
|
1114
|
+
|
|
1115
|
+
if (options.autoResize) {
|
|
1116
|
+
this.autoResizer.enable();
|
|
1117
|
+
}
|
|
1118
|
+
|
|
1119
|
+
if (options.resizeOnContentsReady) {
|
|
1120
|
+
const contentsReadyChecker = new ImReady();
|
|
1121
|
+
|
|
1122
|
+
const onContentLoad = () => {
|
|
1123
|
+
this.resize();
|
|
1124
|
+
this.trigger(EVENTS.CONTENT_LOAD, {
|
|
1125
|
+
type: EVENTS.CONTENT_LOAD,
|
|
1126
|
+
});
|
|
1127
|
+
};
|
|
1128
|
+
|
|
1129
|
+
contentsReadyChecker.on("preReady", onContentLoad);
|
|
1130
|
+
contentsReadyChecker.on("readyElement", e => {
|
|
1131
|
+
if (e.hasLoading && e.isPreReadyOver) {
|
|
1132
|
+
onContentLoad();
|
|
1133
|
+
}
|
|
1134
|
+
});
|
|
1135
|
+
contentsReadyChecker.on("error", e => {
|
|
1136
|
+
this.trigger(EVENTS.CONTENT_ERROR, {
|
|
1137
|
+
type: EVENTS.CONTENT_ERROR,
|
|
1138
|
+
element: e.element,
|
|
1139
|
+
});
|
|
1140
|
+
});
|
|
1141
|
+
contentsReadyChecker.check([this.wrapper]);
|
|
1142
|
+
|
|
1143
|
+
this.contentsReadyChecker = contentsReadyChecker;
|
|
1144
|
+
}
|
|
1145
|
+
}
|
|
1146
|
+
|
|
1147
|
+
private triggerEvent = <T extends FlickingEvent>(
|
|
1148
|
+
eventName: ValueOf<Omit<EventType, "VISIBLE_CHANGE">>, // visibleChange event has no common event definition from other events
|
|
1149
|
+
axesEvent: any,
|
|
1150
|
+
isTrusted: boolean,
|
|
1151
|
+
params: Partial<T> = {},
|
|
1152
|
+
): TriggerCallback => {
|
|
1153
|
+
const viewport = this.viewport;
|
|
1154
|
+
|
|
1155
|
+
let canceled: boolean = true;
|
|
1156
|
+
|
|
1157
|
+
// Ignore events before viewport is initialized
|
|
1158
|
+
if (viewport) {
|
|
1159
|
+
const state = viewport.stateMachine.getState();
|
|
1160
|
+
const { prev, next } = viewport.getScrollArea();
|
|
1161
|
+
const pos = viewport.getCameraPosition();
|
|
1162
|
+
let progress = getProgress(pos, [prev, prev, next]);
|
|
1163
|
+
|
|
1164
|
+
if (this.options.circular) {
|
|
1165
|
+
progress %= 1;
|
|
1166
|
+
}
|
|
1167
|
+
canceled = !super.trigger(eventName, merge({
|
|
1168
|
+
type: eventName,
|
|
1169
|
+
index: this.getIndex(),
|
|
1170
|
+
panel: this.getCurrentPanel(),
|
|
1171
|
+
direction: state.direction,
|
|
1172
|
+
holding: state.holding,
|
|
1173
|
+
progress,
|
|
1174
|
+
axesEvent,
|
|
1175
|
+
isTrusted,
|
|
1176
|
+
}, params) as FlickingEvent);
|
|
1177
|
+
}
|
|
1178
|
+
|
|
1179
|
+
return {
|
|
1180
|
+
onSuccess(callback: () => void): TriggerCallback {
|
|
1181
|
+
if (!canceled) {
|
|
1182
|
+
callback();
|
|
1183
|
+
}
|
|
1184
|
+
return this;
|
|
1185
|
+
},
|
|
1186
|
+
onStopped(callback: () => void): TriggerCallback {
|
|
1187
|
+
if (canceled) {
|
|
1188
|
+
callback();
|
|
1189
|
+
}
|
|
1190
|
+
return this;
|
|
1191
|
+
},
|
|
1192
|
+
} as TriggerCallback;
|
|
1193
|
+
}
|
|
1194
|
+
|
|
1195
|
+
// Return result of "move" event triggered
|
|
1196
|
+
private moveCamera = (axesEvent: any): TriggerCallback => {
|
|
1197
|
+
const viewport = this.viewport;
|
|
1198
|
+
const state = viewport.stateMachine.getState();
|
|
1199
|
+
const options = this.options;
|
|
1200
|
+
|
|
1201
|
+
const pos = axesEvent.pos.flick;
|
|
1202
|
+
const previousPosition = viewport.getCameraPosition();
|
|
1203
|
+
|
|
1204
|
+
if (axesEvent.isTrusted && state.holding) {
|
|
1205
|
+
const inputOffset = options.horizontal
|
|
1206
|
+
? axesEvent.inputEvent.offsetX
|
|
1207
|
+
: axesEvent.inputEvent.offsetY;
|
|
1208
|
+
|
|
1209
|
+
const isNextDirection = inputOffset < 0;
|
|
1210
|
+
|
|
1211
|
+
let cameraChange = pos - previousPosition;
|
|
1212
|
+
const looped = isNextDirection === (pos < previousPosition);
|
|
1213
|
+
if (options.circular && looped) {
|
|
1214
|
+
// Reached at max/min range of axes
|
|
1215
|
+
const scrollAreaSize = viewport.getScrollAreaSize();
|
|
1216
|
+
cameraChange = (cameraChange > 0 ? -1 : 1) * (scrollAreaSize - Math.abs(cameraChange));
|
|
1217
|
+
}
|
|
1218
|
+
|
|
1219
|
+
const currentDirection = cameraChange === 0
|
|
1220
|
+
? state.direction
|
|
1221
|
+
: cameraChange > 0
|
|
1222
|
+
? DIRECTION.NEXT
|
|
1223
|
+
: DIRECTION.PREV;
|
|
1224
|
+
|
|
1225
|
+
state.direction = currentDirection;
|
|
1226
|
+
}
|
|
1227
|
+
state.delta += axesEvent.delta.flick;
|
|
1228
|
+
|
|
1229
|
+
viewport.moveCamera(pos, axesEvent);
|
|
1230
|
+
return this.triggerEvent(EVENTS.MOVE, axesEvent, axesEvent.isTrusted)
|
|
1231
|
+
.onStopped(() => {
|
|
1232
|
+
// Undo camera movement
|
|
1233
|
+
viewport.moveCamera(previousPosition, axesEvent);
|
|
1234
|
+
});
|
|
1235
|
+
}
|
|
1236
|
+
|
|
1237
|
+
private checkContentsReady(panels: FlickingPanel[]) {
|
|
1238
|
+
this.contentsReadyChecker?.check(panels.map(panel => panel.getElement()));
|
|
1239
|
+
}
|
|
1240
|
+
}
|
|
1241
|
+
|
|
1242
|
+
export default Flicking;
|
|
1243
|
+
</code></pre>
|
|
1244
|
+
</article>
|
|
1245
|
+
</section>
|
|
1246
|
+
|
|
1247
|
+
|
|
1248
|
+
|
|
1249
|
+
|
|
1250
|
+
|
|
1251
|
+
|
|
1252
|
+
|
|
1253
|
+
<!-- disqus code -->
|
|
1254
|
+
<div id="disqus_thread"></div>
|
|
1255
|
+
<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
|
|
1256
|
+
<a href="//disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>
|
|
1257
|
+
<!-- // disqus code -->
|
|
1258
|
+
|
|
1259
|
+
|
|
1260
|
+
<footer>
|
|
1261
|
+
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 0.3.10</a> on Tue Apr 05 2022 15:59:21 GMT+0900 (Korean Standard Time)
|
|
1262
|
+
</footer>
|
|
1263
|
+
</div>
|
|
1264
|
+
</div>
|
|
1265
|
+
<script>prettyPrint();</script>
|
|
1266
|
+
<script src="scripts/main.js"></script>
|
|
1267
|
+
</body>
|
|
1268
|
+
</html>
|