863b433eba
Consolidates V2 codebase into main project directory Updates build script to support simplified entry points Removes redundant files and cleans up project organization Simplifies module imports and entry points for calendar application
42 lines
1.8 KiB
TypeScript
42 lines
1.8 KiB
TypeScript
export class ScrollManager {
|
|
private scrollableContent!: HTMLElement;
|
|
private timeAxisContent!: HTMLElement;
|
|
private calendarHeader!: HTMLElement;
|
|
private headerDrawer!: HTMLElement;
|
|
private headerViewport!: HTMLElement;
|
|
private headerSpacer!: HTMLElement;
|
|
private resizeObserver!: ResizeObserver;
|
|
|
|
init(container: HTMLElement): void {
|
|
this.scrollableContent = container.querySelector('swp-scrollable-content')!;
|
|
this.timeAxisContent = container.querySelector('swp-time-axis-content')!;
|
|
this.calendarHeader = container.querySelector('swp-calendar-header')!;
|
|
this.headerDrawer = container.querySelector('swp-header-drawer')!;
|
|
this.headerViewport = container.querySelector('swp-header-viewport')!;
|
|
this.headerSpacer = container.querySelector('swp-header-spacer')!;
|
|
|
|
this.scrollableContent.addEventListener('scroll', () => this.onScroll());
|
|
|
|
// Synkroniser header-spacer højde med header-viewport
|
|
this.resizeObserver = new ResizeObserver(() => this.syncHeaderSpacerHeight());
|
|
this.resizeObserver.observe(this.headerViewport);
|
|
this.syncHeaderSpacerHeight();
|
|
}
|
|
|
|
private syncHeaderSpacerHeight(): void {
|
|
// Kopier den faktiske computed height direkte fra header-viewport
|
|
const computedHeight = getComputedStyle(this.headerViewport).height;
|
|
this.headerSpacer.style.height = computedHeight;
|
|
}
|
|
|
|
private onScroll(): void {
|
|
const { scrollTop, scrollLeft } = this.scrollableContent;
|
|
|
|
// Synkroniser time-axis vertikalt
|
|
this.timeAxisContent.style.transform = `translateY(-${scrollTop}px)`;
|
|
|
|
// Synkroniser header og drawer horisontalt
|
|
this.calendarHeader.style.transform = `translateX(-${scrollLeft}px)`;
|
|
this.headerDrawer.style.transform = `translateX(-${scrollLeft}px)`;
|
|
}
|
|
}
|