From 8aa40deca8e1783151d5e3ed14da725aca59eae0 Mon Sep 17 00:00:00 2001
From: Arthur Baileys Li <arthurlitovko@gmail.com>
Date: Thu, 8 Aug 2024 19:49:22 +0300
Subject: [PATCH] Listen touches only on small screens

---
 view/main/index.ts | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/view/main/index.ts b/view/main/index.ts
index 8a7f768..3d83276 100644
--- a/view/main/index.ts
+++ b/view/main/index.ts
@@ -20,11 +20,11 @@ function changeExpanded(willBeExpanded = false): void {
   document.body.classList.toggle('is-main-collapsed', !isExpanded)
 }
 
-main.addEventListener('touchstart', event => {
+function onTouchStart(event: TouchEvent): void {
   startY = event.touches[0].clientY
-})
+}
 
-main.addEventListener('touchmove', event => {
+function onTouchMove(event: TouchEvent): void {
   event.preventDefault()
   let endY = event.changedTouches[0].clientY
   let diff = endY - startY
@@ -34,9 +34,9 @@ main.addEventListener('touchmove', event => {
   if (allowPositive || allowNegative) {
     main.style.setProperty('--touch-diff', `${diff}px`)
   }
-})
+}
 
-main.addEventListener('touchend', event => {
+function onTouchEnd(event: TouchEvent): void {
   let endY = event.changedTouches[0].clientY
   let diff = startY - endY
 
@@ -45,7 +45,7 @@ main.addEventListener('touchend', event => {
   if (Math.abs(diff) > THRESHOLD) {
     changeExpanded(diff > 0)
   }
-})
+}
 
 function onScroll(): void {
   changeExpanded(false)
@@ -54,8 +54,14 @@ function onScroll(): void {
 function init(): void {
   if (mobile.matches) {
     window.addEventListener('scroll', onScroll, { once: true })
+    main.addEventListener('touchstart', onTouchStart)
+    main.addEventListener('touchmove', onTouchMove)
+    main.addEventListener('touchend', onTouchEnd)
   } else {
     window.removeEventListener('scroll', onScroll)
+    main.removeEventListener('touchstart', onTouchStart)
+    main.removeEventListener('touchmove', onTouchMove)
+    main.removeEventListener('touchend', onTouchEnd)
   }
 }