Cold-Air-Networks/customer-riverside
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Simplify swipe: direction-detect on touchend only

Browse source 
Drop live drag tracking, rubber-band resistance, and dragging ref.
A swipe > 50px left/right calls next()/prev() — same result, far less code.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Philip Peterson 2026-06-03 01:41:13 -07:00
parent 52af78a31a
commit d693e87e02
1 changed files with 5 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
web/modules/custom/riverside_pt/js/components/rpt-testimonials.js
View file

@ -76,35 +76,15 @@ function Testimonials() {
}, []);
var touchStartX = useRef(0);
var touchStartLeft = useRef(0);
var dragging = useRef(false);
var onTouchStart = function (e) {
touchStartX.current = e.touches[0].clientX;
touchStartLeft.current = leftRef.current;
dragging.current = true;
};
var onTouchMove = function (e) {
if (!dragging.current) return;
var delta = e.touches[0].clientX - touchStartX.current;
var max = measureMax();
var raw = touchStartLeft.current + delta;
// allow slight overscroll resistance at the edges
if (raw > 0) raw = raw / 3;
if (raw < -max) raw = -max + (raw + max) / 3;
setLeft(raw);
};
var onTouchEnd = function () {
if (!dragging.current) return;
dragging.current = false;
var max = measureMax();
setLeft(function (l) {
var clamped = Math.min(0, Math.max(-max, l));
// snap to nearest card boundary
return -Math.round(-clamped / STEP) * STEP;
});
var onTouchEnd = function (e) {
var delta = e.changedTouches[0].clientX - touchStartX.current;
if (delta < -50) next();
else if (delta > 50) prev();
};
var atStart = left >= 0;
@ -138,9 +118,8 @@ function Testimonials() {
<div
ref=${trackRef}
onTouchStart=${onTouchStart}
onTouchMove=${onTouchMove}
onTouchEnd=${onTouchEnd}
style=${{ position: "relative", top: 0, left: left + "px", transition: dragging.current ? "none" : "left 0.5s ease", display: "flex", gap: GAP + "px", paddingBottom: "2px" }}
style=${{ position: "relative", top: 0, left: left + "px", transition: "left 0.5s ease", display: "flex", gap: GAP + "px", paddingBottom: "2px" }}
>
${TESTIMONIALS.map(function (t, i) { return html`
<div key=${i} style=${{ width: CARD_W + "px", flexShrink: 0 }} class="border border-gray-200 rounded-lg p-6 flex flex-col gap-5 bg-white">