-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathlevel.html
121 lines (118 loc) · 5.11 KB
/
level.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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<title>level</title>
<style type="text/css">
html, body { margin:0; }
body { background:#fff; font:14px/1 helvetica,arial,freesans,sans-serif; }
.level { display:table; margin:0 auto 3em; position:relative; left:0; top:0; }
.level img { height:auto; max-width:100%; position:absolute; left:0; top:0; }
.level img:nth-child(1) { position:relative; }
@media screen and (max-width:800px) {
.level { display:block; }
}
</style>
</head>
<body>
<p class="level"><img src="img/level/circle_squares.png"><img src="img/level/circle_squares.png"><img src="img/level/circle_squares.png"></p>
<!--
<p class="level"><img src="img/level/squared_dots.png"><img src="img/level/squared_dots.png"><img src="img/level/squared_dots.png"></p>
-->
<script type="text/javascript">
Number.prototype.mod = function(n) { return ((this%n)+n)%n; }
function addHandler(el,evt,fn){ if( el.addEventListener ){ el.addEventListener(evt,fn,false); }else if( el.attachEvent ){ el.attachEvent('on'+evt,fn); } }
function getComputed(el,style){ if(window.getComputedStyle){ var y=document.defaultView.getComputedStyle(el,null).getPropertyValue(style); }else if(el.currentStyle){ if( style=='width' ){ y=el.getBoundingClientRect().right-el.getBoundingClientRect().left }else if( style=='height' ){ y=el.getBoundingClientRect().bottom-el.getBoundingClientRect().top }else{ var y=el.currentStyle[style] } } return parseFloat(y); }
function getPgOffset(el){ var o=[0,0]; if( el.offsetParent ){ do{ o=[o[0]+el.offsetLeft,o[1]+el.offsetTop]; }while( el=el.offsetParent ) } return [o[0]+document.body.scrollLeft,o[1]+document.body.scrollTop]; }
function getXY(e){ var xy=[]; if( e.touches && e.touches.length ){ if( e.touches.length>1 ){ xy[0] = (e.touches[0].pageX+e.touches[0].pageX)/2; xy[1] = (e.touches[0].pageY+e.touches[0].pageY)/2;}else{ xy[0] = e.touches[0].pageX; xy[1] = e.touches[0].pageY; } }else{ xy[0] = e.pageX; xy[1] = e.pageY; } return xy; }
var level = {
el:null, xy0:null, xyT:null, id:0,
size: function(el){
el.wh = [getComputed(el,'width'), getComputed(el,'height')];
},
init: function(el, opt){
if( typeof el==='string' ){ el = document.getElementById(el); } if( !el ){ return; }
level.size(el);
if( !opt ) var opt = {};
el.arcs = el.childNodes.length-1;
el.xy = [getComputed(el,'left'), getComputed(el,'top')];
if( !el.move ){
el.onmousedown = level.touch;
el.ontouchstart = level.touch;
el.move = function(xy){
var i, vis;
for( i=1; i<=this.arcs; ++i ){
this.childNodes[i].style.left = (i/this.arcs)*xy[0]+'px';
this.childNodes[i].style.top = (i/this.arcs)*xy[1]+'px';
}
this.xy = [xy[0],xy[1]];
};
}
},
touch: function(e){
e = e || window.event;
if( e.type==='touchstart' && e.touches && e.touches.length>2 ){ return; }
level.el = this;
level.xy0 = level.el.xy;
level.xyT = getXY(e);
level.el.min = level.el.val-(level.xyT[0]/level.el.wh[0]*(level.el.max-level.el.min));
level.el.max = level.el.min+level.el.rng;
if( e.type==='touchstart' ){
this.ontouchmove = level.drag;
this.onmousedown = null;
this.ontouchend = function(){
this.ontouchmove = null;
this.ontouchend = null;
level.release();
};
}else{
document.onmousemove = level.drag;
document.onmouseup = function(){
document.onmousemove = null;
document.onmouseup = null;
level.release();
};
}
return false;
},
drag: function(e){
e = e || window.event;
if( e.preventDefault ){ e.preventDefault(); }else{ e.returnValue=false; }
var xyE = getXY(e),
xy = [level.xy0[0]+xyE[0]-level.xyT[0], level.xy0[1]+xyE[1]-level.xyT[1]];
level.el.move(xy);
if( !!level.el.slide ){ level.el.slide.call(this); }
return false;
},
release: function(){
if( !!level.el.stop ){ level.el.stop.call(this); }
level.el = null;
}
};
var i, els = document.querySelectorAll('.level'), el;
for( i=0; i<els.length; ++i ){
level.init(els[i]);
}
addHandler(window,'resize',function(){
for( i=0; i<els.length; ++i ){
level.size(els[i]);
}
});
if( !!window.DeviceOrientationEvent ){
addHandler(window,'deviceorientation',function(e){
if( !level.el ){
for( i=0; i<els.length; ++i ){
level.el = els[i];
xy = [(e.beta/45)*level.el.wh[0], -(e.gamma/45)*level.el.wh[1]];
level.el.move(xy);
level.el = null;
}
}
});
}
</script>
</body>
</html>