{"version":3,"file":"ImageCompare.CryVUMdU.mjs","names":["useRef","useState","useCallback"],"sources":["https:/framerusercontent.com/modules/yTIcNWDHLR21cnBezjJd/w65JD1NLKKcCWpi7qEnT/ImageCompare.js"],"sourcesContent":["import{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{addPropertyControls,ControlType,useIsStaticRenderer}from\"framer\";import{useCallback,useEffect,useRef,useState,startTransition}from\"react\";// Convert Framer's focal point (0–1) to CSS background-position (0%–100%)\nfunction focalPointToPosition(image){const x=image.positionX!=null?`${Math.round(image.positionX*100)}%`:\"50%\";const y=image.positionY!=null?`${Math.round(image.positionY*100)}%`:\"50%\";return`${x} ${y}`;}/**\n * Image Before/After Slider\n *\n * Compare two images with a draggable slider and customizable arrow handle.\n *\n * @framerIntrinsicWidth 500\n * @framerIntrinsicHeight 300\n *\n * @framerSupportedLayoutWidth fixed\n * @framerSupportedLayoutHeight fixed\n */export default function ImageCompare(props){const{beforeImage={src:\"https://framerusercontent.com/images/GfGkADagM4KEibNcIiRUWlfrR0.jpg\",alt:\"Before\"},afterImage={src:\"https://framerusercontent.com/images/aNsAT3jCvt4zglbWCUoFe33Q.jpg\",alt:\"After\"},initialPosition=50,dividerColor=\"#FFFFFF\",dividerWidth=2,handleColor=\"#FFFFFF\",handleSize=48,handleBorderColor=\"#FFFFFF\",handleBorderWidth=2,showHandle=true,dividerShadow=true,useCustomIcon=false,customIcon=\"https://framerusercontent.com/images/GfGkADagM4KEibNcIiRUWlfrR0.jpg\"}=props;const containerRef=useRef(null);const[position,setPosition]=useState(initialPosition);const[isDragging,setIsDragging]=useState(false);const isStatic=useIsStaticRenderer();const beforePosition=focalPointToPosition(beforeImage);const afterPosition=focalPointToPosition(afterImage);const updatePositionFromEvent=useCallback(e=>{if(!containerRef.current)return;const rect=containerRef.current.getBoundingClientRect();let clientX;if(\"touches\"in e&&e.touches.length>0){clientX=e.touches[0].clientX;}else if(\"clientX\"in e){clientX=e.clientX;}else{return;}const x=clientX-rect.left;const newPosition=Math.max(0,Math.min(100,x/rect.width*100));startTransition(()=>setPosition(newPosition));},[]);const handleStart=useCallback(e=>{e.preventDefault();startTransition(()=>setIsDragging(true));},[]);const handleMove=useCallback(e=>{if(!isDragging||!containerRef.current)return;updatePositionFromEvent(e);},[isDragging,updatePositionFromEvent]);const handleEnd=useCallback(()=>{startTransition(()=>setIsDragging(false));},[]);useEffect(()=>{if(isStatic)return;if(isDragging){window.addEventListener(\"mousemove\",handleMove);window.addEventListener(\"mouseup\",handleEnd);window.addEventListener(\"touchmove\",handleMove);window.addEventListener(\"touchend\",handleEnd);}return()=>{window.removeEventListener(\"mousemove\",handleMove);window.removeEventListener(\"mouseup\",handleEnd);window.removeEventListener(\"touchmove\",handleMove);window.removeEventListener(\"touchend\",handleEnd);};},[isDragging,handleMove,handleEnd,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\"},onMouseDown:isStatic?undefined:e=>updatePositionFromEvent(e),onTouchStart:isStatic?undefined:e=>updatePositionFromEvent(e),children:[/*#__PURE__*/_jsx(\"div\",{style:{position:\"absolute\",top:0,left:0,width:\"100%\",height:\"100%\",backgroundImage:`url(${afterImage.src})`,backgroundSize:\"cover\",backgroundPosition:afterPosition},\"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:beforePosition,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 8px rgba(0, 0, 0, 0.5)\":\"none\",transform:`translateX(-${dividerWidth/2}px)`,cursor:\"ew-resize\",zIndex:2},onMouseDown:isStatic?undefined:handleStart,onTouchStart:isStatic?undefined:handleStart}),showHandle&&/*#__PURE__*/_jsx(\"div\",{style:{position:\"absolute\",top:\"50%\",left:`${position}%`,width:`${handleSize}px`,height:`${handleSize}px`,borderRadius:\"50%\",backgroundColor:handleColor,border:`${handleBorderWidth}px solid ${handleBorderColor}`,transform:`translate(-50%, -50%)`,cursor:\"ew-resize\",zIndex:3,display:\"flex\",justifyContent:\"center\",alignItems:\"center\",overflow:\"hidden\"},onMouseDown:isStatic?undefined:handleStart,onTouchStart:isStatic?undefined:handleStart,children:useCustomIcon?/*#__PURE__*/_jsx(\"img\",{src:customIcon,alt:\"\",style:{width:\"70%\",height:\"70%\",objectFit:\"contain\"}}):/*#__PURE__*/_jsxs(\"svg\",{width:handleSize*.5,height:handleSize*.5,viewBox:\"0 0 24 24\",fill:\"none\",stroke:handleBorderColor,strokeWidth:\"2\",strokeLinecap:\"round\",strokeLinejoin:\"round\",\"aria-hidden\":\"true\",children:[/*#__PURE__*/_jsx(\"polyline\",{points:\"15 18 9 12 15 6\"}),/*#__PURE__*/_jsx(\"polyline\",{points:\"9 18 3 12 9 6\",transform:\"translate(6, 0)\"})]})})]});}addPropertyControls(ImageCompare,{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\"},showHandle:{type:ControlType.Boolean,title:\"Show Handle\",defaultValue:true,enabledTitle:\"Show\",disabledTitle:\"Hide\"},useCustomIcon:{type:ControlType.Boolean,title:\"Custom Icon\",defaultValue:false,enabledTitle:\"Custom\",disabledTitle:\"Default\",hidden:({showHandle})=>!showHandle},customIcon:{type:ControlType.File,allowedFileTypes:[\"jpg\",\"jpeg\",\"png\",\"gif\",\"webp\",\"svg\"],title:\"Icon File\",hidden:({showHandle,useCustomIcon})=>!showHandle||!useCustomIcon},handleColor:{type:ControlType.Color,title:\"Handle Color\",defaultValue:\"#FFFFFF\",hidden:({showHandle})=>!showHandle},handleSize:{type:ControlType.Number,title:\"Handle Size\",defaultValue:48,min:24,max:100,step:1,unit:\"px\",hidden:({showHandle})=>!showHandle},handleBorderColor:{type:ControlType.Color,title:\"Handle Border\",defaultValue:\"#FFFFFF\",hidden:({showHandle})=>!showHandle},handleBorderWidth:{type:ControlType.Number,title:\"Border Width\",defaultValue:2,min:0,max:10,step:1,unit:\"px\",hidden:({showHandle})=>!showHandle},dividerShadow:{type:ControlType.Boolean,title:\"Divider Shadow\",defaultValue:true,enabledTitle:\"On\",disabledTitle:\"Off\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"ImageCompare\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\",\"framerSupportedLayoutWidth\":\"fixed\",\"framerIntrinsicWidth\":\"500\",\"framerSupportedLayoutHeight\":\"fixed\",\"framerIntrinsicHeight\":\"300\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./ImageCompare.map"],"mappings":"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"}