Game-Jaming/Frontend/Javascript/swipe.js

67 lines
2.5 KiB
JavaScript

(function( $ ){
function calculateResults(startX, startY, endX, endY, tresholdX, tresholdY){
var swipeDirection = {up:false, right:false, down: false, left:false};
if(startX > endX && startX - endX >= tresholdX)
swipeDirection.left = true;
else if(startX < endX && endX - startX >= tresholdX)
swipeDirection.right = true;
if(startY < endY && endY - startY >= tresholdY)
swipeDirection.down = true
else if(startY > endY && startY - endY >=tresholdY)
swipeDirection.up = true;
return swipeDirection;
}
$.fn.onSwipe = function(f, timeTreshold, tresholdX, tresholdY){
if(jQuery.isFunction(f)){ //We are only going to do our thing if the user passed a function
if(typeof timeTreshold === 'undefined' || timeTreshold === null)
timeTreshold = 100;//ms
if(typeof tresholdX === 'undefined' || tresholdX === null)
tresholdX = 30;//px
if(typeof tresholdY === 'undefined' || tresholdY === null)
tresholdY = 30;//px
var startX, startY; //Position when touch begins
var endX, endY; //Position when touch ends
var time; //Our timer variable
var totalTime = 0; //Total time that the swipe took
//When a touch starts on this element.
//We can start a timer, and start getting coordinates.
$(this).on("touchstart", function(e){
//Let's get our touch coordinates
startX = e.touches[0].clientX; //This is where touchstart coordinates are stored
startY = e.touches[0].clientY;
time = setInterval(function(){ //Let's see how long the swipe lasts.
totalTime += 10;
}, 10);
});
$(this).on("touchend", function(e){
endX = e.changedTouches[0].clientX; //This is where touchend coordinates are stored.
endY = e.changedTouches[0].clientY;
clearInterval(time); //Let's stop calculating time and free up resources.
if(totalTime >= timeTreshold) //If swipe time is less than our treshold we won't do anything. Useful for preventing spam and accidental swipes.
f(calculateResults(startX, startY, endX, endY, 30, 30)); //Send results to user's function
totalTime = 0;
});
} else console.error("You need to pass a function in order to process swipe data.");
return $(this);
}
})( jQuery );