/* --------- START Custom Schools Dropdown -------------- */ const fetchPage = async (pageName) => { const pageSlug = 'sports-dropdown-menu'; const secondaryOrgId = '13424'; const { translation } = window.clientWorkState || {}; if (!secondaryOrgId || !translation) return; try { const res = await fetch( `https://thrillshare-cmsv2.services.thrillshare.com/api/v4/o/${secondaryOrgId}/cms/pages/${pageSlug}?locale=${translation?.locale || 'en'}` ); const data = await res.json(); console.log('Fetched data content:', data.content); // Handle both old and new page builder structures let targetLayout; // Check if using new page builder with root section const rootSection = data.content.find(section => section.id === "root"); if (rootSection) { // New page builder structure targetLayout = rootSection.config.flatMap(configArray => configArray.find(section => section.name === '3 Columns') ).find(Boolean); } else { // Old page builder structure - find 3 Columns directly in content targetLayout = data.content.find(section => section.name === '3 Columns'); } if (!targetLayout) throw new Error('3 Column section not found'); console.log('Found target layout:', targetLayout); const links = targetLayout.config.flatMap(column => column.flatMap(block => block.config && block.config.content ? block.config.content.match(/]*href="([^"]*)"[^>]*>([^<]*)<\/a>/g) || [] : [] ) ); return { pageData: { name: pageName, children: links }, content: data.content, targetLayout: targetLayout }; } catch (err) { console.error('Error Fetching Department Header', err); return null; } }; const buildAndAttachPageData = ({ pageData, content, targetLayout }) => { const desktopButton = document.querySelector('.right-menu-items #languagebutton'); const mobileContainer = document.querySelector('.right-mobile .language-icon'); const desktopDiv = desktopButton.parentElement; const mobileDiv = mobileContainer; const bodyStyles = getComputedStyle(document.body); const primaryColor = bodyStyles.getPropertyValue('--primary-color') || '#000'; const primaryContrast = bodyStyles.getPropertyValue('--primary-color-contrast') || '#fff'; // Create columns content with headlines and images const columnsContent = targetLayout.config.map((column, index) => { let columnHTML = ''; return columnHTML; }).join(''); const customHeaderMenu = document.createElement('div'); customHeaderMenu.className = 'custom-header-menu'; customHeaderMenu.innerHTML = ` `; desktopDiv.insertAdjacentHTML('beforebegin', customHeaderMenu.outerHTML); mobileDiv.insertAdjacentHTML('afterend', customHeaderMenu.outerHTML); addDropDownEventListeners(); }; const addDropDownEventListeners = () => { function toggleCustomMenu(e) { e.stopPropagation(); const btn = this; let menu = btn.nextSibling; while (menu && menu.nodeType != 1) { menu = menu.nextSibling; } if (!menu) return; if (menu.style.display !== 'block') { btn.querySelector('.arrow').classList.remove('close'); btn.querySelector('.arrow').classList.add('open'); menu.style.display = 'block'; if (toClose) toClose.style.display = 'none'; toClose = menu; } else { btn.querySelector('.arrow').classList.remove('open'); btn.querySelector('.arrow').classList.add('close'); menu.style.display = 'none'; toClose = false; } } const closeCustomMenu = () => { toClose.style.display = 'none'; }; document.querySelectorAll('.custom-header-button').forEach((btn) => { btn.addEventListener('click', toggleCustomMenu, true); }); window.onclick = (event) => { if (toClose) { closeCustomMenu.call(event.target); toClose = false; const arrows = document.querySelectorAll('.custom-header-menu .arrow'); arrows.forEach((a) => { if (!a.classList.contains('open')) return; a.classList.remove('open'); a.classList.add('close'); }); } }; }; let toClose = false; document.addEventListener('appLoaded', async (_e) => { const headerData = await fetchPage('Sports Dropdown Menu (Header)'); if (headerData) buildAndAttachPageData(headerData); }); /* --------- END Custom Schools Dropdown -------------- */