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
});
});