From 76f865cc96d426bc729255c27fbaa933f30cf60a Mon Sep 17 00:00:00 2001 From: Yukiko Gannett Date: Fri, 4 Sep 2020 16:05:59 -0400 Subject: [PATCH] DP-19782 flyout scrolling (#1160) * fix the bottom cut off in the flyout * set a fomula to calculate the height of the flyout * test edit * test edit2 * adding a height calculation formula to the blue nav bar with screen size less than 841px * test edit3 * Fixed narrow utility nav for tablet sizes - DP-19782 * remove note comment * clean up comments * Fixed menu button scrolling to top and set scroll to top to show alerts button on smaller screens - DP-19782 * Changed height check to not use height at page load - DP-19782 * Set up with correct positioning and animated scroll - DP-19782 * Added back old method - DP-19782 * Replaced else statement - DP-19782 * Fixed extra height - DP-19782 * Revert "Fixed extra height - DP-19782" This reverts commit 3b4d6acfd96d8e6282f235b345d32b6d1e5100f6. * Keep menu closing behavior on resize in - DP-19872 Co-authored-by: Tom Fleming --- .../scss/03-organisms/_header-hamburger.scss | 6 +- .../assets/js/modules/mainNavHamburger.js | 85 ++++++++++++++----- 2 files changed, 68 insertions(+), 23 deletions(-) diff --git a/assets/scss/03-organisms/_header-hamburger.scss b/assets/scss/03-organisms/_header-hamburger.scss index 44d1842831..da63482d80 100644 --- a/assets/scss/03-organisms/_header-hamburger.scss +++ b/assets/scss/03-organisms/_header-hamburger.scss @@ -7,7 +7,6 @@ body.show-menu { overflow: hidden; @media ($bp-header-toggle-max) { - position: fixed !important; left: 0; } } @@ -241,7 +240,7 @@ body.show-menu { &__nav-container { background-color: $c-gray-lightest; - height: 95vh; + height: calc(100vh - 40px); top: 40px; overflow-y: auto; position: absolute; @@ -255,7 +254,8 @@ body.show-menu { @media ($bp-header-toggle-min) { - top: 43px; + top: 44px; + height: calc(100vh - 44px); } .show-menu & { diff --git a/patternlab/styleguide/source/assets/js/modules/mainNavHamburger.js b/patternlab/styleguide/source/assets/js/modules/mainNavHamburger.js index 9c770ea183..67e42424b4 100644 --- a/patternlab/styleguide/source/assets/js/modules/mainNavHamburger.js +++ b/patternlab/styleguide/source/assets/js/modules/mainNavHamburger.js @@ -18,38 +18,48 @@ const utilNarrowButton = document.querySelector(".ma__header__hamburger__utility let utilNarrowContent = utilNarrowButton ? utilNarrowButton.nextElementSibling : null; let utilNarrowContainer = utilNarrowContent ? utilNarrowContent.querySelector(".ma__utility-nav__container") : null; -// Check whether the wide utility nav is open. -const utilNavWideCheck = function() { - return utilNavWide ? (utilNavWide.offsetWidth > 0 && utilNavWide.offsetHeight > 0) : null; -}; +// 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"); let emergencyAlerts = document.querySelector(".ma__emergency-alerts__content"); let hamburgerMenuAlertScrolling = function() { - if (hamburgerMainNav !== null && emergencyAlerts !== null && utilNavWideCheck() !== false) { + if (hamburgerMainNav !== null && emergencyAlerts !== null) { let alertHeight = document.querySelector(".ma__emergency-alerts").clientHeight || 0; let hamburgerMenuTop = document.querySelector(".ma__header__hamburger__nav-container").offsetTop || 0; + let paddingTarget = hamburgerMainNav; + + if (utilNavNarrowCheck() !== false) { + paddingTarget = utilNarrowNav; + hamburgerMainNav.style.paddingBottom = 0; + } // Add bottom padding when function is initially called. - hamburgerMainNav.style.paddingBottom = alertHeight + hamburgerMenuTop + "px"; + paddingTarget.style.paddingBottom = alertHeight + hamburgerMenuTop + "px"; // Add bottom padding when alert style changes occur. const alertObserver = new MutationObserver(function(mutations) { mutations.forEach(function(mutationRecord) { - if (mutationRecord.oldValue !== null && utilNavWideCheck() !== false) { + if (mutationRecord.oldValue !== null) { let result = {}; let attributes = mutationRecord.oldValue.split(";"); for (let i = 0; i < attributes.length; i++) { let entry = attributes[i].split(":"); result[entry.splice(0,1)[0]] = entry.join(":"); } + if (utilNavNarrowCheck() !== false) { + paddingTarget = utilNarrowNav; + hamburgerMainNav.style.paddingBottom = 0; + } let oldDisplayValue = result.display ? result.display.trim() : null; let currentDisplayValue = document.querySelector(".ma__emergency-alerts__content").style.display; if (currentDisplayValue === oldDisplayValue) { alertHeight = document.querySelector(".ma__emergency-alerts").clientHeight; - hamburgerMainNav.style.paddingBottom = alertHeight + hamburgerMenuTop + "px"; + paddingTarget.style.paddingBottom = alertHeight + hamburgerMenuTop + "px"; } } }); @@ -79,15 +89,14 @@ if (siteAlertWrapper !== null) { if (emergencyAlerts !== null) { observer.disconnect(); } + hamburgerMenuAlertScrolling(); + }); jsonApiObserver.observe(siteAlertWrapper, { childList: true }); } -else { - hamburgerMenuAlertScrolling(); -} /** DP-19336 end */ // Open and close the menu @@ -460,9 +469,6 @@ function toggleMenu() { hamburgerMenuContainer.removeAttribute("aria-hidden"); openMenu(); - if (utilNavWideCheck() === false) { - hamburgerMainNav.style.paddingBottom = 0; - } // 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"); @@ -509,6 +515,47 @@ function commonCloseMenuTasks() { function openMenu() { commonOpenMenuTasks(); menuButton.setAttribute("aria-pressed", "true"); + let alertsInterface = document.querySelector('.ma__emergency-alerts__interface'); + if (document.querySelector("body").clientWidth < 841 && alertsInterface !== null) { + let emergencyAlerts = document.querySelector(".ma__emergency-alerts"); + let scrollOffset = emergencyAlerts.offsetHeight - (alertsInterface.offsetHeight/1.5); + + + if (navigator.userAgent.match(/iPad|iPhone|iPod|Android|Windows Phone/i)) { + function customScrollTo(to, duration) { + var start = 0, + change = to - start, + currentTime = 0, + increment = 20; + + var animateScroll = function(){ + currentTime += increment; + var val = Math.easeInOutQuad(currentTime, start, change, duration); + window.scrollTo(0,val); + + if(currentTime < duration) { + setTimeout(animateScroll, increment); + } + }; + animateScroll(); + } + + Math.easeInOutQuad = function (t, b, c, d) { + t /= d/2; + if (t < 1) return c/2*t*t + b; + t--; + return -c/2 * (t*(t-2) - 1) + b; + }; + + customScrollTo(scrollOffset, 250); + } else { + window.scrollTo({ + top: scrollOffset, + left: 0, + behavior: "smooth" + }); + } + } } function commonOpenMenuTasks() { @@ -636,15 +683,13 @@ if (null !== menuOverlay) { } let debouncer; -window.onresize = function () { +window.addEventListener("resize", function () { clearTimeout(debouncer); debouncer = setTimeout( () => { - width = body.clientWidth; - if (utilNavWideCheck() !== false) { - hamburgerMenuAlertScrolling(); - } + closeMenu(); + hamburgerMenuAlertScrolling(); }, 100); -}; +}); // ** Utility nav