fix: longpress glitches

asadahimeka · Sep 16, 2023 · 0fde5a2 · 0fde5a2
1 parent dbbea62
commit 0fde5a2
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 3 deletions.
diff --git a/src/directives/longpress.js b/src/directives/longpress.js
@@ -10,6 +10,10 @@ export default {
         }
 
         let pressTimer = null
+        let startX = 0
+        let startY = 0
+        const disX = 10
+        const disY = 10
 
         const start = e => {
           if (e.type === 'click' && e.button !== 0) {
@@ -28,8 +32,27 @@ export default {
           }
         }
 
-        ;['mousedown', 'touchstart'].forEach(e => el.addEventListener(e, start))
-        ;['click', 'mouseout', 'touchend', 'touchcancel'].forEach(e => el.addEventListener(e, cancel))
+        el.addEventListener('mousedown', start)
+        el.addEventListener('touchstart', event => {
+          const touch = event.changedTouches[0]
+          startX = touch.clientX
+          startY = touch.clientY
+          start(event)
+        })
+
+        el.addEventListener('touchmove', event => {
+          const touch = event.changedTouches[0]
+          const diffX = Math.abs(touch.clientX - startX)
+          const diffY = Math.abs(touch.clientY - startY)
+          if ((disX > 0 && diffX > disX) || (disY > 0 && diffY > disY)) {
+            cancel()
+          }
+        }, false)
+
+        el.addEventListener('click', cancel)
+        el.addEventListener('mouseout', cancel)
+        el.addEventListener('touchend', cancel)
+        el.addEventListener('touchcancel', cancel)
       },
     })
   },

diff --git a/src/views/Artwork/components/ImageView.vue b/src/views/Artwork/components/ImageView.vue
@@ -139,6 +139,7 @@ export default {
     preventContext(/** @type {Event} */ event) {
       if (!isLongpressDL) return true
       event.preventDefault()
+      event.stopPropagation()
       return false
     },
     async downloadArtwork(/** @type {Event} */ ev, index) {

diff --git a/src/views/Spotlights/SpotlightDetail.vue b/src/views/Spotlights/SpotlightDetail.vue
@@ -131,7 +131,7 @@ export default {
           [/^https:\/\/www\.pixiv\.net\/users\/(\d+)/i, m => this.$router.push(`/u/${m}`)],
           [/^https:\/\/www\.pixivision\.net\/.+\/a\/(\d+)/i, m => this.$router.push(`/a/${m}`)],
           [new RegExp(`${location.origin}/.+/a/(\\d+)`, 'i'), m => this.$router.push(`/a/${m}`)],
-          [new RegExp(`${location.origin}/.+?id=\\d+#(id-\\w+)`, 'i'), m => {
+          [new RegExp(`${location.origin}/.+/\\d+#(id-\\w+)`, 'i'), m => {
             document.getElementById(m)?.scrollIntoView({ behavior: 'smooth' })
           }],
         ]