image-comparison-slider-react/docs/static/js/main.e5e30da8.chunk.js

Image comparison slider component for React.

(this.webpackJsonpexample=this.webpackJsonpexample||[]).push([[0],{14:function(e,t,n){},16:function(e,t,n){},17:function(e,t,n){"use strict";n.r(t);var i=n(1),r=n.n(i),o=n(5),s=n.n(o),a=n(4),c=n(6),g=n(7),h=n(2),d=n(9),l=n(8),u=(n(14),n(0)),m={color:"#2188ff",iconColor:"#fff",height:"18.75rem",width:"30rem"},p=function(e){Object(d.a)(n,e);var t=Object(l.a)(n);function n(e){var i;return Object(c.a)(this,n),(i=t.call(this,e)).imageRef=r.a.createRef(),i.state={sliderPosition:50,dragging:!1},i.startDragging=i.startDragging.bind(Object(h.a)(i)),i.stopDragging=i.stopDragging.bind(Object(h.a)(i)),i.drag=i.drag.bind(Object(h.a)(i)),i.dragMobile=i.dragMobile.bind(Object(h.a)(i)),i}return Object(g.a)(n,[{key:"componentDidMount",value:function(){document.addEventListener("mousemove",this.drag),document.addEventListener("mouseup",this.stopDragging),document.addEventListener("touchend",this.stopDragging),document.addEventListener("touchmove",this.dragMobile,{passive:!1})}},{key:"componentWillUnmount",value:function(){document.removeEventListener("mousemove",this.drag),document.removeEventListener("mouseup",this.stopDragging),document.removeEventListener("touchend",this.stopDragging),document.removeEventListener("touchmove",this.dragMobile)}},{key:"stopDragging",value:function(){this.setState({dragging:!1})}},{key:"startDragging",value:function(){console.log("go"),this.setState({dragging:!0})}},{key:"drag",value:function(e){if(this.state.dragging){var t=this.imageRef.current.getBoundingClientRect(),n=t.right-t.left,i=(e.clientX-t.left)/n*100;i=Math.max(10,i),i=Math.min(90,i),this.setState({sliderPosition:i})}}},{key:"dragMobile",value:function(e){this.state.dragging&&e.preventDefault(),this.drag(e.changedTouches[0])}},{key:"render",value:function(){var e=this,t=this.props.images;if(!t)throw new Error("Prop 'images' must be present.");if(2!==t.length)throw new Error("Prop 'images' must have two elements.");if(t.filter((function(e){return e.hasOwnProperty("src")&&e.hasOwnProperty("src")})).length!==t.length)throw new Error("Every image must have an 'src' property and an 'alt' property.");var n=Object(a.a)(Object(a.a)({},m),this.props.options);return Object(u.jsxs)("div",{className:"__ReactImageComparisonSlider",style:{"--theme":n.color,"--icon-color":n.iconColor,"--left-offset":"".concat(this.state.sliderPosition,"%"),"--height":n.height,"--width":n.width},ref:this.imageRef,children:[Object(u.jsx)("img",{src:t[1].src,alt:t[1].alt}),Object(u.jsx)("img",{src:t[0].src,alt:t[0].alt}),Object(u.jsx)("div",{onMouseDown:function(t){return e.startDragging(t)},onTouchStart:function(t){return e.startDragging(t)},children:Object(u.jsxs)("div",{children:[Object(u.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",children:Object(u.jsx)("path",{d:"M16.67 0l2.83 2.829-9.339 9.175 9.339 9.167-2.83 2.829-12.17-11.996z"})}),Object(u.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",children:Object(u.jsx)("path",{d:"M7.33 24l-2.83-2.829 9.339-9.175-9.339-9.167 2.83-2.829 12.17 11.996z"})})]})}),Object(u.jsxs)("div",{children:[t[0].text?Object(u.jsx)("p",{children:t[0].text}):null,t[1].text?Object(u.jsx)("p",{children:t[1].text}):null]})]})}}]),n}(r.a.Component);var j=function(){return Object(u.jsxs)("div",{className:"App",children:[Object(u.jsx)("h1",{children:"Image Comparison Slider Demo"}),Object(u.jsx)("a",{href:"https://github.com/xtrp/imagecomparisonslider/blob/main/lib/src/App.js",target:"_blank",rel:"noopener noreferrer",children:"View The Code \u2192"}),Object(u.jsx)("div",{children:Object(u.jsx)(p,{images:[{src:"./spring.jpg",alt:"spring",text:"Spring"},{src:"./autumn.jpg",alt:"autumn",text:"Autumn"}],options:{color:"#27ae60"}})})]})},v=function(e){e&&e instanceof Function&&n.e(3).then(n.bind(null,18)).then((function(t){var n=t.getCLS,i=t.getFID,r=t.getFCP,o=t.getLCP,s=t.getTTFB;n(e),i(e),r(e),o(e),s(e)}))};n(16);s.a.render(Object(u.jsx)(r.a.StrictMode,{children:Object(u.jsx)(j,{})}),document.getElementById("root")),v()}},[[17,1,2]]]);
//# sourceMappingURL=main.e5e30da8.chunk.js.map