commit
31d8a2c7a5
|
@ -5,6 +5,8 @@
|
||||||
|
|
||||||
ion-col {
|
ion-col {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
margin-right: 2px;
|
||||||
|
margin-left: 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
ion-button,
|
ion-button,
|
||||||
|
|
|
@ -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);
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
Loading…
Reference in New Issue