react-after-before-slider/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:()=>c});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 a(e,t){return e>t?t:e<0?0:e}function c(r){var o=r.firstImage,c=r.secondImage,f=r.className,u=r.withResizeFeel,s=void 0===u||u,l=r.currentPercentPosition,d=r.onVisible,m=r.onReady,v=r.onChangePercentPosition,p=r.delimiterColor,E=r.showAfterBeforeText,g=void 0===E||E,b=r.feelsOnlyTheDelimiter,h=void 0!==b&&b,y=["before-after-slider"];f&&y.push(f);var w=(0,t.useRef)(null),x=(0,t.useState)(null),O=x[0],L=x[1],_=(0,t.useState)(l||50),S=_[0],N=_[1],R=(0,t.useState)(e.DEFAULT),T=R[0],j=R[1],A=function(e,n,r){var o=(0,t.useState)(!1),i=o[0],a=o[1],c=(0,t.useState)(0),f=c[0],u=c[1];return(0,t.useEffect)((function(){!i&&2===f&&e&&n.current&&a(!0)}),[f,e,i,n.current]),(0,t.useEffect)((function(){i&&r&&r()}),[i]),{onImageLoad:function(){u(f+1)},isReady:i}}(O,w,m),B=A.onImageLoad,C=A.isReady,I=(0,t.useState)({top:0,left:0}),M=I[0],P=I[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(!C)return;U.observe(w.current)}}),[C]),(0,t.useEffect)((function(){l&&O&&N(a(l,O))}),[l,O]);var D=function(){if(w.current){var e=w.current.offsetWidth;L(e)}},F=function(){j(e.DEFAULT)};!function(e,n){(0,t.useEffect)((function(){return e(),document.addEventListener("click",n),function(){document.removeEventListener("click",n)}}),[])}(D,F);var k=O?{width:O+"px"}:void 0,z={width:S+"%"},V={backgroundColor:p},q={left:S+"%",backgroundColor:p},X=function(){!function(){if(w.current){var e=w.current.getBoundingClientRect();P({top:e.top+pageYOffset,left:e.left+pageXOffset})}}(),j(e.MOVE)},W=function(t){if(T===e.MOVE){if(!O)return;var n=a(t.pageX-M.left,O)/O*100;v?v(n):N(n)}};!function(e,n){(0,t.useEffect)((function(){return n&&window.addEventListener("resize",e),function(){window.removeEventListener("resize",e)}}),[])}(D,s);var Y={onMouseDown:X,onTouchStart:X};return n().createElement("div",i({ref:w,className:y.join(" "),onMouseMove:function(e){return W(e)},onTouchMove:function(e){W(e.touches[0])},onTouchEnd:F,onTouchCancel:F},h?{}:Y),n().createElement("img",{src:o.imageUrl,className:"before-after-slider__size-fix-img",onLoad:D}),Boolean(O)&&n().createElement(n().Fragment,null,n().createElement("div",{className:"before-after-slider__first-photo-container"},g&&n().createElement("span",{className:"after-text"},"After"),n().createElement("img",{style:k,src:null==o?void 0:o.imageUrl,onLoad:B,draggable:!1,alt:(null==o?void 0:o.alt)||"After Image"})),n().createElement("div",{className:"before-after-slider__second-photo-container",style:z},g&&n().createElement("span",{className:"before-text"},"Before"),n().createElement("img",{style:k,src:null==c?void 0:c.imageUrl,onLoad:B,draggable:!1,alt:(null==c?void 0:c.alt)||"Before Image"})),n().createElement("div",i({className:"before-after-slider__delimiter",style:q},h?Y:{}),n().createElement("div",null,n().createElement("div",{className:"before-after-slider__delimiter-icon",style:V})))))}!function(e){e.MOVE="move",e.DEFAULT="default"}(e||(e={}))})(),o.default})()}));