diff --git a/src/managers/NavigationManager.ts b/src/managers/NavigationManager.ts
index 4fdc1fb..f0d49b0 100644
--- a/src/managers/NavigationManager.ts
+++ b/src/managers/NavigationManager.ts
@@ -3,6 +3,7 @@ import { EventRenderingService } from '../renderers/EventRendererManager';
import { DateCalculator } from '../utils/DateCalculator';
import { CoreEvents } from '../constants/CoreEvents';
import { NavigationRenderer } from '../renderers/NavigationRenderer';
+import { GridRenderer } from '../renderers/GridRenderer';
import { calendarConfig } from '../core/CalendarConfig';
/**
@@ -12,6 +13,7 @@ import { calendarConfig } from '../core/CalendarConfig';
export class NavigationManager {
private eventBus: IEventBus;
private navigationRenderer: NavigationRenderer;
+ private gridRenderer: GridRenderer;
private dateCalculator: DateCalculator;
private currentWeek: Date;
private targetWeek: Date;
@@ -22,6 +24,7 @@ export class NavigationManager {
DateCalculator.initialize(calendarConfig);
this.dateCalculator = new DateCalculator();
this.navigationRenderer = new NavigationRenderer(eventBus, eventRenderer);
+ this.gridRenderer = new GridRenderer();
this.currentWeek = DateCalculator.getISOWeekStart(new Date());
this.targetWeek = new Date(this.currentWeek);
this.init();
@@ -206,8 +209,14 @@ export class NavigationManager {
let newGrid: HTMLElement;
+ console.group('🔧 NavigationManager.refactored');
+ console.log('Calling GridRenderer instead of NavigationRenderer');
+ console.log('Target week:', targetWeek);
+
// Always create a fresh container for consistent behavior
- newGrid = this.navigationRenderer.renderContainer(container, targetWeek);
+ newGrid = this.gridRenderer.createNavigationGrid(container, targetWeek);
+
+ console.groupEnd();
// Clear any existing transforms before animation
diff --git a/src/renderers/GridRenderer.ts b/src/renderers/GridRenderer.ts
index 4273f59..263a6a2 100644
--- a/src/renderers/GridRenderer.ts
+++ b/src/renderers/GridRenderer.ts
@@ -3,6 +3,8 @@ import { ResourceCalendarData, CalendarView } from '../types/CalendarTypes';
import { CalendarTypeFactory } from '../factories/CalendarTypeFactory';
import { ColumnRenderContext } from './ColumnRenderer';
import { eventBus } from '../core/EventBus';
+import { DateCalculator } from '../utils/DateCalculator';
+import { CoreEvents } from '../constants/CoreEvents';
/**
* GridRenderer - Centralized DOM rendering for calendar grid
@@ -242,4 +244,112 @@ export class GridRenderer {
(this as any).gridBodyEventListener = null;
(this as any).cachedColumnContainer = null;
}
+
+ /**
+ * Create navigation grid container for slide animations
+ * Moved from NavigationRenderer to centralize grid creation
+ */
+ public createNavigationGrid(parentContainer: HTMLElement, weekStart: Date): HTMLElement {
+ console.group('🔧 GridRenderer.createNavigationGrid');
+ console.log('Week start:', weekStart);
+ console.log('Parent container:', parentContainer);
+
+ const weekEnd = DateCalculator.addDays(weekStart, 6);
+
+ // Create new grid container
+ const newGrid = document.createElement('swp-grid-container');
+ newGrid.innerHTML = `
+
+
+
+
+
+
+
+ `;
+
+ // Position new grid - NO transform here, let Animation API handle it
+ newGrid.style.position = 'absolute';
+ newGrid.style.top = '0';
+ newGrid.style.left = '0';
+ newGrid.style.width = '100%';
+ newGrid.style.height = '100%';
+
+ // Add to parent container
+ parentContainer.appendChild(newGrid);
+
+ this.renderWeekContentInNavigationGrid(newGrid, weekStart);
+
+ console.log('Grid created:', newGrid);
+ console.log('Emitting GRID_RENDERED');
+
+ eventBus.emit(CoreEvents.GRID_RENDERED, {
+ container: newGrid, // Specific grid container, not parent
+ currentDate: weekStart,
+ startDate: weekStart,
+ endDate: weekEnd,
+ isNavigation: true // Flag to indicate this is navigation rendering
+ });
+
+ console.groupEnd();
+ return newGrid;
+ }
+
+ /**
+ * Render week content in navigation grid container
+ * Moved from NavigationRenderer
+ */
+ private renderWeekContentInNavigationGrid(gridContainer: HTMLElement, weekStart: Date): void {
+ console.group('🔧 GridRenderer.renderWeekContentInNavigationGrid');
+ console.log('Grid container:', gridContainer);
+ console.log('Week start:', weekStart);
+
+ const header = gridContainer.querySelector('swp-calendar-header');
+ const dayColumns = gridContainer.querySelector('swp-day-columns');
+
+ if (!header || !dayColumns) {
+ console.log('Missing header or dayColumns');
+ console.groupEnd();
+ return;
+ }
+
+ // Clear existing content
+ header.innerHTML = '';
+ dayColumns.innerHTML = '';
+
+ // Get dates using DateCalculator
+ const dates = DateCalculator.getWorkWeekDates(weekStart);
+
+ // Render headers for target week
+ dates.forEach((date, i) => {
+ const headerElement = document.createElement('swp-day-header');
+ if (DateCalculator.isToday(date)) {
+ headerElement.dataset.today = 'true';
+ }
+
+ const dayName = DateCalculator.getDayName(date, 'short');
+
+ headerElement.innerHTML = `
+ ${dayName}
+ ${date.getDate()}
+ `;
+ headerElement.dataset.date = DateCalculator.formatISODate(date);
+
+ header.appendChild(headerElement);
+ });
+
+ // Render day columns for target week
+ dates.forEach(date => {
+ const column = document.createElement('swp-day-column');
+ column.dataset.date = DateCalculator.formatISODate(date);
+
+ const eventsLayer = document.createElement('swp-events-layer');
+ column.appendChild(eventsLayer);
+
+ dayColumns.appendChild(column);
+ });
+
+ console.log('Week content rendered');
+ console.groupEnd();
+ }
}
\ No newline at end of file
diff --git a/src/renderers/NavigationRenderer.ts b/src/renderers/NavigationRenderer.ts
index c22baf4..f967075 100644
--- a/src/renderers/NavigationRenderer.ts
+++ b/src/renderers/NavigationRenderer.ts
@@ -1,10 +1,6 @@
import { IEventBus } from '../types/CalendarTypes';
import { CoreEvents } from '../constants/CoreEvents';
-import { calendarConfig } from '../core/CalendarConfig';
-import { DateCalculator } from '../utils/DateCalculator';
import { EventRenderingService } from './EventRendererManager';
-import { CalendarTypeFactory } from '../factories/CalendarTypeFactory';
-import { HeaderReadyEventPayload } from '../types/EventTypes';
/**
* NavigationRenderer - Handles DOM rendering for navigation containers
@@ -19,7 +15,6 @@ export class NavigationRenderer {
constructor(eventBus: IEventBus, eventRenderer: EventRenderingService) {
this.eventBus = eventBus;
- DateCalculator.initialize(calendarConfig);
this.setupEventListeners();
}
@@ -116,105 +111,10 @@ export class NavigationRenderer {
});
});
- }
-
- /**
- * Render a complete container with content and events
- */
- public renderContainer(parentContainer: HTMLElement, weekStart: Date): HTMLElement {
- const weekEnd = DateCalculator.addDays(weekStart, 6);
-
-
- // Create new grid container
- const newGrid = document.createElement('swp-grid-container');
- newGrid.innerHTML = `
-
-
-
-
-
-
-
- `;
-
- // Position new grid - NO transform here, let Animation API handle it
- newGrid.style.position = 'absolute';
- newGrid.style.top = '0';
- newGrid.style.left = '0';
- newGrid.style.width = '100%';
- newGrid.style.height = '100%';
-
- // Add to parent container
- parentContainer.appendChild(newGrid);
-
- this.renderWeekContentInContainer(newGrid, weekStart);
-
- this.eventBus.emit(CoreEvents.GRID_RENDERED, {
- container: newGrid, // Specific grid container, not parent
- currentDate: weekStart,
- startDate: weekStart,
- endDate: weekEnd,
- isNavigation: true // Flag to indicate this is navigation rendering
- });
-
- return newGrid;
- }
-
- /**
- * Render week content in specific container
- */
- private renderWeekContentInContainer(gridContainer: HTMLElement, weekStart: Date): void {
- const header = gridContainer.querySelector('swp-calendar-header');
- const dayColumns = gridContainer.querySelector('swp-day-columns');
-
- if (!header || !dayColumns) return;
-
- // Clear existing content
- header.innerHTML = '';
- dayColumns.innerHTML = '';
-
- // Get dates using DateCalculator
- const dates = DateCalculator.getWorkWeekDates(weekStart);
-
- // Render headers for target week
- dates.forEach((date, i) => {
- const headerElement = document.createElement('swp-day-header');
- if (DateCalculator.isToday(date)) {
- headerElement.dataset.today = 'true';
- }
-
- const dayName = DateCalculator.getDayName(date, 'short');
-
- headerElement.innerHTML = `
- ${dayName}
- ${date.getDate()}
- `;
- headerElement.dataset.date = DateCalculator.formatISODate(date);
-
- header.appendChild(headerElement);
- });
-
-
- // Render day columns for target week
- dates.forEach(date => {
- const column = document.createElement('swp-day-column');
- column.dataset.date = DateCalculator.formatISODate(date);
-
- const eventsLayer = document.createElement('swp-events-layer');
- column.appendChild(eventsLayer);
-
- dayColumns.appendChild(column);
- });
-
- // Emit header:ready after header has been populated with date elements
- const weekEnd = DateCalculator.addDays(weekStart, 6);
- const payload: HeaderReadyEventPayload = {
- headerElement: header as HTMLElement,
- startDate: weekStart,
- endDate: weekEnd,
- isNavigation: true
- };
- //this.eventBus.emit('header:ready', payload);
+ console.group('🔧 NavigationRenderer.cleanup');
+ console.log('Removed methods: renderContainer, renderWeekContentInContainer');
+ console.log('Grid creation now handled by GridRenderer');
+ console.groupEnd();
}
/**