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

Refactors grid layout for scrollbar implementation

Browse source 
Updates the grid structure to correctly position the scrollbars.

Replaces fixed scrollbars with a grid-based layout using spacers and
a right column for a more integrated and maintainable solution.
This change addresses layout issues related to scrollbar positioning
and ensures better alignment across different browsers.
This commit is contained in:
Janus Knudsen 2025-07-29 23:01:00 +02:00
parent bfd2ba0272
commit 2e50679602
3 changed files with 72 additions and 62 deletions
Download patch file Download diff file Expand all files Collapse all files

18
src/managers/ScrollManager.ts
View file

@ -22,7 +22,7 @@ export class ScrollManager {
private handleHeight: number = 40;
// Horizontal scrolling
private bottomColumn: HTMLElement | null = null;
private bottomMiddleSpacer: HTMLElement | null = null;
private horizontalScrollHandle: HTMLElement | null = null;
private weekHeader: HTMLElement | null = null;
private isHorizontalDragging: boolean = false;
@ -73,7 +73,7 @@ export class ScrollManager {
}
// Setup horizontal scrolling
if (this.bottomColumn && this.scrollableContent && this.weekHeader) {
if (this.bottomMiddleSpacer && this.scrollableContent && this.weekHeader) {
this.createHorizontalScrollHandle();
this.setupHorizontalScrollSynchronization();
this.calculateHorizontalScrollBounds();
@ -91,12 +91,12 @@ export class ScrollManager {
this.timeAxis = document.querySelector('swp-time-axis');
// Horizontal scrolling elements
this.bottomColumn = document.querySelector('swp-bottom-column');
this.bottomMiddleSpacer = document.querySelector('swp-bottom-middle-spacer');
this.weekHeader = document.querySelector('swp-week-header');
console.log('ScrollManager: Found elements:', {
rightColumn: !!this.rightColumn,
bottomColumn: !!this.bottomColumn,
bottomMiddleSpacer: !!this.bottomMiddleSpacer,
scrollableContent: !!this.scrollableContent,
weekHeader: !!this.weekHeader
});
@ -399,13 +399,13 @@ export class ScrollManager {
}
/**
* Create and add horizontal scroll handle to bottom column
* Create and add horizontal scroll handle to bottom middle spacer
*/
private createHorizontalScrollHandle(): void {
if (!this.bottomColumn) return;
if (!this.bottomMiddleSpacer) return;
// Remove existing handle if any
const existingHandle = this.bottomColumn.querySelector('swp-horizontal-scroll-handle');
const existingHandle = this.bottomMiddleSpacer.querySelector('swp-horizontal-scroll-handle');
if (existingHandle) {
existingHandle.remove();
}
@ -414,14 +414,14 @@ export class ScrollManager {
this.horizontalScrollHandle = document.createElement('swp-horizontal-scroll-handle');
this.horizontalScrollHandle.addEventListener('mousedown', this.handleHorizontalMouseDown.bind(this));
this.bottomColumn.appendChild(this.horizontalScrollHandle);
this.bottomMiddleSpacer.appendChild(this.horizontalScrollHandle);
}
/**
* Calculate horizontal scroll bounds based on content and container widths
*/
private calculateHorizontalScrollBounds(): void {
if (!this.scrollableContent || !this.bottomColumn) return;
if (!this.scrollableContent || !this.bottomMiddleSpacer) return;
const contentWidth = this.scrollableContent.scrollWidth;
const containerWidth = this.scrollableContent.clientWidth;