More actions
No edit summary |
No edit summary |
||
(3 intermediate revisions by the same user not shown) | |||
Line 4: | Line 4: | ||
mw.loader.using('jquery', function () { | mw.loader.using('jquery', function () { | ||
$(function () { | $(function () { | ||
const | const carousels = document.querySelectorAll('.card-carousel'); | ||
carousels.forEach((carousel) => { | |||
let isDragging = false; | |||
let startX; | |||
let scrollStart; | |||
let movedEnough = false; | |||
carousel.addEventListener("pointerdown", function (e) { | |||
// Skip custom drag if user is clicking on the scrollbar | |||
const isScrollbarClick = ( | |||
e.offsetY > carousel.clientHeight || | |||
e.offsetY < 0 | |||
); | |||
if (isScrollbarClick) return; | |||
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) { | |||
carousel.classList.remove("dragging"); | if (!isDragging) return; | ||
const x = e.pageX; | |||
const walk = (x - startX) * 0.75; | |||
if (Math.abs(walk) > 5) movedEnough = true; | |||
carousel.scrollLeft = scrollStart - walk; | |||
e.preventDefault(); | |||
}); | |||
const endDrag = () => { | |||
isDragging = false; | |||
carousel.classList.remove("dragging"); | |||
}; | |||
carousel.addEventListener("pointerup", endDrag); | |||
carousel.addEventListener("pointerleave", endDrag); | |||
// Block clicks if drag occurred | |||
carousel.addEventListener("click", function (e) { | |||
if (movedEnough) { | |||
e.preventDefault(); | |||
e.stopImmediatePropagation(); | |||
} | |||
}, true); // useCapture = true | |||
}); | }); | ||
}); | }); | ||
}); | }); |
Latest revision as of 16:05, 30 May 2025
/* Any JavaScript here will be loaded for all users on every page load. */ mw.loader.using('jquery', function () { $(function () { const carousels = document.querySelectorAll('.card-carousel'); carousels.forEach((carousel) => { let isDragging = false; let startX; let scrollStart; let movedEnough = false; carousel.addEventListener("pointerdown", function (e) { // Skip custom drag if user is clicking on the scrollbar const isScrollbarClick = ( e.offsetY > carousel.clientHeight || e.offsetY < 0 ); if (isScrollbarClick) return; 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) * 0.75; if (Math.abs(walk) > 5) movedEnough = true; carousel.scrollLeft = scrollStart - walk; e.preventDefault(); }); const endDrag = () => { isDragging = false; carousel.classList.remove("dragging"); }; carousel.addEventListener("pointerup", endDrag); carousel.addEventListener("pointerleave", endDrag); // Block clicks if drag occurred carousel.addEventListener("click", function (e) { if (movedEnough) { e.preventDefault(); e.stopImmediatePropagation(); } }, true); // useCapture = true }); }); });