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

45
src/managers/GridManager.ts
View file

@ -117,12 +117,13 @@ export class GridManager {
// Clear existing grid and rebuild POC structure
this.grid.innerHTML = '';
// Create POC structure: header-spacer + time-axis + week-container + fixed scrollbars
// Create POC structure: header-spacer + time-axis + week-container + right-column + bottom spacers
this.createHeaderSpacer();
this.createRightHeaderSpacer();
this.createTimeAxis();
this.createWeekContainer();
this.createRightColumn();
this.createBottomRow();
this.createFixedScrollbars();
console.log('GridManager: Grid rendered successfully with POC structure');
}
@ -138,24 +139,26 @@ export class GridManager {
}
/**
* Create fixed scrollbars at browser edges
* Create right header spacer for scrollbar alignment
*/
private createFixedScrollbars(): void {
if (!document.body) return;
private createRightHeaderSpacer(): void {
if (!this.grid) return;
// Create right scrollbar at browser edge
const rightScrollbar = document.createElement('swp-right-scrollbar');
const rightColumn = document.createElement('swp-right-column');
rightScrollbar.appendChild(rightColumn);
document.body.appendChild(rightScrollbar);
// Create bottom scrollbar at browser edge
const bottomScrollbar = document.createElement('swp-bottom-scrollbar');
const bottomColumn = document.createElement('swp-bottom-column');
bottomScrollbar.appendChild(bottomColumn);
document.body.appendChild(bottomScrollbar);
const rightHeaderSpacer = document.createElement('swp-right-header-spacer');
this.grid.appendChild(rightHeaderSpacer);
}
/**
* Create right column for scrollbar area
*/
private createRightColumn(): void {
if (!this.grid) return;
const rightColumn = document.createElement('swp-right-column');
this.grid.appendChild(rightColumn);
}
/**
* Create time axis (positioned beside week container) like in POC
*/
@ -210,7 +213,7 @@ export class GridManager {
}
/**
* Create bottom row with spacer
* Create bottom row with spacers
*/
private createBottomRow(): void {
if (!this.grid) return;
@ -218,6 +221,14 @@ export class GridManager {
// Bottom spacer (left)
const bottomSpacer = document.createElement('swp-bottom-spacer');
this.grid.appendChild(bottomSpacer);
// Bottom middle spacer
const bottomMiddleSpacer = document.createElement('swp-bottom-middle-spacer');
this.grid.appendChild(bottomMiddleSpacer);
// Right bottom spacer
const rightBottomSpacer = document.createElement('swp-right-bottom-spacer');
this.grid.appendChild(rightBottomSpacer);
}
/**

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;