MOBILE-3833 usertours: Watch collapsible header

Author: NoelDeMartin

src/core/directives/collapsible-header.ts

@@ -23,11 +23,26 @@ import { ScrollDetail } from '@ionic/core';
 import { CoreUtils } from '@services/utils/utils';
 import { CoreComponentsRegistry } from '@singletons/components-registry';
 import { CoreDom } from '@singletons/dom';
-import { CoreEventObserver } from '@singletons/events';
+import { CoreEventObserver, CoreEvents } from '@singletons/events';
 import { CoreMath } from '@singletons/math';
 import { Subscription } from 'rxjs';
 import { CoreFormatTextDirective } from './format-text';
 
+declare module '@singletons/events' {
+
+    /**
+     * Augment CoreEventsData interface with events specific to this service.
+     *
+     * @see https://www.typescriptlang.org/docs/handbook/declaration-merging.html#module-augmentation
+     */
+    export interface CoreEventsData {
+        [COLLAPSIBLE_HEADER_UPDATED]: { collapsed: boolean };
+    }
+
+}
+
+export const COLLAPSIBLE_HEADER_UPDATED = 'collapsible_header_updated';
+
 /**
  * Directive to make <ion-header> collapsible.
  *
@@ -151,6 +166,27 @@ export class CoreCollapsibleHeaderDirective implements OnInit, OnChanges, OnDest
         this.visiblePromise?.cancel();
     }
 
+    /**
+     * Update collapsed status of the header.
+     *
+     * @param collapsed Whether header is collapsed or not.
+     */
+    protected setCollapsed(collapsed: boolean): void {
+        if (!this.page) {
+            return;
+        }
+
+        const isCollapsed = this.page.classList.contains('collapsible-header-page-is-collapsed');
+
+        if (isCollapsed === collapsed) {
+            return;
+        }
+
+        this.page.classList.toggle('collapsible-header-page-is-collapsed', collapsed);
+
+        CoreEvents.trigger(COLLAPSIBLE_HEADER_UPDATED, { collapsed });
+    }
+
     /**
      * Listen to changing events.
      */
@@ -458,8 +494,8 @@ export class CoreCollapsibleHeaderDirective implements OnInit, OnChanges, OnDest
             }
         }
 
+        this.setCollapsed(!enable);
         this.page.style.setProperty('--collapsible-header-progress', enable ? '0' : '1');
-        this.page.classList.toggle('collapsible-header-page-is-collapsed', !enable);
     }
 
     /**
@@ -523,9 +559,9 @@ export class CoreCollapsibleHeaderDirective implements OnInit, OnChanges, OnDest
                 ? 0
                 : CoreMath.clamp(contentScroll.scrollTop / scrollingHeight, 0, 1);
 
+            this.setCollapsed(progress === 1);
             page.style.setProperty('--collapsible-header-progress', `${progress}`);
             page.classList.toggle('collapsible-header-page-is-frozen', frozen);
-            page.classList.toggle('collapsible-header-page-is-collapsed', progress === 1);
 
             Object
                 .entries(progress > .5 ? collapsedFontStyles : expandedFontStyles)
@@ -547,8 +583,8 @@ export class CoreCollapsibleHeaderDirective implements OnInit, OnChanges, OnDest
                 const scrollTop = contentScroll.scrollTop;
                 const collapse = progress > 0.5;
 
+                this.setCollapsed(collapse);
                 page.style.setProperty('--collapsible-header-progress', collapse ? '1' : '0');
-                page.classList.toggle('collapsible-header-page-is-collapsed', collapse);
 
                 if (collapse && this.scrollingHeight && this.scrollingHeight > 0 && scrollTop < this.scrollingHeight) {
                     this.content?.scrollToPoint(null, this.scrollingHeight);

src/core/features/usertours/components/user-tour/user-tour.ts

@@ -34,6 +34,7 @@ import { CoreComponentsRegistry } from '@singletons/components-registry';
 import { CoreDom } from '@singletons/dom';
 import { CoreEventObserver, CoreEvents } from '@singletons/events';
 import { CoreMainMenuProvider } from '@features/mainmenu/services/mainmenu';
+import { COLLAPSIBLE_HEADER_UPDATED } from '@directives/collapsible-header';
 
 const ANIMATION_DURATION = 200;
 const USER_TOURS_BACK_BUTTON_PRIORITY = 100;
@@ -71,6 +72,7 @@ export class CoreUserToursUserTourComponent implements AfterViewInit, OnDestroy
     private wrapperTransform = '';
     private wrapperElement = new CorePromisedValue<HTMLElement>();
     private backButtonListener?: (event: BackButtonEvent) => void;
+    protected collapsibleHeaderListener?: CoreEventObserver;
     protected mainMenuListener?: CoreEventObserver;
     protected resizeListener?: CoreEventObserver;
     protected scrollListener?: EventListener;
@@ -252,6 +254,8 @@ export class CoreUserToursUserTourComponent implements AfterViewInit, OnDestroy
             return;
         }
 
+        this.collapsibleHeaderListener = this.collapsibleHeaderListener ??
+            CoreEvents.on(COLLAPSIBLE_HEADER_UPDATED, () => this.calculateStyles());
         this.mainMenuListener = this.mainMenuListener ??
             CoreEvents.on(CoreMainMenuProvider.MAIN_MENU_VISIBILITY_UPDATED, () => this.calculateStyles());
         this.resizeListener = this.resizeListener ?? CoreDom.onWindowResize(() => this.calculateStyles());
@@ -276,10 +280,12 @@ export class CoreUserToursUserTourComponent implements AfterViewInit, OnDestroy
 
         this.active = false;
 
+        this.collapsibleHeaderListener?.off();
         this.mainMenuListener?.off();
         this.resizeListener?.off();
         this.backButtonListener && document.removeEventListener('ionBackButton', this.backButtonListener);
         this.backButtonListener = undefined;
+        this.collapsibleHeaderListener = undefined;
         this.mainMenuListener = undefined;
         this.resizeListener = undefined;