@ecl/site-header 5.0.0-alpha.2 → 5.0.0-alpha.21

package/site-header.js

@@ -53,6 +53,9 @@ export class SiteHeader {
       attachKeyListener = true,
       attachResizeListener = true,
       tabletBreakpoint = 768,
+      customActionToggleSelector = '[data-ecl-custom-action]',
+      customActionOverlaySelector = '[data-ecl-custom-action-overlay]',
+      customActionCloseSelector = '[data-ecl-custom-action-close]',
     } = {},
   ) {
     // Check element
@@ -81,6 +84,9 @@ export class SiteHeader {
     this.attachKeyListener = attachKeyListener;
     this.attachResizeListener = attachResizeListener;
     this.tabletBreakpoint = tabletBreakpoint;
+    this.customActionToggleSelector = customActionToggleSelector;
+    this.customActionOverlaySelector = customActionOverlaySelector;
+    this.customActionCloseSelector = customActionCloseSelector;
 
     // Private variables
     this.languageMaxColumnItems = 8;
@@ -98,6 +104,10 @@ export class SiteHeader {
     this.resizeTimer = null;
     this.direction = null;
     this.notificationContainer = null;
+    this.customActionToggle = null;
+    this.customActionOverlay = null;
+    this.customActionClose = null;
+    this.customActionFocusTrap = null;
 
     // Bind `this` for use in callbacks
     this.openOverlay = this.openOverlay.bind(this);
@@ -113,6 +123,12 @@ export class SiteHeader {
     this.handleResize = this.handleResize.bind(this);
     this.setLanguageListHeight = this.setLanguageListHeight.bind(this);
     this.handleNotificationClose = this.handleNotificationClose.bind(this);
+
+    this.openCustomAction = this.openCustomAction.bind(this);
+    this.closeCustomAction = this.closeCustomAction.bind(this);
+    this.toggleCustomAction = this.toggleCustomAction.bind(this);
+    this.handleKeyboardCustomAction =
+      this.handleKeyboardCustomAction.bind(this);
   }
 
   /**
@@ -154,10 +170,12 @@ export class SiteHeader {
     }
 
     // Create focus trap
-    this.focusTrap = createFocusTrap(this.languageListOverlay, {
-      onDeactivate: this.closeOverlay,
-      allowOutsideClick: true,
-    });
+    if (this.languageListOverlay) {
+      this.focusTrap = createFocusTrap(this.languageListOverlay, {
+        onDeactivate: this.closeOverlay,
+        allowOutsideClick: true,
+      });
+    }
 
     if (this.attachClickListener && this.languageLink) {
       this.languageLink.addEventListener('click', this.toggleOverlay);
@@ -188,6 +206,35 @@ export class SiteHeader {
       this.loginToggle.addEventListener('click', this.toggleLogin);
     }
 
+    // Custom action management
+    this.customActionToggle = queryOne(this.customActionToggleSelector);
+    this.customActionOverlay = queryOne(this.customActionOverlaySelector);
+    this.customActionClose = queryOne(this.customActionCloseSelector);
+
+    if (this.customActionOverlay) {
+      // Create a separate focus trap for the custom action overlay
+      this.customActionFocusTrap = createFocusTrap(this.customActionOverlay, {
+        onDeactivate: this.closeCustomAction,
+        allowOutsideClick: true,
+      });
+    }
+
+    if (this.attachClickListener && this.customActionToggle) {
+      this.customActionToggle.addEventListener(
+        'click',
+        this.toggleCustomAction,
+      );
+    }
+    if (this.attachClickListener && this.customActionClose) {
+      this.customActionClose.addEventListener('click', this.toggleCustomAction);
+    }
+    if (this.attachKeyListener && this.customActionToggle) {
+      this.customActionToggle.addEventListener(
+        'keydown',
+        this.handleKeyboardCustomAction,
+      );
+    }
+
     // Set ecl initialized attribute
     this.element.setAttribute('data-ecl-auto-initialized', 'true');
     ECL.components.set(this.element, this);
@@ -237,6 +284,28 @@ export class SiteHeader {
       this.loginToggle.removeEventListener('click', this.toggleLogin);
     }
 
+    if (this.attachClickListener && this.customActionToggle) {
+      this.customActionToggle.removeEventListener(
+        'click',
+        this.toggleCustomAction,
+      );
+    }
+    if (this.customActionFocusTrap) {
+      this.customActionFocusTrap.deactivate();
+    }
+    if (this.attachKeyListener && this.customActionToggle) {
+      this.customActionToggle.removeEventListener(
+        'keydown',
+        this.handleKeyboardCustomAction,
+      );
+    }
+    if (this.attachClickListener && this.customActionClose) {
+      this.customActionClose.removeEventListener(
+        'click',
+        this.toggleCustomAction,
+      );
+    }
+
     if (this.attachKeyListener) {
       document.removeEventListener('keyup', this.handleKeyboardGlobal);
     }
@@ -257,168 +326,148 @@ export class SiteHeader {
   }
 
   /**
-   * Update display of the modal language list overlay.
+   * Method repositions a popover overlay in the viewport.
+   * It also (optionally) handles language-list–specific logic such as columns.
+   *
+   * @param {HTMLElement} overlay The overlay element to be positioned
+   * @param {HTMLElement} toggle The toggle button/link that opens the overlay
+   * @param {String} arrowCssVar The CSS variable name for arrow positioning
    */
-  updateOverlay() {
-    // Check number of items and adapt display
-    let columnsEu = 1;
-    let columnsNonEu = 1;
-    if (this.languageListEu) {
-      // Get all Eu languages
-      const itemsEu = queryAll(
-        '.ecl-site-header__language-item',
-        this.languageListEu,
-      );
-
-      // Calculate number of columns
-      columnsEu = Math.ceil(itemsEu.length / this.languageMaxColumnItems);
+  updateOverlayPosition(
+    overlay,
+    toggle,
+    arrowCssVar = '--ecl-overlay-arrow-position',
+  ) {
+    if (!overlay || !toggle || !this.container) return;
 
-      // Apply column display
-      if (columnsEu > 1) {
-        this.languageListEu.classList.add(
-          `ecl-site-header__language-category--${columnsEu}-col`,
+    // If this overlay is the language overlay, handle columns (EU vs Non-EU items)
+    if (overlay === this.languageListOverlay) {
+      // Calculate columns for the EU language list
+      if (this.languageListEu) {
+        const itemsEu = queryAll(
+          '.ecl-site-header__language-item',
+          this.languageListEu,
+        );
+        const columnsEu = Math.ceil(
+          itemsEu.length / this.languageMaxColumnItems,
         );
+        if (columnsEu > 1) {
+          this.languageListEu.classList.add(
+            `ecl-site-header__language-category--${columnsEu}-col`,
+          );
+        }
       }
-    }
-    if (this.languageListNonEu) {
-      // Get all non-Eu languages
-      const itemsNonEu = queryAll(
-        '.ecl-site-header__language-item',
-        this.languageListNonEu,
-      );
-
-      // Calculate number of columns
-      columnsNonEu = Math.ceil(itemsNonEu.length / this.languageMaxColumnItems);
 
-      // Apply column display
-      if (columnsNonEu > 1) {
-        this.languageListNonEu.classList.add(
-          `ecl-site-header__language-category--${columnsNonEu}-col`,
+      // Calculate columns for the Non-EU language list
+      if (this.languageListNonEu) {
+        const itemsNonEu = queryAll(
+          '.ecl-site-header__language-item',
+          this.languageListNonEu,
+        );
+        const columnsNonEu = Math.ceil(
+          itemsNonEu.length / this.languageMaxColumnItems,
         );
+        if (columnsNonEu > 1) {
+          this.languageListNonEu.classList.add(
+            `ecl-site-header__language-category--${columnsNonEu}-col`,
+          );
+        }
       }
-    }
-
-    // Check total width, and change display if needed
-    if (this.languageListEu) {
-      this.languageListEu.parentNode.classList.remove(
-        'ecl-site-header__language-content--stack',
-      );
-    } else if (this.languageListNonEu) {
-      this.languageListNonEu.parentNode.classList.remove(
-        'ecl-site-header__language-content--stack',
-      );
-    }
-    let popoverRect = this.languageListOverlay.getBoundingClientRect();
-    const containerRect = this.container.getBoundingClientRect();
 
-    if (popoverRect.width > containerRect.width) {
-      // Stack elements
+      // Remove stacked classes first
       if (this.languageListEu) {
-        this.languageListEu.parentNode.classList.add(
+        this.languageListEu.parentNode.classList.remove(
           'ecl-site-header__language-content--stack',
         );
       } else if (this.languageListNonEu) {
-        this.languageListNonEu.parentNode.classList.add(
+        this.languageListNonEu.parentNode.classList.remove(
           'ecl-site-header__language-content--stack',
         );
       }
-
-      // Adapt column display
-      if (this.languageListNonEu) {
-        this.languageListNonEu.classList.remove(
-          `ecl-site-header__language-category--${columnsNonEu}-col`,
-        );
-        this.languageListNonEu.classList.add(
-          `ecl-site-header__language-category--${Math.max(
-            columnsEu,
-            columnsNonEu,
-          )}-col`,
-        );
-      }
     }
 
-    // Check available space
-    this.languageListOverlay.classList.remove(
+    // Clear leftover classes/inline styles
+    overlay.classList.remove(
       'ecl-site-header__language-container--push-right',
       'ecl-site-header__language-container--push-left',
-    );
-    this.languageListOverlay.classList.remove(
       'ecl-site-header__language-container--full',
     );
-    this.languageListOverlay.style.removeProperty(
-      '--ecl-language-arrow-position',
-    );
-    this.languageListOverlay.style.removeProperty('right');
-    this.languageListOverlay.style.removeProperty('left');
+    overlay.style.removeProperty(arrowCssVar);
+    overlay.style.removeProperty('right');
+    overlay.style.removeProperty('left');
 
-    popoverRect = this.languageListOverlay.getBoundingClientRect();
+    // Calculate bounding rects
+    let popoverRect = overlay.getBoundingClientRect();
+    const containerRect = this.container.getBoundingClientRect();
     const screenWidth = window.innerWidth;
-    const linkRect = this.languageLink.getBoundingClientRect();
-    // Popover too large
-    if (this.direction === 'ltr' && popoverRect.right > screenWidth) {
-      // Push the popover to the right
-      this.languageListOverlay.classList.add(
-        'ecl-site-header__language-container--push-right',
-      );
-      this.languageListOverlay.style.setProperty(
-        'right',
-        `calc(-${containerRect.right}px + ${linkRect.right}px)`,
-      );
-      // Adapt arrow position
-      const arrowPosition =
-        containerRect.right - linkRect.right + linkRect.width / 2;
-      this.languageListOverlay.style.setProperty(
-        '--ecl-language-arrow-position',
-        `calc(${arrowPosition}px - ${this.arrowSize})`,
-      );
-    } else if (this.direction === 'rtl' && popoverRect.left < 0) {
-      this.languageListOverlay.classList.add(
-        'ecl-site-header__language-container--push-left',
-      );
-      this.languageListOverlay.style.setProperty(
-        'left',
-        `calc(-${linkRect.left}px + ${containerRect.left}px)`,
-      );
-      // Adapt arrow position
-      const arrowPosition =
-        linkRect.right - containerRect.left - linkRect.width / 2;
-      this.languageListOverlay.style.setProperty(
-        '--ecl-language-arrow-position',
-        `${arrowPosition}px`,
-      );
+    const toggleRect = toggle.getBoundingClientRect();
+
+    // If this is the language overlay, handle “too wide” scenario
+    if (overlay === this.languageListOverlay) {
+      if (popoverRect.width > containerRect.width) {
+        // Stack elements
+        if (this.languageListEu) {
+          this.languageListEu.parentNode.classList.add(
+            'ecl-site-header__language-content--stack',
+          );
+        } else if (this.languageListNonEu) {
+          this.languageListNonEu.parentNode.classList.add(
+            'ecl-site-header__language-content--stack',
+          );
+        }
+      }
     }
 
-    // Mobile popover (full width)
+    // Mobile: full width if below tablet breakpoint
     if (window.innerWidth < this.tabletBreakpoint) {
-      // Push the popover to the right
-      this.languageListOverlay.classList.add(
-        'ecl-site-header__language-container--full',
-      );
-      this.languageListOverlay.style.removeProperty('right');
-
-      // Adapt arrow position
+      overlay.classList.add('ecl-site-header__language-container--full');
+      // Recompute popoverRect after applying the class
+      popoverRect = overlay.getBoundingClientRect();
+      // Position arrow
       const arrowPosition =
-        popoverRect.right - linkRect.right + linkRect.width / 2;
-      this.languageListOverlay.style.setProperty(
-        '--ecl-language-arrow-position',
+        popoverRect.right - toggleRect.right + toggleRect.width / 2;
+      overlay.style.setProperty(
+        arrowCssVar,
         `calc(${arrowPosition}px - ${this.arrowSize})`,
       );
+      return;
     }
 
-    if (
-      this.loginBox &&
-      this.loginBox.classList.contains('ecl-site-header__login-box--active')
-    ) {
-      this.setLoginArrow();
-    }
-    if (
-      this.searchForm &&
-      this.searchForm.classList.contains('ecl-site-header__search--active')
-    ) {
-      this.setSearchArrow();
+    // If popover extends beyond right edge in LTR
+    if (this.direction === 'ltr' && popoverRect.right > screenWidth) {
+      overlay.classList.add('ecl-site-header__language-container--push-right');
+      overlay.style.setProperty(
+        'right',
+        `calc(-${containerRect.right}px + ${toggleRect.right}px)`,
+      );
+      const arrowPos =
+        containerRect.right - toggleRect.right + toggleRect.width / 2;
+      overlay.style.setProperty(
+        arrowCssVar,
+        `calc(${arrowPos}px - ${this.arrowSize})`,
+      );
+    } else if (this.direction === 'rtl' && popoverRect.left < 0) {
+      // If popover extends beyond left edge in RTL
+      overlay.classList.add('ecl-site-header__language-container--push-left');
+      overlay.style.setProperty(
+        'left',
+        `calc(-${toggleRect.left}px + ${containerRect.left}px)`,
+      );
+      const arrowPos =
+        toggleRect.right - containerRect.left - toggleRect.width / 2;
+      overlay.style.setProperty(arrowCssVar, `${arrowPos}px`);
     }
   }
 
+  /**
+   * Wrapper: Update display of the modal language list overlay
+   * (Calls the new `updateOverlayPosition` for the language popover).
+   */
+  updateOverlay() {
+    if (!this.languageListOverlay || !this.languageLink) return;
+    this.updateOverlayPosition(this.languageListOverlay, this.languageLink);
+  }
+
   /**
    * Removes the containers of the notification element
    */
@@ -476,50 +525,13 @@ export class SiteHeader {
 
     if (this.languageListOverlay.hasAttribute('hidden')) {
       this.openOverlay();
-      this.updateOverlay();
+      this.updateOverlayPosition(this.languageListOverlay, this.languageLink);
       this.focusTrap.activate();
     } else {
       this.focusTrap.deactivate();
     }
   }
 
-  /**
-   * Trigger events on resize
-   * Uses a debounce, for performance
-   */
-  handleResize() {
-    if (
-      !this.languageListOverlay ||
-      this.languageListOverlay.hasAttribute('hidden')
-    )
-      return;
-    if (
-      (this.loginBox &&
-        this.loginBox.classList.contains(
-          'ecl-site-header__login-box--active',
-        )) ||
-      (this.searchForm &&
-        this.searchForm.classList.contains('ecl-site-header__search--active'))
-    ) {
-      clearTimeout(this.resizeTimer);
-      this.resizeTimer = setTimeout(() => {
-        this.updateOverlay();
-      }, 200);
-    }
-  }
-
-  /**
-   * Handles keyboard events specific to the language list.
-   *
-   * @param {Event} e
-   */
-  handleKeyboardLanguage(e) {
-    // Open the menu with space and enter
-    if (e.keyCode === 32 || e.key === 'Enter') {
-      this.toggleOverlay(e);
-    }
-  }
-
   /**
    * Toggles the search form.
    *
@@ -561,7 +573,9 @@ export class SiteHeader {
     if (loginRect.x === 0) {
       const loginToggleRect = this.loginToggle.getBoundingClientRect();
       const arrowPosition =
-        window.innerWidth - loginToggleRect.right + loginToggleRect.width / 2;
+        document.documentElement.clientWidth -
+        loginToggleRect.right +
+        loginToggleRect.width / 2;
 
       this.loginBox.style.setProperty(
         '--ecl-login-arrow-position',
@@ -575,7 +589,9 @@ export class SiteHeader {
     if (searchRect.x === 0) {
       const searchToggleRect = this.searchToggle.getBoundingClientRect();
       const arrowPosition =
-        window.innerWidth - searchToggleRect.right + searchToggleRect.width / 2;
+        document.documentElement.clientWidth -
+        searchToggleRect.right +
+        searchToggleRect.width / 2;
 
       this.searchForm.style.setProperty(
         '--ecl-search-arrow-position',
@@ -619,6 +635,18 @@ export class SiteHeader {
     }
   }
 
+  /**
+   * Handles keyboard events specific to the language list.
+   *
+   * @param {Event} e
+   */
+  handleKeyboardLanguage(e) {
+    // Open the menu with space and enter
+    if (e.keyCode === 32 || e.key === 'Enter') {
+      this.toggleOverlay(e);
+    }
+  }
+
   /**
    * Handles global keyboard events, triggered outside of the site header.
    *
@@ -633,6 +661,12 @@ export class SiteHeader {
       if (listExpanded === 'true') {
         this.toggleOverlay(e);
       }
+      if (
+        this.customActionToggle &&
+        this.customActionToggle.getAttribute('aria-expanded') === 'true'
+      ) {
+        this.toggleCustomAction(e);
+      }
     }
   }
 
@@ -677,6 +711,126 @@ export class SiteHeader {
         this.toggleSearch(e);
       }
     }
+
+    // Custom action
+    const customActionExpanded =
+      this.customActionToggle &&
+      this.customActionToggle.getAttribute('aria-expanded') === 'true';
+    if (customActionExpanded) {
+      if (
+        !this.customActionOverlay.contains(e.target) &&
+        !this.customActionToggle.contains(e.target)
+      ) {
+        this.toggleCustomAction(e);
+      }
+    }
+  }
+
+  /**
+   * Trigger events on resize
+   * Uses a debounce, for performance
+   */
+  handleResize() {
+    if (this.resizeTimer) {
+      clearTimeout(this.resizeTimer);
+    }
+    this.resizeTimer = setTimeout(() => {
+      // If language overlay is open, reposition
+      if (
+        this.languageListOverlay &&
+        !this.languageListOverlay.hasAttribute('hidden')
+      ) {
+        this.updateOverlayPosition(this.languageListOverlay, this.languageLink);
+      }
+
+      // If custom action overlay is open, reposition
+      if (
+        this.customActionOverlay &&
+        !this.customActionOverlay.hasAttribute('hidden')
+      ) {
+        this.updateOverlayPosition(
+          this.customActionOverlay,
+          this.customActionToggle,
+          '--ecl-overlay-arrow-position',
+        );
+      }
+
+      // If the login box is open, re-position arrow
+      if (
+        this.loginBox &&
+        this.loginBox.classList.contains('ecl-site-header__login-box--active')
+      ) {
+        this.setLoginArrow();
+      }
+
+      // If the search box is open, re-position arrow
+      if (
+        this.searchForm &&
+        this.searchForm.classList.contains('ecl-site-header__search--active')
+      ) {
+        this.setSearchArrow();
+      }
+    }, 200);
+  }
+
+  /**
+   * Shows the custom action overlay.
+   */
+  openCustomAction() {
+    if (!this.customActionOverlay) return;
+    this.customActionOverlay.hidden = false;
+    this.customActionOverlay.setAttribute('aria-modal', 'true');
+    this.customActionToggle.setAttribute('aria-expanded', 'true');
+  }
+
+  /**
+   * Hides the custom action overlay.
+   */
+  closeCustomAction() {
+    if (!this.customActionOverlay) return;
+    this.customActionOverlay.hidden = true;
+    this.customActionOverlay.removeAttribute('aria-modal');
+    this.customActionToggle.setAttribute('aria-expanded', 'false');
+  }
+
+  /**
+   * Toggles the custom action overlay.
+   *
+   * @param {Event} e
+   */
+  toggleCustomAction(e) {
+    if (!this.customActionOverlay || !this.customActionFocusTrap) return;
+
+    e.preventDefault();
+
+    // Check current state
+    const isHidden = this.customActionOverlay.hasAttribute('hidden');
+
+    if (isHidden) {
+      this.openCustomAction();
+      // Reuse the same overlay positioning logic,
+      // but use a different CSS arrow var for custom action if you like.
+      this.updateOverlayPosition(
+        this.customActionOverlay,
+        this.customActionToggle,
+        '--ecl-overlay-arrow-position',
+      );
+      this.customActionFocusTrap.activate();
+    } else {
+      this.customActionFocusTrap.deactivate();
+    }
+  }
+
+  /**
+   * Handles keyboard events specific to the custom action toggle.
+   *
+   * @param {Event} e
+   */
+  handleKeyboardCustomAction(e) {
+    // Open the custom action with space and enter
+    if (e.keyCode === 32 || e.key === 'Enter') {
+      this.toggleCustomAction(e);
+    }
   }
 }