CIT/Vmeda.Online
3
0
Fork 1
forked from EVOgeek/Vmeda.Online
Code Pull Requests Activity

MOBILE-3833 collapsible: Do not calculate if not visible

Browse Source
This commit is contained in:
Pau Ferrer Ocaña 2022-03-30 13:00:30 +02:00
parent 1ae5c6b3a7
commit a17886ad53
3 changed files with 70 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/core/directives/collapsible-footer.ts
View File

@ -50,6 +50,9 @@ export class CoreCollapsibleFooterDirective implements OnInit, OnDestroy {
protected endContentScrollListener?: EventListener;
protected resizeListener?: CoreEventObserver;
protected slotPromise?: CoreCancellablePromise<void>;
protected calcPending = false;
protected pageDidEnterListener?: EventListener;
protected page?: HTMLElement;
constructor(el: ElementRef, protected ionContent: IonContent) {
this.element = el.nativeElement;
@ -82,6 +85,14 @@ export class CoreCollapsibleFooterDirective implements OnInit, OnDestroy {
* Calculate the height of the footer.
*/
protected async calculateHeight(): Promise<void> {
if (!CoreDom.isElementVisible(this.element)) {
this.calcPending = true;
return;
}
this.calcPending = false;
this.element.classList.remove('is-active');
await CoreUtils.nextTick();
@ -159,6 +170,16 @@ export class CoreCollapsibleFooterDirective implements OnInit, OnDestroy {
this.resizeListener = CoreDom.onWindowResize(() => {
this.calculateHeight();
}, 50);
this.page = this.content.closest<HTMLElement>('.ion-page') || undefined;
this.page?.addEventListener(
'ionViewDidEnter',
this.pageDidEnterListener = () => {
if (this.calcPending) {
this.calculateHeight();
}
},
);
}
/**
@ -228,6 +249,9 @@ export class CoreCollapsibleFooterDirective implements OnInit, OnDestroy {
if (this.content && this.endContentScrollListener) {
this.content.removeEventListener('ionScrollEnd', this.endContentScrollListener);
}
if (this.page && this.pageDidEnterListener) {
this.page.removeEventListener('ionViewDidEnter', this.pageDidEnterListener);
}
this.resizeListener?.off();
this.slotPromise?.cancel();

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

@ -77,6 +77,8 @@ export class CoreCollapsibleHeaderDirective implements OnInit, OnChanges, OnDest
protected isWithinContent = false;
protected enteredPromise = new CorePromisedValue<void>();
protected mutationObserver?: MutationObserver;
protected firstEnter = true;
protected initPending = false;
constructor(el: ElementRef) {
this.collapsedHeader = el.nativeElement;
@ -145,14 +147,19 @@ export class CoreCollapsibleHeaderDirective implements OnInit, OnChanges, OnDest
this.page.addEventListener(
'ionViewDidEnter',
this.pageDidEnterListener = () => {
clearTimeout(timeout);
this.enteredPromise.resolve();
if (this.firstEnter) {
this.firstEnter = false;
clearTimeout(timeout);
this.enteredPromise.resolve();
} else if (this.initPending) {
this.initializeFloatingTitle();
}
},
{ once: true },
);
// Timeout in case event is never fired.
const timeout = window.setTimeout(() => {
this.firstEnter = false;
this.enteredPromise.reject(new Error('[collapsible-header] Waiting for ionViewDidEnter timeout reached'));
}, 5000);
@ -259,6 +266,14 @@ export class CoreCollapsibleHeaderDirective implements OnInit, OnChanges, OnDest
throw new Error('[collapsible-header] Couldn\'t create floating title');
}
if (!CoreDom.isElementVisible(this.expandedHeader)) {
this.initPending = true;
return;
}
this.initPending = false;
this.page.classList.remove('collapsible-header-page-is-active');
CoreUtils.nextTick();

32
src/core/directives/collapsible-item.ts
View File

@ -56,6 +56,9 @@ export class CoreCollapsibleItemDirective implements OnInit, OnDestroy {
protected darkModeListener?: Subscription;
protected domPromise?: CoreCancellablePromise<void>;
protected uniqueId: string;
protected calcPending = false;
protected pageDidEnterListener?: EventListener;
protected page?: HTMLElement;
constructor(el: ElementRef<HTMLElement>) {
this.element = el.nativeElement;
@ -93,6 +96,15 @@ export class CoreCollapsibleItemDirective implements OnInit, OnDestroy {
await this.calculateHeight();
this.page?.addEventListener(
'ionViewDidEnter',
this.pageDidEnterListener = () => {
if (this.calcPending) {
this.calculateHeight();
}
},
);
this.resizeListener = CoreDom.onWindowResize(() => {
this.calculateHeight();
}, 50);
@ -112,13 +124,12 @@ export class CoreCollapsibleItemDirective implements OnInit, OnDestroy {
await this.domPromise;
const page = this.element.closest('.ion-page');
if (!page) {
this.page = this.element.closest<HTMLElement>('.ion-page') || undefined;
if (!this.page) {
return;
}
await CoreComponentsRegistry.waitComponentsReady(page, 'core-loading', CoreLoadingComponent);
await CoreComponentsRegistry.waitComponentsReady(this.page, 'core-loading', CoreLoadingComponent);
}
/**
@ -137,6 +148,15 @@ export class CoreCollapsibleItemDirective implements OnInit, OnDestroy {
await this.waitFormatTextsRendered();
if (!this.element.clientHeight) {
this.calcPending = true;
this.element.classList.remove('collapsible-loading-height');
return;
}
this.calcPending = false;
this.expandedHeight = this.element.getBoundingClientRect().height;
// Restore the max height now.
@ -278,6 +298,10 @@ export class CoreCollapsibleItemDirective implements OnInit, OnDestroy {
this.resizeListener?.off();
this.darkModeListener?.unsubscribe();
this.domPromise?.cancel();
if (this.page && this.pageDidEnterListener) {
this.page.removeEventListener('ionViewDidEnter', this.pageDidEnterListener);
}
}
}