{"version":3,"file":"TableOfContent.Cde4r31q.mjs","names":["useState","useRef"],"sources":["https:/framerusercontent.com/modules/q6TPcm1rVRPb4ymPsf0M/E8qdfSg7caQS5GXaZ2Za/TableOfContent.js"],"sourcesContent":["import{jsx as _jsx}from\"react/jsx-runtime\";import{useEffect,useState,useRef}from\"react\";import{addPropertyControls,ControlType,RenderTarget}from\"framer\";/**\n * @framerDisableUnlink\n *\n * @framerSupportedLayoutWidth any-prefer-fixed\n * @framerIntrinsicWidth 600\n * @framerSupportedLayoutHeight any-prefer-fixed\n * @framerIntrinsicHeight 400\n */export default function Table_of_Content(props){const[headers,setHeaders]=useState([]);const[activeId,setActiveId]=useState(\"\");const[firstHeadingLevel,setFirstHeadingLevel]=useState(null);const ignoreNextScrollEvent=useRef(false);const scrollTimeoutRef=useRef(null);const isCanvas=RenderTarget.current()===RenderTarget.canvas;const mockHeaders=[{id:\"h1-sample\",text:\"This is h1\",level:1},{id:\"h2-sample-1\",text:\"This is h2\",level:2},{id:\"h3-sample-1\",text:\"This is h3\",level:3},{id:\"h3-sample-2\",text:\"This is h3\",level:3},{id:\"h2-sample-2\",text:\"This is h2\",level:2},{id:\"h4-sample\",text:\"This is h4\",level:4},{id:\"h5-sample\",text:\"This is h5\",level:5},{id:\"h6-sample\",text:\"This is h6\",level:6}];useEffect(()=>{if(isCanvas){setHeaders(mockHeaders);setFirstHeadingLevel(1);setActiveId(\"h2-sample-1\");return;}const sectionElement=document.getElementById(props.section_id)||document.body;const headingElements=Array.from(sectionElement.querySelectorAll(\"h1, h2, h3, h4, h5, h6\"));if(headingElements.length>0&&firstHeadingLevel===null){setFirstHeadingLevel(parseInt(headingElements[0].tagName[1],10));}const mapped=headingElements.map((element,index)=>{if(!element.id){element.id=`header-${index}`;}return{id:element.id,text:element.innerText,level:parseInt(element.tagName[1],10)};});setHeaders(mapped);},[props.section_id,firstHeadingLevel,isCanvas]);useEffect(()=>{if(isCanvas)return;const onScroll=()=>{if(ignoreNextScrollEvent.current){ignoreNextScrollEvent.current=false;return;}let currentSectionId=\"\";headers.filter(header=>props[`showH${header.level}`]!==false).forEach(header=>{const element=document.getElementById(header.id);if(!element)return;const scrollPosition=element.getBoundingClientRect().top+window.scrollY;if(scrollPosition<window.scrollY+props.yOffset+5){currentSectionId=header.id;}});setActiveId(currentSectionId);};window.addEventListener(\"scroll\",onScroll);return()=>window.removeEventListener(\"scroll\",onScroll);},[headers,props.yOffset,props,isCanvas]);useEffect(()=>{return()=>{if(scrollTimeoutRef.current)clearTimeout(scrollTimeoutRef.current);};},[]);const getStyle=header=>{// compute base level from visible headers to avoid negative indentation\nconst visible=headers.filter(h=>props[`showH${h.level}`]!==false);const baseLevel=visible.length>0?Math.min(...visible.map(h=>h.level)):firstHeadingLevel??1;const depth=Math.max(0,header.level-baseLevel)// never negative\n;const indentPx=depth*props.indentation;const headerFont=props[`h${header.level}Font`]||{};return{display:\"block\",boxSizing:\"border-box\",width:\"100%\",maxWidth:\"100%\",// padding instead of margin to keep anchors inside the container box\npaddingLeft:`${indentPx}px`,...headerFont,color:header.id===activeId?props.activeColor:props.fontColor,fontWeight:header.id===activeId?props.activeFontWeight:headerFont.fontWeight||\"normal\",textDecoration:\"none\",marginBottom:`${props.spacing}px`,// overflow guards: wrap instead of spilling\noverflow:\"hidden\",overflowWrap:\"anywhere\",wordBreak:\"break-word\",whiteSpace:\"normal\"};};const handleClick=headerId=>{if(isCanvas)return;ignoreNextScrollEvent.current=true;const element=document.getElementById(headerId);if(element){const y=element.getBoundingClientRect().top+window.pageYOffset-props.yOffset;window.scrollTo({top:y,behavior:\"smooth\"});checkIfScrollFinished(headerId);}};const checkIfScrollFinished=headerId=>{if(scrollTimeoutRef.current){clearTimeout(scrollTimeoutRef.current);}const isScrolled=()=>{const element=document.getElementById(headerId);if(element){const rect=element.getBoundingClientRect();return Math.abs(rect.top-props.yOffset)<=1;}return false;};const checkScroll=()=>{if(isScrolled()){setActiveId(headerId);}else{scrollTimeoutRef.current=setTimeout(()=>{requestAnimationFrame(checkScroll);},10);}};checkScroll();};return /*#__PURE__*/_jsx(\"div\",{style:{overflowX:\"hidden\",width:\"100%\"},children:headers.filter(header=>props[`showH${header.level}`]!==false).map(header=>/*#__PURE__*/_jsx(\"a\",{href:`#${header.id}`,style:getStyle(header),onMouseOver:e=>e.currentTarget.style.color=props.onHoverColor,onMouseOut:e=>{e.currentTarget.style.color=header.id===activeId?props.activeColor:props.fontColor;e.currentTarget.style.fontWeight=header.id===activeId?props.activeFontWeight:props[`h${header.level}Font`]?.fontWeight||\"normal\";},onClick:e=>{e.preventDefault();handleClick(header.id);},children:header.text},header.id))});}Table_of_Content.defaultProps={section_id:\"\",fontColor:\"#000000\",activeColor:\"#FF0000\",onHoverColor:\"#00FF00\",spacing:8,indentation:10,yOffset:0,activeFontWeight:\"bold\"};addPropertyControls(Table_of_Content,{section_id:{type:ControlType.String,title:\"Section ID\"},fontColor:{type:ControlType.Color,title:\"Font Color\"},activeColor:{type:ControlType.Color,title:\"Active Color\"},onHoverColor:{type:ControlType.Color,title:\"On Hover Color\"},spacing:{type:ControlType.Number,title:\"Spacing\"},indentation:{type:ControlType.Number,title:\"Indentation\"},yOffset:{type:ControlType.Number,title:\"Y Offset\",min:0,max:200,step:1},activeFontWeight:{type:ControlType.Enum,title:\"Active Font Weight\",options:[\"normal\",\"bold\",\"bolder\",\"lighter\",\"100\",\"200\",\"300\",\"400\",\"500\",\"600\",\"700\",\"800\",\"900\"],defaultValue:\"bold\"},showH1:{type:ControlType.Boolean,title:\"Show H1\",defaultValue:true},showH2:{type:ControlType.Boolean,title:\"Show H2\",defaultValue:true},showH3:{type:ControlType.Boolean,title:\"Show H3\",defaultValue:true},showH4:{type:ControlType.Boolean,title:\"Show H4\",defaultValue:true},showH5:{type:ControlType.Boolean,title:\"Show H5\",defaultValue:true},showH6:{type:ControlType.Boolean,title:\"Show H6\",defaultValue:true},h1Font:{type:ControlType.Font,controls:\"extended\",title:\"H1 Font\"},h2Font:{type:ControlType.Font,controls:\"extended\",title:\"H2 Font\"},h3Font:{type:ControlType.Font,controls:\"extended\",title:\"H3 Font\"},h4Font:{type:ControlType.Font,controls:\"extended\",title:\"H4 Font\"},h5Font:{type:ControlType.Font,controls:\"extended\",title:\"H5 Font\"},h6Font:{type:ControlType.Font,controls:\"extended\",title:\"H6 Font\",description:\"Preview to see it in effect \\n\\nv1.8 \\n[via SegmentUI](https://www.segmentUI.com)\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"Table_of_Content\",\"slots\":[],\"annotations\":{\"framerSupportedLayoutHeight\":\"any-prefer-fixed\",\"framerIntrinsicWidth\":\"600\",\"framerIntrinsicHeight\":\"400\",\"framerDisableUnlink\":\"*\",\"framerSupportedLayoutWidth\":\"any-prefer-fixed\",\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./TableOfContent.map"],"mappings":"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"}