{"version":3,"file":"ImageComparisonSlider.DoFSjFE3.mjs","names":["useRef","useState","useCallback"],"sources":["https:/framerusercontent.com/modules/H9YriMvGHxkcjIbEn5Uw/QhVo0SsJxxLP7JYqEleA/ImageComparisonSlider.js"],"sourcesContent":["// Image before-and-after slider with customizable arrow icon in the center\nimport{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{addPropertyControls,ControlType,useIsStaticRenderer}from\"framer\";import{useCallback,useEffect,useRef,useState,startTransition}from\"react\";/**\n * Before After Slider\n *\n * @framerIntrinsicWidth 500\n * @framerIntrinsicHeight 300\n *\n * @framerSupportedLayoutWidth fixed\n * @framerSupportedLayoutHeight fixed\n */export default function ImageComparisonSlider(props){const{beforeImage={src:\"https://framerusercontent.com/images/GfGkADagM4KEibNcIiRUWlfrR0.jpg\",alt:\"Before image\"},afterImage={src:\"https://framerusercontent.com/images/aNsAT3jCvt4zglbWCUoFe33Q.jpg\",alt:\"After image\"},initialPosition=50,dividerColor=\"#FFFFFF\",dividerWidth=2,dividerShadow=true,arrowColor=\"#000000\",arrowSize=20,arrowBackgroundColor=\"#FFFFFF\",arrowBackgroundSize=40}=props;const containerRef=useRef(null);const[position,setPosition]=useState(initialPosition);const[isDragging,setIsDragging]=useState(false);const isStatic=useIsStaticRenderer();const updatePositionFromEvent=useCallback(e=>{if(!containerRef.current)return;const rect=containerRef.current.getBoundingClientRect();const x=e.clientX-rect.left;const newPosition=Math.max(0,Math.min(100,x/rect.width*100));startTransition(()=>setPosition(newPosition));},[]);const handleClick=useCallback(e=>{if(!isDragging){updatePositionFromEvent(e);}},[isDragging,updatePositionFromEvent]);const handleDoubleClick=()=>{startTransition(()=>setPosition(initialPosition));};const handlePointerDown=e=>{e.preventDefault();startTransition(()=>setIsDragging(true));};const handlePointerMove=useCallback(e=>{if(!isDragging||!containerRef.current)return;updatePositionFromEvent(e);},[isDragging,updatePositionFromEvent]);const handlePointerUp=useCallback(()=>{startTransition(()=>setIsDragging(false));},[]);useEffect(()=>{if(isStatic)return;const handleGlobalPointerMove=e=>handlePointerMove(e);const handleGlobalPointerUp=()=>handlePointerUp();if(isDragging){window.addEventListener(\"pointermove\",handleGlobalPointerMove);window.addEventListener(\"pointerup\",handleGlobalPointerUp);}return()=>{window.removeEventListener(\"pointermove\",handleGlobalPointerMove);window.removeEventListener(\"pointerup\",handleGlobalPointerUp);};},[isDragging,handlePointerMove,handlePointerUp,isStatic]);return /*#__PURE__*/_jsxs(\"div\",{ref:containerRef,style:{position:\"relative\",width:\"100%\",height:\"100%\",overflow:\"hidden\",cursor:isDragging?\"ew-resize\":\"pointer\",userSelect:\"none\",touchAction:\"none\"},onClick:isStatic?undefined:handleClick,onPointerMove:isStatic?undefined:handlePointerMove,onPointerDown:isStatic?undefined:handlePointerDown,onPointerUp:isStatic?undefined:handlePointerUp,onDoubleClick:handleDoubleClick,onKeyDown:e=>{if(e.key===\" \"||e.key===\"Enter\"){handleClick(e);}},tabIndex:0,role:\"slider\",\"aria-valuenow\":position,\"aria-valuemin\":0,\"aria-valuemax\":100,\"aria-orientation\":\"horizontal\",children:[/*#__PURE__*/_jsx(\"div\",{style:{position:\"absolute\",top:0,left:0,width:\"100%\",height:\"100%\",backgroundImage:`url(${afterImage.src})`,backgroundSize:\"cover\",backgroundPosition:\"center\"},\"aria-label\":afterImage.alt,role:\"img\"}),/*#__PURE__*/_jsx(\"div\",{style:{position:\"absolute\",top:0,left:0,width:\"100%\",height:\"100%\",backgroundImage:`url(${beforeImage.src})`,backgroundSize:\"cover\",backgroundPosition:\"center\",clipPath:`inset(0 ${100-position}% 0 0)`},\"aria-label\":beforeImage.alt,role:\"img\"}),/*#__PURE__*/_jsx(\"div\",{style:{position:\"absolute\",top:0,left:`${position}%`,width:`${dividerWidth}px`,height:\"100%\",backgroundColor:dividerColor,boxShadow:dividerShadow?\"0 0 5px rgba(0, 0, 0, 0.7)\":\"none\",transform:`translateX(-${dividerWidth/2}px)`,cursor:\"ew-resize\",zIndex:2},onPointerDown:isStatic?undefined:handlePointerDown}),/*#__PURE__*/_jsx(\"div\",{style:{position:\"absolute\",top:`calc(50% - ${arrowBackgroundSize/2}px)`,left:`${position}%`,width:`${arrowBackgroundSize}px`,height:`${arrowBackgroundSize}px`,borderRadius:\"50%\",backgroundColor:arrowBackgroundColor,boxShadow:dividerShadow?\"0 0 5px rgba(0, 0, 0, 0.5)\":\"none\",transform:`translateX(-${arrowBackgroundSize/2}px)`,cursor:\"ew-resize\",zIndex:3,display:\"flex\",justifyContent:\"center\",alignItems:\"center\"},onPointerDown:isStatic?undefined:handlePointerDown,children:/*#__PURE__*/_jsxs(\"svg\",{viewBox:\"0 0 24 24\",width:arrowSize,height:arrowSize,strokeWidth:\"2\",stroke:arrowColor,fill:\"none\",\"aria-label\":\"Drag handle\",children:[/*#__PURE__*/_jsx(\"title\",{children:\"Drag handle\"}),/*#__PURE__*/_jsx(\"path\",{d:\"M13 5l6 6m-6 6l6-6m-6 0l-6 6m6-6l-6-6\"})]})})]});}addPropertyControls(ImageComparisonSlider,{beforeImage:{type:ControlType.ResponsiveImage,title:\"Before Image\"},afterImage:{type:ControlType.ResponsiveImage,title:\"After Image\"},initialPosition:{type:ControlType.Number,title:\"Initial Position\",defaultValue:50,min:0,max:100,step:1,unit:\"%\"},dividerColor:{type:ControlType.Color,title:\"Divider Color\",defaultValue:\"#FFFFFF\"},dividerWidth:{type:ControlType.Number,title:\"Divider Width\",defaultValue:2,min:1,max:20,step:1,unit:\"px\"},dividerShadow:{type:ControlType.Boolean,title:\"Divider Shadow\",defaultValue:true,enabledTitle:\"On\",disabledTitle:\"Off\"},arrowBackgroundColor:{type:ControlType.Color,title:\"Arrow Background\",defaultValue:\"#FFFFFF\"},arrowBackgroundSize:{type:ControlType.Number,title:\"Background Size\",defaultValue:40,min:20,max:80,step:1,unit:\"px\"},arrowColor:{type:ControlType.Color,title:\"Arrow Color\",defaultValue:\"#000000\"},arrowSize:{type:ControlType.Number,title:\"Arrow Size\",defaultValue:20,min:10,max:40,step:1,unit:\"px\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"ImageComparisonSlider\",\"slots\":[],\"annotations\":{\"framerSupportedLayoutWidth\":\"fixed\",\"framerContractVersion\":\"1\",\"framerIntrinsicWidth\":\"500\",\"framerSupportedLayoutHeight\":\"fixed\",\"framerIntrinsicHeight\":\"300\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./ImageComparisonSlider.map"],"mappings":"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"}