Tocca.js/demo.html at master · DanielJMaxwell/Tocca.js · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<html>
<head>
	<title>Tocca.js</title>
	<style>
	#test {
		position:absolute;
		left:50%;
		top:50%;
		margin:-200px 0 0 -200px;
		width:500px;
		height:500px;
		color:white;
		background:black;
		cursor:pointer;
	}
	dl {
		color:gray;
	}
	</style>
</head>
<body>
<h1>Tocca.js</h1>
<h2>Please check also your console</h2>
<dl id="data">
	<dt><strong>Event Name</strong></dt>
	<dd id="eventName"></dd>
	<dt>Event x</dt>
	<dd id="currX"></dd>
	<dt>Event y</dt>
	<dd id="currY"></dd>
	<dt>Swipe Event distance x</dt>
	<dd id="distanceX"></dd>
	<dt>Swipe Event distance y</dt>
	<dd id="distanceY"></dd>
</dl>
<div id="test"></div>
<script src="bind.polyfill.js"></script>
<script src="Tocca.js"></script>
<script>

var $ = document.querySelector.bind(document),
		eventName = $('#eventName'),
		currX = $('#currX'),
		currY = $('#currY'),
		distanceX = $('#distanceX'),
		distanceY = $('#distanceY'),
		test = $('#test'),
		preventDefault = function(e){e.preventDefault();};
test.addEventListener('tap',updateHtml);
test.addEventListener('dbltap',updateHtml);
test.addEventListener('swipeup',updateHtml);
test.addEventListener('swipedown',updateHtml);
test.addEventListener('swipeleft',updateHtml);
test.addEventListener('swiperight',updateHtml);
test.addEventListener('touchmove',preventDefault);
test.addEventListener('touchstart',preventDefault);
test.addEventListener('touchend',preventDefault);
function updateHtml (e){
	console.log(e);
	e.preventDefault();
	eventName.innerHTML = test.innerHTML =  e.type;
	currX.innerHTML = e.x;
	currY.innerHTML = e.y;
	distanceX.innerHTML = e.distance ? e.distance.x : 'not available';
	distanceY.innerHTML = e.distance ? e.distance.y : 'not available';
}
</script>
</body>
</html>