diff --git a/libs/blocks/global-navigation/global-navigation.js b/libs/blocks/global-navigation/global-navigation.js index bd21c226ae..f4c602bf86 100644 --- a/libs/blocks/global-navigation/global-navigation.js +++ b/libs/blocks/global-navigation/global-navigation.js @@ -36,6 +36,8 @@ import { addMepHighlightAndTargetId, isDarkMode, darkIcons, + setDisableAEDState, + getDisableAEDState, } from './utilities/utilities.js'; import { replaceKey, replaceKeyArray } from '../../features/placeholders.js'; @@ -837,8 +839,9 @@ class Gnav { if (!hasActiveLink()) { const sections = this.elements.mainNav.querySelectorAll('.feds-navItem--section'); + const disableAED = getDisableAEDState(); - if (sections.length === 1) { + if (!disableAED && sections.length === 1) { sections[0].classList.add(selectors.activeNavItem.slice(1)); setActiveLink(true); } @@ -1024,7 +1027,11 @@ const getSource = async () => { export default async function init(block) { try { const { mep } = getConfig(); - const url = await getSource(); + const sourceUrl = await getSource(); + const [url, hash = ''] = sourceUrl.split('#'); + if (hash === '_noActiveItem') { + setDisableAEDState(); + } const content = await fetchAndProcessPlainHtml({ url }); if (!content) return null; const gnav = new Gnav({ diff --git a/libs/blocks/global-navigation/utilities/utilities.js b/libs/blocks/global-navigation/utilities/utilities.js index 3c1e9b7ee6..5a663dd70c 100644 --- a/libs/blocks/global-navigation/utilities/utilities.js +++ b/libs/blocks/global-navigation/utilities/utilities.js @@ -133,7 +133,7 @@ export function getAnalyticsValue(str, index) { export function getExperienceName() { const experiencePath = getMetadata('gnav-source'); - const explicitExperience = experiencePath?.split('/').pop(); + const explicitExperience = experiencePath?.split('#')[0]?.split('/').pop(); if (explicitExperience?.length && explicitExperience !== 'gnav') return explicitExperience; @@ -257,6 +257,15 @@ export function setActiveDropdown(elem) { }); } +// Disable AED(Active Element Detection) +export const [setDisableAEDState, getDisableAEDState] = (() => { + let disableAED = false; + return [ + () => { disableAED = true; }, + () => disableAED, + ]; +})(); + export const [hasActiveLink, setActiveLink, getActiveLink] = (() => { let activeLinkFound; @@ -264,7 +273,8 @@ export const [hasActiveLink, setActiveLink, getActiveLink] = (() => { () => activeLinkFound, (val) => { activeLinkFound = !!val; }, (area) => { - if (hasActiveLink() || !(area instanceof HTMLElement)) return null; + const disableAED = getDisableAEDState(); + if (disableAED || hasActiveLink() || !(area instanceof HTMLElement)) return null; const { origin, pathname } = window.location; const url = `${origin}${pathname}`; const activeLink = [ diff --git a/test/blocks/global-navigation/global-navigation.test.js b/test/blocks/global-navigation/global-navigation.test.js index b260ee3f21..bcc2e4b675 100644 --- a/test/blocks/global-navigation/global-navigation.test.js +++ b/test/blocks/global-navigation/global-navigation.test.js @@ -557,6 +557,15 @@ describe('global navigation', () => { fetchStub.calledOnceWith('http://localhost:2000/gnav.plain.html'), ).to.be.true; }); + + it('disable AED(Active Element Detetction) if gnav-souce used with hash "#_noActiveItem" modifier', async () => { + const gnavMeta = toFragment``; + document.head.append(gnavMeta); + document.body.replaceChildren(toFragment``); + await initGnav(document.body.querySelector('header')); + const isActiveElement = !!document.querySelector('.global-navigation .feds-navItem--active'); + expect(isActiveElement).to.be.false; + }); }); describe('Dynamic nav', () => {