feat(TouchSwipe): Highly improve TouchSwipe

Author: rstoenescu

docs/src/examples/TouchSwipe/Basic.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="q-pa-md row justify-center">
     <q-card
-      v-touch-swipe="handleSwipe"
+      v-touch-swipe.mouse="handleSwipe"
       class="custom-area cursor-pointer bg-primary text-white shadow-2 relative-position row flex-center"
     >
       <div v-if="info" class="custom-info">

docs/src/examples/TouchSwipe/Right.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="q-pa-md row justify-center">
     <q-card
-      v-touch-swipe.right="handleSwipe"
+      v-touch-swipe.mouse.right="handleSwipe"
       class="custom-area cursor-pointer bg-primary text-white shadow-2 relative-position row flex-center"
     >
       <div v-if="info" class="custom-info">

docs/src/examples/TouchSwipe/UpOrLeft.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="q-pa-md row justify-center">
     <q-card
-      v-touch-swipe.up.left="handleSwipe"
+      v-touch-swipe.mouse.up.left="handleSwipe"
       class="custom-area cursor-pointer bg-primary text-white shadow-2 relative-position row flex-center"
     >
       <div v-if="info" class="custom-info">

quasar/dev/components/touch-directives/touch-swipe.vue

@@ -7,7 +7,8 @@
         on the area below to see it in action.
       </p>
       <div
-        v-touch-swipe="handleSwipe"
+        v-touch-swipe.mouse="handleSwipe"
+        @click="onClick"
         class="custom-area row flex-center"
       >
         <div v-if="info" class="custom-info">
@@ -31,7 +32,8 @@
 
       <p class="caption">Example on capturing only swipe to right:</p>
       <div
-        v-touch-swipe.right="swipeToRight"
+        v-touch-swipe.right.mouse="swipeToRight"
+        @click="onClick"
         class="custom-area row flex-center"
       >
         <div v-if="infoRight" class="custom-info">
@@ -45,7 +47,8 @@
 
       <p class="caption">Example on capturing only swipe up and right:</p>
       <div
-        v-touch-swipe.up.right="swipeToCustom"
+        v-touch-swipe.up.right.mouse="swipeToCustom"
+        @click="onClick"
         class="custom-area row flex-center"
       >
         <div v-if="infoCustom" class="custom-info">
@@ -88,6 +91,9 @@ export default {
     },
     swipeToCustom ({ direction, duration, distance }) {
       this.infoCustom = { direction, duration, distance }
+    },
+    onClick () {
+      console.log('onClick')
     }
   }
 }

quasar/src/directives/TouchSwipe.js

@@ -1,4 +1,6 @@
-import { position, leftClick } from '../utils/event.js'
+import Platform from '../plugins/Platform.js'
+import { position, leftClick, stopAndPrevent } from '../utils/event.js'
+import { clearSelection } from '../utils/selection.js'
 
 function getDirection (mod) {
   let dir = {}
@@ -31,15 +33,31 @@ function getDirection (mod) {
   return dir
 }
 
+function parseArg (arg) {
+  // delta (min velocity -- dist / time)
+  // mobile min distance on first move
+  // desktop min distance until deciding if it's a swipe or not
+  const data = [0.06, 6, 50]
+
+  if (typeof arg === 'string' && arg.length) {
+    arg.split(':').forEach((val, index) => {
+      const v = parseInt(val, 10)
+      v && (data[index] = v)
+    })
+  }
+
+  return data
+}
+
 export default {
   name: 'touch-swipe',
 
   bind (el, binding) {
-    const mouse = binding.modifiers.noMouse !== true
+    const mouse = binding.modifiers.mouse === true
 
     let ctx = {
       handler: binding.value,
-      threshold: parseInt(binding.arg, 10) || 300,
+      sensitivity: parseArg(binding.arg),
       mod: binding.modifiers,
       direction: getDirection(binding.modifiers),
 
@@ -50,38 +68,39 @@ export default {
           ctx.start(evt)
         }
       },
+
       mouseEnd (evt) {
         document.removeEventListener('mousemove', ctx.move)
         document.removeEventListener('mouseup', ctx.mouseEnd)
         ctx.end(evt)
       },
 
       start (evt) {
+        console.log('start')
         const pos = position(evt)
 
         ctx.event = {
           x: pos.left,
           y: pos.top,
           time: new Date().getTime(),
-          detected: false,
+          dir: false,
           abort: false
         }
-
-        el.classList.add('q-touch')
       },
+
       move (evt) {
-        if (ctx.event.abort) {
+        if (ctx.event.abort === true) {
           return
         }
 
-        if (new Date().getTime() - ctx.event.time > ctx.threshold) {
-          ctx.event.abort = true
+        if (ctx.event.dir !== false) {
+          stopAndPrevent(evt)
           return
         }
 
-        if (ctx.event.detected) {
-          evt.stopPropagation()
-          evt.preventDefault()
+        const time = (new Date().getTime() - ctx.event.time)
+
+        if (time === 0) {
           return
         }
 
@@ -92,68 +111,105 @@ export default {
           distY = pos.top - ctx.event.y,
           absY = Math.abs(distY)
 
-        if (absX === absY) {
+        if (Platform.is.mobile) {
+          if (absX < ctx.sensitivity[1] && absY < ctx.sensitivity[1]) {
+            ctx.event.abort = true
+            return
+          }
+        }
+        else if (absX < ctx.sensitivity[2] && absY < ctx.sensitivity[2]) {
           return
         }
 
-        ctx.event.detected = true
-        ctx.event.abort = !(
-          (ctx.direction.vertical && absX < absY) ||
-          (ctx.direction.horizontal && absX > absY) ||
-          (ctx.direction.up && absX < absY && distY < 0) ||
-          (ctx.direction.down && absX < absY && distY > 0) ||
-          (ctx.direction.left && absX > absY && distX < 0) ||
-          (ctx.direction.right && absX > absY && distX > 0)
-        )
-
-        ctx.move(evt)
-      },
-      end (evt) {
-        el.classList.remove('q-touch')
-        if (ctx.event.abort || !ctx.event.detected) {
-          return
+        const
+          velX = absX / time,
+          velY = absY / time
+
+        if (
+          ctx.direction.vertical &&
+          absX < absY &&
+          absX < 100 &&
+          velY > ctx.sensitivity[0]
+        ) {
+          ctx.event.dir = distY < 0 ? 'up' : 'down'
         }
 
-        const duration = new Date().getTime() - ctx.event.time
-        if (duration > ctx.threshold) {
-          return
+        if (
+          ctx.direction.horizontal &&
+          absX > absY &&
+          absY < 100 &&
+          velX > ctx.sensitivity[0]
+        ) {
+          ctx.event.dir = distX < 0 ? 'left' : 'right'
         }
 
-        evt.stopPropagation()
-        evt.preventDefault()
+        if (
+          ctx.direction.up &&
+          absX < absY &&
+          distY < 0 &&
+          absX < 100 &&
+          velY > ctx.sensitivity[0]
+        ) {
+          ctx.event.dir = 'up'
+        }
 
-        let
-          pos = position(evt),
-          direction,
-          distX = pos.left - ctx.event.x,
-          absX = Math.abs(distX),
-          distY = pos.top - ctx.event.y,
-          absY = Math.abs(distY)
+        if (
+          ctx.direction.down &&
+          absX < absY &&
+          distY > 0 &&
+          absX < 100 &&
+          velY > ctx.sensitivity[0]
+        ) {
+          ctx.event.dir = 'down'
+        }
 
-        if (absX >= absY) {
-          if (absX < 50) {
-            return
-          }
-          direction = distX < 0 ? 'left' : 'right'
+        if (
+          ctx.direction.left &&
+          absX > absY &&
+          distX < 0 &&
+          absY < 100 &&
+          velX > ctx.sensitivity[0]
+        ) {
+          ctx.event.dir = 'left'
         }
-        else {
-          if (absY < 50) {
-            return
-          }
-          direction = distY < 0 ? 'up' : 'down'
+
+        if (
+          ctx.direction.right &&
+          absX > absY &&
+          distX > 0 &&
+          absY < 100 &&
+          velX > ctx.sensitivity[0]
+        ) {
+          ctx.event.dir = 'right'
         }
 
-        if (ctx.direction[direction]) {
+        if (ctx.event.dir !== false) {
+          stopAndPrevent(evt)
+          document.body.classList.add('no-pointer-events')
+          document.body.classList.add('non-selectable')
+          clearSelection()
+
           ctx.handler({
             evt,
-            direction,
-            duration,
+            direction: ctx.event.dir,
+            duration: time,
             distance: {
               x: absX,
               y: absY
             }
           })
         }
+        else {
+          ctx.event.abort = true
+        }
+      },
+
+      end (evt) {
+        if (ctx.event.abort === false && ctx.event.dir !== false) {
+          stopAndPrevent(evt)
+          document.body.classList.remove('no-pointer-events')
+          document.body.classList.remove('non-selectable')
+        }
       }
     }
 

quasar/src/directives/TouchSwipe.json

@@ -46,16 +46,16 @@
   },
 
   "arg": {
-    "type": "Number",
-    "desc": "Amount of time to wait (in milliseconds) to determine if it was a swipe indeed",
-    "default": 300,
+    "type": "String",
+    "desc": "x:y:z, where x is minimum velocity (dist/time), y is minimum distance on first move on mobile, z is minimum distance on desktop until deciding if it's a swipe indeed",
+    "default": "0.06:6:50",
     "examples": [ "v-touch-swipe:400=\"fnToCall\"" ]
   },
 
   "modifiers": {
-    "noMouse": {
+    "mouse": {
       "type": "Boolean",
-      "desc": "Disregard mouse events and handle only touch events"
+      "desc": "Listen for mouse events too"
     },
 
     "horizontal": {