From 2a766cf6854ea15eb75a9095c810b203cf965ddf Mon Sep 17 00:00:00 2001 From: Janus Knudsen Date: Thu, 7 Aug 2025 00:26:33 +0200 Subject: [PATCH] Refactors week header to calendar header Renames 'week header' to 'calendar header' for better representation of the component's purpose, which includes more than just week-based calendar views. Updates related methods and references in GridManager and ScrollManager to reflect the change. Fixes incorrect calculation of the column width. --- src/managers/GridManager.ts | 50 ++++++++++++++++----------------- src/managers/ScrollManager.ts | 30 ++++++++++---------- src/renderers/ColumnRenderer.ts | 10 +++---- src/renderers/HeaderRenderer.ts | 16 +++++------ src/utils/PositionUtils.js | 18 ++++++------ 5 files changed, 62 insertions(+), 62 deletions(-) diff --git a/src/managers/GridManager.ts b/src/managers/GridManager.ts index b87845d..6420d3c 100644 --- a/src/managers/GridManager.ts +++ b/src/managers/GridManager.ts @@ -154,8 +154,8 @@ export class GridManager { this.createWeekContainer(); } else { console.log('GridManager: Re-render - updating existing structure'); - // Just update the week header for all-day events - this.updateWeekHeader(); + // Just update the calendar header for all-day events + this.updateCalendarHeader(); } console.log('GridManager: Grid rendered successfully with POC structure'); @@ -203,10 +203,10 @@ export class GridManager { const weekContainer = document.createElement('swp-grid-container'); - // Create week header using Strategy Pattern - const weekHeader = document.createElement('swp-calendar-header'); - this.renderWeekHeaders(weekHeader); - weekContainer.appendChild(weekHeader); + // Create calendar header using Strategy Pattern + const calendarHeader = document.createElement('swp-calendar-header'); + this.renderCalendarHeader(calendarHeader); + weekContainer.appendChild(calendarHeader); // Create scrollable content const scrollableContent = document.createElement('swp-scrollable-content'); @@ -216,10 +216,10 @@ export class GridManager { const gridLines = document.createElement('swp-grid-lines'); timeGrid.appendChild(gridLines); - // Create day columns using Strategy Pattern - const dayColumns = document.createElement('swp-day-columns'); - this.renderDayColumns(dayColumns); - timeGrid.appendChild(dayColumns); + // Create column container using Strategy Pattern + const columnContainer = document.createElement('swp-day-columns'); + this.renderColumnContainer(columnContainer); + timeGrid.appendChild(columnContainer); scrollableContent.appendChild(timeGrid); weekContainer.appendChild(scrollableContent); @@ -228,9 +228,9 @@ export class GridManager { } /** - * Render week headers using Strategy Pattern + * Render calendar header using Strategy Pattern */ - private renderWeekHeaders(weekHeader: HTMLElement): void { + private renderCalendarHeader(calendarHeader: HTMLElement): void { if (!this.currentWeek) return; const calendarType = calendarConfig.getCalendarType(); @@ -243,19 +243,19 @@ export class GridManager { resourceData: this.resourceData }; - headerRenderer.render(weekHeader, context); + headerRenderer.render(calendarHeader, context); // Update spacer heights based on all-day events this.updateSpacerHeights(); } /** - * Render day columns using Strategy Pattern + * Render column container using Strategy Pattern */ - private renderDayColumns(dayColumns: HTMLElement): void { + private renderColumnContainer(columnContainer: HTMLElement): void { if (!this.currentWeek) return; - console.log('GridManager: renderDayColumns called'); + console.log('GridManager: renderColumnContainer called'); const calendarType = calendarConfig.getCalendarType(); const columnRenderer = CalendarTypeFactory.getColumnRenderer(calendarType); @@ -265,23 +265,23 @@ export class GridManager { resourceData: this.resourceData }; - columnRenderer.render(dayColumns, context); + columnRenderer.render(columnContainer, context); } /** - * Update only the week header (for all-day events) without rebuilding entire grid + * Update only the calendar header (for all-day events) without rebuilding entire grid */ - private updateWeekHeader(): void { + private updateCalendarHeader(): void { if (!this.grid || !this.currentWeek) return; - const weekHeader = this.grid.querySelector('swp-calendar-header'); - if (!weekHeader) return; + const calendarHeader = this.grid.querySelector('swp-calendar-header'); + if (!calendarHeader) return; // Clear existing content - weekHeader.innerHTML = ''; + calendarHeader.innerHTML = ''; // Re-render headers using Strategy Pattern - this.renderWeekHeaders(weekHeader as HTMLElement); + this.renderCalendarHeader(calendarHeader as HTMLElement); } /** @@ -304,9 +304,9 @@ export class GridManager { console.log('GridManager: Updated all-day events:', this.allDayEvents.length); - // Update only the week header if grid is already rendered + // Update only the calendar header if grid is already rendered if (this.grid && this.grid.children.length > 0) { - this.updateWeekHeader(); + this.updateCalendarHeader(); } } diff --git a/src/managers/ScrollManager.ts b/src/managers/ScrollManager.ts index f025a67..3865ae3 100644 --- a/src/managers/ScrollManager.ts +++ b/src/managers/ScrollManager.ts @@ -11,7 +11,7 @@ export class ScrollManager { private scrollableContent: HTMLElement | null = null; private calendarContainer: HTMLElement | null = null; private timeAxis: HTMLElement | null = null; - private weekHeader: HTMLElement | null = null; + private calendarHeader: HTMLElement | null = null; private resizeObserver: ResizeObserver | null = null; constructor() { @@ -57,7 +57,7 @@ export class ScrollManager { } // Setup horizontal scrolling synchronization - if (this.scrollableContent && this.weekHeader) { + if (this.scrollableContent && this.calendarHeader) { this.setupHorizontalScrollSynchronization(); } } @@ -108,13 +108,13 @@ export class ScrollManager { this.scrollableContent = document.querySelector('swp-scrollable-content'); this.calendarContainer = document.querySelector('swp-calendar-container'); this.timeAxis = document.querySelector('swp-time-axis'); - this.weekHeader = document.querySelector('swp-calendar-header'); + this.calendarHeader = document.querySelector('swp-calendar-header'); console.log('ScrollManager: Found elements:', { scrollableContent: !!this.scrollableContent, calendarContainer: !!this.calendarContainer, timeAxis: !!this.timeAxis, - weekHeader: !!this.weekHeader + calendarHeader: !!this.calendarHeader }); } @@ -172,9 +172,9 @@ export class ScrollManager { const navigation = document.querySelector('swp-calendar-nav'); const navHeight = navigation ? navigation.getBoundingClientRect().height : 0; - // Find week header height - const weekHeader = document.querySelector('swp-calendar-header'); - const headerHeight = weekHeader ? weekHeader.getBoundingClientRect().height : 80; + // Find calendar header height + const calendarHeaderElement = document.querySelector('swp-calendar-header'); + const headerHeight = calendarHeaderElement ? calendarHeaderElement.getBoundingClientRect().height : 80; // Calculate available height for scrollable content const availableHeight = containerRect.height - headerHeight; @@ -241,33 +241,33 @@ export class ScrollManager { } /** - * Setup horizontal scroll synchronization between scrollable content and week header + * Setup horizontal scroll synchronization between scrollable content and calendar header */ private setupHorizontalScrollSynchronization(): void { - if (!this.scrollableContent || !this.weekHeader) return; + if (!this.scrollableContent || !this.calendarHeader) return; console.log('ScrollManager: Setting up horizontal scroll synchronization'); // Listen to horizontal scroll events this.scrollableContent.addEventListener('scroll', () => { - this.syncWeekHeaderPosition(); + this.syncCalendarHeaderPosition(); }); } /** - * Synchronize week header position with scrollable content horizontal scroll + * Synchronize calendar header position with scrollable content horizontal scroll */ - private syncWeekHeaderPosition(): void { - if (!this.scrollableContent || !this.weekHeader) return; + private syncCalendarHeaderPosition(): void { + if (!this.scrollableContent || !this.calendarHeader) return; const scrollLeft = this.scrollableContent.scrollLeft; // Use transform for smooth performance - this.weekHeader.style.transform = `translateX(-${scrollLeft}px)`; + this.calendarHeader.style.transform = `translateX(-${scrollLeft}px)`; // Debug logging (can be removed later) if (scrollLeft % 100 === 0) { // Only log every 100px to avoid spam - console.log(`ScrollManager: Synced week-header to scrollLeft: ${scrollLeft}px`); + console.log(`ScrollManager: Synced calendar-header to scrollLeft: ${scrollLeft}px`); } } diff --git a/src/renderers/ColumnRenderer.ts b/src/renderers/ColumnRenderer.ts index ff862f5..14f128a 100644 --- a/src/renderers/ColumnRenderer.ts +++ b/src/renderers/ColumnRenderer.ts @@ -7,7 +7,7 @@ import { ResourceCalendarData } from '../types/CalendarTypes'; * Interface for column rendering strategies */ export interface ColumnRenderer { - render(dayColumns: HTMLElement, context: ColumnRenderContext): void; + render(columnContainer: HTMLElement, context: ColumnRenderContext): void; } /** @@ -23,7 +23,7 @@ export interface ColumnRenderContext { * Date-based column renderer (original functionality) */ export class DateColumnRenderer implements ColumnRenderer { - render(dayColumns: HTMLElement, context: ColumnRenderContext): void { + render(columnContainer: HTMLElement, context: ColumnRenderContext): void { const { currentWeek, config } = context; const dates = this.getWeekDates(currentWeek); @@ -39,7 +39,7 @@ export class DateColumnRenderer implements ColumnRenderer { const eventsLayer = document.createElement('swp-events-layer'); column.appendChild(eventsLayer); - dayColumns.appendChild(column); + columnContainer.appendChild(column); }); } @@ -62,7 +62,7 @@ export class DateColumnRenderer implements ColumnRenderer { * Resource-based column renderer */ export class ResourceColumnRenderer implements ColumnRenderer { - render(dayColumns: HTMLElement, context: ColumnRenderContext): void { + render(columnContainer: HTMLElement, context: ColumnRenderContext): void { const { resourceData } = context; if (!resourceData) { @@ -81,7 +81,7 @@ export class ResourceColumnRenderer implements ColumnRenderer { const eventsLayer = document.createElement('swp-events-layer'); column.appendChild(eventsLayer); - dayColumns.appendChild(column); + columnContainer.appendChild(column); }); } } \ No newline at end of file diff --git a/src/renderers/HeaderRenderer.ts b/src/renderers/HeaderRenderer.ts index 5347083..f12f06b 100644 --- a/src/renderers/HeaderRenderer.ts +++ b/src/renderers/HeaderRenderer.ts @@ -7,7 +7,7 @@ import { ResourceCalendarData } from '../types/CalendarTypes'; * Interface for header rendering strategies */ export interface HeaderRenderer { - render(weekHeader: HTMLElement, context: HeaderRenderContext): void; + render(calendarHeader: HTMLElement, context: HeaderRenderContext): void; } /** @@ -24,7 +24,7 @@ export interface HeaderRenderContext { * Date-based header renderer (original functionality) */ export class DateHeaderRenderer implements HeaderRenderer { - render(weekHeader: HTMLElement, context: HeaderRenderContext): void { + render(calendarHeader: HTMLElement, context: HeaderRenderContext): void { const { currentWeek, config, allDayEvents = [] } = context; const dates = this.getWeekDates(currentWeek); @@ -43,14 +43,14 @@ export class DateHeaderRenderer implements HeaderRenderer { `; (header as any).dataset.date = this.formatDate(date); - weekHeader.appendChild(header); + calendarHeader.appendChild(header); }); // Render all-day events in row 2 - this.renderAllDayEvents(weekHeader, context); + this.renderAllDayEvents(calendarHeader, context); } - private renderAllDayEvents(weekHeader: HTMLElement, context: HeaderRenderContext): void { + private renderAllDayEvents(calendarHeader: HTMLElement, context: HeaderRenderContext): void { const { currentWeek, config, allDayEvents = [] } = context; const dates = this.getWeekDates(currentWeek); @@ -96,7 +96,7 @@ export class DateHeaderRenderer implements HeaderRenderer { allDayEvent.style.gridColumn = `${gridColumnStart} / ${gridColumnEnd}`; allDayEvent.style.backgroundColor = event.metadata?.color || '#ff9800'; - weekHeader.appendChild(allDayEvent); + calendarHeader.appendChild(allDayEvent); } }); } @@ -130,7 +130,7 @@ export class DateHeaderRenderer implements HeaderRenderer { * Resource-based header renderer */ export class ResourceHeaderRenderer implements HeaderRenderer { - render(weekHeader: HTMLElement, context: HeaderRenderContext): void { + render(calendarHeader: HTMLElement, context: HeaderRenderContext): void { const { resourceData } = context; if (!resourceData) { @@ -150,7 +150,7 @@ export class ResourceHeaderRenderer implements HeaderRenderer { ${resource.displayName} `; - weekHeader.appendChild(header); + calendarHeader.appendChild(header); }); console.log(`ResourceHeaderRenderer: Rendered ${resourceData.resources.length} resource headers`); diff --git a/src/utils/PositionUtils.js b/src/utils/PositionUtils.js index 5172625..7a97d7c 100644 --- a/src/utils/PositionUtils.js +++ b/src/utils/PositionUtils.js @@ -106,9 +106,9 @@ export class PositionUtils { static getDayColumnPosition(dayIndex) { // These values should be calculated based on actual calendar layout const timeAxisWidth = 60; // Default time axis width - const calendarElement = document.querySelector('swp-calendar-content'); - const dayColumnWidth = calendarElement ? - (calendarElement.clientWidth - timeAxisWidth) / calendarConfig.get('weekDays') : + const scrollableContent = document.querySelector('swp-scrollable-content'); + const dayColumnWidth = scrollableContent ? + (scrollableContent.clientWidth) / calendarConfig.get('weekDays') : 120; // Default day column width return timeAxisWidth + (dayIndex * dayColumnWidth); @@ -121,9 +121,9 @@ export class PositionUtils { */ static getDayIndexForPosition(pixelPosition) { const timeAxisWidth = 60; // Default time axis width - const calendarElement = document.querySelector('swp-calendar-content'); - const dayColumnWidth = calendarElement ? - (calendarElement.clientWidth - timeAxisWidth) / calendarConfig.get('weekDays') : + const scrollableContent = document.querySelector('swp-scrollable-content'); + const dayColumnWidth = scrollableContent ? + (scrollableContent.clientWidth) / calendarConfig.get('weekDays') : 120; // Default day column width if (pixelPosition < timeAxisWidth) { @@ -152,10 +152,10 @@ export class PositionUtils { const duration = endMinutes - startMinutes; - const calendarElement = document.querySelector('swp-calendar-content'); + const scrollableContent = document.querySelector('swp-scrollable-content'); const timeAxisWidth = 60; // Default time axis width - const dayColumnWidth = calendarElement ? - (calendarElement.clientWidth - timeAxisWidth) / calendarConfig.get('weekDays') : + const dayColumnWidth = scrollableContent ? + (scrollableContent.clientWidth) / calendarConfig.get('weekDays') : 120; // Default day column width return {