From c19cefd5df25bc840c46df1dbe507c6c5356d30b Mon Sep 17 00:00:00 2001
From: Michael Mayer <michael@liquidbytes.net>
Date: Tue, 24 Mar 2020 16:15:28 +0100
Subject: [PATCH] Frontend: Add touch event listeners #242

Signed-off-by: Michael Mayer <michael@liquidbytes.net>
---
 frontend/src/pages/album/photos.vue | 23 +++++++++++++++++++++--
 frontend/src/pages/photos.vue       | 21 ++++++++++++++++++++-
 2 files changed, 41 insertions(+), 3 deletions(-)

diff --git a/frontend/src/pages/album/photos.vue b/frontend/src/pages/album/photos.vue
index 2877e7966..913ffb965 100644
--- a/frontend/src/pages/album/photos.vue
+++ b/frontend/src/pages/album/photos.vue
@@ -93,7 +93,8 @@
                 filter: filter,
                 lastFilter: {},
                 routeName: routeName,
-                loading: true
+                loading: true,
+                touchStart: 0,
             };
         },
         methods: {
@@ -333,7 +334,19 @@
 
                         break;
                 }
-            }
+            },
+            onTouchStart(e) {
+                this.touchStart = e.touches[0].pageY;
+            },
+            onTouchMove(e) {
+                const y = e.touches[0].pageY;
+
+                if(window.scrollY >= window.innerHeight && y < this.touchStart + 200) {
+                    this.loadMore();
+                } else if (window.scrollY === 0 && y > this.touchStart + 200) {
+                    this.refresh();
+                }
+            },
         },
         created() {
             this.findAlbum();
@@ -341,8 +354,14 @@
 
             this.subscriptions.push(Event.subscribe("albums.updated", (ev, data) => this.onAlbumsUpdated(ev, data)));
             this.subscriptions.push(Event.subscribe("photos", (ev, data) => this.onUpdate(ev, data)));
+
+            window.addEventListener('touchstart', (e) => this.onTouchStart(e), {passive: true});
+            window.addEventListener('touchmove', (e) => this.onTouchMove(e), {passive: true});
         },
         destroyed() {
+            window.removeEventListener('touchstart', (e) => this.onTouchStart(e), false);
+            window.removeEventListener('touchmove', (e) => this.onTouchMove(e), false);
+
             for (let i = 0; i < this.subscriptions.length; i++) {
                 Event.unsubscribe(this.subscriptions[i]);
             }
diff --git a/frontend/src/pages/photos.vue b/frontend/src/pages/photos.vue
index f7a010829..6be9750c1 100644
--- a/frontend/src/pages/photos.vue
+++ b/frontend/src/pages/photos.vue
@@ -96,6 +96,7 @@
                 lastFilter: {},
                 routeName: routeName,
                 loading: true,
+                touchStart: 0,
             };
         },
         computed: {
@@ -332,15 +333,33 @@
                     default:
                         console.warn("unexpected event type", ev);
                 }
-            }
+            },
+            onTouchStart(e) {
+                this.touchStart = e.touches[0].pageY;
+            },
+            onTouchMove(e) {
+                const y = e.touches[0].pageY;
+
+                if(window.scrollY >= window.innerHeight && y < this.touchStart + 200) {
+                    this.loadMore();
+                } else if (window.scrollY === 0 && y > this.touchStart + 200) {
+                    this.refresh();
+                }
+            },
         },
         created() {
             this.search();
 
             this.subscriptions.push(Event.subscribe("import.completed", (ev, data) => this.onImportCompleted(ev, data)));
             this.subscriptions.push(Event.subscribe("photos", (ev, data) => this.onUpdate(ev, data)));
+
+            window.addEventListener('touchstart', (e) => this.onTouchStart(e), {passive: true});
+            window.addEventListener('touchmove', (e) => this.onTouchMove(e), {passive: true});
         },
         destroyed() {
+            window.removeEventListener('touchstart', (e) => this.onTouchStart(e), false);
+            window.removeEventListener('touchmove', (e) => this.onTouchMove(e), false);
+
             for(let i = 0; i < this.subscriptions.length; i++) {
                 Event.unsubscribe(this.subscriptions[i]);
             }