From e3223f3a3f9857b11aa39879a23d79f1de6ec523 Mon Sep 17 00:00:00 2001
From: Varun Patil <radialapps@gmail.com>
Date: Wed, 22 Nov 2023 12:02:47 -0800
Subject: [PATCH] timeline: prevent swipe on scroller (fix #937)

Signed-off-by: Varun Patil <radialapps@gmail.com>
---
 src/components/SwipeRefresh.vue | 21 +++++++++++++++++++++
 src/components/Timeline.vue     |  1 +
 2 files changed, 22 insertions(+)

diff --git a/src/components/SwipeRefresh.vue b/src/components/SwipeRefresh.vue
index 8b23f678..ae605c6a 100644
--- a/src/components/SwipeRefresh.vue
+++ b/src/components/SwipeRefresh.vue
@@ -14,20 +14,36 @@ export default defineComponent({
   name: 'SwipeRefresh',
 
   props: {
+    /** Callback to execute when the user swipes down */
     refresh: {
       type: Function as PropType<() => Promise<any>>,
       required: true,
     },
 
+    /** Whether to allow the swipe action */
     allowSwipe: {
       type: Boolean,
       default: true,
     },
 
+    /**
+     * A unique identifier for the swipe action.
+     * If the state changes, the swipe action is reset.
+     */
     state: {
       type: Number,
       default: Math.random(),
     },
+
+    /**
+     * An ancestor element of the touch action
+     * target must match this query selector to be
+     * eligible for the swipe action.
+     */
+    match: {
+      type: String,
+      default: '',
+    },
   },
 
   data: () => ({
@@ -131,6 +147,11 @@ export default defineComponent({
     touchstart(event: TouchEvent) {
       if (!this.allowSwipe) return;
       const touch = event.touches[0];
+
+      // Check if top element matches selector
+      if (this.match && !(<HTMLElement>touch.target).closest(this.match)) return;
+
+      // Start swipe action
       this.end = this.start = touch.clientY;
       this.progress = 0;
       this.on = true;
diff --git a/src/components/Timeline.vue b/src/components/Timeline.vue
index 170d18f0..9e06df85 100644
--- a/src/components/Timeline.vue
+++ b/src/components/Timeline.vue
@@ -2,6 +2,7 @@
   <SwipeRefresh
     class="container no-user-select"
     ref="container"
+    match=".recycler"
     :refresh="softRefreshSync"
     :allowSwipe="allowSwipe"
     :state="state"