react-progressive-image-blur/lib/ReactProgressiveImageBlur.min.js

A progressive image loader with blur transition.

!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define("ReactProgressiveImageBlur",["react"],t):"object"==typeof exports?exports.ReactProgressiveImageBlur=t(require("react")):e.ReactProgressiveImageBlur=t(e.react)}(this,function(e){return function(e){function t(i){if(n[i])return n[i].exports;var o=n[i]={i:i,l:!1,exports:{}};return e[i].call(o.exports,o,o.exports,t),o.l=!0,o.exports}var n={};return t.m=e,t.c=n,t.d=function(e,n,i){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:i})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=0)}([function(e,t,n){"use strict";function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function o(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function r(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}function a(e){var t=e.resolutions;return m=t&&Object.assign({},t)||null,!0}Object.defineProperty(t,"__esModule",{value:!0}),t.DeferImg=void 0;var s=function(){function e(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(t,n,i){return n&&e(t.prototype,n),i&&e(t,i),t}}();t.DeferImgGlobalSettings=a;var l=n(1),u=function(e){return e&&e.__esModule?e:{default:e}}(l),c=n(2),d={position:"relative",overflow:"hidden"},f={position:"absolute",top:0,left:0,zIndex:2},h={50:"-w50",200:"-w200",630:"-w630",1180:"-o"},m=null;t.DeferImg=function(e){function t(e){i(this,t);var n=o(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return n.state={resolutions:e.resolutions||m||h,fileinfo:{ready:!1,filename:"",urlParams:"",filepath:"",extention:""},canLoad:!1,finished:!1,loadHd:!1,blurRelay:60,scrollEventListener:null},n.eventListener=!1,n.debounceTimer=null,n.debounceCalled=!1,n.shouldLoadDetectDebounce=n.shouldLoadDetectDebounce.bind(n),n.debounceFinished=n.debounceFinished.bind(n),n}return r(t,e),s(t,[{key:"componentDidMount",value:function(){this.setFileInfo(this.props.src),this.setElementId()}},{key:"componentWillUnmount",value:function(){this.eventListener&&this.unregisterScrollListener(),this.debounceTimer&&clearTimeout(this.debounceTimer)}},{key:"registerScrollListener",value:function(){this.eventListener=!0,window.addEventListener("scroll",this.shouldLoadDetectDebounce,!0)}},{key:"unregisterScrollListener",value:function(){this.eventListener&&(window.removeEventListener("scroll",this.shouldLoadDetectDebounce,!0),this.eventListener=!1)}},{key:"debounceFinished",value:function(){clearTimeout(this.debounceTimer),this.debounceTimer=null,this.debounceCalled=!1,this.shouldLoad()}},{key:"shouldLoadDetectDebounce",value:function(){this.debounceTimer||this.debounceCalled||(this.debounceCalled=!0,this.debounceTimer=setTimeout(this.debounceFinished,300))}},{key:"haveImage",value:function(){if((arguments.length>0&&void 0!==arguments[0]?arguments[0]:{}).thumb)return this.filenameConcat({resolution:Math.min.apply(null,Object.keys(this.state.resolutions))});var e=document.getElementById(this.state.idImgHolder).offsetWidth;if(this.state.resolutions[e])return this.filenameConcat({resolution:this.state.resolutions[e]});var t=Object.keys(this.state.resolutions).map(function(t){return{k:t,dist:Math.abs(e-t)}}).sort(function(e,t){return e.dist-t.dist}).shift();return this.filenameConcat({resolution:t.k})}},{key:"filenameConcat",value:function(e){var t=e.resolution;return this.state.fileinfo.filepath+this.state.fileinfo.filename+this.state.resolutions[t]+this.state.fileinfo.extention+this.state.fileinfo.urlParams}},{key:"blurImg",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},t=e.radius,n=e.iteration,i=void 0===n?1:n,o=e.source;(0,c.boxBlurImage)(o||this.state.idLowResImgHolder,this.state.idBlurCanvas,t,!1,i)}},{key:"blurAnimation",value:function(){var e=this,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=t.amount,i=t.source,o=arguments[1],r=this.state.blurRelay,a=r-n<=0?0:r-n,s=setInterval(function(){if(r<=a)return clearInterval(s),void(o&&o({finishPoint:a}));e.blurImg({radius:r,source:i}),r-=10},10);this.setState({blurRelay:a})}},{key:"setElementId",value:function(){var e=this,t=Date.now()+"."+Math.random();this.setState({idLowResImgHolder:"img-lr-"+t,idBlurCanvas:"canvas-blur-"+t,idHdImgHolder:"img-hd-"+t,idImgHolder:"img-container-"+t},function(){e.shouldLoad()||e.registerScrollListener()})}},{key:"setFileInfo",value:function(e){var t=t=/(\?|\&)([^=]+)\=([^&]+)/g,n=e.replace(t,""),i=e.match(t),o=i&&i.pop()||"",r=n.split("/").pop(),a=e.replace(r,"");r=r.split(".").shift();var s="."+n.split(".").pop();this.setState({fileinfo:{ready:!0,urlParams:o,filename:r,filepath:a,extention:s}})}},{key:"shouldLoad",value:function(){var e=document.getElementById(this.state.idImgHolder),t=e.getBoundingClientRect(),n=window.screen.height,i=t.top>=0&&t.top<=n;return this.setState({canLoad:i}),i}},{key:"switchToHd",value:function(){var e=this;this.blurAnimation({amount:40},function(){setTimeout(function(){e.setState({loadHd:!0})},800)})}},{key:"loadHdFinished",value:function(){var e=this;this.blurAnimation({amount:20,source:this.state.idHdImgHolder},function(){e.setState({finished:!0})})}},{key:"render",value:function(){var e=this;return this.state.fileinfo.ready&&this.state.canLoad?u.default.createElement("div",{className:this.props.className,id:this.state.idImgHolder,style:d},this.state.loadHd?u.default.createElement("img",{alt:this.props.alt,id:this.state.idHdImgHolder,src:this.haveImage({thumb:!1}),onLoad:function(){e.loadHdFinished()},style:{opacity:this.state.finished?1:0}}):u.default.createElement("img",{alt:this.props.alt,id:this.state.idLowResImgHolder,src:this.haveImage({thumb:!0}),onLoad:function(){e.switchToHd(),e.unregisterScrollListener()},style:{opacity:this.state.loadHd?1:0}}),this.state.finished?null:u.default.createElement("canvas",{id:this.state.idBlurCanvas,style:f}),this.props.figcaption?u.default.createElement("figcaption",null,this.props.figcaption):null):u.default.createElement("div",{id:this.state.idImgHolder,style:d})}}]),t}(u.default.Component)},function(t,n){t.exports=e},function(e,t,n){"use strict";function i(e,t,n,i,a){var s=document.getElementById(e),l=s.offsetWidth,u=s.offsetHeight,c=document.getElementById(t);c.style.width=l+"px",c.style.height=u+"px",c.width=l,c.height=u;var d=c.getContext("2d");d.clearRect(0,0,l,u),d.drawImage(s,0,0,l,u),isNaN(n)||n<1||(i?o(t,0,0,l,u,n,a):r(t,0,0,l,u,n,a))}function o(e,t,n,i,o,r,l){if(!(isNaN(r)||r<1)){r|=0,isNaN(l)&&(l=1),l|=0,l>3&&(l=3),l<1&&(l=1);var u,c=document.getElementById(e),d=c.getContext("2d");try{try{u=d.getImageData(t,n,i,o)}catch(e){try{netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead"),u=d.getImageData(t,n,i,o)}catch(e){throw new Error("unable to access local image data: "+e)}}}catch(e){throw new Error("unable to access image data: "+e)}for(var f,h,m,p,g,v,b,y,I,w,L,x,E,H,k=u.data,B=i-1,D=o-1,C=r+1,P=a[r],j=s[r],O=[],R=[],_=[],T=[],S=[],N=[];l-- >0;){for(E=x=0,v=0;v<o;v++){for(f=k[E]*C,h=k[E+1]*C,m=k[E+2]*C,p=k[E+3]*C,b=1;b<=r;b++)y=E+((b>B?B:b)<<2),f+=k[y++],h+=k[y++],m+=k[y++],p+=k[y];for(g=0;g<i;g++)O[x]=f,R[x]=h,_[x]=m,T[x]=p,0==v&&(S[g]=((y=g+C)<B?y:B)<<2,N[g]=(y=g-r)>0?y<<2:0),I=E+S[g],w=E+N[g],f+=k[I++]-k[w++],h+=k[I++]-k[w++],m+=k[I++]-k[w++],p+=k[I]-k[w],x++;E+=i<<2}for(g=0;g<i;g++){for(L=g,f=O[L]*C,h=R[L]*C,m=_[L]*C,p=T[L]*C,b=1;b<=r;b++)L+=b>D?0:i,f+=O[L],h+=R[L],m+=_[L],p+=T[L];for(x=g<<2,v=0;v<o;v++)k[x+3]=H=p*P>>>j,H>0?(H=255/H,k[x]=(f*P>>>j)*H,k[x+1]=(h*P>>>j)*H,k[x+2]=(m*P>>>j)*H):k[x]=k[x+1]=k[x+2]=0,0==g&&(S[v]=((y=v+C)<D?y:D)*i,N[v]=(y=v-r)>0?y*i:0),I=g+S[v],w=g+N[v],f+=O[I]-O[w],h+=R[I]-R[w],m+=_[I]-_[w],p+=T[I]-T[w],x+=i<<2}}d.putImageData(u,t,n)}}function r(e,t,n,i,o,r,l){if(!(isNaN(r)||r<1)){r|=0,isNaN(l)&&(l=1),l|=0,l>3&&(l=3),l<1&&(l=1);var u,c=document.getElementById(e),d=c.getContext("2d");try{try{u=d.getImageData(t,n,i,o)}catch(e){try{netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead"),u=d.getImageData(t,n,i,o)}catch(e){throw new Error("unable to access local image data: "+e)}}}catch(e){throw new Error("unable to access image data: "+e)}for(var f,h,m,p,g,v,b,y,I,w,L,x,E=u.data,H=i-1,k=o-1,B=r+1,D=[],C=[],P=[],j=a[r],O=s[r],R=[],_=[];l-- >0;){for(x=L=0,g=0;g<o;g++){for(f=E[x]*B,h=E[x+1]*B,m=E[x+2]*B,v=1;v<=r;v++)b=x+((v>H?H:v)<<2),f+=E[b++],h+=E[b++],m+=E[b++];for(p=0;p<i;p++)D[L]=f,C[L]=h,P[L]=m,0==g&&(R[p]=((b=p+B)<H?b:H)<<2,_[p]=(b=p-r)>0?b<<2:0),y=x+R[p],I=x+_[p],f+=E[y++]-E[I++],h+=E[y++]-E[I++],m+=E[y++]-E[I++],L++;x+=i<<2}for(p=0;p<i;p++){for(w=p,f=D[w]*B,h=C[w]*B,m=P[w]*B,v=1;v<=r;v++)w+=v>k?0:i,f+=D[w],h+=C[w],m+=P[w];for(L=p<<2,g=0;g<o;g++)E[L]=f*j>>>O,E[L+1]=h*j>>>O,E[L+2]=m*j>>>O,0==p&&(R[g]=((b=g+B)<k?b:k)*i,_[g]=(b=g-r)>0?b*i:0),y=p+R[g],I=p+_[g],f+=D[y]-D[I],h+=C[y]-C[I],m+=P[y]-P[I],L+=i<<2}}d.putImageData(u,t,n)}}Object.defineProperty(t,"__esModule",{value:!0}),t.boxBlurImage=i,t.boxBlurCanvasRGBA=o,t.boxBlurCanvasRGB=r;var a=[1,57,41,21,203,34,97,73,227,91,149,62,105,45,39,137,241,107,3,173,39,71,65,238,219,101,187,87,81,151,141,133,249,117,221,209,197,187,177,169,5,153,73,139,133,127,243,233,223,107,103,99,191,23,177,171,165,159,77,149,9,139,135,131,253,245,119,231,224,109,211,103,25,195,189,23,45,175,171,83,81,79,155,151,147,9,141,137,67,131,129,251,123,30,235,115,113,221,217,53,13,51,50,49,193,189,185,91,179,175,43,169,83,163,5,79,155,19,75,147,145,143,35,69,17,67,33,65,255,251,247,243,239,59,29,229,113,111,219,27,213,105,207,51,201,199,49,193,191,47,93,183,181,179,11,87,43,85,167,165,163,161,159,157,155,77,19,75,37,73,145,143,141,35,138,137,135,67,33,131,129,255,63,250,247,61,121,239,237,117,29,229,227,225,111,55,109,216,213,211,209,207,205,203,201,199,197,195,193,48,190,47,93,185,183,181,179,178,176,175,173,171,85,21,167,165,41,163,161,5,79,157,78,154,153,19,75,149,74,147,73,144,143,71,141,140,139,137,17,135,134,133,66,131,65,129,1],s=[0,9,10,10,14,12,14,14,16,15,16,15,16,15,15,17,18,17,12,18,16,17,17,19,19,18,19,18,18,19,19,19,20,19,20,20,20,20,20,20,15,20,19,20,20,20,21,21,21,20,20,20,21,18,21,21,21,21,20,21,17,21,21,21,22,22,21,22,22,21,22,21,19,22,22,19,20,22,22,21,21,21,22,22,22,18,22,22,21,22,22,23,22,20,23,22,22,23,23,21,19,21,21,21,23,23,23,22,23,23,21,23,22,23,18,22,23,20,22,23,23,23,21,22,20,22,21,22,24,24,24,24,24,22,21,24,23,23,24,21,24,23,24,22,24,24,22,24,24,22,23,24,24,24,20,23,22,23,24,24,24,24,24,24,24,23,21,23,22,23,24,24,24,22,24,24,24,23,22,24,24,25,23,25,25,23,24,25,25,24,22,25,25,25,24,23,24,25,25,25,25,25,25,25,25,25,25,25,25,23,25,23,24,25,25,25,25,25,25,25,25,25,24,22,25,25,23,25,25,20,24,25,24,25,25,22,24,25,24,25,24,25,25,24,25,25,25,25,22,25,25,25,24,25,24,25,18]}])});