Minor updates / color2text method

- fixed positioning (appendTo different then document.body)
- added method color2text()
- minor optimizations

README.md

@@ -59,6 +59,7 @@ var myColors = new Colors({ // all options have a default value...
     valueRanges: {rgb: {r: [0, 255], g: [0, 255], b: [0, 255]}, hsv:...}, // skip ranges if no conversion required
     customBG: '#808080' // the solid bgColor behind the chosen bgColor (saved color)
     convertCallback: function(colors, type){}, // callback function after color convertion for further calculations...
+    toString: function('rgb' || 'hsl' || 'hex' || '' -> 'rgb', forceAlpha) {},
     allMixDetails: false // if set to true, Colors deliveres some more mixed layer informations for all color layers
 });
 ```

colors.js

@@ -155,6 +155,11 @@
 		return color;
 	};
 
+	Colors.prototype.toString = function(colorMode, forceAlpha) {
+		return ColorConverter.color2text((colorMode || 'rgb').toLowerCase(), this.colors, forceAlpha);
+	};
+
+
 	// ------------------------------------------------------ //
 	// ---------- Color calculation related stuff  ---------- //
 	// -------------------------------------------------------//
@@ -366,6 +371,23 @@
 			return color;
 		},
 
+		color2text: function(colorMode, colors, forceAlpha) {
+			var alpha = forceAlpha !== false && _math.round(colors.alpha * 100) / 100,
+				hasAlpha = typeof alpha === 'number' &&
+					forceAlpha !== false && (forceAlpha || alpha !== 1),
+				RGB = colors.RND.rgb,
+				HSL = colors.RND.hsl,
+				shouldBeHex = colorMode === 'hex' && hasAlpha,
+				isHex = colorMode === 'hex' && !shouldBeHex,
+				isRgb = colorMode === 'rgb' || shouldBeHex,
+				innerText = isRgb ? RGB.r + ', ' + RGB.g + ', ' + RGB.b :
+					!isHex ? HSL.h + ', ' + HSL.s + '%, ' + HSL.l + '%' :
+					'#' + colors.HEX;
+
+			return isHex ? innerText : (shouldBeHex ? 'rgb' : colorMode) + 
+					(hasAlpha ? 'a' : '') + '(' + innerText + (hasAlpha ? ', ' + alpha : '') + ')';
+		},
+
 		RGB2HEX: function(RGB) {
 			return (
 				(RGB.r < 16 ? '0' : '') + RGB.r.toString(16) +
@@ -375,13 +397,11 @@
 		},
 
 		HEX2rgb: function(HEX) {
-			var _parseInt = _parseint;
-
 			HEX = HEX.split(''); // IE7
 			return {
-				r: _parseInt(HEX[0] + HEX[HEX[3] ? 1 : 0], 16) / 255,
+				r: +('0x' + HEX[0] + HEX[HEX[3] ? 1 : 0]) / 255,
-				g: _parseInt(HEX[HEX[3] ? 2 : 1] + (HEX[3] || HEX[1]), 16) / 255,
+				g: +('0x' + HEX[HEX[3] ? 2 : 1] + (HEX[3] || HEX[1])) / 255,
-				b: _parseInt((HEX[4] || HEX[2]) + (HEX[5] || HEX[2]), 16) / 255
+				b: +('0x' + (HEX[4] || HEX[2]) + (HEX[5] || HEX[2])) / 255
 			};
 		},
 

index.js

@@ -25,9 +25,8 @@
 	var testPatch = document.getElementById('testPatch'),
 		renderTestPatch = function(color) { // used in renderCallback of 'new ColorPicker'
 			var RGB = color.RND.rgb;
-
 			testPatch.style.cssText =
-				'background-color: rgba(' + RGB.r + ',' + RGB.g + ',' + RGB.b + ',' + color.alpha + ');' +
+				'background-color: ' + (myColor.color || myColor).toString() + ';' +
 				'color: ' + (color.rgbaMixBlack.luminance > 0.22 ? '#222' : '#ddd');
 			testPatch.firstChild.data = '#' + color.HEX;
 		};
@@ -58,7 +57,7 @@
 					Math.round(cBGColor.r * 255) + ',' +
 					Math.round(cBGColor.g * 255) + ',' +
 					Math.round(cBGColor.b * 255) + ');' +
-				'color: ' + 'rgba(' + RGB.r + ',' + RGB.g + ',' + RGB.b + ',' + color.alpha + ');';
+				'color: ' + (myColor.color || myColor).toString();
 			backGround.style.cssText =
 				'background-color: rgba(' +
 					bgColor.r + ',' +
@@ -77,9 +76,9 @@
 			var RND = color.RND;
 
 			colorValues.firstChild.data =
-				'rgba(' + RND.rgb.r  + ',' + RND.rgb.g  + ',' + RND.rgb.b  + ',' + color.alpha + ')' + "\n" +
+				(myColor.color || myColor).toString('rgb', true).replace(/, /g, ',') + "\n" +
 				'hsva(' + RND.hsv.h  + ',' + RND.hsv.s  + ',' + RND.hsv.v  + ',' + color.alpha + ')' + "\n" +
-				'hsla(' + RND.hsl.h  + ',' + RND.hsl.s  + ',' + RND.hsl.l  + ',' + color.alpha + ')' + "\n" +
+				(myColor.color || myColor).toString('hsl', true).replace(/, /g, ',') + "\n" +
 				'CMYK(' + RND.cmyk.c + ',' + RND.cmyk.m + ',' + RND.cmyk.y + ',' + RND.cmyk.k + ')' + "\n" +
 				'CMY('  + RND.cmy.c  + ',' + RND.cmy.m  + ',' + RND.cmy.y  + ')' + "\n" +
 				'Lab('  + RND.Lab.L  + ',' + RND.Lab.a  + ',' + RND.Lab.b  + ')'; // + "\n" +

jQuery_implementation/index.html

@@ -54,6 +54,7 @@ var memoryColors = [
 			elm.style.backgroundColor = elm.value;
 			elm.style.color = colors.rgbaMixCustom.luminance > 0.22 ? '#222' : '#ddd';
 		},
+		// appendTo: document.querySelector('.the-paragraph')
 		// renderCallback: function(colors, mode) {
 		// 	console.log(mode);
 		// }

jQuery_implementation/jqColor.js

@@ -9,23 +9,20 @@
 						HSL = colors.RND.hsl,
 						AHEX = options.isIE8 ? (colors.alpha < 0.16 ? '0' : '') +
 							(Math.round(colors.alpha * 100)).toString(16).toUpperCase() + colors.HEX : '',
-						RGBInnerText = RGB.r + ', ' + RGB.g + ', ' + RGB.b,
-						RGBAText = 'rgba(' + RGBInnerText + ', ' + colors.alpha + ')',
 						isAlpha = colors.alpha !== 1 && !options.isIE8,
 						colorMode = $input.data('colorMode');
 
+					if (!options._instance) return;
+
 					$patch.css({
 						'color': (colors.rgbaMixCustom.luminance > 0.22 ? '#222' : '#ddd'), // Black...???
-						'background-color': RGBAText,
+						'background-color': options._instance.toString(),
 						'filter' : (options.isIE8 ? 'progid:DXImageTransform.Microsoft.gradient(' + // IE<9
 							'startColorstr=#' + AHEX + ',' + 'endColorstr=#' + AHEX + ')' : '')
 					});
 
 					$input.val(colorMode === 'HEX' && !isAlpha ? '#' + (options.isIE8 ? AHEX : colors.HEX) :
-						colorMode === 'rgb' || (colorMode === 'HEX' && isAlpha) ?
+						options._instance.toString(colorMode, options.forceAlpha)
-						(!isAlpha ? 'rgb(' + RGBInnerText + ')' : RGBAText) :
-						('hsl' + (isAlpha ? 'a(' : '(') + HSL.h + ', ' + HSL.s + '%, ' + HSL.l + '%' +
-							(isAlpha ? ', ' + colors.alpha : '') + ')')
 					);
 
 					if (options.displayCallback) {
@@ -85,16 +82,20 @@
 							// 	return config.noAlpha ?
 							// 		colors.replace(/\,\d*\.*\d*\)/g, ',1)') : colors;
 							// })($.docCookies('colorPickerMemos'), config || {}),
+							// forceAlpha: true,
 							memoryColors: $.docCookies('colorPickerMemos' + ((config || {}).noAlpha ? 'NoAlpha' : '')),
 							size: $.docCookies('colorPickerSize') || 1,
 							renderCallback: renderCallback,
 							actionCallback: actionCallback
-						};
+						},
+						instance;
 
 					for (var n in config) {
 						initConfig[n] = config[n]; 
 					}
-					return new initConfig.klass(initConfig);
+					instance = new initConfig.klass(initConfig);
+					instance.color.options._instance = instance.color;
+					return instance;
 				},
 				doEventListeners = function(elm, multiple, off) {
 					var onOff = off ? 'off' : 'on';
@@ -109,13 +110,16 @@
 							$colorPicker = $.ui && options.draggable ?
 							$(colorPicker.nodes.colorPicker).draggable(
 								{cancel: '.' + options.CSSPrefix + 'app div'}
-							) : $(colorPicker.nodes.colorPicker);
+							) : $(colorPicker.nodes.colorPicker),
+							$appendTo = $(options.appendTo || document.body),
+							isStatic = /static/.test($appendTo.css('position')),
+							atrect = isStatic ? {left: 0, top: 0} : $appendTo[0].getBoundingClientRect();
 
 						options.color = extractValue(elm); // brings color to default on reset
 						$colorPicker.css({
 							'position': 'absolute',
-							'left': position.left + options.margin.left,
+							'left': position.left + options.margin.left -  atrect.left,
-							'top': position.top + $input.outerHeight(true) + options.margin.top
+							'top': position.top + $input.outerHeight(true) + options.margin.top - atrect.top
 						});
 						if (!multiple) {
 							options.input = elm;
@@ -124,7 +128,7 @@
 							colorPicker.saveAsBackground();
 						}
 						colorPickers.current = colorPickers[index];
-						$(options.appendTo || document.body).append($colorPicker);
+						$appendTo.append($colorPicker);
 						setTimeout(function() { // compensating late style on onload in colorPicker
 							$colorPicker.show(colorPicker.color.options.animationSpeed);
 						}, 0);

javascript_implementation/_temp.js

@@ -0,0 +1,174 @@
+/**
+ * [kolor-picker]{@link https://github.com/emn178/kolor-picker}
+ *
+ * @version 0.2.0
+ * @author Yi-Cyuan Chen [emn178@gmail.com]
+ * @copyright Yi-Cyuan Chen 2015-2016
+ * @license MIT
+ */
+(function ($) {
+  'use strict';
+
+  var KEY = 'kolor-picker';
+  var wrapper;
+
+  function Wrapper(element, colorPicker) {
+    this.element = element;
+    this.colorPicker = colorPicker;
+    this.previewElement = $('<div class="kolor-picker"><div class="sampler"></div><div class="preview-block"><input type="text"/><div class="preview-wrapper"><div class="preview" /></div></div></div>');
+    this.element.append(this.previewElement);
+
+    var elements = {
+      preview: this.previewElement.find('.preview'),
+      input: this.previewElement.find('input'),
+      sampler: this.previewElement.find('.sampler'),
+      alpha: this.element.find('.cp-alpha')
+    };
+    this.elements = elements;
+    elements.sampler.click(this.enableSampler.bind(this));
+
+    this.sampling = false;
+    this.lastToggled = false;
+  }
+
+  Wrapper.prototype.enableSampler = function () {
+    if (!this.kolorPicker.canvas) {
+      return;
+    }
+    this.kolorPicker.canvas.colorSampler('enable');
+    this.sampling = true;
+    this.colorPicker.toggle(false);
+  };
+
+  Wrapper.prototype.setKolorPicker = function (kolorPicker) {
+    this.kolorPicker = kolorPicker;
+    this.element.attr('data-theme', kolorPicker.theme);
+    this.elements.sampler.toggle(!!kolorPicker.canvas);
+    this.elements.alpha.toggle(kolorPicker.options.opacity !== false);
+    if (kolorPicker.options.doRender === undefined) {
+      this.colorPicker.color.options.doRender = true;
+    } else {
+      this.colorPicker.color.options.doRender = kolorPicker.options.doRender;
+    }
+  };
+
+  Wrapper.prototype.getColor = function () {
+    return this.color.toString();
+    // var rgb = this.colorPicker.color.colors.rgb;
+    // return 'rgba(' + [parseInt(rgb.r * 255), parseInt(rgb.g * 255), parseInt(rgb.b * 255), this.colorPicker.color.colors.alpha.toFixed(2)].join(',') + ')';
+  };
+
+  Wrapper.prototype.updateColor = function () {
+    var color = this.getColor();
+    this.elements.preview.css('background-color', color);
+    this.elements.input.val(color);
+    this.kolorPicker.changeColor(color);
+  };
+
+  Wrapper.prototype.render = function (toggled) {
+    if (toggled === undefined) {
+      this.updateColor();
+    } else if (this.lastToggled === toggled) {
+      return;
+    }
+    this.lastToggled = toggled;
+    if (toggled === false) {
+      if (!this.sampling) {
+        var color = this.getColor();
+        this.kolorPicker.selectColor(color);
+      }
+    } else {
+      this.updateColor();
+    }
+  };
+
+  function KolorPicker(element, options) {
+    this.element = element;
+    this.options = options || {};
+    this.canvas = this.options.canvas;
+    this.theme = this.options.theme || $.kolorPicker.theme;
+
+    if (this.canvas) {
+      this.canvas = $(this.canvas);
+      this.canvas.colorSampler().colorSampler('disable')
+        .bind('sampler:preview', this.onSamplerPreview.bind(this))
+        .bind('sampler:select', this.onSamplerSelect.bind(this));
+    }
+  }
+
+  KolorPicker.prototype.onSamplerSelect = function (e, color) {
+    if (wrapper.kolorPicker != this) {
+      return;
+    }
+    wrapper.sampling = false;
+    this.canvas.colorSampler('disable');
+    this.setColor(color);
+    color = wrapper.getColor();
+    this.selectColor(color);
+  };
+
+  KolorPicker.prototype.onSamplerPreview = function (e, color) {
+    if (wrapper.kolorPicker != this) {
+      return;
+    }
+    this.element.css('background-color', color);
+    color = wrapper.getColor();
+    this.changeColor(color);
+  };
+
+  KolorPicker.prototype.selectColor = function (color) {
+    if ($.isFunction(this.options.onSelect)) {
+      this.options.onSelect.call(this.element, color);
+    }
+  };
+
+  KolorPicker.prototype.changeColor = function (color) {
+    if ($.isFunction(this.options.onChange)) {
+      this.options.onChange.call(this.element, color);
+    }
+  };
+
+  KolorPicker.prototype.setColor = function (color) {
+    wrapper.colorPicker.color.setColor(color);
+    wrapper.colorPicker.render();
+  };
+
+  var KolorPickerOptions = {
+    buildCallback: function (element) {
+      wrapper = new Wrapper(element, this);
+    },
+
+    renderCallback: function (element, toggled) {
+      wrapper.setKolorPicker($(element).data(KEY));
+      wrapper.render(toggled);
+    }
+  };
+
+  var PublicMethods = ['setColor'];
+  $.fn.kolorPicker = function (options) {
+    if (typeof (options) == 'string') {
+      if ($.inArray(options, PublicMethods) != -1) {
+        var args = Array.prototype.splice.call(arguments, 1);
+        this.each(function () {
+          var kolorPicker = $(this).data(KEY);
+          if (kolorPicker) {
+            return kolorPicker[options].apply(kolorPicker, args);
+          }
+        });
+      }
+    } else {
+      this.each(function () {
+        var element = $(this);
+        if (!element.data(KEY)) {
+          return element.data(KEY, new KolorPicker(element, options))
+            .colorPicker($.extend({ cssAddon: $.kolorPicker.css }, options, KolorPickerOptions));
+        }
+      });
+    }
+    return this;
+  };
+
+  $.kolorPicker = {
+    theme: ''
+  };
+})(jQuery);

javascript_implementation/index.html

@@ -41,7 +41,8 @@ Calling the colorPicker on all inputs with the calssName 'color': <pre>jsColorPi
 			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';
-			}
+			},
+			// appendTo: document.querySelector('.samples')
 		});
 </script>
 </body>

javascript_implementation/jsColor.js

@@ -103,13 +103,16 @@
 							colorPicker = colorPickers[index] ||
 								(colorPickers[index] = createInstance(this, config)),
 							options = colorPicker.color.options,
-							colorPickerUI = colorPicker.nodes.colorPicker;
+							colorPickerUI = colorPicker.nodes.colorPicker,
+							appendTo = (options.appendTo || document.body),
+							isStatic = /static/.test(window.getComputedStyle(appendTo).position),
+							atrect = isStatic ? {left: 0, top: 0} : appendTo.getBoundingClientRect();
 
 						options.color = extractValue(elm); // brings color to default on reset
 						colorPickerUI.style.cssText = 
 							'position: absolute;' +
-							'left:' + (position.left + options.margin.left) + 'px;' +
+							'left:' + (position.left + options.margin.left - atrect.left) + 'px;' +
-							'top:' + (position.top + +input.offsetHeight + options.margin.top) + 'px;';
+							'top:' + (position.top + +input.offsetHeight + options.margin.top - atrect.top) + 'px;';
 
 						if (!multiple) {
 							options.input = elm;
@@ -118,7 +121,7 @@
 							colorPicker.saveAsBackground();
 						}
 						colorPickers.current = colorPickers[index];
-						(options.appendTo || document.body).appendChild(colorPickerUI);
+						appendTo.appendChild(colorPickerUI);
 						setTimeout(function() { // compensating late style on onload in colorPicker
 							colorPickerUI.style.display = 'block';
 						}, 0);