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:
parent
6498b0ba8e
commit
ffa0bcafc3
3 changed files with 38 additions and 2 deletions
|
|
@ -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'
|
||||||
})
|
})
|
||||||
|
|
|
||||||
|
|
@ -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();
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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);
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue