fix(components): fix post-header lifecycle hooks and event bindings (#…

…4817) Co-authored-by: Philipp Gfeller <philipp.gfeller@post.ch>
swisspost · Feb 26, 2025 · e725d61 · e725d61
1 parent e6bb0d9
commit e725d61
Show file tree

Hide file tree

Showing 7 changed files with 147 additions and 94 deletions.
diff --git a/.changeset/rude-owls-tap.md b/.changeset/rude-owls-tap.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-components': patch
+---
+
+Removed console.logs out of the post-header component.
diff --git a/.changeset/spicy-suns-sort.md b/.changeset/spicy-suns-sort.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-components': patch
+---
+
+Fixed post-header component lifecycle hooks and event bindings.
diff --git a/packages/components/src/components.d.ts b/packages/components/src/components.d.ts
@@ -196,7 +196,7 @@ export namespace Components {
         /**
           * Toggles the mobile navigation.
          */
-        "toggleMobileMenu": () => Promise<void>;
+        "toggleMobileMenu": (force?: boolean) => Promise<void>;
     }
     /**
      * @class PostIcon - representing a stencil component

diff --git a/packages/components/src/components/post-header/post-header.tsx b/packages/components/src/components/post-header/post-header.tsx
@@ -76,11 +76,11 @@ export class PostHeader {
     if (isMobileMenuExtended) {
       scrollParent.setAttribute('data-is-post-header-scroll-parent', '');
       scrollParent.style.overflow = 'hidden';
-      this.host.addEventListener('keydown', this.keyboardHandler.bind(this));
+      this.host.addEventListener('keydown', this.keyboardHandler);
     } else {
       scrollParent.style.overflow = '';
       scrollParent.removeAttribute('data-is-post-header-scroll-parent');
-      this.host.removeEventListener('keydown', this.keyboardHandler.bind(this));
+      this.host.removeEventListener('keydown', this.keyboardHandler);
     }
   }
 
@@ -89,78 +89,69 @@ export class PostHeader {
    */
   @Event() postUpdateDevice: EventEmitter<DEVICE_SIZE>;
 
-  connectedCallback() {
-    const scrollParent = this.scrollParent;
-
-    scrollParent.style.overflow = '';
-    scrollParent.removeAttribute('data-is-post-header-scroll-parent');
-    console.log(
-      'disconnectedCallback',
-      this.mobileMenuExtended,
-      this.scrollParent,
-      this.scrollParent.style.overflow,
-      this.scrollParent.hasAttribute('data-is-post-header-scroll-parent'),
-    );
+  constructor() {
+    this.handleScrollEvent = this.handleScrollEvent.bind(this);
+    this.updateScrollParentHeight = this.updateScrollParentHeight.bind(this);
+    this.updateLocalHeaderHeight = this.updateLocalHeaderHeight.bind(this);
+    this.megedropdownStateHandler = this.megedropdownStateHandler.bind(this);
+    this.keyboardHandler = this.keyboardHandler.bind(this);
+    this.handleLinkClick = this.handleLinkClick.bind(this);
   }
 
-  componentWillRender() {
+  connectedCallback() {
     window.addEventListener('resize', this.throttledResize, { passive: true });
-    window.addEventListener('scroll', this.handleScrollEvent.bind(this), {
+    window.addEventListener('scroll', this.handleScrollEvent, {
       passive: true,
     });
-    this.scrollParent.addEventListener('scroll', this.handleScrollEvent.bind(this), {
+    this.scrollParent.addEventListener('scroll', this.handleScrollEvent, {
       passive: true,
     });
+    document.addEventListener('postToggleMegadropdown', this.megedropdownStateHandler);
+    this.host.addEventListener('click', this.handleLinkClick);
 
+    this.frozeBody(false);
     this.handleResize();
     this.handleScrollEvent();
+    this.handleScrollParentResize();
+  }
+
+  componentDidRender() {
     this.getFocusableElements();
+    this.handleLocalHeaderResize();
   }
 
   componentDidLoad() {
     // Check if the mega dropdown is expanded
-    document.addEventListener('postToggleMegadropdown', this.megedropdownStateHandler.bind(this));
-    this.host.addEventListener('click', this.handleLinkClick.bind(this));
-
-    this.handleScrollParentResize();
-    this.handleLocalHeaderResize();
   }
 
   // Clean up possible side effects when post-header is disconnected
   disconnectedCallback() {
     const scrollParent = this.scrollParent;
 
     window.removeEventListener('resize', this.throttledResize);
-    window.removeEventListener('scroll', this.handleScrollEvent.bind(this));
-    scrollParent.removeEventListener('scroll', this.handleScrollEvent.bind(this));
-    document.removeEventListener(
-      'postToggleMegadropdown',
-      this.megedropdownStateHandler.bind(this),
-    );
-    this.host.removeEventListener('keydown', this.keyboardHandler.bind(this));
-    this.host.removeEventListener('click', this.handleLinkClick.bind(this));
-
-    if (this.scrollParentResizeObserver) this.scrollParentResizeObserver.disconnect();
-    if (this.localHeaderResizeObserver) this.localHeaderResizeObserver.disconnect();
+    window.removeEventListener('scroll', this.handleScrollEvent);
+    scrollParent.removeEventListener('scroll', this.handleScrollEvent);
+    document.removeEventListener('postToggleMegadropdown', this.megedropdownStateHandler);
+    this.host.removeEventListener('keydown', this.keyboardHandler);
+    this.host.removeEventListener('click', this.handleLinkClick);
+
+    if (this.scrollParentResizeObserver) {
+      this.scrollParentResizeObserver.disconnect();
+      this.scrollParentResizeObserver = null;
+    }
+    if (this.localHeaderResizeObserver) {
+      this.localHeaderResizeObserver.disconnect();
+      this.localHeaderResizeObserver = null;
+    }
 
     this.mobileMenuExtended = false;
-    scrollParent.style.overflow = '';
-    scrollParent.removeAttribute('data-is-post-header-scroll-parent');
-
-    console.log(
-      'disconnectedCallback',
-      this.mobileMenuExtended,
-      this.scrollParent,
-      this.scrollParent.style.overflow,
-      this.scrollParent.hasAttribute('data-is-post-header-scroll-parent'),
-    );
   }
 
   /**
    * Toggles the mobile navigation.
    */
   @Method()
-  async toggleMobileMenu() {
+  async toggleMobileMenu(force?: boolean) {
     if (this.device === 'desktop') return;
 
     this.mobileMenuAnimation = this.mobileMenuExtended
@@ -169,11 +160,11 @@ export class PostHeader {
 
     // Update the state of the toggle button
     const menuButton = this.host.querySelector<HTMLPostTogglebuttonElement>('post-togglebutton');
-    menuButton.toggled = !this.mobileMenuExtended;
+    menuButton.toggled = force ?? !this.mobileMenuExtended;
 
     // Toggle menu visibility before it slides down and after it slides back up
     if (this.mobileMenuExtended) await this.mobileMenuAnimation.finished;
-    this.mobileMenuExtended = !this.mobileMenuExtended;
+    this.mobileMenuExtended = force ?? !this.mobileMenuExtended;
     if (!this.mobileMenuExtended) await this.mobileMenuAnimation.finished;
   }
 
@@ -250,7 +241,7 @@ export class PostHeader {
     }
 
     if (this.mobileMenuExtended && (isLinkInMainNav || isLinkInMegadropdown)) {
-      this.toggleMobileMenu();
+      this.toggleMobileMenu(false);
     }
 
     if (this.device === 'desktop' && isLinkInMegadropdown) {
@@ -293,18 +284,16 @@ export class PostHeader {
 
   private handleScrollParentResize() {
     if (this.scrollParent) {
-      this.scrollParentResizeObserver = new ResizeObserver(
-        this.updateScrollParentHeight.bind(this),
-      );
+      this.scrollParentResizeObserver = new ResizeObserver(this.updateScrollParentHeight);
       this.scrollParentResizeObserver.observe(this.scrollParent);
     }
   }
 
   private handleLocalHeaderResize() {
     const localHeader = this.host.shadowRoot.querySelector('.local-header');
 
-    if (localHeader) {
-      this.localHeaderResizeObserver = new ResizeObserver(this.updateLocalHeaderHeight.bind(this));
+    if (localHeader && !this.localHeaderResizeObserver) {
+      this.localHeaderResizeObserver = new ResizeObserver(this.updateLocalHeaderHeight);
       this.localHeaderResizeObserver.observe(localHeader);
     }
   }

diff --git a/packages/components/src/components/post-header/readme.md b/packages/components/src/components/post-header/readme.md
@@ -14,10 +14,16 @@
 
 ## Methods
 
-### `toggleMobileMenu() => Promise<void>`
+### `toggleMobileMenu(force?: boolean) => Promise<void>`
 
 Toggles the mobile navigation.
 
+#### Parameters
+
+| Name    | Type      | Description |
+| ------- | --------- | ----------- |
+| `force` | `boolean` |             |
+
 #### Returns
 
 Type: `Promise<void>`

diff --git a/packages/components/src/index.html b/packages/components/src/index.html
@@ -76,11 +76,11 @@ <h1 slot="title">Application title</h1>
           <h2>Main Navigation</h2>
 
           <!-- Link only level 1 -->
-          <post-list-item><a href="/briefe">Briefe</a></post-list-item>
-          <post-list-item><a href="/pakete">Pakete</a></post-list-item>
+          <post-list-item slot="post-list-item"><a href="/briefe">Briefe</a></post-list-item>
+          <post-list-item slot="post-list-item"><a href="/pakete">Pakete</a></post-list-item>
 
           <!-- Level 1 with megadropdown -->
-          <post-list-item>
+          <post-list-item slot="post-list-item">
             <post-megadropdown-trigger for="briefe">Briefe</post-megadropdown-trigger>
             <post-megadropdown id="briefe">
               <button slot="back-button" class="btn btn-tertiary btn-sm">
@@ -91,21 +91,33 @@ <h2>Main Navigation</h2>
               <h2 slot="megadropdown-title">Briefe title</h2>
               <post-list>
                 <h3>Briefe senden</h3>
-                <post-list-item><a href="/sch">Briefe Schweiz</a></post-list-item>
-                <post-list-item><a href="/kl">Kleinwaren Ausland</a></post-list-item>
-                <post-list-item><a href="">Waren Ausland</a></post-list-item>
-                <post-list-item><a href="">Express und Kurier</a></post-list-item>
+                <post-list-item slot="post-list-item"
+                  ><a href="/sch">Briefe Schweiz</a></post-list-item
+                >
+                <post-list-item slot="post-list-item"
+                  ><a href="/kl">Kleinwaren Ausland</a></post-list-item
+                >
+                <post-list-item slot="post-list-item"><a href="">Waren Ausland</a></post-list-item>
+                <post-list-item slot="post-list-item"
+                  ><a href="">Express und Kurier</a></post-list-item
+                >
               </post-list>
               <post-list>
                 <h3><a href="/schritt-für-schritt">Schritt für Schritt</a></h3>
-                <post-list-item><a href="/sch">Pakete Schweiz</a></post-list-item>
-                <post-list-item><a href="/kl">Kleinwaren Ausland</a></post-list-item>
-                <post-list-item><a href="">Waren Ausland</a></post-list-item>
-                <post-list-item><a href="">Express und Kurier</a></post-list-item>
+                <post-list-item slot="post-list-item"
+                  ><a href="/sch">Pakete Schweiz</a></post-list-item
+                >
+                <post-list-item slot="post-list-item"
+                  ><a href="/kl">Kleinwaren Ausland</a></post-list-item
+                >
+                <post-list-item slot="post-list-item"><a href="">Waren Ausland</a></post-list-item>
+                <post-list-item slot="post-list-item"
+                  ><a href="">Express und Kurier</a></post-list-item
+                >
               </post-list>
             </post-megadropdown>
           </post-list-item>
-          <post-list-item>
+          <post-list-item slot="post-list-item">
             <post-megadropdown-trigger for="pakete">Pakete</post-megadropdown-trigger>
             <post-megadropdown id="pakete">
               <button slot="back-button" class="btn btn-tertiary btn-sm">
@@ -116,17 +128,29 @@ <h3><a href="/schritt-für-schritt">Schritt für Schritt</a></h3>
               <h2 slot="megadropdown-title">Pakete title</h2>
               <post-list>
                 <h3>Pakete senden</h3>
-                <post-list-item><a href="/sch">Pakete Schweiz</a></post-list-item>
-                <post-list-item><a href="/kl">Kleinwaren Ausland</a></post-list-item>
-                <post-list-item><a href="">Waren Ausland</a></post-list-item>
-                <post-list-item><a href="">Express und Kurier</a></post-list-item>
+                <post-list-item slot="post-list-item"
+                  ><a href="/sch">Pakete Schweiz</a></post-list-item
+                >
+                <post-list-item slot="post-list-item"
+                  ><a href="/kl">Kleinwaren Ausland</a></post-list-item
+                >
+                <post-list-item slot="post-list-item"><a href="">Waren Ausland</a></post-list-item>
+                <post-list-item slot="post-list-item"
+                  ><a href="">Express und Kurier</a></post-list-item
+                >
               </post-list>
               <post-list>
                 <h3><a href="/schritt-für-schritt">Schritt für Schritt</a></h3>
-                <post-list-item><a href="/sch">Pakete Schweiz</a></post-list-item>
-                <post-list-item><a href="/kl">Kleinwaren Ausland</a></post-list-item>
-                <post-list-item><a href="">Waren Ausland</a></post-list-item>
-                <post-list-item><a href="">Express und Kurier</a></post-list-item>
+                <post-list-item slot="post-list-item"
+                  ><a href="/sch">Pakete Schweiz</a></post-list-item
+                >
+                <post-list-item slot="post-list-item"
+                  ><a href="/kl">Kleinwaren Ausland</a></post-list-item
+                >
+                <post-list-item slot="post-list-item"><a href="">Waren Ausland</a></post-list-item>
+                <post-list-item slot="post-list-item"
+                  ><a href="">Express und Kurier</a></post-list-item
+                >
               </post-list>
             </post-megadropdown>
           </post-list-item>