{"version":3,"file":"TableOfContentsRTL.Bi-swlhw.mjs","names":["useState","useRef","_Fragment"],"sources":["https:/framerusercontent.com/modules/KEGuAMHB5TkDO7iSc1Zs/JRupAte8MPBbSxDOUlCa/TableOfContentsRTL.js"],"sourcesContent":["import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from\"react/jsx-runtime\";import{createStore}from\"https://framer.com/m/framer/store.js@^1.0.0\";import{useEffect,useState,useRef}from\"react\";import{HEADINGS,formatTableOfContent}from\"https://framer.com/m/Utils-WIyM.js\";// Made with love by Clément: https://lionneclement.com/\n// Full tutorial: https://framermart.com/tutorial/how-to-create-table-of-contents-cms-collections-framer\n// const HEADING_TO_DISPLAY = [\"h1\", \"h2\", \"h3\", \"h4\", \"h5\", \"h6\"]\nconst HEADING_TO_DISPLAY=[\"h2\"];const SCROLL_MARGIN_TOP=92;const useStore=createStore({headings:[]});//////////////////////// desktop RTL\n///////////////\nexport function withTableOfContentRTL(Component){return props=>{const[store]=useStore();const[activeId,setActiveId]=useState(null);const[visibleElements,setVisibleElements]=useState([]);const[showAll,setShowAll]=useState(false);const lastScrollPosition=useRef(0);useEffect(()=>{const sections=store.headings.map(({heading})=>{const id=slugify(heading)// Generate slugified ID\n;return document.getElementById(id);});const handleScroll=()=>{const currentScrollPosition=window.scrollY;const isScrollingDown=currentScrollPosition>lastScrollPosition.current;const updatedVisibleElements=[...visibleElements];let hasChanges=false;sections.forEach(section=>{if(!section)return;const{top,bottom}=section.getBoundingClientRect();if(top>=0&&bottom<=window.innerHeight){const index=updatedVisibleElements.findIndex(el=>el.id===section.id);// Add to list if not already present\nif(index===-1){if(isScrollingDown){// Add to bottom of list\nupdatedVisibleElements.push({id:section.id,top});}else{// Add to top of list\nupdatedVisibleElements.unshift({id:section.id,top});}hasChanges=true;}}else{// Remove from list if it's no longer visible\nconst index=updatedVisibleElements.findIndex(el=>el.id===section.id);if(index>-1){updatedVisibleElements.splice(index,1);hasChanges=true;}}});if(hasChanges){setVisibleElements(updatedVisibleElements);// Always highlight the top item\nif(updatedVisibleElements.length>0){setActiveId(updatedVisibleElements[0].id);}}lastScrollPosition.current=currentScrollPosition;};window.addEventListener(\"scroll\",handleScroll);// Initial state handling\nhandleScroll();return()=>{window.removeEventListener(\"scroll\",handleScroll);};},[store.headings,visibleElements]);const sortedHeadings=store.headings.map(({heading,type,originalIndex})=>({id:slugify(heading),heading,type,originalIndex})).sort((a,b)=>a.originalIndex-b.originalIndex).filter(({type})=>HEADING_TO_DISPLAY.includes(type));const displayedHeadings=showAll?sortedHeadings:sortedHeadings.slice(0,10);return /*#__PURE__*/_jsxs(_Fragment,{children:[store.headings.length>0&&typeof window!==\"undefined\"?/*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx(\"div\",{className:\"table-of-contents\",children:displayedHeadings.map(({id,heading,type})=>/*#__PURE__*/_jsx(\"a\",{href:`${window.location.pathname}#${id}`,className:id===activeId?\"active-link\":\"no-link\",children:heading}))}),sortedHeadings.length>10&&/*#__PURE__*/_jsx(\"button\",{onClick:()=>setShowAll(!showAll),className:\"view-more-btn\",children:showAll?\"View Less\":\"View More\"})]}):/*#__PURE__*/_jsx(_Fragment,{children:/*#__PURE__*/_jsx(Component,{...props})}),/*#__PURE__*/_jsx(\"style\",{children:`\n\n            \n                    .active-link {\n                        font-weight: bold;\n                        color: rgb(0, 46, 93);\n                    }\n\n                    .no-link {\n                        color: rgb(82, 82, 91);\n                        font-weight: normal;\n                    }\n\n                    .active-link, .no-link {\n                        font-size:15px;\n                        margin-top:4px;\n                        margin-bottom:5px;\n                        text-decoration:none;\n                        transition: color 0.3s ease, font-weight 0.3s ease;\n                        font-family: \"Avenir Book\", \"Avenir Book Placeholder\", sans-serif;\n                        font-weight: 500;\n                         }\n                        .view-more-btn {\n                        background: none;\n                        border: none;\n                        color: rgb(0, 46, 93);\n                        font-weight: bold;\n                        cursor: pointer;\n                        margin-top: 10px;\n                        font-size: 16px;\n                        padding-left:0;\n                        marging-left:0;\n                        font-family: \"Avenir Book\", \"Avenir Book Placeholder\", sans-serif;\n                        font-weight: 500;\n                    }\n\n                    .table-of-contents {\n                        list-style: none;\n                        padding: 0;\n                        margin: 0;\n                        display: flex;\n                        flex-direction: column;\n                        text-align: end;\n                    }\n\n                    .toc-item {\n                        margin-bottom: 8px; /* Adjust spacing */\n                    }\n\n                    .toc-item a {\n                        text-decoration: none;\n                        color: black;\n                        font-size: 14px;\n                    }\n\n                    .active-link {\n                        font-weight: bold;\n                        color: rgb(0, 46, 93);\n                        }\n\n                        #tocparent{\n                        width:fit-content\n                    }\n\n                `})]});};}///////////////Mobile table of contents\nexport function withTableOfContentMobile(Component){return props=>{const[store]=useStore();const[activeId,setActiveId]=useState(null);const[visibleElements,setVisibleElements]=useState([]);const[showAll,setShowAll]=useState(false);const lastScrollPosition=useRef(0);useEffect(()=>{const sections=store.headings.map(({id})=>document.getElementById(id));const handleScroll=()=>{const currentScrollPosition=window.scrollY;const isScrollingDown=currentScrollPosition>lastScrollPosition.current;const updatedVisibleElements=[...visibleElements];let hasChanges=false;sections.forEach(section=>{if(!section)return;const{top,bottom}=section.getBoundingClientRect();if(top>=0&&bottom<=window.innerHeight){const index=updatedVisibleElements.findIndex(el=>el.id===section.id);// Add to list if not already present\nif(index===-1){if(isScrollingDown){// Add to bottom of list\nupdatedVisibleElements.push({id:section.id,top});}else{// Add to top of list\nupdatedVisibleElements.unshift({id:section.id,top});}hasChanges=true;}}else{// Remove from list if it's no longer visible\nconst index=updatedVisibleElements.findIndex(el=>el.id===section.id);if(index>-1){updatedVisibleElements.splice(index,1);hasChanges=true;}}});if(hasChanges){setVisibleElements(updatedVisibleElements);// Always highlight the top item\nif(updatedVisibleElements.length>0){setActiveId(updatedVisibleElements[0].id);}}lastScrollPosition.current=currentScrollPosition;};window.addEventListener(\"scroll\",handleScroll);// Initial state handling\nhandleScroll();return()=>{window.removeEventListener(\"scroll\",handleScroll);};},[store.headings,visibleElements]);const sortedHeadings=store.headings.sort((a,b)=>a.originalIndex-b.originalIndex).filter(({type})=>HEADING_TO_DISPLAY.includes(type));const displayedHeadings=showAll?sortedHeadings:sortedHeadings;return /*#__PURE__*/_jsxs(_Fragment,{children:[store.headings.length>0&&typeof window!==\"undefined\"?/*#__PURE__*/_jsx(_Fragment,{children:/*#__PURE__*/_jsxs(\"select\",{className:\"toc-dropdown\",onChange:e=>{if(e.target.value){window.location.href=e.target.value;}},children:[/*#__PURE__*/_jsx(\"option\",{value:\"\",disabled:true,selected:true,children:\"انتقل إلى القسم\"}),displayedHeadings.map(({id,heading})=>/*#__PURE__*/_jsx(\"option\",{value:`${window.location.pathname}#${id}`,children:heading},id))]})}):/*#__PURE__*/_jsx(_Fragment,{children:/*#__PURE__*/_jsx(Component,{...props})}),/*#__PURE__*/_jsx(\"style\",{children:`\n\n//                select{\n//                 border-top:none;\n//                 border-left:none;\n//                 border-right:none;\n//                 font-size:14px;\n//                 border-bottom: 1px solid rgb(0 46 93); \n//                 color:rgb(0 46 93);\n//                 background-color:#fff;\n//                 width: 100%;\n//                 padding: 10px 10px 10px 0;\n//                }\n\n//                option{\n//                   font-size:13px;\n//                }\n\n//                .toc-dropdown-wrapper {\n//     width: 100%;\n//     position: relative;\n// }\n\n                        .toc-dropdown {\n                        width: 100%;\n                        border-top: none;\n                        border-left: none;\n                        border-right: none;\n                        font-size: 15px;\n                        border-bottom: 1px solid rgb(0 46 93);\n                        color: rgb(0 46 93);\n                        background-color: #fff;\n                        padding: 10px 10px 10px 0;\n                        border-radius:0 0 !important;\n                        -webkit-border-radius: 0 !important;\n                        // appearance: none;  /* Removes default iOS dropdown styling */\n                        // -webkit-appearance: none;\n                        // -moz-appearance: none;\n                        display: block;\n                        direction:rtl;\n                        font-family: \"Avenir Book\", \"Avenir Book Placeholder\", sans-serif;\n                        font-weight: 500;\n                    }\n\n                        /* Add a down arrow to the dropdown */\n                        .toc-dropdown-wrapper::after {\n                            content: \"▼\";  /* Unicode down arrow */\n                            font-size: 12px;\n                            color: rgb(0 46 93);\n                            position: absolute;\n                            right: 10px;\n                            top: 50%;\n                            transform: translateY(-50%);\n                            pointer-events: none;\n                        }\n\n                        /* Fix for iPhone option text */\n                        option {\n                            font-size: 15px;\n                            background-color: white;\n                            color: rgb(0 46 93);\n                            font-family: \"Avenir Book\", \"Avenir Book Placeholder\", sans-serif;\n                            font-weight: 500;\n                        }\n                                            .active-link {\n                                                font-weight: bold;\n                                                color: rgb(0, 46, 93);\n                                            }\n\n                                            .no-link {\n                                                color: rgb(82, 82, 91);\n                                                font-weight: normal;\n                                            }\n\n                                            .active-link, .no-link {\n                                                font-size:14px;\n                                                margin-top:4px;\n                                                margin-bottom:5px;\n                                                text-decoration:none;\n                                                transition: color 0.3s ease, font-weight 0.3s ease;\n                                                }\n                                                .view-more-btn {\n                                                background: none;\n                                                border: none;\n                                                color: rgb(0, 46, 93);\n                                                font-weight: bold;\n                                                cursor: pointer;\n                                                margin-top: 10px;\n                                                font-size: 16px;\n                                                padding-left:0;\n                                                marging-left:0\n                                            }\n\n                        .table-of-contents {\n                            list-style: none;\n                            padding: 0;\n                            margin: 0;\n                                display: flex\n                        ;\n                            flex-direction: column;\n                        }\n\n                        .toc-item {\n                            margin-bottom: 8px; /* Adjust spacing */\n                        }\n\n                        .toc-item a {\n                            text-decoration: none;\n                            color: black;\n                            font-size: 14px;\n                        }\n\n                        .active-link {\n                            font-weight: bold;\n                            color: rgb(0, 46, 93);\n                        }\n\n                        #tocparent{\n                            width:fit-content\n                        }\n\n                `})]});};}// /////catch content use in Content RTL\nexport function withContentRTL(Component){return props=>{const[store,setStore]=useStore();const[newProps,setNewProps]=useState(props);useEffect(()=>{setStore({headings:formatTableOfContent(newProps.children.props.children).map(heading=>({...heading,id:slugify(heading.heading)}))});},[newProps]);useEffect(()=>{setNewProps(customFormatHeadings(props))// Apply custom formatting with slugify\n;},[props]);const rtlStyle={direction:\"rtl\",textAlign:\"right\",justifyItems:\"end\"};return /*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx(\"style\",{children:`.framer-text {\n                    scroll-margin-top: ${SCROLL_MARGIN_TOP}px;\n                }\n\n                ul.framer-text > li.framer-text::before,\n                ol.framer-text > li.framer-text::before {\n                    right: 0px;\n                }\n\n                ul.framer-text,\n                ol.framer-text {\n                    padding-right: 3ch;\n                }`}),/*#__PURE__*/_jsx(Component,{...newProps,style:rtlStyle})]});};}const customFormatHeadings=props=>{if(!props.children||!props.children.props||!props.children.props.children){return props// Return unchanged props if structure is not as expected\n;}const newChildren=props.children.props.children.map((item,index)=>{if(HEADINGS.includes(item.type)){const headingText=item.props.children||`heading-${index}`;const formattedId=slugify(headingText);return{...item,props:{...item.props,id:formattedId}};}return item;});return{...props,children:{...props.children,props:{...props.children.props,children:newChildren}}};};function slugify(text){return text.toString().toLowerCase().replace(/\\s+/g,\"-\").replace(/[^\\w\\u0621-\\u064A0-9-]+/g,\"\").replace(/\\-\\-+/g,\"-\").replace(/^-+/,\"\").replace(/-+$/,\"\");}\nexport const __FramerMetadata__ = {\"exports\":{\"withTableOfContentMobile\":{\"type\":\"reactHoc\",\"name\":\"withTableOfContentMobile\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"withContentRTL\":{\"type\":\"reactHoc\",\"name\":\"withContentRTL\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"withTableOfContentRTL\":{\"type\":\"reactHoc\",\"name\":\"withTableOfContentRTL\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./TableOfContentsRTL.map"],"mappings":"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"}