document.addEventListener("appLoaded", function () { const socialMedia = document.querySelector( "#footer-f2 .footer-wrapper .contact-data .social-media" ); const downloadLinks = document.querySelector( "#footer-f2 .footer-wrapper .download-links" ); if (socialMedia && downloadLinks) { downloadLinks.appendChild(socialMedia); } }); /* ----------- START Custom dropdowns ----------- */ document.addEventListener('appLoaded', () => { const menusToBeAdded = [ { menuLevel1: { menuLevel1Url: 'javascript:void(0);', menuLevel1Name: 'Quick Links', menuLevel1SubItems: { // menuLevel2__a: { // menuLevel2Url: 'https://5il.co/2roqr', // menuLevel2Name: '2024-25 Calendar Overview', // }, menuLevel2__b: { menuLevel2Url: '/o/masd/page/registration', menuLevel2Name: 'Registration', }, menuLevel2__c: { menuLevel2Url: '/o/masd/page/employment-opportunities', menuLevel2Name: 'Employment Opportunities', }, menuLevel2__d: { menuLevel2Url: '/o/masd/page/required-information-for-application-process', menuLevel2Name: 'Clearances', }, menuLevel2__e: { menuLevel2Url: '/staff', menuLevel2Name: 'Staff Directory', }, menuLevel2__f: { menuLevel2Url: '/documents/covid-19/continuity-of-education-plans/660505', menuLevel2Name: 'Continuity of Education Plans', }, menuLevel2__g: { menuLevel2Url: 'https://5il.co/2roqz', menuLevel2Name: 'Pathways to Graduation', }, menuLevel2__h: { menuLevel2Url: 'https://docs.google.com/forms/d/e/1FAIpQLSfCUSjclodg4iqdRVISm1KTMQaP-SDMwx1rtA7y3Qt5vnCbRw/viewform', menuLevel2Name: 'Pre-K Needs Assessment', }, menuLevel2__i: { menuLevel2Url: 'https://montgomeryredraiders.com/', menuLevel2Name: 'Schedule Star', }, menuLevel2__j: { menuLevel2Url: 'https://5il.co/2ror7', menuLevel2Name: 'Suicide Awareness', }, menuLevel2__k: { menuLevel2Url: '/o/masd/page/immunization-requirements-for-all-students', menuLevel2Name: 'UPDATED Immunization Requirements', }, menuLevel2__l: { menuLevel2Url: '/o/masd/page/homeless-info', menuLevel2Name: 'Homeless Information', }, menuLevel2__m: { menuLevel2Url: '/o/masd/page/wellness-information', menuLevel2Name: 'Wellness Information', }, menuLevel2__n: { menuLevel2Url: '/o/masd/page/accessibility', menuLevel2Name: 'Accessibility', }, }, }, }, ]; function addMenusToContainer() { const viewportWidth = window.innerWidth; const newMenuContainer = viewportWidth <= 1279 ? document.querySelector('#view-header #cms-header .utility-bar') : document.querySelector('#view-header #cms-header .right-menu-items'); const positionInContainer = viewportWidth <= 1279 ? 'beforebegin' : 'afterbegin'; if (newMenuContainer) { // Create the single wrapper for all menus const customMenusWrapper = document.createElement('div'); customMenusWrapper.classList.add('customMenusWrapper'); // Add a class for styling menusToBeAdded.forEach((menuConfig, index) => { const customMenuElement = document.createElement('div'); customMenuElement.classList.add('customMenuElement'); customMenuElement.id = `customMenuElement-${index}`; // Create the menu list and append it to the customMenuElement createMenuList(menuConfig, customMenuElement); // Append the customMenuElement to the customMenusWrapper customMenusWrapper.appendChild(customMenuElement); document.addEventListener('click', function (event) { const isClickInsideElement = customMenuElement.contains(event.target); if (!isClickInsideElement) { customMenuElement.classList.remove('activeMenu'); } }); }); // Insert the customMenusWrapper into the container newMenuContainer.insertAdjacentElement( positionInContainer, customMenusWrapper ); } } function createMenuList(menuObject, parentElement) { const ulElement = document.createElement('ul'); for (const key in menuObject) { if (menuObject.hasOwnProperty(key)) { const itemData = menuObject[key]; const level1Url = itemData.menuLevel1Url; const level1Name = itemData.menuLevel1Name; const level2Items = itemData.menuLevel1SubItems; if (level1Name) { const menuLevel1 = document.createElement('a'); menuLevel1.classList.add('menuLevel1'); menuLevel1.href = level1Url; menuLevel1.innerText = level1Name; parentElement.appendChild(menuLevel1); menuLevel1.addEventListener('click', function (e) { e.preventDefault(); // Prevent default link behavior parentElement.classList.toggle('activeMenu'); }); } if (level2Items) { parentElement.classList.add('hasSubmenu', 'js-hasSubmenu'); for (const sKey in level2Items) { const subItemData = level2Items[sKey]; const liElement = document.createElement('li'); const aElement = document.createElement('a'); const textNode = document.createTextNode( subItemData.menuLevel2Name ); aElement.href = subItemData.menuLevel2Url; aElement.appendChild(textNode); liElement.appendChild(aElement); ulElement.appendChild(liElement); } } } } parentElement.appendChild(ulElement); } addMenusToContainer(); window.addEventListener('resize', function () { const existingMenusWrapper = document.querySelector('.customMenusWrapper'); if (existingMenusWrapper) { existingMenusWrapper.remove(); } addMenusToContainer(); }); }); /* ----------- END Custom dropdowns ----------- */ const fetchQuickLinksHeader = async (headerName) => { const pageSlug = 'quicklinks'; const secondaryOrgId = '23782'; 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); const oneColumnSection = data.content.find(section => section.name === 'One Column'); if (!oneColumnSection) throw new Error('One Column section not found'); const links = oneColumnSection.config.flatMap(blocks => blocks.flatMap(block => block.config.content.match(/]*href="([^"]*)"[^>]*>([^<]*)<\/a>/g)) ); return { quickLinksHeader: { name: headerName, children: links }, content: data.content }; } catch (err) { console.error('Error Fetching Department Header', err); return null; } }; const buildAndAttachQuickLinksHeader = ({ quickLinksHeader, content }) => { const desktopButton = document.querySelector('.right-menu-items #schoolsbutton'); // const mobileContainer = document.querySelector('.m4--drawer-element.mobile-element.new-mobile-header:has(#schools-header)'); 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'; const customHeaderMenu = document.createElement('div'); customHeaderMenu.className = 'custom-header-menu'; customHeaderMenu.innerHTML = ` `; desktopDiv.insertAdjacentHTML('beforebegin', customHeaderMenu.outerHTML); // mobileDiv.insertAdjacentHTML('beforebegin', customHeaderMenu.outerHTML); addDropDownEventListeners(); }; // Example usage appendClassToElements("utilities", "custom-header-menu"); appendClassToElements("utilities-top", "custom-header-menu"); 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 fetchQuickLinksHeader('Quick Links'); if (headerData) buildAndAttachQuickLinksHeader(headerData); });

Montgomery Area School District