Optimizes animation speed and event flow

Reduces the duration of a UI height animation for a snappier feel.
Disables a specific `header:ready` event emission during navigation rendering.
This commit is contained in:
Janus C. H. Knudsen 2025-09-23 09:46:47 +02:00
parent 6498b0ba8e
commit ffa0bcafc3
3 changed files with 38 additions and 2 deletions

View file

@ -242,7 +242,7 @@ export class AllDayManager {
{ height: `${currentSpacerHeight}px` }, { height: `${currentSpacerHeight}px` },
{ height: `${targetSpacerHeight}px` } { height: `${targetSpacerHeight}px` }
], { ], {
duration: 300, duration: 150,
easing: 'ease-out', easing: 'ease-out',
fill: 'forwards' fill: 'forwards'
}) })

View file

@ -270,6 +270,29 @@ export class NavigationManager {
newGrid.style.position = 'relative'; newGrid.style.position = 'relative';
newGrid.removeAttribute('data-prerendered'); newGrid.removeAttribute('data-prerendered');
// Reset all-day height and remove hardcoded header height after slide animation
const root = document.documentElement;
root.style.setProperty('--all-day-row-height', '0px');
const header = newGrid.querySelector('swp-calendar-header') as HTMLElement;
if (header) {
// Remove the hardcoded 0px height
header.style.height = '';
header.style.height
// NOW emit header:ready for this specific container
const weekEnd = DateCalculator.addDays(targetWeek, 6);
this.eventBus.emit('header:ready', {
headerElement: header,
startDate: targetWeek,
endDate: weekEnd,
isNavigation: true
});
console.log('🎯 NavigationManager: Animation complete, emitted header:ready', {
weekStart: targetWeek.toISOString()
});
}
// Clear cache since DOM structure changed // Clear cache since DOM structure changed
this.clearCache(); this.clearCache();

View file

@ -137,6 +137,19 @@ export class NavigationRenderer {
</swp-scrollable-content> </swp-scrollable-content>
`; `;
// Set header to base height for slide-in animation - will be reset after animation completes
const header = newGrid.querySelector('swp-calendar-header') as HTMLElement;
if (header) {
// Get base header height (without all-day rows)
const root = document.documentElement;
const baseHeaderHeight = getComputedStyle(root).getPropertyValue('--header-height');
header.style.height = baseHeaderHeight;
console.log('🔄 NavigationRenderer: Set header height to base height for slide-in', {
baseHeaderHeight,
weekStart: weekStart.toISOString()
});
}
// Position new grid - NO transform here, let Animation API handle it // Position new grid - NO transform here, let Animation API handle it
newGrid.style.position = 'absolute'; newGrid.style.position = 'absolute';
newGrid.style.top = '0'; newGrid.style.top = '0';
@ -214,7 +227,7 @@ export class NavigationRenderer {
endDate: weekEnd, endDate: weekEnd,
isNavigation: true isNavigation: true
}; };
this.eventBus.emit('header:ready', payload); //this.eventBus.emit('header:ready', payload);
} }
/** /**