Update Lab-slider demo

pull/43/head
peterd 8 years ago
parent e6dad61eeb
commit c7b3675cdb

4
color.all.min.js vendored

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

@ -167,7 +167,8 @@
alpha = alpha !== undefined ? alpha : color.alpha; alpha = alpha !== undefined ? alpha : color.alpha;
} else if (color) { } else if (color) {
for (var n in color) { for (var n in color) {
colors[type][n] = type === 'Lab' ? color[n] : colors[type][n] = type === 'Lab' ?
limitValue(color[n], _valueRanges[type][n][0], _valueRanges[type][n][1]) :
limitValue(color[n] / _valueRanges[type][n][1], 0 , 1); limitValue(color[n] / _valueRanges[type][n][1], 0 , 1);
} }
} }

@ -88,37 +88,37 @@ a {
background-color: #333; background-color: #333;
border-right: 1px solid #555; border-right: 1px solid #555;
} }
#rgbR { #rgbr {
background-color: #0ff; background-color: #0ff;
} }
#rgbG { #rgbg {
background-color: #f0f; background-color: #f0f;
} }
#rgbB { #rgbb {
background-color: #ff0; background-color: #ff0;
} }
#rgbR div { #rgbr div {
background-color: #c00; background-color: #c00;
} }
#rgbG div { #rgbg div {
background-color: #0a0; background-color: #0a0;
} }
#rgbB div { #rgbb div {
background-color: #00f; background-color: #00f;
} }
#cmyC div { #cmyc div {
background-color: #0ff; background-color: #0ff;
} }
#cmyM div { #cmym div {
background-color: #f0f; background-color: #f0f;
} }
#cmyY div { #cmyy div {
background-color: #ff0; background-color: #ff0;
} }
#rgbR:before, #rgbG:before, #rgbB:before, #rgbr:before, #rgbg:before, #rgbb:before,
#hslH:before, #hslS:before, #hslL:before, #hslh:before, #hsls:before, #hsll:before,
#cmyC:before, #cmyM:before, #cmyY:before{ #cmyc:before, #cmym:before, #cmyy:before{
display: block; display: block;
float: left; float: left;
margin-left: -18px; margin-left: -18px;
@ -130,7 +130,7 @@ a {
line-height: 15px; line-height: 15px;
cursor: default; cursor: default;
} }
#rgbR:after, #rgbG:after, #rgbB:after { #rgbr:after, #rgbg:after, #rgbb:after {
display: block; display: block;
float: right; float: right;
margin-top: -12px; margin-top: -12px;
@ -142,40 +142,40 @@ a {
line-height: 15px; line-height: 15px;
cursor: default; cursor: default;
} }
#rgbR:before { #rgbr:before {
content: 'R'; content: 'R';
} }
#rgbG:before { #rgbg:before {
content: 'G'; content: 'G';
} }
#rgbB:before { #rgbb:before {
content: 'B'; content: 'B';
} }
#rgbR:after { #rgbr:after {
content: 'C'; content: 'C';
} }
#rgbG:after { #rgbg:after {
content: 'M'; content: 'M';
} }
#rgbB:after { #rgbb:after {
content: 'Y'; content: 'Y';
} }
#hslH:before { #hslh:before {
content: 'H'; content: 'H';
} }
#hslS:before { #hsls:before {
content: 'S'; content: 'S';
} }
#hslL:before { #hsll:before {
content: 'L'; content: 'L';
} }
#cmyC:before { #cmyc:before {
content: 'C'; content: 'C';
} }
#cmyM:before { #cmym:before {
content: 'M'; content: 'M';
} }
#cmyY:before { #cmyy:before {
content: 'Y'; content: 'Y';
} }

@ -19,18 +19,22 @@
<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>
<div id="rgbG"><div></div></div> <div id="rgbg"><div></div></div>
<div id="rgbB"><div></div></div> <div id="rgbb"><div></div></div>
<div id="hslH"><div></div></div> <div id="hslh"><div></div></div>
<div id="hslS"><div></div></div> <div id="hsls"><div></div></div>
<div id="hslL"><div></div></div> <div id="hsll"><div></div></div>
<!-- <div id="cmyC"><div></div></div> <!-- <div id="LabL"><div></div></div>
<div id="cmyM"><div></div></div> <div id="Laba"><div></div></div>
<div id="cmyY"><div></div></div> --> <div id="Labb"><div></div></div>
</div>
<div id="cmyc"><div></div></div>
<div id="cmym"><div></div></div>
<div id="cmyy"><div></div></div>
--></div>
<div id="hsv_map"> <div id="hsv_map">
<canvas id="surface" width="200" height="200"></canvas> <canvas id="surface" width="200" height="200"></canvas>

@ -119,10 +119,12 @@
sliderChildren = sliders.children, sliderChildren = sliders.children,
type, type,
mode, mode,
isLabAB = false,
max = { max = {
rgb: {r: 255, g: 255, b: 255}, rgb: {r: 255, g: 255, b: 255},
hsl: {h: 360, s: 100, l: 100}, hsl: {h: 360, s: 100, l: 100},
cmy: {c: 100, m: 100, y: 100} cmy: {c: 100, m: 100, y: 100},
Lab: {L: 100, a: 256, b: 256}
// hsv: {h: 360, s: 100, v: 100}, // hsv: {h: 360, s: 100, v: 100},
// cmyk: {c: 100, m: 100, y: 100, k: 100}, // cmyk: {c: 100, m: 100, y: 100, k: 100},
}, },
@ -137,7 +139,8 @@
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.charAt(len).toLowerCase(); // R -> r mode = id.charAt(len); // .toLowerCase(); // R -> r
isLabAB = type === 'Lab' && (/(?:a|b)/.test(mode));
startPoint = Tools.getOrigin(currentTarget); startPoint = Tools.getOrigin(currentTarget);
currentTargetWidth = currentTarget.offsetWidth; currentTargetWidth = currentTarget.offsetWidth;
@ -148,12 +151,13 @@
}, },
sliderMove = function (e) { // mouseMove callback sliderMove = function (e) { // mouseMove callback
var newColor = {}; var newColor = {};
// The idea here is (so in the HSV-color-picker) that you don't // The idea here is (so in the HSV-color-picker) that you don't
// render anything here but just send data to the colorPicker, no matter // render anything here but just send data to the colorPicker, no matter
// if it's out of range. colorPicker will take care of that and render it // if it's out of range. colorPicker will take care of that and render it
// then in the renderColorSliders correctly (called in renderCallback). // then in the renderColorSliders correctly (called in renderCallback).
newColor[mode] = (e.clientX - startPoint.left) / currentTargetWidth * max[type][mode]; newColor[mode] = (e.clientX - startPoint.left) / currentTargetWidth * max[type][mode] -
(isLabAB ? 128 : 0);
myColor.setColor(newColor, type); myColor.setColor(newColor, type);
}, },
renderColorSliders = function(color) { // used in renderCallback of 'new ColorPicker' renderColorSliders = function(color) { // used in renderCallback of 'new ColorPicker'
@ -161,9 +165,10 @@
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.charAt(len).toLowerCase(); mode = child.id.charAt(len); // .toLowerCase();
child.children[0].style.width = (color.RND[type][mode] / max[type][mode] * 100) + '%'; child.children[0].style.width = (color.RND[type][mode] / max[type][mode] * 100) +
(type === 'Lab' && /(?:a|b)/.test(mode) ? 50 : 0) + '%';
} }
}; };

@ -1,17 +1,17 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset='utf-8'> <meta charset='utf-8'>
<!-- <meta http-equiv="X-UA-Compatible" content="IE=edge"> --> <!-- <meta http-equiv="X-UA-Compatible" content="IE=edge"> -->
<meta http-equiv="Content-Language" content="en"> <meta http-equiv="Content-Language" content="en">
<link href="../index.css" media="all" rel="stylesheet" type="text/css" /> <link href="../index.css" media="all" rel="stylesheet" type="text/css" />
<link href="jqColor.css" media="all" rel="stylesheet" type="text/css" /> <link href="jqColor.css" media="all" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script> <script type="text/javascript" src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<meta name="description" content="colorPicker - Advanced javaScript color picker and color conversion / calculation (rgb, hsv, hsl, hex, cmyk, cmy, XYZ, Lab, alpha, WCAG 2.0, ...); this is a jQuery implememntation example"> <meta name="description" content="colorPicker - Advanced javaScript color picker and color conversion / calculation (rgb, hsv, hsl, hex, cmyk, cmy, XYZ, Lab, alpha, WCAG 2.0, ...); this is a jQuery implememntation example">
<title>colorPicker jQuery implementation example</title> <title>colorPicker jQuery implementation example</title>
</head> </head>
<body> <body>
@ -34,14 +34,30 @@ Calling the colorPicker on all inputs with the calssName 'color': <pre>$('input.
<!-- <script type="text/javascript" src="jQueryColorPicker.min.js"></script> --> <!-- <script type="text/javascript" src="jQueryColorPicker.min.js"></script> -->
<script type="text/javascript"> <script type="text/javascript">
var $colors = $('input.color').colorPicker({ var memoryColors = [
customBG: '#222', {r: 100, g: 200, b: 10, a: 0.6},
readOnly: true, {r: 80, g: 100, b: 50, a: 0.9},
init: function(elm, colors) { // colors is a different instance (not connected to colorPicker) {r: 70, g: 80, b: 10, a: 0.9},
elm.style.backgroundColor = elm.value; {r: 20, g: 200, b: 60, a: 0.9},
elm.style.color = colors.rgbaMixCustom.luminance > 0.22 ? '#222' : '#ddd'; {r: 88, g: 0, b: 30, a: 0.4},
} {r: 100, g: 0, b: 100, a: 0.6},
}).each(function(idx, elm) { {r: 200, g: 0, b: 0},
{r: 200, g: 30, b: 100}
],
$myColorPicker = $('input.color').colorPicker({
customBG: '#222',
readOnly: true,
init: function(elm, colors) { // colors is a different instance (not connected to colorPicker)
elm.style.backgroundColor = elm.value;
elm.style.color = colors.rgbaMixCustom.luminance > 0.22 ? '#222' : '#ddd';
},
// memoryColors: memoryColors,
// actionCallback: function(event, type) {
// if (type === 'toMemory') {
// // $myColorPicker.renderMemory(memoryColors);
// }
// }
}).each(function(idx, elm) {
// $(elm).css({'background-color': this.value}) // $(elm).css({'background-color': this.value})
}); });
</script> </script>

File diff suppressed because one or more lines are too long

@ -39,7 +39,7 @@
var options = this, var options = this,
colorPicker = colorPickers.current; colorPicker = colorPickers.current;
if (action === 'toMemery') { if (action === 'toMemory') {
var memos = colorPicker.nodes.memos, var memos = colorPicker.nodes.memos,
$memo, $memo,
backgroundColor = '', backgroundColor = '',

@ -1,15 +1,14 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset='utf-8'> <meta charset='utf-8'>
<!-- <meta http-equiv="X-UA-Compatible" content="IE=edge"> --> <meta http-equiv="Content-Language" content="en">
<meta http-equiv="Content-Language" content="en">
<link href="../index.css" media="all" rel="stylesheet" type="text/css" /> <link href="../index.css" media="all" rel="stylesheet" type="text/css" />
<link href="jsColor.css" media="all" rel="stylesheet" type="text/css" /> <link href="jsColor.css" media="all" rel="stylesheet" type="text/css" />
<meta name="description" content="colorPicker - Advanced javaScript color picker and color conversion / calculation (rgb, hsv, hsl, hex, cmyk, cmy, XYZ, Lab, alpha, WCAG 2.0, ...); this is a javaScript implememntation example"> <meta name="description" content="colorPicker - Advanced javaScript color picker and color conversion / calculation (rgb, hsv, hsl, hex, cmyk, cmy, XYZ, Lab, alpha, WCAG 2.0, ...); this is a javaScript implememntation example">
<title>colorPicker javaScript implementation example</title> <title>colorPicker javaScript implementation example</title>
</head> </head>
<body> <body>
@ -33,14 +32,14 @@ Calling the colorPicker on all inputs with the calssName 'color': <pre>jsColorPi
<script type="text/javascript"> <script type="text/javascript">
var colors = jsColorPicker('input.color', { var colors = jsColorPicker('input.color', {
customBG: '#222', customBG: '#222',
readOnly: true, readOnly: true,
// patch: false, // patch: false,
init: function(elm, colors) { // colors is a different instance (not connected to colorPicker) init: function(elm, colors) { // colors is a different instance (not connected to colorPicker)
elm.style.backgroundColor = elm.value; elm.style.backgroundColor = elm.value;
elm.style.color = colors.rgbaMixCustom.luminance > 0.22 ? '#222' : '#ddd'; elm.style.color = colors.rgbaMixCustom.luminance > 0.22 ? '#222' : '#ddd';
} }
}); });
</script> </script>
</body> </body>
</html> </html>

@ -37,7 +37,7 @@
var options = this, var options = this,
colorPicker = colorPickers.current; colorPicker = colorPickers.current;
if (action === 'toMemery') { if (action === 'toMemory') {
var memos = colorPicker.nodes.memos, var memos = colorPicker.nodes.memos,
backgroundColor = '', backgroundColor = '',
opacity = 0, opacity = 0,

File diff suppressed because one or more lines are too long
Loading…
Cancel
Save