Janus007/Calendar
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Refactors grid creation to GridRenderer

Browse source 
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.
This commit is contained in:
Janus C. H. Knudsen 2025-09-25 17:46:49 +02:00
parent e20e23651c
commit 710dda4c24
3 changed files with 124 additions and 105 deletions
Download patch file Download diff file Expand all files Collapse all files

110
src/renderers/GridRenderer.ts
View file

@ -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 = `
<swp-calendar-header></swp-calendar-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>
`;
// 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 = `
<swp-day-name>${dayName}</swp-day-name>
<swp-day-date>${date.getDate()}</swp-day-date>
`;
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();
}
}