From 9b7988f26d8b52301d84daa5e99a17b0528d5cd2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Tue, 15 Mar 2022 17:21:10 +0100
Subject: [PATCH] MOBILE-3814 collapsible: Observe original title mutation

---
 src/core/directives/collapsible-header.ts | 28 +++++++++++++++++++++++
 1 file changed, 28 insertions(+)

diff --git a/src/core/directives/collapsible-header.ts b/src/core/directives/collapsible-header.ts
index 56365f4da..69f4929ef 100644
--- a/src/core/directives/collapsible-header.ts
+++ b/src/core/directives/collapsible-header.ts
@@ -76,6 +76,7 @@ export class CoreCollapsibleHeaderDirective implements OnInit, OnChanges, OnDest
     protected enabled = true;
     protected isWithinContent = false;
     protected enteredPromise = new CorePromisedValue<void>();
+    protected mutationObserver?: MutationObserver;
 
     constructor(el: ElementRef) {
         this.collapsedHeader = el.nativeElement;
@@ -126,6 +127,7 @@ export class CoreCollapsibleHeaderDirective implements OnInit, OnChanges, OnDest
         }
 
         this.resizeListener?.off();
+        this.mutationObserver?.disconnect();
     }
 
     /**
@@ -161,6 +163,31 @@ export class CoreCollapsibleHeaderDirective implements OnInit, OnChanges, OnDest
         this.subscriptions.push(CoreSettingsHelper.onDarkModeChange().subscribe(() => {
             this.initializeFloatingTitle();
         }));
+
+        this.mutationObserver = new MutationObserver(() => {
+            if (!this.expandedHeader) {
+                return;
+            }
+
+            const originalTitle = this.expandedHeader.querySelector('h1.collapsible-header-original-title') ||
+                this.expandedHeader.querySelector('h1') as HTMLHeadingElement;
+
+            const floatingTitleWrapper = originalTitle.parentElement as HTMLElement;
+            const floatingTitle = floatingTitleWrapper.querySelector('.collapsible-header-floating-title') as HTMLHeadingElement;
+
+            if (!floatingTitle || !originalTitle) {
+                return;
+            }
+
+            // Original title changed, change the contents.
+            const newFloatingTitle = originalTitle.cloneNode(true) as HTMLHeadingElement;
+            newFloatingTitle.classList.add('collapsible-header-floating-title');
+            newFloatingTitle.classList.remove('collapsible-header-original-title');
+
+            floatingTitleWrapper.replaceChild(newFloatingTitle, floatingTitle);
+
+            this.initializeFloatingTitle();
+        });
     }
 
     /**
@@ -247,6 +274,7 @@ export class CoreCollapsibleHeaderDirective implements OnInit, OnChanges, OnDest
             floatingTitleWrapper.insertBefore(floatingTitle, originalTitle);
 
             originalTitle.classList.add('collapsible-header-original-title');
+            this.mutationObserver?.observe(originalTitle, { childList: true, subtree: true });
         }
 
         const floatingTitleBoundingBox = floatingTitle.getBoundingClientRect();