{"version":3,"file":"Image_Grid.Db437pI0.mjs","names":["useRef","useState","useMemo"],"sources":["https:/framerusercontent.com/modules/I5eNOGOED8oBxzEcFCZH/0helhjP3GBxXNSthcdNo/Image_Grid.js"],"sourcesContent":["// Componente griglia foto con Lightbox e Aspect Ratio individuale\nimport{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{addPropertyControls,ControlType}from\"framer\";import{useState,useEffect,useRef,useMemo}from\"react\";import{useInView,AnimatePresence,motion}from\"framer-motion\";export default function ImageGrid(props){const{images=[],columns=2,gap=10,borderRadius=0,aspectRatio:globalAspectRatio=\"auto\",objectFit=\"cover\",showText=\"none\",backgroundColor=\"#FFFFFF\",textPosition=\"bottom-center\",textPadding=16,titleFont,descriptionFont,titleColor=\"#FFFFFF\",descriptionColor=\"#FFFFFF\",animation=\"none\",scrollAnimation=\"none\",enableLightbox=true}=props;const containerRef=useRef(null);const[containerWidth,setContainerWidth]=useState(0);const[imageData,setImageData]=useState([]);const[selectedImage,setSelectedImage]=useState(null);useEffect(()=>{if(!containerRef.current)return;const updateWidth=()=>{if(containerRef.current)setContainerWidth(containerRef.current.offsetWidth);};updateWidth();const resizeObserver=new ResizeObserver(updateWidth);resizeObserver.observe(containerRef.current);return()=>resizeObserver.disconnect();},[]);useEffect(()=>{const loadImageDimensions=async()=>{const imagePromises=images.map(image=>{return new Promise(resolve=>{const img=new Image;const src=typeof image.src===\"string\"?image.src:image.src?.src||\"\";img.onload=()=>{resolve({src,alt:image.alt,width:img.naturalWidth,height:img.naturalHeight,title:image.title,description:image.description,aspectRatio:image.aspectRatio});};img.onerror=()=>{resolve({src,alt:image.alt,width:300,height:200,title:image.title,description:image.description,aspectRatio:image.aspectRatio});};img.src=src;});});const loadedImages=await Promise.all(imagePromises);setImageData(loadedImages);};loadImageDimensions();},[images]);const columnWidth=useMemo(()=>{if(containerWidth===0)return 0;return(containerWidth-gap*(columns-1))/columns;},[containerWidth,columns,gap]);const masonryLayout=useMemo(()=>{if(imageData.length===0||columnWidth===0)return[];const columnHeights=new Array(columns).fill(0);return imageData.map(image=>{const shortestColumnIndex=columnHeights.indexOf(Math.min(...columnHeights));const currentRatio=image.aspectRatio&&image.aspectRatio!==\"inherit\"?image.aspectRatio:globalAspectRatio;let finalHeight;if(currentRatio===\"auto\"){const scaleFactor=columnWidth/image.width;finalHeight=image.height*scaleFactor;}else if(currentRatio===\"square\"){finalHeight=columnWidth;}else if(currentRatio===\"portrait\"){finalHeight=columnWidth*1.4;}else if(currentRatio===\"landscape\"){finalHeight=columnWidth*.7;}else{finalHeight=image.height*(columnWidth/image.width);}const item={image,x:shortestColumnIndex*(columnWidth+gap),y:columnHeights[shortestColumnIndex],width:columnWidth,height:finalHeight};columnHeights[shortestColumnIndex]+=finalHeight+gap;return item;});},[imageData,columnWidth,columns,gap,globalAspectRatio]);const totalHeight=useMemo(()=>{if(masonryLayout.length===0)return 200;return Math.max(...masonryLayout.map(item=>item.y+item.height),200);},[masonryLayout]);return /*#__PURE__*/_jsxs(\"div\",{ref:containerRef,style:{width:\"100%\",height:`${totalHeight}px`,position:\"relative\",...props.style},children:[masonryLayout.map((item,index)=>/*#__PURE__*/_jsx(ImageGridItem,{item:item,index:index,hasText:(item.image.title||item.image.description)&&showText!==\"none\",onImageClick:()=>enableLightbox&&setSelectedImage(item.image.src),...props},`${index}-${item.image.src}`)),/*#__PURE__*/_jsx(AnimatePresence,{children:selectedImage&&/*#__PURE__*/_jsx(motion.div,{initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},onClick:()=>setSelectedImage(null),style:{position:\"fixed\",top:0,left:0,right:0,bottom:0,backgroundColor:\"rgba(0,0,0,0.85)\",zIndex:9999,display:\"flex\",alignItems:\"center\",justifyContent:\"center\",cursor:\"zoom-out\",padding:\"40px\"},children:/*#__PURE__*/_jsx(motion.img,{initial:{scale:.9,opacity:0},animate:{scale:1,opacity:1},exit:{scale:.9,opacity:0},src:selectedImage,style:{maxWidth:\"100%\",maxHeight:\"100%\",objectFit:\"contain\",boxShadow:\"0 20px 50px rgba(0,0,0,0.5)\",borderRadius:borderRadius>20?20:borderRadius}})})}),/*#__PURE__*/_jsx(\"style\",{children:`\n                .img-anim-zoom img { transition: transform 0.4s ease; }\n                .img-anim-zoom:hover img { transform: scale(1.08); }\n            `})]});}function ImageGridItem({item,index,hasText,showText,borderRadius,backgroundColor,animation,objectFit,textPosition,textPadding,titleFont,descriptionFont,titleColor,descriptionColor,scrollAnimation,onImageClick}){const[isHovered,setIsHovered]=useState(false);const ref=useRef(null);const isInView=useInView(ref,{once:true,margin:\"-50px\"});const containerStyle={position:\"absolute\",left:item.x,top:item.y,width:item.width,height:item.height,overflow:\"hidden\",borderRadius,background:\"#eee\",opacity:isInView?1:0,transform:isInView?\"none\":scrollAnimation===\"slideUp\"?\"translateY(40px)\":\"none\",transition:\"all 0.6s cubic-bezier(0.23, 1, 0.32, 1)\",cursor:\"pointer\"};const overlayStyle={position:\"absolute\",inset:0,backgroundColor:backgroundColor,opacity:showText===\"always\"||showText===\"hover\"&&isHovered?.8:0,transition:\"opacity 0.3s ease\",display:\"flex\",flexDirection:\"column\",justifyContent:textPosition.includes(\"bottom\")?\"flex-end\":textPosition.includes(\"top\")?\"flex-start\":\"center\",alignItems:textPosition.includes(\"left\")?\"flex-start\":textPosition.includes(\"right\")?\"flex-end\":\"center\",padding:textPadding,pointerEvents:\"none\"};return /*#__PURE__*/_jsxs(\"div\",{ref:ref,style:containerStyle,className:animation===\"zoom\"?\"img-anim-zoom\":\"\",onMouseEnter:()=>setIsHovered(true),onMouseLeave:()=>setIsHovered(false),onClick:onImageClick,children:[/*#__PURE__*/_jsx(\"img\",{src:item.image.src,alt:item.image.alt,style:{width:\"100%\",height:\"100%\",objectFit,display:\"block\"}}),hasText&&/*#__PURE__*/_jsxs(\"div\",{style:overlayStyle,children:[item.image.title&&/*#__PURE__*/_jsx(\"div\",{style:{...titleFont,color:titleColor},children:item.image.title}),item.image.description&&/*#__PURE__*/_jsx(\"div\",{style:{...descriptionFont,color:descriptionColor},children:item.image.description})]})]});}addPropertyControls(ImageGrid,{images:{type:ControlType.Array,title:\"Images\",control:{type:ControlType.Object,controls:{src:{type:ControlType.ResponsiveImage},alt:{type:ControlType.String},title:{type:ControlType.String},description:{type:ControlType.String},aspectRatio:{type:ControlType.Enum,title:\"Ratio Override\",options:[\"inherit\",\"auto\",\"square\",\"portrait\",\"landscape\"],optionTitles:[\"Grid Default\",\"Auto\",\"Square\",\"Portrait\",\"Landscape\"],defaultValue:\"inherit\"}}}},enableLightbox:{type:ControlType.Boolean,title:\"Lightbox\",defaultValue:true},columns:{type:ControlType.Number,title:\"Columns\",defaultValue:2,min:1,max:6},gap:{type:ControlType.Number,title:\"Gap\",defaultValue:10,min:0,max:50},aspectRatio:{type:ControlType.Enum,title:\"Global Ratio\",options:[\"auto\",\"square\",\"portrait\",\"landscape\"],defaultValue:\"auto\"},objectFit:{type:ControlType.Enum,title:\"Object Fit\",options:[\"cover\",\"contain\",\"fill\"],defaultValue:\"cover\"},borderRadius:{type:ControlType.Number,title:\"Radius\",defaultValue:8},showText:{type:ControlType.Enum,title:\"Show Text\",options:[\"none\",\"always\",\"hover\"],defaultValue:\"none\"},backgroundColor:{type:ControlType.Color,title:\"Overlay Color\",defaultValue:\"rgba(0,0,0,0.5)\"},textPosition:{type:ControlType.Enum,title:\"Text Position\",options:[\"top-left\",\"top-center\",\"top-right\",\"center\",\"bottom-left\",\"bottom-center\",\"bottom-right\"],defaultValue:\"bottom-center\"},textPadding:{type:ControlType.Number,defaultValue:16},titleFont:{type:ControlType.Font,controls:\"extended\"},titleColor:{type:ControlType.Color,defaultValue:\"#fff\"},descriptionFont:{type:ControlType.Font,controls:\"extended\"},descriptionColor:{type:ControlType.Color,defaultValue:\"#ccc\"},animation:{type:ControlType.Enum,title:\"Hover Anim\",options:[\"none\",\"zoom\"],defaultValue:\"none\"},scrollAnimation:{type:ControlType.Enum,title:\"Scroll Anim\",options:[\"none\",\"slideUp\"],defaultValue:\"none\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"ImageGrid\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./Image_Grid.map"],"mappings":"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"}