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

Uses optimized grid creation for navigation

Browse source 
Ensures navigation grid uses the same creation method
as the initial load.

This ensures workweek and resource settings are respected,
creating a more consistent experience.
This commit is contained in:
Janus C. H. Knudsen 2025-09-25 17:55:13 +02:00
parent 710dda4c24
commit 1e20e23e77
2 changed files with 6 additions and 79 deletions
Download patch file Download diff file Expand all files Collapse all files

80
src/renderers/GridRenderer.ts
View file

@ -247,28 +247,20 @@ export class GridRenderer {
/** /**
* Create navigation grid container for slide animations * Create navigation grid container for slide animations
* Moved from NavigationRenderer to centralize grid creation * Now uses same implementation as initial load for consistency
*/ */
public createNavigationGrid(parentContainer: HTMLElement, weekStart: Date): HTMLElement { public createNavigationGrid(parentContainer: HTMLElement, weekStart: Date): HTMLElement {
console.group('🔧 GridRenderer.createNavigationGrid'); console.group('🔧 GridRenderer.createNavigationGrid');
console.log('Week start:', weekStart); console.log('Week start:', weekStart);
console.log('Parent container:', parentContainer); console.log('Parent container:', parentContainer);
console.log('Using same grid creation as initial load');
const weekEnd = DateCalculator.addDays(weekStart, 6); const weekEnd = DateCalculator.addDays(weekStart, 6);
// Create new grid container // Use SAME method as initial load - respects workweek and resource settings
const newGrid = document.createElement('swp-grid-container'); const newGrid = this.createOptimizedGridContainer(weekStart, null, 'week');
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 // Position new grid for animation - NO transform here, let Animation API handle it
newGrid.style.position = 'absolute'; newGrid.style.position = 'absolute';
newGrid.style.top = '0'; newGrid.style.top = '0';
newGrid.style.left = '0'; newGrid.style.left = '0';
@ -277,10 +269,8 @@ export class GridRenderer {
// Add to parent container // Add to parent container
parentContainer.appendChild(newGrid); parentContainer.appendChild(newGrid);
this.renderWeekContentInNavigationGrid(newGrid, weekStart);
console.log('Grid created:', newGrid); console.log('Grid created using createOptimizedGridContainer:', newGrid);
console.log('Emitting GRID_RENDERED'); console.log('Emitting GRID_RENDERED');
eventBus.emit(CoreEvents.GRID_RENDERED, { eventBus.emit(CoreEvents.GRID_RENDERED, {
@ -294,62 +284,4 @@ export class GridRenderer {
console.groupEnd(); console.groupEnd();
return newGrid; 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();
}
} }

5
src/renderers/NavigationRenderer.ts
View file

@ -110,11 +110,6 @@ export class NavigationRenderer {
} }
}); });
}); });
console.group('🔧 NavigationRenderer.cleanup');
console.log('Removed methods: renderContainer, renderWeekContentInContainer');
console.log('Grid creation now handled by GridRenderer');
console.groupEnd();
} }
/** /**