update fof initial color calculations

update of initial color calculations in implementations thanks to
Martin1887

jQuery_implementation/README.md

@@ -15,6 +15,7 @@ See **demo** at [dematte.at/cpn/jQuery_implementation](http://dematte.at/cpn/jQu
         klass: window.ColorPicker,
         input: elm,
         patch: elm,
+        init: function(elm, colors){}, // initialization callback (before colorPicker gets initialized though)
         animationSpeed: 200,
         draggable: true,
         multipleInstances: false

jQuery_implementation/index.html

@@ -18,7 +18,7 @@
 <h1>Simple jQuery implementation</h1>
 Calling the colorPicker on all inputs with the calssName 'color': <pre>$('input.color').colorPicker();</pre>
 <p>
-	<input class="color" value="#323f03" />
+	<input class="color" value="#B6BD79" />
 	<input class="color" value="rgb(162, 63, 3)" />
 	<input class="color" value="hsl(32, 95%, 23%)" />
 </p>
@@ -34,8 +34,15 @@ 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}).each(function(idx, elm) { // {multipleInstances: true}
+	var $colors = $('input.color').colorPicker({
-		$(elm).css({'background-color': this.value})
+    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) {
+		// $(elm).css({'background-color': this.value})
 	});
 </script>
 </body>

jQuery_implementation/jqColor.js

@@ -154,7 +154,8 @@
 					}
 				},
 				that = this,
-				colorPickers = this.colorPickers || []; // this is a way to prevent data binding on HTMLElements
+				colorPickers = this.colorPickers || [], // this is a way to prevent data binding on HTMLElements
+				testColors = new window.Colors({customBG: config.customBG, allMixDetails: true});
 
 			this.colorPickers = colorPickers;
 
@@ -173,6 +174,10 @@
 					if (config && config.readOnly) {
 						elm.readOnly = true;
 					}
+					testColors.setColor(elm.value);
+					if (config && config.init) {
+						config.init(elm, testColors.colors);
+					}
 				}
 			});
 

javascript_implementation/README.md

@@ -15,6 +15,7 @@ See **demo** at [dematte.at/cpn/javaScript_implementation](http://dematte.at/cpn
         klass: window.ColorPicker,
         input: elm,
         patch: elm,
+        init: function(elm, colors){}, // initialization callback (before colorPicker gets initialized though)
         // animationSpeed: 200, will be supported soon
         // draggable: true,
         multipleInstances: false
@@ -25,4 +26,4 @@ See **demo** at [dematte.at/cpn/javaScript_implementation](http://dematte.at/cpn
         renderCallback: renderCallback
         // and all other options from color and colorPicker
     });
-```
+```

javascript_implementation/index.html

@@ -16,27 +16,29 @@
 <h1>Simple javaScript implementation</h1>
 Calling the colorPicker on all inputs with the calssName 'color': <pre>jsColorPicker('input.color');</pre>
 <p>
-	<input class="color" value="#323f03" />
+	<input class="color" value="#B6BD79" />
 	<input class="color" value="rgb(162, 63, 3)" />
 	<input class="color" value="hsla(32, 95%, 23%, 0.9)" />
 </p>
 <!-- <button onclick="$colors.colorPicker('destroy')">destroy</button> -->
-<!-- <script type="text/javascript" src="../colors.js"></script>
+<script type="text/javascript" src="../colors.js"></script>
 <script type="text/javascript" src="../colorPicker.data.js"></script>
 <script type="text/javascript" src="../colorPicker.js"></script>
- -->
+
 <!-- <script type="text/javascript" src="../color.all.min.js"></script> -->
 
-<!-- <script type="text/javascript" src="jsColor.js"></script>
+<script type="text/javascript" src="jsColor.js"></script>
- -->
+
-<script type="text/javascript" src="jsColorPicker.min.js"></script>
+<!-- <script type="text/javascript" src="jsColorPicker.min.js"></script> -->
 
 <script type="text/javascript">
 	var colors = jsColorPicker('input.color', {
         customBG: '#222',
         readOnly: true,
-        init: function(elm) {
+        // 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>

javascript_implementation/jsColor.js

@@ -157,7 +157,8 @@
 			},
 			// this is a way to prevent data binding on HTMLElements
 			colorPickers = window.jsColorPicker.colorPickers || [],
-			elms = document.querySelectorAll(selectors);
+			elms = document.querySelectorAll(selectors),
+			testColors = new window.Colors({customBG: config.customBG, allMixDetails: true});
 
 		window.jsColorPicker.colorPickers = colorPickers;
 
@@ -172,8 +173,9 @@
 			} else {
 				var value = elm.value.split('(');
 
+				testColors.setColor(elm.value);
 				if (config && config.init) {
-					config.init(elm);
+					config.init(elm, testColors.colors);
 				}
 				elm.setAttribute('data-colorMode', value[1] ? value[0].substr(0, 3) : 'HEX');
 				doEventListeners(elm, (config && config.multipleInstances), false);