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

Improves performance by caching DOM elements

Browse source 
Caches frequently accessed DOM elements in NavigationManager and
EventRenderer to reduce redundant queries, improving performance.

Updates the event renderer to trigger all-day height animations and
introduces a destroy method for resource management.

Refactors time formatting in EventRenderer to handle both total
minutes and Date objects using a unified method.
This commit is contained in:
Janus Knudsen 2025-09-03 18:15:33 +02:00
parent 77592278d3
commit 0da875a224
3 changed files with 126 additions and 37 deletions
Download patch file Download diff file Expand all files Collapse all files

45
src/renderers/NavigationRenderer.ts
View file

@ -15,6 +15,10 @@ export class NavigationRenderer {
private config: CalendarConfig;
private dateCalculator: DateCalculator;
private eventRenderer: EventRenderingService;
// Cached DOM elements to avoid redundant queries
private cachedWeekNumberElement: HTMLElement | null = null;
private cachedDateRangeElement: HTMLElement | null = null;
constructor(eventBus: IEventBus, config: CalendarConfig, eventRenderer: EventRenderingService) {
this.eventBus = eventBus;
@ -24,6 +28,34 @@ export class NavigationRenderer {
this.setupEventListeners();
}
/**
* Get cached week number element
*/
private getWeekNumberElement(): HTMLElement | null {
if (!this.cachedWeekNumberElement) {
this.cachedWeekNumberElement = document.querySelector('swp-week-number');
}
return this.cachedWeekNumberElement;
}
/**
* Get cached date range element
*/
private getDateRangeElement(): HTMLElement | null {
if (!this.cachedDateRangeElement) {
this.cachedDateRangeElement = document.querySelector('swp-date-range');
}
return this.cachedDateRangeElement;
}
/**
* Clear cached DOM elements (call when DOM structure changes)
*/
private clearCache(): void {
this.cachedWeekNumberElement = null;
this.cachedDateRangeElement = null;
}
/**
* Setup event listeners for DOM updates
*/
@ -36,11 +68,11 @@ export class NavigationRenderer {
}
/**
* Update week info in DOM elements
* Update week info in DOM elements using cached references
*/
private updateWeekInfoInDOM(weekNumber: number, dateRange: string): void {
const weekNumberElement = document.querySelector('swp-week-number');
const dateRangeElement = document.querySelector('swp-date-range');
const weekNumberElement = this.getWeekNumberElement();
const dateRangeElement = this.getDateRangeElement();
if (weekNumberElement) {
weekNumberElement.textContent = `Week ${weekNumber}`;
@ -235,4 +267,11 @@ export class NavigationRenderer {
});
}
/**
* Public cleanup method for cached elements
*/
public destroy(): void {
this.clearCache();
}
}