Update Lab-slider demo

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);
 			}
 		}

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,
+#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;
 	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';	
 }
 

index.html

@@ -19,18 +19,22 @@
 <div id="colorValues">.</div>
 
 <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">
   <canvas id="surface" width="200" height="200"></canvas>

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

jQuery_implementation/index.html

@@ -34,13 +34,29 @@ 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({
+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})
 	});

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 = '',

javascript_implementation/index.html

@@ -2,7 +2,6 @@
 <html lang="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" />

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,