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

Improves all-day event container creation and animation

Browse source 
Refactors all-day event container creation to be lazy, improving
initial load performance. The container is now created and animated
into view only when needed, specifically when the first event is
dragged into the all-day section. This avoids unnecessary DOM
manipulation and improves the perceived responsiveness of the
calendar.
This commit is contained in:
Janus Knudsen 2025-08-28 00:13:11 +02:00
parent daa332e8db
commit 2c934a7a1a
2 changed files with 38 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

52
src/renderers/HeaderRenderer.ts
View file

@ -31,6 +31,8 @@ export abstract class BaseHeaderRenderer implements HeaderRenderer {
// Find the calendar header element to animate
const calendarHeader = dayHeader.closest('swp-calendar-header') as HTMLElement;
if (calendarHeader) {
// Ensure container exists BEFORE animation
this.createAllDayMainStructure(calendarHeader);
this.animateHeaderExpansion(calendarHeader);
}
console.log('BaseHeaderRenderer: Header expanded for all-day row');
@ -38,21 +40,11 @@ export abstract class BaseHeaderRenderer implements HeaderRenderer {
}
/**
* Ensure all-day main container and initial stack level exist (called automatically after header render)
* Ensure all-day containers exist - but don't create them initially, use lazy creation
*/
ensureAllDayContainers(calendarHeader: HTMLElement): void {
const root = document.documentElement;
const currentHeight = parseInt(getComputedStyle(root).getPropertyValue('--all-day-row-height') || '0');
// If all-day row doesn't exist yet, set it up without animation
if (currentHeight === 0) {
root.style.setProperty('--all-day-row-height', `${ALL_DAY_CONSTANTS.SINGLE_ROW_HEIGHT}px`);
}
// Always ensure main container and initial stack level exist
this.createAllDayMainStructure(calendarHeader);
console.log('BaseHeaderRenderer: Ensured all-day main structure exists');
// Do nothing initially - containers will be created when first needed
console.log('BaseHeaderRenderer: All-day containers will be created lazily when first event is dragged');
}
private animateHeaderExpansion(calendarHeader: HTMLElement): void {
@ -63,8 +55,17 @@ export abstract class BaseHeaderRenderer implements HeaderRenderer {
// Find header spacer
const headerSpacer = document.querySelector('swp-header-spacer') as HTMLElement;
// Animate both header and spacer simultaneously
// Find or create all-day container (it should exist but be hidden)
let allDayContainer = calendarHeader.querySelector('swp-allday-container') as HTMLElement;
if (!allDayContainer) {
// Create container if it doesn't exist
allDayContainer = document.createElement('swp-allday-container');
calendarHeader.appendChild(allDayContainer);
}
// Animate header, spacer, and container simultaneously
const animations = [
// Header height animation
calendarHeader.animate([
{ height: `${currentHeaderHeight}px` },
{ height: `${targetHeight}px` }
@ -72,9 +73,20 @@ export abstract class BaseHeaderRenderer implements HeaderRenderer {
duration: 150,
easing: 'ease-out',
fill: 'forwards'
}),
// Container visibility and height animation
allDayContainer.animate([
{ height: '0px', opacity: '0' },
{ height: `${ALL_DAY_CONSTANTS.SINGLE_ROW_HEIGHT}px`, opacity: '1' }
], {
duration: 150,
easing: 'ease-out',
fill: 'forwards'
})
];
// Add spacer animation if spacer exists
if (headerSpacer) {
animations.push(
headerSpacer.animate([
@ -93,11 +105,10 @@ export abstract class BaseHeaderRenderer implements HeaderRenderer {
// Set the CSS variable after animation
root.style.setProperty('--all-day-row-height', `${ALL_DAY_CONSTANTS.SINGLE_ROW_HEIGHT}px`);
// Create all-day main structure after animation
this.createAllDayMainStructure(calendarHeader);
// Notify ScrollManager about header height change
eventBus.emit('header:height-changed');
console.log('HeaderRenderer: All-day container animated to visible');
});
}
@ -106,12 +117,13 @@ export abstract class BaseHeaderRenderer implements HeaderRenderer {
let container = calendarHeader.querySelector('swp-allday-container');
if (!container) {
// Create simple all-day container
// Create simple all-day container (initially hidden)
container = document.createElement('swp-allday-container');
calendarHeader.appendChild(container);
console.log('HeaderRenderer: Created swp-allday-container (initially hidden)');
} else {
console.log('HeaderRenderer: swp-allday-container already exists');
}
console.log('Created simple all-day container');
}
}