react-before-after-slider-component/dist/build.js

Simple slider component for comparing images. Before and after.

!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):"object"==typeof exports?exports.ReactBeforeAfterSliderComponent=t(require("react")):e.ReactBeforeAfterSliderComponent=t(e.react)}(this,(function(e){return(()=>{"use strict";var t={297:t=>{t.exports=e}},n={};function r(e){var o=n[e];if(void 0!==o)return o.exports;var i=n[e]={exports:{}};return t[e](i,i.exports,r),i.exports}r.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return r.d(t,{a:t}),t},r.d=(e,t)=>{for(var n in t)r.o(t,n)&&!r.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},r.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t);var o={};return(()=>{r.d(o,{default:()=>u});var e,t=r(297),n=r.n(t),i=function(){return(i=Object.assign||function(e){for(var t,n=1,r=arguments.length;n<r;n++)for(var o in t=arguments[n])Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o]);return e}).apply(this,arguments)};function c(e,t){return e>t?t:e<0?0:e}function u(r){var o=r.firstImage,u=r.secondImage,a=r.className,f=r.withResizeFeel,s=void 0===f||f,l=r.currentPercentPosition,d=r.onVisible,v=r.onReady,m=r.onChangePercentPosition,p=r.delimiterIconStyles,g=r.feelsOnlyTheDelimiter,E=void 0!==g&&g,h=r.delimiterColor,b=void 0===h?"#fff":h,y=r.onChangeMode,w=["before-after-slider"];a&&w.push(a);var O=(0,t.useRef)(null),L=(0,t.useRef)(null),M=(0,t.useState)(null),R=M[0],x=M[1],S=(0,t.useState)(l||50),_=S[0],C=S[1],j=(0,t.useState)(e.DEFAULT),T=j[0],I=j[1],P=function(e,n,r){var o=(0,t.useState)(!1),i=o[0],c=o[1],u=(0,t.useRef)([!1,!1]);return(0,t.useEffect)((function(){!i&&u.current.every(Boolean)&&e&&n.current&&c(!0)}),[u.current,e,i,n.current]),(0,t.useEffect)((function(){i&&r&&r()}),[i]),{onImageLoad:function(e){var t=function(e,t){for(var n=0,r=t.length,o=e.length;n<r;n++,o++)e[o]=t[n];return e}([],u.current);t[e]=!0,u.current=t},isReady:i}}(R,O,v),B=P.onImageLoad,N=P.isReady,A=(0,t.useState)({top:0,left:0}),D=A[0],F=A[1],U=(0,t.useState)(d&&"undefined"!=typeof window&&Boolean(window.IntersectionObserver)?new IntersectionObserver((function(e){U&&d&&e.forEach((function(e){e.intersectionRatio>.95&&(U.disconnect(),d())}))}),{threshold:[0,.95]}):null)[0];(0,t.useEffect)((function(){if(U){if(!N)return;U.observe(O.current)}}),[N]),(0,t.useEffect)((function(){l&&R&&C(c(l,R))}),[l,R]);var k=function(){if(O.current){var e=O.current.offsetWidth;x(e)}},V=function(){z(e.DEFAULT)},z=function(e){I(e),y&&y(e)};!function(e,n,r,o){(0,t.useEffect)((function(){return e(),r.current&&r.current.complete&&o(0),document.addEventListener("click",n),function(){document.removeEventListener("click",n)}}),[])}(k,V,L,B);var q=R?{width:R+"px"}:void 0,X={width:_+"%"},W=n().useMemo((function(){return i({backgroundColor:b},p||{})}),[b,p]),Y=n().useMemo((function(){return{left:_+"%",backgroundColor:b}}),[_,b]),G=function(){!function(){if(O.current){var e=O.current.getBoundingClientRect();F({top:e.top+pageYOffset,left:e.left+pageXOffset})}}(),z(e.MOVE)},H=function(t){if(T===e.MOVE){if(!R)return;var n=c(t.pageX-D.left,R)/R*100;m?m(n):C(n)}};!function(e,n){(0,t.useEffect)((function(){return n&&window.addEventListener("resize",e),function(){window.removeEventListener("resize",e)}}),[])}(k,s);var J={onMouseDown:G,onTouchStart:G};return n().createElement("div",i({ref:O,className:w.join(" "),onMouseMove:function(e){return H(e)},onTouchMove:function(e){H(e.touches[0])},onTouchEnd:V,onTouchCancel:V},E?{}:J),n().createElement("div",{className:"before-after-slider__first-photo-container"},n().createElement("img",{src:o.imageUrl,onLoad:function(){k(),B(0)},draggable:!1,alt:o.alt,ref:L})),Boolean(R)&&n().createElement(n().Fragment,null,n().createElement("div",{className:"before-after-slider__second-photo-container",style:X},n().createElement("img",{style:q,src:u.imageUrl,onLoad:function(){return B(1)},draggable:!1,alt:u.alt})),n().createElement("div",i({className:"before-after-slider__delimiter",style:Y},E?J:{}),n().createElement("div",null,n().createElement("div",{className:"before-after-slider__delimiter-icon",style:W})))))}!function(e){e.MOVE="move",e.DEFAULT="default"}(e||(e={}))})(),o.default})()}));