{"version":3,"file":"VerticalDialNav.Py229XWR.mjs","names":["useState","useRef","useCallback"],"sources":["https:/framerusercontent.com/modules/WOXHopkYVtFTnKvP64CM/5s0oGE9dsvJryTDnMp6N/VerticalDialNav.js"],"sourcesContent":["// Vertical scroll-linked dial menu with fading for distant items\n// Links to scroll sections, highlights current, fades others by distance\nimport{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{useEffect,useRef,useState,useCallback,startTransition}from\"react\";import{addPropertyControls,ControlType,RenderTarget}from\"framer\";/**\n * VerticalDialNav\n *\n * Vertical text menu that links to scroll sections within a page. The subnav scrolls vertically to match the current selected scroll section and fades menu items further away from the current selected scroll section. Like a vertical dial to navigate to the specific section of the page.\n *\n * @framerSupportedLayoutWidth fixed\n * @framerSupportedLayoutHeight fixed\n */export default function VerticalDialNav(props){const{sections=[{id:\"section-1\",label:\"Section 1\"},{id:\"section-2\",label:\"Section 2\"},{id:\"section-3\",label:\"Section 3\"},{id:\"section-4\",label:\"Section 4\"},{id:\"section-5\",label:\"Section 5\"}],activeColor,fadeDistance,font,dialRadius,itemSpacing,alignment,triggerSectionId=\"section-1\",hideTriggerSectionId=\"section-5\",showScrollToTop=true,scrollToTopLabel=\"Top\",style}=props;const[activeIndex,setActiveIndex]=useState(0);const[isVisible,setIsVisible]=useState(false);const ticking=useRef(false);// Listen for scroll and update activeIndex\nuseEffect(()=>{function onScroll(){if(ticking.current)return;ticking.current=true;requestAnimationFrame(()=>{let found=-1;let maxVisibleArea=0;for(let i=0;i<sections.length;i++){const el=document.getElementById(sections[i].id);if(el){const rect=el.getBoundingClientRect();const viewportHeight=window.innerHeight;// Calculate visible area of the section\nconst visibleTop=Math.max(0,rect.top);const visibleBottom=Math.min(viewportHeight,rect.bottom);const visibleHeight=Math.max(0,visibleBottom-visibleTop);// If this section has more visible area than previous ones, it's the active one\nif(visibleHeight>maxVisibleArea){maxVisibleArea=visibleHeight;found=i;}}}// Only set active if a section is actually visible\nif(maxVisibleArea>0){startTransition(()=>setActiveIndex(found));}else{startTransition(()=>setActiveIndex(-1));}// Check visibility based on trigger sections\nconst triggerEl=document.getElementById(triggerSectionId);const hideTriggerEl=document.getElementById(hideTriggerSectionId);if(triggerEl&&hideTriggerEl){const triggerRect=triggerEl.getBoundingClientRect();const hideTriggerRect=hideTriggerEl.getBoundingClientRect();// Show when trigger section enters viewport (top of section is visible)\nconst hasEnteredTrigger=triggerRect.top<=window.innerHeight;// Hide when hide trigger section passes above viewport (bottom of section goes above viewport top)\nconst hasPassedHideTrigger=hideTriggerRect.bottom<0;const shouldBeVisible=hasEnteredTrigger&&!hasPassedHideTrigger;startTransition(()=>setIsVisible(shouldBeVisible));}ticking.current=false;});}if(typeof window!==\"undefined\"){window.addEventListener(\"scroll\",onScroll,{passive:true});onScroll();return()=>window.removeEventListener(\"scroll\",onScroll);}},[sections,triggerSectionId,hideTriggerSectionId]);// Scroll to section\nconst handleClick=useCallback((id,idx)=>e=>{e.preventDefault();startTransition(()=>setActiveIndex(idx));const el=document.getElementById(id);if(el){el.scrollIntoView({behavior:\"smooth\",block:\"center\"});}},[]);// Scroll to top handler\nconst handleScrollToTop=useCallback(e=>{e.preventDefault();window.scrollTo({top:0,behavior:\"smooth\"});startTransition(()=>setActiveIndex(-1));},[]);// Magnetic scroll: center the active item in the dial\nconst dialRef=useRef(null);const itemRefs=useRef([]);useEffect(()=>{if(!dialRef.current||!itemRefs.current[activeIndex])return;itemRefs.current[activeIndex].scrollIntoView({behavior:\"smooth\",block:\"center\"});},[activeIndex,sections.length]);// Fade function\nfunction getOpacity(idx){if(activeIndex===-1)return .3;const dist=Math.abs(idx-activeIndex);if(dist===0)return 1;if(dist>fadeDistance)return .3;return .3+(fadeDistance-dist)/fadeDistance*.2;}const isStatic=RenderTarget.current()===RenderTarget.canvas;// Ensure minimum dimensions - handle all cases properly\nconst getSize=(value,defaultSize)=>{if(value===undefined||value===null)return defaultSize;if(value===\"100%\")return defaultSize;if(typeof value===\"number\")return Math.max(5,value);if(typeof value===\"string\"){const parsed=parseFloat(value);return isNaN(parsed)?defaultSize:Math.max(5,parsed);}return defaultSize;};const width=getSize(style?.width,200);const height=getSize(style?.height,400);return /*#__PURE__*/_jsx(\"nav\",{style:{...style,width,height,minWidth:5,minHeight:5,background:\"none\",borderRadius:dialRadius,display:\"flex\",flexDirection:\"column\",alignItems:alignment===\"left\"?\"flex-start\":alignment===\"right\"?\"flex-end\":\"center\",justifyContent:\"flex-start\",overflow:\"hidden\",position:\"relative\",boxShadow:\"none\",opacity:isVisible?1:0,pointerEvents:isVisible?\"auto\":\"none\",transition:\"opacity 0.3s cubic-bezier(.4,0,.2,1)\",paddingLeft:14,paddingBottom:20},\"aria-label\":\"Section navigation\",\"aria-hidden\":!isVisible,children:/*#__PURE__*/_jsxs(\"div\",{ref:dialRef,style:{width:\"100%\",height:\"100%\",overflowY:\"auto\",display:\"flex\",flexDirection:\"column\",alignItems:alignment===\"left\"?\"flex-start\":alignment===\"right\"?\"flex-end\":\"center\",justifyContent:\"flex-end\",gap:Math.max(0,itemSpacing),scrollbarWidth:\"none\",msOverflowStyle:\"none\",paddingRight:alignment===\"right\"?8:0,paddingLeft:alignment===\"left\"?8:0},tabIndex:0,children:[sections.map((section,idx)=>{const itemOpacity=isStatic?1:getOpacity(idx);return /*#__PURE__*/_jsx(\"a\",{ref:el=>itemRefs.current[idx]=el,href:`#${section.id}`,onClick:handleClick(section.id,idx),style:{color:idx===activeIndex?activeColor:\"#000000\",...font,opacity:itemOpacity,transition:\"opacity 0.4s cubic-bezier(.4,0,.2,1), color 0.4s cubic-bezier(.4,0,.2,1), transform 0.4s cubic-bezier(.4,0,.2,1), font-variation-settings 0.4s cubic-bezier(.4,0,.2,1)\",padding:0,width:\"100%\",textAlign:alignment,cursor:\"pointer\",userSelect:\"none\",textDecoration:\"none\",fontWeight:idx===activeIndex?500:400,fontVariationSettings:idx===activeIndex?'\"wght\" 500':'\"wght\" 400',borderRadius:6,background:\"transparent\",outline:\"none\",transform:idx===activeIndex?\"scale(1.06)\":\"scale(1)\",WebkitFontSmoothing:\"antialiased\",MozOsxFontSmoothing:\"grayscale\",minHeight:0,lineHeight:1,boxSizing:\"border-box\",paddingRight:idx===activeIndex?14:0,paddingLeft:idx===activeIndex?12:0,margin:0},\"aria-current\":idx===activeIndex?\"true\":undefined,tabIndex:0,role:\"link\",children:section.label},section.id);}),showScrollToTop&&/*#__PURE__*/_jsxs(\"a\",{onClick:handleScrollToTop,style:{color:\"#000000\",...font,opacity:.3,transition:\"opacity 0.4s cubic-bezier(.4,0,.2,1), color 0.4s cubic-bezier(.4,0,.2,1), transform 0.4s cubic-bezier(.4,0,.2,1), font-variation-settings 0.4s cubic-bezier(.4,0,.2,1)\",padding:0,width:\"100%\",textAlign:alignment,cursor:\"pointer\",userSelect:\"none\",textDecoration:\"none\",fontWeight:400,fontVariationSettings:'\"wght\" 400',borderRadius:6,background:\"transparent\",outline:\"none\",transform:\"scale(1)\",WebkitFontSmoothing:\"antialiased\",MozOsxFontSmoothing:\"grayscale\",minHeight:0,lineHeight:1,boxSizing:\"border-box\",paddingRight:0,paddingLeft:0,margin:0,marginTop:16,display:\"flex\",alignItems:\"center\",gap:6},tabIndex:0,role:\"link\",children:[/*#__PURE__*/_jsx(\"svg\",{width:\"12\",height:\"12\",viewBox:\"0 0 12 12\",fill:\"none\",xmlns:\"http://www.w3.org/2000/svg\",style:{flexShrink:0},children:/*#__PURE__*/_jsx(\"path\",{d:\"M6 2L6 10M6 2L3 5M6 2L9 5\",stroke:\"currentColor\",strokeWidth:\"1.5\",strokeLinecap:\"round\",strokeLinejoin:\"round\"})}),scrollToTopLabel]})]})});}addPropertyControls(VerticalDialNav,{sections:{type:ControlType.Array,title:\"Sections\",control:{type:ControlType.Object,controls:{id:{type:ControlType.String,title:\"Section ID\",defaultValue:\"section-1\"},label:{type:ControlType.String,title:\"Label\",defaultValue:\"Section 1\"}}},defaultValue:[{id:\"section-1\",label:\"Section 1\"},{id:\"section-2\",label:\"Section 2\"},{id:\"section-3\",label:\"Section 3\"},{id:\"section-4\",label:\"Section 4\"},{id:\"section-5\",label:\"Section 5\"}],maxCount:50},showScrollToTop:{type:ControlType.Boolean,title:\"Show Scroll to Top\",defaultValue:true,enabledTitle:\"Show\",disabledTitle:\"Hide\"},scrollToTopLabel:{type:ControlType.String,title:\"Scroll to Top Label\",defaultValue:\"Scroll to Top\",hidden:({showScrollToTop})=>!showScrollToTop},triggerSectionId:{type:ControlType.String,title:\"Show Trigger Section\",defaultValue:\"scope\",description:\"Nav becomes visible when this section enters viewport\"},hideTriggerSectionId:{type:ControlType.String,title:\"Hide Trigger Section\",defaultValue:\"gratitude\",description:\"Nav becomes hidden when scrolling past this section\"},activeColor:{type:ControlType.Color,title:\"Active Color\",defaultValue:\"#000000\"},fadeDistance:{type:ControlType.Number,title:\"Fade Distance\",defaultValue:2,min:1,max:10,step:1},font:{type:ControlType.Font,title:\"Font\",controls:\"extended\",defaultFontType:\"sans-serif\",defaultValue:{fontSize:14,variant:\"Semibold\",letterSpacing:\"-0.01em\",lineHeight:\"1.2em\"}},dialRadius:{type:ControlType.Number,title:\"Dial Radius\",defaultValue:24,min:0,max:64,step:1,unit:\"px\"},itemSpacing:{type:ControlType.Number,title:\"Item Spacing\",defaultValue:0,min:0,max:40,step:1,unit:\"px\"},alignment:{type:ControlType.Enum,title:\"Alignment\",options:[\"left\",\"center\",\"right\"],optionTitles:[\"Left\",\"Center\",\"Right\"],defaultValue:\"center\",displaySegmentedControl:true}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"VerticalDialNav\",\"slots\":[],\"annotations\":{\"framerSupportedLayoutHeight\":\"fixed\",\"framerContractVersion\":\"1\",\"framerSupportedLayoutWidth\":\"fixed\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./VerticalDialNav.map"],"mappings":"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"}