@egjs/imready
Version:
This module is used to wait for the image or video to be ready.
11 lines (10 loc) • 15.7 kB
JavaScript
/*
Copyright (c) NAVER Corp.
name: @egjs/imready
license: MIT
author: NAVER Corp.
repository: https://github.com/naver/egjs-imready
version: 1.4.1
*/
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):((t=t||self).eg=t.eg||{},t.eg.ImReady=e())}(this,function(){"use strict";var r=function(t,e){return(r=Object.setPrototypeOf||({__proto__:[]}instanceof Array?function(t,e){t.__proto__=e}:function(t,e){for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&(t[n]=e[n])}))(t,e)};function i(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Class extends value "+String(e)+" is not a constructor or null");function n(){this.constructor=t}r(t,e),t.prototype=null===e?Object.create(e):(n.prototype=e.prototype,new n)}var a=function(){return(a=Object.assign||function(t){for(var e,n=1,r=arguments.length;n<r;n++)for(var o in e=arguments[n])Object.prototype.hasOwnProperty.call(e,o)&&(t[o]=e[o]);return t}).apply(this,arguments)};function d(){for(var t=0,e=0,n=arguments.length;e<n;e++)t+=arguments[e].length;for(var r=Array(t),o=0,e=0;e<n;e++)for(var i=arguments[e],a=0,s=i.length;a<s;a++,o++)r[o]=i[a];return r}function h(t){var e="function"==typeof Symbol&&Symbol.iterator,n=e&&t[e],r=0;if(n)return n.call(t);if(t&&"number"==typeof t.length)return{next:function(){return{value:(t=t&&r>=t.length?void 0:t)&&t[r++],done:!t}}};throw new TypeError(e?"Object is not iterable.":"Symbol.iterator is not defined.")}function s(){for(var t=[],e=0;e<arguments.length;e++)t=t.concat(function(t,e){var n="function"==typeof Symbol&&t[Symbol.iterator];if(!n)return t;var r,o,i=n.call(t),a=[];try{for(;(void 0===e||0<e--)&&!(r=i.next()).done;)a.push(r.value)}catch(t){o={error:t}}finally{try{r&&!r.done&&(n=i.return)&&n.call(i)}finally{if(o)throw o.error}}return a}(arguments[e]));return t}function f(t){return void 0===t}var o=function(){function t(t,e){var n,r;if(this._canceled=!1,e)try{for(var o=h(Object.keys(e)),i=o.next();!i.done;i=o.next()){var a=i.value;this[a]=e[a]}}catch(t){n={error:t}}finally{try{i&&!i.done&&(r=o.return)&&r.call(o)}finally{if(n)throw n.error}}this.eventType=t}var e=t.prototype;return e.stop=function(){this._canceled=!0},e.isCanceled=function(){return this._canceled},t}(),n=function(){function t(){this._eventHandler={}}var e=t.prototype;return e.trigger=function(e){for(var n=[],t=1;t<arguments.length;t++)n[t-1]=arguments[t];var r=e instanceof o?e.eventType:e,r=s(this._eventHandler[r]||[]);return r.length<=0||(e instanceof o?(e.currentTarget=this,r.forEach(function(t){t(e)})):r.forEach(function(t){t.apply(void 0,s(n))})),this},e.once=function(n,r){var o,i=this;if("object"==typeof n&&f(r)){var t,e=n;for(t in e)this.once(t,e[t])}else"string"==typeof n&&"function"==typeof r&&(o=function(){for(var t=[],e=0;e<arguments.length;e++)t[e]=arguments[e];r.apply(void 0,s(t)),i.off(n,o)},this.on(n,o));return this},e.hasOn=function(t){return!!this._eventHandler[t]},e.on=function(t,e){if("object"==typeof t&&f(e)){var n,r=t;for(n in r)this.on(n,r[n])}else{var o;"string"==typeof t&&"function"==typeof e&&(o=this._eventHandler[t],f(o)&&(this._eventHandler[t]=[],o=this._eventHandler[t]),o.push(e))}return this},e.off=function(t,e){var n,r;if(f(t))this._eventHandler={};else if(f(e))if("string"==typeof t)delete this._eventHandler[t];else{var o,i=t;for(o in i)this.off(o,i[o])}else{var a=this._eventHandler[t];if(a){var s=0;try{for(var u=h(a),c=u.next();!c.done;c=u.next()){if(c.value===e){a.splice(s,1),a.length<=0&&delete this._eventHandler[t];break}s++}}catch(t){n={error:t}}finally{try{c&&!c.done&&(r=u.return)&&r.call(u)}finally{if(n)throw n.error}}}}return this},t.VERSION="3.0.4",t}(),u=o,t="undefined"!=typeof window,e=t?window.navigator.userAgent:"",z=t&&!!("getComputedStyle"in window),H=/MSIE|Trident|Windows Phone|Edge/.test(e),q=t&&!!("addEventListener"in document),c="width",l="height",y=["preReadyElement","readyElement","error","preReady","ready"];function p(t,e){return t.getAttribute(e)||""}function v(t){return[].slice.call(t)}function g(t,e){return void 0===e&&(e="data-"),"loading"in t&&"lazy"===t.getAttribute("loading")||!!t.getAttribute(e+"lazy")}function E(t,e,n){q?t.addEventListener(e,n,!1):t.attachEvent?t.attachEvent("on"+e,n):t["on"+e]=n}function R(t,e,n){t.removeEventListener?t.removeEventListener(e,n,!1):t.detachEvent?t.detachEvent("on"+e,n):t["on"+e]=null}function m(t,e){var n=t["client"+e]||t["offset"+e];return parseFloat(n||(n=t,((z?window.getComputedStyle(n):n.currentStyle)||{})[e.toLowerCase()]))||0}var C=[];function _(t,e){C.length||E(window,"resize",b),t.__PREFIX__=e,C.push(t),P(t)}function P(t,e){void 0===e&&(e="data-");var n,e=t.__PREFIX__||e,r=parseInt(p(t,""+e+c),10)||0,o=parseInt(p(t,""+e+l),10)||0;p(t,e+"fixed")===l?(n=m(t,"Height")||o,t.style[c]=r/o*n+"px"):(n=m(t,"Width")||r,t.style[l]=o/r*n+"px")}function b(){C.forEach(function(t){P(t)})}var e=function(o){function t(t,e){void 0===e&&(e={});var n,r=o.call(this)||this,e=(r.isReady=!1,r.isPreReady=!1,r.hasDataSize=!1,r.hasLoading=!1,r.isSkip=!1,r.onCheck=function(t){r.clear(),t&&"error"===t.type&&r.onError(r.element),r.hasLoading&&r.checkElement()||(t=!r.hasDataSize&&!r.hasLoading,r.onReady(t))},r.options=a({prefix:"data-"},e),r.element=t,r.options.prefix);return r.hasDataSize=(n=e,!!t.getAttribute((n=void 0===e?"data-":n)+"width")),r.isSkip=(n=e,!!t.getAttribute((n=void 0===e?"data-":n)+"skip")),r.hasLoading=g(t,e),r}i(t,o);var e=t.prototype;return e.check=function(){return this.isSkip||!this.checkElement()?(this.onAlreadyReady(!0),!1):(this.hasDataSize&&_(this.element,this.options.prefix),(this.hasDataSize||this.hasLoading)&&this.onAlreadyPreReady(),!0)},e.addEvents=function(){var e=this,n=this.element;this.constructor.EVENTS.forEach(function(t){E(n,t,e.onCheck)})},e.clear=function(){var e=this,n=this.element;this.constructor.EVENTS.forEach(function(t){R(n,t,e.onCheck)}),this.removeAutoSizer()},e.destroy=function(){this.clear(),this.off()},e.removeAutoSizer=function(){var t,e,n;this.hasDataSize&&(e=this.options.prefix,t=this.element,e=e,(n=C.indexOf(t))<0||(e=p(t,e+"fixed"),delete t.__PREFIX__,t.style[e===l?c:l]="",C.splice(n,1),C.length)||R(window,"resize",b))},e.onError=function(t){this.trigger("error",{element:this.element,target:t})},e.onPreReady=function(){this.isPreReady||(this.isPreReady=!0,this.trigger("preReady",{element:this.element,hasLoading:this.hasLoading,isSkip:this.isSkip}))},e.onReady=function(t){this.isReady||((t=!this.isPreReady&&t)&&(this.isPreReady=!0),this.removeAutoSizer(),this.isReady=!0,this.trigger("ready",{element:this.element,withPreReady:t,hasLoading:this.hasLoading,isSkip:this.isSkip}))},e.onAlreadyError=function(t){var e=this;setTimeout(function(){e.onError(t)})},e.onAlreadyPreReady=function(){var t=this;setTimeout(function(){t.onPreReady()})},e.onAlreadyReady=function(t){var e=this;setTimeout(function(){e.onReady(t)})},t.EVENTS=[],t}(n),N=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}i(e,t);var n=e.prototype;return n.setHasLoading=function(t){this.hasLoading=t},n.check=function(){return this.isSkip?(this.onAlreadyReady(!0),!1):(this.hasDataSize?(_(this.element,this.options.prefix),this.onAlreadyPreReady()):this.trigger("requestChildren"),!0)},n.checkElement=function(){return!0},n.destroy=function(){this.clear(),this.trigger("requestDestroy"),this.off()},n.onAlreadyPreReady=function(){t.prototype.onAlreadyPreReady.call(this),this.trigger("reqeustReadyChildren")},e.EVENTS=[],e}(e),t=function(n){function t(t){void 0===t&&(t={});var e=n.call(this)||this;return e.readyCount=0,e.preReadyCount=0,e.totalCount=0,e.totalErrorCount=0,e.isPreReadyOver=!0,e.elementInfos=[],e.options=a({loaders:{},prefix:"data-"},t),e}i(t,n);var e=t.prototype;return e.check=function(t){var i=this,n=this.options.prefix,t=(this.clear(),this.elementInfos=v(t).map(function(t,o){var e=i.getLoader(t,{prefix:n});return e.check(),e.on("error",function(t){i.onError(o,t.target)}).on("preReady",function(t){var e=i.elementInfos[o],e=(e.hasLoading=t.hasLoading,e.isSkip=t.isSkip,i.checkPreReady(o));i.onPreReadyElement(o),e&&i.onPreReady()}).on("ready",function(t){var e=t.withPreReady,n=t.hasLoading,t=t.isSkip,r=i.elementInfos[o],n=(r.hasLoading=n,r.isSkip=t,e&&i.checkPreReady(o)),r=i.checkReady(o);e&&i.onPreReadyElement(o),i.onReadyElement(o),n&&i.onPreReady(),r&&i.onReady()}),{loader:e,element:t,hasLoading:!1,hasError:!1,isPreReady:!1,isReady:!1,isSkip:!1}}),this.elementInfos.length);return(this.totalCount=t)||setTimeout(function(){i.onPreReady(),i.onReady()}),this},e.getTotalCount=function(){return this.totalCount},e.isPreReady=function(){return this.elementInfos.every(function(t){return t.isPreReady})},e.isReady=function(){return this.elementInfos.every(function(t){return t.isReady})},e.hasError=function(){return 0<this.totalErrorCount},e.clear=function(){this.isPreReadyOver=!1,this.totalCount=0,this.preReadyCount=0,this.readyCount=0,this.totalErrorCount=0,this.elementInfos.forEach(function(t){t.loader&&t.loader.destroy()}),this.elementInfos=[]},e.destroy=function(){this.clear(),this.off()},e.getLoader=function(o,t){var i,e,a,s,u=this,n=o.tagName.toLowerCase(),r=this.options.loaders,c=t.prefix,h=Object.keys(r);return r[n]?new r[n](o,t):(i=new N(o,t),e=v(o.querySelectorAll(h.join(", "))),i.setHasLoading(e.some(function(t){return g(t,c)})),a=!1,s=this.clone().on("error",function(t){i.onError(t.target)}).on("ready",function(){i.onReady(a)}),i.on("requestChildren",function(){r=o,t=h,e=u.options.prefix,n=v(r.querySelectorAll(d(["["+e+"skip] ["+e+"width]"],t.map(function(t){return["["+e+"skip] "+t,t+"["+e+"skip]","["+e+"width] "+t].join(", ")})).join(", ")));var t,e,n,r=v(r.querySelectorAll("["+e+"width], "+t.join(", "))).filter(function(t){return-1===n.indexOf(t)});s.check(r).on("preReady",function(t){(a=t.isReady)||i.onPreReady()})}).on("reqeustReadyChildren",function(){s.check(e)}).on("requestDestroy",function(){s.destroy()}),i)},e.clone=function(){return new t(a({},this.options))},e.checkPreReady=function(t){return this.elementInfos[t].isPreReady=!0,++this.preReadyCount,!(this.preReadyCount<this.totalCount)},e.checkReady=function(t){return this.elementInfos[t].isReady=!0,++this.readyCount,!(this.readyCount<this.totalCount)},e.onError=function(t,e){var n=this.elementInfos[t];n.hasError=!0,this.trigger(new u("error",{element:n.element,index:t,target:e,errorCount:this.getErrorCount(),totalErrorCount:++this.totalErrorCount}))},e.onPreReadyElement=function(t){var e=this.elementInfos[t];this.trigger(new u("preReadyElement",{element:e.element,index:t,preReadyCount:this.preReadyCount,readyCount:this.readyCount,totalCount:this.totalCount,isPreReady:this.isPreReady(),isReady:this.isReady(),hasLoading:e.hasLoading,isSkip:e.isSkip}))},e.onPreReady=function(){this.isPreReadyOver=!0,this.trigger(new u("preReady",{readyCount:this.readyCount,totalCount:this.totalCount,isReady:this.isReady(),hasLoading:this.hasLoading()}))},e.onReadyElement=function(t){var e=this.elementInfos[t];this.trigger(new u("readyElement",{index:t,element:e.element,hasError:e.hasError,errorCount:this.getErrorCount(),totalErrorCount:this.totalErrorCount,preReadyCount:this.preReadyCount,readyCount:this.readyCount,totalCount:this.totalCount,isPreReady:this.isPreReady(),isReady:this.isReady(),hasLoading:e.hasLoading,isPreReadyOver:this.isPreReadyOver,isSkip:e.isSkip}))},e.onReady=function(){this.trigger(new u("ready",{errorCount:this.getErrorCount(),totalErrorCount:this.totalErrorCount,totalCount:this.totalCount}))},e.getErrorCount=function(){return this.elementInfos.filter(function(t){return t.hasError}).length},e.hasLoading=function(){return this.elementInfos.some(function(t){return t.hasLoading})},t}(n),S=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return i(e,t),e.prototype.checkElement=function(){var t=this.element,e=t.getAttribute("src");if(t.complete){if(e)return t.naturalWidth||this.onAlreadyError(t),!1;this.onAlreadyPreReady()}return this.addEvents(),H&&t.setAttribute("src",e),!0},e.EVENTS=["load","error"],e}(e),k=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return i(e,t),e.prototype.checkElement=function(){var t=this.element;return!(1<=t.readyState||(t.error?(this.onAlreadyError(t),1):(this.addEvents(),0)))},e.EVENTS=["loadedmetadata","error"],e}(e),w=function(e){function t(t){return e.call(this,a({loaders:{img:S,video:k}},t=void 0===t?{}:t))||this}return i(t,e),t}(t);function L(t){return Object.keys(t)}var O="__observers__",V="__computed__",A=1,x="__CFCS_DETECTED_DEPENDENCIES__";function F(){Object[x]=Object[x]||{},(t=Object[x])[A]=t[A]||[];var t=t[A];return t[t.length-1]}var M=function(){function t(t){this._emitter=new n,this._current=t}var e=t.prototype;return Object.defineProperty(e,"current",{get:function(){var t=F();return null!=t&&t.push(this),this._current},set:function(t){this._setCurrent(t)},enumerable:!1,configurable:!0}),e.subscribe=function(t){return this.current,this._emitter.on("update",t),this},e.unsubscribe=function(t){return this._emitter.off("update",t),this},e._setCurrent=function(t){var e=this._current,n=t!==e;this._current=t,n&&this._emitter.trigger("update",t,e)},e.toString=function(){return"".concat(this.current)},e.valueOf=function(){return this.current},t}();function I(t,e,n){void 0===n&&(n=e),Object.defineProperty(t,e,{configurable:!0,get:function(){return T(this,n).current},set:function(t){T(this,n,t).current=t}}),n!==e&&Object.defineProperty(t,n,{configurable:!0,get:function(){return T(this,n).current}})}function W(t){var r="function"==typeof t?t():t,o={};return Y(o),L(r).forEach(function(t){var e,n=r[t];(e=n)&&"object"==typeof e&&"current"in e&&"subscribe"in e&&"unsubscribe"in e?B(o,t,n):B(o,t,X(n)),function(){for(var n=[],t=0;t<arguments.length;t++)n[t]=arguments[t];return 1<n.length?I(n[0],n[1]):function(t,e){return I(t,e,n[0])}}(t)(o,t)}),(t=o).subscribe=function(t,e){this[t],T(this,t).subscribe(e)},t.unsubscribe=function(t,e){var n=this;t?t in this&&T(this,t).unsubscribe(e):L(j(this)).forEach(function(t){n.unsubscribe(t)})},o}function X(t){return new M(t)}function Y(t){var e={};Object.defineProperty(t,O,{get:function(){return e}})}function j(e){e[O]||Y(e);var n=e[O],t=null==(t=null==(t=null==e?void 0:e.constructor)?void 0:t.prototype)?void 0:t[V];return t&&t.forEach(function(t){!(t in n)&&t in e&&e[t]}),n}function T(t,e,n){t=j(t);return t[e]||(t[e]=X(n)),t[e]}function B(t,e,n){j(t)[e]=n}var D,G={__proto__:null,default:w,Manager:t,VideoLoader:k,ImageLoader:S,Loader:e,EVENTS:y,PROPS:["prefix","loaders"],REACTIVE_IMREADY:function(t){var e=t.setEvents,n=t.setMethods,r=t.on,o=t.onInit,i=t.onDestroy,t=t.getProps,a=(e(y),n(["add"]),[]),s=W({preReadyCount:0,readyCount:0,errorCount:0,totalErrorCount:0,totalCount:0,isPreReady:!1,isReady:!1,hasError:!1,isPreReadyOver:!1,add:function(t){a.push(t)}}),u=t()||{},c=new w(u);return c.on("error",function(t){s.hasError=!0,s.errorCount=t.errorCount,s.totalErrorCount=t.totalErrorCount}).on("preReadyElement",function(t){s.preReadyCount=t.preReadyCount}).on("readyElement",function(t){s.readyCount=t.readyCount,s.isPreReadyOver=t.isPreReadyOver}).on("preReady",function(){s.isPreReady=!0}).on("ready",function(){s.isReady=!0}),r(function(t,e,n){return c.on(e,n),function(){c.off(e,n)}}),o(function(){var n=null===u?void 0:u.selector,e=[];a.forEach(function(t){t&&("string"==typeof t?e=d(e,v(document.querySelectorAll(t))):t instanceof Element?e.push(t):("value"in t||"current"in t)&&(t=t.value||t.current)&&e.push(t))}),n&&(e=e.reduce(function(t,e){return d(t,[].slice.call(e.querySelectorAll(n)))},[])),s.totalCount=e.length,c.check(e)}),i(function(){c.destroy()}),s}};for(D in G)w[D]=G[D];return w});
//# sourceMappingURL=imready.min.js.map