new method toString / optimization

Added method ‚toString‘ to colors.js; Converts color to HTML-string
with auto or forced alpha. Some minor optimizations.

Author: PitPik

LICENSE.md

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2014 Peter Dematté
+Copyright (c) 2016 Peter Dematté
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -99,10 +99,13 @@ After initializing Color or ColorPicker you'll get a clean but rhich model of th
 myColors: {
     colors: { all kinds of color values...  see later},
     options: { all the options you set or that are set as default... },
-    __proto__: { // all methods Color uses
+    __proto__: { // all methods Color uses (See https://github.com/PitPik/colorPicker for details)
         setColor: function(newCol, type, alpha) {},
         setCustomBackground: function(col) {},
         saveAsBackground: function() {},
+        // new method: converts current color to HTML-String like: rgba(123, 234, 0, 0.89)
+        // forceAlpha === true / false -> alway / never print alpha, === undefined -> auto
+        toString: function('rgb' || 'hsl' || 'hex' || '' -> 'rgb', forceAlpha) {},
     }
 }
 ```

colors.js

@@ -19,6 +19,9 @@
 			HEX:   {HEX: [0, 16777215]} // maybe we don't need this
 		},
 
+		_Math = window.Math,
+		_round = _Math.round,
+
 		_instance = {},
 		_colors = {},
 
@@ -83,6 +86,10 @@
 		return setColor(this.colors, undefined, 'rgb', true);
 	};
 
+	Colors.prototype.toString = function(colorMode, forceAlpha) {
+		return ColorConverter.color2text(colorMode || 'rgba', this.colors, forceAlpha);
+	};
+
 	// ------------------------------------------------------ //
 	// ---------- Color calculation related stuff  ---------- //
 	// -------------------------------------------------------//
@@ -112,7 +119,7 @@
 		color.rgb = {r: rgb.r, g: rgb.g, b: rgb.b};
 		color.alpha = alpha;
 		// color.RGBLuminance = getLuminance(RGB);
-		color.equivalentGrey = Math.round(grey.r * RGB.r + grey.g * RGB.g + grey.b * RGB.b);
+		color.equivalentGrey = _round(grey.r * RGB.r + grey.g * RGB.g + grey.b * RGB.b);
 
 		color.rgbaMixBlack = mixColors(rgb, {r: 0, g: 0, b: 0}, alpha, 1);
 		color.rgbaMixWhite = mixColors(rgb, {r: 1, g: 1, b: 1}, alpha, 1);
@@ -151,7 +158,7 @@
 					if (!RND[typ]) RND[typ] = {};
 					modes = colors[typ];
 					for(mode in modes) {
-						RND[typ][mode] = Math.round(modes[mode] * ranges[typ][mode][1]);
+						RND[typ][mode] = _round(modes[mode] * ranges[typ][mode][1]);
 					}
 				}
 			}
@@ -198,7 +205,7 @@
 				background.rgbaMixCustom[luminance]);
 			colors.rgbaMixBGMixCustom = rgbaMixBGMixCustom;
 			/* ------ */
-			rgbaMixBGMixCustom.luminanceDelta = Math.abs(
+			rgbaMixBGMixCustom.luminanceDelta = _Math.abs(
 				rgbaMixBGMixCustom[luminance] - background.rgbaMixCustom[luminance]);
 			rgbaMixBGMixCustom.hueDelta = getHueDelta(background.rgbaMixCustom, rgbaMixBGMixCustom, true);
 			/* ------ */
@@ -246,6 +253,25 @@
 			return color;
 		},
 
+		color2text: function(colorMode, colors, forceAlpha) {
+			var alpha = forceAlpha !== false && _round(colors.alpha * 100) / 100,
+				hasAlpha = typeof alpha === 'number' &&
+					forceAlpha !== false && (forceAlpha || alpha !== 1),
+				RGB = colors.RND.rgb,
+				HSL = colors.RND.hsl,
+				mode = colorMode.toLowerCase().substr(0, 3),
+				shouldBeHex = mode === 'hex' && hasAlpha,
+				isHex = mode === 'hex' && !shouldBeHex,
+				isRgb = mode === 'rgb' || shouldBeHex,
+				innerText = isRgb ? RGB.r + ', ' + RGB.g + ', ' + RGB.b :
+					HSL.h + ', ' + HSL.s + '%, ' + HSL.l + '%',
+				text = isHex ? '#' + colors.HEX : (shouldBeHex ? 'rgb' : mode) + 
+					(hasAlpha ? 'a' : '') + '(' + innerText +
+					(hasAlpha ? ', ' + alpha : '') + ')';
+
+			return text;
+		},
+
 		RGB2HEX: function(RGB) {
 			return (
 				(RGB.r < 16 ? '0' : '') + RGB.r.toString(16) +
@@ -257,21 +283,21 @@
 		HEX2rgb: function(HEX) {
 			HEX = HEX.split(''); // IE7
 			return {
-				r: parseInt(HEX[0] + HEX[HEX[3] ? 1 : 0], 16) / 255,
-				g: parseInt(HEX[HEX[3] ? 2 : 1] + (HEX[3] || HEX[1]), 16) / 255,
-				b: parseInt((HEX[4] || HEX[2]) + (HEX[5] || HEX[2]), 16) / 255
+				r: +('0x' + HEX[0] + HEX[HEX[3] ? 1 : 0]) / 255,
+				g: +('0x' + HEX[HEX[3] ? 2 : 1] + (HEX[3] || HEX[1])) / 255,
+				b: +('0x' + (HEX[4] || HEX[2]) + (HEX[5] || HEX[2])) / 255
 			};
 		},
 
 		hue2RGB: function(hue) {
 			var h = hue * 6,
-				mod = ~~h % 6, // Math.floor(h) -> faster in most browsers
+				mod = ~~h % 6, // _Math.floor(h) -> faster in most browsers
 				i = h === 6 ? 0 : (h - mod);
 
 			return {
-				r: Math.round([1, 1 - i, 0, 0, i, 1][mod] * 255),
-				g: Math.round([i, 1, 1, 1 - i, 0, 0][mod] * 255),
-				b: Math.round([0, 0, i, 1, 1, 1 - i][mod] * 255)
+				r: _round([1, 1 - i, 0, 0, i, 1][mod] * 255),
+				g: _round([i, 1, 1, 1 - i, 0, 0][mod] * 255),
+				b: _round([0, 0, i, 1, 1, 1 - i][mod] * 255)
 			};
 		},
 
@@ -291,13 +317,13 @@
 			if (r < g) {
 				r = g + (g = r, 0);
 				k = -2 / 6 - k;
-				min = Math.min(g, b); // g < b ? g : b; ???
+				min = _Math.min(g, b); // g < b ? g : b; ???
 			}
 			chroma = r - min;
 			s = r ? (chroma / r) : 0;
 			return {
 				h: s < 1e-15 ? ((_colors && _colors.hsl && _colors.hsl.h) || 0) :
-					chroma ? Math.abs(k + (g - b) / (6 * chroma)) : 0,
+					chroma ? _Math.abs(k + (g - b) / (6 * chroma)) : 0,
 				s: r ? (chroma / r) : ((_colors && _colors.hsv && _colors.hsv.s) || 0), // ??_colors.hsv.s || 0
 				v: r
 			};
@@ -307,7 +333,7 @@
 			var h = hsv.h * 6,
 				s = hsv.s,
 				v = hsv.v,
-				i = ~~h, // Math.floor(h) -> faster in most browsers
+				i = ~~h, // _Math.floor(h) -> faster in most browsers
 				f = h - i,
 				p = v * (1 - s),
 				q = v * (1 - f * s),
@@ -349,7 +375,7 @@
 				v = l < 0.5 ? l * (1 + s) : (l + s) - (s * l),
 				m = l + l - v,
 				sv = v ? ((v - m) / v) : 0,
-				sextant = ~~h, // Math.floor(h) -> faster in most browsers
+				sextant = ~~h, // _Math.floor(h) -> faster in most browsers
 				fract = h - sextant,
 				vsf = v * sv * fract,
 				t = m + vsf,
@@ -381,9 +407,9 @@
 	}
 
 	function getHueDelta(rgb1, rgb2, nominal) {
-		return (Math.max(rgb1.r - rgb2.r, rgb2.r - rgb1.r) +
-				Math.max(rgb1.g - rgb2.g, rgb2.g - rgb1.g) +
-				Math.max(rgb1.b - rgb2.b, rgb2.b - rgb1.b)) * (nominal ? 255 : 1) / 765;
+		return (_Math.max(rgb1.r - rgb2.r, rgb2.r - rgb1.r) +
+				_Math.max(rgb1.g - rgb2.g, rgb2.g - rgb1.g) +
+				_Math.max(rgb1.b - rgb2.b, rgb2.b - rgb1.b)) * (nominal ? 255 : 1) / 765;
 	}
 
 	function getLuminance(rgb, normalized) {
@@ -392,7 +418,7 @@
 			luminance = _instance.options.luminance;
 
 		for (var i = RGB.length; i--; ) {
-			RGB[i] = RGB[i] <= 0.03928 ? RGB[i] / 12.92 : Math.pow(((RGB[i] + 0.055) / 1.055), 2.4);
+			RGB[i] = RGB[i] <= 0.03928 ? RGB[i] / 12.92 : _Math.pow(((RGB[i] + 0.055) / 1.055), 2.4);
 		}
 		return ((luminance.r * RGB[0]) + (luminance.g * RGB[1]) + (luminance.b * RGB[2]));
 	}
@@ -418,11 +444,11 @@
 		} else {
 			ratio = (lum2 + 0.05) / (lum1 + 0.05);
 		}
-		return Math.round(ratio * 100) / 100;
+		return _round(ratio * 100) / 100;
 	}
 
 	function limitValue(value, min, max) {
-		// return Math.max(min, Math.min(max, value)); // faster??
+		// return _Math.max(min, _Math.min(max, value)); // faster??
 		return (value > max ? max : value < min ? min : value);
 	}
 

demo/index.html

@@ -11,9 +11,9 @@
 	<link rel="stylesheet" type="text/css" href="../index.css">
 	<link id="colorPickerMod" rel="stylesheet" type="text/css" href="mod.css">
 	<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
-	<script type="text/javascript" src="../jqColorPicker.min.js"></script>
-	<!-- <script type="text/javascript" src="../colors.js"></script> -->
-	<!-- <script type="text/javascript" src="../jqColorPicker.js"></script> -->
+	<!-- <script type="text/javascript" src="../jqColorPicker.min.js"></script> -->
+	<script type="text/javascript" src="../colors.js"></script>
+	<script type="text/javascript" src="../jqColorPicker.js"></script>
 	<script type="text/javascript" src="index.js"></script>
 
 	<title>tiny jQuery color picker demo</title>
@@ -25,9 +25,9 @@ <h1>Tiny jQuery colorPicker</h1>
 		<a name="demo" id="demo" class="a-inline"></a>
 		<h2>Skinned dev-tools like, with RGB sliders</h2>
 		<div class="input-toggles">
-			<input class="color no-alpha" value="#B6BD79" />
+			<input class="color" value="#B6BD79" />
 			<input class="color no-alpha" value="rgb(162, 63, 3)" />
-			<input class="color no-alpha" value="hsl(32, 95%, 23%)" />
+			<input class="color no-sliders" value="hsl(32, 95%, 23%)" />
 		</div>
 		<div class="div-toggles">
 			<div class="trigger" value="#556B2F"><div><div></div></div></div>

demo/index.js

@@ -36,12 +36,14 @@ $(function(){
 				'<div class="cp-rgb-b"><div class="cp-rgb-b-cursor"></div></div>' +
 				'<div class="cp-patch"><div></div></div><div class="cp-disp"></div>');
 
-			this.cursorRStyle = $elm.find('.cp-rgb-r-cursor')[0].style; // caching for faster render renderCallback
-			this.cursorGStyle = $elm.find('.cp-rgb-g-cursor')[0].style;
-			this.cursorBStyle = $elm.find('.cp-rgb-b-cursor')[0].style;
+			this.$sliders = $elm.find('.cp-rgb-r, .cp-rgb-g, .cp-rgb-b');
+			this.cursorRStyle = this.$sliders.find('.cp-rgb-r-cursor')[0].style; // caching for faster render renderCallback
+			this.cursorGStyle = this.$sliders.find('.cp-rgb-g-cursor')[0].style;
+			this.cursorBStyle = this.$sliders.find('.cp-rgb-b-cursor')[0].style;
 
 			this.patchStyle = $('.cp-patch div')[0].style;
 			this.$display = $('.cp-disp');
+			this.$alpha = $elm.find('.cp-alpha');
 
 			$elm.on('mousedown', '.cp-rgb-r, .cp-rgb-g, .cp-rgb-b', function(e) { // event delegation
 				$currentSlider = $(this); // well ;o)
@@ -73,6 +75,11 @@ $(function(){
 			// 	$elm.closest('.trigger').removeClass('active');
 			// }
 
+			if (toggled === true) { // on show colorPicker
+				this.$alpha.toggle(!$elm.hasClass('no-alpha'));
+				this.$sliders.toggle(!$elm.hasClass('no-sliders'));
+			}
+
 			this.patchStyle.backgroundColor = $elm[0].style.backgroundColor; // set patch color...
 			this.$display.text(this.color.options.colorNames[colors.HEX] || $elm.val()); // ...and text aside
 

demo/mod.css

@@ -57,6 +57,7 @@
 .cp-color-picker .cp-rgb-r,
 .cp-color-picker .cp-rgb-g,
 .cp-color-picker .cp-rgb-b {
+	clear: both;
 	overflow: visible;
 	width: 152px;
 	margin: 12px 0 0;

index.html

@@ -12,6 +12,13 @@
 	<link rel="icon" type="image/x-icon" href="development/favicon.ico">
 	<!-- <link rel="stylesheet" type="text/css" href="development/colorPicker.css"> -->
 	<link rel="stylesheet" type="text/css" href="development/compatibility.css">
+
+	<!-- <script type="text/javascript" src="jquery-1.11.2.js"></script> -->
+	<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
+	<script type="text/javascript" src="colors.js"></script>
+	<script type="text/javascript" src="jqColorPicker.js"></script>
+	<!-- <script type="text/javascript" src="jqColorPicker.min.js"></script> -->
+
 	<title>tiny jQuery color picker</title>
 </head>
 <body>
@@ -48,7 +55,8 @@ <h2>Demo</h2>
 	<div class="trigger" value="#556B2F"><div><div></div></div></div>
 	<div class="trigger" value="rgb(100, 86, 70)"><div><div></div></div></div>
 	<div class="trigger" value="hsla(167, 29%, 68%, 0.8)"><div><div></div></div></div>
-<img id="qr" style="float: right; display: block; display: none; margin-right: -200px;" src="./development/qr.png" alt="QR code for http://www.dematte.at/tinyColorPicker/?type=mobile#demo"></div>
+	<img id="qr" style="float: right; display: block; display: none; margin-right: -200px;" src="./development/qr.png" alt="QR code for http://www.dematte.at/tinyColorPicker/?type=mobile#demo">
+</div>
 <h2>Usage</h2>
 <p>There is only one file you need to load... No images and no CSS required.</p>
 <pre style="display: block; overflow: auto;">
@@ -77,29 +85,21 @@ <h2>Features</h2>
         '.cp-alpha-cursor {border-width:8px; margin-left:-8px;}',
 
     renderCallback: function($elm, toggled) {
-        var colors = this.color.colors,
-            rgb = colors.RND.rgb;
+        var colors = this.color.colors;
 
         $('.cp-disp').css({
             backgroundColor: '#' + colors.HEX,
             color: colors.RGBLuminance > 0.22 ? '#222' : '#ddd'
-        }).text('rgba(' + rgb.r + ', ' + rgb.g + ', ' + rgb.b +
-            ', ' + (Math.round(colors.alpha * 100) / 100) + ')');
+        }).text(this.color.toString($elm._colorMode));
     }
 });
 </pre>
 <h2>API and usage</h2>
 <p>Will follow... See <a href="https://github.com/PitPik/tinyColorPicker">tinyColorPicker on GitHub</a> for now.</p>
 </div>
+<a class="a-inline" href="https://github.com/PitPik/tinyColorPicker"><img style="position: absolute; top: 0; right: 0; border: 0;" src="development/fmog.png" alt="Fork me on GitHub"></a>
 
-
-
-<!-- <script type="text/javascript" src="jquery-1.11.2.js"></script> -->
-<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
-<script type="text/javascript" src="colors.js"></script>
-<script type="text/javascript" src="jqColorPicker.js"></script>
-<!-- <script type="text/javascript" src="jqColorPicker.min.js"></script> -->
 <script type="text/javascript" src="index.js"></script>
-<a class="a-inline" href="https://github.com/PitPik/tinyColorPicker"><img style="position: absolute; top: 0; right: 0; border: 0;" src="development/fmog.png" alt="Fork me on GitHub"></a>
+
 </body>
 </html>

index.js

@@ -43,14 +43,12 @@
 			'.cp-alpha-cursor{border-width: 8px; margin-left:-8px;}',
 
 		renderCallback: function($elm, toggled) {
-			var colors = this.color.colors,
-				rgb = colors.RND.rgb;
+			var colors = this.color.colors;
 
 			$('.cp-disp').css({
 				backgroundColor: '#' + colors.HEX,
 				color: colors.RGBLuminance > 0.22 ? '#222' : '#ddd'
-			}).text('rgba(' + rgb.r + ', ' + rgb.g + ', ' + rgb.b +
-				', ' + (Math.round(colors.alpha * 100) / 100) + ')');
+			}).text(this.color.toString($elm._colorMode)); // $elm.val();
 		}
 	};
 

jqColorPicker.js

@@ -120,7 +120,7 @@
     }
 
     function build() {
-        $('head').append('<style type="text/css">' +
+        $('head').append('<style type="text/css" id="tinyColorPickerStyles">' +
             (_options.css || _css) + (_options.cssAddon || '') + '</style>');
 
         return _colorPicker.$UI = _$UI =
@@ -200,22 +200,13 @@
             HSL = colors.RND.hsl,
             dark = '#222',
             light = '#ddd',
-            colorMode = _$trigger._colorMode,
-            isAlpha = colors.alpha !== 1,
-            alpha = _round(colors.alpha * 100) / 100,
-            RGBInnerText = RGB.r + ', ' + RGB.g + ', ' + RGB.b,
-            text = (colorMode === 'HEX' && !isAlpha ? '#' + colors.HEX :
-                colorMode === 'rgb' || (colorMode === 'HEX' && isAlpha) ?
-                (!isAlpha ? 'rgb(' + RGBInnerText + ')' :
-                    'rgba(' + RGBInnerText + ', ' + alpha + ')') :
-                ('hsl' + (isAlpha ? 'a(' : '(') + HSL.h + ', ' + HSL.s + '%, ' +
-                    HSL.l + '%' + (isAlpha ? ', ' + alpha : '') + ')')),
+            colorText = _color.toString(_$trigger._colorMode),
             HUEContrast = colors.HUELuminance > 0.22 ? dark : light,
             alphaContrast = colors.rgbaMixBlack.luminance > 0.22 ? dark : light,
             h = (1 - colors.hsv.h) * _$xy_slider._height,
             s = colors.hsv.s * _$xy_slider._width,
             v = (1 - colors.hsv.v) * _$xy_slider._height,
-            a = alpha * _$alpha._width,
+            a = colors.alpha * _$alpha._width,
             translate3d = _GPU ? 'translate3d' : '',
             triggerValue = _$trigger[0].value,
             hasNoValue = _$trigger[0].hasAttribute('value') && // question this
@@ -235,18 +226,18 @@
             top: !_GPU ? h : '',
             borderColor : 'transparent ' + HUEContrast
         };
-        _$alpha._css = {backgroundColor: 'rgb(' + RGBInnerText + ')'};
+        _$alpha._css = {backgroundColor: '#' + colors.HEX};
         _$alpha_cursor._css = {
             transform: translate3d + '(' + a + 'px, 0, 0)',
             left: !_GPU ? a : '',
             borderColor : alphaContrast + ' transparent'
         };
         _$trigger._css = {
-            backgroundColor : hasNoValue ? '' : text,
+            backgroundColor : hasNoValue ? '' : colorText,
             color: hasNoValue ? '' :
                 colors.rgbaMixBGMixCustom.luminance > 0.22 ? dark : light
         };
-        _$trigger.text = hasNoValue ? '' : triggerValue !== text ? text : '';
+        _$trigger.text = hasNoValue ? '' : triggerValue !== colorText ? colorText : '';
 
         toggled !== undefined ? render(toggled) : _animate(render);
     }