114 lines
4.1 KiB
JavaScript
Executable File
114 lines
4.1 KiB
JavaScript
Executable File
// TOUCH-EVENTS SINGLE-FINGER SWIPE-SENSING JAVASCRIPT
|
|
// Courtesy of PADILICIOUS.COM and MACOSXAUTOMATION.COM
|
|
|
|
var fingerCount = 0;
|
|
var startX = 0;
|
|
var startY = 0;
|
|
var curX = 0;
|
|
var curY = 0;
|
|
var deltaX = 0;
|
|
var deltaY = 0;
|
|
var horzDiff = 0;
|
|
var vertDiff = 0;
|
|
var minLength = 100;//72 = default
|
|
var swipeLength = 0;
|
|
var swipeAngle = null;
|
|
var swipeDirection = null;
|
|
var triggerElementID = null;
|
|
|
|
// The 4 Touch Event Handlers
|
|
|
|
// the touchStart handler should also receive the ID of the triggering element
|
|
// make sure it's ID is passed in the event call placed in the element declaration, like:
|
|
// <div id="picture-frame" ontouchstart="touchStart(event,'picture-frame');" ontouchend="touchEnd(event);" ontouchmove="touchMove(event);" ontouchcancel="touchCancel(event);">
|
|
|
|
function touchStart(event,passedID) {
|
|
// disable the standard ability to select the touched object
|
|
//event.preventDefault();
|
|
// get the total number of fingers touching the screen
|
|
fingerCount = event.touches.length;
|
|
// since we're looking for a swipe (single finger) and not a gesture (multiple fingers),
|
|
// check that only one finger was used
|
|
if ( fingerCount == 1 ) {
|
|
// store the triggering element ID
|
|
triggerElementID = passedID;
|
|
// get the coordinates of the touch
|
|
startX = event.touches[0].pageX;
|
|
startY = event.touches[0].pageY;
|
|
} else {
|
|
// more than one finger touched so cancel
|
|
touchCancel(event);
|
|
}
|
|
}
|
|
|
|
function touchMove(event) {
|
|
//event.preventDefault();
|
|
if ( event.touches.length == 1 ) {
|
|
curX = event.touches[0].pageX;
|
|
curY = event.touches[0].pageY;
|
|
} else {
|
|
touchCancel(event);
|
|
}
|
|
}
|
|
|
|
function touchEnd(event) {
|
|
//event.preventDefault();
|
|
// check to see if more than one finger was used and that there is a and ending coordinate
|
|
if ( fingerCount == 1 && curX != 0 ) {
|
|
// use the Distance Formula to determine the length of the swipe
|
|
swipeLength = Math.round(Math.sqrt(Math.pow(curX - startX,2) + Math.pow(curY - startY,2)));
|
|
horzDiff = Math.abs(startX - curX);
|
|
vertDiff = Math.abs(startY - curY);
|
|
if ( swipeLength >= minLength ) {
|
|
deltaX = startX - curX;
|
|
deltaY = startY - curY;
|
|
caluculateAngle();
|
|
determineSwipeDirection();
|
|
} else {
|
|
touchCancel(event);
|
|
}
|
|
} else {
|
|
touchCancel(event);
|
|
}
|
|
}
|
|
|
|
function touchCancel(event) {
|
|
// reset the variables back to default values
|
|
fingerCount = 0;
|
|
startX = 0;
|
|
startY = 0;
|
|
curX = 0;
|
|
curY = 0;
|
|
deltaX = 0;
|
|
deltaY = 0;
|
|
horzDiff = 0;
|
|
vertDiff = 0;
|
|
swipeLength = 0;
|
|
swipeAngle = null;
|
|
swipeDirection = null;
|
|
triggerElementID = null;
|
|
}
|
|
|
|
function caluculateAngle() {
|
|
var X = startX-curX;
|
|
var Y = curY-startY;
|
|
var Z = Math.round(Math.sqrt(Math.pow(X,2)+Math.pow(Y,2))); //the distance - rounded - in pixels
|
|
var r = Math.atan2(Y,X); //angle in radians (Cartesian system)
|
|
swipeAngle = Math.round(r*180/Math.PI); //angle in degrees
|
|
if ( swipeAngle < 0 ) { swipeAngle = 360 - Math.abs(swipeAngle); }
|
|
}
|
|
|
|
function determineSwipeDirection() {
|
|
if ( (swipeAngle <= 45) && (swipeAngle >= 0) ) {
|
|
swipeDirection = 'left';
|
|
} else if ( (swipeAngle <= 360) && (swipeAngle >= 315) ) {
|
|
swipeDirection = 'left';
|
|
} else if ( (swipeAngle >= 135) && (swipeAngle <= 225) ) {
|
|
swipeDirection = 'right';
|
|
} else if ( (swipeAngle > 45) && (swipeAngle < 135) ) {
|
|
swipeDirection = 'down';
|
|
} else {
|
|
swipeDirection = 'up';
|
|
}
|
|
}
|