{"version":3,"file":"Scroll_Progress_Bar.DRqWPSMu.mjs","names":["useState","useRef","style"],"sources":["https:/framerusercontent.com/modules/qGxcI8iqSo4Pu9ZVuXEu/mgFTAYhCCroDtPQ0a18q/Scroll_Progress_Bar.js"],"sourcesContent":["import{jsx as _jsx}from\"react/jsx-runtime\";import{useEffect,useState,useRef}from\"react\";import{addPropertyControls,ControlType,RenderTarget}from\"framer\";import{motion}from\"framer-motion\";/**\n * Scroll Progress Bar\n * A customizable progress bar that tracks scroll progress of a section or entire page\n *\n * @framerDisableUnlink\n * @framerIntrinsicWidth 400\n * @framerIntrinsicHeight 8\n * @framerSupportedLayoutWidth any\n * @framerSupportedLayoutHeight fixed\n */export default function ScrollSectionNav(props){const{trackingMode,sectionName,direction,backgroundColor,fillColor,style}=props;const[scrollProgress,setScrollProgress]=useState(0);const scrollElementRef=useRef(null);// Determine if reversed based on direction\nconst isReversed=direction===\"right\";useEffect(()=>{if(typeof window===\"undefined\")return;if(RenderTarget.current()===RenderTarget.canvas)return;let cleanup=()=>{};if(trackingMode===\"page\"){// Page scroll tracking\nconst handlePageScroll=()=>{const scrollTop=window.pageYOffset||document.documentElement.scrollTop;const scrollHeight=document.documentElement.scrollHeight;const clientHeight=document.documentElement.clientHeight;const maxScroll=scrollHeight-clientHeight;let progress=0;if(maxScroll>0){progress=scrollTop/maxScroll;}if(isReversed){progress=1-progress;}setScrollProgress(Math.min(1,Math.max(0,progress)));};window.addEventListener(\"scroll\",handlePageScroll,{passive:true});window.addEventListener(\"resize\",handlePageScroll);handlePageScroll();cleanup=()=>{window.removeEventListener(\"scroll\",handlePageScroll);window.removeEventListener(\"resize\",handlePageScroll);};}else if(trackingMode===\"section\"&&sectionName){// Section scroll tracking\nconst findAndTrackSection=()=>{// Clean the section name - don't modify it, use as-is first\nconst originalName=sectionName.trim();// Also prepare variations\nconst nameWithHash=originalName.startsWith(\"#\")?originalName:\"#\"+originalName;const nameWithoutHash=originalName.startsWith(\"#\")?originalName.substring(1):originalName;const lowerCaseName=originalName.toLowerCase();const lowerCaseWithHash=nameWithHash.toLowerCase();const lowerCaseWithoutHash=nameWithoutHash.toLowerCase();console.log(`Looking for section: \"${originalName}\"`);// Try to find the section with various methods\nlet targetElement=null;// Method 1: Direct data-framer-name match (exact)\ntargetElement=document.querySelector(`[data-framer-name=\"${originalName}\"]`)||document.querySelector(`[data-framer-name=\"${nameWithHash}\"]`)||document.querySelector(`[data-framer-name=\"${nameWithoutHash}\"]`);// Method 2: Case-insensitive search\nif(!targetElement){const allElements=document.querySelectorAll(\"[data-framer-name]\");targetElement=Array.from(allElements).find(el=>{const name=el.getAttribute(\"data-framer-name\")?.toLowerCase();return name===lowerCaseName||name===lowerCaseWithHash||name===lowerCaseWithoutHash;})||null;}// Method 3: Look for Framer's scroll containers\nif(!targetElement){// Framer often wraps scroll sections in containers\n// Look for elements with specific Framer classes or attributes\nconst scrollContainers=document.querySelectorAll('[data-framer-component-type=\"ScrollSection\"], [data-framer-scroll-section], .framer-scroll-section');for(const container of scrollContainers){// Check if this container or its children have our target name\nconst hasName=container.getAttribute(\"data-framer-name\")===originalName||container.querySelector(`[data-framer-name=\"${originalName}\"]`);if(hasName){targetElement=container;break;}}}if(!targetElement){console.error(`Section \"${originalName}\" not found`);console.log(\"Available sections:\");document.querySelectorAll(\"[data-framer-name]\").forEach(el=>{console.log(`- \"${el.getAttribute(\"data-framer-name\")}\"`);});return null;}console.log(\"Found section element:\",targetElement);// Now find the actual scrollable element\n// It could be the element itself or a child/parent\nlet scrollElement=null;// Check if the target element itself is scrollable\nconst checkScrollable=el=>{const style=window.getComputedStyle(el);const hasScrollX=(style.overflowX===\"auto\"||style.overflowX===\"scroll\")&&el.scrollWidth>el.clientWidth;const hasScrollY=(style.overflowY===\"auto\"||style.overflowY===\"scroll\")&&el.scrollHeight>el.clientHeight;return hasScrollX||hasScrollY;};if(checkScrollable(targetElement)){scrollElement=targetElement;}else{// Check children\nconst scrollableChild=targetElement.querySelector(\"*\");if(scrollableChild&&checkScrollable(scrollableChild)){scrollElement=scrollableChild;}else{// Check parent\nlet parent=targetElement.parentElement;while(parent&&parent!==document.body){if(checkScrollable(parent)){scrollElement=parent;break;}parent=parent.parentElement;}}}// Last resort: find any scrollable element within or around the target\nif(!scrollElement){const allDescendants=targetElement.querySelectorAll(\"*\");for(const el of allDescendants){if(checkScrollable(el)){scrollElement=el;break;}}}if(!scrollElement){console.error(\"No scrollable element found in section\");return null;}console.log(\"Scrollable element found:\",scrollElement);scrollElementRef.current=scrollElement;// Set up scroll tracking\nconst handleScroll=()=>{if(!scrollElement)return;let progress=0;const style=window.getComputedStyle(scrollElement);const hasScrollX=(style.overflowX===\"auto\"||style.overflowX===\"scroll\")&&scrollElement.scrollWidth>scrollElement.clientWidth;const hasScrollY=(style.overflowY===\"auto\"||style.overflowY===\"scroll\")&&scrollElement.scrollHeight>scrollElement.clientHeight;if(hasScrollX){const maxScroll=scrollElement.scrollWidth-scrollElement.clientWidth;if(maxScroll>0){progress=scrollElement.scrollLeft/maxScroll;}}else if(hasScrollY){const maxScroll=scrollElement.scrollHeight-scrollElement.clientHeight;if(maxScroll>0){progress=scrollElement.scrollTop/maxScroll;}}if(isReversed){progress=1-progress;}setScrollProgress(Math.min(1,Math.max(0,progress)));};scrollElement.addEventListener(\"scroll\",handleScroll,{passive:true});window.addEventListener(\"resize\",handleScroll);handleScroll()// Initial calculation\n;return()=>{scrollElement.removeEventListener(\"scroll\",handleScroll);window.removeEventListener(\"resize\",handleScroll);};};// Try to find section immediately\nlet cleanupFn=findAndTrackSection();// Retry after delay in case DOM is still loading\nconst retryTimeouts=[100,500,1e3,2e3];const timeoutIds=[];retryTimeouts.forEach(delay=>{const id=setTimeout(()=>{if(!scrollElementRef.current){const newCleanup=findAndTrackSection();if(newCleanup){if(cleanupFn)cleanupFn();cleanupFn=newCleanup;}}},delay);timeoutIds.push(id);});cleanup=()=>{timeoutIds.forEach(clearTimeout);if(cleanupFn)cleanupFn();};}return cleanup;},[trackingMode,sectionName,isReversed]);// Preview in canvas\nif(RenderTarget.current()===RenderTarget.canvas){return /*#__PURE__*/_jsx(\"div\",{style:{...style,backgroundColor,overflow:\"hidden\",position:\"relative\"},children:/*#__PURE__*/_jsx(\"div\",{style:{position:\"absolute\",width:\"40%\",height:\"100%\",backgroundColor:fillColor,left:direction===\"left\"?0:\"auto\",right:direction===\"right\"?0:\"auto\",top:0}})});}return /*#__PURE__*/_jsx(\"div\",{style:{...style,backgroundColor,overflow:\"hidden\",position:\"relative\"},children:/*#__PURE__*/_jsx(motion.div,{style:{position:\"absolute\",backgroundColor:fillColor,height:\"100%\",width:`${scrollProgress*100}%`,top:0,...direction===\"left\"?{left:0}:{right:0}},initial:false,animate:{width:`${scrollProgress*100}%`},transition:{type:\"spring\",damping:30,stiffness:400}})});}// Property Controls\naddPropertyControls(ScrollSectionNav,{trackingMode:{type:ControlType.Enum,title:\"Track\",options:[\"page\",\"section\"],optionTitles:[\"Page\",\"Section\"],defaultValue:\"page\",displaySegmentedControl:true},sectionName:{type:ControlType.String,title:\"Section Name\",placeholder:\"test or #test\",description:\"Enter the exact name of your Scroll Section\",hidden:props=>props.trackingMode===\"page\"},direction:{type:ControlType.Enum,title:\"Direction\",options:[\"left\",\"right\"],optionTitles:[\"→\",\"←\"],defaultValue:\"left\",displaySegmentedControl:true},backgroundColor:{type:ControlType.Color,title:\"Background\",defaultValue:\"#E5E5E5\"},fillColor:{type:ControlType.Color,title:\"Fill\",defaultValue:\"#0099FF\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"ScrollSectionNav\",\"slots\":[],\"annotations\":{\"framerDisableUnlink\":\"* @framerIntrinsicWidth 400\",\"framerSupportedLayoutWidth\":\"any\",\"framerContractVersion\":\"1\",\"framerSupportedLayoutHeight\":\"fixed\",\"framerIntrinsicHeight\":\"8\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./Scroll_Progress_Bar.map"],"mappings":"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"}