69 lines
1.5 KiB
JavaScript
69 lines
1.5 KiB
JavaScript
export function initTimelineZoom() {
|
|
const timelineWrap = document.querySelector(".timeline-wrap");
|
|
const zoomButtons = document.querySelectorAll("[data-zoom]");
|
|
|
|
if (!timelineWrap || !zoomButtons.length) {
|
|
return;
|
|
}
|
|
|
|
const savedZoom = localStorage.getItem("tvguideTimelineZoom") || "2";
|
|
|
|
const applyZoom = (zoom) => {
|
|
timelineWrap.style.setProperty("--minute-width", `${zoom}px`);
|
|
|
|
zoomButtons.forEach((button) => {
|
|
button.classList.toggle("active", button.dataset.zoom === zoom);
|
|
});
|
|
|
|
localStorage.setItem("tvguideTimelineZoom", zoom);
|
|
};
|
|
|
|
zoomButtons.forEach((button) => {
|
|
button.addEventListener("click", () => {
|
|
applyZoom(button.dataset.zoom);
|
|
});
|
|
});
|
|
|
|
applyZoom(savedZoom);
|
|
}
|
|
|
|
export function initTimelineDrag() {
|
|
const timeline = document.querySelector(".timeline-wrap");
|
|
|
|
if (!timeline) {
|
|
return;
|
|
}
|
|
|
|
let isDragging = false;
|
|
let startX = 0;
|
|
let scrollLeft = 0;
|
|
|
|
timeline.addEventListener("mousedown", (event) => {
|
|
if (event.target.closest(".timeline-programme")) {
|
|
return;
|
|
}
|
|
|
|
isDragging = true;
|
|
timeline.classList.add("dragging");
|
|
|
|
startX = event.pageX;
|
|
scrollLeft = timeline.scrollLeft;
|
|
});
|
|
|
|
document.addEventListener("mouseup", () => {
|
|
isDragging = false;
|
|
timeline.classList.remove("dragging");
|
|
});
|
|
|
|
document.addEventListener("mousemove", (event) => {
|
|
if (!isDragging) {
|
|
return;
|
|
}
|
|
|
|
event.preventDefault();
|
|
|
|
const walk = event.pageX - startX;
|
|
timeline.scrollLeft = scrollLeft - walk;
|
|
});
|
|
}
|