{"version":3,"file":"TableOfContents.ZRa2SzZ3.mjs","names":["useState","groups","useMemo"],"sources":["https:/framerusercontent.com/modules/zdSP21m7UwAxPqjq0Y3X/77HY3IKSr4VpWRxchcS2/TableOfContents.js"],"sourcesContent":["// Welcome to Code in Framer\n// Get Started: https://www.framer.com/developers\nimport{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{useEffect,useState,useMemo}from\"react\";import{addPropertyControls,ControlType}from\"framer\";// Throttle function to limit scroll events.\nfunction throttle(func,delay){let lastFunc;let lastRan;return function(...args){if(!lastRan){func(...args);lastRan=Date.now();}else{clearTimeout(lastFunc);lastFunc=setTimeout(function(){if(Date.now()-lastRan>=delay){func(...args);lastRan=Date.now();}},delay-(Date.now()-lastRan));}};}// Container style for the TOC.\nconst containerStyle={height:\"100%\",padding:\"0px\",backgroundColor:\"transparent\",overflowY:\"auto\",display:\"flex\",flexDirection:\"column\",alignItems:\"flex-start\",borderLeft:\"1px solid #e6e6e7\"};// Unordered list style: remove bullet points.\nconst ulStyle={listStyle:\"none\",padding:\"0px\",margin:\"0px\"};// Base style for each list item.\nconst listItemStyle=level=>({cursor:\"pointer\",// padding: level === 1 ? \"10px 15px\" : \"6px 20px\",\n    paddingTop:level===1?\"5px\":\"5px\",paddingLeft:level===1?\"10px\":\"20px\",// borderLeft: \"1px solid #e6e6e7\",\n    margin:\"4px 0\",color:\"#5c5a5a\",backgroundColor:\"transparent\",fontSize:level===1?\"13px\":\"13px\",fontWeight:level===1?600:400,fontFamily:\"Inter, sans-serif\",transition:\"color 0.2s ease\",display:\"flex\",alignItems:\"center\"});// Hover style.\nconst listItemHoverStyle={color:\"#414040\"};// Active header style with a left-side indicator.\nconst activeItemStyle=level=>({...listItemStyle(level),fontWeight:level===1?500:500,color:\"#007bff\",borderColor:\"#414040\"});export default function TableOfContents(props){const{name,content_id}=props;// State for groups (H2 with H3 children).\nconst[groups,setGroups]=useState([]);// State for open (expanded) groups.\nconst[openGroups,setOpenGroups]=useState([]);// State for the active header id.\nconst[activeHeaderId,setActiveHeaderId]=useState(null);// Track programmatic scroll to avoid conflicts.\nconst[isProgrammaticScroll,setIsProgrammaticScroll]=useState(false);// Collect headers and group them.\nuseEffect(()=>{const collectHeaders=()=>{const contentDiv=document.getElementById(content_id);if(!contentDiv)return[];// Get H2 and H3 elements.\n//we only take h2 atm\nconst headerElements=contentDiv.querySelectorAll(\"h2\");const headers=Array.from(headerElements).map(header=>({text:header.textContent||\"\",offsetTop:header.offsetTop,level:header.tagName===\"H2\"?1:2}));// Group headers: every H2 starts a new group.\nconst groups=[];let currentGroup=null;headers.forEach(header=>{if(header.level===1){currentGroup={h2:header,h3s:[]};groups.push(currentGroup);}else if(header.level===2&&currentGroup){currentGroup.h3s.push(header);}});return groups;};setGroups(collectHeaders());},[content_id]);// Flatten groups for active header detection.\nconst flattenedHeaders=useMemo(()=>{let arr=[];groups.forEach((group,groupIndex)=>{arr.push({id:`h2-${groupIndex}`,offsetTop:group.h2.offsetTop,level:1,groupIndex});group.h3s.forEach((h3,idx)=>{arr.push({id:`h3-${groupIndex}-${idx}`,offsetTop:h3.offsetTop,level:2,groupIndex});});});return arr;},[groups]);// Listen for scroll events (window level) to update the active header.\nuseEffect(()=>{const onScroll=throttle(()=>{if(isProgrammaticScroll){setIsProgrammaticScroll(false);return;}const currentPosition=window.scrollY+window.innerHeight/2-300;const active=flattenedHeaders.find((header,index)=>{const next=flattenedHeaders[index+1];return currentPosition>=header.offsetTop&&(!next||currentPosition<next.offsetTop);});setActiveHeaderId(active?active.id:null);// Auto-expand group if an H3 is active.\nif(active&&active.level===2&&!openGroups.includes(active.groupIndex)){setOpenGroups(prev=>[...prev,active.groupIndex]);}},200);window.addEventListener(\"scroll\",onScroll);return()=>window.removeEventListener(\"scroll\",onScroll);},[flattenedHeaders,isProgrammaticScroll,openGroups]);// Smooth scrolling function.\nconst scrollToHeader=offsetTop=>{setIsProgrammaticScroll(true);window.scrollTo({top:offsetTop,behavior:\"smooth\"});};// Toggle accordion group open/close.\nconst toggleGroup=(groupIndex,offsetTop)=>{setIsProgrammaticScroll(true);setOpenGroups(prev=>prev.includes(groupIndex)?prev.filter(i=>i!==groupIndex):[...prev,groupIndex]);window.scrollTo({top:offsetTop,behavior:\"smooth\"});};return /*#__PURE__*/_jsx(\"div\",{style:containerStyle,children:/*#__PURE__*/_jsx(\"ul\",{style:ulStyle,children:groups.map((group,groupIndex)=>{const h2Id=`h2-${groupIndex}`;const isActiveH2=activeHeaderId===h2Id;const isOpen=openGroups.includes(groupIndex);return /*#__PURE__*/_jsxs(\"li\",{style:{marginBottom:\"8px\"},children:[/*#__PURE__*/_jsx(\"div\",{onClick:()=>toggleGroup(groupIndex,group.h2.offsetTop),style:isActiveH2?activeItemStyle(1):listItemStyle(1),onMouseEnter:e=>{e.currentTarget.style.color=listItemHoverStyle.color;},onMouseLeave:e=>{e.currentTarget.style.color=listItemStyle(1).color;},children:/*#__PURE__*/_jsx(\"span\",{children:group.h2.text})}),isOpen&&group.h3s.length>0&&/*#__PURE__*/_jsx(\"ul\",{style:{...ulStyle},children:group.h3s.map((h3,idx)=>{const h3Id=`h3-${groupIndex}-${idx}`;const isActiveH3=activeHeaderId===h3Id;return /*#__PURE__*/_jsx(\"li\",{onClick:()=>scrollToHeader(h3.offsetTop),style:isActiveH3?activeItemStyle(2):listItemStyle(2),onMouseEnter:e=>{e.currentTarget.style.color=listItemHoverStyle.color;},onMouseLeave:e=>{e.currentTarget.style.color=listItemStyle(2).color;},children:h3.text},idx);})})]},groupIndex);})})});}addPropertyControls(TableOfContents,{name:{title:\"Name\",type:ControlType.String,defaultValue:\"Table of Contents\"},content_id:{title:\"content_id\",type:ControlType.String,defaultValue:\"blog_article_content\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"TableOfContents\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./TableOfContents.map"],"mappings":"6MAGA,SAAS,EAAS,EAAK,EAAM,CAAC,IAAI,EAAa,EAAQ,OAAO,SAAS,GAAG,EAAK,CAAK,GAAgD,aAAa,EAAS,CAAC,EAAS,WAAW,UAAU,CAAI,KAAK,KAAK,CAAC,GAAS,IAAO,EAAK,GAAG,EAAK,CAAC,EAAQ,KAAK,KAAK,GAAI,GAAO,KAAK,KAAK,CAAC,GAAS,GAA1L,EAAK,GAAG,EAAK,CAAC,EAAQ,KAAK,KAAK,GAOD,SAAwB,EAAgB,EAAM,CAAC,GAAK,CAAC,OAAK,cAAY,EAC7L,CAAC,EAAO,GAAWA,EAAS,EAAE,CAAC,CAC/B,CAAC,EAAW,GAAeA,EAAS,EAAE,CAAC,CACvC,CAAC,EAAe,GAAmBA,EAAS,KAAK,CACjD,CAAC,EAAqB,GAAyBA,EAAS,GAAM,CACnE,MAAc,CAG2N,OAHjM,CAAC,IAAM,EAAW,SAAS,eAAe,EAAW,CAAC,GAAG,CAAC,EAAW,MAAM,EAAE,CAErH,IAAM,EAAe,EAAW,iBAAiB,KAAK,CAAO,EAAQ,MAAM,KAAK,EAAe,CAAC,IAAI,IAAS,CAAC,KAAK,EAAO,aAAa,GAAG,UAAU,EAAO,UAAU,MAAM,EAAO,UAAU,KAAK,EAAE,EAAE,EAAE,CACjMC,EAAO,EAAE,CAAK,EAAa,KAAwL,OAAnL,EAAQ,QAAQ,GAAQ,CAAI,EAAO,QAAQ,GAAG,EAAa,CAAC,GAAG,EAAO,IAAI,EAAE,CAAC,CAAC,EAAO,KAAK,EAAa,EAAU,EAAO,QAAQ,GAAG,GAAc,EAAa,IAAI,KAAK,EAAO,EAAI,CAAQA,KAAmC,CAAC,EAAG,CAAC,EAAW,CAAC,CACpR,IAAM,EAAiBC,MAAY,CAAC,IAAI,EAAI,EAAE,CAA6O,OAA5O,EAAO,SAAS,EAAM,IAAa,CAAC,EAAI,KAAK,CAAC,GAAG,MAAM,IAAa,UAAU,EAAM,GAAG,UAAU,MAAM,EAAE,aAAW,CAAC,CAAC,EAAM,IAAI,SAAS,EAAG,IAAM,CAAC,EAAI,KAAK,CAAC,GAAG,MAAM,EAAW,GAAG,IAAM,UAAU,EAAG,UAAU,MAAM,EAAE,aAAW,CAAC,EAAG,EAAG,CAAQ,GAAM,CAAC,EAAO,CAAC,CACjT,MAAc,CAAC,IAAM,EAAS,MAAa,CAAC,GAAG,EAAqB,CAAC,EAAwB,GAAM,CAAC,OAAQ,IAAM,EAAgB,EAAO,QAAQ,EAAO,YAAY,EAAE,IAAU,EAAO,EAAiB,MAAM,EAAO,IAAQ,CAAC,IAAM,EAAK,EAAiB,EAAM,GAAG,OAAO,GAAiB,EAAO,YAAY,CAAC,GAAM,EAAgB,EAAK,YAAa,CAAC,EAAkB,EAAO,EAAO,GAAG,KAAK,CAC7X,GAAQ,EAAO,QAAQ,GAAG,CAAC,EAAW,SAAS,EAAO,WAAW,EAAE,EAAc,GAAM,CAAC,GAAG,EAAK,EAAO,WAAW,CAAC,EAAI,IAAI,CAA4C,OAA3C,EAAO,iBAAiB,SAAS,EAAS,KAAW,EAAO,oBAAoB,SAAS,EAAS,EAAG,CAAC,EAAiB,EAAqB,EAAW,CAAC,CACvR,IAAM,EAAe,GAAW,CAAC,EAAwB,GAAK,CAAC,EAAO,SAAS,CAAC,IAAI,EAAU,SAAS,SAAS,CAAC,EAC3G,GAAa,EAAW,IAAY,CAAC,EAAwB,GAAK,CAAC,EAAc,GAAM,EAAK,SAAS,EAAW,CAAC,EAAK,OAAO,GAAG,IAAI,EAAW,CAAC,CAAC,GAAG,EAAK,EAAW,CAAC,CAAC,EAAO,SAAS,CAAC,IAAI,EAAU,SAAS,SAAS,CAAC,EAAG,OAAoB,EAAK,MAAM,CAAC,MAAM,EAAe,SAAsB,EAAK,KAAK,CAAC,MAAM,EAAQ,SAAS,EAAO,KAAK,EAAM,IAAa,CAA+B,IAAM,EAAW,IAApC,MAAM,IAA0D,EAAO,EAAW,SAAS,EAAW,CAAC,OAAoB,EAAM,KAAK,CAAC,MAAM,CAAC,aAAa,MAAM,CAAC,SAAS,CAAc,EAAK,MAAM,CAAC,YAAY,EAAY,EAAW,EAAM,GAAG,UAAU,CAAC,MAAM,EAAW,EAAgB,EAAE,CAAC,EAAc,EAAE,CAAC,aAAa,GAAG,CAAC,EAAE,cAAc,MAAM,MAAM,EAAmB,OAAQ,aAAa,GAAG,CAAC,EAAE,cAAc,MAAM,MAAM,EAAc,EAAE,CAAC,OAAQ,SAAsB,EAAK,OAAO,CAAC,SAAS,EAAM,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,GAAQ,EAAM,IAAI,OAAO,GAAgB,EAAK,KAAK,CAAC,MAAM,CAAC,GAAG,EAAQ,CAAC,SAAS,EAAM,IAAI,KAAK,EAAG,IAAuG,EAAK,KAAK,CAAC,YAAY,EAAe,EAAG,UAAU,CAAC,MAA9F,IAA3C,MAAM,EAAW,GAAG,IAAsI,EAAgB,EAAE,CAAC,EAAc,EAAE,CAAC,aAAa,GAAG,CAAC,EAAE,cAAc,MAAM,MAAM,EAAmB,OAAQ,aAAa,GAAG,CAAC,EAAE,cAAc,MAAM,MAAM,EAAc,EAAE,CAAC,OAAQ,SAAS,EAAG,KAAK,CAAC,EAAI,CAAG,CAAC,CAAC,CAAC,CAAC,CAAC,EAAW,EAAG,CAAC,CAAC,CAAC,CAAC,gCArB7yC,IAA8C,IAAoD,CAErJ,EAAe,CAAC,OAAO,OAAO,QAAQ,MAAM,gBAAgB,cAAc,UAAU,OAAO,QAAQ,OAAO,cAAc,SAAS,WAAW,aAAa,WAAW,oBAAoB,CACxL,EAAQ,CAAC,UAAU,OAAO,QAAQ,MAAM,OAAO,MAAM,CACrD,EAAc,IAAQ,CAAC,OAAO,UAChC,WAAqB,MAAY,YAAY,IAAQ,EAAE,OAAO,OAC9D,OAAO,QAAQ,MAAM,UAAU,gBAAgB,cAAc,SAAmB,OAAc,WAAW,IAAQ,EAAE,IAAI,IAAI,WAAW,oBAAoB,WAAW,kBAAkB,QAAQ,OAAO,WAAW,SAAS,EACxN,EAAmB,CAAC,MAAM,UAAU,CACpC,EAAgB,IAAQ,CAAC,GAAG,EAAc,EAAM,CAAC,WAAqB,IAAQ,MAAM,UAAU,YAAY,UAAU,EAa8uC,EAAoB,EAAgB,CAAC,KAAK,CAAC,MAAM,OAAO,KAAK,EAAY,OAAO,aAAa,oBAAoB,CAAC,WAAW,CAAC,MAAM,aAAa,KAAK,EAAY,OAAO,aAAa,uBAAuB,CAAC,CAAC"}