Simple Touch Library 1.0.2
added relativeDirection
by moob
HTML
<div id="test">
<strong id="testEvent">
Touch me baby...
</strong>
<div id="testData">
</div>
</div>
CSS
html, body {
margin:0;
}
#test {
width: 100%;
min-width:100%;
max-width:100%;
max-height:100%;
height:200px;
padding:20px;
background-color:#ccc;
overflow:hidden;
}
#testEvent, #testData {pointer-events:none;}
#test strong {font-family:sans-serif}
#test em {color:#fff; font-style:normal; font-size:1.2em; text-decoration:none; text-shadow:0px 0px 3px black;}
JavaScript
/* Simple Touch Library 1.0.2 */
(function ($) {
var ePos = function(e){
var oe = (e.originalEvent && e.originalEvent.touches) ? e.originalEvent.touches[0] : e;
return {x:oe.pageX, y:oe.pageY};
};
$.fn.touchListener = function (options) {
var settings = $.extend({
swipeSpeedThreshold: 0.6, //drag speed in px per ms before it can be considered a swipe
swipeDistanceThreshold: 100, //distance stroked in px before it can be considered a swipe
strokeDistanceThreshold: 4, //minimum distance moved before it can be considered a stroke (so that minor wobbles are not taken as strokes)
complete: null //function callback on complete
}, options);
return this.each(function () {
var el = $(this),
touchstarted = false,
ori={x:0,y:0},
pos={x:0,y:0},
last={x:0,y:0},
deg=-1,
dir='',
livedir='',
startTime = 0,
endTime = 0,
split = 0,
dur = 0,
spd = 0,
directionDistance = 0,
dist={x:0,y:0,dd:directionDistance},
touchdata = {state:'listening',
origin:ori,
position:pos,
distance:dist,
degrees:deg,
direction:dir,
relativeDirection:livedir,
duration:dur,
speed:spd
};
el.on('touchstart mousedown', function(e){
touchstarted=true;
pos = ePos(e);
ori = pos,
startTime = new Date().getTime();
touchdata = {
...