From 3e1c0b8dd4b80c52f0d8444147866419d5ba365c Mon Sep 17 00:00:00 2001 From: Yukiko Gannett Date: Mon, 21 Sep 2020 14:14:31 -0400 Subject: [PATCH 1/4] fix js error and lint issues --- .../assets/js/modules/mainNavHamburger.js | 45 ++++--------------- 1 file changed, 9 insertions(+), 36 deletions(-) diff --git a/patternlab/styleguide/source/assets/js/modules/mainNavHamburger.js b/patternlab/styleguide/source/assets/js/modules/mainNavHamburger.js index 057c5120c3..772d714d21 100644 --- a/patternlab/styleguide/source/assets/js/modules/mainNavHamburger.js +++ b/patternlab/styleguide/source/assets/js/modules/mainNavHamburger.js @@ -22,7 +22,7 @@ let utilNarrowContainer = utilNarrowContent ? utilNarrowContent.querySelector(". // Check whether the narrow utility nav is open. const utilNavNarrowCheck = function() { return utilNarrowNav ? (utilNarrowNav.offsetWidth > 0 && utilNarrowNav.offsetHeight > 0) : false; -} +}; /** DP-19336 begin: add padding to hamburger menu to allow scrolling when alerts are loaded */ const hamburgerMainNav = document.querySelector(".ma__header__hamburger__main-nav"); @@ -360,7 +360,6 @@ if (menuButton !== null) { let targetIndex; for (let index = lastIndex; index > -1; index--) { if (e.target === narrowUtilContentLinks[index]) { - console.log(index); targetIndex = index; } } @@ -413,7 +412,6 @@ if (menuButton !== null) { const itemButton = item.querySelector(".js-main-nav-hamburger__top-link"); const subMenu = item.querySelector(".js-main-nav-hamburger-content"); const subItems = subMenu.querySelector(".js-main-nav-hamburger__container"); - let subMenuItems = subMenu.querySelectorAll(".js-main-nav-hamburger__subitem"); subItems.style.opacity = "0"; @@ -504,30 +502,6 @@ if (menuButton !== null) { } } }); - - // Replacing this with submenuLinks.forEach() since this doesn't work with Voiceover. - // [].forEach.call(subMenuItems, function (subItem) { - // const prevSib = subItem.previousElementSibling; - // const nextSib = subItem.nextElementSibling; - - // subItem.addEventListener("keydown", function (e) { - - // switch (e.code) { - // case "ArrowUp": - // case "ArrowLeft": - // if (subItem === prevSib) { - // prevSib.querySelector(".js-main-nav-hamburger__link").focus(); - // } - // break; - // case "ArrowDown": - // case "ArrowRight": - // if (subItem === nextSib) { - // nextSib.querySelector(".js-main-nav-hamburger__link").focus(); - // } - // break; - // } - // }); - // }); }); if (jumpToSearchButton !== null) { @@ -545,7 +519,7 @@ if (jumpToSearchButton !== null) { // Adjust the overlay position as the alert accordion opens/closes while the menu is open. setTimeout(function timeoutFunction() { - if (document.querySelector(".js-ajax-pattern")) { + if (document.querySelector(".ma__button-alert")) { document.querySelector(".ma__button-alert").addEventListener("click", function () { if (body.classList.contains("show-menu")) { let openAboveNavBar = document.querySelector(".js-accordion-content").getBoundingClientRect().top; @@ -615,9 +589,9 @@ function closeMenu() { 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'); + 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"); @@ -642,7 +616,7 @@ function commonCloseMenuTasks() { function openMenu() { commonOpenMenuTasks(); menuButton.setAttribute("aria-pressed", "true"); - let alertsHeader = document.querySelector('.ma__emergency-alerts__header'); + let alertsHeader = document.querySelector(".ma__emergency-alerts__header"); if (alertsHeader !== null) { let emergencyAlerts = document.querySelector(".ma__emergency-alerts"); let scrollOffset = emergencyAlerts.offsetHeight - (alertsHeader.offsetHeight/2); @@ -662,9 +636,9 @@ function openMenu() { function commonOpenMenuTasks() { body.classList.add("show-menu"); - if (document.querySelector('html.stickyTOC')) { - document.querySelector('html.stickyTOC').classList.add('stickyTOCtmp'); - document.querySelector('html.stickyTOC').classList.remove('stickyTOC'); + if (document.querySelector("html.stickyTOC")) { + document.querySelector("html.stickyTOC").classList.add("stickyTOCtmp"); + document.querySelector("html.stickyTOC").classList.remove("stickyTOC"); } menuButton.setAttribute("aria-expanded", "true"); @@ -697,7 +671,6 @@ function jumpToSearch(e) { hamburgerMenuContainer.removeAttribute("aria-hidden"); openMenu(); setTimeout(function timeoutFunction() { - console.log('search timeout clicked'); jumpToSearchButton.setAttribute("aria-pressed", "true"); searchInput.setAttribute("autofocus", ""); searchInput.focus(); From eed98af3623b72d2ecd06fa87f45dfdb0902cd24 Mon Sep 17 00:00:00 2001 From: Yukiko Gannett Date: Mon, 21 Sep 2020 17:56:26 -0400 Subject: [PATCH 2/4] fix the menu closing with vertical scroll in iphone --- .../assets/js/modules/mainNavHamburger.js | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/patternlab/styleguide/source/assets/js/modules/mainNavHamburger.js b/patternlab/styleguide/source/assets/js/modules/mainNavHamburger.js index 772d714d21..6abd744557 100644 --- a/patternlab/styleguide/source/assets/js/modules/mainNavHamburger.js +++ b/patternlab/styleguide/source/assets/js/modules/mainNavHamburger.js @@ -596,6 +596,10 @@ function commonCloseMenuTasks() { 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"); // } @@ -636,6 +640,19 @@ function openMenu() { function commonOpenMenuTasks() { body.classList.add("show-menu"); + if (osInfo.indexOf("iPhone") !== -1) { + let heightAboveNavContainer = document.querySelector(".ma__header__hamburger__nav-container").getBoundingClientRect().top; + + if (heightAboveNavContainer > 0) { + if (osInfo.indexOf("Version/12.") !== -1 || osInfo.indexOf("Version/11.") !== -1 || osInfo.indexOf("Version/12.") !== -1 || osInfo.indexOf("Version/10.") !== -1) { + let bodyOffset = document.querySelector(".ma__header__hamburger").getBoundingClientRect().top - 80; + document.querySelector(".show-menu").style.top = `-${bodyOffset}px`; + document.querySelector(".show-menu").style.position = "fixed"; + } + } + hamburgerMenuContainer.style.height = "calc(100vh - 150px)"; + } + if (document.querySelector("html.stickyTOC")) { document.querySelector("html.stickyTOC").classList.add("stickyTOCtmp"); document.querySelector("html.stickyTOC").classList.remove("stickyTOC"); From 0d7f43190bd113d6d57cbe23afde051d3edca64b Mon Sep 17 00:00:00 2001 From: Yukiko Gannett Date: Mon, 21 Sep 2020 23:17:23 -0400 Subject: [PATCH 3/4] add clean up task on body at closing menu --- .../source/assets/js/modules/mainNavHamburger.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/patternlab/styleguide/source/assets/js/modules/mainNavHamburger.js b/patternlab/styleguide/source/assets/js/modules/mainNavHamburger.js index 6abd744557..b43fdbda52 100644 --- a/patternlab/styleguide/source/assets/js/modules/mainNavHamburger.js +++ b/patternlab/styleguide/source/assets/js/modules/mainNavHamburger.js @@ -588,6 +588,12 @@ function closeMenu() { function commonCloseMenuTasks() { body.classList.remove("show-menu"); + if (body.style.position === "fixed") { + body.style.position = "relative"; + } + if (body.style.top !== 0) { + body.style.top = 0; + } if (document.querySelector("html.stickyTOCtmp")) { document.querySelector("html.stickyTOCtmp").classList.add("stickyTOC"); @@ -650,6 +656,7 @@ function commonOpenMenuTasks() { document.querySelector(".show-menu").style.position = "fixed"; } } + // The height setting makes the menu container scroll. hamburgerMenuContainer.style.height = "calc(100vh - 150px)"; } From 1164f57789f91722dcd2bf453474dee866d1aaad Mon Sep 17 00:00:00 2001 From: Yukiko Gannett Date: Mon, 21 Sep 2020 23:28:58 -0400 Subject: [PATCH 4/4] add changelog for DP-19889 --- changelogs/DP-19889.yml | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 changelogs/DP-19889.yml diff --git a/changelogs/DP-19889.yml b/changelogs/DP-19889.yml new file mode 100644 index 0000000000..4ed4d0e466 --- /dev/null +++ b/changelogs/DP-19889.yml @@ -0,0 +1,6 @@ +Fixed: + - project: Patternlab + component: Header + description: Make the menu container stay open and scrollable. (#1183) + issue: DP-19889 + impact: Patch