From a1d4eeb95a2775d87569b52b280549603a94004c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= Date: Wed, 9 Mar 2022 11:10:58 +0100 Subject: [PATCH] MOBILE-3814 collapsible: Partially revert header frozen calculations --- src/core/directives/collapsible-header.ts | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) diff --git a/src/core/directives/collapsible-header.ts b/src/core/directives/collapsible-header.ts index 9bb83a3ca..7a0d36d89 100644 --- a/src/core/directives/collapsible-header.ts +++ b/src/core/directives/collapsible-header.ts @@ -67,6 +67,7 @@ export class CoreCollapsibleHeaderDirective implements OnInit, OnChanges, OnDest protected subscriptions: Subscription[] = []; protected enabled = true; protected endAnimationTimeout?: number; + protected isWithinContent = false; 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'); } - 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); Object @@ -363,10 +365,17 @@ export class CoreCollapsibleHeaderDirective implements OnInit, OnChanges, OnDest } 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 ? 0 - : CoreMath.clamp(contentScroll.scrollTop / scrollingHeight, 0, 1); + : CoreMath.clamp(contentScroll.scrollTop / scrollingHeight, 0, 1); page.style.setProperty('--collapsible-header-progress', `${progress}`); page.classList.toggle('is-frozen', frozen);