Stabilizing demo page

pull/16/head
peterd 10 years ago
parent b54f595387
commit 8c3d20da3f

@ -10,11 +10,11 @@
<body> <body>
<div id="testPatch"> </div> <div id="testPatch">.</div>
<div id="contrastPatch"><div></div><i>-Test-</i></div> <div id="contrastPatch"><div></div><i>-Test-</i></div>
<div id="colorValues"> </div> <div id="colorValues">.</div>
<div id="sliders" class="sliders"> <div id="sliders" class="sliders">
<div id="rgbR"><div></div></div> <div id="rgbR"><div></div></div>

@ -104,8 +104,10 @@
} }
Tools.addEvent(colorSquares, 'click', function(e){ // event delegation Tools.addEvent(colorSquares, 'click', function(e){ // event delegation
if (e.target.parentNode === this) { var target = e.target || e.srcElement;
myColor.setColor(e.target.style.backgroundColor);
if (target.parentNode === this) {
myColor.setColor(target.style.backgroundColor);
startRender(true); startRender(true);
} }
}); });
@ -125,17 +127,17 @@
// cmyk: {c: 100, m: 100, y: 100, k: 100}, // cmyk: {c: 100, m: 100, y: 100, k: 100},
}, },
sliderDown = function (e) { // mouseDown callback sliderDown = function (e) { // mouseDown callback
var target = e.target, var target = e.target || e.srcElement,
id, len; id, len;
if (e.target !== this) { if (target !== this) {
e.preventDefault(); if (e.preventDefault) e.preventDefault();
currentTarget = target.id ? target : target.parentNode; currentTarget = target.id ? target : target.parentNode;
id = currentTarget.id; // rgbR id = currentTarget.id; // rgbR
len = id.length - 1; len = id.length - 1;
type = id.substr(0, len); // rgb type = id.substr(0, len); // rgb
mode = id[len].toLowerCase(); // R -> r mode = id.charAt(len).toLowerCase(); // R -> r
startPoint = Tools.getOrigin(currentTarget); startPoint = Tools.getOrigin(currentTarget);
currentTargetWidth = currentTarget.offsetWidth; currentTargetWidth = currentTarget.offsetWidth;
@ -159,9 +161,9 @@
var child = sliderChildren[n], var child = sliderChildren[n],
len = child.id.length - 1, len = child.id.length - 1,
type = child.id.substr(0, len), type = child.id.substr(0, len),
mode = child.id[len].toLowerCase(); mode = child.id.charAt(len).toLowerCase();
child.children[0].style.width = (color.RND[type][mode] / max[type][mode] * 100) + '%'; if (child.id) child.children[0].style.width = (color.RND[type][mode] / max[type][mode] * 100) + '%';
} }
}; };
@ -189,9 +191,9 @@
luminanceBar = document.getElementById('luminanceBar'), luminanceBar = document.getElementById('luminanceBar'),
hsvDown = function(e) { // mouseDown callback hsvDown = function(e) { // mouseDown callback
var target = e.target; var target = e.target || e.srcElement;
e.preventDefault(); if (e.preventDefault) e.preventDefault();
currentTarget = target.id ? target : target.parentNode; currentTarget = target.id ? target : target.parentNode;
startPoint = Tools.getOrigin(currentTarget); startPoint = Tools.getOrigin(currentTarget);
@ -276,7 +278,7 @@
// maybe change className of hsv_map to change colors of all cursors... // maybe change className of hsv_map to change colors of all cursors...
'border-color: ' + (color.RGBLuminance > 0.22 ? '#333;' : '#ddd'); 'border-color: ' + (color.RGBLuminance > 0.22 ? '#333;' : '#ddd');
hsv_barCursors.className = color.RGBLuminance > 0.22 ? hsv_barCursorsCln + ' dark' : hsv_barCursorsCln; hsv_barCursors.className = color.RGBLuminance > 0.22 ? hsv_barCursorsCln + ' dark' : hsv_barCursorsCln;
hsv_Leftcursor.style.top = hsv_Rightcursor.style.top = ((1 - color.hsv.v) * colorDiscRadius * 2) + 'px'; if (hsv_Leftcursor) hsv_Leftcursor.style.top = hsv_Rightcursor.style.top = ((1 - color.hsv.v) * colorDiscRadius * 2) + 'px';
}; };
Tools.addEvent(hsv_map, 'mousedown', hsvDown); // event delegation Tools.addEvent(hsv_map, 'mousedown', hsvDown); // event delegation
@ -331,36 +333,38 @@
}); });
}; };
drawDisk( // HSV color wheel with white center if (colorDisc.getContext) {
colorDisc.getContext("2d"), drawDisk( // HSV color wheel with white center
[colorDisc.width / 2, colorDisc.height / 2], colorDisc.getContext("2d"),
[colorDisc.width / 2 - 1, colorDisc.height / 2 - 1], [colorDisc.width / 2, colorDisc.height / 2],
360, [colorDisc.width / 2 - 1, colorDisc.height / 2 - 1],
function(ctx, angle) { 360,
var gradient = ctx.createRadialGradient(1, 1, 1, 1, 1, 0); function(ctx, angle) {
gradient.addColorStop(0, 'hsl(' + (360 - angle + 0) + ', 100%, 50%)'); var gradient = ctx.createRadialGradient(1, 1, 1, 1, 1, 0);
gradient.addColorStop(1, "#FFFFFF"); gradient.addColorStop(0, 'hsl(' + (360 - angle + 0) + ', 100%, 50%)');
gradient.addColorStop(1, "#FFFFFF");
ctx.fillStyle = gradient;
ctx.fill(); ctx.fillStyle = gradient;
} ctx.fill();
); }
drawCircle( // gray border );
colorDisc.getContext("2d"), drawCircle( // gray border
[colorDisc.width / 2, colorDisc.height / 2], colorDisc.getContext("2d"),
[colorDisc.width / 2, colorDisc.height / 2], [colorDisc.width / 2, colorDisc.height / 2],
'#555', [colorDisc.width / 2, colorDisc.height / 2],
3 '#555',
); 3
// draw the luminanceBar bar );
var ctx = luminanceBar.getContext("2d"), // draw the luminanceBar bar
gradient = ctx.createLinearGradient(0, 0, 0, 200); var ctx = luminanceBar.getContext("2d"),
gradient = ctx.createLinearGradient(0, 0, 0, 200);
gradient.addColorStop(0,"transparent");
gradient.addColorStop(1,"black"); gradient.addColorStop(0,"transparent");
gradient.addColorStop(1,"black");
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, 30, 200); ctx.fillStyle = gradient;
ctx.fillRect(0, 0, 30, 200);
}
// experimental stuff // experimental stuff
@ -424,7 +428,8 @@
renderCallback = doRender, renderCallback = doRender,
// finally the instance of either ColorPicker or Colors (export for debugging purposes) // finally the instance of either ColorPicker or Colors (export for debugging purposes)
color_ColorPicker = new (ColorPicker || Colors)({ color_ColorPicker = new (ColorPicker || Colors)({
customBG: '#808080' customBG: '#808080',
imagePath: 'images/'
// renderCallback: renderCallback, // doesn't work in Colors, but also doesn't matter // renderCallback: renderCallback, // doesn't work in Colors, but also doesn't matter
// convertCallback: function(color, type){console.log(color, type)} // convertCallback: function(color, type){console.log(color, type)}
// resizeCallback: function(e, value, scale, original){console.log(e, value, scale, original)} // resizeCallback: function(e, value, scale, original){console.log(e, value, scale, original)}

Loading…
Cancel
Save