EVOgeek
/
Vmeda.Online
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

MOBILE-3814 collapsible: Observe original title mutation

main
Pau Ferrer Ocaña 2022-03-15 17:21:10 +01:00
parent c30a768f35
commit 9b7988f26d
1 changed files with 28 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/core/directives/collapsible-header.ts
View File

@ -76,6 +76,7 @@ export class CoreCollapsibleHeaderDirective implements OnInit, OnChanges, OnDest
protected enabled = true; protected enabled = true;
protected isWithinContent = false; protected isWithinContent = false;
protected enteredPromise = new CorePromisedValue<void>(); protected enteredPromise = new CorePromisedValue<void>();
protected mutationObserver?: MutationObserver;
constructor(el: ElementRef) { constructor(el: ElementRef) {
this.collapsedHeader = el.nativeElement; this.collapsedHeader = el.nativeElement;
@ -126,6 +127,7 @@ export class CoreCollapsibleHeaderDirective implements OnInit, OnChanges, OnDest
} }
this.resizeListener?.off(); this.resizeListener?.off();
this.mutationObserver?.disconnect();
} }
/** /**
@ -161,6 +163,31 @@ export class CoreCollapsibleHeaderDirective implements OnInit, OnChanges, OnDest
this.subscriptions.push(CoreSettingsHelper.onDarkModeChange().subscribe(() => { this.subscriptions.push(CoreSettingsHelper.onDarkModeChange().subscribe(() => {
this.initializeFloatingTitle(); 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); floatingTitleWrapper.insertBefore(floatingTitle, originalTitle);
originalTitle.classList.add('collapsible-header-original-title'); originalTitle.classList.add('collapsible-header-original-title');
this.mutationObserver?.observe(originalTitle, { childList: true, subtree: true });
} }
const floatingTitleBoundingBox = floatingTitle.getBoundingClientRect(); const floatingTitleBoundingBox = floatingTitle.getBoundingClientRect();