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

Mobile: Prevent like on touch swipe #953

Browse source 
Fugly hack that seems to work well for now.
This commit is contained in:
Michael Mayer 2021-01-25 14:48:15 +01:00
parent e6a8c596a9
commit db31d12270
10 changed files with 166 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

44
frontend/src/component/photo/cards.vue
View file

@ -104,10 +104,10 @@
<v-btn :ripple="false"
icon flat absolute
class="input-favorite"
@touchstart.stop.prevent="photo.toggleLike()"
@touchend.stop.prevent
@touchstart.stop.prevent="onTouchStart($event, index)"
@touchend.stop.prevent="toggleLike($event, index)"
@touchmove.stop.prevent
@click.stop.prevent="photo.toggleLike()">
@click.stop.prevent="toggleLike($event, index)">
<v-icon color="white" class="select-on">favorite</v-icon>
<v-icon color="white" class="select-off">favorite_border</v-icon>
</v-btn>
@ -221,6 +221,11 @@ export default {
video: this.$gettext("Video"),
name: this.$gettext("Name"),
},
touchStart: {
index: -1,
scrollY: window.scrollY,
timeStamp: -1,
},
mouseDown: {
index: -1,
scrollY: window.scrollY,
@ -246,6 +251,37 @@ export default {
const photo = this.photos[index];
download(`/api/v1/dl/${photo.Hash}?t=${this.$config.downloadToken()}`, photo.FileName);
},
onTouchStart(ev, index) {
this.touchStart.index = index;
this.touchStart.scrollY = window.scrollY;
this.touchStart.timeStamp = ev.timeStamp;
},
resetTouchStart() {
this.touchStart.index = -1;
this.touchStart.scrollY = window.scrollY;
this.touchStart.timeStamp = -1;
},
isClick(ev, index) {
if (this.touchStart.timeStamp < 0) return true;
return this.touchStart.index === index
&& (ev.timeStamp - this.touchStart.timeStamp) < 200
&& (this.touchStart.scrollY - window.scrollY) === 0;
},
toggleLike(ev, index) {
if (!this.isClick(ev, index)) {
this.resetTouchStart();
return;
}
const photo = this.photos[index];
if (!photo) {
return;
}
photo.toggleLike();
},
onSelect(ev, index) {
if (ev.shiftKey) {
this.selectRange(index);
@ -259,7 +295,7 @@ export default {
this.mouseDown.timeStamp = ev.timeStamp;
},
onClick(ev, index) {
const longClick = (this.mouseDown.index === index && ev.timeStamp - this.mouseDown.timeStamp > 400);
const longClick = (this.mouseDown.index === index && (ev.timeStamp - this.mouseDown.timeStamp) > 400);
const scrolled = (this.mouseDown.scrollY - window.scrollY) !== 0;
if (scrolled) {

2
frontend/src/component/photo/list.vue
View file

@ -181,7 +181,7 @@ export default {
this.mouseDown.timeStamp = ev.timeStamp;
},
onClick(ev, index) {
const longClick = (this.mouseDown.index === index && ev.timeStamp - this.mouseDown.timeStamp > 400);
const longClick = (this.mouseDown.index === index && (ev.timeStamp - this.mouseDown.timeStamp) > 400);
const scrolled = (this.mouseDown.scrollY - window.scrollY) !== 0;
if (scrolled) {

44
frontend/src/component/photo/mosaic.vue
View file

@ -103,10 +103,10 @@
<v-btn :ripple="false"
icon flat small absolute
class="input-favorite"
@touchstart.stop.prevent="photo.toggleLike()"
@touchend.stop.prevent
@touchstart.stop.prevent="onTouchStart($event, index)"
@touchend.stop.prevent="toggleLike($event, index)"
@touchmove.stop.prevent
@click.stop.prevent="photo.toggleLike()">
@click.stop.prevent="toggleLike($event, index)">
<v-icon color="white" class="select-on">favorite</v-icon>
<v-icon color="white" class="select-off">favorite_border</v-icon>
</v-btn>
@ -131,6 +131,11 @@ export default {
data() {
return {
hidePrivate: this.$config.settings().features.private,
touchStart: {
index: -1,
scrollY: window.scrollY,
timeStamp: -1,
},
mouseDown: {
index: -1,
scrollY: window.scrollY,
@ -150,6 +155,37 @@ export default {
const player = this.livePlayer(photo);
if (player) player.pause();
},
onTouchStart(ev, index) {
this.touchStart.index = index;
this.touchStart.scrollY = window.scrollY;
this.touchStart.timeStamp = ev.timeStamp;
},
resetTouchStart() {
this.touchStart.index = -1;
this.touchStart.scrollY = window.scrollY;
this.touchStart.timeStamp = -1;
},
isClick(ev, index) {
if (this.touchStart.timeStamp < 0) return true;
return this.touchStart.index === index
&& (ev.timeStamp - this.touchStart.timeStamp) < 200
&& (this.touchStart.scrollY - window.scrollY) === 0;
},
toggleLike(ev, index) {
if (!this.isClick(ev, index)) {
this.resetTouchStart();
return;
}
const photo = this.photos[index];
if (!photo) {
return;
}
photo.toggleLike();
},
onSelect(ev, index) {
if (ev.shiftKey) {
this.selectRange(index);
@ -166,7 +202,7 @@ export default {
this.$clipboard.toggle(photo);
},
onClick(ev, index) {
const longClick = (this.mouseDown.index === index && ev.timeStamp - this.mouseDown.timeStamp > 400);
const longClick = (this.mouseDown.index === index && (ev.timeStamp - this.mouseDown.timeStamp) > 400);
const scrolled = (this.mouseDown.scrollY - window.scrollY) !== 0;
if (scrolled) {

44
frontend/src/pages/albums.vue
View file

@ -127,10 +127,10 @@
<v-btn :ripple="false"
icon flat absolute
class="input-favorite"
@touchstart.stop.prevent="album.toggleLike()"
@touchend.stop.prevent
@touchstart.stop.prevent="onTouchStart($event, index)"
@touchend.stop.prevent="toggleLike($event, index)"
@touchmove.stop.prevent
@click.stop.prevent="album.toggleLike()">
@click.stop.prevent="toggleLike($event, index)">
<v-icon color="#FFD600" class="select-on">star</v-icon>
<v-icon color="white" class="select-off">star_border</v-icon>
</v-btn>
@ -244,6 +244,11 @@ export default {
lastFilter: {},
routeName: routeName,
titleRule: v => v.length <= this.$config.get('clip') || this.$gettext("Title too long"),
touchStart: {
index: -1,
scrollY: window.scrollY,
timeStamp: -1,
},
mouseDown: {
index: -1,
scrollY: window.scrollY,
@ -324,6 +329,37 @@ export default {
showUpload() {
Event.publish("dialog.upload");
},
onTouchStart(ev, index) {
this.touchStart.index = index;
this.touchStart.scrollY = window.scrollY;
this.touchStart.timeStamp = ev.timeStamp;
},
resetTouchStart() {
this.touchStart.index = -1;
this.touchStart.scrollY = window.scrollY;
this.touchStart.timeStamp = -1;
},
isClick(ev, index) {
if (this.touchStart.timeStamp < 0) return true;
return this.touchStart.index === index
&& (ev.timeStamp - this.touchStart.timeStamp) < 200
&& (this.touchStart.scrollY - window.scrollY) === 0;
},
toggleLike(ev, index) {
if (!this.isClick(ev, index)) {
this.resetTouchStart();
return;
}
const album = this.results[index];
if (!album) {
return;
}
album.toggleLike();
},
selectRange(rangeEnd, models) {
if (!models || !models[rangeEnd] || !(models[rangeEnd] instanceof RestModel)) {
console.warn("selectRange() - invalid arguments:", rangeEnd, models);
@ -362,7 +398,7 @@ export default {
this.mouseDown.timeStamp = ev.timeStamp;
},
onClick(ev, index) {
const longClick = (this.mouseDown.index === index && ev.timeStamp - this.mouseDown.timeStamp > 400);
const longClick = (this.mouseDown.index === index && (ev.timeStamp - this.mouseDown.timeStamp) > 400);
const scrolled = (this.mouseDown.scrollY - window.scrollY) !== 0;
if (scrolled) {

44
frontend/src/pages/labels.vue
View file

@ -94,10 +94,10 @@
<v-btn :ripple="false"
icon flat absolute
class="input-favorite"
@touchstart.stop.prevent="label.toggleLike()"
@touchend.stop.prevent
@touchstart.stop.prevent="onTouchStart($event, index)"
@touchend.stop.prevent="toggleLike($event, index)"
@touchmove.stop.prevent
@click.stop.prevent="label.toggleLike()">
@click.stop.prevent="toggleLike($event, index)">
<v-icon color="#FFD600" class="select-on">star</v-icon>
<v-icon color="white" class="select-off">star_border</v-icon>
</v-btn>
@ -174,6 +174,11 @@ export default {
lastFilter: {},
routeName: routeName,
titleRule: v => v.length <= this.$config.get('clip') || this.$gettext("Name too long"),
touchStart: {
index: -1,
scrollY: window.scrollY,
timeStamp: -1,
},
mouseDown: {
index: -1,
scrollY: window.scrollY,
@ -220,6 +225,37 @@ export default {
this.offset = offset;
window.localStorage.setItem("labels_offset", offset);
},
onTouchStart(ev, index) {
this.touchStart.index = index;
this.touchStart.scrollY = window.scrollY;
this.touchStart.timeStamp = ev.timeStamp;
},
resetTouchStart() {
this.touchStart.index = -1;
this.touchStart.scrollY = window.scrollY;
this.touchStart.timeStamp = -1;
},
isClick(ev, index) {
if (this.touchStart.timeStamp < 0) return true;
return this.touchStart.index === index
&& (ev.timeStamp - this.touchStart.timeStamp) < 200
&& (this.touchStart.scrollY - window.scrollY) === 0;
},
toggleLike(ev, index) {
if (!this.isClick(ev, index)) {
this.resetTouchStart();
return;
}
const label = this.results[index];
if (!label) {
return;
}
label.toggleLike();
},
selectRange(rangeEnd, models) {
if (!models || !models[rangeEnd] || !(models[rangeEnd] instanceof RestModel)) {
console.warn("selectRange() - invalid arguments:", rangeEnd, models);
@ -258,7 +294,7 @@ export default {
this.mouseDown.timeStamp = ev.timeStamp;
},
onClick(ev, index) {
const longClick = (this.mouseDown.index === index && ev.timeStamp - this.mouseDown.timeStamp > 400);
const longClick = (this.mouseDown.index === index && (ev.timeStamp - this.mouseDown.timeStamp) > 400);
const scrolled = (this.mouseDown.scrollY - window.scrollY) !== 0;
if (scrolled) {

2
frontend/src/pages/library/files.vue
View file

@ -253,7 +253,7 @@ export default {
this.mouseDown.timeStamp = ev.timeStamp;
},
onClick(ev, index) {
const longClick = (this.mouseDown.index === index && ev.timeStamp - this.mouseDown.timeStamp > 400);
const longClick = (this.mouseDown.index === index && (ev.timeStamp - this.mouseDown.timeStamp) > 400);
const scrolled = (this.mouseDown.scrollY - window.scrollY) !== 0;
if (scrolled) {

2
frontend/src/share/albums.vue
View file

@ -256,7 +256,7 @@ export default {
this.mouseDown.timeStamp = ev.timeStamp;
},
onClick(ev, index) {
const longClick = (this.mouseDown.index === index && ev.timeStamp - this.mouseDown.timeStamp > 400);
const longClick = (this.mouseDown.index === index && (ev.timeStamp - this.mouseDown.timeStamp) > 400);
const scrolled = (this.mouseDown.scrollY - window.scrollY) !== 0;
if (scrolled) {

2
frontend/src/share/photo/cards.vue
View file

@ -208,7 +208,7 @@ export default {
this.mouseDown.timeStamp = ev.timeStamp;
},
onClick(ev, index) {
const longClick = (this.mouseDown.index === index && ev.timeStamp - this.mouseDown.timeStamp > 400);
const longClick = (this.mouseDown.index === index && (ev.timeStamp - this.mouseDown.timeStamp) > 400);
const scrolled = (this.mouseDown.scrollY - window.scrollY) !== 0;
if (scrolled) {

2
frontend/src/share/photo/list.vue
View file

@ -160,7 +160,7 @@ export default {
this.mouseDown.timeStamp = ev.timeStamp;
},
onClick(ev, index) {
const longClick = (this.mouseDown.index === index && ev.timeStamp - this.mouseDown.timeStamp > 400);
const longClick = (this.mouseDown.index === index && (ev.timeStamp - this.mouseDown.timeStamp) > 400);
const scrolled = (this.mouseDown.scrollY - window.scrollY) !== 0;
if (scrolled) {

2
frontend/src/share/photo/mosaic.vue
View file

@ -145,7 +145,7 @@ export default {
this.$clipboard.toggle(photo);
},
onClick(ev, index) {
const longClick = (this.mouseDown.index === index && ev.timeStamp - this.mouseDown.timeStamp > 400);
const longClick = (this.mouseDown.index === index && (ev.timeStamp - this.mouseDown.timeStamp) > 400);
const scrolled = (this.mouseDown.scrollY - window.scrollY) !== 0;
if (scrolled) {