forked from paulirish/css3please
/
test_ui.html
113 lines (98 loc) · 2.97 KB
/
test_ui.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
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8" />
<title>css3please | UI</title>
<script src="javascript/jquery-1.4.2.js"></script>
<script src="javascript/jquery.plugins.min.js" type="text/javascript"></script>
<script src="test_math.js"></script>
<script>
$(function () {
var focusedInput,
currentInput;
var inputPX = $('#input-px')[0],
inputHEX = $('#input-hex')[0],
inputRGB = $('#input-rgb')[0],
inputX = $('#input-x')[0],
inputY = $('#input-y')[0],
inputR = $('#input-r')[0],
inputS = $('#input-s')[0];
var cssFun = function (elem, delta) {
var value = elem.value;
if (elem == inputPX) {
elem.value = cssMath.s2x(value, delta);
}
else if (elem == inputHEX) {
inputHEX.value = cssMath.lh2sh(cssMath.hm2(cssMath.s2lh(value), delta));
inputRGB.value = cssMath.cm2(cssMath.s2c(value), delta);
}
else if (elem == inputRGB) {
inputHEX.value = cssMath.lh2sh(cssMath.hm2(cssMath.s2lh(value), delta));
inputRGB.value = cssMath.cm2(cssMath.s2c(value), delta);
}
else if (elem == inputX || elem == inputY || elem == inputR || elem == inputS) {
if (elem == inputX) {
inputX.value = parseInt(value, 10) + delta;
inputR.value = cssMath.xy2rs(inputX.value, inputY.value).r;
inputS.value = cssMath.xy2rs(inputX.value, inputY.value).s;
}
else if (elem == inputY) {
inputY.value = parseInt(value, 10) + delta;
inputR.value = cssMath.xy2rs(inputX.value, inputY.value).r;
inputS.value = cssMath.xy2rs(inputX.value, inputY.value).s;
}
else if (elem == inputR) {
inputR.value = parseInt(value, 10) + delta;
inputX.value = cssMath.rs2xy(inputR.value, inputS.value).x;
inputY.value = cssMath.rs2xy(inputR.value, inputS.value).y;
}
else if (elem == inputS) {
inputS.value = parseInt(value, 10) + delta;
inputX.value = cssMath.rs2xy(inputR.value, inputS.value).x;
inputY.value = cssMath.rs2xy(inputR.value, inputS.value).y;
}
}
};
$('input').focus(function () {
focusedInput = this;
}).blur(function () {
cssFun(this, 0);
focusedInput = (focusedInput == this) ? undefined : focusedInput;
}).bind('keydown', function (e) {
if (e.keyCode == 38) {
cssFun(this, 1);
}
else if (e.keyCode == 40) {
cssFun(this, -1);
}
else if (e.keyCode == 13) {
cssFun(this, 0);
}
});
$(window).bind('mousewheel', function (event, delta) {
if (focusedInput) {
event.preventDefault();
cssFun(focusedInput, delta);
}
});
});
</script>
</head>
<body>
<ul>
<li>
S <input id="input-px" type="text" value="5px 0 10px 15px" csstype="s" />
</li>
<li>
HEX <input id="input-hex" type="text" value="#CCC" csstype="hex" />
RGB <input id="input-rgb" type="text" value="rgb(200, 200, 200)" csstype="rgb" />
</li>
<li>
X <input id="input-x" type="text" value="4" csstype="x" />
Y <input id="input-y" type="text" value="4" csstype="y" />
R <input id="input-r" type="text" value="135" csstype="r" />
S <input id="input-s" type="text" value="5.657" csstype="s" />
</li>
</ul>
</body>
</html>