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

MOBILE-4470 core: Fix collapsible header scrolling

Browse Source 
There were some scenarios were the scrollingHeight was recalculated, but the listeners weren't using the latest value and thus causing the wrong behaviour.
This commit is contained in:
Noel De Martin 2024-05-22 10:49:19 +02:00
parent e8457e89d7
commit 1756a19f66
1 changed files with 2 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -512,9 +512,7 @@ export class CoreCollapsibleHeaderDirective implements OnInit, OnChanges, OnDest
this.content = content;
const page = this.page;
const scrollingHeight = this.scrollingHeight;
const expandedHeader = this.expandedHeader;
const expandedHeaderHeight = this.expandedHeaderHeight;
const expandedFontStyles = this.expandedFontStyles;
const collapsedFontStyles = this.collapsedFontStyles;
const floatingTitle = this.floatingTitle;
@ -522,9 +520,7 @@ export class CoreCollapsibleHeaderDirective implements OnInit, OnChanges, OnDest
if (
!page ||
!scrollingHeight ||
!expandedHeader ||
!expandedHeaderHeight ||
!expandedFontStyles ||
!collapsedFontStyles ||
!floatingTitle
@ -543,7 +539,7 @@ export class CoreCollapsibleHeaderDirective implements OnInit, OnChanges, OnDest
this.content.scrollEvents = true;
this.content.addEventListener('ionScroll', this.contentScrollListener = ({ target }: CustomEvent<ScrollDetail>): void => {
if (target !== this.content || !this.enabled) {
if (target !== this.content || !this.enabled || !this.scrollingHeight) {
return;
}
@ -551,7 +547,7 @@ export class CoreCollapsibleHeaderDirective implements OnInit, OnChanges, OnDest
const progress = frozen
? 0
: CoreMath.clamp(contentScroll.scrollTop / scrollingHeight, 0, 1);
: CoreMath.clamp(contentScroll.scrollTop / this.scrollingHeight, 0, 1);
this.setCollapsed(progress === 1);
page.style.setProperty('--collapsible-header-progress', `${progress}`);
@ -608,7 +604,6 @@ export class CoreCollapsibleHeaderDirective implements OnInit, OnChanges, OnDest
const scrollingHeight = this.scrollingHeight ?? 0;
const expandedHeaderClientHeight = this.expandedHeader?.clientHeight ?? 0;
const expandedHeaderHeight = this.expandedHeaderHeight ?? 0;
const scrollableHeight = contentScroll.scrollHeight - contentScroll.clientHeight;
let frozen = false;