-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathfind-geocache.html
62 lines (54 loc) · 2.76 KB
/
find-geocache.html
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
<!doctype html>
<html>
<head>
<title>compios5</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<link rel="stylesheet" href="my.css" />
<script>
window.addEventListener('load', function () {
var compass = document.body.appendChild(document.createElement('article'));
compass.id = 'compass';
var spinner = compass.appendChild(document.createElement('article'));
spinner.id = 'spinner';
var pin = spinner.appendChild(document.createElement('article'));
pin.id = 'pin';
for (var degrees = 0, degree; degrees < 360; degrees += 30) {
degree = spinner.appendChild(document.createElement('label'));
degree.className = 'degree';
degree.innerText = degrees;
degree.style.webkitTransform = 'rotateZ(' + degrees + 'deg)'
}
['N', 'NE', 'E', 'SE', 'S', 'SW', 'W', 'NW'].forEach(function (label, index) {
var main = ((index % 2) ? '' : ' main');
point = spinner.appendChild(document.createElement('label'));
point.className = 'point' + main;
point.innerText = label;
point.style.webkitTransform = 'rotateZ(' + (index * 45) + 'deg)'
arrow = spinner.appendChild(document.createElement('div'));
arrow.className = 'arrow' + main;
arrow.style.webkitTransform = 'rotateZ(' + (index * 45) + 'deg)'
});
var lastHeading = 0;
window.addEventListener('deviceorientation', function (e) {
var heading = e.webkitCompassHeading + window.orientation;
if (Math.abs(heading - lastHeading) < 180) {
spinner.style.webkitTransition = 'all 0.2s ease-in-out';
} else {
spinner.style.webkitTransition = 'none';
}
spinner.style.webkitTransform = 'rotateZ(-' + heading + 'deg)';
lastHeading = heading;
}, false);
document.body.addEventListener('touchstart', function (e) {
e.preventDefault();
}, false);
window.addEventListener('orientationchange', function (e) {
window.scrollTo(0, 1);
}, false);
setTimeout(function () { window.scrollTo(0, 1); }, 0);
}, false);
</script>
</head>
<body/>
</html>