@egjs/flicking 3.9.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.
- package/declaration/Flicking.d.ts +2 -1
- package/declaration/types.d.ts +4 -0
- package/dist/flicking.esm.js +21 -8
- package/dist/flicking.esm.js.map +1 -1
- package/dist/flicking.js +21 -8
- 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 +21 -8
- 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/package.json +2 -6
- package/src/Flicking.ts +10 -3
- package/src/components/Viewport.ts +9 -4
- package/src/consts.ts +1 -0
- package/src/types.ts +13 -0
- package/doc/eg.Flicking.html +0 -12669
- package/doc/fonts/glyphicons-halflings-regular.eot +0 -0
- package/doc/fonts/glyphicons-halflings-regular.svg +0 -229
- package/doc/fonts/glyphicons-halflings-regular.ttf +0 -0
- package/doc/fonts/glyphicons-halflings-regular.woff +0 -0
- package/doc/global.html +0 -415
- package/doc/img/i.png +0 -0
- package/doc/img/type_white.svg +0 -26
- package/doc/index.html +0 -501
- package/doc/node_modules_@egjs_component_src_Component.ts.html +0 -625
- package/doc/scripts/bootstrap.min.js +0 -7
- package/doc/scripts/jquery.min.js +0 -6
- package/doc/scripts/jquery.min.map +0 -1
- package/doc/scripts/linenumber.js +0 -29
- package/doc/scripts/main.js +0 -101
- package/doc/scripts/prettify/Apache-License-2.0.txt +0 -202
- package/doc/scripts/prettify/lang-css.js +0 -2
- package/doc/scripts/prettify/prettify.js +0 -28
- package/doc/scripts/underscore-min.js +0 -6
- package/doc/scripts/underscore-min.map +0 -1
- package/doc/src_Flicking.ts.html +0 -1259
- package/doc/src_types.ts.html +0 -816
- package/doc/styles/bootstrap.min.css +0 -7
- package/doc/styles/jaguar.css +0 -469
- package/doc/styles/prettify-jsdoc.css +0 -111
- package/doc/styles/prettify-tomorrow.css +0 -136
- package/doc/styles/style.css +0 -13
- package/docs/build/release/3.8.4/dist/flicking.esm.js +0 -5055
- package/docs/build/release/3.8.4/dist/flicking.esm.js.map +0 -1
- package/docs/build/release/3.8.4/dist/flicking.js +0 -5062
- package/docs/build/release/3.8.4/dist/flicking.js.map +0 -1
- package/docs/build/release/3.8.4/dist/flicking.min.js +0 -10
- package/docs/build/release/3.8.4/dist/flicking.min.js.map +0 -1
- package/docs/build/release/3.8.4/dist/flicking.pkgd.js +0 -11391
- package/docs/build/release/3.8.4/dist/flicking.pkgd.js.map +0 -1
- package/docs/build/release/3.8.4/dist/flicking.pkgd.min.js +0 -10
- package/docs/build/release/3.8.4/dist/flicking.pkgd.min.js.map +0 -1
- package/docs/build/release/3.9.0/dist/flicking.esm.js +0 -5124
- package/docs/build/release/3.9.0/dist/flicking.esm.js.map +0 -1
- package/docs/build/release/3.9.0/dist/flicking.js +0 -5131
- package/docs/build/release/3.9.0/dist/flicking.js.map +0 -1
- package/docs/build/release/3.9.0/dist/flicking.min.js +0 -10
- package/docs/build/release/3.9.0/dist/flicking.min.js.map +0 -1
- package/docs/build/release/3.9.0/dist/flicking.pkgd.js +0 -11460
- package/docs/build/release/3.9.0/dist/flicking.pkgd.js.map +0 -1
- package/docs/build/release/3.9.0/dist/flicking.pkgd.min.js +0 -10
- package/docs/build/release/3.9.0/dist/flicking.pkgd.min.js.map +0 -1
|
@@ -1,625 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html>
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="utf-8">
|
|
5
|
-
<title>Source: node_modules/@egjs/component/src/Component.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="node_modules_@egjs_component_src_Component.ts.html">Source: node_modules/@egjs/component/src/Component.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
|
-
function isUndefined(value: any): boolean {
|
|
251
|
-
return typeof value === "undefined";
|
|
252
|
-
}
|
|
253
|
-
|
|
254
|
-
interface DefaultProps<T> {
|
|
255
|
-
eventType: string;
|
|
256
|
-
stop: () => void;
|
|
257
|
-
currentTarget: T;
|
|
258
|
-
}
|
|
259
|
-
type NotFunction = { [k: string]: unknown } & ({ bind?: never } | { call?: never });
|
|
260
|
-
type NoArguments = undefined | null | void | never;
|
|
261
|
-
type EventWithRestParam = ((evt: NotFunction, ...restParam: any[]) => any);
|
|
262
|
-
|
|
263
|
-
/**
|
|
264
|
-
* Types that can be used when attaching new event definition as generic on a class
|
|
265
|
-
* @ko 클래스 타입 등록시 사용가능한 타입
|
|
266
|
-
* @example
|
|
267
|
-
* ```
|
|
268
|
-
* new SomeClass<{
|
|
269
|
-
* // Using it as object
|
|
270
|
-
* evt0: {
|
|
271
|
-
* param0: number;
|
|
272
|
-
* param1: string
|
|
273
|
-
* };
|
|
274
|
-
* // Using it as function with other arguments
|
|
275
|
-
* evt1: (arg0: {
|
|
276
|
-
* param0: number;
|
|
277
|
-
* param1: string
|
|
278
|
-
* }, arg1: string, arg2: boolean) => boolean;
|
|
279
|
-
* }>
|
|
280
|
-
* ```
|
|
281
|
-
*/
|
|
282
|
-
type EventDefinition = NotFunction | NoArguments | EventWithRestParam;
|
|
283
|
-
|
|
284
|
-
type EventMap = Record<string, EventDefinition>;
|
|
285
|
-
type EventKey<T extends EventMap> = string & keyof T;
|
|
286
|
-
type EventHash<T extends EventMap, S> = Partial<{ [K in EventKey<T>]: EventCallback<T, K, S> }>;
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
type EventCallbackFirstParam<P, S> = P extends NoArguments ? DefaultProps<S> : P & DefaultProps<S>;
|
|
290
|
-
type EventCallbackFunction<T extends (...params: any[]) => any, S>
|
|
291
|
-
= T extends (firstParam?: infer F, ...restParams: infer R) => any
|
|
292
|
-
? (firstParam: EventCallbackFirstParam<Required<F>, S>, ...restParams: R) => any
|
|
293
|
-
: (firstParam: DefaultProps<S>) => any;
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
// In the on and once methods, the defaultProps must be included in the first parameter.
|
|
297
|
-
type EventCallback<T extends EventMap, K extends EventKey<T>, S>
|
|
298
|
-
= T[K] extends (...params: any[]) => any
|
|
299
|
-
? EventCallbackFunction<T[K], S>
|
|
300
|
-
: (event: EventCallbackFirstParam<T[K], S>) => any;
|
|
301
|
-
|
|
302
|
-
type EventTriggerFirstParam<T extends {}> = Pick<T, Exclude<keyof T, keyof DefaultProps<any>>> & Partial<DefaultProps<any>>;
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
type EventDiff<T, U> = T extends U ? never : T;
|
|
306
|
-
type EventTriggerPartialFunction<T extends (...params: any[]) => any>
|
|
307
|
-
= T extends (firstParam: infer F, ...restParam: infer R) => any
|
|
308
|
-
? (firstParam?: EventTriggerFirstParam<EventDiff<F, undefined>>, ...restParams: R) => any
|
|
309
|
-
: never;
|
|
310
|
-
|
|
311
|
-
type EventTriggerRequiredFunction<T extends (...params: any[]) => any>
|
|
312
|
-
= T extends (firstParam: infer F, ...restParam: infer R) => any
|
|
313
|
-
? (firstParam: EventTriggerFirstParam<F>, ...restParams: R) => any
|
|
314
|
-
: never;
|
|
315
|
-
type EventTriggerFunction<T extends (...params: any[]) => any>
|
|
316
|
-
= Parameters<T> extends Required<Parameters<T>> & [any]
|
|
317
|
-
? EventTriggerRequiredFunction<T>
|
|
318
|
-
: EventTriggerPartialFunction<T>
|
|
319
|
-
|
|
320
|
-
type EventTriggerNoFunction<T>
|
|
321
|
-
= T extends NoArguments
|
|
322
|
-
? (firstParam?: { [key: string]: never }) => any
|
|
323
|
-
: EventTriggerFunction<(fisrtParam: EventTriggerFirstParam<T>) => any>;
|
|
324
|
-
|
|
325
|
-
// You don't need to include defaultProps in the trigger method's first parameter.
|
|
326
|
-
type EventTriggerParams<T extends EventMap, K extends EventKey<T>>
|
|
327
|
-
= Parameters<T[K] extends (...params: any[]) => any
|
|
328
|
-
? EventTriggerFunction<T[K]>
|
|
329
|
-
: EventTriggerNoFunction<T[K]>>;
|
|
330
|
-
|
|
331
|
-
interface DefaultEventMap {
|
|
332
|
-
[key: string]: (firstParam?: { [key: string]: any }, ...restParams: any[]) => any;
|
|
333
|
-
}
|
|
334
|
-
|
|
335
|
-
/**
|
|
336
|
-
* A class used to manage events in a component
|
|
337
|
-
* @ko 컴포넌트의 이벤트을 관리할 수 있게 하는 클래스
|
|
338
|
-
* @alias eg.Component
|
|
339
|
-
*/
|
|
340
|
-
class Component<T extends EventMap = DefaultEventMap> {
|
|
341
|
-
/**
|
|
342
|
-
* Version info string
|
|
343
|
-
* @ko 버전정보 문자열
|
|
344
|
-
* @name VERSION
|
|
345
|
-
* @static
|
|
346
|
-
* @example
|
|
347
|
-
* eg.Component.VERSION; // ex) 2.0.0
|
|
348
|
-
* @memberof eg.Component
|
|
349
|
-
*/
|
|
350
|
-
public static VERSION: string = "#__VERSION__#";
|
|
351
|
-
|
|
352
|
-
/**
|
|
353
|
-
* @deprecated
|
|
354
|
-
* @private
|
|
355
|
-
*/
|
|
356
|
-
public options: { [key: string]: any } = {};
|
|
357
|
-
private _eventHandler: { [keys: string]: EventCallback<T, EventKey<T>, Component<T>>[] };
|
|
358
|
-
|
|
359
|
-
/**
|
|
360
|
-
* @support {"ie": "7+", "ch" : "latest", "ff" : "latest", "sf" : "latest", "edge" : "latest", "ios" : "7+", "an" : "2.1+ (except 3.x)"}
|
|
361
|
-
*/
|
|
362
|
-
constructor() {
|
|
363
|
-
this._eventHandler = {};
|
|
364
|
-
}
|
|
365
|
-
|
|
366
|
-
public trigger<K extends EventKey<T>>(eventName: K, ...params: EventTriggerParams<T, K>): boolean;
|
|
367
|
-
/**
|
|
368
|
-
* Triggers a custom event.
|
|
369
|
-
* @ko 커스텀 이벤트를 발생시킨다
|
|
370
|
-
* @param {string} eventName The name of the custom event to be triggered <ko>발생할 커스텀 이벤트의 이름</ko>
|
|
371
|
-
* @param {object} customEvent Event data to be sent when triggering a custom event <ko>커스텀 이벤트가 발생할 때 전달할 데이터</ko>
|
|
372
|
-
* @param {any[]} restParam Additional parameters when triggering a custom event <ko>커스텀 이벤트가 발생할 때 필요시 추가적으로 전달할 데이터</ko>
|
|
373
|
-
* @return Indicates whether the event has occurred. If the stop() method is called by a custom event handler, it will return false and prevent the event from occurring. <a href="https://github.com/naver/egjs-component/wiki/How-to-make-Component-event-design%3F">Ref</a> <ko>이벤트 발생 여부. 커스텀 이벤트 핸들러에서 stop() 메서드를 호출하면 'false'를 반환하고 이벤트 발생을 중단한다. <a href="https://github.com/naver/egjs-component/wiki/How-to-make-Component-event-design%3F">참고</a></ko>
|
|
374
|
-
* @example
|
|
375
|
-
* ```
|
|
376
|
-
* class Some extends eg.Component {
|
|
377
|
-
* some(){
|
|
378
|
-
* if(this.trigger("beforeHi")){ // When event call to stop return false.
|
|
379
|
-
* this.trigger("hi");// fire hi event.
|
|
380
|
-
* }
|
|
381
|
-
* }
|
|
382
|
-
* }
|
|
383
|
-
*
|
|
384
|
-
* const some = new Some();
|
|
385
|
-
* some.on("beforeHi", (e) => {
|
|
386
|
-
* if(condition){
|
|
387
|
-
* e.stop(); // When event call to stop, `hi` event not call.
|
|
388
|
-
* }
|
|
389
|
-
* });
|
|
390
|
-
* some.on("hi", (e) => {
|
|
391
|
-
* // `currentTarget` is component instance.
|
|
392
|
-
* console.log(some === e.currentTarget); // true
|
|
393
|
-
* });
|
|
394
|
-
* // If you want to more know event design. You can see article.
|
|
395
|
-
* // https://github.com/naver/egjs-component/wiki/How-to-make-Component-event-design%3F
|
|
396
|
-
* ```
|
|
397
|
-
*/
|
|
398
|
-
public trigger<K extends EventKey<T>>(eventName: K, ...params: any[]): boolean {
|
|
399
|
-
let handlerList = this._eventHandler[eventName] || [];
|
|
400
|
-
const hasHandlerList = handlerList.length > 0;
|
|
401
|
-
|
|
402
|
-
if (!hasHandlerList) {
|
|
403
|
-
return true;
|
|
404
|
-
}
|
|
405
|
-
const customEvent = params[0] || {};
|
|
406
|
-
const restParams = params.slice(1);
|
|
407
|
-
|
|
408
|
-
// If detach method call in handler in first time then handler list calls.
|
|
409
|
-
handlerList = handlerList.concat();
|
|
410
|
-
|
|
411
|
-
let isCanceled = false;
|
|
412
|
-
|
|
413
|
-
// This should be done like this to pass previous tests
|
|
414
|
-
(customEvent as any).eventType = eventName;
|
|
415
|
-
(customEvent as any).stop = () => { isCanceled = true; };
|
|
416
|
-
(customEvent as any).currentTarget = this;
|
|
417
|
-
|
|
418
|
-
let arg: any[] = [customEvent];
|
|
419
|
-
|
|
420
|
-
if (restParams.length >= 1) {
|
|
421
|
-
arg = arg.concat(restParams);
|
|
422
|
-
}
|
|
423
|
-
|
|
424
|
-
handlerList.forEach(handler => {
|
|
425
|
-
handler.apply(this, arg);
|
|
426
|
-
});
|
|
427
|
-
|
|
428
|
-
return !isCanceled;
|
|
429
|
-
}
|
|
430
|
-
|
|
431
|
-
public once<K extends EventKey<T>>(eventName: K, handlerToAttach: EventCallback<T, K, this>): this;
|
|
432
|
-
public once(eventHash: EventHash<T, this>): this;
|
|
433
|
-
/**
|
|
434
|
-
* Executed event just one time.
|
|
435
|
-
* @ko 이벤트가 한번만 실행된다.
|
|
436
|
-
* @param {string} eventName The name of the event to be attached <ko>등록할 이벤트의 이름</ko>
|
|
437
|
-
* @param {function} handlerToAttach The handler function of the event to be attached <ko>등록할 이벤트의 핸들러 함수</ko>
|
|
438
|
-
* @return An instance of a component itself<ko>컴포넌트 자신의 인스턴스</ko>
|
|
439
|
-
* @example
|
|
440
|
-
* ```
|
|
441
|
-
* class Some extends eg.Component {
|
|
442
|
-
* hi() {
|
|
443
|
-
* alert("hi");
|
|
444
|
-
* }
|
|
445
|
-
* thing() {
|
|
446
|
-
* this.once("hi", this.hi);
|
|
447
|
-
* }
|
|
448
|
-
*
|
|
449
|
-
* var some = new Some();
|
|
450
|
-
* some.thing();
|
|
451
|
-
* some.trigger("hi");
|
|
452
|
-
* // fire alert("hi");
|
|
453
|
-
* some.trigger("hi");
|
|
454
|
-
* // Nothing happens
|
|
455
|
-
* ```
|
|
456
|
-
*/
|
|
457
|
-
public once<K extends EventKey<T>>(eventName: K | EventHash<T, this>, handlerToAttach?: EventCallback<T, K, this>): this {
|
|
458
|
-
if (typeof eventName === "object" && isUndefined(handlerToAttach)) {
|
|
459
|
-
const eventHash = eventName;
|
|
460
|
-
|
|
461
|
-
for (const key in eventHash) {
|
|
462
|
-
this.once((key as K), eventHash[key] as EventCallback<T, K, this>);
|
|
463
|
-
}
|
|
464
|
-
return this;
|
|
465
|
-
} else if (typeof eventName === "string" && typeof handlerToAttach === "function") {
|
|
466
|
-
const listener: any = (...args: any[]) => {
|
|
467
|
-
handlerToAttach.apply(this, args);
|
|
468
|
-
this.off(eventName, listener);
|
|
469
|
-
}
|
|
470
|
-
|
|
471
|
-
this.on(eventName, listener);
|
|
472
|
-
}
|
|
473
|
-
|
|
474
|
-
return this;
|
|
475
|
-
}
|
|
476
|
-
|
|
477
|
-
/**
|
|
478
|
-
* Checks whether an event has been attached to a component.
|
|
479
|
-
* @ko 컴포넌트에 이벤트가 등록됐는지 확인한다.
|
|
480
|
-
* @param {string} eventName The name of the event to be attached <ko>등록 여부를 확인할 이벤트의 이름</ko>
|
|
481
|
-
* @return {boolean} Indicates whether the event is attached. <ko>이벤트 등록 여부</ko>
|
|
482
|
-
* @example
|
|
483
|
-
* ```
|
|
484
|
-
* class Some extends eg.Component {
|
|
485
|
-
* some() {
|
|
486
|
-
* this.hasOn("hi");// check hi event.
|
|
487
|
-
* }
|
|
488
|
-
* }
|
|
489
|
-
* ```
|
|
490
|
-
*/
|
|
491
|
-
public hasOn<K extends EventKey<T>>(eventName: K): boolean {
|
|
492
|
-
return !!this._eventHandler[eventName];
|
|
493
|
-
}
|
|
494
|
-
|
|
495
|
-
public on<K extends EventKey<T>>(eventName: K, handlerToAttach: EventCallback<T, K, this>): this;
|
|
496
|
-
public on(eventHash: EventHash<T, this>): this;
|
|
497
|
-
/**
|
|
498
|
-
* Attaches an event to a component.
|
|
499
|
-
* @ko 컴포넌트에 이벤트를 등록한다.
|
|
500
|
-
* @param {string} eventName The name of the event to be attached <ko>등록할 이벤트의 이름</ko>
|
|
501
|
-
* @param {function} handlerToAttach The handler function of the event to be attached <ko>등록할 이벤트의 핸들러 함수</ko>
|
|
502
|
-
* @return An instance of a component itself<ko>컴포넌트 자신의 인스턴스</ko>
|
|
503
|
-
* @example
|
|
504
|
-
* ```
|
|
505
|
-
* class Some extends eg.Component {
|
|
506
|
-
* hi() {
|
|
507
|
-
* console.log("hi");
|
|
508
|
-
* }
|
|
509
|
-
* some() {
|
|
510
|
-
* this.on("hi",this.hi); //attach event
|
|
511
|
-
* }
|
|
512
|
-
* }
|
|
513
|
-
* ```
|
|
514
|
-
*/
|
|
515
|
-
public on<K extends EventKey<T>>(eventName: K | EventHash<T, this>, handlerToAttach?: EventCallback<T, K, this>): this {
|
|
516
|
-
if (typeof eventName === "object" && isUndefined(handlerToAttach)) {
|
|
517
|
-
const eventHash = eventName;
|
|
518
|
-
|
|
519
|
-
for (const name in eventHash) {
|
|
520
|
-
this.on(name, eventHash[name] as any);
|
|
521
|
-
}
|
|
522
|
-
|
|
523
|
-
return this;
|
|
524
|
-
} else if (typeof eventName === "string" &&
|
|
525
|
-
typeof handlerToAttach === "function") {
|
|
526
|
-
let handlerList = this._eventHandler[eventName];
|
|
527
|
-
|
|
528
|
-
if (isUndefined(handlerList)) {
|
|
529
|
-
this._eventHandler[eventName] = [];
|
|
530
|
-
handlerList = this._eventHandler[eventName];
|
|
531
|
-
}
|
|
532
|
-
|
|
533
|
-
handlerList.push(handlerToAttach as EventCallback<T, EventKey<T>, this>);
|
|
534
|
-
}
|
|
535
|
-
|
|
536
|
-
return this;
|
|
537
|
-
}
|
|
538
|
-
|
|
539
|
-
public off(eventHash?: EventHash<T, this>): this;
|
|
540
|
-
public off<K extends EventKey<T>>(eventName: K, handlerToDetach?: EventCallback<T, K, this>): this;
|
|
541
|
-
/**
|
|
542
|
-
* Detaches an event from the component.
|
|
543
|
-
* @ko 컴포넌트에 등록된 이벤트를 해제한다
|
|
544
|
-
* @param {string} eventName The name of the event to be detached <ko>해제할 이벤트의 이름</ko>
|
|
545
|
-
* @param {function} handlerToDetach The handler function of the event to be detached <ko>해제할 이벤트의 핸들러 함수</ko>
|
|
546
|
-
* @return An instance of a component itself <ko>컴포넌트 자신의 인스턴스</ko>
|
|
547
|
-
* @example
|
|
548
|
-
* ```
|
|
549
|
-
* class Some extends eg.Component {
|
|
550
|
-
* hi() {
|
|
551
|
-
* console.log("hi");
|
|
552
|
-
* }
|
|
553
|
-
* some() {
|
|
554
|
-
* this.off("hi",this.hi); //detach event
|
|
555
|
-
* }
|
|
556
|
-
* }
|
|
557
|
-
* ```
|
|
558
|
-
*/
|
|
559
|
-
public off<K extends EventKey<T>>(eventName?: K | EventHash<T, this>, handlerToDetach?: EventCallback<T, K, this>): this {
|
|
560
|
-
// Detach all event handlers.
|
|
561
|
-
if (isUndefined(eventName)) {
|
|
562
|
-
this._eventHandler = {};
|
|
563
|
-
return this;
|
|
564
|
-
}
|
|
565
|
-
|
|
566
|
-
// Detach all handlers for eventname or detach event handlers by object.
|
|
567
|
-
if (isUndefined(handlerToDetach)) {
|
|
568
|
-
if (typeof eventName === "string") {
|
|
569
|
-
delete this._eventHandler[eventName];
|
|
570
|
-
return this;
|
|
571
|
-
} else {
|
|
572
|
-
const eventHash = eventName;
|
|
573
|
-
|
|
574
|
-
for (const name in eventHash) {
|
|
575
|
-
this.off(name, eventHash[name] as any);
|
|
576
|
-
}
|
|
577
|
-
return this;
|
|
578
|
-
}
|
|
579
|
-
}
|
|
580
|
-
|
|
581
|
-
// Detach single event handler
|
|
582
|
-
const handlerList = this._eventHandler[eventName as K];
|
|
583
|
-
|
|
584
|
-
if (handlerList) {
|
|
585
|
-
let idx = 0;
|
|
586
|
-
for (const handlerFunction of handlerList) {
|
|
587
|
-
if (handlerFunction === handlerToDetach) {
|
|
588
|
-
handlerList.splice(idx, 1);
|
|
589
|
-
break;
|
|
590
|
-
}
|
|
591
|
-
idx++;
|
|
592
|
-
}
|
|
593
|
-
}
|
|
594
|
-
|
|
595
|
-
return this;
|
|
596
|
-
}
|
|
597
|
-
}
|
|
598
|
-
|
|
599
|
-
export default Component;
|
|
600
|
-
</code></pre>
|
|
601
|
-
</article>
|
|
602
|
-
</section>
|
|
603
|
-
|
|
604
|
-
|
|
605
|
-
|
|
606
|
-
|
|
607
|
-
|
|
608
|
-
|
|
609
|
-
|
|
610
|
-
<!-- disqus code -->
|
|
611
|
-
<div id="disqus_thread"></div>
|
|
612
|
-
<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
|
|
613
|
-
<a href="//disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>
|
|
614
|
-
<!-- // disqus code -->
|
|
615
|
-
|
|
616
|
-
|
|
617
|
-
<footer>
|
|
618
|
-
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 0.3.10</a> on Tue Nov 23 2021 17:00:49 GMT+0900 (Korean Standard Time)
|
|
619
|
-
</footer>
|
|
620
|
-
</div>
|
|
621
|
-
</div>
|
|
622
|
-
<script>prettyPrint();</script>
|
|
623
|
-
<script src="scripts/main.js"></script>
|
|
624
|
-
</body>
|
|
625
|
-
</html>
|