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

Consolidates all-day event row limit

Browse source 
Centralizes the maximum number of displayed all-day event rows into a single constant.

This change ensures consistency and simplifies management of the all-day event row limit across the application.

Corrects off-by-one error in overflow count.
This commit is contained in:
Janus C. H. Knudsen 2025-10-02 15:37:01 +02:00
parent 135787146c
commit 0f2d96f76f
2 changed files with 14 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

23
src/managers/AllDayManager.ts
View file

@ -37,18 +37,18 @@ export class AllDayManager {
// Expand/collapse state
private isExpanded: boolean = false;
private actualRowCount: number = 0;
private readonly MAX_COLLAPSED_ROWS = 4; // Show 4 rows when collapsed (3 events + 1 indicator row)
constructor(eventManager: EventManager) {
this.eventManager = eventManager;
this.allDayEventRenderer = new AllDayEventRenderer();
// Sync CSS variable with TypeScript constant to ensure consistency
document.documentElement.style.setProperty(
'--single-row-height',
`${ALL_DAY_CONSTANTS.EVENT_HEIGHT}px`
);
this.setupEventListeners();
}
@ -143,7 +143,7 @@ export class AllDayManager {
this.currentLayouts = this.calculateAllDayEventsLayout(allDayEvents, headerReadyEventPayload.headerElements)
this.allDayEventRenderer.renderAllDayEventsForPeriod(this.currentLayouts );
this.allDayEventRenderer.renderAllDayEventsForPeriod(this.currentLayouts);
this.checkAndAnimateAllDayHeight();
});
@ -206,7 +206,7 @@ export class AllDayManager {
// Max rows = highest row number (e.g. if row 3 is used, height = 3 rows)
maxRows = highestRow;
}
// Store actual row count
@ -215,14 +215,14 @@ export class AllDayManager {
// Determine what to display
let displayRows = maxRows;
if (maxRows > this.MAX_COLLAPSED_ROWS) {
if (maxRows > ALL_DAY_CONSTANTS.MAX_COLLAPSED_ROWS) {
// Show chevron button
this.updateChevronButton(true);
// Show 4 rows when collapsed (3 events + indicators)
if (!this.isExpanded) {
displayRows = this.MAX_COLLAPSED_ROWS;
displayRows = ALL_DAY_CONSTANTS.MAX_COLLAPSED_ROWS;
this.updateOverflowIndicators();
} else {
@ -461,6 +461,9 @@ export class AllDayManager {
element.style.gridRow = layout.row.toString();
element.style.gridColumn = `${layout.startColumn} / ${layout.endColumn + 1}`;
if (layout.row > ALL_DAY_CONSTANTS.MAX_COLLAPSED_ROWS)
element.style.display = "none";
// Remove transition class after animation
setTimeout(() => element.classList.remove('transitioning'), 200);
}
@ -550,15 +553,15 @@ export class AllDayManager {
columns.forEach((columnBounds) => {
let totalEventsInColumn = this.countEventsInColumn(columnBounds);
let overflowCount = Math.max(0, totalEventsInColumn - 3);
let overflowCount = totalEventsInColumn - ALL_DAY_CONSTANTS.MAX_COLLAPSED_ROWS
if (overflowCount > 0) {
// Create new overflow indicator element
let overflowElement = document.createElement('swp-event');
overflowElement.className = 'max-event-overflow';
overflowElement.style.gridRow = '4';
overflowElement.style.gridRow = ALL_DAY_CONSTANTS.MAX_COLLAPSED_ROWS.toString();
overflowElement.style.gridColumn = columnBounds.index.toString();
overflowElement.innerHTML = `<span>+${overflowCount} more</span>`;
overflowElement.innerHTML = `<span>+${overflowCount + 1} more</span>`;
overflowElement.onclick = (e) => {
e.stopPropagation();
this.toggleExpanded();