Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Newer
Older
100644 113 lines (98 sloc) 3.045 kb
b9e46a0 @mikeescobedo New stuff for css3please2
mikeescobedo authored
1 <!DOCTYPE HTML>
2
3 <html>
4
5 <head>
6 <meta charset="UTF-8" />
7
8 <title>css3please | UI</title>
9
38ad415 @mikeescobedo New stuff for css3please2
mikeescobedo authored
10 <script src="javascript/jquery-1.4.2.js"></script>
9faf8c6 @paulirish remove old needless code. share what we got.
authored
11 <script src="javascript/jquery.plugins.min.js" type="text/javascript"></script>
38ad415 @mikeescobedo New stuff for css3please2
mikeescobedo authored
12 <script src="test_math.js"></script>
13 <script>
b9e46a0 @mikeescobedo New stuff for css3please2
mikeescobedo authored
14
15 $(function () {
16 var focusedInput,
17 currentInput;
18 var inputPX = $('#input-px')[0],
19 inputHEX = $('#input-hex')[0],
20 inputRGB = $('#input-rgb')[0],
21 inputX = $('#input-x')[0],
22 inputY = $('#input-y')[0],
23 inputR = $('#input-r')[0],
24 inputS = $('#input-s')[0];
25
26 var cssFun = function (elem, delta) {
27 var value = elem.value;
28
29 if (elem == inputPX) {
30 elem.value = cssMath.s2x(value, delta);
31 }
32 else if (elem == inputHEX) {
33 inputHEX.value = cssMath.lh2sh(cssMath.hm2(cssMath.s2lh(value), delta));
34 inputRGB.value = cssMath.cm2(cssMath.s2c(value), delta);
35 }
36 else if (elem == inputRGB) {
37 inputHEX.value = cssMath.lh2sh(cssMath.hm2(cssMath.s2lh(value), delta));
38 inputRGB.value = cssMath.cm2(cssMath.s2c(value), delta);
39 }
40 else if (elem == inputX || elem == inputY || elem == inputR || elem == inputS) {
41 if (elem == inputX) {
42 inputX.value = parseInt(value, 10) + delta;
43 inputR.value = cssMath.xy2rs(inputX.value, inputY.value).r;
44 inputS.value = cssMath.xy2rs(inputX.value, inputY.value).s;
45 }
46 else if (elem == inputY) {
47 inputY.value = parseInt(value, 10) + delta;
48 inputR.value = cssMath.xy2rs(inputX.value, inputY.value).r;
49 inputS.value = cssMath.xy2rs(inputX.value, inputY.value).s;
50 }
51 else if (elem == inputR) {
52 inputR.value = parseInt(value, 10) + delta;
53 inputX.value = cssMath.rs2xy(inputR.value, inputS.value).x;
54 inputY.value = cssMath.rs2xy(inputR.value, inputS.value).y;
55 }
56 else if (elem == inputS) {
57 inputS.value = parseInt(value, 10) + delta;
58 inputX.value = cssMath.rs2xy(inputR.value, inputS.value).x;
59 inputY.value = cssMath.rs2xy(inputR.value, inputS.value).y;
60 }
61 }
62 };
63
64 $('input').focus(function () {
65 focusedInput = this;
66 }).blur(function () {
67 cssFun(this, 0);
68 focusedInput = (focusedInput == this) ? undefined : focusedInput;
69 }).bind('keydown', function (e) {
70 if (e.keyCode == 38) {
71 cssFun(this, 1);
72 }
73 else if (e.keyCode == 40) {
74 cssFun(this, -1);
75 }
76 else if (e.keyCode == 13) {
77 cssFun(this, 0);
78 }
79 });
80
81 $(window).bind('mousewheel', function (event, delta) {
82 if (focusedInput) {
83 event.preventDefault();
84
85 cssFun(focusedInput, delta);
86 }
87 });
88 });
89
90 </script>
91 </head>
92
93 <body>
94
95 <ul>
96 <li>
97 S <input id="input-px" type="text" value="5px 0 10px 15px" csstype="s" />
98 </li>
99 <li>
100 HEX <input id="input-hex" type="text" value="#CCC" csstype="hex" />
101 RGB <input id="input-rgb" type="text" value="rgb(200, 200, 200)" csstype="rgb" />
102 </li>
103 <li>
104 X <input id="input-x" type="text" value="4" csstype="x" />
105 Y <input id="input-y" type="text" value="4" csstype="y" />
106 R <input id="input-r" type="text" value="135" csstype="r" />
107 S <input id="input-s" type="text" value="5.657" csstype="s" />
108 </li>
109 </ul>
110
111 </body>
112
113 </html>
Something went wrong with that request. Please try again.