From 710dda4c245861ca00a10720f87db006ff6c3839 Mon Sep 17 00:00:00 2001 From: "Janus C. H. Knudsen" Date: Thu, 25 Sep 2025 17:46:49 +0200 Subject: [PATCH] Refactors grid creation to GridRenderer Centralizes grid creation logic within the GridRenderer for better code organization and reusability. This change moves the grid rendering functionality from NavigationRenderer to GridRenderer and updates the NavigationManager to use the new GridRenderer. --- src/managers/NavigationManager.ts | 11 ++- src/renderers/GridRenderer.ts | 110 ++++++++++++++++++++++++++++ src/renderers/NavigationRenderer.ts | 108 +-------------------------- 3 files changed, 124 insertions(+), 105 deletions(-) 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(); } /**