48 lines
1.2 KiB
TypeScript
48 lines
1.2 KiB
TypeScript
|
export class HeaderDrawerManager {
|
||
|
|
private drawer!: HTMLElement;
|
||
|
|
private spacer!: HTMLElement;
|
||
|
|
private expanded = false;
|
||
|
|
private readonly expandedHeight = 24;
|
||
|
|
private readonly duration = 200;
|
||
|
|
|
||
|
|
init(container: HTMLElement): void {
|
||
|
|
this.drawer = container.querySelector('swp-header-drawer')!;
|
||
|
|
this.spacer = container.querySelector('swp-header-spacer')!;
|
||
|
|
}
|
||
|
|
|
||
|
|
toggle(): void {
|
||
|
|
this.expanded ? this.collapse() : this.expand();
|
||
|
|
}
|
||
|
|
|
||
|
|
expand(): void {
|
||
|
|
if (this.expanded) return;
|
||
|
|
this.expanded = true;
|
||
|
|
this.animate(0, this.expandedHeight);
|
||
|
|
}
|
||
|
|
|
||
|
|
collapse(): void {
|
||
|
|
if (!this.expanded) return;
|
||
|
|
this.expanded = false;
|
||
|
|
this.animate(this.expandedHeight, 0);
|
||
|
|
}
|
||
|
|
|
||
|
|
private animate(from: number, to: number): void {
|
||
|
|
const keyframes = [
|
||
|
|
{ height: `${from}px` },
|
||
|
|
{ height: `${to}px` }
|
||
|
|
];
|
||
|
|
const options: KeyframeAnimationOptions = {
|
||
|
|
duration: this.duration,
|
||
|
|
easing: 'ease',
|
||
|
|
fill: 'forwards'
|
||
|
|
};
|
||
|
|
|
||
|
|
this.drawer.animate(keyframes, options);
|
||
|
|
this.spacer.animate(keyframes, options);
|
||
|
|
}
|
||
|
|
|
||
|
|
isExpanded(): boolean {
|
||
|
|
return this.expanded;
|
||
|
|
}
|
||
|
|
}
|