ceb44446f0
Adds core calendar package components including: - Base services for events, resources, and settings - Calendar app and orchestrator - Build and bundling configuration - IndexedDB storage setup Prepares foundational architecture for calendar functionality
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)`;
|
|
}
|
|
}
|