Improves grid navigation animation
Refactors grid navigation to improve the animation flow. Removes the immediate clearing of events to prevent visual glitches during the slide animation. Instead, events are now rendered directly into the new container without clearing. This change ensures a smoother transition between grids. Also, cleans up old grid elements after the animation completes, reducing DOM clutter.
This commit is contained in:
parent
f50f5ad53b
commit
cdc7e55a92
2 changed files with 17 additions and 7 deletions
|
|
@ -158,19 +158,27 @@ export class NavigationManager {
|
||||||
(currentGrid as HTMLElement).style.transform = direction === 'next' ? 'translateX(-100%)' : 'translateX(100%)';
|
(currentGrid as HTMLElement).style.transform = direction === 'next' ? 'translateX(-100%)' : 'translateX(100%)';
|
||||||
(currentGrid as HTMLElement).style.opacity = '0.5';
|
(currentGrid as HTMLElement).style.opacity = '0.5';
|
||||||
|
|
||||||
|
// Cleanup: Remove all old grids except the new one after animation
|
||||||
|
setTimeout(() => {
|
||||||
|
const allGrids = container.querySelectorAll('swp-grid-container');
|
||||||
|
// Keep only the newest grid (last one), remove all others
|
||||||
|
for (let i = 0; i < allGrids.length - 1; i++) {
|
||||||
|
allGrids[i].remove();
|
||||||
|
}
|
||||||
|
}, 450);
|
||||||
|
|
||||||
// Slide in new grid
|
// Slide in new grid
|
||||||
newGrid.style.transform = 'translateX(0)';
|
newGrid.style.transform = 'translateX(0)';
|
||||||
|
|
||||||
// Clean up after animation (POC cleanup)
|
// Wait for new grid animation to complete before updating state
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
currentGrid.remove();
|
|
||||||
newGrid.style.position = 'relative';
|
newGrid.style.position = 'relative';
|
||||||
|
|
||||||
// Update currentWeek only after animation is complete (POC logic)
|
// Only now is the animation truly complete
|
||||||
this.currentWeek = new Date(targetWeek);
|
this.currentWeek = new Date(targetWeek);
|
||||||
this.animationQueue--;
|
this.animationQueue--;
|
||||||
|
|
||||||
// If this was the last queued animation, ensure we're in sync (POC sync)
|
// If this was the last queued animation, ensure we're in sync
|
||||||
if (this.animationQueue === 0) {
|
if (this.animationQueue === 0) {
|
||||||
this.currentWeek = new Date(this.targetWeek);
|
this.currentWeek = new Date(this.targetWeek);
|
||||||
}
|
}
|
||||||
|
|
@ -183,7 +191,7 @@ export class NavigationManager {
|
||||||
});
|
});
|
||||||
|
|
||||||
console.log(`NavigationManager: Completed ${direction} animation`);
|
console.log(`NavigationManager: Completed ${direction} animation`);
|
||||||
}, 400); // Match POC timing
|
}, 400); // Wait for slide-in animation to complete
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -22,8 +22,10 @@ export abstract class BaseEventRenderer implements EventRendererStrategy {
|
||||||
renderEvents(events: CalendarEvent[], config: CalendarConfig): void {
|
renderEvents(events: CalendarEvent[], config: CalendarConfig): void {
|
||||||
console.log('BaseEventRenderer: renderEvents called with', events.length, 'events');
|
console.log('BaseEventRenderer: renderEvents called with', events.length, 'events');
|
||||||
|
|
||||||
// Clear existing events first
|
// NOTE: Removed clearEvents() to support sliding animation
|
||||||
this.clearEvents();
|
// With sliding animation, multiple grid containers exist simultaneously
|
||||||
|
// clearEvents() would remove events from all containers, breaking the animation
|
||||||
|
// Events are now rendered directly into the new container without clearing
|
||||||
|
|
||||||
// Events should already be filtered by DataManager - no need to filter here
|
// Events should already be filtered by DataManager - no need to filter here
|
||||||
console.log('BaseEventRenderer: Rendering', events.length, 'pre-filtered events');
|
console.log('BaseEventRenderer: Rendering', events.length, 'pre-filtered events');
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue