medium-image-progressive/dist/umd.min.js

Medium's progressive image style

!function(e,i){"object"==typeof exports&&"undefined"!=typeof module?module.exports=i():"function"==typeof define&&define.amd?define(i):e.mediumImageProgressive=i()}(this,function(){"use strict";var e=[512,512,456,512,328,456,335,512,405,328,271,456,388,335,292,512,454,405,364,328,298,271,496,456,420,388,360,335,312,292,273,512,482,454,428,405,383,364,345,328,312,298,284,271,259,496,475,456,437,420,404,388,374,360,347,335,323,312,302,292,282,273,265,512,497,482,468,454,441,428,417,405,394,383,373,364,354,345,337,328,320,312,305,298,291,284,278,271,265,259,507,496,485,475,465,456,446,437,428,420,412,404,396,388,381,374,367,360,354,347,341,335,329,323,318,312,307,302,297,292,287,282,278,273,269,265,261,512,505,497,489,482,475,468,461,454,447,441,435,428,422,417,411,405,399,394,389,383,378,373,368,364,359,354,350,345,341,337,332,328,324,320,316,312,309,305,301,298,294,291,287,284,281,278,274,271,268,265,262,259,257,507,501,496,491,485,480,475,470,465,460,456,451,446,442,437,433,428,424,420,416,412,408,404,400,396,392,388,385,381,377,374,370,367,363,360,357,354,350,347,344,341,338,335,332,329,326,323,320,318,315,312,310,307,304,302,299,297,294,292,289,287,285,282,280,278,275,273,271,269,267,265,263,261,259],i=[9,11,12,13,13,14,14,15,15,15,15,16,16,16,16,17,17,17,17,17,17,17,18,18,18,18,18,18,18,18,18,19,19,19,19,19,19,19,19,19,19,19,19,19,19,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24];function n(e,i,n,t,r){if("string"==typeof e)e=document.getElementById(e);else if("undefined"!=typeof HTMLCanvasElement&&!e instanceof HTMLCanvasElement)return;var a,o=e.getContext("2d");try{try{a=o.getImageData(i,n,t,r)}catch(e){throw new Error("unable to access local image data: "+e)}}catch(e){throw new Error("unable to access image data: "+e)}return a}function t(e,i,t,a,o,s){if(!(isNaN(s)||s<1)){s|=0;var m=n(e,i,t,a,o);m=r(m,i,t,a,o,s),e.getContext("2d").putImageData(m,i,t)}}function r(n,t,r,a,o,m){var g,d,c,l,u,v,f,p,b,y,h,x,w,E,I,A,L,k,C,N,B,G,H,T,q=n.data,M=m+m+1,R=a-1,S=o-1,D=m+1,U=D*(D+1)/2,z=new s,F=z;for(c=1;c<M;c++)if(F=F.next=new s,c==D)var j=F;F.next=z;var P=null,W=null;f=v=0;var J=e[m],K=i[m];for(d=0;d<o;d++){for(A=L=k=C=p=b=y=h=0,x=D*(N=q[v]),w=D*(B=q[v+1]),E=D*(G=q[v+2]),I=D*(H=q[v+3]),p+=U*N,b+=U*B,y+=U*G,h+=U*H,F=z,c=0;c<D;c++)F.r=N,F.g=B,F.b=G,F.a=H,F=F.next;for(c=1;c<D;c++)l=v+((R<c?R:c)<<2),p+=(F.r=N=q[l])*(T=D-c),b+=(F.g=B=q[l+1])*T,y+=(F.b=G=q[l+2])*T,h+=(F.a=H=q[l+3])*T,A+=N,L+=B,k+=G,C+=H,F=F.next;for(P=z,W=j,g=0;g<a;g++)q[v+3]=H=h*J>>K,0!=H?(H=255/H,q[v]=(p*J>>K)*H,q[v+1]=(b*J>>K)*H,q[v+2]=(y*J>>K)*H):q[v]=q[v+1]=q[v+2]=0,p-=x,b-=w,y-=E,h-=I,x-=P.r,w-=P.g,E-=P.b,I-=P.a,l=f+((l=g+m+1)<R?l:R)<<2,p+=A+=P.r=q[l],b+=L+=P.g=q[l+1],y+=k+=P.b=q[l+2],h+=C+=P.a=q[l+3],P=P.next,x+=N=W.r,w+=B=W.g,E+=G=W.b,I+=H=W.a,A-=N,L-=B,k-=G,C-=H,W=W.next,v+=4;f+=a}for(g=0;g<a;g++){for(L=k=C=A=b=y=h=p=0,x=D*(N=q[v=g<<2]),w=D*(B=q[v+1]),E=D*(G=q[v+2]),I=D*(H=q[v+3]),p+=U*N,b+=U*B,y+=U*G,h+=U*H,F=z,c=0;c<D;c++)F.r=N,F.g=B,F.b=G,F.a=H,F=F.next;for(u=a,c=1;c<=m;c++)v=u+g<<2,p+=(F.r=N=q[v])*(T=D-c),b+=(F.g=B=q[v+1])*T,y+=(F.b=G=q[v+2])*T,h+=(F.a=H=q[v+3])*T,A+=N,L+=B,k+=G,C+=H,F=F.next,c<S&&(u+=a);for(v=g,P=z,W=j,d=0;d<o;d++)q[(l=v<<2)+3]=H=h*J>>K,H>0?(H=255/H,q[l]=(p*J>>K)*H,q[l+1]=(b*J>>K)*H,q[l+2]=(y*J>>K)*H):q[l]=q[l+1]=q[l+2]=0,p-=x,b-=w,y-=E,h-=I,x-=P.r,w-=P.g,E-=P.b,I-=P.a,l=g+((l=d+D)<S?l:S)*a<<2,p+=A+=P.r=q[l],b+=L+=P.g=q[l+1],y+=k+=P.b=q[l+2],h+=C+=P.a=q[l+3],P=P.next,x+=N=W.r,w+=B=W.g,E+=G=W.b,I+=H=W.a,A-=N,L-=B,k-=G,C-=H,W=W.next,v+=a}return n}function a(e,i,t,r,a,s){if(!(isNaN(s)||s<1)){s|=0;var m=n(e,i,t,r,a);m=o(m,i,t,r,a,s),e.getContext("2d").putImageData(m,i,t)}}function o(n,t,r,a,o,m){var g,d,c,l,u,v,f,p,b,y,h,x,w,E,I,A,L,k,C,N,B=n.data,G=m+m+1,H=a-1,T=o-1,q=m+1,M=q*(q+1)/2,R=new s,S=R;for(c=1;c<G;c++)if(S=S.next=new s,c==q)var D=S;S.next=R;var U=null,z=null;f=v=0;var F=e[m],j=i[m];for(d=0;d<o;d++){for(E=I=A=p=b=y=0,h=q*(L=B[v]),x=q*(k=B[v+1]),w=q*(C=B[v+2]),p+=M*L,b+=M*k,y+=M*C,S=R,c=0;c<q;c++)S.r=L,S.g=k,S.b=C,S=S.next;for(c=1;c<q;c++)l=v+((H<c?H:c)<<2),p+=(S.r=L=B[l])*(N=q-c),b+=(S.g=k=B[l+1])*N,y+=(S.b=C=B[l+2])*N,E+=L,I+=k,A+=C,S=S.next;for(U=R,z=D,g=0;g<a;g++)B[v]=p*F>>j,B[v+1]=b*F>>j,B[v+2]=y*F>>j,p-=h,b-=x,y-=w,h-=U.r,x-=U.g,w-=U.b,l=f+((l=g+m+1)<H?l:H)<<2,p+=E+=U.r=B[l],b+=I+=U.g=B[l+1],y+=A+=U.b=B[l+2],U=U.next,h+=L=z.r,x+=k=z.g,w+=C=z.b,E-=L,I-=k,A-=C,z=z.next,v+=4;f+=a}for(g=0;g<a;g++){for(I=A=E=b=y=p=0,h=q*(L=B[v=g<<2]),x=q*(k=B[v+1]),w=q*(C=B[v+2]),p+=M*L,b+=M*k,y+=M*C,S=R,c=0;c<q;c++)S.r=L,S.g=k,S.b=C,S=S.next;for(u=a,c=1;c<=m;c++)v=u+g<<2,p+=(S.r=L=B[v])*(N=q-c),b+=(S.g=k=B[v+1])*N,y+=(S.b=C=B[v+2])*N,E+=L,I+=k,A+=C,S=S.next,c<T&&(u+=a);for(v=g,U=R,z=D,d=0;d<o;d++)B[l=v<<2]=p*F>>j,B[l+1]=b*F>>j,B[l+2]=y*F>>j,p-=h,b-=x,y-=w,h-=U.r,x-=U.g,w-=U.b,l=g+((l=d+q)<T?l:T)*a<<2,p+=E+=U.r=B[l],b+=I+=U.g=B[l+1],y+=A+=U.b=B[l+2],U=U.next,h+=L=z.r,x+=k=z.g,w+=C=z.b,E-=L,I-=k,A-=C,z=z.next,v+=a}return n}function s(){this.r=0,this.g=0,this.b=0,this.a=0,this.next=null}var m={image:function(e,i,n,r){if("string"==typeof e)e=document.getElementById(e);else if("undefined"!=typeof HTMLImageElement&&!e instanceof HTMLImageElement)return;var o=e.naturalWidth,s=e.naturalHeight;if("string"==typeof i)i=document.getElementById(i);else if("undefined"!=typeof HTMLCanvasElement&&!i instanceof HTMLCanvasElement)return;i.width=o,i.height=s;var m=i.getContext("2d");m.clearRect(0,0,o,s),m.drawImage(e,0,0),isNaN(n)||n<1||(r?t(i,0,0,o,s,n):a(i,0,0,o,s,n))},canvasRGBA:t,canvasRGB:a,imageDataRGBA:r,imageDataRGB:o},g="\n.medium-image-progressive-container {\n  position: relative;\n  width: 100%;\n  margin: 0 auto;\n  margin-top: 43px;\n  display: block;\n}\n.image-loaded.medium-image-progressive canvas {\n  visibility: hidden;\n  opacity: 0;\n  -webkit-transition: visibility 0s linear .5s,opacity .1s .4s;\n  transition: visibility 0s linear .5s,opacity .1s .4s;\n}\n.image-loaded.medium-image-progressive .medium-image-origin {\n  visibility: visible;\n  opacity: 1;\n  -webkit-transition: visibility 0s linear 0s,opacity .4s 0s;\n  transition: visibility 0s linear 0s,opacity .4s 0s;\n}\n.medium-image-progressive-container .medium-image-progressive:not(.image-loaded):not(.canvas-loaded) {\n  background-color: rgba(0, 0, 0, 0.05);\n}\n.medium-image-progressive-container .medium-image-progressive {\n  position: absolute;\n  top:0;left:0;width:100%;height:100%;\n  max-width: 100%;\n}\n.medium-image-progressive-container .medium-image-origin,\n.medium-image-progressive-container .medium-image-progressive canvas {\n  display: block;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n}\n.medium-image-progressive-container img, .medium-image-progressive-container canvas {\n  margin: 0 auto;\n}\n.medium-image-progressive-container .canvas-loaded.medium-image-progressive:not(.image-loaded) canvas {\n  visibility: visible;\n  opacity: 1;\n  -webkit-transition: visibility 0s linear 0s,opacity .4s 0s;\n  transition: visibility 0s linear 0s,opacity .4s 0s;\n}\n.medium-image-progressive-container .medium-image-origin,\n.medium-image-progressive-container .medium-image-progressive canvas {\n  visibility: hidden;\n  opacity: 0;\n  -webkit-backface-visibility: hidden;\n  backface-visibility: hidden;\n}\n",d=function(e){if(Array.isArray(e)){for(var i=0,n=Array(e.length);i<e.length;i++)n[i]=e[i];return n}return Array.from(e)},c=null;var l=0;return function(e){var i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};if("undefined"!=typeof document){"string"==typeof e&&(e=[].concat(d(document.querySelectorAll(e)))),e instanceof window.NodeList&&(e=[].concat(d(e))),Array.isArray(e)||(e=[e]);var n,t=i.progressImageUrlGetter,r=void 0===t?function(e){return e.getAttribute("src")}:t,a=i.originImageUrlGetter,o=void 0===a?function(e){return e.getAttribute("data-src")}:a,s=i.widthGetter,u=void 0===s?function(e){return e.getAttribute("width")}:s,v=i.heightGetter,f=void 0===v?function(e){return e.getAttribute("height")}:v,p=i.blurEnable,b=void 0===p||p;c||(n=g,(c=c||document.createElement("style")).type="text/css",c.textContent=n,(document.head||document.getElementsByTagName("head")[0]).appendChild(c)),e.forEach(function(e){if(!e.tagName||"img"!==e.tagName.toLowerCase())throw new Error("medium-image-progress requires <img/> element, but "+e.tagName);var i=encodeURI(r(e)),n=encodeURI(o(e)),t=u(e),a=f(e);t=t&&parseFloat(t),a=a&&parseFloat(a);var s=1;t&&a&&(s=a/t),t=t?t+"px":"100%",a=a?a+"px":"0";var g=e.parentElement,d="medium-progress-"+l++;e.outerHTML="\n<div id="+d+' class="medium-image-progressive-container" style="max-width: '+t+"; max-height: "+a+'">\n<div class="medium-image-progressive-placeholder" style="padding-bottom: '+100*s+'%"></div>\n<div class="medium-image-progressive">\n  <img class="medium-image-progress" src="'+i+'" style="'+(b?"display: none;":"")+'"/>\n  '+(b?"<canvas></canvas>":"")+'\n  <img class="medium-image-origin" src="'+n+'"/>\n</div>\n</div>';var c=(e=g.querySelector("#"+d)).querySelector(".medium-image-progressive"),v=c.querySelector(".medium-image-progress"),p=c.querySelector(".medium-image-origin"),y=b&&c.querySelector("canvas");p.addEventListener("load",function(){c.classList.add("image-loaded")}),v.addEventListener("load",function(){b&&(m.image(v,y),c.classList.add("canvas-loaded"))})})}else console.error("medium-image-progress only works on browser.")}});
//# sourceMappingURL=umd.min.js.map