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

MOBILE-3814 fab: Use dom promises before calculating heights

main
Pau Ferrer Ocaña 2022-03-18 17:42:01 +01:00
parent dcb19c0f11
commit f31ee78cfb
1 changed files with 25 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
src/core/directives/fab.ts
View File

@ -13,7 +13,8 @@
// limitations under the License.
import { Directive, ElementRef, OnDestroy, OnInit } from '@angular/core';
import { CoreUtils } from '@services/utils/utils';
import { CoreCancellablePromise } from '@classes/cancellable-promise';
import { CoreDomUtils } from '@services/utils/dom';
/**
* Directive to move ion-fab components as direct children of the nearest ion-content.
@ -30,6 +31,7 @@ export class CoreFabDirective implements OnInit, OnDestroy {
protected element: HTMLElement;
protected content?: HTMLIonContentElement | null;
protected initialPaddingBottom = 0;
protected domPromise?: CoreCancellablePromise<void>;
constructor(el: ElementRef) {
this.element = el.nativeElement;
@ -39,15 +41,31 @@ export class CoreFabDirective implements OnInit, OnDestroy {
/**
* @inheritdoc
*/
async ngOnInit(retries = 3): Promise<void> {
this.content = this.element.closest('ion-content');
if (!this.content) {
if(retries > 0) {
await CoreUtils.nextTicks(50);
async ngOnInit(): Promise<void> {
this.domPromise = CoreDomUtils.waitToBeInDOM(this.element);
await this.domPromise;
this.ngOnInit(retries - 1);
this.content = this.element.closest('ion-content');
if (!this.content) {
return;
}
// Add space at the bottom to let the user see the whole content.
this.initialPaddingBottom = parseFloat(this.content.style.getPropertyValue('--padding-bottom') || '0');
await this.calculatePlace();
CoreDomUtils.onElementSlot(this.element, () => {
this.calculatePlace();
});
}
/**
* Calculate the height of the footer.
*/
protected async calculatePlace(): Promise<void> {
if (!this.content) {
return;
}
@ -58,8 +76,6 @@ export class CoreFabDirective implements OnInit, OnDestroy {
this.content.appendChild(this.element);
}
// Add space at the bottom to let the user see the whole content.
this.initialPaddingBottom = parseFloat(this.content.style.getPropertyValue('--padding-bottom') || '0');
this.content.style.setProperty('--padding-bottom', this.initialPaddingBottom + initialHeight + 'px');
}
@ -70,6 +86,7 @@ export class CoreFabDirective implements OnInit, OnDestroy {
if (this.content) {
this.content.style.setProperty('--padding-bottom', this.initialPaddingBottom + 'px');
}
this.domPromise?.cancel();
}
}