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

MOBILE-3814 collapsible: Now collapsible header ends animations

main
Pau Ferrer Ocaña 2022-03-04 15:43:02 +01:00
parent f5303b3cc6
commit 772899d827
1 changed files with 26 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -66,6 +66,7 @@ export class CoreCollapsibleHeaderDirective implements OnInit, OnChanges, OnDest
protected scrollingHeight?: number; protected scrollingHeight?: number;
protected subscriptions: Subscription[] = []; protected subscriptions: Subscription[] = [];
protected enabled = true; protected enabled = true;
protected endAnimationTimeout?: number;
constructor(protected el: ElementRef) {} constructor(protected el: ElementRef) {}
@ -360,6 +361,10 @@ export class CoreCollapsibleHeaderDirective implements OnInit, OnChanges, OnDest
return; return;
} }
if (this.endAnimationTimeout) {
clearTimeout(this.endAnimationTimeout);
}
const scrollableHeight = contentScroll.scrollHeight - contentScroll.clientHeight; const scrollableHeight = contentScroll.scrollHeight - contentScroll.clientHeight;
const collapsedHeight = expandedHeaderHeight - (expandedHeader.clientHeight ?? 0); const collapsedHeight = expandedHeaderHeight - (expandedHeader.clientHeight ?? 0);
const frozen = scrollableHeight + collapsedHeight <= 2 * expandedHeaderHeight; const frozen = scrollableHeight + collapsedHeight <= 2 * expandedHeaderHeight;
@ -374,7 +379,28 @@ export class CoreCollapsibleHeaderDirective implements OnInit, OnChanges, OnDest
Object Object
.entries(progress > .5 ? collapsedFontStyles : expandedFontStyles) .entries(progress > .5 ? collapsedFontStyles : expandedFontStyles)
.forEach(([property, value]) => floatingTitle.style.setProperty(property, value as string)); .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);
}
} }