{"version":3,"file":"TableOfContent.CvfUPiBT.mjs","names":["useState","useRef","headers"],"sources":["https:/framerusercontent.com/modules/q6TPcm1rVRPb4ymPsf0M/x5zUqV08yuZNAKe8gPvn/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 headers=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(headers);},[props.section_id,firstHeadingLevel]);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);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]);const getStyle=header=>{const indentation=firstHeadingLevel?header.level-firstHeadingLevel:0;const headerFont=props[`h${header.level}Font`]||{};return{display:\"block\",...headerFont,color:header.id===activeId?props.activeColor:props.fontColor,fontWeight:header.id===activeId?props.activeFontWeight:headerFont.fontWeight||\"normal\",textDecoration:\"none\",marginBottom:`${props.spacing}px`,marginLeft:`${indentation*props.indentation}px`};};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\",{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:getStyle(header).fontWeight;},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.7 \\n[via SegmentUI](https://www.segmentUI.com)\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"Table_of_Content\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\",\"framerIntrinsicWidth\":\"600\",\"framerSupportedLayoutWidth\":\"any-prefer-fixed\",\"framerSupportedLayoutHeight\":\"any-prefer-fixed\",\"framerIntrinsicHeight\":\"400\",\"framerDisableUnlink\":\"*\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./TableOfContent.map"],"mappings":"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"}