diff --git a/libs/blocks/global-navigation/global-navigation.js b/libs/blocks/global-navigation/global-navigation.js index ca80239d6e..557357f80f 100644 --- a/libs/blocks/global-navigation/global-navigation.js +++ b/libs/blocks/global-navigation/global-navigation.js @@ -440,18 +440,13 @@ class Gnav { localNav.querySelector('.feds-localnav-title').addEventListener('click', () => { localNav.classList.toggle('feds-localnav--active'); - document.body.classList.toggle('disable-scroll'); const isActive = localNav.classList.contains('feds-localnav--active'); localNav.querySelector('.feds-localnav-title').setAttribute('aria-expanded', isActive); localNav.querySelector('.feds-localnav-title').setAttribute('daa-ll', `${title}_localNav|${isActive ? 'close' : 'open'}`); - if (isActive) disableMobileScroll(); - else enableMobileScroll(); }); localNav.querySelector('.feds-localnav-curtain').addEventListener('click', (e) => { trigger({ element: e.currentTarget, event: e, type: 'localNav-curtain' }); - document.body.classList.remove('disable-scroll'); - enableMobileScroll(); }); const promo = document.querySelector('.feds-promo-aside-wrapper'); if (promo) localNav.classList.add('has-promo'); @@ -814,14 +809,14 @@ class Gnav { const toggle = this.elements.mobileToggle; const isExpanded = this.isToggleExpanded(); if (!isExpanded && this.newMobileNav) { - disableMobileScroll(); const sections = document.querySelectorAll('header.new-nav .feds-nav > section.feds-navItem > button.feds-navLink'); animateInSequence(sections, 0.075); if (this.isLocalNav() && this.hasMegaMenu()) { + disableMobileScroll(); const section = sections[0]; queueMicrotask(() => section.click()); } - } else if (isExpanded && this.newMobileNav) { + } else if (isExpanded && this.newMobileNav && this.isLocalNav()) { enableMobileScroll(); } toggle?.setAttribute('aria-expanded', !isExpanded); @@ -1180,7 +1175,7 @@ class Gnav { const offset = this.block.classList.contains('has-promo') ? 'var(--feds-height-nav) - var(--global-height-navPromo)' : 'var(--feds-height-nav)'; - popup.style = `top: calc(${iOSy || y || 0}px - ${offset} - 1px`; + popup.style = `top: calc(${iOSy || y || 0}px - ${offset} - 2px`; } makeTabActive(popup); } else if (isDesktop.matches && this.newMobileNav && isSectionMenu) { diff --git a/libs/blocks/global-navigation/utilities/utilities.js b/libs/blocks/global-navigation/utilities/utilities.js index ab91e7a542..54e9c21603 100644 --- a/libs/blocks/global-navigation/utilities/utilities.js +++ b/libs/blocks/global-navigation/utilities/utilities.js @@ -313,12 +313,31 @@ export function closeAllDropdowns({ type } = {}) { if (isDesktop.matches) setCurtainState(false); } +export const disableMobileScroll = () => { + if (!PERSONALIZATION_TAGS.safari()) return; + if (document.body.classList.contains('disable-ios-scroll')) return; + if (document.body.style.top) return; + document.body.style.top = `-${window.scrollY}px`; + document.body.classList.add('disable-ios-scroll'); +}; + +export const enableMobileScroll = () => { + if (!PERSONALIZATION_TAGS.safari()) return; + if (!document.body.style.top) return; + const y = Math.abs(parseInt(document.body.style.top, 10)); + if (Number.isNaN(y)) return; + document.body.classList.remove('disable-ios-scroll'); + document.body.style.removeProperty('top'); + window.scroll(0, y || 0, { behavior: 'instant' }); +}; + export function trigger({ element, event, type } = {}) { if (event) event.preventDefault(); const isOpen = element?.getAttribute('aria-expanded') === 'true'; closeAllDropdowns({ type }); if (isOpen) return false; element.setAttribute('aria-expanded', 'true'); + if (!isDesktop.matches && type !== 'localNav-curtain') disableMobileScroll(); return true; } @@ -414,22 +433,6 @@ export const closeAllTabs = (tabs, tabpanels) => { tabs.forEach((t) => t.setAttribute('aria-selected', 'false')); }; -export const disableMobileScroll = () => { - if (!PERSONALIZATION_TAGS.safari()) return; - document.body.style.top = `-${window.scrollY}px`; - document.body.classList.add('disable-ios-scroll'); -}; - -export const enableMobileScroll = () => { - if (!PERSONALIZATION_TAGS.safari()) return; - if (!document.body.style.top) return; - const y = Math.abs(parseInt(document.body.style.top, 10)); - if (Number.isNaN(y)) return; - document.body.classList.remove('disable-ios-scroll'); - document.body.style.removeProperty('top'); - window.scroll(0, y || 0, { behavior: 'instant' }); -}; - export const transformTemplateToMobile = async (popup, item, localnav = false) => { const notMegaMenu = popup.parentElement.tagName === 'DIV'; const originalContent = popup.innerHTML; @@ -504,6 +507,7 @@ export const transformTemplateToMobile = async (popup, item, localnav = false) = }); popup.querySelector('.main-menu')?.addEventListener('click', (e) => { e.target.closest(selectors.activeDropdown).querySelector('button').focus(); + enableMobileScroll(); closeAllDropdowns(); }); const tabbuttons = popup.querySelectorAll('.tabs button'); diff --git a/test/blocks/global-navigation/global-navigation.test.js b/test/blocks/global-navigation/global-navigation.test.js index 7c633cca98..04f517ac7c 100644 --- a/test/blocks/global-navigation/global-navigation.test.js +++ b/test/blocks/global-navigation/global-navigation.test.js @@ -767,17 +767,22 @@ describe('global navigation', () => { headline.click(); expect(headline.getAttribute('aria-expanded')).to.equal('true'); }); - - it('adds the correct class when on Safari', async () => { + it('disables scroll for the popup but not for the localnav', async () => { Object.defineProperty(navigator, 'userAgent', { get: () => 'Safari' }); await createFullGlobalNavigation({ globalNavigation: gnavWithlocalNav, viewport: 'mobile' }); const localNavTitle = document.querySelector(selectors.localNavTitle); localNavTitle.click(); const localNav = document.querySelector(selectors.localNav); const curtain = localNav.querySelector('.feds-localnav-curtain'); - expect(document.body.classList.contains('disable-ios-scroll')).to.equal(true); + expect(document.body.classList.contains('disable-ios-scroll')).to.equal(false); curtain.click(); expect(document.body.classList.contains('disable-ios-scroll')).to.equal(false); + const toggle = document.querySelector(selectors.mainNavToggle); + toggle.click(); + expect(document.body.classList.contains('disable-ios-scroll')).to.equal(true); + const close = document.querySelector('.close-icon'); + close.click(); + expect(document.body.classList.contains('disable-ios-scroll')).to.equal(false); }); }); });