<!doctype html>
<html>
<head>
<title>Mobile gestures - RJM Programming - November, 2019</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id=mydiv title='Pointing place' style='position:fixed;top:0px;left:0px;width:100%;height:100vh;background-color:yellow;'>
<h1>Swipe Gesture Playground</h1>
<h3>RJM Programming - November, 2019</h3>
<h4>Try swipe gestures below, and we'll detect which type of swipe gesture.</h4>
</div>
<script type='text/javascript'>
// Thanks to https://stackoverflow.com/questions/2264072/detect-a-finger-swipe-through-javascript-on-the-iphone-and-android
document.addEventListener('touchstart', handleTouchStart, false);
document.addEventListener('touchmove', handleTouchMove, false);
//document.getElementById('mydiv').addEventListener('click', handleMouseStart, false);
document.addEventListener('mousedown', handleMouseStart, false);
document.addEventListener('mousemove', handleMouseMove, false);

var xDown = null;
var yDown = null;

function getTouches(evt) {
return evt.touches || // browser API
evt.originalEvent.touches; // jQuery
}

function handleTouchStart(evt) {
const firstTouch = getTouches(evt)[0];
xDown = firstTouch.clientX;
yDown = firstTouch.clientY;
};

function handleMouseStart(evt) {
if ( ! xDown || ! yDown ) {
if (evt.clientX) {
xDown=evt.clientX;
yDown=evt.clientY;
} else {
xDown=evt.pageX;
yDown=evt.pageY;
}
//document.title='startx=' + xDown;
}
};

function handleTouchMove(evt) {
if ( ! xDown || ! yDown ) {
return;
}

var xUp = evt.touches[0].clientX;
var yUp = evt.touches[0].clientY;

var xDiff = xDown - xUp;
var yDiff = yDown - yUp;

if ( Math.abs( xDiff ) > Math.abs( yDiff ) ) {/*most significant*/
if ( xDiff > 0 ) {
/* left swipe */
alert('You swiped left');
} else {
/* right swipe */
alert('You swiped right');
}
} else {
if ( yDiff > 0 ) {
/* up swipe */
alert('You swiped up');
} else {
/* down swipe */
alert('You swiped down');
}
}
/* reset values */
//document.title+=',';
xDown = null;
yDown = null;
};

function handleMouseMove(evt) {
if ( ! xDown || ! yDown ) {
return;
}

var xUp = 0;
var yUp = 0;
if (evt.clientX) {
xUp=evt.clientX;
yUp=evt.clientY;
} else {
xUp=evt.pageX;
yUp=evt.pageY;
}

var xDiff = xDown - xUp;
var yDiff = yDown - yUp;

if (Math.abs( xDiff ) > 15 || Math.abs( yDiff ) > 15) {

if ( Math.abs( xDiff ) > Math.abs( yDiff ) ) {/*most significant*/
if ( xDiff > 0 ) {
/* left swipe */
alert('You moved mouse left');
} else {
/* right swipe */
alert('You moved mouse right');
}
} else {
if ( yDiff > 0 ) {
/* up swipe */
alert('You moved mouse up');
} else {
/* down swipe */
alert('You moved mouse down');
}
}
/* reset values */
xDown = null;
yDown = null;
}
};
</script>
</body>
</html>