More actions
No edit summary |
No edit summary |
||
Line 10: | Line 10: | ||
let startX; | let startX; | ||
let scrollStart; | let scrollStart; | ||
let movedEnough = false; | |||
carousel.addEventListener("pointerdown", function (e) { | carousel.addEventListener("pointerdown", function (e) { | ||
isDragging = true; | isDragging = true; | ||
movedEnough = false; | |||
carousel.classList.add("dragging"); | carousel.classList.add("dragging"); | ||
startX = e.pageX; | startX = e.pageX; | ||
Line 23: | Line 25: | ||
if (!isDragging) return; | if (!isDragging) return; | ||
const x = e.pageX; | const x = e.pageX; | ||
const walk = (x - startX) * 1.5; | const walk = (x - startX) * 1; | ||
if (Math.abs(walk) > 5) movedEnough = true; | |||
carousel.scrollLeft = scrollStart - walk; | carousel.scrollLeft = scrollStart - walk; | ||
e.preventDefault(); | e.preventDefault(); | ||
Line 37: | Line 40: | ||
carousel.classList.remove("dragging"); | carousel.classList.remove("dragging"); | ||
}); | }); | ||
// Block link clicks if a drag occurred | |||
carousel.addEventListener("click", function (e) { | |||
if (movedEnough) { | |||
e.preventDefault(); | |||
e.stopImmediatePropagation(); | |||
} | |||
}, true); // capture phase | |||
}); | }); | ||
}); | }); |
Revision as of 14:54, 30 May 2025
/* Any JavaScript here will be loaded for all users on every page load. */ mw.loader.using('jquery', function () { $(function () { const carousel = document.querySelector('.card-carousel'); if (!carousel) return; let isDragging = false; let startX; let scrollStart; let movedEnough = false; carousel.addEventListener("pointerdown", function (e) { isDragging = true; movedEnough = false; carousel.classList.add("dragging"); startX = e.pageX; scrollStart = carousel.scrollLeft; carousel.setPointerCapture(e.pointerId); e.preventDefault(); }); carousel.addEventListener("pointermove", function (e) { if (!isDragging) return; const x = e.pageX; const walk = (x - startX) * 1; if (Math.abs(walk) > 5) movedEnough = true; carousel.scrollLeft = scrollStart - walk; e.preventDefault(); }); carousel.addEventListener("pointerup", function () { isDragging = false; carousel.classList.remove("dragging"); }); carousel.addEventListener("pointerleave", function () { isDragging = false; carousel.classList.remove("dragging"); }); // Block link clicks if a drag occurred carousel.addEventListener("click", function (e) { if (movedEnough) { e.preventDefault(); e.stopImmediatePropagation(); } }, true); // capture phase }); });