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:
parent
545d6606a6
commit
531c681b7d
2 changed files with 56 additions and 0 deletions
|
|
@ -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
|
||||
*/
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue