Paolo Possanzini
86 lines
3.3 KiB
JavaScript
86 lines
3.3 KiB
JavaScript
import Vue from "vue";
|
|
|
|
// credit: http://www.javascriptkit.com/javatutors/touchevents2.shtml
|
|
function swipedetect(el, callback, onmovecallback) {
|
|
|
|
var touchsurface = el,
|
|
swipedir,
|
|
startX,
|
|
startY,
|
|
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,
|
|
startTime,
|
|
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
|
|
startTime = new Date().getTime() // record time when finger first makes contact with surface
|
|
e.preventDefault()
|
|
}, false)
|
|
|
|
touchsurface.addEventListener('touchmove', function(e) {
|
|
e.preventDefault() // prevent scrolling when inside DIV
|
|
|
|
var touchobj = e.changedTouches[0];
|
|
if (Math.abs(distX) >= threshold && Math.abs(distY) <= restraint) { // 2nd condition for horizontal swipe met
|
|
swipedir = (distX < 0) ? 'left' : 'right' // if dist traveled is negative, it indicates left swipe
|
|
startX = touchobj.pageX
|
|
} else if (Math.abs(distY) >= threshold && Math.abs(distX) <= restraint) { // 2nd condition for vertical swipe met
|
|
swipedir = (distY < 0) ? 'up' : 'down' // if dist traveled is negative, it indicates up swipe
|
|
startY = touchobj.pageY
|
|
}
|
|
|
|
if (onmovecallback)
|
|
onmovecallback(e)
|
|
|
|
}, false)
|
|
|
|
touchsurface.addEventListener('touchend', function(e) {
|
|
var touchobj = e.changedTouches[0]
|
|
distX = touchobj.pageX - startX // get horizontal dist traveled by finger while in contact with surface
|
|
distY = touchobj.pageY - startY // get vertical dist traveled by finger while in contact with surface
|
|
elapsedTime = new Date().getTime() - startTime // get time elapsed
|
|
|
|
if (Math.abs(distX) >= threshold && Math.abs(distY) <= restraint) { // 2nd condition for horizontal swipe met
|
|
swipedir = (distX < 0) ? 'left' : 'right' // if dist traveled is negative, it indicates left swipe
|
|
} else if (Math.abs(distY) >= threshold && Math.abs(distX) <= restraint) { // 2nd condition for vertical swipe met
|
|
swipedir = (distY < 0) ? 'up' : 'down' // if dist traveled is negative, it indicates up swipe
|
|
}
|
|
|
|
handleswipe(swipedir)
|
|
e.preventDefault()
|
|
}, false)
|
|
}
|
|
|
|
Vue.component('vue-gesture', {
|
|
template: '<span><slot></slot></span>',
|
|
props: {
|
|
call: { type: Function },
|
|
onmove: { 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);
|
|
}
|
|
}); |