From 43338349ad1cf802f9f160d805bbc711a43e36ab Mon Sep 17 00:00:00 2001 From: Prince Patel Date: Wed, 4 Jun 2025 11:04:57 +0530 Subject: [PATCH 01/12] Fix is a gap at the bottom of the Megamenu --- libs/blocks/global-navigation/global-navigation.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/libs/blocks/global-navigation/global-navigation.js b/libs/blocks/global-navigation/global-navigation.js index 6fcd200a71..f2142b2180 100644 --- a/libs/blocks/global-navigation/global-navigation.js +++ b/libs/blocks/global-navigation/global-navigation.js @@ -1221,6 +1221,8 @@ class Gnav { const navOffset = hasPromo ? `var(--feds-height-nav) - ${promoHeight}px` : 'var(--feds-height-nav)'; popup.removeAttribute('style'); popup.style.top = `calc(${yOffset}px - ${navOffset} - 2px)`; + popup.style.bottom = '-2px'; + popup.style.height = 'initial'; const { isPresent, isSticky, height } = getBranchBannerInfo(); if (isPresent) { const delta = yOffset - height; From 72848a6795870b3c710b41a9ea6099d2a885c603 Mon Sep 17 00:00:00 2001 From: Prince Patel Date: Mon, 9 Jun 2025 14:50:40 +0530 Subject: [PATCH 02/12] adding styles from css --- libs/blocks/global-navigation/global-navigation.css | 2 +- libs/blocks/global-navigation/global-navigation.js | 2 -- 2 files changed, 1 insertion(+), 3 deletions(-) diff --git a/libs/blocks/global-navigation/global-navigation.css b/libs/blocks/global-navigation/global-navigation.css index 65c9301edf..312409fe5f 100644 --- a/libs/blocks/global-navigation/global-navigation.css +++ b/libs/blocks/global-navigation/global-navigation.css @@ -915,7 +915,7 @@ header.new-nav .feds-nav > section.feds-navItem > .feds-popup { top: calc(-1 * var(--feds-height-nav)); visibility: hidden; width: 100%; - height: calc(var(--feds-height-nav) + 100%); + height: calc(var(--feds-height-nav) + 100% + 2px); background-color: var(--feds-background-nav); transition: translate 0.4s ease-out, opacity 0.2s ease, visibility 0s linear 0.5s; translate: 300vw 0; diff --git a/libs/blocks/global-navigation/global-navigation.js b/libs/blocks/global-navigation/global-navigation.js index f2142b2180..6fcd200a71 100644 --- a/libs/blocks/global-navigation/global-navigation.js +++ b/libs/blocks/global-navigation/global-navigation.js @@ -1221,8 +1221,6 @@ class Gnav { const navOffset = hasPromo ? `var(--feds-height-nav) - ${promoHeight}px` : 'var(--feds-height-nav)'; popup.removeAttribute('style'); popup.style.top = `calc(${yOffset}px - ${navOffset} - 2px)`; - popup.style.bottom = '-2px'; - popup.style.height = 'initial'; const { isPresent, isSticky, height } = getBranchBannerInfo(); if (isPresent) { const delta = yOffset - height; From fdcb77dde507349ddc58340f09b3dfe6a9e4a9c9 Mon Sep 17 00:00:00 2001 From: Prince Patel Date: Fri, 13 Jun 2025 14:57:48 +0530 Subject: [PATCH 03/12] bottom of mega menu scrolling up on A.com & AH --- .../global-navigation/utilities/utilities.js | 35 ++++++++++--------- 1 file changed, 19 insertions(+), 16 deletions(-) diff --git a/libs/blocks/global-navigation/utilities/utilities.js b/libs/blocks/global-navigation/utilities/utilities.js index ef6444fca1..d10b897f22 100644 --- a/libs/blocks/global-navigation/utilities/utilities.js +++ b/libs/blocks/global-navigation/utilities/utilities.js @@ -764,23 +764,26 @@ export const [branchBannerLoadCheck, getBranchBannerInfo] = (() => { if (mutation.type === 'childList') { mutation.addedNodes.forEach((node) => { // Check if the added node has the ID 'branch-banner-iframe' - if (node.id === 'branch-banner-iframe') { - branchBannerInfo.isPresent = true; - // The element is added, now check its height and sticky status - // Check if the element has a sticky position - branchBannerInfo.isSticky = window.getComputedStyle(node).position === 'fixed'; - branchBannerInfo.height = node.offsetHeight; // Get the height of the element - if (branchBannerInfo.isSticky) { - // Adjust the top position of the lnav to account for the branch banner height - const navElem = document.querySelector(isLocalNav() ? '.feds-localnav' : 'header'); - navElem.style.top = `${branchBannerInfo.height}px`; - } else { - // Add a class to the body to indicate the presence of a non-sticky branch banner - document.body.classList.add('branch-banner-inline'); + setTimeout(() => { + if (node.id === 'branch-banner-iframe') { + branchBannerInfo.isPresent = true; + // The element is added, now check its height and sticky status + // Check if the element has a sticky position + branchBannerInfo.isSticky = window.getComputedStyle(node).position === 'fixed'; + branchBannerInfo.height = node.offsetHeight; // Get the height of the element + if (branchBannerInfo.isSticky) { + // Adjust the top position of the lnav to account for the branch banner height + const navElem = document.querySelector(isLocalNav() ? '.feds-localnav' : 'header'); + navElem.style.top = `${branchBannerInfo.height}px`; + } else { + /* Add a class to the body to indicate the presence of a non-sticky + branch banner */ + document.body.classList.add('branch-banner-inline'); + } + // Update the popup position when the branch banner is added + updatePopupPosition(); } - // Update the popup position when the branch banner is added - updatePopupPosition(); - } + }, 50); }); mutation.removedNodes.forEach((node) => { From 84c1ef709154fa8dd06331724cca6e46ff68db62 Mon Sep 17 00:00:00 2001 From: Prince Patel Date: Tue, 17 Jun 2025 10:44:23 +0530 Subject: [PATCH 04/12] fix animation for feds cta in mobile gnav --- libs/blocks/global-navigation/global-navigation.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/libs/blocks/global-navigation/global-navigation.css b/libs/blocks/global-navigation/global-navigation.css index fa5e96cdec..696ff950fc 100644 --- a/libs/blocks/global-navigation/global-navigation.css +++ b/libs/blocks/global-navigation/global-navigation.css @@ -1083,7 +1083,8 @@ header.new-nav .feds-nav > section.feds-navItem > .feds-popup .tab-content .feds } header.new-nav .feds-nav > section.feds-navItem > .feds-popup .tab-content a.feds-navLink, -header.new-nav .feds-nav > section.feds-navItem > .feds-popup .tab-content .feds-navLink--header { +header.new-nav .feds-nav > section.feds-navItem > .feds-popup .tab-content .feds-navLink--header, +header.new-nav .feds-nav > section.feds-navItem > .feds-popup .tab-content > div[role = "tabpanel"] > a.feds-cta { translate: 0 12px; opacity: 0; animation: slideup 0.6s ease, fadein 0.8s ease; From 428b4776ca814ef457197d64ad218690c45ab344 Mon Sep 17 00:00:00 2001 From: Prince Patel Date: Tue, 17 Jun 2025 10:45:38 +0530 Subject: [PATCH 05/12] undo --- libs/blocks/global-navigation/global-navigation.css | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/libs/blocks/global-navigation/global-navigation.css b/libs/blocks/global-navigation/global-navigation.css index 696ff950fc..fa5e96cdec 100644 --- a/libs/blocks/global-navigation/global-navigation.css +++ b/libs/blocks/global-navigation/global-navigation.css @@ -1083,8 +1083,7 @@ header.new-nav .feds-nav > section.feds-navItem > .feds-popup .tab-content .feds } header.new-nav .feds-nav > section.feds-navItem > .feds-popup .tab-content a.feds-navLink, -header.new-nav .feds-nav > section.feds-navItem > .feds-popup .tab-content .feds-navLink--header, -header.new-nav .feds-nav > section.feds-navItem > .feds-popup .tab-content > div[role = "tabpanel"] > a.feds-cta { +header.new-nav .feds-nav > section.feds-navItem > .feds-popup .tab-content .feds-navLink--header { translate: 0 12px; opacity: 0; animation: slideup 0.6s ease, fadein 0.8s ease; From 1c46dc6cfaf0e2d24c8f3a6fb2a223976f17a4fe Mon Sep 17 00:00:00 2001 From: Prince Patel Date: Tue, 17 Jun 2025 10:46:49 +0530 Subject: [PATCH 06/12] Shift-tab focus does not function for breadcrumbs on Tablet Mobile devices. --- libs/blocks/global-navigation/utilities/keyboard/utils.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/libs/blocks/global-navigation/utilities/keyboard/utils.js b/libs/blocks/global-navigation/utilities/keyboard/utils.js index 46225b90d5..45fec67041 100644 --- a/libs/blocks/global-navigation/utilities/keyboard/utils.js +++ b/libs/blocks/global-navigation/utilities/keyboard/utils.js @@ -18,7 +18,7 @@ const selectors = { logo: '.feds-logo', profileMenu: '.feds-profile-menu', profile: '.feds-profile', - breadCrumbItems: '.feds-breadcrumbs li > a', + breadCrumbItems: '.feds-breadcrumbs li:not(:nth-last-child(n+3):not(:first-child)) > a', expandedPopupTrigger: '.feds-navLink[aria-expanded = "true"]', promoLink: '.feds-promo-link', imagePromo: 'a.feds-promo-image', From 0eef7ba264716185a997b1087505bcc76efea7c9 Mon Sep 17 00:00:00 2001 From: Prince Patel Date: Tue, 17 Jun 2025 10:47:54 +0530 Subject: [PATCH 07/12] undo --- libs/blocks/global-navigation/utilities/keyboard/utils.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/libs/blocks/global-navigation/utilities/keyboard/utils.js b/libs/blocks/global-navigation/utilities/keyboard/utils.js index 45fec67041..46225b90d5 100644 --- a/libs/blocks/global-navigation/utilities/keyboard/utils.js +++ b/libs/blocks/global-navigation/utilities/keyboard/utils.js @@ -18,7 +18,7 @@ const selectors = { logo: '.feds-logo', profileMenu: '.feds-profile-menu', profile: '.feds-profile', - breadCrumbItems: '.feds-breadcrumbs li:not(:nth-last-child(n+3):not(:first-child)) > a', + breadCrumbItems: '.feds-breadcrumbs li > a', expandedPopupTrigger: '.feds-navLink[aria-expanded = "true"]', promoLink: '.feds-promo-link', imagePromo: 'a.feds-promo-image', From 31cb7f0d4d94d2985598ad0675465b4ecb3ce403 Mon Sep 17 00:00:00 2001 From: Prince Patel Date: Mon, 23 Jun 2025 16:24:28 +0530 Subject: [PATCH 08/12] bottom of mega menu scrolling up on A.com & AH --- libs/blocks/global-navigation/utilities/utilities.js | 1 + 1 file changed, 1 insertion(+) diff --git a/libs/blocks/global-navigation/utilities/utilities.js b/libs/blocks/global-navigation/utilities/utilities.js index a69fc8624e..706449949b 100644 --- a/libs/blocks/global-navigation/utilities/utilities.js +++ b/libs/blocks/global-navigation/utilities/utilities.js @@ -656,6 +656,7 @@ export const transformTemplateToMobile = async ({ popup, item, localnav = false, }); tabbuttons.forEach((tab, i) => { + tab.addEventListener('pointerdown', (event) => event.preventDefault()); tab.addEventListener('click', tabbuttonClickCallbacks[i]); }); From 46f7a06cf0f8a02fb36d7ffa84a4b3383dd68630 Mon Sep 17 00:00:00 2001 From: Prince Patel Date: Mon, 30 Jun 2025 10:54:37 +0530 Subject: [PATCH 09/12] add comments --- libs/blocks/global-navigation/utilities/utilities.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/libs/blocks/global-navigation/utilities/utilities.js b/libs/blocks/global-navigation/utilities/utilities.js index 0f2addfbb3..4a9b67df24 100644 --- a/libs/blocks/global-navigation/utilities/utilities.js +++ b/libs/blocks/global-navigation/utilities/utilities.js @@ -657,6 +657,8 @@ export const transformTemplateToMobile = async ({ popup, item, localnav = false, }); tabbuttons.forEach((tab, i) => { + // pinterdown prevents the default action of the button, which is to scroll the window. + // This is needed to prevent the page from jumping when the tab is clicked. tab.addEventListener('pointerdown', (event) => event.preventDefault()); tab.addEventListener('click', tabbuttonClickCallbacks[i]); }); @@ -831,6 +833,8 @@ export const [branchBannerLoadCheck, getBranchBannerInfo] = (() => { updatePopupPosition(); } }, 50); + /* 50ms delay to ensure the node is fully rendered with styles before + checking its properties */ }); mutation.removedNodes.forEach((node) => { From e490425c74671374ea29229a80110951e87bdd8d Mon Sep 17 00:00:00 2001 From: Prince Patel Date: Tue, 1 Jul 2025 10:28:23 +0530 Subject: [PATCH 10/12] landscape mode the overlapping of button with menu items --- libs/blocks/global-navigation/global-navigation.css | 1 + 1 file changed, 1 insertion(+) diff --git a/libs/blocks/global-navigation/global-navigation.css b/libs/blocks/global-navigation/global-navigation.css index 373518a176..289bf63dfd 100644 --- a/libs/blocks/global-navigation/global-navigation.css +++ b/libs/blocks/global-navigation/global-navigation.css @@ -1065,6 +1065,7 @@ header.new-nav .feds-nav > section.feds-navItem > .feds-popup .tabs button[aria- } header.new-nav .feds-nav > section.feds-navItem > .feds-popup .tab-content { + min-height: 0; background-color: var(--feds-backgroundColor-tabContent-v2); padding: 10px 13px 25px; display: flex; From 86d14a4775cbc3447a54f1e837d73f6d0f4dc8a3 Mon Sep 17 00:00:00 2001 From: Prince Patel Date: Tue, 1 Jul 2025 22:29:05 +0530 Subject: [PATCH 11/12] update the popup position when screen orientation changes --- libs/blocks/global-navigation/utilities/utilities.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/libs/blocks/global-navigation/utilities/utilities.js b/libs/blocks/global-navigation/utilities/utilities.js index 4a9b67df24..839f2afc13 100644 --- a/libs/blocks/global-navigation/utilities/utilities.js +++ b/libs/blocks/global-navigation/utilities/utilities.js @@ -807,6 +807,9 @@ export const [branchBannerLoadCheck, getBranchBannerInfo] = (() => { }; return [ (updatePopupPosition) => { + // update the popup position when screen orientation changes + window.addEventListener('orientationchange', () => updatePopupPosition()); + // Create a MutationObserver instance to monitor the body for new child elements const observer = new MutationObserver((mutationsList) => { mutationsList.forEach((mutation) => { From 8100a9c9c390b04792d071fdc2c6ca4367497e83 Mon Sep 17 00:00:00 2001 From: Prince Patel Date: Wed, 2 Jul 2025 10:42:12 +0530 Subject: [PATCH 12/12] undo --- libs/blocks/global-navigation/utilities/utilities.js | 3 --- 1 file changed, 3 deletions(-) diff --git a/libs/blocks/global-navigation/utilities/utilities.js b/libs/blocks/global-navigation/utilities/utilities.js index 839f2afc13..4a9b67df24 100644 --- a/libs/blocks/global-navigation/utilities/utilities.js +++ b/libs/blocks/global-navigation/utilities/utilities.js @@ -807,9 +807,6 @@ export const [branchBannerLoadCheck, getBranchBannerInfo] = (() => { }; return [ (updatePopupPosition) => { - // update the popup position when screen orientation changes - window.addEventListener('orientationchange', () => updatePopupPosition()); - // Create a MutationObserver instance to monitor the body for new child elements const observer = new MutationObserver((mutationsList) => { mutationsList.forEach((mutation) => {