Merge pull request #3225 from crazyserver/MOBILE-3833

Mobile 3833
main
Dani Palou 2022-04-04 10:50:34 +02:00 committed by GitHub
commit 31d8a2c7a5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 25 additions and 0 deletions

View File

@ -5,6 +5,8 @@
ion-col { ion-col {
padding: 0; padding: 0;
margin-right: 2px;
margin-left: 2px;
} }
ion-button, ion-button,

View File

@ -14,6 +14,7 @@
import { Directive, ElementRef, Input, OnChanges, OnDestroy, OnInit, SimpleChange } from '@angular/core'; import { Directive, ElementRef, Input, OnChanges, OnDestroy, OnInit, SimpleChange } from '@angular/core';
import { CoreCancellablePromise } from '@classes/cancellable-promise'; import { CoreCancellablePromise } from '@classes/cancellable-promise';
import { CorePromisedValue } from '@classes/promised-value';
import { CoreLoadingComponent } from '@components/loading/loading'; import { CoreLoadingComponent } from '@components/loading/loading';
import { CoreTabsOutletComponent } from '@components/tabs-outlet/tabs-outlet'; import { CoreTabsOutletComponent } from '@components/tabs-outlet/tabs-outlet';
import { CoreTabsComponent } from '@components/tabs/tabs'; import { CoreTabsComponent } from '@components/tabs/tabs';
@ -69,12 +70,14 @@ export class CoreCollapsibleHeaderDirective implements OnInit, OnChanges, OnDest
protected content?: HTMLIonContentElement; protected content?: HTMLIonContentElement;
protected contentScrollListener?: EventListener; protected contentScrollListener?: EventListener;
protected endContentScrollListener?: EventListener; protected endContentScrollListener?: EventListener;
protected pageDidEnterListener?: EventListener;
protected resizeListener?: CoreEventObserver; protected resizeListener?: CoreEventObserver;
protected floatingTitle?: HTMLHeadingElement; protected floatingTitle?: HTMLHeadingElement;
protected scrollingHeight?: number; protected scrollingHeight?: number;
protected subscriptions: Subscription[] = []; protected subscriptions: Subscription[] = [];
protected enabled = true; protected enabled = true;
protected isWithinContent = false; protected isWithinContent = false;
protected enteredPromise = new CorePromisedValue<void>();
protected mutationObserver?: MutationObserver; protected mutationObserver?: MutationObserver;
protected loadingFloatingTitle = false; protected loadingFloatingTitle = false;
protected visiblePromise?: CoreCancellablePromise<void>; protected visiblePromise?: CoreCancellablePromise<void>;
@ -104,6 +107,7 @@ export class CoreCollapsibleHeaderDirective implements OnInit, OnChanges, OnDest
await Promise.all([ await Promise.all([
this.initializeCollapsedHeader(), this.initializeCollapsedHeader(),
this.initializeExpandedHeader(), this.initializeExpandedHeader(),
await this.enteredPromise,
]); ]);
await this.initializeFloatingTitle(); await this.initializeFloatingTitle();
@ -138,6 +142,9 @@ export class CoreCollapsibleHeaderDirective implements OnInit, OnChanges, OnDest
if (this.content && this.endContentScrollListener) { if (this.content && this.endContentScrollListener) {
this.content.removeEventListener('ionScrollEnd', this.endContentScrollListener); this.content.removeEventListener('ionScrollEnd', this.endContentScrollListener);
} }
if (this.page && this.pageDidEnterListener) {
this.page.removeEventListener('ionViewDidEnter', this.pageDidEnterListener);
}
this.resizeListener?.off(); this.resizeListener?.off();
this.mutationObserver?.disconnect(); this.mutationObserver?.disconnect();
@ -193,6 +200,22 @@ export class CoreCollapsibleHeaderDirective implements OnInit, OnChanges, OnDest
// Find element and prepare classes. // Find element and prepare classes.
this.page = this.collapsedHeader.parentElement; this.page = this.collapsedHeader.parentElement;
this.page.classList.add('collapsible-header-page'); this.page.classList.add('collapsible-header-page');
this.page.addEventListener(
'ionViewDidEnter',
this.pageDidEnterListener = () => {
clearTimeout(timeout);
this.enteredPromise.resolve();
if (this.page && this.pageDidEnterListener) {
this.page.removeEventListener('ionViewDidEnter', this.pageDidEnterListener);
}
},
);
// Timeout in case event is never fired.
const timeout = window.setTimeout(() => {
this.enteredPromise.reject(new Error('[collapsible-header] Waiting for ionViewDidEnter timeout reached'));
}, 5000);
} }
/** /**