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

MOBILE-4565 header: Check is still frozen after scrolling

main
Pau Ferrer Ocaña 2024-04-25 16:03:29 +02:00
parent 83ce6450e5
commit a71b350ff6
1 changed files with 33 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -547,15 +547,8 @@ export class CoreCollapsibleHeaderDirective implements OnInit, OnChanges, OnDest
return; return;
} }
const scrollableHeight = contentScroll.scrollHeight - contentScroll.clientHeight; const frozen = this.isFrozen(contentScroll);
let frozen = false;
if (this.isWithinContent) {
frozen = scrollableHeight <= scrollingHeight;
} else {
const collapsedHeight = expandedHeaderHeight - (expandedHeader.clientHeight ?? 0);
frozen = scrollableHeight + collapsedHeight <= 2 * expandedHeaderHeight;
}
const progress = frozen const progress = frozen
? 0 ? 0
: CoreMath.clamp(contentScroll.scrollTop / scrollingHeight, 0, 1); : CoreMath.clamp(contentScroll.scrollTop / scrollingHeight, 0, 1);
@ -577,7 +570,14 @@ export class CoreCollapsibleHeaderDirective implements OnInit, OnChanges, OnDest
} }
if (page.classList.contains('collapsible-header-page-is-frozen')) { if (page.classList.contains('collapsible-header-page-is-frozen')) {
return; // Check it has to be frozen.
const frozen = this.isFrozen(contentScroll);
if (frozen) {
return;
}
page.classList.toggle('collapsible-header-page-is-frozen', frozen);
} }
const progress = parseFloat(page.style.getPropertyValue('--collapsible-header-progress')); const progress = parseFloat(page.style.getPropertyValue('--collapsible-header-progress'));
@ -598,4 +598,28 @@ export class CoreCollapsibleHeaderDirective implements OnInit, OnChanges, OnDest
); );
} }
/**
* Check if the header is frozen.
*
* @param contentScroll Content scroll element.
* @returns Whether the header is frozen or not.
*/
protected isFrozen(contentScroll: HTMLElement): boolean {
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;
if (this.isWithinContent) {
frozen = scrollableHeight <= scrollingHeight;
} else {
const collapsedHeight = expandedHeaderHeight - (expandedHeaderClientHeight);
frozen = scrollableHeight + collapsedHeight <= 2 * expandedHeaderHeight;
}
return frozen;
}
} }