react-image-cycling-tool/build/index.js

React component used to cycle throw a series of images seemlessly.

module.exports=function(e){var t={};function a(n){if(t[n])return t[n].exports;var r=t[n]={i:n,l:!1,exports:{}};return e[n].call(r.exports,r,r.exports,a),r.l=!0,r.exports}return a.m=e,a.c=t,a.d=function(e,t,n){a.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},a.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.t=function(e,t){if(1&t&&(e=a(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(a.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)a.d(n,r,function(t){return e[t]}.bind(null,r));return n},a.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(t,"a",t),t},a.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},a.p="",a(a.s=0)}([function(e,t,a){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.ImageFader=void 0;var n,r=a(1),i=(n=r)&&n.__esModule?n:{default:n};t.ImageFader=i.default},function(e,t,a){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n,r=a(2),i=(n=r)&&n.__esModule?n:{default:n};t.default=function(e){var t,a=e.background,n=void 0===a?"white":a,o=e.images,u=void 0===o?["https://upload.wikimedia.org/wikipedia/commons/0/0a/No-image-available.png"]:o,c=e.widthRatio,d=void 0===c?1:c,l=e.heightRatio,s=void 0===l?1:l,h=e.objectFit,f=void 0===h?"stretch":h,g=(0,r.useRef)(null),v=new function(e,a,n){this.x=e,this.y=a,this.drawImage=function(){b&&(I(w),y+=1,t.globalAlpha+=.04),25===y&&(t.globalAlpha=1,t.clearRect(0,0,t.canvas.width,t.canvas.height),I(w),t.globalAlpha=.05,y=0,p.src=u[m%u.length],m+=1,w.src=u[m%u.length],b=!1)}},w=new Image,p=new Image,m=1,b=!0,y=0;window.onresize=function(){t.canvas.height=g.current.parentNode.offsetHeight*s,t.canvas.width=g.current.parentNode.offsetWidth*d,t.clearRect(0,0,t.canvas.width,t.canvas.height),I(p)};var _=function e(){v.drawImage(),window.requestAnimationFrame(e)};(0,r.useEffect)((function(){(t=g.current.getContext("2d")).canvas.height=g.current.parentNode.offsetHeight,t.canvas.width=g.current.parentNode.offsetWidth,t.fillStyle=n,t.globalAlpha=.05,t.lineWidth=1,w.src=u[m],setInterval((function(){b=!0}),1e4),window.requestAnimationFrame(_)}));var I=function(e){switch(f){case"fit":O(e);break;case"natural":j(e);break;default:x(e)}},j=function(e){t.drawImage(e,t.canvas.width/2-e.naturalWidth/2,t.canvas.height/2-e.naturalHeight/2,e.naturalWidth,e.naturalHeight)},x=function(e){t.drawImage(e,0,0,t.canvas.width,t.canvas.height)},O=function(e){var a=e.naturalHeight/t.canvas.height,n=e.naturalWidth/t.canvas.width;if(a>n){var r=t.canvas.height*n;t.drawImage(e,0,e.naturalHeight/2-r/2,e.width,r,0,0,t.canvas.width,t.canvas.height)}else{var i=t.canvas.width*a;t.drawImage(e,e.naturalWidth/2-i/2,0,i,e.height,0,0,t.canvas.width,t.canvas.height)}};return i.default.createElement("canvas",{id:"image-cycling-tool",style:{background:n},ref:g,width:d,height:s})}},function(e,t){e.exports=require("react")}]);