{"version":3,"file":"ScrollIndicator.aIX67jbC.mjs","names":[],"sources":["https:/framerusercontent.com/modules/rIpOhFvOVw901YsYvjkK/ws0v4KCZbbkeCKWPpuaW/ScrollIndicator.js"],"sourcesContent":["import{jsx as _jsx}from\"react/jsx-runtime\";import{useEffect,useState,useRef,startTransition}from\"react\";import{addPropertyControls,ControlType,RenderTarget}from\"framer\";/**\n * Scroll Indicator that binds to a scrollable container by ID\n * \n * @framerSupportedLayoutWidth any\n * @framerSupportedLayoutHeight auto\n */export default function ScrollIndicator(props){const{targetId,cardWidth,dotSize,dotSpacing,activeColor,inactiveColor,style,useDynamicDots,dotCount:fixedDotCount}=props;const[activeDot,setActiveDot]=useState(0);const[calculatedDotCount,setCalculatedDotCount]=useState(fixedDotCount);const scrollListenerRef=useRef();// Effect for initial scroll hint animation\nuseEffect(()=>{if(typeof window===\"undefined\"||RenderTarget.current()===RenderTarget.thumbnail)return;const targetElement=document.getElementById(targetId);if(!targetElement)return;// Add a small delay before starting the animation\nconst animationTimeout=setTimeout(()=>{// Scroll to +60px\ntargetElement.scrollTo({left:60,behavior:\"smooth\"});// Then scroll back to 0 after a short delay\nsetTimeout(()=>{targetElement.scrollTo({left:0,behavior:\"smooth\"});},500);},500);return()=>clearTimeout(animationTimeout);},[targetId]);// Main effect for scroll tracking\nuseEffect(()=>{if(typeof window===\"undefined\")return;const targetElement=document.getElementById(targetId);if(!targetElement)return;// Calculate the number of dots based on scrollable width\nconst calculateDotCount=()=>{if(!targetElement||!useDynamicDots)return;const scrollableWidth=targetElement.scrollWidth;const containerWidth=targetElement.clientWidth;// Calculate how many complete cards fit in the scrollable area\n// Add 1 because we need dots for partial views too\nconst totalCards=Math.ceil(scrollableWidth/cardWidth);const visibleCards=Math.floor(containerWidth/cardWidth);// The number of dots is the number of possible scroll positions\n// which is total cards minus visible cards plus 1\nconst newDotCount=Math.max(1,totalCards-visibleCards+1);startTransition(()=>{setCalculatedDotCount(newDotCount);});};const handleScroll=()=>{if(!targetElement)return;const scrollPosition=targetElement.scrollLeft;const maxScroll=targetElement.scrollWidth-targetElement.clientWidth;// Calculate active dot based on scroll percentage\nconst dots=useDynamicDots?calculatedDotCount:fixedDotCount;const scrollRatio=maxScroll>0?scrollPosition/maxScroll:0;const newActiveDot=Math.min(dots-1,Math.round(scrollRatio*(dots-1)));startTransition(()=>{setActiveDot(newActiveDot);});};// Calculate dot count initially\ncalculateDotCount();// Store the listener reference for cleanup\nscrollListenerRef.current=handleScroll;// Initial calculation of active dot\nhandleScroll();// Add scroll event listener\ntargetElement.addEventListener(\"scroll\",handleScroll);// No need for hint hiding logic anymore\n// Add resize listener to recalculate dot count if needed\nconst resizeObserver=new ResizeObserver(()=>{calculateDotCount();handleScroll();});resizeObserver.observe(targetElement);// Cleanup function\nreturn()=>{if(targetElement&&scrollListenerRef.current){targetElement.removeEventListener(\"scroll\",scrollListenerRef.current);// No need to remove hint scroll listener\n}resizeObserver.disconnect();};},[targetId,cardWidth,useDynamicDots,fixedDotCount,calculatedDotCount]);const handleDotClick=index=>{if(typeof window===\"undefined\")return;const targetElement=document.getElementById(targetId);if(!targetElement)return;const dots=useDynamicDots?calculatedDotCount:fixedDotCount;const maxScroll=targetElement.scrollWidth-targetElement.clientWidth;// Calculate the scroll position based on the dot index\n// For dynamic dots, we use the percentage of the way through the dots\nconst scrollPosition=dots>1?index/(dots-1)*maxScroll:0;targetElement.scrollTo({left:scrollPosition,behavior:\"smooth\"});};return /*#__PURE__*/_jsx(\"div\",{style:{display:\"flex\",justifyContent:\"center\",alignItems:\"center\",gap:dotSpacing,padding:\"10px 0\",position:\"relative\",...style},children:Array.from({length:useDynamicDots?calculatedDotCount:fixedDotCount}).map((_,index)=>/*#__PURE__*/_jsx(\"button\",{onClick:()=>handleDotClick(index),style:{width:dotSize,height:dotSize,borderRadius:\"50%\",backgroundColor:index===activeDot?activeColor:inactiveColor,border:\"none\",padding:0,cursor:\"pointer\",transition:\"background-color 0.3s ease\"},\"aria-label\":`Go to slide ${index+1}`,\"aria-current\":index===activeDot?\"true\":\"false\"},index))});}addPropertyControls(ScrollIndicator,{targetId:{type:ControlType.String,title:\"Target ID\",defaultValue:\"scroll-wrapper-trending\",placeholder:\"Enter element ID\"},useDynamicDots:{type:ControlType.Boolean,title:\"Dynamic Dots\",defaultValue:true,enabledTitle:\"Auto\",disabledTitle:\"Fixed\"},dotCount:{type:ControlType.Number,title:\"Dot Count\",defaultValue:5,min:1,max:20,step:1,hidden:({useDynamicDots})=>useDynamicDots},cardWidth:{type:ControlType.Number,title:\"Card Width\",defaultValue:300,min:50,max:1e3,step:10,unit:\"px\"},dotSize:{type:ControlType.Number,title:\"Dot Size\",defaultValue:10,min:4,max:20,step:1,unit:\"px\"},dotSpacing:{type:ControlType.Number,title:\"Dot Spacing\",defaultValue:8,min:2,max:30,step:1,unit:\"px\"},activeColor:{type:ControlType.Color,title:\"Active Color\",defaultValue:\"#000000\"},inactiveColor:{type:ControlType.Color,title:\"Inactive Color\",defaultValue:\"#CCCCCC\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"ScrollIndicator\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\",\"framerSupportedLayoutWidth\":\"any\",\"framerSupportedLayoutHeight\":\"auto\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./ScrollIndicator.map"],"mappings":"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"}