From 99e1d506e5b609bad7a79ebe9b6898c82e2331ec Mon Sep 17 00:00:00 2001 From: Yukiko Gannett Date: Tue, 18 Aug 2020 08:11:26 -0400 Subject: [PATCH 1/4] set overlay below the blue nav bar --- .../assets/js/modules/mainNavHamburger.js | 41 +++++++++++++++++++ 1 file changed, 41 insertions(+) diff --git a/patternlab/styleguide/source/assets/js/modules/mainNavHamburger.js b/patternlab/styleguide/source/assets/js/modules/mainNavHamburger.js index 7a62488b55..e25ade11cd 100644 --- a/patternlab/styleguide/source/assets/js/modules/mainNavHamburger.js +++ b/patternlab/styleguide/source/assets/js/modules/mainNavHamburger.js @@ -5,6 +5,7 @@ const hamburgerMenuContainer = document.querySelector(".ma__header__hamburger__n const feedbackButton = document.querySelector(".ma__fixed-feedback-button"); let menuItems = document.querySelectorAll(".js-main-nav-hamburger-toggle"); const menuOverlay = document.querySelector(".menu-overlay"); +const menuBarHeight = document.querySelector(".ma__header__hamburger__nav").offsetHeight; let utilNavWide = document.querySelector(".js-utility-nav--wide"); const jumpToSearchButton = document.querySelector(".js-header-search-access-button"); const searchInput = document.querySelector(".ma__header__hamburger__nav-container .ma__header-search__input"); @@ -288,6 +289,37 @@ if (jumpToSearchButton !== null) { }, false); } +// Adjust the overlay position as the alert accordion opens/closes while the menu is open. +setTimeout(function timeoutFunction() { + if (document.querySelector(".js-ajax-pattern")) { + document.querySelector(".ma__button-alert").addEventListener("click", function () { + if (body.classList.contains("show-menu")) { + let openAboveNavBar = document.querySelector(".js-accordion-content").getBoundingClientRect().top; + let closeOverlayOffset = openAboveNavBar + menuBarHeight; + if (document.querySelector(".js-emergency-alerts").classList.contains("is-open") === true) { + if (width > 840) { + closeOverlayOffset = closeOverlayOffset -1; + } + menuOverlay.style.top = closeOverlayOffset + "px"; + } + + // When the alert is close, wait till accordion animation to complete + // to get the complete height of the alert header and the accordion content. + if (document.querySelector(".js-emergency-alerts").classList.contains("is-open") === false) { + setTimeout(function () { + let openOverlayOffset = document.querySelector(".ma__header__hamburger").getBoundingClientRect().top + menuBarHeight; + + if (width > 840) { + openOverlayOffset = openOverlayOffset -1; + } + menuOverlay.style.top = openOverlayOffset + "px"; + }, 400); + } + } + }); + } +}, 1000); + function toggleMenu() { 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. @@ -350,10 +382,19 @@ function commonOpenMenuTasks() { } jumpToSearchButton.setAttribute("aria-expanded", "true"); if (menuOverlay) { + offsetMenuOverlay(); menuOverlay.classList.add("overlay-open"); } } +function offsetMenuOverlay () { + let overlayOffset = document.querySelector(".ma__header__hamburger").getBoundingClientRect().top + menuBarHeight; + if (width > 840) { + overlayOffset = overlayOffset -1; + } + menuOverlay.style.top = overlayOffset + "px"; +} + function jumpToSearch(e) { if (body.classList.contains("show-menu")) { From cbbaa2bdd5a087f33fce467f2b3fb290c523564e Mon Sep 17 00:00:00 2001 From: Yukiko Gannett Date: Tue, 18 Aug 2020 08:27:13 -0400 Subject: [PATCH 2/4] add changelog for DP-19683 --- changelogs/DP-19683.yml | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 changelogs/DP-19683.yml diff --git a/changelogs/DP-19683.yml b/changelogs/DP-19683.yml new file mode 100644 index 0000000000..46b9aea838 --- /dev/null +++ b/changelogs/DP-19683.yml @@ -0,0 +1,6 @@ +Fixed: + - project: Patternlab + component: Header + description: Set the overlay below the blue nav bar when it has active alerts. (#1152) + issue: DP-19683 + impact: Patch From eda7c371e1066bea40e95a77ad260185b99fd1d6 Mon Sep 17 00:00:00 2001 From: Yukiko Gannett Date: Tue, 18 Aug 2020 13:30:16 -0400 Subject: [PATCH 3/4] remove a duplicate variable definition from cleaning up merge conflicts --- .../styleguide/source/assets/js/modules/mainNavHamburger.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/patternlab/styleguide/source/assets/js/modules/mainNavHamburger.js b/patternlab/styleguide/source/assets/js/modules/mainNavHamburger.js index 15c0e34a03..3f06e665fc 100644 --- a/patternlab/styleguide/source/assets/js/modules/mainNavHamburger.js +++ b/patternlab/styleguide/source/assets/js/modules/mainNavHamburger.js @@ -1,12 +1,11 @@ const body = document.querySelector("body"); let width = body.clientWidth; const feedbackButton = document.querySelector(".ma__fixed-feedback-button"); +const menuBarHeight = document.querySelector(".ma__header__hamburger__nav").offsetHeight; const menuOverlay = document.querySelector(".menu-overlay"); const menuButton = document.querySelector(".js-header-menu-button"); -const menuBarHeight = document.querySelector(".ma__header__hamburger__nav").offsetHeight; -let utilNavWide = document.querySelector(".js-utility-nav--wide"); const jumpToSearchButton = document.querySelector(".js-header-search-access-button"); const searchInput = document.querySelector(".ma__header__hamburger__nav-container .ma__header-search__input"); From e1be20f018630788d2cb732af0293a265b47ad3a Mon Sep 17 00:00:00 2001 From: Yukiko Gannett Date: Tue, 18 Aug 2020 14:05:36 -0400 Subject: [PATCH 4/4] fix backstop failures from rendering error --- .../styleguide/source/assets/js/modules/mainNavHamburger.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/patternlab/styleguide/source/assets/js/modules/mainNavHamburger.js b/patternlab/styleguide/source/assets/js/modules/mainNavHamburger.js index 3f06e665fc..5509a94c32 100644 --- a/patternlab/styleguide/source/assets/js/modules/mainNavHamburger.js +++ b/patternlab/styleguide/source/assets/js/modules/mainNavHamburger.js @@ -1,7 +1,7 @@ const body = document.querySelector("body"); let width = body.clientWidth; const feedbackButton = document.querySelector(".ma__fixed-feedback-button"); -const menuBarHeight = document.querySelector(".ma__header__hamburger__nav").offsetHeight; +const menuBarHeight = document.querySelector(".ma__header__hamburger__nav") ? document.querySelector(".ma__header__hamburger__nav").offsetHeight : null; const menuOverlay = document.querySelector(".menu-overlay"); const menuButton = document.querySelector(".js-header-menu-button"); @@ -20,7 +20,7 @@ let utilNarrowContainer = utilNarrowContent ? utilNarrowContent.querySelector(". // Check whether the wide utility nav is open. const utilNavWideCheck = function() { - return utilNavWide.offsetWidth > 0 && utilNavWide.offsetHeight > 0; + return utilNavWide ? (utilNavWide.offsetWidth > 0 && utilNavWide.offsetHeight > 0) : null; }; /** DP-19336 begin: add padding to hamburger menu to allow scrolling when alerts are loaded */