{"version":3,"file":"DraggableContainer.DRAR--QM.mjs","names":["useRef","useState"],"sources":["https:/framerusercontent.com/modules/t6jCaUAmiq6lsYMsEVY0/TxnXwHOHIcy6wcnv72Db/DraggableContainer.js"],"sourcesContent":["// Draggable container for horizontal scrolling content (e.g., CMS gallery)\nimport{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{useRef,useState,useEffect,startTransition}from\"react\";import{addPropertyControls,ControlType}from\"framer\";import{motion,useMotionValue,animate}from\"framer-motion\";/**\n * Draggable Container\n *\n * A container that enables horizontal dragging to view content.\n * Perfect for image galleries and horizontal scrolling layouts.\n *\n * @framerSupportedLayoutWidth any-prefer-fixed\n * @framerSupportedLayoutHeight any-prefer-fixed\n */export default function DraggableContainer(props){const{children,showScrollbar=false,dragElastic=.1,showArrows=true,scrollDistance=300,arrowSize=40,arrowColor=\"#000000\",arrowBackgroundColor=\"#FFFFFF\",arrowBorderRadius=50}=props;const containerRef=useRef(null);const contentRef=useRef(null);const draggedRef=useRef(false);const[constraints,setConstraints]=useState({left:-100,right:0});const[scrollbarWidth,setScrollbarWidth]=useState(33);const[scrollbarPos,setScrollbarPos]=useState(0);const[canScrollLeft,setCanScrollLeft]=useState(false);const[canScrollRight,setCanScrollRight]=useState(true);const[scale,setScale]=useState(1);const x=useMotionValue(0);// Track x motion value changes for scrollbar and arrow visibility\nuseEffect(()=>{const unsubscribe=x.on(\"change\",latest=>{if(!containerRef.current||constraints.left>=0){startTransition(()=>{setScrollbarPos(0);setCanScrollLeft(false);setCanScrollRight(false);});return;}const dragRange=Math.abs(constraints.left);const progress=Math.abs(latest)/dragRange;const containerWidth=containerRef.current.offsetWidth;const scrollbarTrackWidth=containerWidth*.8;const maxScrollbarPosition=scrollbarTrackWidth*(100-scrollbarWidth)/100;startTransition(()=>{setScrollbarPos(Math.min(maxScrollbarPosition,progress*maxScrollbarPosition));setCanScrollLeft(latest<-1);setCanScrollRight(latest>constraints.left+1);});});return unsubscribe;},[x,constraints,scrollbarWidth]);useEffect(()=>{const updateConstraints=()=>{if(!containerRef.current||!contentRef.current)return;const containerWidth=containerRef.current.offsetWidth;const containerHeight=containerRef.current.offsetHeight;const contentHeight=contentRef.current.scrollHeight;const contentWidth=contentRef.current.scrollWidth;// Calculate scale to fit content height into container height\nconst newScale=containerHeight>0&&contentHeight>containerHeight?containerHeight/contentHeight:1;// After scaling, effective content width changes\nconst scaledContentWidth=contentWidth*newScale;const maxDrag=Math.min(0,containerWidth-scaledContentWidth);startTransition(()=>{setScale(newScale);setConstraints({left:maxDrag,right:0});if(scaledContentWidth>containerWidth){const visibleRatio=containerWidth/scaledContentWidth;setScrollbarWidth(Math.max(10,Math.min(100,visibleRatio*100)));}else{setScrollbarWidth(100);}});};const timer=setTimeout(updateConstraints,100);let resizeObserver=null;if(typeof window!==\"undefined\"&&contentRef.current){resizeObserver=new ResizeObserver(updateConstraints);resizeObserver.observe(contentRef.current);resizeObserver.observe(containerRef.current);window.addEventListener(\"resize\",updateConstraints);}return()=>{clearTimeout(timer);if(typeof window!==\"undefined\"){window.removeEventListener(\"resize\",updateConstraints);}if(resizeObserver){resizeObserver.disconnect();}};},[children]);const scrollLeft=()=>{const newX=Math.min(0,x.get()+scrollDistance);animate(x,newX,{type:\"spring\",stiffness:300,damping:30});};const scrollRight=()=>{const newX=Math.max(constraints.left,x.get()-scrollDistance);animate(x,newX,{type:\"spring\",stiffness:300,damping:30});};const handleDragStart=event=>{event.preventDefault();draggedRef.current=false;};const handleDrag=(event,info)=>{if(Math.abs(info.offset.x)>5){draggedRef.current=true;}};const handleDragEnd=()=>{setTimeout(()=>{draggedRef.current=false;},100);};const handleClickCapture=e=>{if(draggedRef.current){e.preventDefault();e.stopPropagation();}};return /*#__PURE__*/_jsxs(\"div\",{ref:containerRef,style:{width:\"100%\",height:\"100%\",overflow:\"hidden\",position:\"relative\"},children:[/*#__PURE__*/_jsx(motion.div,{ref:contentRef,drag:\"x\",dragConstraints:constraints,dragElastic:dragElastic,dragMomentum:true,dragTransition:{bounceStiffness:300,bounceDamping:30},style:{display:\"flex\",alignItems:\"flex-start\",transformOrigin:\"top left\",scale,cursor:\"grab\",userSelect:\"none\",WebkitUserSelect:\"none\",x},whileTap:{cursor:\"grabbing\"},onDragStart:handleDragStart,onDrag:handleDrag,onDragEnd:handleDragEnd,children:/*#__PURE__*/_jsx(\"div\",{style:{display:\"contents\"},onDragStart:e=>e.preventDefault(),onClickCapture:handleClickCapture,children:children})}),showArrows&&canScrollLeft&&/*#__PURE__*/_jsx(motion.button,{onClick:scrollLeft,initial:{opacity:0},animate:{opacity:1,y:\"-50%\"},exit:{opacity:0},whileHover:{scale:1.05},whileTap:{scale:.98},style:{position:\"absolute\",left:16,top:\"50%\",zIndex:10,width:arrowSize,height:arrowSize,borderRadius:`${arrowBorderRadius}%`,backgroundColor:arrowBackgroundColor,border:\"none\",cursor:\"pointer\",display:\"flex\",alignItems:\"center\",justifyContent:\"center\",boxShadow:\"0 2px 8px rgba(0, 0, 0, 0.15)\"},\"aria-label\":\"Scroll left\",children:/*#__PURE__*/_jsx(\"svg\",{width:arrowSize*.5,height:arrowSize*.5,viewBox:\"0 0 24 24\",fill:\"none\",stroke:arrowColor,strokeWidth:\"2\",strokeLinecap:\"round\",strokeLinejoin:\"round\",children:/*#__PURE__*/_jsx(\"polyline\",{points:\"15 18 9 12 15 6\"})})}),showArrows&&canScrollRight&&/*#__PURE__*/_jsx(motion.button,{onClick:scrollRight,initial:{opacity:0},animate:{opacity:1,y:\"-50%\"},exit:{opacity:0},whileHover:{scale:1.05},whileTap:{scale:.98},style:{position:\"absolute\",right:16,top:\"50%\",zIndex:10,width:arrowSize,height:arrowSize,borderRadius:`${arrowBorderRadius}%`,backgroundColor:arrowBackgroundColor,border:\"none\",cursor:\"pointer\",display:\"flex\",alignItems:\"center\",justifyContent:\"center\",boxShadow:\"0 2px 8px rgba(0, 0, 0, 0.15)\"},\"aria-label\":\"Scroll right\",children:/*#__PURE__*/_jsx(\"svg\",{width:arrowSize*.5,height:arrowSize*.5,viewBox:\"0 0 24 24\",fill:\"none\",stroke:arrowColor,strokeWidth:\"2\",strokeLinecap:\"round\",strokeLinejoin:\"round\",children:/*#__PURE__*/_jsx(\"polyline\",{points:\"9 18 15 12 9 6\"})})}),showScrollbar&&constraints.left<0&&/*#__PURE__*/_jsx(\"div\",{style:{position:\"absolute\",bottom:8,left:\"50%\",transform:\"translateX(-50%)\",width:\"80%\",height:4,backgroundColor:\"rgba(0, 0, 0, 0.1)\",borderRadius:2,overflow:\"hidden\"},children:/*#__PURE__*/_jsx(motion.div,{style:{height:\"100%\",backgroundColor:\"rgba(0, 0, 0, 0.3)\",borderRadius:2,x:scrollbarPos,width:`${scrollbarWidth}%`}})})]});}addPropertyControls(DraggableContainer,{children:{type:ControlType.Slot,title:\"Content\"},showScrollbar:{type:ControlType.Boolean,title:\"Scrollbar\",defaultValue:false,enabledTitle:\"Show\",disabledTitle:\"Hide\"},dragElastic:{type:ControlType.Number,title:\"Elasticity\",description:\"Controls the bounce effect when dragging past the edges. Higher values = more bounce.\",defaultValue:.1,min:0,max:1,step:.05},showArrows:{type:ControlType.Boolean,title:\"Arrows\",defaultValue:true,enabledTitle:\"Show\",disabledTitle:\"Hide\"},scrollDistance:{type:ControlType.Number,title:\"Scroll Distance\",defaultValue:300,min:50,max:1e3,step:50,unit:\"px\",hidden:({showArrows})=>!showArrows},arrowSize:{type:ControlType.Number,title:\"Arrow Size\",defaultValue:40,min:24,max:80,step:4,unit:\"px\",hidden:({showArrows})=>!showArrows},arrowColor:{type:ControlType.Color,title:\"Arrow Color\",defaultValue:\"#000000\",hidden:({showArrows})=>!showArrows},arrowBackgroundColor:{type:ControlType.Color,title:\"Arrow Background\",defaultValue:\"#FFFFFF\",hidden:({showArrows})=>!showArrows},arrowBorderRadius:{type:ControlType.Number,title:\"Arrow Radius\",defaultValue:50,min:0,max:50,step:1,unit:\"%\",hidden:({showArrows})=>!showArrows}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"DraggableContainer\",\"slots\":[\"children\"],\"annotations\":{\"framerSupportedLayoutWidth\":\"any-prefer-fixed\",\"framerContractVersion\":\"1\",\"framerSupportedLayoutHeight\":\"any-prefer-fixed\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./DraggableContainer.map"],"mappings":"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"}