feat: "v-touch-hold" directive

Author: rstoenescu

src/install.js

@@ -8,8 +8,9 @@ import directiveGoBack from './vue-directives/go-back'
 import directiveScrollFire from './vue-directives/scroll-fire'
 import directiveScroll from './vue-directives/scroll'
 import directiveTooltip from './vue-directives/tooltip'
-import directiveTouchPan from './vue-directives/pan'
-import directiveTouchSwipe from './vue-directives/swipe'
+import directiveTouchHold from './vue-directives/touch-hold'
+import directiveTouchPan from './vue-directives/touch-pan'
+import directiveTouchSwipe from './vue-directives/touch-swipe'
 
 import Checkbox from './vue-components/checkbox/checkbox.vue'
 import Chips from './vue-components/chips/chips.vue'
@@ -63,6 +64,7 @@ function registerDirectives (_Vue) {
   _Vue.directive('scroll-fire', directiveScrollFire)
   _Vue.directive('scroll', directiveScroll)
   _Vue.directive('tooltip', directiveTooltip)
+  _Vue.directive('touch-hold', directiveTouchHold)
   _Vue.directive('touch-pan', directiveTouchPan)
   _Vue.directive('touch-swipe', directiveTouchSwipe)
 }

src/vue-components/toggle/toggle.vue

@@ -2,8 +2,7 @@
   <label
     class="quasar-toggle"
     :class="{disabled: disable}"
-    v-touch:pan="toggle"
-    v-touch-options:pan="{ direction: 'horizontal' }"
+    v-touch-swipe.horizontal="toggle"
   >
     <input type="checkbox" v-model="model" :disabled="disable">
     <div></div>
@@ -35,13 +34,14 @@ export default {
     }
   },
   methods: {
-    toggle (event) {
-      if (
-        !this.disable &&
-        event.isFinal &&
-        (this.model && event.deltaX < 0 || !this.model && event.deltaX > 0)
-      ) {
-        this.model = !this.model
+    toggle (evt) {
+      if (!this.disable) {
+        if (this.model && evt.direction === 'left') {
+          this.model = false
+        }
+        else if (!this.model && evt.direction === 'right') {
+          this.model = true
+        }
       }
     }
   }

src/vue-directives/touch-hold.js

@@ -0,0 +1,59 @@
+let
+  data = {},
+  defaultDuration = 800
+
+function update (el, binding) {
+  data[el].duration = parseInt(binding.arg, 10) || defaultDuration
+  if (binding.oldValue !== binding.value) {
+    data[el].handler = binding.value
+  }
+}
+
+export default {
+  bind (el, binding) {
+    let ctx = {
+      start (evt) {
+        ctx.timer = setTimeout(() => {
+          document.removeEventListener('mousemove', ctx.mouseAbort)
+          document.removeEventListener('mouseup', ctx.mouseAbort)
+          ctx.handler()
+        }, ctx.duration)
+      },
+      mouseStart (evt) {
+        document.addEventListener('mousemove', ctx.mouseAbort)
+        document.addEventListener('mouseup', ctx.mouseAbort)
+        ctx.start(evt)
+      },
+      abort (evt) {
+        evt.preventDefault()
+        evt.stopPropagation()
+        if (ctx.timer) {
+          clearTimeout(ctx.timer)
+          ctx.timer = null
+        }
+      },
+      mouseAbort (evt) {
+        document.removeEventListener('mousemove', ctx.mouseAbort)
+        document.removeEventListener('mouseup', ctx.mouseAbort)
+        ctx.abort(evt)
+      }
+    }
+
+    data[el] = ctx
+    update(el, binding)
+    el.addEventListener('touchstart', ctx.start)
+    el.addEventListener('touchmove', ctx.abort)
+    el.addEventListener('touchend', ctx.abort)
+    el.addEventListener('mousedown', ctx.mouseStart)
+  },
+  update,
+  unbind (el, binding) {
+    let ctx = data[el]
+    el.removeEventListener('touchstart', ctx.start)
+    el.removeEventListener('touchmove', ctx.abort)
+    el.removeEventListener('touchend', ctx.abort)
+    el.removeEventListener('mousedown', ctx.mouseStart)
+    document.removeEventListener('mousemove', ctx.mouseAbort)
+    document.removeEventListener('mouseup', ctx.mouseAbort)
+  }
+}