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

Optimize all-day event management and removal

Browse source 
Improves event removal process with enhanced fade-out and logging
Adds data-removing attribute to exclude events during height calculations
Prevents unnecessary removal of all-day events during drag operations

Enhances event rendering and management for better performance and user experience
This commit is contained in:
Janus C. H. Knudsen 2025-11-11 20:03:42 +01:00
parent 2656bae054
commit 818ed50176
2 changed files with 19 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

26
src/managers/AllDayManager.ts
View file

@ -128,10 +128,7 @@ export class AllDayManager {
console.log('🔄 AllDayManager: All-day → timed conversion', { eventId });
// No need to filter currentLayouts - DOM is source of truth!
// The element is already removed from all-day container by DragDropManager
// Recalculate and animate header height based on remaining DOM elements
this.fadeOutAndRemove(dragEndPayload.originalElement);
this.checkAndAnimateAllDayHeight();
}
});
@ -183,13 +180,14 @@ export class AllDayManager {
/**
* Read current max row from DOM elements
* Excludes events marked as removing (data-removing attribute)
*/
private getMaxRowFromDOM(): number {
const container = this.getAllDayContainer();
if (!container) return 0;
let maxRow = 0;
const allDayEvents = container.querySelectorAll('swp-allday-event:not(.max-event-indicator)');
const allDayEvents = container.querySelectorAll('swp-allday-event:not(.max-event-indicator):not([data-removing])');
allDayEvents.forEach((element: Element) => {
const htmlElement = element as HTMLElement;
@ -258,13 +256,6 @@ export class AllDayManager {
return { targetHeight, currentHeight, heightDifference };
}
/**
* Collapse all-day row when no events
*/
public collapseAllDayRow(): void {
this.animateToRows(0);
}
/**
* Check current all-day events and animate to correct height
* Reads max row directly from DOM elements
@ -312,6 +303,8 @@ export class AllDayManager {
willAnimate: displayRows !== this.actualRowCount
});
console.log(`🎯 AllDayManager: Animating to ${displayRows} rows`);
// Animate to required rows (0 = collapse, >0 = expand)
this.animateToRows(displayRows);
}
@ -453,11 +446,20 @@ export class AllDayManager {
}
private fadeOutAndRemove(element: HTMLElement): void {
console.log('🗑️ AllDayManager: About to remove all-day event', {
eventId: element.dataset.eventId,
element: element.tagName
});
// Mark element as removing so it's excluded from height calculations
element.setAttribute('data-removing', 'true');
element.style.transition = 'opacity 0.3s ease-out';
element.style.opacity = '0';
setTimeout(() => {
element.remove();
console.log('✅ AllDayManager: All-day event removed from DOM');
}, 300);
}

7
src/renderers/EventRenderer.ts
View file

@ -172,8 +172,11 @@ export class DateEventRenderer implements IEventRenderer {
return;
}
// Fade out original
this.fadeOutAndRemove(originalElement);
// Only fade out and remove if it's a swp-event (not swp-allday-event)
// AllDayManager handles removal of swp-allday-event elements
if (originalElement.tagName === 'SWP-EVENT') {
this.fadeOutAndRemove(originalElement);
}
// Remove clone prefix and normalize clone to be a regular event
const cloneId = draggedClone.dataset.eventId;