2025-12-07 17:44:52 +01:00
|
|
|
export class HeaderDrawerManager {
|
|
|
|
|
private drawer!: HTMLElement;
|
|
|
|
|
private expanded = false;
|
2025-12-11 23:43:51 +01:00
|
|
|
private currentRows = 0;
|
|
|
|
|
private readonly rowHeight = 25;
|
2025-12-07 17:44:52 +01:00
|
|
|
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();
|
|
|
|
|
}
|
|
|
|
|
|
2025-12-11 23:43:51 +01:00
|
|
|
/**
|
|
|
|
|
* Expand drawer to single row (legacy support)
|
|
|
|
|
*/
|
2025-12-07 17:44:52 +01:00
|
|
|
expand(): void {
|
2025-12-11 23:43:51 +01:00
|
|
|
this.expandToRows(1);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Expand drawer to fit specified number of rows
|
|
|
|
|
*/
|
|
|
|
|
expandToRows(rowCount: number): void {
|
|
|
|
|
const targetHeight = rowCount * this.rowHeight;
|
|
|
|
|
const currentHeight = this.expanded ? this.currentRows * this.rowHeight : 0;
|
|
|
|
|
|
|
|
|
|
// Skip if already at target
|
|
|
|
|
if (this.expanded && this.currentRows === rowCount) return;
|
|
|
|
|
|
|
|
|
|
this.currentRows = rowCount;
|
2025-12-07 17:44:52 +01:00
|
|
|
this.expanded = true;
|
2025-12-11 23:43:51 +01:00
|
|
|
this.animate(currentHeight, targetHeight);
|
2025-12-07 17:44:52 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
collapse(): void {
|
|
|
|
|
if (!this.expanded) return;
|
2025-12-11 23:43:51 +01:00
|
|
|
const currentHeight = this.currentRows * this.rowHeight;
|
2025-12-07 17:44:52 +01:00
|
|
|
this.expanded = false;
|
2025-12-11 23:43:51 +01:00
|
|
|
this.currentRows = 0;
|
|
|
|
|
this.animate(currentHeight, 0);
|
2025-12-07 17:44:52 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
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;
|
|
|
|
|
}
|
2025-12-11 23:43:51 +01:00
|
|
|
|
|
|
|
|
getRowCount(): number {
|
|
|
|
|
return this.currentRows;
|
|
|
|
|
}
|
2025-12-07 17:44:52 +01:00
|
|
|
}
|