@carbon/ibm-products-web-components
Version:
Carbon for IBM Products Web Components
110 lines (107 loc) • 3.55 kB
JavaScript
/**
* Copyright IBM Corp. 2024
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
/**
* Copyright IBM Corp. 2025
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
const registerSwipeEvents = (carousel, next, prev, destroy) => {
const minSwipeDistance = 50;
// Touch support
let touchStartX = null;
let touchEndX = null;
let lastScrollTime = 0;
const scrollCoolDown = 400;
let isMouseDown = false;
let mouseStartX = null;
let mouseEndX = null;
//handlers
const touchStartHandler = (e) => {
touchStartX = e.touches[0].clientX;
};
const touchMoveHandler = (e) => {
touchEndX = e.touches[0].clientX;
};
const touchEndHandler = () => {
if (touchStartX !== null && touchEndX !== null) {
const distance = touchStartX - touchEndX;
if (Math.abs(distance) > minSwipeDistance) {
if (distance > 0) {
next();
}
else {
prev();
}
}
}
touchStartX = null;
touchEndX = null;
};
const mouseDownHandler = (e) => {
isMouseDown = true;
mouseStartX = e.clientX;
};
const mouseMoveHandler = (e) => {
if (!isMouseDown) {
return;
}
mouseEndX = e.clientX;
};
const mouseUpHandler = () => {
if (isMouseDown && mouseStartX !== null && mouseEndX !== null) {
const distance = mouseStartX - mouseEndX;
if (Math.abs(distance) > minSwipeDistance) {
if (distance > 0) {
next();
}
else {
prev();
}
}
}
isMouseDown = false;
mouseStartX = null;
mouseEndX = null;
};
const wheelHandler = (e) => {
const now = Date.now();
if (Math.abs(e.deltaX) > Math.abs(e.deltaY) && Math.abs(e.deltaX) > 20) {
e.preventDefault(); // Prevent page from scrolling
if (now - lastScrollTime < scrollCoolDown) {
return;
}
if (e.deltaX > 0) {
next();
}
else {
prev();
}
lastScrollTime = now;
}
};
if (destroy) {
carousel.removeEventListener('touchstart', touchStartHandler);
carousel.removeEventListener('touchmove', touchMoveHandler);
carousel.removeEventListener('touchend', touchEndHandler);
carousel.removeEventListener('mousedown', mouseDownHandler);
carousel.removeEventListener('mousemove', mouseMoveHandler);
carousel.removeEventListener('mouseup', mouseUpHandler);
carousel.removeEventListener('wheel', wheelHandler);
}
carousel.addEventListener('touchstart', touchStartHandler);
carousel.addEventListener('touchmove', touchMoveHandler);
carousel.addEventListener('touchend', touchEndHandler);
// Mouse drag support
carousel.addEventListener('mousedown', mouseDownHandler);
carousel.addEventListener('mousemove', mouseMoveHandler);
carousel.addEventListener('mouseup', mouseUpHandler);
// Wheel gesture support
carousel.addEventListener('wheel', wheelHandler);
};
export { registerSwipeEvents };
//# sourceMappingURL=swipeEvents.js.map