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

WIP

Browse source
This commit is contained in:
Janus C. H. Knudsen 2025-10-02 15:57:11 +02:00
parent 0f2d96f76f
commit 54acdb9b41
2 changed files with 59 additions and 44 deletions
Download patch file Download diff file Expand all files Collapse all files

89
src/managers/AllDayManager.ts
View file

@ -462,7 +462,7 @@ export class AllDayManager {
element.style.gridColumn = `${layout.startColumn} / ${layout.endColumn + 1}`;
if (layout.row > ALL_DAY_CONSTANTS.MAX_COLLAPSED_ROWS)
element.style.display = "none";
element.classList.add('max-event-overflow-hide');
// Remove transition class after animation
setTimeout(() => element.classList.remove('transitioning'), 200);
@ -523,68 +523,75 @@ export class AllDayManager {
private toggleExpanded(): void {
this.isExpanded = !this.isExpanded;
this.checkAndAnimateAllDayHeight();
}
let elements = document.querySelectorAll('swp-allday-container swp-event');
elements.forEach(element: HTMLElement => {
element.classList.toggle('max-event-overflow-hide');
}
/**
* Count number of events in a specific column using ColumnBounds
*/
private countEventsInColumn(columnBounds: ColumnBounds): number {
let columnIndex = columnBounds.index;
let count = 0;
let columnIndex = columnBounds.index;
let count = 0;
this.currentLayouts.forEach((layout) => {
// Check if event spans this column
if (layout.startColumn <= columnIndex && layout.endColumn >= columnIndex) {
count++;
}
});
return count;
}
this.currentLayouts.forEach((layout) => {
// Check if event spans this column
if (layout.startColumn <= columnIndex && layout.endColumn >= columnIndex) {
count++;
}
});
return count;
}
/**
* Update overflow indicators for collapsed state
*/
private updateOverflowIndicators(): void {
const container = this.getAllDayContainer();
if (!container) return;
const container = this.getAllDayContainer();
if(!container) return;
// Create overflow indicators for each column that needs them
let columns = ColumnDetectionUtils.getColumns();
// Create overflow indicators for each column that needs them
let columns = ColumnDetectionUtils.getColumns();
columns.forEach((columnBounds) => {
let totalEventsInColumn = this.countEventsInColumn(columnBounds);
let overflowCount = totalEventsInColumn - ALL_DAY_CONSTANTS.MAX_COLLAPSED_ROWS
columns.forEach((columnBounds) => {
let totalEventsInColumn = this.countEventsInColumn(columnBounds);
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 = ALL_DAY_CONSTANTS.MAX_COLLAPSED_ROWS.toString();
overflowElement.style.gridColumn = columnBounds.index.toString();
overflowElement.innerHTML = `<span>+${overflowCount + 1} more</span>`;
overflowElement.onclick = (e) => {
e.stopPropagation();
this.toggleExpanded();
};
if (overflowCount > 0) {
// Create new overflow indicator element
let overflowElement = document.createElement('swp-event');
overflowElement.className = 'max-event-indicator';
overflowElement.style.gridRow = ALL_DAY_CONSTANTS.MAX_COLLAPSED_ROWS.toString();
overflowElement.style.gridColumn = columnBounds.index.toString();
overflowElement.innerHTML = `<span>+${overflowCount + 1} more</span>`;
overflowElement.onclick = (e) => {
e.stopPropagation();
this.toggleExpanded();
};
container.appendChild(overflowElement);
}
});
}
container.appendChild(overflowElement);
}
});
}
/**
* Clear overflow indicators and restore normal state
*/
private clearOverflowIndicators(): void {
const container = this.getAllDayContainer();
if (!container) return;
const container = this.getAllDayContainer();
if(!container) return;
// Remove all overflow indicator elements
container.querySelectorAll('.max-event-overflow').forEach((element) => {
element.remove();
});
// Remove all overflow indicator elements
container.querySelectorAll('.max-event-indicator').forEach((element) => {
element.remove();
});
}
}
}