Skip to content
This repository
branch: master
Fetching contributors…

Cannot retrieve contributors at this time

file 113 lines (98 sloc) 3.045 kb
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>
Something went wrong with that request. Please try again.