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) {