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

1
src/core/CalendarConfig.ts
View file

@ -12,6 +12,7 @@ export const ALL_DAY_CONSTANTS = {
EVENT_HEIGHT: 22, // Height of single all-day event EVENT_HEIGHT: 22, // Height of single all-day event
EVENT_GAP: 2, // Gap between stacked events EVENT_GAP: 2, // Gap between stacked events
CONTAINER_PADDING: 4, // Container padding (top + bottom) CONTAINER_PADDING: 4, // Container padding (top + bottom)
MAX_COLLAPSED_ROWS: 4, // Show 4 rows when collapsed (3 events + 1 indicator row)
get SINGLE_ROW_HEIGHT() { get SINGLE_ROW_HEIGHT() {
return this.EVENT_HEIGHT + this.EVENT_GAP; // 28px return this.EVENT_HEIGHT + this.EVENT_GAP; // 28px
} }

23
src/managers/AllDayManager.ts
View file

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