dee977d4df
Updates ScrollManager to dynamically sync header spacer height using ResizeObserver Removes explicit spacer animation from HeaderDrawerManager Simplifies header and scroll interaction by moving height synchronization logic to ScrollManager
47 lines
1.2 KiB
TypeScript
47 lines
1.2 KiB
TypeScript
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')!;
|
|
|
|
if (!this.drawer) console.error('HeaderDrawerManager: swp-header-drawer not found');
|
|
}
|
|
|
|
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'
|
|
};
|
|
|
|
// Kun animér drawer - ScrollManager synkroniserer header-spacer via ResizeObserver
|
|
this.drawer.animate(keyframes, options);
|
|
}
|
|
|
|
isExpanded(): boolean {
|
|
return this.expanded;
|
|
}
|
|
}
|