luisgulo/photoprism
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Frontend: Add touch event listeners #242

Browse source 
Signed-off-by: Michael Mayer <michael@liquidbytes.net>
This commit is contained in:
Michael Mayer 2020-03-24 16:15:28 +01:00
parent d4b6eb1929
commit c19cefd5df
2 changed files with 41 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
frontend/src/pages/album/photos.vue
View file

@ -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]);
}

21
frontend/src/pages/photos.vue
View file

@ -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]);
}