From 772899d827c2cccb00389233da32dd5d0a625356 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= Date: Fri, 4 Mar 2022 15:43:02 +0100 Subject: [PATCH] MOBILE-3814 collapsible: Now collapsible header ends animations --- src/core/directives/collapsible-header.ts | 26 +++++++++++++++++++++++ 1 file changed, 26 insertions(+) diff --git a/src/core/directives/collapsible-header.ts b/src/core/directives/collapsible-header.ts index 7918d377d..35655ad54 100644 --- a/src/core/directives/collapsible-header.ts +++ b/src/core/directives/collapsible-header.ts @@ -66,6 +66,7 @@ export class CoreCollapsibleHeaderDirective implements OnInit, OnChanges, OnDest protected scrollingHeight?: number; protected subscriptions: Subscription[] = []; protected enabled = true; + protected endAnimationTimeout?: number; constructor(protected el: ElementRef) {} @@ -360,6 +361,10 @@ export class CoreCollapsibleHeaderDirective implements OnInit, OnChanges, OnDest return; } + if (this.endAnimationTimeout) { + clearTimeout(this.endAnimationTimeout); + } + const scrollableHeight = contentScroll.scrollHeight - contentScroll.clientHeight; const collapsedHeight = expandedHeaderHeight - (expandedHeader.clientHeight ?? 0); const frozen = scrollableHeight + collapsedHeight <= 2 * expandedHeaderHeight; @@ -374,7 +379,28 @@ export class CoreCollapsibleHeaderDirective implements OnInit, OnChanges, OnDest Object .entries(progress > .5 ? collapsedFontStyles : expandedFontStyles) .forEach(([property, value]) => floatingTitle.style.setProperty(property, value as string)); + + if (progress > 0 || progress < 1) { + // Finish opening or closing the bar. + this.endAnimationTimeout = window.setTimeout(() => this.endAnimation(progress), 500); + } }); } + /** + * End of animation when stop scrolling. + * + * @param progress Progress. + */ + protected endAnimation(progress: number): void { + if(!this.page) { + return; + } + + const collapse = progress > 0.5; + + this.page.style.setProperty('--collapsible-header-progress', collapse ? '1' : '0'); + this.page.classList.toggle('is-collapsed', collapse); + } + }