1 | /*
|
2 | Copyright (c) 2020-present NAVER Corp.
|
3 | name: @egjs/imready
|
4 | license: MIT
|
5 | author: NAVER Corp.
|
6 | repository: https://github.com/naver/egjs-imready
|
7 | version: 1.1.4
|
8 | */
|
9 | (function (global, factory) {
|
10 | typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
|
11 | typeof define === 'function' && define.amd ? define(factory) :
|
12 | (global = global || self, (global.eg = global.eg || {}, global.eg.ImReady = factory()));
|
13 | }(this, (function () { 'use strict';
|
14 |
|
15 | /*! *****************************************************************************
|
16 | Copyright (c) Microsoft Corporation.
|
17 |
|
18 | Permission to use, copy, modify, and/or distribute this software for any
|
19 | purpose with or without fee is hereby granted.
|
20 |
|
21 | THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
|
22 | REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
|
23 | AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
|
24 | INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
|
25 | LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
|
26 | OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
27 | PERFORMANCE OF THIS SOFTWARE.
|
28 | ***************************************************************************** */
|
29 |
|
30 | /* global Reflect, Promise */
|
31 | var extendStatics = function (d, b) {
|
32 | extendStatics = Object.setPrototypeOf || {
|
33 | __proto__: []
|
34 | } instanceof Array && function (d, b) {
|
35 | d.__proto__ = b;
|
36 | } || function (d, b) {
|
37 | for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p];
|
38 | };
|
39 |
|
40 | return extendStatics(d, b);
|
41 | };
|
42 |
|
43 | function __extends(d, b) {
|
44 | extendStatics(d, b);
|
45 |
|
46 | function __() {
|
47 | this.constructor = d;
|
48 | }
|
49 |
|
50 | d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
51 | }
|
52 | var __assign = function () {
|
53 | __assign = Object.assign || function __assign(t) {
|
54 | for (var s, i = 1, n = arguments.length; i < n; i++) {
|
55 | s = arguments[i];
|
56 |
|
57 | for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
|
58 | }
|
59 |
|
60 | return t;
|
61 | };
|
62 |
|
63 | return __assign.apply(this, arguments);
|
64 | };
|
65 | function __spreadArrays() {
|
66 | for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
|
67 |
|
68 | for (var r = Array(s), k = 0, i = 0; i < il; i++) for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++) r[k] = a[j];
|
69 |
|
70 | return r;
|
71 | }
|
72 |
|
73 | /*
|
74 | Copyright (c) NAVER Corp.
|
75 | name: @egjs/component
|
76 | license: MIT
|
77 | author: NAVER Corp.
|
78 | repository: https://github.com/naver/egjs-component
|
79 | version: 2.2.2
|
80 | */
|
81 | /*! *****************************************************************************
|
82 | Copyright (c) Microsoft Corporation.
|
83 |
|
84 | Permission to use, copy, modify, and/or distribute this software for any
|
85 | purpose with or without fee is hereby granted.
|
86 |
|
87 | THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
|
88 | REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
|
89 | AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
|
90 | INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
|
91 | LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
|
92 | OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
93 | PERFORMANCE OF THIS SOFTWARE.
|
94 | ***************************************************************************** */
|
95 | function __values(o) {
|
96 | var s = typeof Symbol === "function" && Symbol.iterator,
|
97 | m = s && o[s],
|
98 | i = 0;
|
99 | if (m) return m.call(o);
|
100 | if (o && typeof o.length === "number") return {
|
101 | next: function () {
|
102 | if (o && i >= o.length) o = void 0;
|
103 | return {
|
104 | value: o && o[i++],
|
105 | done: !o
|
106 | };
|
107 | }
|
108 | };
|
109 | throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
|
110 | }
|
111 |
|
112 | /*
|
113 | * Copyright (c) 2015 NAVER Corp.
|
114 | * egjs projects are licensed under the MIT license
|
115 | */
|
116 |
|
117 | function isUndefined(value) {
|
118 | return typeof value === "undefined";
|
119 | }
|
120 | /**
|
121 | * A class used to manage events in a component
|
122 | * @ko 컴포넌트의 이벤트을 관리할 수 있게 하는 클래스
|
123 | * @alias eg.Component
|
124 | */
|
125 |
|
126 |
|
127 | var Component =
|
128 | /*#__PURE__*/
|
129 | function () {
|
130 | /**
|
131 | * @support {"ie": "7+", "ch" : "latest", "ff" : "latest", "sf" : "latest", "edge" : "latest", "ios" : "7+", "an" : "2.1+ (except 3.x)"}
|
132 | */
|
133 | function Component() {
|
134 | /**
|
135 | * @deprecated
|
136 | * @private
|
137 | */
|
138 | this.options = {};
|
139 | this._eventHandler = {};
|
140 | }
|
141 | /**
|
142 | * Triggers a custom event.
|
143 | * @ko 커스텀 이벤트를 발생시킨다
|
144 | * @param {string} eventName The name of the custom event to be triggered <ko>발생할 커스텀 이벤트의 이름</ko>
|
145 | * @param {object} customEvent Event data to be sent when triggering a custom event <ko>커스텀 이벤트가 발생할 때 전달할 데이터</ko>
|
146 | * @param {any[]} restParam Additional parameters when triggering a custom event <ko>커스텀 이벤트가 발생할 때 필요시 추가적으로 전달할 데이터</ko>
|
147 | * @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>
|
148 | * @example
|
149 | * ```
|
150 | * class Some extends eg.Component {
|
151 | * some(){
|
152 | * if(this.trigger("beforeHi")){ // When event call to stop return false.
|
153 | * this.trigger("hi");// fire hi event.
|
154 | * }
|
155 | * }
|
156 | * }
|
157 | *
|
158 | * const some = new Some();
|
159 | * some.on("beforeHi", (e) => {
|
160 | * if(condition){
|
161 | * e.stop(); // When event call to stop, `hi` event not call.
|
162 | * }
|
163 | * });
|
164 | * some.on("hi", (e) => {
|
165 | * // `currentTarget` is component instance.
|
166 | * console.log(some === e.currentTarget); // true
|
167 | * });
|
168 | * // If you want to more know event design. You can see article.
|
169 | * // https://github.com/naver/egjs-component/wiki/How-to-make-Component-event-design%3F
|
170 | * ```
|
171 | */
|
172 |
|
173 |
|
174 | var __proto = Component.prototype;
|
175 |
|
176 | __proto.trigger = function (eventName) {
|
177 | var _this = this;
|
178 |
|
179 | var params = [];
|
180 |
|
181 | for (var _i = 1; _i < arguments.length; _i++) {
|
182 | params[_i - 1] = arguments[_i];
|
183 | }
|
184 |
|
185 | var handlerList = this._eventHandler[eventName] || [];
|
186 | var hasHandlerList = handlerList.length > 0;
|
187 |
|
188 | if (!hasHandlerList) {
|
189 | return true;
|
190 | }
|
191 |
|
192 | var customEvent = params[0] || {};
|
193 | var restParams = params.slice(1); // If detach method call in handler in first time then handler list calls.
|
194 |
|
195 | handlerList = handlerList.concat();
|
196 | var isCanceled = false; // This should be done like this to pass previous tests
|
197 |
|
198 | customEvent.eventType = eventName;
|
199 |
|
200 | customEvent.stop = function () {
|
201 | isCanceled = true;
|
202 | };
|
203 |
|
204 | customEvent.currentTarget = this;
|
205 | var arg = [customEvent];
|
206 |
|
207 | if (restParams.length >= 1) {
|
208 | arg = arg.concat(restParams);
|
209 | }
|
210 |
|
211 | handlerList.forEach(function (handler) {
|
212 | handler.apply(_this, arg);
|
213 | });
|
214 | return !isCanceled;
|
215 | };
|
216 | /**
|
217 | * Executed event just one time.
|
218 | * @ko 이벤트가 한번만 실행된다.
|
219 | * @param {string} eventName The name of the event to be attached <ko>등록할 이벤트의 이름</ko>
|
220 | * @param {function} handlerToAttach The handler function of the event to be attached <ko>등록할 이벤트의 핸들러 함수</ko>
|
221 | * @return An instance of a component itself<ko>컴포넌트 자신의 인스턴스</ko>
|
222 | * @example
|
223 | * ```
|
224 | * class Some extends eg.Component {
|
225 | * hi() {
|
226 | * alert("hi");
|
227 | * }
|
228 | * thing() {
|
229 | * this.once("hi", this.hi);
|
230 | * }
|
231 | *
|
232 | * var some = new Some();
|
233 | * some.thing();
|
234 | * some.trigger("hi");
|
235 | * // fire alert("hi");
|
236 | * some.trigger("hi");
|
237 | * // Nothing happens
|
238 | * ```
|
239 | */
|
240 |
|
241 |
|
242 | __proto.once = function (eventName, handlerToAttach) {
|
243 | var _this = this;
|
244 |
|
245 | if (typeof eventName === "object" && isUndefined(handlerToAttach)) {
|
246 | var eventHash = eventName;
|
247 |
|
248 | for (var key in eventHash) {
|
249 | this.once(key, eventHash[key]);
|
250 | }
|
251 |
|
252 | return this;
|
253 | } else if (typeof eventName === "string" && typeof handlerToAttach === "function") {
|
254 | var listener_1 = function () {
|
255 | var args = [];
|
256 |
|
257 | for (var _i = 0; _i < arguments.length; _i++) {
|
258 | args[_i] = arguments[_i];
|
259 | }
|
260 |
|
261 | handlerToAttach.apply(_this, args);
|
262 |
|
263 | _this.off(eventName, listener_1);
|
264 | };
|
265 |
|
266 | this.on(eventName, listener_1);
|
267 | }
|
268 |
|
269 | return this;
|
270 | };
|
271 | /**
|
272 | * Checks whether an event has been attached to a component.
|
273 | * @ko 컴포넌트에 이벤트가 등록됐는지 확인한다.
|
274 | * @param {string} eventName The name of the event to be attached <ko>등록 여부를 확인할 이벤트의 이름</ko>
|
275 | * @return {boolean} Indicates whether the event is attached. <ko>이벤트 등록 여부</ko>
|
276 | * @example
|
277 | * ```
|
278 | * class Some extends eg.Component {
|
279 | * some() {
|
280 | * this.hasOn("hi");// check hi event.
|
281 | * }
|
282 | * }
|
283 | * ```
|
284 | */
|
285 |
|
286 |
|
287 | __proto.hasOn = function (eventName) {
|
288 | return !!this._eventHandler[eventName];
|
289 | };
|
290 | /**
|
291 | * Attaches an event to a component.
|
292 | * @ko 컴포넌트에 이벤트를 등록한다.
|
293 | * @param {string} eventName The name of the event to be attached <ko>등록할 이벤트의 이름</ko>
|
294 | * @param {function} handlerToAttach The handler function of the event to be attached <ko>등록할 이벤트의 핸들러 함수</ko>
|
295 | * @return An instance of a component itself<ko>컴포넌트 자신의 인스턴스</ko>
|
296 | * @example
|
297 | * ```
|
298 | * class Some extends eg.Component {
|
299 | * hi() {
|
300 | * console.log("hi");
|
301 | * }
|
302 | * some() {
|
303 | * this.on("hi",this.hi); //attach event
|
304 | * }
|
305 | * }
|
306 | * ```
|
307 | */
|
308 |
|
309 |
|
310 | __proto.on = function (eventName, handlerToAttach) {
|
311 | if (typeof eventName === "object" && isUndefined(handlerToAttach)) {
|
312 | var eventHash = eventName;
|
313 |
|
314 | for (var name in eventHash) {
|
315 | this.on(name, eventHash[name]);
|
316 | }
|
317 |
|
318 | return this;
|
319 | } else if (typeof eventName === "string" && typeof handlerToAttach === "function") {
|
320 | var handlerList = this._eventHandler[eventName];
|
321 |
|
322 | if (isUndefined(handlerList)) {
|
323 | this._eventHandler[eventName] = [];
|
324 | handlerList = this._eventHandler[eventName];
|
325 | }
|
326 |
|
327 | handlerList.push(handlerToAttach);
|
328 | }
|
329 |
|
330 | return this;
|
331 | };
|
332 | /**
|
333 | * Detaches an event from the component.
|
334 | * @ko 컴포넌트에 등록된 이벤트를 해제한다
|
335 | * @param {string} eventName The name of the event to be detached <ko>해제할 이벤트의 이름</ko>
|
336 | * @param {function} handlerToDetach The handler function of the event to be detached <ko>해제할 이벤트의 핸들러 함수</ko>
|
337 | * @return An instance of a component itself <ko>컴포넌트 자신의 인스턴스</ko>
|
338 | * @example
|
339 | * ```
|
340 | * class Some extends eg.Component {
|
341 | * hi() {
|
342 | * console.log("hi");
|
343 | * }
|
344 | * some() {
|
345 | * this.off("hi",this.hi); //detach event
|
346 | * }
|
347 | * }
|
348 | * ```
|
349 | */
|
350 |
|
351 |
|
352 | __proto.off = function (eventName, handlerToDetach) {
|
353 | var e_1, _a; // Detach all event handlers.
|
354 |
|
355 |
|
356 | if (isUndefined(eventName)) {
|
357 | this._eventHandler = {};
|
358 | return this;
|
359 | } // Detach all handlers for eventname or detach event handlers by object.
|
360 |
|
361 |
|
362 | if (isUndefined(handlerToDetach)) {
|
363 | if (typeof eventName === "string") {
|
364 | delete this._eventHandler[eventName];
|
365 | return this;
|
366 | } else {
|
367 | var eventHash = eventName;
|
368 |
|
369 | for (var name in eventHash) {
|
370 | this.off(name, eventHash[name]);
|
371 | }
|
372 |
|
373 | return this;
|
374 | }
|
375 | } // Detach single event handler
|
376 |
|
377 |
|
378 | var handlerList = this._eventHandler[eventName];
|
379 |
|
380 | if (handlerList) {
|
381 | var idx = 0;
|
382 |
|
383 | try {
|
384 | for (var handlerList_1 = __values(handlerList), handlerList_1_1 = handlerList_1.next(); !handlerList_1_1.done; handlerList_1_1 = handlerList_1.next()) {
|
385 | var handlerFunction = handlerList_1_1.value;
|
386 |
|
387 | if (handlerFunction === handlerToDetach) {
|
388 | handlerList.splice(idx, 1);
|
389 | break;
|
390 | }
|
391 |
|
392 | idx++;
|
393 | }
|
394 | } catch (e_1_1) {
|
395 | e_1 = {
|
396 | error: e_1_1
|
397 | };
|
398 | } finally {
|
399 | try {
|
400 | if (handlerList_1_1 && !handlerList_1_1.done && (_a = handlerList_1.return)) _a.call(handlerList_1);
|
401 | } finally {
|
402 | if (e_1) throw e_1.error;
|
403 | }
|
404 | }
|
405 | }
|
406 |
|
407 | return this;
|
408 | };
|
409 | /**
|
410 | * Version info string
|
411 | * @ko 버전정보 문자열
|
412 | * @name VERSION
|
413 | * @static
|
414 | * @example
|
415 | * eg.Component.VERSION; // ex) 2.0.0
|
416 | * @memberof eg.Component
|
417 | */
|
418 |
|
419 |
|
420 | Component.VERSION = "2.2.2";
|
421 | return Component;
|
422 | }();
|
423 |
|
424 | /*
|
425 | egjs-imready
|
426 | Copyright (c) 2020-present NAVER Corp.
|
427 | MIT license
|
428 | */
|
429 | var isWindow = typeof window !== "undefined";
|
430 | var ua = isWindow ? window.navigator.userAgent : "";
|
431 | var SUPPORT_COMPUTEDSTYLE = isWindow ? !!("getComputedStyle" in window) : false;
|
432 | var IS_IE = /MSIE|Trident|Windows Phone|Edge/.test(ua);
|
433 | var SUPPORT_ADDEVENTLISTENER = isWindow ? !!("addEventListener" in document) : false;
|
434 | var WIDTH = "width";
|
435 | var HEIGHT = "height";
|
436 |
|
437 | function getAttribute(el, name) {
|
438 | return el.getAttribute(name) || "";
|
439 | }
|
440 | function toArray(arr) {
|
441 | return [].slice.call(arr);
|
442 | }
|
443 | function hasSizeAttribute(target, prefix) {
|
444 | if (prefix === void 0) {
|
445 | prefix = "data-";
|
446 | }
|
447 |
|
448 | return !!target.getAttribute(prefix + "width");
|
449 | }
|
450 | function hasLoadingAttribute(target) {
|
451 | return "loading" in target && target.getAttribute("loading") === "lazy";
|
452 | }
|
453 | function hasSkipAttribute(target, prefix) {
|
454 | if (prefix === void 0) {
|
455 | prefix = "data-";
|
456 | }
|
457 |
|
458 | return !!target.getAttribute(prefix + "skip");
|
459 | }
|
460 | function addEvent(element, type, handler) {
|
461 | if (SUPPORT_ADDEVENTLISTENER) {
|
462 | element.addEventListener(type, handler, false);
|
463 | } else if (element.attachEvent) {
|
464 | element.attachEvent("on" + type, handler);
|
465 | } else {
|
466 | element["on" + type] = handler;
|
467 | }
|
468 | }
|
469 | function removeEvent(element, type, handler) {
|
470 | if (element.removeEventListener) {
|
471 | element.removeEventListener(type, handler, false);
|
472 | } else if (element.detachEvent) {
|
473 | element.detachEvent("on" + type, handler);
|
474 | } else {
|
475 | element["on" + type] = null;
|
476 | }
|
477 | }
|
478 | function innerWidth(el) {
|
479 | return getSize(el, "Width");
|
480 | }
|
481 | function innerHeight(el) {
|
482 | return getSize(el, "Height");
|
483 | }
|
484 | function getStyles(el) {
|
485 | return (SUPPORT_COMPUTEDSTYLE ? window.getComputedStyle(el) : el.currentStyle) || {};
|
486 | }
|
487 |
|
488 | function getSize(el, name) {
|
489 | var size = el["client" + name] || el["offset" + name];
|
490 | return parseFloat(size || getStyles(el)[name.toLowerCase()]) || 0;
|
491 | }
|
492 |
|
493 | function getContentElements(element, tags, prefix) {
|
494 | var skipElements = toArray(element.querySelectorAll(__spreadArrays(["[" + prefix + "skip] [" + prefix + "width]"], tags.map(function (tag) {
|
495 | return ["[" + prefix + "skip] " + tag, tag + "[" + prefix + "skip]", "[" + prefix + "width] " + tag].join(", ");
|
496 | })).join(", ")));
|
497 | return toArray(element.querySelectorAll("[" + prefix + "width], " + tags.join(", "))).filter(function (el) {
|
498 | return skipElements.indexOf(el) === -1;
|
499 | });
|
500 | }
|
501 |
|
502 | /*
|
503 | egjs-imready
|
504 | Copyright (c) 2020-present NAVER Corp.
|
505 | MIT license
|
506 | */
|
507 | var elements = [];
|
508 | function addAutoSizer(element, prefix) {
|
509 | !elements.length && addEvent(window, "resize", resizeAllAutoSizers);
|
510 | element.__PREFIX__ = prefix;
|
511 | elements.push(element);
|
512 | resize(element);
|
513 | }
|
514 | function removeAutoSizer(element, prefix) {
|
515 | var index = elements.indexOf(element);
|
516 |
|
517 | if (index < 0) {
|
518 | return;
|
519 | }
|
520 |
|
521 | var fixed = getAttribute(element, prefix + "fixed");
|
522 | delete element.__PREFIX__;
|
523 | element.style[fixed === HEIGHT ? WIDTH : HEIGHT] = "";
|
524 | elements.splice(index, 1);
|
525 | !elements.length && removeEvent(window, "resize", resizeAllAutoSizers);
|
526 | }
|
527 |
|
528 | function resize(element, prefix) {
|
529 | if (prefix === void 0) {
|
530 | prefix = "data-";
|
531 | }
|
532 |
|
533 | var elementPrefix = element.__PREFIX__ || prefix;
|
534 | var dataWidth = parseInt(getAttribute(element, "" + elementPrefix + WIDTH), 10) || 0;
|
535 | var dataHeight = parseInt(getAttribute(element, "" + elementPrefix + HEIGHT), 10) || 0;
|
536 | var fixed = getAttribute(element, elementPrefix + "fixed");
|
537 |
|
538 | if (fixed === HEIGHT) {
|
539 | var size = innerHeight(element) || dataHeight;
|
540 | element.style[WIDTH] = dataWidth / dataHeight * size + "px";
|
541 | } else {
|
542 | var size = innerWidth(element) || dataWidth;
|
543 | element.style[HEIGHT] = dataHeight / dataWidth * size + "px";
|
544 | }
|
545 | }
|
546 |
|
547 | function resizeAllAutoSizers() {
|
548 | elements.forEach(function (element) {
|
549 | resize(element);
|
550 | });
|
551 | }
|
552 |
|
553 | var Loader =
|
554 | /*#__PURE__*/
|
555 | function (_super) {
|
556 | __extends(Loader, _super);
|
557 |
|
558 | function Loader(element, options) {
|
559 | if (options === void 0) {
|
560 | options = {};
|
561 | }
|
562 |
|
563 | var _this = _super.call(this) || this;
|
564 |
|
565 | _this.isReady = false;
|
566 | _this.isPreReady = false;
|
567 | _this.hasDataSize = false;
|
568 | _this.hasLoading = false;
|
569 | _this.isSkip = false;
|
570 |
|
571 | _this.onCheck = function (e) {
|
572 | _this.clear();
|
573 |
|
574 | if (e && e.type === "error") {
|
575 | _this.onError(_this.element);
|
576 | } // I'm pre-ready and ready!
|
577 |
|
578 |
|
579 | var withPreReady = !_this.hasDataSize && !_this.hasLoading;
|
580 |
|
581 | _this.onReady(withPreReady);
|
582 | };
|
583 |
|
584 | _this.options = __assign({
|
585 | prefix: "data-"
|
586 | }, options);
|
587 | _this.element = element;
|
588 | var prefix = _this.options.prefix;
|
589 | _this.hasDataSize = hasSizeAttribute(element, prefix);
|
590 | _this.isSkip = hasSkipAttribute(element, prefix);
|
591 | _this.hasLoading = hasLoadingAttribute(element);
|
592 | return _this;
|
593 | }
|
594 |
|
595 | var __proto = Loader.prototype;
|
596 |
|
597 | __proto.check = function () {
|
598 | if (this.isSkip || !this.checkElement()) {
|
599 | // I'm Ready
|
600 | this.onAlreadyReady(true);
|
601 | return false;
|
602 | }
|
603 |
|
604 | if (this.hasDataSize) {
|
605 | addAutoSizer(this.element, this.options.prefix);
|
606 | }
|
607 |
|
608 | if (this.hasDataSize || this.hasLoading) {
|
609 | // I'm Pre Ready
|
610 | this.onAlreadyPreReady();
|
611 | } // Wati Pre Ready, Ready
|
612 |
|
613 |
|
614 | return true;
|
615 | };
|
616 |
|
617 | __proto.addEvents = function () {
|
618 | var _this = this;
|
619 |
|
620 | var element = this.element;
|
621 | this.constructor.EVENTS.forEach(function (name) {
|
622 | addEvent(element, name, _this.onCheck);
|
623 | });
|
624 | };
|
625 |
|
626 | __proto.clear = function () {
|
627 | var _this = this;
|
628 |
|
629 | var element = this.element;
|
630 | this.constructor.EVENTS.forEach(function (name) {
|
631 | removeEvent(element, name, _this.onCheck);
|
632 | });
|
633 | this.removeAutoSizer();
|
634 | };
|
635 |
|
636 | __proto.destroy = function () {
|
637 | this.clear();
|
638 | this.off();
|
639 | };
|
640 |
|
641 | __proto.removeAutoSizer = function () {
|
642 | if (this.hasDataSize) {
|
643 | // I'm already ready.
|
644 | var prefix = this.options.prefix;
|
645 | removeAutoSizer(this.element, prefix);
|
646 | }
|
647 | };
|
648 |
|
649 | __proto.onError = function (target) {
|
650 | this.trigger("error", {
|
651 | element: this.element,
|
652 | target: target
|
653 | });
|
654 | };
|
655 |
|
656 | __proto.onPreReady = function () {
|
657 | if (this.isPreReady) {
|
658 | return;
|
659 | }
|
660 |
|
661 | this.isPreReady = true;
|
662 | this.trigger("preReady", {
|
663 | element: this.element,
|
664 | hasLoading: this.hasLoading,
|
665 | isSkip: this.isSkip
|
666 | });
|
667 | };
|
668 |
|
669 | __proto.onReady = function (withPreReady) {
|
670 | if (this.isReady) {
|
671 | return;
|
672 | }
|
673 |
|
674 | withPreReady = !this.isPreReady && withPreReady;
|
675 |
|
676 | if (withPreReady) {
|
677 | this.isPreReady = true;
|
678 | }
|
679 |
|
680 | this.removeAutoSizer();
|
681 | this.isReady = true;
|
682 | this.trigger("ready", {
|
683 | element: this.element,
|
684 | withPreReady: withPreReady,
|
685 | hasLoading: this.hasLoading,
|
686 | isSkip: this.isSkip
|
687 | });
|
688 | };
|
689 |
|
690 | __proto.onAlreadyError = function (target) {
|
691 | var _this = this;
|
692 |
|
693 | setTimeout(function () {
|
694 | _this.onError(target);
|
695 | });
|
696 | };
|
697 |
|
698 | __proto.onAlreadyPreReady = function () {
|
699 | var _this = this;
|
700 |
|
701 | setTimeout(function () {
|
702 | _this.onPreReady();
|
703 | });
|
704 | };
|
705 |
|
706 | __proto.onAlreadyReady = function (withPreReady) {
|
707 | var _this = this;
|
708 |
|
709 | setTimeout(function () {
|
710 | _this.onReady(withPreReady);
|
711 | });
|
712 | };
|
713 |
|
714 | Loader.EVENTS = [];
|
715 | return Loader;
|
716 | }(Component);
|
717 |
|
718 | var ElementLoader =
|
719 | /*#__PURE__*/
|
720 | function (_super) {
|
721 | __extends(ElementLoader, _super);
|
722 |
|
723 | function ElementLoader() {
|
724 | return _super !== null && _super.apply(this, arguments) || this;
|
725 | }
|
726 |
|
727 | var __proto = ElementLoader.prototype;
|
728 |
|
729 | __proto.setHasLoading = function (hasLoading) {
|
730 | this.hasLoading = hasLoading;
|
731 | };
|
732 |
|
733 | __proto.check = function () {
|
734 | if (this.isSkip) {
|
735 | // I'm Ready
|
736 | this.onAlreadyReady(true);
|
737 | return false;
|
738 | }
|
739 |
|
740 | if (this.hasDataSize) {
|
741 | addAutoSizer(this.element, this.options.prefix);
|
742 | this.onAlreadyPreReady();
|
743 | } else {
|
744 | // has not data size
|
745 | this.trigger("requestChildren");
|
746 | }
|
747 |
|
748 | return true;
|
749 | };
|
750 |
|
751 | __proto.checkElement = function () {
|
752 | return true;
|
753 | };
|
754 |
|
755 | __proto.destroy = function () {
|
756 | this.clear();
|
757 | this.trigger("requestDestroy");
|
758 | this.off();
|
759 | };
|
760 |
|
761 | __proto.onAlreadyPreReady = function () {
|
762 | // has data size
|
763 | _super.prototype.onAlreadyPreReady.call(this);
|
764 |
|
765 | this.trigger("reqeustReadyChildren");
|
766 | };
|
767 |
|
768 | ElementLoader.EVENTS = [];
|
769 | return ElementLoader;
|
770 | }(Loader);
|
771 |
|
772 | /**
|
773 | * @alias eg.ImReady
|
774 | * @extends eg.Component
|
775 | */
|
776 |
|
777 | var ImReadyManager =
|
778 | /*#__PURE__*/
|
779 | function (_super) {
|
780 | __extends(ImReadyManager, _super);
|
781 | /**
|
782 | * @param - ImReady's options
|
783 | */
|
784 |
|
785 |
|
786 | function ImReadyManager(options) {
|
787 | if (options === void 0) {
|
788 | options = {};
|
789 | }
|
790 |
|
791 | var _this = _super.call(this) || this;
|
792 |
|
793 | _this.readyCount = 0;
|
794 | _this.preReadyCount = 0;
|
795 | _this.totalCount = 0;
|
796 | _this.totalErrorCount = 0;
|
797 | _this.isPreReadyOver = true;
|
798 | _this.elementInfos = [];
|
799 | _this.options = __assign({
|
800 | loaders: {},
|
801 | prefix: "data-"
|
802 | }, options);
|
803 | return _this;
|
804 | }
|
805 | /**
|
806 | * Checks whether elements are in the ready state.
|
807 | * @ko 엘리먼트가 준비 상태인지 체크한다.
|
808 | * @elements - Elements to check ready status. <ko> 준비 상태를 체크할 엘리먼트들.</ko>
|
809 | * @example
|
810 | * ```html
|
811 | * <div>
|
812 | * <img src="./1.jpg" data-width="1280" data-height="853" style="width:100%"/>
|
813 | * <img src="./2.jpg" data-width="1280" data-height="853"/>
|
814 | * <img src="ERR" data-width="1280" data-height="853"/>
|
815 | * </div>
|
816 | * ```
|
817 | * ## Javascript
|
818 | * ```js
|
819 | * import ImReady from "@egjs/imready";
|
820 | *
|
821 | * const im = new ImReady(); // umd: eg.ImReady
|
822 | * im.check(document.querySelectorAll("img")).on({
|
823 | * preReadyElement: e => {
|
824 | * // 1, 3
|
825 | * // 2, 3
|
826 | * // 3, 3
|
827 | * console.log(e.preReadyCount, e.totalCount),
|
828 | * },
|
829 | * });
|
830 | * ```
|
831 | */
|
832 |
|
833 |
|
834 | var __proto = ImReadyManager.prototype;
|
835 |
|
836 | __proto.check = function (elements) {
|
837 | var _this = this;
|
838 |
|
839 | var prefix = this.options.prefix;
|
840 | this.clear();
|
841 | this.elementInfos = toArray(elements).map(function (element, index) {
|
842 | var loader = _this.getLoader(element, {
|
843 | prefix: prefix
|
844 | });
|
845 |
|
846 | loader.check();
|
847 | loader.on("error", function (e) {
|
848 | _this.onError(index, e.target);
|
849 | }).on("preReady", function (e) {
|
850 | var info = _this.elementInfos[index];
|
851 | info.hasLoading = e.hasLoading;
|
852 | info.isSkip = e.isSkip;
|
853 |
|
854 | var isPreReady = _this.checkPreReady(index);
|
855 |
|
856 | _this.onPreReadyElement(index);
|
857 |
|
858 | isPreReady && _this.onPreReady();
|
859 | }).on("ready", function (_a) {
|
860 | var withPreReady = _a.withPreReady,
|
861 | hasLoading = _a.hasLoading,
|
862 | isSkip = _a.isSkip;
|
863 | var info = _this.elementInfos[index];
|
864 | info.hasLoading = hasLoading;
|
865 | info.isSkip = isSkip;
|
866 |
|
867 | var isPreReady = withPreReady && _this.checkPreReady(index);
|
868 |
|
869 | var isReady = _this.checkReady(index); // Pre-ready and ready occur simultaneously
|
870 |
|
871 |
|
872 | withPreReady && _this.onPreReadyElement(index);
|
873 |
|
874 | _this.onReadyElement(index);
|
875 |
|
876 | isPreReady && _this.onPreReady();
|
877 | isReady && _this.onReady();
|
878 | });
|
879 | return {
|
880 | loader: loader,
|
881 | element: element,
|
882 | hasLoading: false,
|
883 | hasError: false,
|
884 | isPreReady: false,
|
885 | isReady: false,
|
886 | isSkip: false
|
887 | };
|
888 | });
|
889 | var length = this.elementInfos.length;
|
890 | this.totalCount = length;
|
891 |
|
892 | if (!length) {
|
893 | setTimeout(function () {
|
894 | _this.onPreReady();
|
895 |
|
896 | _this.onReady();
|
897 | });
|
898 | }
|
899 |
|
900 | return this;
|
901 | };
|
902 | /**
|
903 | * Gets the total count of elements to be checked.
|
904 | * @ko 체크하는 element의 총 개수를 가져온다.
|
905 | */
|
906 |
|
907 |
|
908 | __proto.getTotalCount = function () {
|
909 | return this.totalCount;
|
910 | };
|
911 | /**
|
912 | * Whether the elements are all pre-ready. (all sizes are known)
|
913 | * @ko 엘리먼트들이 모두 사전 준비가 됐는지 (사이즈를 전부 알 수 있는지) 여부.
|
914 | */
|
915 |
|
916 |
|
917 | __proto.isPreReady = function () {
|
918 | return this.elementInfos.every(function (info) {
|
919 | return info.isPreReady;
|
920 | });
|
921 | };
|
922 | /**
|
923 | * Whether the elements are all ready.
|
924 | * @ko 엘리먼트들이 모두 준비가 됐는지 여부.
|
925 | */
|
926 |
|
927 |
|
928 | __proto.isReady = function () {
|
929 | return this.elementInfos.every(function (info) {
|
930 | return info.isReady;
|
931 | });
|
932 | };
|
933 | /**
|
934 | * Whether an error has occurred in the elements in the current state.
|
935 | * @ko 현재 상태에서 엘리먼트들이 에러가 발생했는지 여부.
|
936 | */
|
937 |
|
938 |
|
939 | __proto.hasError = function () {
|
940 | return this.totalErrorCount > 0;
|
941 | };
|
942 | /**
|
943 | * Clears events of elements being checked.
|
944 | * @ko 체크 중인 엘리먼트들의 이벤트를 해제 한다.
|
945 | */
|
946 |
|
947 |
|
948 | __proto.clear = function () {
|
949 | this.isPreReadyOver = false;
|
950 | this.totalCount = 0;
|
951 | this.preReadyCount = 0;
|
952 | this.readyCount = 0;
|
953 | this.totalErrorCount = 0;
|
954 | this.elementInfos.forEach(function (info) {
|
955 | if (!info.isReady && info.loader) {
|
956 | info.loader.destroy();
|
957 | }
|
958 | });
|
959 | this.elementInfos = [];
|
960 | };
|
961 | /**
|
962 | * Destory all events.
|
963 | * @ko 모든 이벤트를 해제 한다.
|
964 | */
|
965 |
|
966 |
|
967 | __proto.destroy = function () {
|
968 | this.clear();
|
969 | this.off();
|
970 | };
|
971 |
|
972 | __proto.getLoader = function (element, options) {
|
973 | var _this = this;
|
974 |
|
975 | var tagName = element.tagName.toLowerCase();
|
976 | var loaders = this.options.loaders;
|
977 | var tags = Object.keys(loaders);
|
978 |
|
979 | if (loaders[tagName]) {
|
980 | return new loaders[tagName](element, options);
|
981 | }
|
982 |
|
983 | var loader = new ElementLoader(element, options);
|
984 | var children = toArray(element.querySelectorAll(tags.join(", ")));
|
985 | loader.setHasLoading(children.some(function (el) {
|
986 | return hasLoadingAttribute(el);
|
987 | }));
|
988 | var withPreReady = false;
|
989 | var childrenImReady = this.clone().on("error", function (e) {
|
990 | loader.onError(e.target);
|
991 | }).on("ready", function () {
|
992 | loader.onReady(withPreReady);
|
993 | });
|
994 | loader.on("requestChildren", function () {
|
995 | // has not data size
|
996 | var contentElements = getContentElements(element, tags, _this.options.prefix);
|
997 | childrenImReady.check(contentElements).on("preReady", function (e) {
|
998 | withPreReady = e.isReady;
|
999 |
|
1000 | if (!withPreReady) {
|
1001 | loader.onPreReady();
|
1002 | }
|
1003 | });
|
1004 | }).on("reqeustReadyChildren", function () {
|
1005 | // has data size
|
1006 | // loader call preReady
|
1007 | // check only video, image elements
|
1008 | childrenImReady.check(children);
|
1009 | }).on("requestDestroy", function () {
|
1010 | childrenImReady.destroy();
|
1011 | });
|
1012 | return loader;
|
1013 | };
|
1014 |
|
1015 | __proto.clone = function () {
|
1016 | return new ImReadyManager(__assign({}, this.options));
|
1017 | };
|
1018 |
|
1019 | __proto.checkPreReady = function (index) {
|
1020 | this.elementInfos[index].isPreReady = true;
|
1021 | ++this.preReadyCount;
|
1022 |
|
1023 | if (this.preReadyCount < this.totalCount) {
|
1024 | return false;
|
1025 | }
|
1026 |
|
1027 | return true;
|
1028 | };
|
1029 |
|
1030 | __proto.checkReady = function (index) {
|
1031 | this.elementInfos[index].isReady = true;
|
1032 | ++this.readyCount;
|
1033 |
|
1034 | if (this.readyCount < this.totalCount) {
|
1035 | return false;
|
1036 | }
|
1037 |
|
1038 | return true;
|
1039 | };
|
1040 |
|
1041 | __proto.onError = function (index, target) {
|
1042 | var info = this.elementInfos[index];
|
1043 | info.hasError = true;
|
1044 | /**
|
1045 | * An event occurs if the image, video fails to load.
|
1046 | * @ko 이미지, 비디오가 로딩에 실패하면 이벤트가 발생한다.
|
1047 | * @event eg.ImReady#error
|
1048 | * @param {eg.ImReady.OnError} e - The object of data to be sent to an event <ko>이벤트에 전달되는 데이터 객체</ko>
|
1049 | * @param {HTMLElement} [e.element] - The element with error images.<ko>오류난 이미지가 있는 엘리먼트</ko>
|
1050 | * @param {number} [e.index] - The item's index with error images. <ko>오류난 이미지가 있는 엘리먼트의 인덱스</ko>
|
1051 | * @param {HTMLElement} [e.target] - Error image target in element <ko>엘리먼트의 오류난 이미지 타겟</ko>
|
1052 | * @param {number} [e.errorCount] - The number of elements with errors <ko>에러가 있는 엘리먼트들의 개수</ko>
|
1053 | * @param {number} [e.totalErrorCount] - The total number of targets with errors <ko>에러가 있는 타겟들의 총 개수</ko>
|
1054 | * @example
|
1055 | * ```html
|
1056 | * <div>
|
1057 | * <img src="./1.jpg" data-width="1280" data-height="853" style="width:100%"/>
|
1058 | * <img src="./2.jpg"/>
|
1059 | * <img src="ERR"/>
|
1060 | * </div>
|
1061 | * ```
|
1062 | * ## Javascript
|
1063 | * ```js
|
1064 | * import ImReady from "@egjs/imready";
|
1065 | *
|
1066 | * const im = new ImReady(); // umd: eg.ImReady
|
1067 | * im.check([document.querySelector("div")]).on({
|
1068 | * error: e => {
|
1069 | * // <div>...</div>, 0, <img src="ERR"/>
|
1070 | * console.log(e.element, e.index, e.target),
|
1071 | * },
|
1072 | * });
|
1073 | * ```
|
1074 | */
|
1075 |
|
1076 | this.trigger("error", {
|
1077 | element: info.element,
|
1078 | index: index,
|
1079 | target: target,
|
1080 | errorCount: this.getErrorCount(),
|
1081 | totalErrorCount: ++this.totalErrorCount
|
1082 | });
|
1083 | };
|
1084 |
|
1085 | __proto.onPreReadyElement = function (index) {
|
1086 | var info = this.elementInfos[index];
|
1087 | /**
|
1088 | * An event occurs when the element is pre-ready (when the loading attribute is applied or the size is known)
|
1089 | * @ko 해당 엘리먼트가 사전 준비되었을 때(loading 속성이 적용되었거나 사이즈를 알 수 있을 때) 이벤트가 발생한다.
|
1090 | * @event eg.ImReady#preReadyElement
|
1091 | * @param {eg.ImReady.OnPreReadyElement} e - The object of data to be sent to an event <ko>이벤트에 전달되는 데이터 객체</ko>
|
1092 | * @param {HTMLElement} [e.element] - The pre-ready element.<ko>사전 준비된 엘리먼트</ko>
|
1093 | * @param {number} [e.index] - The index of the pre-ready element. <ko>사전 준비된 엘리먼트의 인덱스</ko>
|
1094 | * @param {number} [e.preReadyCount] - Number of elements pre-ready <ko>사전 준비된 엘리먼트들의 개수</ko>
|
1095 | * @param {number} [e.readyCount] - Number of elements ready <ko>준비된 엘리먼트들의 개수</ko>
|
1096 | * @param {number} [e.totalCount] - Total number of elements <ko>엘리먼트들의 총 개수</ko>
|
1097 | * @param {boolean} [e.isPreReady] - Whether all elements are pre-ready <ko>모든 엘리먼트가 사전 준비가 끝났는지 여부</ko>
|
1098 | * @param {boolean} [e.isReady] - Whether all elements are ready <ko>모든 엘리먼트가 준비가 끝났는지 여부</ko>
|
1099 | * @param {boolean} [e.hasLoading] - Whether the loading attribute has been applied <ko>loading 속성이 적용되었는지 여부</ko>
|
1100 | * @param {boolean} [e.isSkip] - Whether the check is omitted due to skip attribute <ko>skip 속성으로 인하여 체크가 생략됐는지 여부</ko>
|
1101 | * @example
|
1102 | * ```html
|
1103 | * <div>
|
1104 | * <img src="./1.jpg" data-width="1280" data-height="853" style="width:100%"/>
|
1105 | * <img src="./2.jpg" data-width="1280" data-height="853"/>
|
1106 | * <img src="ERR" data-width="1280" data-height="853"/>
|
1107 | * </div>
|
1108 | * ```
|
1109 | * ## Javascript
|
1110 | * ```js
|
1111 | * import ImReady from "@egjs/imready";
|
1112 | *
|
1113 | * const im = new ImReady(); // umd: eg.ImReady
|
1114 | * im.check(document.querySelectorAll("img")).on({
|
1115 | * preReadyElement: e => {
|
1116 | * // 1, 3
|
1117 | * // 2, 3
|
1118 | * // 3, 3
|
1119 | * console.log(e.preReadyCount, e.totalCount),
|
1120 | * },
|
1121 | * });
|
1122 | * ```
|
1123 | */
|
1124 |
|
1125 | this.trigger("preReadyElement", {
|
1126 | element: info.element,
|
1127 | index: index,
|
1128 | preReadyCount: this.preReadyCount,
|
1129 | readyCount: this.readyCount,
|
1130 | totalCount: this.totalCount,
|
1131 | isPreReady: this.isPreReady(),
|
1132 | isReady: this.isReady(),
|
1133 | hasLoading: info.hasLoading,
|
1134 | isSkip: info.isSkip
|
1135 | });
|
1136 | };
|
1137 |
|
1138 | __proto.onPreReady = function () {
|
1139 | this.isPreReadyOver = true;
|
1140 | /**
|
1141 | * An event occurs when all element are pre-ready (When all elements have the loading attribute applied or the size is known)
|
1142 | * @ko 모든 엘리먼트들이 사전 준비된 경우 (모든 엘리먼트들이 loading 속성이 적용되었거나 사이즈를 알 수 있는 경우) 이벤트가 발생한다.
|
1143 | * @event eg.ImReady#preReady
|
1144 | * @param {eg.ImReady.OnPreReady} e - The object of data to be sent to an event <ko>이벤트에 전달되는 데이터 객체</ko>
|
1145 | * @param {number} [e.readyCount] - Number of elements ready <ko>준비된 엘리먼트들의 개수</ko>
|
1146 | * @param {number} [e.totalCount] - Total number of elements <ko>엘리먼트들의 총 개수</ko>
|
1147 | * @param {boolean} [e.isReady] - Whether all elements are ready <ko>모든 엘리먼트가 준비가 끝났는지 여부</ko>
|
1148 | * @param {boolean} [e.hasLoading] - Whether the loading attribute has been applied <ko>loading 속성이 적용되었는지 여부</ko>
|
1149 | * @example
|
1150 | * ```html
|
1151 | * <div>
|
1152 | * <img src="./1.jpg" data-width="1280" data-height="853" style="width:100%"/>
|
1153 | * <img src="./2.jpg" data-width="1280" data-height="853"/>
|
1154 | * <img src="ERR" data-width="1280" data-height="853"/>
|
1155 | * </div>
|
1156 | * ```
|
1157 | * ## Javascript
|
1158 | * ```js
|
1159 | * import ImReady from "@egjs/imready";
|
1160 | *
|
1161 | * const im = new ImReady(); // umd: eg.ImReady
|
1162 | * im.check(document.querySelectorAll("img")).on({
|
1163 | * preReady: e => {
|
1164 | * // 0, 3
|
1165 | * console.log(e.readyCount, e.totalCount),
|
1166 | * },
|
1167 | * });
|
1168 | * ```
|
1169 | */
|
1170 |
|
1171 | this.trigger("preReady", {
|
1172 | readyCount: this.readyCount,
|
1173 | totalCount: this.totalCount,
|
1174 | isReady: this.isReady(),
|
1175 | hasLoading: this.hasLoading()
|
1176 | });
|
1177 | };
|
1178 |
|
1179 | __proto.onReadyElement = function (index) {
|
1180 | var info = this.elementInfos[index];
|
1181 | /**
|
1182 | * An event occurs when the element is ready
|
1183 | * @ko 해당 엘리먼트가 준비가 되었을 때 이벤트가 발생한다.
|
1184 | * @event eg.ImReady#readyElement
|
1185 | * @param {eg.ImReady.OnReadyElement} e - The object of data to be sent to an event <ko>이벤트에 전달되는 데이터 객체</ko>
|
1186 | * @param {HTMLElement} [e.element] - The ready element.<ko>준비된 엘리먼트</ko>
|
1187 | * @param {number} [e.index] - The index of the ready element. <ko>준비된 엘리먼트의 인덱스</ko>
|
1188 | * @param {boolean} [e.hasError] - Whether there is an error in the element <ko>해당 엘리먼트에 에러가 있는지 여부</ko>
|
1189 | * @param {number} [e.errorCount] - The number of elements with errors <ko>에러가 있는 엘리먼트들의 개수</ko>
|
1190 | * @param {number} [e.totalErrorCount] - The total number of targets with errors <ko>에러가 있는 타겟들의 총 개수</ko>
|
1191 | * @param {number} [e.preReadyCount] - Number of elements pre-ready <ko>사전 준비된 엘리먼트들의 개수</ko>
|
1192 | * @param {number} [e.readyCount] - Number of elements ready <ko>준비된 엘리먼트들의 개수</ko>
|
1193 | * @param {number} [e.totalCount] - Total number of elements <ko>엘리먼트들의 총 개수</ko>
|
1194 | * @param {boolean} [e.isPreReady] - Whether all elements are pre-ready <ko>모든 엘리먼트가 사전 준비가 끝났는지 여부</ko>
|
1195 | * @param {boolean} [e.isReady] - Whether all elements are ready <ko>모든 엘리먼트가 준비가 끝났는지 여부</ko>
|
1196 | * @param {boolean} [e.hasLoading] - Whether the loading attribute has been applied <ko>loading 속성이 적용되었는지 여부</ko>
|
1197 | * @param {boolean} [e.isPreReadyOver] - Whether pre-ready is over <ko>사전 준비가 끝났는지 여부</ko>
|
1198 | * @param {boolean} [e.isSkip] - Whether the check is omitted due to skip attribute <ko>skip 속성으로 인하여 체크가 생략됐는지 여부</ko>
|
1199 | * @example
|
1200 | * ```html
|
1201 | * <div>
|
1202 | * <img src="./1.jpg" data-width="1280" data-height="853" style="width:100%"/>
|
1203 | * <img src="./2.jpg" data-width="1280" data-height="853"/>
|
1204 | * <img src="ERR" data-width="1280" data-height="853"/>
|
1205 | * </div>
|
1206 | * ```
|
1207 | * ## Javascript
|
1208 | * ```js
|
1209 | * import ImReady from "@egjs/imready";
|
1210 | *
|
1211 | * const im = new ImReady(); // umd: eg.ImReady
|
1212 | * im.check(document.querySelectorAll("img")).on({
|
1213 | * readyElement: e => {
|
1214 | * // 1, 0, false, 3
|
1215 | * // 2, 1, false, 3
|
1216 | * // 3, 2, true, 3
|
1217 | * console.log(e.readyCount, e.index, e.hasError, e.totalCount),
|
1218 | * },
|
1219 | * });
|
1220 | * ```
|
1221 | */
|
1222 |
|
1223 | this.trigger("readyElement", {
|
1224 | index: index,
|
1225 | element: info.element,
|
1226 | hasError: info.hasError,
|
1227 | errorCount: this.getErrorCount(),
|
1228 | totalErrorCount: this.totalErrorCount,
|
1229 | preReadyCount: this.preReadyCount,
|
1230 | readyCount: this.readyCount,
|
1231 | totalCount: this.totalCount,
|
1232 | isPreReady: this.isPreReady(),
|
1233 | isReady: this.isReady(),
|
1234 | hasLoading: info.hasLoading,
|
1235 | isPreReadyOver: this.isPreReadyOver,
|
1236 | isSkip: info.isSkip
|
1237 | });
|
1238 | };
|
1239 |
|
1240 | __proto.onReady = function () {
|
1241 | /**
|
1242 | * An event occurs when all element are ready
|
1243 | * @ko 모든 엘리먼트들이 준비된 경우 이벤트가 발생한다.
|
1244 | * @event eg.ImReady#ready
|
1245 | * @param {eg.ImReady.OnReady} e - The object of data to be sent to an event <ko>이벤트에 전달되는 데이터 객체</ko>
|
1246 | * @param {number} [e.errorCount] - The number of elements with errors <ko>에러가 있는 엘리먼트들의 개수</ko>
|
1247 | * @param {number} [e.totalErrorCount] - The total number of targets with errors <ko>에러가 있는 타겟들의 총 개수</ko>
|
1248 | * @param {number} [e.totalCount] - Total number of elements <ko>엘리먼트들의 총 개수</ko>
|
1249 | * @example
|
1250 | * ```html
|
1251 | * <div>
|
1252 | * <img src="./1.jpg" data-width="1280" data-height="853" style="width:100%"/>
|
1253 | * <img src="./2.jpg" data-width="1280" data-height="853"/>
|
1254 | * <img src="ERR" data-width="1280" data-height="853"/>
|
1255 | * </div>
|
1256 | * ```
|
1257 | * ## Javascript
|
1258 | * ```js
|
1259 | * import ImReady from "@egjs/imready";
|
1260 | *
|
1261 | * const im = new ImReady(); // umd: eg.ImReady
|
1262 | * im.check(document.querySelectorAll("img")).on({
|
1263 | * preReady: e => {
|
1264 | * // 0, 3
|
1265 | * console.log(e.readyCount, e.totalCount),
|
1266 | * },
|
1267 | * ready: e => {
|
1268 | * // 1, 3
|
1269 | * console.log(e.errorCount, e.totalCount),
|
1270 | * },
|
1271 | * });
|
1272 | * ```
|
1273 | */
|
1274 | this.trigger("ready", {
|
1275 | errorCount: this.getErrorCount(),
|
1276 | totalErrorCount: this.totalErrorCount,
|
1277 | totalCount: this.totalCount
|
1278 | });
|
1279 | };
|
1280 |
|
1281 | __proto.getErrorCount = function () {
|
1282 | return this.elementInfos.filter(function (info) {
|
1283 | return info.hasError;
|
1284 | }).length;
|
1285 | };
|
1286 |
|
1287 | __proto.hasLoading = function () {
|
1288 | return this.elementInfos.some(function (info) {
|
1289 | return info.hasLoading;
|
1290 | });
|
1291 | };
|
1292 |
|
1293 | return ImReadyManager;
|
1294 | }(Component);
|
1295 |
|
1296 | var ImageLoader =
|
1297 | /*#__PURE__*/
|
1298 | function (_super) {
|
1299 | __extends(ImageLoader, _super);
|
1300 |
|
1301 | function ImageLoader() {
|
1302 | return _super !== null && _super.apply(this, arguments) || this;
|
1303 | }
|
1304 |
|
1305 | var __proto = ImageLoader.prototype;
|
1306 |
|
1307 | __proto.checkElement = function () {
|
1308 | var element = this.element;
|
1309 | var src = element.getAttribute("src");
|
1310 |
|
1311 | if (element.complete) {
|
1312 | if (src) {
|
1313 | // complete
|
1314 | if (!element.naturalWidth) {
|
1315 | this.onAlreadyError(element);
|
1316 | }
|
1317 |
|
1318 | return false;
|
1319 | } else {
|
1320 | // Using an external lazy loading module
|
1321 | this.onAlreadyPreReady();
|
1322 | }
|
1323 | }
|
1324 |
|
1325 | this.addEvents();
|
1326 | IS_IE && element.setAttribute("src", src);
|
1327 | return true;
|
1328 | };
|
1329 |
|
1330 | ImageLoader.EVENTS = ["load", "error"];
|
1331 | return ImageLoader;
|
1332 | }(Loader);
|
1333 |
|
1334 | var VideoLoader =
|
1335 | /*#__PURE__*/
|
1336 | function (_super) {
|
1337 | __extends(VideoLoader, _super);
|
1338 |
|
1339 | function VideoLoader() {
|
1340 | return _super !== null && _super.apply(this, arguments) || this;
|
1341 | }
|
1342 |
|
1343 | var __proto = VideoLoader.prototype;
|
1344 |
|
1345 | __proto.checkElement = function () {
|
1346 | var element = this.element; // HAVE_NOTHING: 0, no information whether or not the audio/video is ready
|
1347 | // HAVE_METADATA: 1, HAVE_METADATA - metadata for the audio/video is ready
|
1348 | // HAVE_CURRENT_DATA: 2, data for the current playback position is available, but not enough data to play next frame/millisecond
|
1349 | // HAVE_FUTURE_DATA: 3, data for the current and at least the next frame is available
|
1350 | // HAVE_ENOUGH_DATA: 4, enough data available to start playing
|
1351 |
|
1352 | if (element.readyState >= 1) {
|
1353 | return false;
|
1354 | }
|
1355 |
|
1356 | if (element.error) {
|
1357 | this.onAlreadyError(element);
|
1358 | return false;
|
1359 | }
|
1360 |
|
1361 | this.addEvents();
|
1362 | return true;
|
1363 | };
|
1364 |
|
1365 | VideoLoader.EVENTS = ["loadedmetadata", "error"];
|
1366 | return VideoLoader;
|
1367 | }(Loader);
|
1368 |
|
1369 | var ImReady =
|
1370 | /*#__PURE__*/
|
1371 | function (_super) {
|
1372 | __extends(ImReady, _super);
|
1373 |
|
1374 | function ImReady(options) {
|
1375 | if (options === void 0) {
|
1376 | options = {};
|
1377 | }
|
1378 |
|
1379 | return _super.call(this, __assign({
|
1380 | loaders: {
|
1381 | img: ImageLoader,
|
1382 | video: VideoLoader
|
1383 | }
|
1384 | }, options)) || this;
|
1385 | }
|
1386 |
|
1387 | return ImReady;
|
1388 | }(ImReadyManager);
|
1389 |
|
1390 | /*
|
1391 | egjs-imready
|
1392 | Copyright (c) 2020-present NAVER Corp.
|
1393 | MIT license
|
1394 | */
|
1395 |
|
1396 | var modules = {
|
1397 | __proto__: null,
|
1398 | 'default': ImReady,
|
1399 | Manager: ImReadyManager,
|
1400 | VideoLoader: VideoLoader,
|
1401 | ImageLoader: ImageLoader,
|
1402 | Loader: Loader
|
1403 | };
|
1404 |
|
1405 | /*
|
1406 | egjs-imready
|
1407 | Copyright (c) 2020-present NAVER Corp.
|
1408 | MIT license
|
1409 | */
|
1410 |
|
1411 | for (var name in modules) {
|
1412 | ImReady[name] = modules[name];
|
1413 | }
|
1414 |
|
1415 | return ImReady;
|
1416 |
|
1417 | })));
|
1418 | //# sourceMappingURL=imready.js.map
|