grain.social is a photo sharing platform built on atproto.
grain.social
1let startX = 0;
2const threshold = 50;
3const onTouchStart = (e) => {
4 startX = e.touches[0].clientX;
5};
6const onTouchEnd = (e) => {
7 const endX = e.changedTouches[0].clientX;
8 const diffX = endX - startX;
9
10 if (Math.abs(diffX) > threshold) {
11 const direction = diffX > 0 ? "swiperight" : "swipeleft";
12 e.target.dispatchEvent(new CustomEvent(direction, { bubbles: true }));
13 }
14};
15const observer = new MutationObserver(() => {
16 const modal = document.getElementById("photo-dialog");
17 if (!modal) {
18 console.log("Photo Dialog not found, removing event listeners");
19 document.body.removeEventListener("touchstart", onTouchStart);
20 document.body.removeEventListener("touchend", onTouchEnd);
21 observer.disconnect();
22 }
23});
24htmx.onLoad((evt) => {
25 if (evt.id === "photo-dialog") {
26 document.body.addEventListener("touchstart", onTouchStart);
27 document.body.addEventListener("touchend", onTouchEnd);
28 }
29 const parent = document.body;
30 observer.observe(parent, { childList: true, subtree: true });
31});