nickorlow/septastic
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix autoscroll
All checks were successful
Create and publish a Docker image / build-and-push-image (push) Successful in 5m26s
Details

Browse source
This commit is contained in:
Nicholas Orlowsky 2025-10-07 19:02:30 -04:00
parent a9dc145514
commit 12e4f08a6a
No known key found for this signature in database
GPG key ID: A9F3BA4C0AA7A70B
2 changed files with 26 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

34
api/templates/route.html
View file

@ -33,17 +33,33 @@
<script>
document.addEventListener("DOMContentLoaded", () => {
document.querySelectorAll("details[data-direction-id]").forEach(details => {
const scrollToNextColumn = (directionId) => {
const target = document.getElementById("next-col-" + directionId);
if (target) {
const scrollContainer = target.closest(".tscroll");
const firstCol = scrollContainer.querySelector("th:first-child");
const firstColWidth = firstCol ? firstCol.offsetWidth : 0;
// Get the target's position relative to the scroll container
const targetLeft = target.offsetLeft;
// Scroll so the target appears right after the sticky column
scrollContainer.scrollLeft = targetLeft - firstColWidth;
}
};
document.querySelectorAll("details[data-direction-id]").forEach(details => {
const directionId = details.getAttribute("data-direction-id");
// Scroll immediately if details is already open
if (details.open) {
setTimeout(() => scrollToNextColumn(directionId), 50);
}
// Also scroll when details is opened
details.addEventListener("toggle", () => {
if (details.open) {
// Delay scroll until DOM is expanded/rendered
setTimeout(() => {
const directionId = details.getAttribute("data-direction-id");
const target = document.getElementById("next-col-" + directionId);
if (target) {
target.scrollIntoView({ behavior: "smooth", inline: "start", block: "nearest" });
}
}, 50); // Short delay to allow rendering
setTimeout(() => scrollToNextColumn(directionId), 50);
}
});
});