Browse Source

Update Lab-slider demo

pull/43/head
peterd 5 years ago
parent
commit
c7b3675cdb
  1. 4
      color.all.min.js
  2. 2
      colorPicker.js.map
  3. 3
      colors.js
  4. 50
      index.css
  5. 24
      index.html
  6. 17
      index.js
  7. 54
      jQuery_implementation/index.html
  8. 6
      jQuery_implementation/jQueryColorPicker.min.js
  9. 2
      jQuery_implementation/jqColor.js
  10. 33
      javascript_implementation/index.html
  11. 2
      javascript_implementation/jsColor.js
  12. 6
      javascript_implementation/jsColorPicker.min.js

4
color.all.min.js
File diff suppressed because it is too large
View File

2
colorPicker.js.map
File diff suppressed because it is too large
View File

3
colors.js

@ -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

@ -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

@ -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

@ -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) + '%';
}
};

54
jQuery_implementation/index.html

@ -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>

6
jQuery_implementation/jQueryColorPicker.min.js
File diff suppressed because it is too large
View File

2
jQuery_implementation/jqColor.js

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

33
javascript_implementation/index.html

@ -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>

2
javascript_implementation/jsColor.js

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

6
javascript_implementation/jsColorPicker.min.js
File diff suppressed because it is too large
View File

Loading…
Cancel
Save