2025-12-07 17:44:52 +01:00
|
|
|
export class HeaderDrawerManager {
|
|
|
|
|
private drawer!: HTMLElement;
|
|
|
|
|
private expanded = false;
|
|
|
|
|
private readonly expandedHeight = 24;
|
|
|
|
|
private readonly duration = 200;
|
|
|
|
|
|
|
|
|
|
init(container: HTMLElement): void {
|
|
|
|
|
this.drawer = container.querySelector('swp-header-drawer')!;
|
2025-12-07 23:25:02 +01:00
|
|
|
|
|
|
|
|
if (!this.drawer) console.error('HeaderDrawerManager: swp-header-drawer not found');
|
2025-12-07 17:44:52 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
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'
|
|
|
|
|
};
|
|
|
|
|
|
2025-12-07 23:25:02 +01:00
|
|
|
// Kun animér drawer - ScrollManager synkroniserer header-spacer via ResizeObserver
|
2025-12-07 17:44:52 +01:00
|
|
|
this.drawer.animate(keyframes, options);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
isExpanded(): boolean {
|
|
|
|
|
return this.expanded;
|
|
|
|
|
}
|
|
|
|
|
}
|