[MWPW-157924] - Added functionality to disable Active Element Detecti…

…on (#2892) Added functionality to disable Active Element Detection
adobecom · Sep 19, 2024 · e3844f2 · e3844f2
1 parent 54c3cc0
commit e3844f2
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 4 deletions.
diff --git 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
@@ -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,14 +257,24 @@ 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;
 
   return [
     () => 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
@@ -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`<meta name="gnav-source" content="https://adobe.com/federal${customPath}#_noActiveItem">`;
+      document.head.append(gnavMeta);
+      document.body.replaceChildren(toFragment`<header class="global-navigation"></header>`);
+      await initGnav(document.body.querySelector('header'));
+      const isActiveElement = !!document.querySelector('.global-navigation .feds-navItem--active');
+      expect(isActiveElement).to.be.false;
+    });
   });
 
   describe('Dynamic nav', () => {