Paolo Possanzini
92 lines
2.7 KiB
JavaScript
92 lines
2.7 KiB
JavaScript
import Vue from "vue";
|
|
|
|
// credit: http://www.javascriptkit.com/javatutors/touchevents2.shtml
|
|
function swipedetect(el, callback, onmovecallback, onstart, onstop) {
|
|
|
|
var touchsurface = el,
|
|
swipedir,
|
|
startX,
|
|
startY,
|
|
lastXswipe,
|
|
lastYswipe,
|
|
distX,
|
|
distY,
|
|
threshold = 10, //required min distance traveled to be considered swipe
|
|
restraint = 1000, // maximum distance allowed at the same time in perpendicular direction
|
|
allowedTime = 300, // maximum time allowed to travel that distance
|
|
elapsedTime,
|
|
handleswipe = callback || function(swipedir) {}
|
|
|
|
touchsurface.addEventListener('touchstart', function(e) {
|
|
var touchobj = e.changedTouches[0]
|
|
swipedir = 'none'
|
|
distX = 0
|
|
distY = 0
|
|
startX = touchobj.pageX
|
|
startY = touchobj.pageY
|
|
lastXswipe = touchobj.pageX
|
|
lastYswipe = touchobj.pageY
|
|
e.preventDefault()
|
|
|
|
if (onstart) onstart(e);
|
|
|
|
}, false)
|
|
|
|
touchsurface.addEventListener('touchmove', function(e) {
|
|
e.preventDefault() // prevent scrolling when inside DIV
|
|
|
|
var touchobj = e.changedTouches[0];
|
|
distX = touchobj.pageX - lastXswipe;
|
|
distY = touchobj.pageY - lastYswipe;
|
|
|
|
if (Math.abs(distY) >= threshold && Math.abs(distX) < restraint) {
|
|
swipedir = (distY < 0) ? 'up' : 'down'
|
|
}
|
|
if (Math.abs(distX) >= threshold && Math.abs(distY) < restraint) {
|
|
swipedir = (distX < 0) ? 'left' : 'right'
|
|
}
|
|
|
|
lastXswipe = touchobj.pageX
|
|
lastYswipe = touchobj.pageY
|
|
|
|
if (onmovecallback)
|
|
onmovecallback(e)
|
|
|
|
}, false)
|
|
|
|
touchsurface.addEventListener('touchend', function(e) {
|
|
var touchobj = e.changedTouches[0]
|
|
|
|
if (onstop) onstop(e);
|
|
|
|
handleswipe(swipedir)
|
|
e.preventDefault()
|
|
}, false)
|
|
}
|
|
|
|
Vue.component('vue-gesture', {
|
|
template: '<span><slot></slot></span>',
|
|
props: {
|
|
|
|
call: { type: Function },
|
|
onmove: { type: Function },
|
|
onstart: { type: Function },
|
|
onstop: { type: Function }
|
|
},
|
|
mounted: function() {
|
|
var self = this;
|
|
|
|
if (typeof this.call !== 'function') {
|
|
console.log(this.call);
|
|
return console.error('The expression of directive "v-gesture call" must be a function!');
|
|
}
|
|
|
|
if (this.onmove && typeof this.onmove !== 'function') {
|
|
console.log(this.call);
|
|
return console.error('The expression of directive "v-gesture onmove" must be a function!');
|
|
}
|
|
|
|
if (this.$el)
|
|
swipedetect(this.$el, this.call, this.onmove, this.onstart, this.onstop);
|
|
}
|
|
}); |