Janus007/Calendar
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Enhances header drawer with multi-row event layout

Browse source 
Improves header drawer rendering to support multi-row event stacking

Adds row-based layout algorithm for all-day events
Enables flexible height expansion based on event count
Provides more robust event placement across visible date range
This commit is contained in:
Janus C. H. Knudsen 2025-12-11 23:43:51 +01:00
parent 044b547836
commit 7cb89e2ec5
2 changed files with 111 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

31
src/v2/core/HeaderDrawerManager.ts
View file

@ -1,7 +1,8 @@
export class HeaderDrawerManager {
private drawer!: HTMLElement;
private expanded = false;
private readonly expandedHeight = 25;
private currentRows = 0;
private readonly rowHeight = 25;
private readonly duration = 200;
init(container: HTMLElement): void {
@ -14,16 +15,34 @@ export class HeaderDrawerManager {
this.expanded ? this.collapse() : this.expand();
}
/**
* Expand drawer to single row (legacy support)
*/
expand(): void {
if (this.expanded) return;
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;
this.expanded = true;
this.animate(0, this.expandedHeight);
this.animate(currentHeight, targetHeight);
}
collapse(): void {
if (!this.expanded) return;
const currentHeight = this.currentRows * this.rowHeight;
this.expanded = false;
this.animate(this.expandedHeight, 0);
this.currentRows = 0;
this.animate(currentHeight, 0);
}
private animate(from: number, to: number): void {
@ -44,4 +63,8 @@ export class HeaderDrawerManager {
isExpanded(): boolean {
return this.expanded;
}
getRowCount(): number {
return this.currentRows;
}
}