{"version":3,"file":"Image_Zoom.brCs74ap.mjs","names":["useState","x","y"],"sources":["https:/framerusercontent.com/modules/gedrjmwnFGkAVdbsBGyq/TyhF5tPuILabuNH31TkQ/Image_Zoom.js"],"sourcesContent":["import{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{useState,useEffect}from\"react\";import ReactDOM from\"react-dom\";import{addPropertyControls,ControlType}from\"framer\";//Code component provided by Eleveight Supply™. All rights reserved 2024.\n/**\n * @framerDisableUnlink\n *\n * @framerIntrinsicWidth 400\n * @framerIntrinsicHeight 500\n *\n * @framerSupportedLayoutWidth any-prefer-fixed\n * @framerSupportedLayoutHeight any-prefer-fixed\n */export default function ImageZoom(props){const[hoverState,setHoverState]=useState({x:50,y:50,isHovered:false});const[isDesktop,setIsDesktop]=useState(true);const[showOverlay,setShowOverlay]=useState(false);useEffect(()=>{function handleResize(){setIsDesktop(window.innerWidth>600);}window.addEventListener(\"resize\",handleResize);handleResize();return()=>{window.removeEventListener(\"resize\",handleResize);document.body.style.overflow=\"visible\";};},[]);useEffect(()=>{document.body.style.overflow=showOverlay?\"hidden\":\"visible\";},[showOverlay]);const handleMouseMove=event=>{if(isDesktop){const bounds=event.target.getBoundingClientRect();const x=(event.clientX-bounds.left)/bounds.width*100;const y=(event.clientY-bounds.top)/bounds.height*100;setHoverState({x,y,isHovered:true});}};const handleMouseLeave=()=>{setHoverState({...hoverState,isHovered:false});};const handleImageClick=event=>{if(props.zoomMode===\"overlay\"){setShowOverlay(true);event.stopPropagation();}};const handleCloseOverlay=event=>{if(showOverlay){setShowOverlay(false);event.stopPropagation();}};const{isHovered,x,y}=hoverState;const scale=isHovered?props.zoomPercentage/100:1;const transformOrigin=`${x}% ${y}%`;const styles={container:{width:\"100%\",height:\"100%\",overflow:\"hidden\",position:\"relative\",cursor:\"default\",borderRadius:props.isMixed?`${props.topLeft}px ${props.topRight}px ${props.bottomRight}px ${props.bottomLeft}px`:`${props.topLeft}px`},image:{width:\"100%\",height:\"100%\",objectFit:props.type===\"fill\"?\"cover\":props.type===\"fit\"?\"contain\":\"fill\",transition:\"transform 0.2s ease-in-out\",transform:isHovered&&isDesktop&&props.zoomMode===\"full\"?`scale(${scale})`:\"none\",transformOrigin,cursor:props.zoomMode===\"overlay\"?\"zoom-in\":props.hideCursor?\"none\":\"default\"},lens:{position:\"absolute\",top:0,left:0,width:\"100%\",height:\"100%\",clipPath:`circle(${props.zoomCircleSize}px at ${x}% ${y}%)`,backgroundImage:`url(${props.image})`,backgroundRepeat:\"no-repeat\",backgroundSize:`${100*scale}%`,backgroundPosition:`${x}% ${y}%`,pointerEvents:\"none\"}};const overlay=showOverlay?/*#__PURE__*/ReactDOM.createPortal(/*#__PURE__*/_jsx(\"div\",{style:{position:\"fixed\",top:0,left:0,width:\"100vw\",height:\"100vh\",background:`rgba(0, 0, 0, 0.8) url(${props.image}) center / contain no-repeat`,zIndex:1e4,cursor:\"zoom-out\"},onClick:handleCloseOverlay}),document.body):null;return /*#__PURE__*/_jsxs(\"div\",{style:styles.container,onMouseMove:handleMouseMove,onMouseLeave:handleMouseLeave,onClick:props.zoomMode===\"overlay\"?handleImageClick:undefined,children:[/*#__PURE__*/_jsx(\"img\",{src:props.image,style:styles.image}),isHovered&&props.zoomMode===\"lens\"&&isDesktop&&/*#__PURE__*/_jsx(\"div\",{style:styles.lens}),overlay]});}ImageZoom.defaultProps={image:\"https://i.imgur.com/DWZghNt.jpg\",zoomPercentage:120,zoomCircleSize:100,type:\"fill\",zoomMode:\"full\",isMixed:false,topLeft:0,topRight:0,bottomRight:0,bottomLeft:0};addPropertyControls(ImageZoom,{image:{type:ControlType.Image,title:\"Image\"},zoomMode:{type:ControlType.Enum,title:\"Zoom Mode\",options:[\"full\",\"lens\",\"overlay\"],optionTitles:[\"Contained\",\"Lens\",\"Overlay\"],defaultValue:\"full\",displaySegmentedControl:true,segmentedControlDirection:\"vertical\"},zoomCircleSize:{type:ControlType.Number,title:\"Lens Size\",min:10,max:500,step:10,defaultValue:150,hidden:({zoomMode})=>zoomMode!==\"lens\"},zoomPercentage:{type:ControlType.Number,title:\"Zoom %\",min:100,max:300,step:10,defaultValue:120},type:{type:ControlType.Enum,title:\"Fill Type\",options:[\"fill\",\"fit\",\"stretch\"],optionTitles:[\"Fill\",\"Fit\",\"Stretch\"],defaultValue:\"fill\"},hideCursor:{type:ControlType.Boolean,title:\"Hide Cursor\",defaultValue:false,hidden:({zoomMode})=>zoomMode===\"overlay\"},cornerRadius:{type:ControlType.FusedNumber,title:\"Radius\",toggleKey:\"isMixed\",toggleTitles:[\"All\",\"Individual\"],valueKeys:[\"topLeft\",\"topRight\",\"bottomRight\",\"bottomLeft\"],valueLabels:[\"TL\",\"TR\",\"BR\",\"BL\"],defaultValue:8,min:0}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"ImageZoom\",\"slots\":[],\"annotations\":{\"framerDisableUnlink\":\"*\",\"framerIntrinsicWidth\":\"400\",\"framerSupportedLayoutHeight\":\"any-prefer-fixed\",\"framerIntrinsicHeight\":\"500\",\"framerContractVersion\":\"1\",\"framerSupportedLayoutWidth\":\"any-prefer-fixed\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./Image_Zoom.map"],"mappings":"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"}