`; body.insertBefore(customDiv, body.firstChild); // Focus on the first link in the side navigation const focusFirstLink = () => { const visibleLinks = Array.from( divElem.querySelectorAll( '#sidebarNav h2 a[href], #sidebarNav .navLinks li a[href], #sidebarNav .navLinks li .submenuBtn' ) ).filter((el) => { return el.offsetParent !== null; }); if (visibleLinks.length > 0) { visibleLinks[0].focus(); } }; // Add event listener to the button const focusSideNavBtn = customDiv.querySelector('.sidenav__item'); focusSideNavBtn.addEventListener('click', focusFirstLink); // Add keyboard shortcut (Alt+S or Option+S) document.addEventListener('keydown', (event) => { const isMac = navigator.platform.toUpperCase().indexOf('MAC') >= 0; const key = event.key; if ( (isMac && (key === 'ÃƒÅ¸' || key === 'ÃƒÂ')) || (!isMac && event.altKey && key.toLowerCase() === 's') ) { event.preventDefault(); focusFirstLink(); } }); } } catch (error) { console.error('Error fetching data:', error); } } // Add data-url on breadcrumb to refresh the page const breadcrumb = document.querySelector('.breadcrumb'); if (breadcrumb !== null) { const links = Array.from(breadcrumb.querySelectorAll('li a')); links.forEach((link, index) => { const href = link.getAttribute('href'); if (!link.dataset.url) { link.dataset.url = href; } if (!link.style.cursor) { link.style.cursor = 'pointer'; } link.addEventListener('click', (e) => { e.preventDefault(); const redirectUrl = e.currentTarget.dataset.url; if (redirectUrl) { history.pushState(null, '', redirectUrl); window.location.reload(); } }); }); } // End add data-url on breadcrumb }); /* ----------- END Side nav below Passaic's green boxes ----------- */ /* ----------- START insertCustomDropdown on Header ----------- */ UtilityHelpers.insertCustomDropdown = function (configOverrides = {}) { const defaultConfig = { label: this.translateWord ? this.translateWord("Menu") : "Menu", id: "custom-dropdown", items: [], desktopSelector: null, mobileSelector: null, insertPositionDesktop: "afterbegin", insertPositionMobile: "beforeend", onInsert: null, }; const config = { ...defaultConfig, ...configOverrides }; // Detect header version const headerVersion = this.getHeaderVersion ? this.getHeaderVersion() : null; if (!headerVersion) { console.warn("Header version not detected."); return; } // Map selectors switch (headerVersion) { case "h1": config.desktopSelector ||= "#cms-header #h1 .right-left-menu"; break; case "h2": config.desktopSelector ||= "#cms-header #h2 .right-menu-items"; config.mobileSelector ||= "#cms-header #h2 .right-mobile .right-right-menu"; break; case "h3": config.desktopSelector ||= "#cms-header #h3 .utilities-bar"; config.mobileSelector ||= "#cms-header #h3 .mobile-header .right-icon"; config.insertPositionMobile = "afterbegin"; break; case "h4": config.desktopSelector ||= "#cms-header .h4 .top-header .menu"; break; case "h5": config.desktopSelector ||= "#cms-header .h5 .right-right-menu"; config.mobileSelector ||= "#cms-header .h5 .mobile-header .main-content"; break; case "h6": config.desktopSelector ||= "#cms-header .h6 .header-container .right"; config.mobileSelector ||= "#cms-header .h6 .mobile-header-top .org-banner-wrapper"; break; case "h7": config.desktopSelector ||= "#cms-header .h7 .header-container .header-container-right"; config.mobileSelector ||= "#cms-header .h7 .mobile-header .top-bar"; break; case "h8": config.desktopSelector ||= "#cms-header .h8 .header-container .header-container-right"; config.mobileSelector ||= "#cms-header .h8 .mobile-header .top-bar"; break; default: console.warn("Unknown header version:", headerVersion); return; } if (!config.desktopSelector && !config.mobileSelector) { console.warn(`No valid selectors found for ${headerVersion}`); return; } const desktopId = config.id + "-desktop"; const mobileId = config.id + "-mobile"; const createDropdown = (id) => { const wrapper = document.createElement("div"); wrapper.id = id; wrapper.classList.add("customMenuElement", "hasSubmenu"); // Main link (menu level 1) const mainLink = document.createElement("a"); mainLink.href = "#"; mainLink.classList.add("menuLevel1"); mainLink.textContent = config.label; wrapper.appendChild(mainLink); // Submenu UL const menu = document.createElement("ul"); config.items.forEach(item => { const li = document.createElement("li"); const a = document.createElement("a"); a.href = item.url; a.textContent = item.label; li.appendChild(a); menu.appendChild(li); }); wrapper.appendChild(menu); // Toggle submenu mainLink.addEventListener("click", (e) => { e.preventDefault(); // Close other dropdowns document.querySelectorAll(".customMenuElement.activeMenu").forEach(el => { if (el !== wrapper) el.classList.remove("activeMenu"); }); wrapper.classList.toggle("activeMenu"); }); // Close on outside click document.addEventListener("click", (e) => { if (!wrapper.contains(e.target)) { wrapper.classList.remove("activeMenu"); } }); return wrapper; }; const insertDropdown = () => { const desktopExists = document.getElementById(desktopId); const mobileExists = document.getElementById(mobileId); const desktopTarget = document.querySelector(config.desktopSelector); const mobileTarget = document.querySelector(config.mobileSelector); if (desktopTarget && !desktopExists) { desktopTarget.insertAdjacentElement(config.insertPositionDesktop, createDropdown(desktopId)); } if (mobileTarget && !mobileExists) { mobileTarget.insertAdjacentElement(config.insertPositionMobile, createDropdown(mobileId)); } if (typeof config.onInsert === "function") { config.onInsert(); } }; insertDropdown(); // Reinjection on resize if (!window.__headerDropdownResizeHandlerAttached) { const throttledResize = this.throttle ? this.throttle(() => { setTimeout(() => insertDropdown(), 400); }, 300) : () => {}; window.addEventListener("resize", throttledResize); window.__headerDropdownResizeHandlerAttached = true; } }; document.addEventListener('appLoaded', function () { UtilityHelpers.insertCustomDropdown({ id: 'stem-dropdown', label: 'STEM', items: [ { label: 'Principal’s Message', url: 'https://stem.pctvs.org/page/principals-message' }, { label: 'CTE Program of Study', url: 'https://www.pctvs.org/o/pctvs/page/programs-of-study' }, { label: 'Professional Development', url: 'https://5il.co/2tb9o' }, { label: 'School Profile', url: 'https://5il.co/2tb6v' }, ], }); UtilityHelpers.insertCustomDropdown({ id: 'pcti-dropdown', label: 'PCTI', items: [ { label: 'Principal’s Message', url: 'https://www.pctvs.org/o/pcti/page/principals-message' }, { label: 'CTE Program of Study', url: 'https://www.pctvs.org/o/pctvs/page/programs-of-study' }, { label: 'Professional Development', url: 'https://5il.co/2tb5o' }, { label: 'School Profile', url: 'https://5il.co/2xxck' }, ], }); UtilityHelpers.insertCustomDropdown({ id: 'admissions-dropdown', label: 'Admissions', items: [ { label: 'Discover PCTVS', url: 'https://www.pctvs.org/page/discover-pctvs' }, { label: 'Admission Handbook', url: 'https://5il.co/2yvbg' }, { label: 'Apply!', url: 'https://www.pctvs.org/page/apply' }, { label: 'FAQ (English/Español)', url: 'https://www.pctvs.org/page/faq-englishespaol' }, { label: 'Newly Admitted Students', url: 'https://www.pctvs.org/page/newly-admitted-students' }, { label: 'Visit Us', url: 'https://www.pctvs.org/page/visit-us' }, { label: 'Licensed Practical Nurse (LPN)', url: 'https://www.pctvs.org/page/licensed-practical-nurse-lpn' }, ], }); }); /* ----------- END insertCustomDropdown on Header ----------- */ window.addEventListener("appLoaded", () => { const ITEM_SEL = ".m4--menu-item"; const BTN_SEL = `${ITEM_SEL} > button[aria-controls]`; const initMenuFix = () => { const items = document.querySelectorAll(ITEM_SEL); const buttons = document.querySelectorAll(BTN_SEL); // 1) Stop any theme hover handlers from firing ["mouseenter", "mouseover"].forEach(evt => { items.forEach(item => { item.addEventListener(evt, (e) => { e.stopImmediatePropagation(); }, true); }); }); // 2) Click-only toggle const closeAll = () => { buttons.forEach(b => b.setAttribute("aria-expanded", "false")); }; buttons.forEach(btn => { btn.addEventListener("click", (e) => { e.preventDefault(); e.stopPropagation(); const isOpen = btn.getAttribute("aria-expanded") === "true"; closeAll(); btn.setAttribute("aria-expanded", String(!isOpen)); }); }); // 3) Close when clicking outside document.addEventListener("click", (e) => { if (!e.target.closest(ITEM_SEL)) closeAll(); }); }; // Run immediately initMenuFix(); // Observe DOM changes to re-apply after menu rebuild const observer = new MutationObserver(() => { initMenuFix(); }); observer.observe(document.body, { childList: true, subtree: true }); // Also re-run on window resize window.addEventListener("resize", () => { initMenuFix(); }); });

Parents

Parent Resources