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

MOBILE-3814 collapsible: Partially revert header frozen calculations

main
Pau Ferrer Ocaña 2022-03-09 11:10:58 +01:00
parent d2a12eec9c
commit a1d4eeb95a
1 changed files with 12 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -67,6 +67,7 @@ export class CoreCollapsibleHeaderDirective implements OnInit, OnChanges, OnDest
protected subscriptions: Subscription[] = []; protected subscriptions: Subscription[] = [];
protected enabled = true; protected enabled = true;
protected endAnimationTimeout?: number; protected endAnimationTimeout?: number;
protected isWithinContent = false;
constructor(protected el: ElementRef) {} constructor(protected el: ElementRef) {}
@ -346,7 +347,8 @@ export class CoreCollapsibleHeaderDirective implements OnInit, OnChanges, OnDest
throw new Error('[collapsible-header] Couldn\'t set up scrolling'); throw new Error('[collapsible-header] Couldn\'t set up scrolling');
} }
page.classList.toggle('is-within-content', content.contains(expandedHeader)); this.isWithinContent = content.contains(expandedHeader);
page.classList.toggle('is-within-content', this.isWithinContent);
this.setEnabled(this.enabled); this.setEnabled(this.enabled);
Object Object
@ -363,10 +365,17 @@ export class CoreCollapsibleHeaderDirective implements OnInit, OnChanges, OnDest
} }
const scrollableHeight = contentScroll.scrollHeight - contentScroll.clientHeight; const scrollableHeight = contentScroll.scrollHeight - contentScroll.clientHeight;
const frozen = scrollableHeight <= scrollingHeight;
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);
page.style.setProperty('--collapsible-header-progress', `${progress}`); page.style.setProperty('--collapsible-header-progress', `${progress}`);
page.classList.toggle('is-frozen', frozen); page.classList.toggle('is-frozen', frozen);