mirror of
https://github.com/PitPik/colorPicker.git
synced 2025-06-27 13:11:02 -06:00
Update Lab-slider demo
This commit is contained in:
peterd
parent
e6dad61eeb
commit
c7b3675cdb
4
color.all.min.js
vendored
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;
|
||||
} else if (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);
|
||||
}
|
||||
}
|
||||
|
||||
50
index.css
50
index.css
@ -88,37 +88,37 @@ a {
|
||||
background-color: #333;
|
||||
border-right: 1px solid #555;
|
||||
}
|
||||
#rgbR {
|
||||
#rgbr {
|
||||
background-color: #0ff;
|
||||
}
|
||||
#rgbG {
|
||||
#rgbg {
|
||||
background-color: #f0f;
|
||||
}
|
||||
#rgbB {
|
||||
#rgbb {
|
||||
background-color: #ff0;
|
||||
}
|
||||
#rgbR div {
|
||||
#rgbr div {
|
||||
background-color: #c00;
|
||||
}
|
||||
#rgbG div {
|
||||
#rgbg div {
|
||||
background-color: #0a0;
|
||||
}
|
||||
#rgbB div {
|
||||
#rgbb div {
|
||||
background-color: #00f;
|
||||
}
|
||||
#cmyC div {
|
||||
#cmyc div {
|
||||
background-color: #0ff;
|
||||
}
|
||||
#cmyM div {
|
||||
#cmym div {
|
||||
background-color: #f0f;
|
||||
}
|
||||
#cmyY div {
|
||||
#cmyy div {
|
||||
background-color: #ff0;
|
||||
}
|
||||
|
||||
#rgbR:before, #rgbG:before, #rgbB:before,
|
||||
#hslH:before, #hslS:before, #hslL:before,
|
||||
#cmyC:before, #cmyM:before, #cmyY:before{
|
||||
#rgbr:before, #rgbg:before, #rgbb:before,
|
||||
#hslh:before, #hsls:before, #hsll:before,
|
||||
#cmyc:before, #cmym:before, #cmyy:before{
|
||||
display: block;
|
||||
float: left;
|
||||
margin-left: -18px;
|
||||
@ -130,7 +130,7 @@ a {
|
||||
line-height: 15px;
|
||||
cursor: default;
|
||||
}
|
||||
#rgbR:after, #rgbG:after, #rgbB:after {
|
||||
#rgbr:after, #rgbg:after, #rgbb:after {
|
||||
display: block;
|
||||
float: right;
|
||||
margin-top: -12px;
|
||||
@ -142,40 +142,40 @@ a {
|
||||
line-height: 15px;
|
||||
cursor: default;
|
||||
}
|
||||
#rgbR:before {
|
||||
#rgbr:before {
|
||||
content: 'R';
|
||||
}
|
||||
#rgbG:before {
|
||||
#rgbg:before {
|
||||
content: 'G';
|
||||
}
|
||||
#rgbB:before {
|
||||
#rgbb:before {
|
||||
content: 'B';
|
||||
}
|
||||
#rgbR:after {
|
||||
#rgbr:after {
|
||||
content: 'C';
|
||||
}
|
||||
#rgbG:after {
|
||||
#rgbg:after {
|
||||
content: 'M';
|
||||
}
|
||||
#rgbB:after {
|
||||
#rgbb:after {
|
||||
content: 'Y';
|
||||
}
|
||||
#hslH:before {
|
||||
#hslh:before {
|
||||
content: 'H';
|
||||
}
|
||||
#hslS:before {
|
||||
#hsls:before {
|
||||
content: 'S';
|
||||
}
|
||||
#hslL:before {
|
||||
#hsll:before {
|
||||
content: 'L';
|
||||
}
|
||||
#cmyC:before {
|
||||
#cmyc:before {
|
||||
content: 'C';
|
||||
}
|
||||
#cmyM:before {
|
||||
#cmym:before {
|
||||
content: 'M';
|
||||
}
|
||||
#cmyY:before {
|
||||
#cmyy:before {
|
||||
content: 'Y';
|
||||
}
|
||||
|
||||
|
||||
24
index.html
24
index.html
@ -19,18 +19,22 @@
|
||||
<div id="colorValues">.</div>
|
||||
|
||||
<div id="sliders" class="sliders">
|
||||
<div id="rgbR"><div></div></div>
|
||||
<div id="rgbG"><div></div></div>
|
||||
<div id="rgbB"><div></div></div>
|
||||
<div id="rgbr"><div></div></div>
|
||||
<div id="rgbg"><div></div></div>
|
||||
<div id="rgbb"><div></div></div>
|
||||
|
||||
<div id="hslH"><div></div></div>
|
||||
<div id="hslS"><div></div></div>
|
||||
<div id="hslL"><div></div></div>
|
||||
<div id="hslh"><div></div></div>
|
||||
<div id="hsls"><div></div></div>
|
||||
<div id="hsll"><div></div></div>
|
||||
|
||||
<!-- <div id="cmyC"><div></div></div>
|
||||
<div id="cmyM"><div></div></div>
|
||||
<div id="cmyY"><div></div></div> -->
|
||||
</div>
|
||||
<!-- <div id="LabL"><div></div></div>
|
||||
<div id="Laba"><div></div></div>
|
||||
<div id="Labb"><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">
|
||||
<canvas id="surface" width="200" height="200"></canvas>
|
||||
|
||||
17
index.js
17
index.js
@ -119,10 +119,12 @@
|
||||
sliderChildren = sliders.children,
|
||||
type,
|
||||
mode,
|
||||
isLabAB = false,
|
||||
max = {
|
||||
rgb: {r: 255, g: 255, b: 255},
|
||||
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},
|
||||
// cmyk: {c: 100, m: 100, y: 100, k: 100},
|
||||
},
|
||||
@ -137,7 +139,8 @@
|
||||
id = currentTarget.id; // rgbR
|
||||
len = id.length - 1;
|
||||
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);
|
||||
currentTargetWidth = currentTarget.offsetWidth;
|
||||
|
||||
@ -148,12 +151,13 @@
|
||||
},
|
||||
sliderMove = function (e) { // mouseMove callback
|
||||
var newColor = {};
|
||||
|
||||
// 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
|
||||
// if it's out of range. colorPicker will take care of that and render it
|
||||
// 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);
|
||||
},
|
||||
renderColorSliders = function(color) { // used in renderCallback of 'new ColorPicker'
|
||||
@ -161,9 +165,10 @@
|
||||
var child = sliderChildren[n],
|
||||
len = child.id.length - 1,
|
||||
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>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset='utf-8'>
|
||||
<!-- <meta http-equiv="X-UA-Compatible" content="IE=edge"> -->
|
||||
<meta http-equiv="Content-Language" content="en">
|
||||
<head>
|
||||
<meta charset='utf-8'>
|
||||
<!-- <meta http-equiv="X-UA-Compatible" content="IE=edge"> -->
|
||||
<meta http-equiv="Content-Language" content="en">
|
||||
|
||||
<link href="../index.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 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">
|
||||
<title>colorPicker jQuery implementation example</title>
|
||||
<link href="../index.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 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">
|
||||
<title>colorPicker jQuery implementation example</title>
|
||||
</head>
|
||||
|
||||
<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">
|
||||
var $colors = $('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';
|
||||
}
|
||||
}).each(function(idx, elm) {
|
||||
var memoryColors = [
|
||||
{r: 100, g: 200, b: 10, a: 0.6},
|
||||
{r: 80, g: 100, b: 50, a: 0.9},
|
||||
{r: 70, g: 80, b: 10, a: 0.9},
|
||||
{r: 20, g: 200, b: 60, a: 0.9},
|
||||
{r: 88, g: 0, b: 30, a: 0.4},
|
||||
{r: 100, g: 0, b: 100, a: 0.6},
|
||||
{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})
|
||||
});
|
||||
</script>
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -39,7 +39,7 @@
|
||||
var options = this,
|
||||
colorPicker = colorPickers.current;
|
||||
|
||||
if (action === 'toMemery') {
|
||||
if (action === 'toMemory') {
|
||||
var memos = colorPicker.nodes.memos,
|
||||
$memo,
|
||||
backgroundColor = '',
|
||||
|
||||
@ -1,15 +1,14 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset='utf-8'>
|
||||
<!-- <meta http-equiv="X-UA-Compatible" content="IE=edge"> -->
|
||||
<meta http-equiv="Content-Language" content="en">
|
||||
<head>
|
||||
<meta charset='utf-8'>
|
||||
<meta http-equiv="Content-Language" content="en">
|
||||
|
||||
<link href="../index.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">
|
||||
<title>colorPicker javaScript implementation example</title>
|
||||
<link href="../index.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">
|
||||
<title>colorPicker javaScript implementation example</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@ -33,14 +32,14 @@ Calling the colorPicker on all inputs with the calssName 'color': <pre>jsColorPi
|
||||
|
||||
<script type="text/javascript">
|
||||
var colors = jsColorPicker('input.color', {
|
||||
customBG: '#222',
|
||||
readOnly: true,
|
||||
// patch: false,
|
||||
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';
|
||||
}
|
||||
});
|
||||
customBG: '#222',
|
||||
readOnly: true,
|
||||
// patch: false,
|
||||
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';
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -37,7 +37,7 @@
|
||||
var options = this,
|
||||
colorPicker = colorPickers.current;
|
||||
|
||||
if (action === 'toMemery') {
|
||||
if (action === 'toMemory') {
|
||||
var memos = colorPicker.nodes.memos,
|
||||
backgroundColor = '',
|
||||
opacity = 0,
|
||||
|
||||
File diff suppressed because one or more lines are too long
Loading…
x
Reference in New Issue
Block a user