UNPKG

14.1 kBJavaScriptView Raw
1/*
2Copyright (c) NAVER Corp.
3name: @egjs/component
4license: MIT
5author: NAVER Corp.
6repository: https://github.com/naver/egjs-component
7version: 3.0.1
8*/
9/*! *****************************************************************************
10Copyright (c) Microsoft Corporation.
11
12Permission to use, copy, modify, and/or distribute this software for any
13purpose with or without fee is hereby granted.
14
15THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
16REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
17AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
18INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
19LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
20OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
21PERFORMANCE OF THIS SOFTWARE.
22***************************************************************************** */
23function __values(o) {
24 var s = typeof Symbol === "function" && Symbol.iterator,
25 m = s && o[s],
26 i = 0;
27 if (m) return m.call(o);
28 if (o && typeof o.length === "number") return {
29 next: function () {
30 if (o && i >= o.length) o = void 0;
31 return {
32 value: o && o[i++],
33 done: !o
34 };
35 }
36 };
37 throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
38}
39function __read(o, n) {
40 var m = typeof Symbol === "function" && o[Symbol.iterator];
41 if (!m) return o;
42 var i = m.call(o),
43 r,
44 ar = [],
45 e;
46
47 try {
48 while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
49 } catch (error) {
50 e = {
51 error: error
52 };
53 } finally {
54 try {
55 if (r && !r.done && (m = i["return"])) m.call(i);
56 } finally {
57 if (e) throw e.error;
58 }
59 }
60
61 return ar;
62}
63function __spread() {
64 for (var ar = [], i = 0; i < arguments.length; i++) ar = ar.concat(__read(arguments[i]));
65
66 return ar;
67}
68
69/*
70 * Copyright (c) 2015 NAVER Corp.
71 * egjs projects are licensed under the MIT license
72 */
73var isUndefined = function (value) {
74 return typeof value === "undefined";
75};
76
77/**
78 * Event class to provide additional properties
79 * @ko Component에서 추가적인 프로퍼티를 제공하는 이벤트 클래스
80 */
81
82var ComponentEvent =
83/*#__PURE__*/
84function () {
85 /**
86 * Create a new instance of ComponentEvent.
87 * @ko ComponentEvent의 새로운 인스턴스를 생성한다.
88 * @param eventType The name of the event.<ko>이벤트 이름.</ko>
89 * @param props An object that contains additional event properties.<ko>추가적인 이벤트 프로퍼티 오브젝트.</ko>
90 */
91 function ComponentEvent(eventType, props) {
92 var e_1, _a;
93
94 this.eventType = eventType;
95 this._canceled = false;
96 if (!props) return;
97
98 try {
99 for (var _b = __values(Object.keys(props)), _c = _b.next(); !_c.done; _c = _b.next()) {
100 var key = _c.value; // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
101
102 this[key] = props[key];
103 }
104 } catch (e_1_1) {
105 e_1 = {
106 error: e_1_1
107 };
108 } finally {
109 try {
110 if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
111 } finally {
112 if (e_1) throw e_1.error;
113 }
114 }
115 }
116 /**
117 * Stop the event. {@link ComponentEvent#isCanceled} will return `true` after.
118 * @ko 이벤트를 중단한다. 이후 {@link ComponentEvent#isCanceled}가 `true`를 반환한다.
119 */
120
121
122 var __proto = ComponentEvent.prototype;
123
124 __proto.stop = function () {
125 this._canceled = true;
126 };
127 /**
128 * Returns a boolean value that indicates whether {@link ComponentEvent#stop} is called before.
129 * @ko {@link ComponentEvent#stop}이 호출되었는지 여부를 반환한다.
130 * @return {boolean} A boolean value that indicates whether {@link ComponentEvent#stop} is called before.<ko>이전에 {@link ComponentEvent#stop}이 불려졌는지 여부를 반환한다.</ko>
131 */
132
133
134 __proto.isCanceled = function () {
135 return this._canceled;
136 };
137
138 return ComponentEvent;
139}();
140
141/**
142 * A class used to manage events in a component
143 * @ko 컴포넌트의 이벤트을 관리할 수 있게 하는 클래스
144 */
145
146var Component =
147/*#__PURE__*/
148function () {
149 /**
150 * @support {"ie": "7+", "ch" : "latest", "ff" : "latest", "sf" : "latest", "edge" : "latest", "ios" : "7+", "an" : "2.1+ (except 3.x)"}
151 */
152 function Component() {
153 this._eventHandler = {};
154 }
155 /**
156 * Trigger a custom event.
157 * @ko 커스텀 이벤트를 발생시킨다
158 * @param {string | ComponentEvent} event The name of the custom event to be triggered or an instance of the ComponentEvent<ko>발생할 커스텀 이벤트의 이름 또는 ComponentEvent의 인스턴스</ko>
159 * @param {any[]} params Event data to be sent when triggering a custom event <ko>커스텀 이벤트가 발생할 때 전달할 데이터</ko>
160 * @return An instance of the component itself<ko>컴포넌트 자신의 인스턴스</ko>
161 * @example
162 * ```ts
163 * import Component, { ComponentEvent } from "@egjs/component";
164 *
165 * class Some extends Component<{
166 * beforeHi: ComponentEvent<{ foo: number; bar: string }>;
167 * hi: { foo: { a: number; b: boolean } };
168 * someEvent: (foo: number, bar: string) => void;
169 * someOtherEvent: void; // When there's no event argument
170 * }> {
171 * some(){
172 * if(this.trigger("beforeHi")){ // When event call to stop return false.
173 * this.trigger("hi");// fire hi event.
174 * }
175 * }
176 * }
177 *
178 * const some = new Some();
179 * some.on("beforeHi", e => {
180 * if(condition){
181 * e.stop(); // When event call to stop, `hi` event not call.
182 * }
183 * // `currentTarget` is component instance.
184 * console.log(some === e.currentTarget); // true
185 *
186 * typeof e.foo; // number
187 * typeof e.bar; // string
188 * });
189 * some.on("hi", e => {
190 * typeof e.foo.b; // boolean
191 * });
192 * // If you want to more know event design. You can see article.
193 * // https://github.com/naver/egjs-component/wiki/How-to-make-Component-event-design%3F
194 * ```
195 */
196
197
198 var __proto = Component.prototype;
199
200 __proto.trigger = function (event) {
201 var params = [];
202
203 for (var _i = 1; _i < arguments.length; _i++) {
204 params[_i - 1] = arguments[_i];
205 }
206
207 var eventName = event instanceof ComponentEvent ? event.eventType : event;
208
209 var handlers = __spread(this._eventHandler[eventName] || []);
210
211 if (handlers.length <= 0) {
212 return this;
213 }
214
215 if (event instanceof ComponentEvent) {
216 event.currentTarget = this;
217 handlers.forEach(function (handler) {
218 handler(event);
219 });
220 } else {
221 handlers.forEach(function (handler) {
222 // eslint-disable-next-line @typescript-eslint/no-unsafe-call
223 handler.apply(void 0, __spread(params));
224 });
225 }
226
227 return this;
228 };
229 /**
230 * Executed event just one time.
231 * @ko 이벤트가 한번만 실행된다.
232 * @param {string} eventName The name of the event to be attached or an event name - event handler mapped object.<ko>등록할 이벤트의 이름 또는 이벤트 이름-핸들러 오브젝트</ko>
233 * @param {function} handlerToAttach The handler function of the event to be attached <ko>등록할 이벤트의 핸들러 함수</ko>
234 * @return An instance of the component itself<ko>컴포넌트 자신의 인스턴스</ko>
235 * @example
236 * ```ts
237 * import Component, { ComponentEvent } from "@egjs/component";
238 *
239 * class Some extends Component<{
240 * hi: ComponentEvent;
241 * }> {
242 * hi() {
243 * alert("hi");
244 * }
245 * thing() {
246 * this.once("hi", this.hi);
247 * }
248 * }
249 *
250 * var some = new Some();
251 * some.thing();
252 * some.trigger(new ComponentEvent("hi"));
253 * // fire alert("hi");
254 * some.trigger(new ComponentEvent("hi"));
255 * // Nothing happens
256 * ```
257 */
258
259
260 __proto.once = function (eventName, handlerToAttach) {
261 var _this = this;
262
263 if (typeof eventName === "object" && isUndefined(handlerToAttach)) {
264 var eventHash = eventName;
265
266 for (var key in eventHash) {
267 this.once(key, eventHash[key]);
268 }
269
270 return this;
271 } else if (typeof eventName === "string" && typeof handlerToAttach === "function") {
272 var listener_1 = function () {
273 var args = [];
274
275 for (var _i = 0; _i < arguments.length; _i++) {
276 args[_i] = arguments[_i];
277 } // eslint-disable-next-line @typescript-eslint/no-unsafe-call
278
279
280 handlerToAttach.apply(void 0, __spread(args));
281
282 _this.off(eventName, listener_1);
283 };
284
285 this.on(eventName, listener_1);
286 }
287
288 return this;
289 };
290 /**
291 * Checks whether an event has been attached to a component.
292 * @ko 컴포넌트에 이벤트가 등록됐는지 확인한다.
293 * @param {string} eventName The name of the event to be attached <ko>등록 여부를 확인할 이벤트의 이름</ko>
294 * @return {boolean} Indicates whether the event is attached. <ko>이벤트 등록 여부</ko>
295 * @example
296 * ```ts
297 * import Component from "@egjs/component";
298 *
299 * class Some extends Component<{
300 * hi: void;
301 * }> {
302 * some() {
303 * this.hasOn("hi");// check hi event.
304 * }
305 * }
306 * ```
307 */
308
309
310 __proto.hasOn = function (eventName) {
311 return !!this._eventHandler[eventName];
312 };
313 /**
314 * Attaches an event to a component.
315 * @ko 컴포넌트에 이벤트를 등록한다.
316 * @param {string} eventName The name of the event to be attached or an event name - event handler mapped object.<ko>등록할 이벤트의 이름 또는 이벤트 이름-핸들러 오브젝트</ko>
317 * @param {function} handlerToAttach The handler function of the event to be attached <ko>등록할 이벤트의 핸들러 함수</ko>
318 * @return An instance of a component itself<ko>컴포넌트 자신의 인스턴스</ko>
319 * @example
320 * ```ts
321 * import Component, { ComponentEvent } from "@egjs/component";
322 *
323 * class Some extends Component<{
324 * hi: void;
325 * }> {
326 * hi() {
327 * console.log("hi");
328 * }
329 * some() {
330 * this.on("hi",this.hi); //attach event
331 * }
332 * }
333 * ```
334 */
335
336
337 __proto.on = function (eventName, handlerToAttach) {
338 if (typeof eventName === "object" && isUndefined(handlerToAttach)) {
339 var eventHash = eventName;
340
341 for (var name in eventHash) {
342 this.on(name, eventHash[name]);
343 }
344
345 return this;
346 } else if (typeof eventName === "string" && typeof handlerToAttach === "function") {
347 var handlerList = this._eventHandler[eventName];
348
349 if (isUndefined(handlerList)) {
350 this._eventHandler[eventName] = [];
351 handlerList = this._eventHandler[eventName];
352 }
353
354 handlerList.push(handlerToAttach);
355 }
356
357 return this;
358 };
359 /**
360 * Detaches an event from the component.<br/>If the `eventName` is not given this will detach all event handlers attached.<br/>If the `handlerToDetach` is not given, this will detach all event handlers for `eventName`.
361 * @ko 컴포넌트에 등록된 이벤트를 해제한다.<br/>`eventName`이 주어지지 않았을 경우 모든 이벤트 핸들러를 제거한다.<br/>`handlerToAttach`가 주어지지 않았을 경우 `eventName`에 해당하는 모든 이벤트 핸들러를 제거한다.
362 * @param {string?} eventName The name of the event to be detached <ko>해제할 이벤트의 이름</ko>
363 * @param {function?} handlerToDetach The handler function of the event to be detached <ko>해제할 이벤트의 핸들러 함수</ko>
364 * @return An instance of a component itself <ko>컴포넌트 자신의 인스턴스</ko>
365 * @example
366 * ```ts
367 * import Component, { ComponentEvent } from "@egjs/component";
368 *
369 * class Some extends Component<{
370 * hi: void;
371 * }> {
372 * hi() {
373 * console.log("hi");
374 * }
375 * some() {
376 * this.off("hi",this.hi); //detach event
377 * }
378 * }
379 * ```
380 */
381
382
383 __proto.off = function (eventName, handlerToDetach) {
384 var e_1, _a; // Detach all event handlers.
385
386
387 if (isUndefined(eventName)) {
388 this._eventHandler = {};
389 return this;
390 } // Detach all handlers for eventname or detach event handlers by object.
391
392
393 if (isUndefined(handlerToDetach)) {
394 if (typeof eventName === "string") {
395 delete this._eventHandler[eventName];
396 return this;
397 } else {
398 var eventHash = eventName;
399
400 for (var name in eventHash) {
401 this.off(name, eventHash[name]);
402 }
403
404 return this;
405 }
406 } // Detach single event handler
407
408
409 var handlerList = this._eventHandler[eventName];
410
411 if (handlerList) {
412 var idx = 0;
413
414 try {
415 for (var handlerList_1 = __values(handlerList), handlerList_1_1 = handlerList_1.next(); !handlerList_1_1.done; handlerList_1_1 = handlerList_1.next()) {
416 var handlerFunction = handlerList_1_1.value;
417
418 if (handlerFunction === handlerToDetach) {
419 handlerList.splice(idx, 1);
420
421 if (handlerList.length <= 0) {
422 delete this._eventHandler[eventName];
423 }
424
425 break;
426 }
427
428 idx++;
429 }
430 } catch (e_1_1) {
431 e_1 = {
432 error: e_1_1
433 };
434 } finally {
435 try {
436 if (handlerList_1_1 && !handlerList_1_1.done && (_a = handlerList_1.return)) _a.call(handlerList_1);
437 } finally {
438 if (e_1) throw e_1.error;
439 }
440 }
441 }
442
443 return this;
444 };
445 /**
446 * Version info string
447 * @ko 버전정보 문자열
448 * @name VERSION
449 * @static
450 * @example
451 * Component.VERSION; // ex) 3.0.0
452 * @memberof Component
453 */
454
455
456 Component.VERSION = "3.0.1";
457 return Component;
458}();
459
460/*
461 * Copyright (c) 2015 NAVER Corp.
462 * egjs projects are licensed under the MIT license
463 */
464
465var ComponentEvent$1 = ComponentEvent;
466
467/*
468 * Copyright (c) 2015 NAVER Corp.
469 * egjs projects are licensed under the MIT license
470 */
471
472export default Component;
473export { ComponentEvent$1 as ComponentEvent };
474//# sourceMappingURL=component.esm.js.map