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

Refactors grid and navigation rendering

Browse source 
Attempt 1
This commit is contained in:
Janus Knudsen 2025-08-17 22:54:00 +02:00
parent 6026d28e6f
commit 32ee35eb02
10 changed files with 436 additions and 811 deletions
Download patch file Download diff file Expand all files Collapse all files

107
src/managers/NavigationManager.ts
View file

@ -1,6 +1,7 @@
import { IEventBus } from '../types/CalendarTypes.js';
import { DateUtils } from '../utils/DateUtils.js';
import { EventTypes } from '../constants/EventTypes.js';
import { NavigationRenderer } from '../renderers/NavigationRenderer.js';
/**
* NavigationManager handles calendar navigation (prev/next/today buttons)
@ -8,6 +9,7 @@ import { EventTypes } from '../constants/EventTypes.js';
*/
export class NavigationManager {
private eventBus: IEventBus;
private navigationRenderer: NavigationRenderer;
private currentWeek: Date;
private targetWeek: Date;
private animationQueue: number = 0;
@ -15,6 +17,7 @@ export class NavigationManager {
constructor(eventBus: IEventBus) {
console.log('🧭 NavigationManager: Constructor called');
this.eventBus = eventBus;
this.navigationRenderer = new NavigationRenderer(eventBus);
this.currentWeek = DateUtils.getWeekStart(new Date(), 0); // Sunday start like POC
this.targetWeek = new Date(this.currentWeek);
this.init();
@ -130,7 +133,7 @@ export class NavigationManager {
// Always create a fresh container for consistent behavior
console.log('NavigationManager: Creating new container');
newGrid = this.renderContainer(container as HTMLElement, targetWeek);
newGrid = this.navigationRenderer.renderContainer(container as HTMLElement, targetWeek);
// Clear any existing transforms before animation
newGrid.style.transform = '';
@ -194,15 +197,7 @@ export class NavigationManager {
});
}
// Utility functions (from POC)
private formatDate(date: Date): string {
return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
}
private isToday(date: Date): boolean {
const today = new Date();
return date.toDateString() === today.toDateString();
}
// Utility functions (from POC) - moved formatting to NavigationRenderer
private updateWeekInfo(): void {
const weekNumber = DateUtils.getWeekNumber(this.currentWeek);
@ -264,95 +259,5 @@ export class NavigationManager {
});
}
/**
* Render a complete container with content and events
*/
private renderContainer(parentContainer: HTMLElement, weekStart: Date): HTMLElement {
console.log('NavigationManager: Rendering new container for week:', weekStart.toDateString());
// 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);
// Render week content (headers and columns)
this.renderWeekContentInContainer(newGrid, weekStart);
// Emit event to trigger event rendering
const weekEnd = DateUtils.addDays(weekStart, 6);
this.eventBus.emit(EventTypes.CONTAINER_READY_FOR_EVENTS, {
container: newGrid,
startDate: weekStart,
endDate: weekEnd
});
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 = '';
// Render headers for target week
const days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
for (let i = 0; i < 7; i++) {
const date = new Date(weekStart);
date.setDate(date.getDate() + i);
const headerElement = document.createElement('swp-day-header');
if (this.isToday(date)) {
headerElement.dataset.today = 'true';
}
headerElement.innerHTML = `
<swp-day-name>${days[date.getDay()]}</swp-day-name>
<swp-day-date>${date.getDate()}</swp-day-date>
`;
headerElement.dataset.date = this.formatDate(date);
header.appendChild(headerElement);
}
// Render day columns for target week (with hardcoded test event)
for (let i = 0; i < 7; i++) {
const column = document.createElement('swp-day-column');
const date = new Date(weekStart);
date.setDate(date.getDate() + i);
column.dataset.date = this.formatDate(date);
const eventsLayer = document.createElement('swp-events-layer');
column.appendChild(eventsLayer);
dayColumns.appendChild(column);
}
}
// Rendering methods moved to NavigationRenderer for better separation of concerns
}