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

MOBILE-4100 core: Fix scroll issues with collapsible footer

main
Dani Palou 2022-11-02 13:22:35 +01:00
parent 98e54d05be
commit ffb247c9ac
1 changed files with 17 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -38,6 +38,7 @@ export class CoreCollapsibleFooterDirective implements OnInit, OnDestroy {
@Input() appearOnBottom = false; @Input() appearOnBottom = false;
protected id = '0';
protected element: HTMLElement; protected element: HTMLElement;
protected initialHeight = 48; protected initialHeight = 48;
protected finalHeight = 0; protected finalHeight = 0;
@ -63,6 +64,8 @@ export class CoreCollapsibleFooterDirective implements OnInit, OnDestroy {
* @inheritdoc * @inheritdoc
*/ */
async ngOnInit(): Promise<void> { async ngOnInit(): Promise<void> {
this.id = String(CoreUtils.getUniqueId('CoreCollapsibleFooterDirective'));
// Only if not present or explicitly falsy it will be false. // Only if not present or explicitly falsy it will be false.
this.appearOnBottom = !CoreUtils.isFalseOrZero(this.appearOnBottom); this.appearOnBottom = !CoreUtils.isFalseOrZero(this.appearOnBottom);
this.slotPromise = CoreDom.slotOnContent(this.element); this.slotPromise = CoreDom.slotOnContent(this.element);
@ -72,6 +75,7 @@ export class CoreCollapsibleFooterDirective implements OnInit, OnDestroy {
await this.waitFormatTextsRendered(); await this.waitFormatTextsRendered();
this.content = this.element.closest('ion-content'); this.content = this.element.closest('ion-content');
this.content?.setAttribute('data-collapsible-footer-id', this.id);
await this.calculateHeight(); await this.calculateHeight();
@ -242,14 +246,21 @@ export class CoreCollapsibleFooterDirective implements OnInit, OnDestroy {
* @inheritdoc * @inheritdoc
*/ */
async ngOnDestroy(): Promise<void> { async ngOnDestroy(): Promise<void> {
this.content?.style.setProperty('--padding-bottom', this.initialPaddingBottom); if (this.content) {
// Only reset the variables and classes if the collapsible footer hasn't changed (avoid race conditions).
if (this.content.getAttribute('data-collapsible-footer-id') === this.id) {
this.content.style.setProperty('--padding-bottom', this.initialPaddingBottom);
this.content.classList.remove('has-collapsible-footer');
}
if (this.content && this.contentScrollListener) { if (this.contentScrollListener) {
this.content.removeEventListener('ionScroll', this.contentScrollListener); this.content.removeEventListener('ionScroll', this.contentScrollListener);
} }
if (this.content && this.endContentScrollListener) { if (this.endContentScrollListener) {
this.content.removeEventListener('ionScrollEnd', this.endContentScrollListener); this.content.removeEventListener('ionScrollEnd', this.endContentScrollListener);
}
} }
if (this.page && this.pageDidEnterListener) { if (this.page && this.pageDidEnterListener) {
this.page.removeEventListener('ionViewDidEnter', this.pageDidEnterListener); this.page.removeEventListener('ionViewDidEnter', this.pageDidEnterListener);
} }