UNPKG

@massds/mayflower-assets

Version:

Mayflower Assets

874 lines (744 loc) 34.1 kB
"use strict"; (function () { window.__forceSmoothScrollPolyfill__ = true; var script = document.createElement('script'); script.src = "https://unpkg.com/smoothscroll-polyfill@0.4.4/dist/smoothscroll.js"; script.crossOrigin = true; var element = document.getElementsByTagName('head')[0]; element.appendChild(script); })(); function googleTranslateElementInit() { new google.translate.TranslateElement({ pageLanguage: 'en', includedLanguages: '', layout: google.translate.TranslateElement.InlineLayout.SIMPLE }, 'google_translate_element'); document.querySelector('#google_translate_element') !== null ? document.querySelector('#google_translate_element').classList.add('has-rendered') : ''; } (function () { var script = document.createElement('script'); script.src = "//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"; script.async = true; var element = document.getElementsByTagName('head')[0]; element.appendChild(script); })(); "use strict"; var osInfo = navigator.appVersion; var body = document.querySelector("body"); var width = body.clientWidth; var alertlOffsetPosition; var feedbackButton = document.querySelector(".ma__fixed-feedback-button"); var menuOverlay = document.querySelector(".menu-overlay"); var alertOverlay = document.querySelector(".alert-overlay"); var menuButton = document.querySelector(".js-header-menu-button"); var jumpToSearchButton = document.querySelector(".js-header-search-access-button"); var searchInput = document.querySelector(".ma__header__hamburger__nav-container .ma__header-search__input"); var hamburgerMenuContainer = document.querySelector(".ma__header__hamburger__nav-container"); var menuItems = document.querySelectorAll(".js-main-nav-hamburger-toggle"); var utilNavWide = document.querySelector(".js-utility-nav--wide"); var utilNarrowNav = document.querySelector(".ma__header__hamburger__utility-nav--narrow"); var utilNarrowButton = document.querySelector(".ma__header__hamburger__utility-nav--narrow button.js-util-nav-toggle"); var utilNarrowContent = utilNarrowButton ? utilNarrowButton.nextElementSibling : null; var utilNarrowContainer = utilNarrowContent ? utilNarrowContent.querySelector(".ma__utility-nav__container") : null; // Check whether the narrow utility nav is open. var utilNavNarrowCheck = function utilNavNarrowCheck() { return utilNarrowNav ? utilNarrowNav.offsetWidth > 0 && utilNarrowNav.offsetHeight > 0 : false; }; // Open and close the menu if (menuButton !== null) { menuButton.addEventListener("click", function (event) { event.preventDefault(); // For Safari, this ensures to move focus to the menu content. if (osInfo.indexOf("Safari") !== -1) { menuButton.focus(); } toggleMenu(); }); menuButton.addEventListener("keydown", function (e) { if (e.key === "Tab" || e.code === "Tab") { if (width < 621) { e.preventDefault(); var _hamburgerMenuContainer = document.querySelector(".ma__header__hamburger__nav-container"); var focusable = _hamburgerMenuContainer.querySelectorAll("button, [href], input, [tabindex]:not([tabindex='-1'])"); focusable[0].focus(); } } }); var logoLink = document.querySelector(".ma__header__hamburger__nav-container .ma__header__hamburger__logo--mobile a"); if (logoLink) { logoLink.addEventListener("keydown", function (e) { if (e.shiftKey && e.key === "Tab" || e.shiftKey && e.code === "Tab") { setTimeout(function timeoutFunction() { document.querySelector(".js-header-menu-button").focus(); }, 100); } }); } var firstTopMenuItem = document.querySelector(".ma__header__hamburger__nav .ma__main__hamburger-nav__item:first-of-type .js-main-nav-hamburger__top-link"); // To accomodate both button and link as the last top menu item, use 'ma__' classes instead of 'js-'. var lastTopMenuItem = document.querySelector(".ma__main__hamburger-nav__item:last-of-type .ma__main__hamburger-nav__top-link"); var lastSubmenuLink = document.querySelector(".js-main-nav-hamburger-toggle:last-of-type .js-main-nav-hamburger-content .js-main-nav-hamburger__subitem:last-of-type .js-main-nav-hamburger__link"); var lastUtilMenuItem = document.querySelector(".js-utility-nav--narrow .ma__utility-nav__item:last-of-type .ma__utility-nav__link"); var lastUtilMenuContentLink = document.querySelector(".js-utility-nav--narrow .ma__utility-nav__item:last-of-type .ma__utility-panel:last-of-type .js-clickable:last-of-type .js-clickable-link"); // no utility nav, sub menu closed if (lastTopMenuItem) { lastTopMenuItem.addEventListener("keydown", function (e) { // Without this, sift + tab set focus on the first top menu button. if (e.shiftKey && e.key === "Tab" || e.shiftKey && e.code === "Tab") { if (width < 841) { setTimeout(function timeOutFunction() { this.closest(".js-main-nav-hamburger-toggle").previousElementSibling.querySelector(".ma__main__hamburger-nav__top-link").focus(); }, 1); } } else if (e.key === "Tab" || e.code === "Tab") { if (width > 840) { if (!this.hasAttribute("aria-expanded")) { // For link setFocusOnFirstTopMenu(); } else { // For buttons if (this.getAttribute("aria-expanded") === "false") { setFocusOnFirstTopMenu(); } } } } }); // no utility nav, last sub menu open if (lastTopMenuItem === document.querySelector(".ma__main__hamburger-nav__item:last-of-type button")) { lastSubmenuLink.addEventListener("keydown", function (e) { var subMenuContainer = this.closest(".js-main-nav-hamburger-content"); if ((e.key === "Tab" || e.code === "Tab") && !subMenuContainer.classList.contains(".is-closed")) { // Close the submenu and move focus to the first top menu button. if (width > 840) { setTimeout(function timeOutFunction() { subMenuContainer.querySelector(".js-main-nav-hamburger__subitem:first-of-type .js-main-nav-hamburger__link").focus(); }, 1); } } }); } } if (lastUtilMenuItem) { // with utility nav, utility nav content closed lastUtilMenuItem.addEventListener("keydown", function (e) { if (e.key === "Tab" || e.code === "Tab") { if (width < 841 && this.getAttribute("aria-expanded") === "false") { setFocusOnFirstTopMenu(); } } }); // with utility nav, last utility nav content open lastUtilMenuContentLink.addEventListener("keydown", function (e) { // Without this, sift + tab set focus on the first top menu button. if (e.shiftKey && e.key === "Tab" || e.shiftKey && e.code === "Tab") { if (width < 841) { setTimeout(function timeOutFunction() { e.target.closest(".js-clickable").previousElementSibling.querySelector("a").focus(); }, 1); } } else if (e.key === "Tab" || e.code === "Tab") { // Close the nav content and move focus to the first top menu button. if (width < 841) { setTimeout(function timeOutFunction() { e.target.closest(".js-util-nav-content").querySelector("a:first-of-type").focus(); }, 1); } } }); } var setFocusOnFirstTopMenu = function setFocusOnFirstTopMenu() { // Timeout function is necessary to set focus on the first top menu button. Otherwise, focus is set on next focusable element outside the menu. setTimeout(function timeOutFunction() { firstTopMenuItem.focus(); }, 1); }; document.addEventListener("keydown", function (e) { // ESC to close menus. // 'e.key === "Esc"' is necessary for IE11. if (e.key === "Escape" || e.key === "Esc" || e.code === "Escape") { // Log in to... in Utility nav bar if (utilNavWide.querySelector(".js-util-nav-content").style.opacity === "1") { closeUtilWideContent(); utilNavWide.querySelector(".js-util-nav-toggle").focus(); } // Util nav menus in the hamburger menu if (utilNarrowNav) { if (utilNarrowButton !== document.activeElement && utilNarrowContainer.style.opacity === "1") { // Open Log in to... in Hamburger menu: To be consisitent with submenu, keep the content open and set focus on nav button. var utilNavContentLinks = utilNarrowNav.querySelectorAll(".js-clickable-link"); for (var i = 0; i < utilNavContentLinks.length; i++) { if (utilNavContentLinks[i].innerText === document.activeElement.innerText) { utilNarrowButton.focus(); } } closeNarrowUtilContent(); } else { var narrowNavItems = utilNarrowNav.querySelectorAll(".ma__utility-nav__link"); for (var _i = 0; _i < narrowNavItems.length; _i++) { if (narrowNavItems[_i].innerText === document.activeElement.innerText) { closeMenu(); } } } } // Main nav elements var openSubmenu = document.querySelector(".submenu-open .js-main-nav-hamburger__top-link"); if (openSubmenu !== document.activeElement) { // To prevent to set focus on another top menu button with open submenu. var menus = document.querySelectorAll(".ma__main__hamburger-nav__top-link"); for (var _i2 = 0; _i2 < menus.length; _i2++) { if (menus[_i2] === document.activeElement) { closeMenu(); } } // Set focus on its parent top menu button. var openSubmenuItems = document.querySelectorAll(".submenu-open .js-main-nav-hamburger-content:not(is-closed) .js-main-nav-hamburger__link"); for (var _i3 = 0; _i3 < openSubmenuItems.length; _i3++) { if (openSubmenuItems[_i3] === document.activeElement) { openSubmenu.focus(); } } } else { closeMenu(); } } }); // Arrow keyboard navigation in the menu. var submenuLinks = document.querySelectorAll(".js-main-nav-hamburger__link"); submenuLinks.forEach(function (link) { link.addEventListener("keydown", function (e) { var targetParent = e.target.closest(".js-main-nav-hamburger__subitem"); if (e.key === "ArrowDown" || e.code === "ArrowDown") { if (targetParent.nextElementSibling) { targetParent.nextElementSibling.querySelector("a").focus(); } else { // Set focus on the first sibling submenu item link. document.querySelector(".js-main-nav-hamburger-content:not(.is-closed) .js-main-nav-hamburger__subitem:first-of-type a").focus(); } } if (e.key === "ArrowUp" || e.code === "ArrowUp") { if (targetParent.previousElementSibling) { targetParent.previousElementSibling.querySelector("a").focus(); } else { // Set focus on the last sibling submenu item link. document.querySelector(".js-main-nav-hamburger-content:not(.is-closed) .js-main-nav-hamburger__subitem:last-of-type a").focus(); } } }); }); var narrowUtilContentLinks = document.querySelectorAll(".js-utility-nav--narrow .js-util-nav-content a.js-clickable-link"); var lastIndex = narrowUtilContentLinks.length - 1; narrowUtilContentLinks.forEach(function (link, i) { link.addEventListener("keydown", function (e) { if (e.key === "ArrowDown" || e.code === "ArrowDown") { if (e.target === narrowUtilContentLinks[i]) { if (e.target === narrowUtilContentLinks[lastIndex]) { i = 0; } else { i++; } } else { if (e.target === narrowUtilContentLinks[lastIndex]) { i = 0; } else { var targetIndex; for (var index = 0; index < narrowUtilContentLinks.length; index++) { if (e.target === narrowUtilContentLinks[index]) { targetIndex = index; } } i = targetIndex; i++; } } } if (e.key === "ArrowUp" || e.code === "ArrowUp") { if (e.target === narrowUtilContentLinks[i]) { if (e.target === narrowUtilContentLinks[0]) { i = lastIndex; } else { i--; } } else { if (e.target === narrowUtilContentLinks[0]) { i = lastIndex; } else { var _targetIndex; for (var _index = lastIndex; _index > -1; _index--) { if (e.target === narrowUtilContentLinks[_index]) { _targetIndex = _index; } } i = _targetIndex; i--; } } } narrowUtilContentLinks[i].focus(); }); }); // NOTE: KEEPING BELOW FOR MORE KEYBOARD NAVIGATION WORK AFTER ACCESSIBILITY TEST. // =============== exisiting code below // menuButton.addEventListener("keydown", function (e) { // if (e.code == 'ArrowDown') { // event.preventDefault(); // openMenu(); // if (window.innerWidth > 620) { // setTimeout(function timeoutFunction() { // menuItems[0].querySelector(".js-main-nav-hamburger__top-link").focus(); // }, 500); // } else { // setTimeout(function timeoutFunction() { // document.querySelector('.js-header__nav-search input').focus(); // }, 500); // } // } // NOTE: This causes a keyboard trap at the menu open/close button. // if (e.code == 'Tab') { // e.preventDefault(); // document.querySelector('.ma__header__hamburger-search__input').focus(); // } // if (e.shiftKey && e.code == "Tab") { // closeMenu(); // } // if (e.code == "Escape" || e.key == "Escape"|| e.key === "Esc") { // closeMenu(); // } // }); } if (jumpToSearchButton !== null) { jumpToSearchButton.addEventListener("click", function (e) { e.preventDefault(); jumpToSearch(); }); } function toggleMenu() { if (hamburgerMenuContainer) { // To prevent null in the original mobile main nav. if (body.classList.contains("show-menu")) { // This control the visibility of the dropdown to keyboard and screen reader users while maintaining the show/hide animation effect. // .toggleAttribute() doesn't work with ios11. hamburgerMenuContainer.setAttribute("aria-hidden", ""); closeMenu(); setTimeout(function timeoutFunction() { document.querySelector(".js-header-menu-button").focus(); }, 100); } else { hamburgerMenuContainer.removeAttribute("aria-hidden"); openMenu(); // Set buttons between menu button and hamburger menu unfocusable to set focus on the first focusable item in the menu at next tabbing. document.querySelector(".js-utility-nav--wide .ma__utility-nav__item .goog-te-menu-value").setAttribute("tabindex", "-1"); document.querySelector(".js-utility-nav--wide .ma__utility-nav__item .direct-link").setAttribute("tabindex", "-1"); document.querySelector(".js-utility-nav--wide .ma__utility-nav__item .js-util-nav-toggle").setAttribute("tabindex", "-1"); } } } function closeMenu() { commonCloseMenuTasks(); menuButton.setAttribute("aria-pressed", "false"); // Set focus on the menu button. setTimeout(function timeoutFunction() { document.querySelector(".js-header-menu-button").focus(); }, 100); if (width > 840 && document.querySelector(".js-utility-nav--wide .ma__utility-nav__item .direct-link").hasAttribute("tabindex")) { document.querySelector(".js-utility-nav--wide .ma__utility-nav__item .goog-te-menu-value").removeAttribute("tabindex"); document.querySelector(".js-utility-nav--wide .ma__utility-nav__item .direct-link").removeAttribute("tabindex"); document.querySelector(".js-utility-nav--wide .ma__utility-nav__item .js-util-nav-toggle").removeAttribute("tabindex"); document.querySelector(".js-header-search-access-button").removeAttribute("tabindex"); } if (body.style.position === "fixed") { // At the same time, the alert needs to be scrolled up to the position again to retain the page elements position. body.removeAttribute("style"); body.style.position = "relative"; window.scrollTo(0, alertlOffsetPosition); } } function commonCloseMenuTasks() { body.classList.remove("show-menu"); if (document.querySelector("html.stickyTOCtmp")) { document.querySelector("html.stickyTOCtmp").classList.add("stickyTOC"); document.querySelector("html.stickyTOCtmp").classList.remove("stickyTOCtmp"); } menuButton.setAttribute("aria-expanded", "false"); menuButton.setAttribute("aria-label", "Open the main menu for mass.gov"); if (hamburgerMenuContainer.hasAttribute("style")) { hamburgerMenuContainer.removeAttribute("style"); } // if (hamburgerMenuContainer.hasAttribute("tabindex")) { // hamburgerMenuContainer.removeAttribute("tabindex"); // } if (searchInput.hasAttribute("autofocus")) { searchInput.removeAttribute("autofocus"); } if (feedbackButton) { feedbackButton.classList.remove("hide-button"); } jumpToSearchButton.setAttribute("aria-expanded", "false"); if (menuOverlay) { menuOverlay.classList.remove("overlay-open"); } if (alertOverlay) { alertOverlay.classList.remove("overlay-open"); alertOverlay.removeAttribute("style"); } } function openMenu() { var heightAboveMenuContainer; var emergencyAlertsHeight; var alertOffsetAdjusted = 0; // Set the alert to its offset position in the window to prevent the page to shift as the menu opens. var lockPage = function lockPage() { if (document.querySelector(".ma__emergency-alerts")) { document.querySelector("body").style.top = "-".concat(alertlOffsetPosition, "px"); } else { document.querySelector("body").style.top = 0; } heightAboveMenuContainer = hamburgerMenuContainer.getBoundingClientRect().top; }; if (document.querySelector("html.stickyTOC")) { document.querySelector("html.stickyTOC").classList.add("stickyTOCtmp"); document.querySelector("html.stickyTOC").classList.remove("stickyTOC"); } // Start open menu tasks. body.classList.add("show-menu"); menuButton.setAttribute("aria-expanded", "true"); menuButton.setAttribute("aria-label", "Close the main menu for mass.gov"); if (feedbackButton) { feedbackButton.classList.add("hide-button"); } jumpToSearchButton.setAttribute("aria-expanded", "true"); menuButton.setAttribute("aria-pressed", "true"); var alertsHeader = document.querySelector(".ma__emergency-alerts__header"); document.querySelector("body").style.position = "fixed"; if (alertsHeader !== null) { var emergencyAlerts = document.querySelector(".ma__emergency-alerts"); emergencyAlertsHeight = emergencyAlerts.offsetHeight; alertOffsetAdjusted = alertsHeader.offsetHeight / 2; alertlOffsetPosition = emergencyAlertsHeight - alertOffsetAdjusted; // if (osInfo.indexOf("iPhone") !== -1) { // // Changed the duration value to 600. // customScrollTo(alertlOffsetPosition, 600); // setTimeout(lockPage(), 600); // } // else { // window.scrollTo({ // top: 0, // left: 0, // behavior: "smooth" // }); lockPage(); //} var hamburgerNavOffset = document.querySelector(".ma__header__hamburger__nav").offsetHeight; heightAboveMenuContainer = alertOffsetAdjusted + hamburgerNavOffset; hamburgerMenuContainer.style.height = "calc(100vh - ".concat(heightAboveMenuContainer, "px)"); } if (menuOverlay) { var overlayOffset = heightAboveMenuContainer; if (width > 840) { overlayOffset = overlayOffset - 1; } menuOverlay.style.top = overlayOffset + "px"; menuOverlay.classList.add("overlay-open"); } if (alertOverlay) { if (document.querySelector(".ma__emergency-alerts")) { alertOverlay.classList.add("overlay-open"); alertOverlay.style.height = alertOffsetAdjusted + "px"; } } } function jumpToSearch(e) { if (body.classList.contains("show-menu")) { // This control the visibility of the dropdown to keyboard and screen reader users while maintaining the show/hide animation effect. hamburgerMenuContainer.setAttribute("aria-hidden", ""); searchInput.focus(); } else { hamburgerMenuContainer.removeAttribute("aria-hidden"); openMenu(); setTimeout(function timeoutFunction() { jumpToSearchButton.setAttribute("aria-pressed", "true"); searchInput.setAttribute("autofocus", ""); searchInput.focus(); }, 200); } } function anotherCloseSubMenus(item) { menuItems.forEach(function (li) { if (item !== li && li.classList.contains("submenu-open")) { li.classList.remove("submenu-open"); li.querySelector(".js-main-nav-hamburger__top-link").setAttribute("aria-expanded", "false"); li.style.pointerEvents = "none"; /** Slide up. */ li.querySelector(".js-main-nav-hamburger-content").style.height = "0"; li.querySelector(".js-main-nav-hamburger__container").style.opacity = "0"; setTimeout(function timeoutFunction() { li.removeAttribute("style"); li.querySelector(".js-main-nav-hamburger-content").classList.add("is-closed"); }, 500); } }); } // function closeSubMenus(item) { // //Close other open submenus // let siblings = []; // let thisSibling = item.parentNode.firstChild; // while (thisSibling) { // if (thisSibling !== item && thisSibling.nodeType === Node.ELEMENT_NODE) // siblings.push(thisSibling); // thisSibling = thisSibling.nextElementSibling || thisSibling.nextSibling; // } // for (let i = 0; i < siblings.length; i++) { // if (siblings[i].classList.contains("submenu-open")) { // siblings[i].classList.remove("submenu-open"); // siblings[i].querySelector(".js-main-nav-hamburger__top-link").setAttribute("aria-expanded", "false"); // siblings[i].style.pointerEvents = "none"; // //setTimeout(function timeoutFunction() { // //}, 700); // /** Slide up. */ // siblings[i].querySelector(".js-main-nav-hamburger-content").style.height = "0"; // siblings[i].querySelector(".js-main-nav-hamburger__container").style.opacity = "0"; // siblings[i].removeAttribute("style"); // //setTimeout(function timeoutFunction() { // siblings[i].querySelector(".js-main-nav-hamburger-content").classList.add("is-closed"); // //}, 500); // } // } // } // Close menu when utility nav is clicked if (utilNavWide !== null && body.classList.contains("show-menu")) { closeMenu(); } // Close and reset menu on overlay click if (null !== menuOverlay) { menuOverlay.addEventListener("click", function () { closeMenu(); }); } if (alertOverlay !== null) { alertOverlay.addEventListener("click", function () { closeMenu(); }); } var debouncer; window.addEventListener("resize", function () { clearTimeout(debouncer); var osInfo = navigator.appVersion; // On Android devices resize event is triggered when keyboard appears // and it closes the menu. if (osInfo.indexOf("Android") === -1 && osInfo.indexOf("iPhone") === -1) { debouncer = setTimeout(function () { closeMenu(); }, 100); } }); // ** Utility nav // Wide/utility nav bar var utilWideButton = document.querySelector(".js-utility-nav--wide .js-util-nav-toggle"); var utilWideCloseButton = document.querySelector(".js-utility-nav--wide .js-close-util-nav"); var utilWideContent = document.querySelector(".js-utility-nav--wide .js-util-nav-content"); if (utilWideButton !== null && utilWideCloseButton !== null && utilWideContent !== null) { // Open utilWideButton.addEventListener("click", function (e) { var thisWideButton = e.target.closest(".js-util-nav-toggle"); var thisWideContent = thisWideButton.nextElementSibling; if (thisWideContent.classList.contains("is-closed")) { // To open thisWideButton.closest(".ma__header__hamburger__nav").classList.add("util-nav-content-open"); thisWideContent.classList.remove("is-closed"); thisWideContent.removeAttribute("aria-hidden"); thisWideContent.removeAttribute("style"); thisWideContent.style.height = "auto"; thisWideContent.style.opacity = "1"; // Button State thisWideButton.setAttribute("aria-expanded", "true"); thisWideButton.setAttribute("aria-pressed", "true"); } thisWideButton.setAttribute("aria-expanded", "true"); thisWideButton.setAttribute("aria-pressed", "true"); }); } // Close - Utility nav dropdown on the utility nav bar overwaps the button to open it once it's open. To close the dropdown, use the close button within the dropdown container. This is the control for that inside button. if (utilWideCloseButton !== null) { utilWideCloseButton.addEventListener("click", function (e) { closeUtilWideContent(); }); } function closeUtilWideContent() { // Content state utilWideContent.style.height = "0"; utilWideContent.style.opacity = "0"; utilWideContent.classList.add("is-closed"); utilWideContent.setAttribute("aria-hidden", "true"); // Close button state utilWideCloseButton.setAttribute("aria-expanded", "false"); // Utility button state utilWideButton.setAttribute("aria-expanded", "false"); utilWideButton.setAttribute("aria-pressed", "false"); utilWideButton.closest(".ma__header__hamburger__nav").classList.toggle("util-nav-content-open"); } // Narrow/in hamburger menu if (utilNarrowButton !== null) { // utilNarrowContent = utilNarrowButton.nextElementSibling; utilNarrowContent.style.maxHeight = "0"; utilNarrowContainer.style.opacity = "0"; utilNarrowButton.addEventListener("click", function (e) { var thisButton = e.target.closest(".js-util-nav-toggle"); var thisNavContainer = e.target.closest(".ma__utility-nav__item"); utilNarrowContent = thisButton.nextElementSibling; if (utilNarrowContent.classList.contains("is-closed")) { // TO OPEN closeSubMenu(); thisButton.setAttribute("aria-expanded", "true"); utilNarrowContent.removeAttribute("aria-hidden"); thisNavContainer.style.pointerEvents = "none"; /** Slide down. */ thisNavContainer.removeAttribute("style"); /** Show the content. */ utilNarrowContent.classList.remove("is-closed"); utilNarrowContent.style.maxHeight = "auto"; /** Get the computed height of the content. */ var contentHeight = utilNarrowContent.querySelector(".ma__utility-nav__content-body").clientHeight + "px"; /** Set the height of the submenu as 0px, */ /** so we can trigger the slide down animation. */ utilNarrowContent.style.maxHeight = "0"; utilNarrowContent.style.Height = "0"; // These height settings display the bottom border of the parent li at the correct spot. utilNarrowContent.style.height = contentHeight; utilNarrowContainer.style.height = contentHeight; utilNarrowContent.style.maxHeight = contentHeight; utilNarrowContainer.style.opacity = "1"; } else { closeNarrowUtilContent(); } }); } function closeNarrowUtilContent() { if (utilNarrowContent) { var thisNavContainer = utilNarrowButton.closest(".ma__utility-nav__item"); utilNarrowButton.setAttribute("aria-expanded", "false"); utilNarrowContent.setAttribute("aria-hidden", "true"); thisNavContainer.style.pointerEvents = "none"; setTimeout(function timeoutFunction() { thisNavContainer.removeAttribute("style"); }, 700); utilNarrowContent.style.maxHeight = "0"; utilNarrowContainer.style.opacity = "0"; setTimeout(function timeoutFunction() { utilNarrowContent.classList.add("is-closed"); }, 500); } } function closeSubMenu() { var openSubMenu = document.querySelector(".submenu-open"); if (openSubMenu) { var openSubMenuButton = openSubMenu.querySelector(".js-main-nav-hamburger__top-link"); var openSubMenuContent = openSubMenu.querySelector(".js-main-nav-hamburger-content"); var openSubMenuContainer = openSubMenu.querySelector(".js-main-nav-hamburger__container"); openSubMenuButton.setAttribute("aria-expanded", "false"); openSubMenuContent.style.height = "0"; openSubMenuContainer.style.opacity = "0"; openSubMenuContent.classList.add("is-closed"); openSubMenu.removeAttribute("style"); openSubMenu.classList.remove("submenu-open"); } } // Target iOS Safari versions less than 11 to handle issues that cannot be targeted // with behavior detection due to either buggy or idiosyncratic browser implementation // issues addressed in later major versions. if (osInfo.indexOf("Safari") !== -1) { osInfo.split(" ").forEach(function (splitVar) { if (splitVar.length > 0 && splitVar.indexOf("Version/", 0) !== false) { var version = splitVar.match(/\d+/); if (version !== null && version[0] < 11) { body.classList.add("ios-safari-less-than-11"); } } }); } menuItems.forEach(function (item) { var itemButton = item.querySelector(".js-main-nav-hamburger__top-link"); var subMenu = item.querySelector(".js-main-nav-hamburger-content"); var subItems = subMenu.querySelector(".js-main-nav-hamburger__container"); subItems.style.opacity = "0"; itemButton.addEventListener("click", function (e) { anotherCloseSubMenus(item); if (item.classList.contains("submenu-open")) { item.classList.remove("submenu-open"); itemButton.setAttribute("aria-expanded", "false"); item.style.pointerEvents = "none"; setTimeout(function timeoutFunction() { //item.style.height = "0"; //item.style.opacity = "0"; item.removeAttribute("style"); }, 700); } else { item.classList.add("submenu-open"); itemButton.setAttribute("aria-expanded", "true"); item.style.pointerEvents = "none"; setTimeout(function timeoutFunction() { item.removeAttribute("style"); }, 500); } if (item.querySelector(".js-main-nav-hamburger-content").classList.contains("is-closed")) { /** Show the subMenu. */ item.querySelector(".js-main-nav-hamburger-content").classList.remove("is-closed"); item.querySelector(".js-main-nav-hamburger-content").style.height = "auto"; /** Get the computed height of the subMenu. */ var height = item.querySelector(".js-main-nav-hamburger-content").clientHeight + "px"; /** Set the height of the submenu as 0px, */ /** so we can trigger the slide down animation. */ item.querySelector(".js-main-nav-hamburger-content").style.height = "0"; setTimeout(function timeoutFunction() { item.querySelector(".js-main-nav-hamburger-content").style.height = height; item.scrollIntoView({ behavior: "smooth", block: "start", inline: "start" }); subItems.style.opacity = "1"; }, 500); /** Close Utility menu content when a sub menu is open. */ if (width < 840) { closeNarrowUtilContent(); } } else { item.querySelector(".js-main-nav-hamburger-content").style.height = "0"; subItems.style.opacity = "0"; // Set a little bit of delay to run // The open/close submenu animation is CSS. // Unable to confirm the completion of the animation in JS. // Unable to use callback in this case. setTimeout(function timeoutFunction() { item.querySelector(".js-main-nav-hamburger-content").classList.add("is-closed"); }, 500); } }); itemButton.addEventListener("keydown", function (e) { if (e.code == "ArrowDown" || e.key == "ArrowDown") { var first = subItems.getElementsByTagName("li")[0]; first.querySelector(".js-main-nav-hamburger__link").focus(); } // 'e.key === "Esc"' is for IE11. if (e.code == "Escape" || e.key == "Escape" || e.key === "Esc") { if (item.classList.contains("submenu-open")) { // NOTE: KEEP BELOW COMMENTED LINES UNTIL THE DESIGN TEAM FINALIZES THE BEHAVIOR. // subItems.style.opacity = "0"; // subMenu.style.height = "0"; // itemButton.parentElement.classList.remove("submenu-open"); // itemButton.setAttribute("aria-expanded", "false"); // setTimeout(function timeoutFunction() { // subMenu.classList.add("is-closed"); // }, 500); // } // else { closeMenu(); } } }); }); "use strict"; // // ****** Menu button ****** var mobileMenuButton = document.querySelector(".js-header-menu-button"); var mobileFeedbackButton = document.querySelector(".ma__fixed-feedback-button"); var mobileJumpToSearchButton = document.querySelector(".js-header-search-access-button"); if (mobileMenuButton !== null) { mobileMenuButton.addEventListener("click", function (event) { event.preventDefault(); // Toggle mobile menu. if (window.innerWidth < 841 && document.querySelector(".ma__header")) { toggleMobileMenu(); } // Hide feedback button when menu opens. toggleFeedbackButton(); }); } // // ****** Access to Search button on mobile should hide feedback button when menu opens ****** if (mobileJumpToSearchButton !== null) { mobileJumpToSearchButton.addEventListener("click", function (event) { toggleFeedbackButton(); }); } function toggleFeedbackButton() { if (mobileFeedbackButton) { // Cannot use .toggle. It results to show the button with the dropdown and hide it with the closed dropdown. if (mobileFeedbackButton.classList.contains("hide-button") === false) { mobileFeedbackButton.classList.add("hide-button"); } else { mobileFeedbackButton.classList.remove("hide-button"); } } } function toggleMobileMenu() { var body = document.querySelector("body"); if (body.classList.contains("show-menu")) { body.classList.remove("show-menu"); } else { body.classList.add("show-menu"); } }