Snapshot

src/managers/NavigationManager.ts

@@ -4,7 +4,7 @@ import { EventTypes } from '../constants/EventTypes.js';
 
 /**
  * NavigationManager handles calendar navigation (prev/next/today buttons)
- * and week transitions with smooth animations
+ * with simplified CSS Grid approach
  */
 export class NavigationManager {
   private eventBus: IEventBus;
@@ -106,57 +106,22 @@ export class NavigationManager {
 
   private animateTransition(direction: 'prev' | 'next', targetWeek: Date): void {
     const calendarContainer = document.querySelector('swp-calendar-container');
-    const currentWeekContainer = document.querySelector('swp-week-container');
     
-    if (!calendarContainer || !currentWeekContainer) {
-      console.warn('NavigationManager: Required DOM elements not found');
+    if (!calendarContainer) {
+      console.warn('NavigationManager: Calendar container not found');
       return;
     }
     
-    // Create new week container (following POC structure)
-    const newWeekContainer = document.createElement('swp-week-container');
-    newWeekContainer.innerHTML = `
-      <swp-week-header></swp-week-header>
-      <swp-scrollable-content>
-        <swp-time-grid>
-          <swp-grid-lines></swp-grid-lines>
-          <swp-day-columns></swp-day-columns>
-        </swp-time-grid>
-      </swp-scrollable-content>
-    `;
+    // Add transition class for visual feedback
+    calendarContainer.classList.add('week-transition');
     
-    // Position new week off-screen
-    newWeekContainer.style.position = 'absolute';
-    newWeekContainer.style.top = '0';
-    newWeekContainer.style.left = '0';
-    newWeekContainer.style.width = '100%';
-    newWeekContainer.style.height = '100%';
-    newWeekContainer.style.transform = direction === 'next' ? 'translateX(100%)' : 'translateX(-100%)';
-    
-    // Add to calendar container
-    calendarContainer.appendChild(newWeekContainer);
-    
-    // Notify other managers to render content for the new week
-    this.eventBus.emit(EventTypes.WEEK_CONTAINER_CREATED, {
-      container: newWeekContainer,
-      weekStart: targetWeek
-    });
-    
-    // Animate transition
-    requestAnimationFrame(() => {
-      // Slide out current week
-      (currentWeekContainer as HTMLElement).style.transform = direction === 'next' ? 'translateX(-100%)' : 'translateX(100%)';
-      (currentWeekContainer as HTMLElement).style.opacity = '0.5';
+    // Brief fade effect
+    setTimeout(() => {
+      calendarContainer.classList.add('week-transition-out');
       
-      // Slide in new week
-      newWeekContainer.style.transform = 'translateX(0)';
-      
-      // Clean up after animation
+      // Update the week after fade starts
       setTimeout(() => {
-        currentWeekContainer.remove();
-        newWeekContainer.style.position = 'relative';
-        
-        // Update currentWeek only after animation is complete
+        // Update currentWeek
         this.currentWeek = new Date(targetWeek);
         this.animationQueue--;
         
@@ -172,8 +137,13 @@ export class NavigationManager {
           weekEnd: DateUtils.addDays(this.currentWeek, 6)
         });
         
-      }, 400); // Match CSS transition duration
-    });
+        // Remove transition classes
+        setTimeout(() => {
+          calendarContainer.classList.remove('week-transition', 'week-transition-out');
+        }, 150);
+        
+      }, 150); // Half of transition duration
+    }, 50);
   }
 
   private updateWeekInfo(): void {