Adds drag-to-scroll functionality for schedule tables

Enables intuitive horizontal scrolling for schedule containers

Implements drag scroll interaction with:
- Smooth scrolling experience
- Prevention of interaction with nested elements
- Improved mobile and desktop usability
This commit is contained in:
Janus C. H. Knudsen 2026-01-15 17:08:12 +01:00
parent 545d6606a6
commit 531c681b7d
2 changed files with 56 additions and 0 deletions

View file

@ -426,6 +426,9 @@ class ScheduleController {
this.editBtn = document.getElementById('scheduleEditBtn');
this.scheduleTable = document.getElementById('scheduleTable');
// Drag scroll works for all schedule scroll containers (Vagtplan + Arbejdstid)
this.setupDragScroll();
if (!this.scheduleTable) return;
this.setupEditModeToggle();
@ -436,6 +439,48 @@ class ScheduleController {
this.setupDrawerSave();
}
/**
* Setup drag-to-scroll on schedule scroll containers
*/
private setupDragScroll(): void {
const scrollContainers = document.querySelectorAll('swp-schedule-scroll');
scrollContainers.forEach(container => {
const el = container as HTMLElement;
let isDown = false;
let startX = 0;
let scrollLeft = 0;
const onMouseDown = (e: MouseEvent) => {
// Don't drag if clicking on interactive elements
if ((e.target as HTMLElement).closest('swp-btn, input, select')) return;
isDown = true;
el.classList.add('dragging');
startX = e.clientX;
scrollLeft = el.scrollLeft;
};
const onMouseUp = () => {
isDown = false;
el.classList.remove('dragging');
};
const onMouseMove = (e: MouseEvent) => {
if (!isDown) return;
e.preventDefault();
const x = e.clientX;
const walk = (startX - x) * 1.5;
el.scrollLeft = scrollLeft + walk;
};
el.addEventListener('mousedown', onMouseDown);
el.addEventListener('mouseup', onMouseUp);
el.addEventListener('mouseleave', onMouseUp);
el.addEventListener('mousemove', onMouseMove);
});
}
/**
* Setup edit mode toggle button
*/