Merge pull request #112 from acmauth/109-sensitive-swiping

fixed sensitive swiping
acmauth · Mar 8, 2024 · 6f5cc31 · 6f5cc31
2 parents 1c06861 + 324c1c4
commit 6f5cc31
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 34 deletions.
diff --git a/src/lib/components/recentResults/recents.svelte b/src/lib/components/recentResults/recents.svelte
@@ -108,7 +108,7 @@
 <div class="recentGrades ion-padding">
 
     {#if recentItems.length === 0}
-            <p>Δεν υπάρχουν πρόσφατες αποτελέσματα</p>
+            <p class="ion-padding">Δεν υπάρχουν πρόσφατα</p>
     {:else}
         {#each recentItems as recentItem } 
             {#if recentItem.type === "recentGrade"}
@@ -152,4 +152,4 @@
         --border-radius: 1rem;
         --box-shadow: var(--shadow-short-md);
     }
-</style>
+</style>
diff --git a/src/lib/components/recentResults/swipeCard.svelte b/src/lib/components/recentResults/swipeCard.svelte
@@ -11,10 +11,8 @@
      * @type any
      */
     let card;
-    /**
-     * @type any
-    */
-    let startX;
+    
+    
     let dispatch = createEventDispatcher();
 
     onMount(() => {
@@ -26,24 +24,48 @@
       dispatch("delete-card", id);
     };
   
+    /**
+     * @type any
+    */
+    let startX;
+    /**
+     * @type any
+    */
+    let startY;
     /**
    * event that happens when the user touches a card
 	 * @param {{ touches: { clientX: any; }[]; }} event
 	 */
     function handleTouchStart(event) {
       startX = event.touches[0].clientX;
+      startY = event.touches[0].clientY;
       card.style.transition = "none";
     }
   
+    let isScrolling = false;
   /**
    * swipe motion when user moves the card
 	 * @param {{ touches: { clientX: any; }[]; }} event
 	 */
     function handleTouchMove(event) {
       const currentX = event.touches[0].clientX;
+      const currentY = event.touches[0].clientY;
       const deltaX = currentX - startX;
-  
-      card.style.transform = `translateX(${deltaX}px)`;
+      const deltaY = currentY - startY;
+
+      // Calculate the absolute values of deltaX and deltaY
+      const absDeltaX = Math.abs(deltaX);
+      const absDeltaY = Math.abs(deltaY);
+
+      // Only allow horizontal swipes if the horizontal movement is greater than vertical movement
+      if (absDeltaX > absDeltaY && absDeltaX > 10) {
+        // event.preventDefault(); // Prevent vertical scrolling while swiping horizontally
+        card.style.transform = `translateX(${deltaX}px)`;
+      }else {
+        isScrolling = true;
+        card.style.transition = "none";
+        card.style.transform = "translateX(0)"; 
+      }
     }
   
   /**
@@ -53,32 +75,39 @@
     function handleTouchEnd(event) {
       const endX = event.changedTouches[0].clientX;
       const deltaX = endX - startX;
-  
-      if (deltaX < -100) {
-        // Swipe left, smoothly transition to the left
-        card.style.transition = "transform 0.3s ease";
-        card.style.transform = `translateX(-100%)`;
-  
-        // Trigger delete after the transition is complete
-        setTimeout(() => {
-          handleDelete(id);
-          resetCardTransform();
-        }, 300);
-      } else if (deltaX > 100) {
-        // Swipe right, smoothly transition to the right
-        card.style.transition = "transform 0.3s ease";
-        card.style.transform = `translateX(100%)`;
-  
-        // Trigger delete after the transition is complete
-        setTimeout(() => {
-          handleDelete(id);
-          resetCardTransform();
-        }, 300);
-      } else {
-        // Reset position if not swiped far enough
-        card.style.transition = "transform 0.3s ease";
+
+      if (!isScrolling){
+        if (deltaX < -100) {
+          // Swipe left, smoothly transition to the left
+          card.style.transition = "transform 0.2s ease";
+          card.style.transform = `translateX(-100%)`;
+    
+          // Trigger delete after the transition is complete
+          setTimeout(() => {
+            handleDelete(id);
+            resetCardTransform();
+          }, 300);
+        } else if (deltaX > 100) {
+          // Swipe right, smoothly transition to the right
+          card.style.transition = "transform 0.2s ease";
+          card.style.transform = `translateX(100%)`;
+    
+          // Trigger delete after the transition is complete
+          setTimeout(() => {
+            handleDelete(id);
+            resetCardTransform();
+          }, 300);
+        } else {
+          // Reset position if not swiped far enough
+          card.style.transition = "transform 0.2s ease";
+          card.style.transform = "translateX(0)";
+        }
+      }else{
+        card.style.transition = "none"
         card.style.transform = "translateX(0)";
       }
+      
+      isScrolling = false;
     }
   
     function resetCardTransform() {

diff --git a/src/routes/pages/homepage/+page.svelte b/src/routes/pages/homepage/+page.svelte
@@ -192,7 +192,7 @@
 			</div>
 			<p class="info-text"><b>Χρήσιμες πληροφορίες</b></p>
 			<AppletsSlides />
-			<p style="margin-top: 1.5rem" class="info-text"><b>Πρόσφατοι βαθμοί</b></p>
+			<p style="margin-top: 1.5rem" class="info-text"><b>Πρόσφατα</b></p>
 			<RecentItems />
 		{:catch error}
 			<p>{error.message}</p>
@@ -313,4 +313,4 @@
 		justify-content: center;
 		align-items: center; 
 	}
-</style>
+</style>