diff --git a/frontend/src/component/photo/cards.vue b/frontend/src/component/photo/cards.vue
index cec05eb0d..66abf789a 100644
--- a/frontend/src/component/photo/cards.vue
+++ b/frontend/src/component/photo/cards.vue
@@ -104,10 +104,10 @@
+ @click.stop.prevent="toggleLike($event, index)">
favorite
favorite_border
@@ -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) {
diff --git a/frontend/src/component/photo/list.vue b/frontend/src/component/photo/list.vue
index 1c0489328..09708d35c 100644
--- a/frontend/src/component/photo/list.vue
+++ b/frontend/src/component/photo/list.vue
@@ -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) {
diff --git a/frontend/src/component/photo/mosaic.vue b/frontend/src/component/photo/mosaic.vue
index 0b197295e..d37020cab 100644
--- a/frontend/src/component/photo/mosaic.vue
+++ b/frontend/src/component/photo/mosaic.vue
@@ -103,10 +103,10 @@
+ @click.stop.prevent="toggleLike($event, index)">
favorite
favorite_border
@@ -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) {
diff --git a/frontend/src/pages/albums.vue b/frontend/src/pages/albums.vue
index b82cdd0d4..0774bf89c 100644
--- a/frontend/src/pages/albums.vue
+++ b/frontend/src/pages/albums.vue
@@ -127,10 +127,10 @@
+ @click.stop.prevent="toggleLike($event, index)">
star
star_border
@@ -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) {
diff --git a/frontend/src/pages/labels.vue b/frontend/src/pages/labels.vue
index c9c3e90a0..063f0ef3b 100644
--- a/frontend/src/pages/labels.vue
+++ b/frontend/src/pages/labels.vue
@@ -94,10 +94,10 @@
+ @click.stop.prevent="toggleLike($event, index)">
star
star_border
@@ -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) {
diff --git a/frontend/src/pages/library/files.vue b/frontend/src/pages/library/files.vue
index 40b8bf0e4..078179ec1 100644
--- a/frontend/src/pages/library/files.vue
+++ b/frontend/src/pages/library/files.vue
@@ -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) {
diff --git a/frontend/src/share/albums.vue b/frontend/src/share/albums.vue
index d7a0a3f37..008752281 100644
--- a/frontend/src/share/albums.vue
+++ b/frontend/src/share/albums.vue
@@ -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) {
diff --git a/frontend/src/share/photo/cards.vue b/frontend/src/share/photo/cards.vue
index 37ea8c86f..8f853c88f 100644
--- a/frontend/src/share/photo/cards.vue
+++ b/frontend/src/share/photo/cards.vue
@@ -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) {
diff --git a/frontend/src/share/photo/list.vue b/frontend/src/share/photo/list.vue
index 59aaef61f..0892f2c6e 100644
--- a/frontend/src/share/photo/list.vue
+++ b/frontend/src/share/photo/list.vue
@@ -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) {
diff --git a/frontend/src/share/photo/mosaic.vue b/frontend/src/share/photo/mosaic.vue
index bc83dd7fc..58f8abb45 100644
--- a/frontend/src/share/photo/mosaic.vue
+++ b/frontend/src/share/photo/mosaic.vue
@@ -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) {