Some more optimizations

optimization in demos; better translate3d detection (opera), some css
shorthand declarations and a faster, jQuery-free rendering test…

index.html

@@ -65,7 +65,7 @@ window.myColorPicker = $('input.color').colorPicker({
 <h2>API and usage</h2>
 <p>Will follow... See <a href="https://github.com/PitPik/tinyColorPicker">tinyColorPicke on GitHub</a> for now.</p>
 <!-- <script type="text/javascript" src="jquery-1.11.2.js"></script> -->
-<script src="//code.jquery.com/jquery-1.11.2.min.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> -->
@@ -160,11 +160,11 @@ window.myColorPicker = $('input.color').colorPicker({
 					'background:#666; border-top:1px solid #222;}',
 
 			renderCallback: function($elm, toggled) {
-				var colors = this.color.colors,
-					rgb = colors.RND.rgb,
-					hsv = colors.RND.hsv,
-					modes = { r: rgb.r, g: rgb.g, b: rgb.b,
-						h: hsv.h, s: hsv.s, v: hsv.v };
+				var colors = this.color.colors.RND,
+					modes = {
+						r: colors.rgb.r, g: colors.rgb.g, b: colors.rgb.b,
+						h: colors.hsv.h, s: colors.hsv.s, v: colors.hsv.v
+					};
 
 				$('input', '.cp-panel').each(function() {
 					this.value = modes[this.className.substr(3, 1)];
@@ -180,7 +180,10 @@ window.myColorPicker = $('input.color').colorPicker({
 
 			buidCallback: function($elm) {
 				var colorInstance = this.color,
-					colorPicker = this;
+					colorPicker = this,
+					random = function(n) {
+						return Math.round(Math.random() * (n || 255));
+					};
 
 				$elm.append('<div class="cp-memory">' +
 					'<div></div><div></div><div></div><div></div>' +
@@ -196,11 +199,9 @@ window.myColorPicker = $('input.color').colorPicker({
 						colorPicker.render();
 					}
 				}).find('.cp-memory div').each(function() {
-					!this.className && $(this).css({background: 'rgb(' +
-						Math.round(Math.random() * 255) + ', ' +
-						Math.round(Math.random() * 255) + ', ' +
-						Math.round(Math.random() * 255) +
-					')'});
+					!this.className && $(this).css({background:
+						'rgb(' + random() + ', ' + random() + ', ' + random() + ')'
+					});
 				});
 			},
 

jqColorPicker.js

@@ -87,7 +87,7 @@
 			find('.cp-alpha').toggle(!!_options.opacity).
 			parent(). // back to $(_html)
 			show(0, function() {
-				_GPU = _options.GPU && $(this).css('transform') === '';
+				_GPU = _options.GPU && $(this).css('perspective') === '';
 				_options.buidCallback.call(_colorPicker, $(this));
 				_$xy_slider = $('.cp-xy-slider', this);
 				_$xy_cursor = $('.cp-xy-cursor', this);
@@ -174,29 +174,52 @@
 				hueRGB.r + ',' + hueRGB.g + ',' + hueRGB.b + ')'});
 		_$xy_cursor.css({
 			transform: t3d + '(' + s + 'px, ' + v + 'px, 0)',
-			left: !_GPU ? s : '',
-			top: !_GPU ? v : '',
+			left: !_GPU ? s : 0,
+			top: !_GPU ? v : 0,
 			borderColor : colors.RGBLuminance > 0.22 ? dark : light
 		});
 		_$z_cursor.css({
 			transform: t3d + '(0, ' + h + 'px, 0)',
-			top: !_GPU ? h : '',
-			borderLeftColor : HUEContrast,
-			borderRightColor : HUEContrast
+			top: !_GPU ? h : 0,
+			borderColor : 'transparent ' + HUEContrast,
 		});
 		_$alpha.css({backgroundColor: 'rgb(' + RGBInnerText + ')'});
 		_$alpha_cursor.css({
 			transform: t3d + '(' + a + 'px, 0, 0)',
-			left: !_GPU ? a : '',
-			borderTopColor : alphaContrast,
-			borderBottomColor : alphaContrast
+			left: !_GPU ? a : 0,
+			borderColor : alphaContrast + ' transparent'
 		});
 		_options.doRender && _cache.$element.css({
 			backgroundColor : RGBAText,
 			color: colors.rgbaMixBGMixCustom.luminance > 0.22 ? dark : light
 		});
+
 		_cache.$element.val(text);
 
+		// faster version (more than 2.5x)... though, no jQuery (colors, ...)
+		//
+		// _$xy_slider[0].style.cssText =
+		// 	'background-color:' + 'rgb(' +
+		// 		hueRGB.r + ',' + hueRGB.g + ',' + hueRGB.b + ');';
+		// _$xy_cursor[0].style.cssText =
+		// 	'transform:' + t3d + '(' + s + 'px, ' + v + 'px, 0);' +
+		// 	'left:' + (!_GPU ? s : 0) + 'px;' +
+		// 	'top:' + (!_GPU ? v : 0) + 'px;' +
+		// 	'border-color:' + (colors.RGBLuminance > 0.22 ? dark : light);
+		// _$z_cursor[0].style.cssText =
+		// 	'transform:' + t3d + '(0, ' + h + 'px, 0);' +
+		// 	'top:' + (!_GPU ? h : 0) + 'px;' +
+		// 	'border-color:' + 'transparent ' + HUEContrast;
+		// _$alpha[0].style.cssText = 'background-color:' + 'rgb(' + RGBInnerText + ')';
+		// _$alpha_cursor[0].style.cssText =
+		// 	'transform:' + t3d + '(' + a + 'px, 0, 0);' +
+		// 	'left:' + (!_GPU ? a : 0) + 'px;' +
+		// 	'border-color:' + alphaContrast + ' transparent';
+		// _options.doRender && (_cache.$element[0].style.cssText =
+		// 	'background-color:' + RGBAText +
+		// 	';color:' + (colors.rgbaMixBGMixCustom.luminance > 0.22 ? dark : light));
+		// 	_cache.$element[0].value = text;
+
 		_options.renderCallback.call(
 			_colorPicker, _cache.$element, toggled === true);
 	}