fix(header): collapsible header works in tabs (#19658)

fixes #19640

Author: liamdebeasi

core/src/components/header/header.tsx

@@ -57,14 +57,10 @@ export class Header implements ComponentInterface {
     // Determine if the header can collapse
     const hasCollapse = this.collapse === 'condense';
     const canCollapse = (hasCollapse && getIonMode(this) === 'ios') ? hasCollapse : false;
-
     if (!canCollapse && this.collapsibleHeaderInitialized) {
       this.destroyCollapsibleHeader();
     } else if (canCollapse && !this.collapsibleHeaderInitialized) {
-      const tabs = this.el.closest('ion-tabs');
-      const page = this.el.closest('ion-app,ion-page,.ion-page,page-inner');
-
-      const pageEl = (tabs) ? tabs : (page) ? page : null;
+      const pageEl = this.el.closest('ion-app,ion-page,.ion-page,page-inner');
       const contentEl = (pageEl) ? pageEl.querySelector('ion-content') : null;
 
       await this.setupCollapsibleHeader(contentEl, pageEl);
@@ -101,21 +97,17 @@ export class Header implements ComponentInterface {
 
       setHeaderActive(mainHeaderIndex, false);
 
-      // TODO: Find a better way to do this
-      let remainingHeight = 0;
-      for (let i = 1; i <= scrollHeaderIndex.toolbars.length - 1; i++) {
-        remainingHeight += scrollHeaderIndex.toolbars[i].el.clientHeight;
-      }
-
-      /**
-       * Handle interaction between toolbar collapse and
-       * showing/hiding content in the primary ion-header
-       */
-      const toolbarIntersection = (ev: any) => { handleToolbarIntersection(ev, mainHeaderIndex, scrollHeaderIndex); };
-
       readTask(() => {
         const mainHeaderHeight = mainHeaderIndex.el.clientHeight;
-        this.intersectionObserver = new IntersectionObserver(toolbarIntersection, { threshold: 0.25, rootMargin: `-${mainHeaderHeight}px 0px 0px 0px` });
+
+        /**
+         * Handle interaction between toolbar collapse and
+         * showing/hiding content in the primary ion-header
+         * as well as progressively showing/hiding the main header
+         * border as the top-most toolbar collapses or expands.
+         */
+        const toolbarIntersection = (ev: any) => { handleToolbarIntersection(ev, mainHeaderIndex, scrollHeaderIndex); };
+        this.intersectionObserver = new IntersectionObserver(toolbarIntersection, { threshold: [0.25, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1], rootMargin: `-${mainHeaderHeight}px 0px 0px 0px` });
         this.intersectionObserver.observe(scrollHeaderIndex.toolbars[0].el);
       });
 
@@ -124,7 +116,7 @@ export class Header implements ComponentInterface {
        * showing/hiding border on last toolbar
        * in primary header
        */
-      this.contentScrollCallback = () => { handleContentScroll(this.scrollEl!, mainHeaderIndex, scrollHeaderIndex, remainingHeight); };
+      this.contentScrollCallback = () => { handleContentScroll(this.scrollEl!, scrollHeaderIndex); };
       this.scrollEl.addEventListener('scroll', this.contentScrollCallback);
     });
 

core/src/components/header/header.utils.ts

@@ -49,20 +49,13 @@ export const createHeaderIndex = (headerEl: HTMLElement | undefined): HeaderInde
   } as HeaderIndex;
 };
 
-export const handleContentScroll = (scrollEl: HTMLElement, mainHeaderIndex: HeaderIndex, scrollHeaderIndex: HeaderIndex, remainingHeight = 0) => {
+export const handleContentScroll = (scrollEl: HTMLElement, scrollHeaderIndex: HeaderIndex) => {
   readTask(() => {
     const scrollTop = scrollEl.scrollTop;
-    const lastMainToolbar = mainHeaderIndex.toolbars[mainHeaderIndex.toolbars.length - 1];
-
     const scale = clamp(1, 1 + (-scrollTop / 500), 1.1);
 
-    const borderOpacity = clamp(0, (scrollTop - remainingHeight) / lastMainToolbar.el.clientHeight, 1);
-    const maxOpacity = 1;
-    const scaledOpacity = borderOpacity * maxOpacity;
-
     writeTask(() => {
       scaleLargeTitles(scrollHeaderIndex.toolbars, scale);
-      setToolbarBackgroundOpacity(mainHeaderIndex.toolbars[0], (scaledOpacity === 1) ? undefined : scaledOpacity);
     });
   });
 };
@@ -75,14 +68,24 @@ const setToolbarBackgroundOpacity = (toolbar: ToolbarIndex, opacity: number | un
   }
 };
 
+const handleToolbarBorderIntersection = (ev: any, mainHeaderIndex: HeaderIndex) => {
+  if (!ev[0].isIntersecting) { return; }
+
+  const scale = ((1 - ev[0].intersectionRatio) * 100) / 75;
+  setToolbarBackgroundOpacity(mainHeaderIndex.toolbars[0], (scale === 1) ? undefined : scale);
+};
+
 /**
  * If toolbars are intersecting, hide the scrollable toolbar content
  * and show the primary toolbar content. If the toolbars are not intersecting,
  * hide the primary toolbar content and show the scrollable toolbar content
  */
 export const handleToolbarIntersection = (ev: any, mainHeaderIndex: HeaderIndex, scrollHeaderIndex: HeaderIndex) => {
   writeTask(() => {
+    handleToolbarBorderIntersection(ev, mainHeaderIndex);
+
     const event = ev[0];
+
     const intersection = event.intersectionRect;
     const intersectionArea = intersection.width * intersection.height;
     const rootArea = event.rootBounds.width * event.rootBounds.height;
@@ -114,6 +117,7 @@ export const handleToolbarIntersection = (ev: any, mainHeaderIndex: HeaderIndex,
       if (hasValidIntersection) {
         setHeaderActive(mainHeaderIndex);
         setHeaderActive(scrollHeaderIndex, false);
+        setToolbarBackgroundOpacity(mainHeaderIndex.toolbars[0], 1);
       }
     }
   });
@@ -126,7 +130,6 @@ export const setHeaderActive = (headerIndex: HeaderIndex, active = true) => {
     } else {
       headerIndex.el.classList.add('header-collapse-condense-inactive');
     }
-    setToolbarBackgroundOpacity(headerIndex.toolbars[0], (active) ? undefined : 0);
   });
 };