some optimization

development/colorPicker.css

@@ -51,7 +51,7 @@
 	box-sizing: border-box;
 }
 .cp-alpha {
-	clear: left;
+	clear: both;
 	width: 100%;
 	height: 16px;
 	margin: 6px 0;

index.html

@@ -66,15 +66,15 @@ window.myColorPicker = $('input.color').colorPicker({
 <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 type="text/javascript" src="colors.js"></script> -->
+<script type="text/javascript" src="colors.js"></script>
-<!-- <script type="text/javascript" src="jqColorPicker.js"></script> -->
+<script type="text/javascript" src="jqColorPicker.js"></script>
-<script type="text/javascript" src="jqColorPicker.min.js"></script>
+<!-- <script type="text/javascript" src="jqColorPicker.min.js"></script> -->
 <script type="text/javascript">
 	(function(window, undefined){
 		'use strict';
 
 		var plugin = {},
-			pluginSelect = document.getElementById('pluginSelect'),
+			$pluginSelect = $('#pluginSelect'),
 			getQueryVariable = function(variable) {
 				var query = window.location.search.substring(1),
 					vars = query.split('&'),
@@ -88,8 +88,7 @@ window.myColorPicker = $('input.color').colorPicker({
 				}
 				return(false);
 			},
-			type = getQueryVariable('type'),
+			type = getQueryVariable('type');
-			selector = document.getElementById('pluginSelect');
 
 		// plugin for mobile use (bigger and value/color display on top)
 		plugin.mobile = {
@@ -161,17 +160,15 @@ window.myColorPicker = $('input.color').colorPicker({
 					'background:#666; border-top:1px solid #222;}',
 
 			renderCallback: function($elm, toggled) {
-				var $panel = $('.cp-panel'),
+				var colors = this.color.colors,
-					colors = this.color.colors,
 					rgb = colors.RND.rgb,
-					hsv = colors.RND.hsv;
+					hsv = colors.RND.hsv,
+					modes = { r: rgb.r, g: rgb.g, b: rgb.b,
+						h: hsv.h, s: hsv.s, v: hsv.v };
 
-				$('.cp-r', $panel).val(rgb.r);
+				$('input', '.cp-panel').each(function() {
-				$('.cp-g', $panel).val(rgb.g);
+					this.value = modes[this.className.substr(3, 1)];
-				$('.cp-b', $panel).val(rgb.b);
+				});
-				$('.cp-h', $panel).val(hsv.h);
-				$('.cp-s', $panel).val(hsv.s);
-				$('.cp-v', $panel).val(hsv.v);
 			}
 		};
 
@@ -189,11 +186,13 @@ window.myColorPicker = $('input.color').colorPicker({
 					'<div></div><div></div><div></div><div></div>' +
 					'<div></div><div></div><div></div><div class="cp-store">&lt;</div>').
 				on('click', '.cp-memory div', function(e) {
+					var $this = $(this);
+
 					if (this.className) {
-						$(this).parent().prepend($(this).prev()).children().eq(0).
+						$this.parent().prepend($this.prev()).children().eq(0).
 							css('background-color', '#' + colorInstance.colors.HEX);
 					} else {
-						colorInstance.setColor($(this).css('background-color'));
+						colorInstance.setColor($this.css('background-color'));
 						colorPicker.render();
 					}
 				}).find('.cp-memory div').each(function() {
@@ -238,13 +237,13 @@ window.myColorPicker = $('input.color').colorPicker({
 
 
 
-		pluginSelect.value = type || 'desktop';
+		$pluginSelect.val(type || 'desktop').
-		pluginSelect.onchange = function(e) {
+		on('change', function(e) {
 			location = window.location;
 
-			window.location = location.origin + location.pathname +
+			window.location =
-				'?type=' + this.value + '#demo';
+				location.origin + location.pathname + '?type=' + this.value + '#demo';
-		}
+		});
 
 		window.myColorPicker = $('input.color').colorPicker(
 			plugin[type] || plugin.desktop

jqColorPicker.js

@@ -6,7 +6,7 @@
 		_color,
 		_options,
 		_cache = {},
-		_$UI,
+		_$UI, _$xy_slider, _$xy_cursor, _$z_cursor , _$alpha , _$alpha_cursor,
 		_pointermove = 'touchmove mousemove pointermove',
 		_pointerup = 'touchend mouseup pointerup',
 		_GPU = false,
@@ -89,6 +89,11 @@
 			show(0, function() {
 				_GPU = _options.GPU && $(this).css('transform') === '';
 				_options.buidCallback.call(_colorPicker, $(this));
+				_$xy_slider = $('.cp-xy-slider', this);
+				_$xy_cursor = $('.cp-xy-cursor', this);
+				_$z_cursor = $('.cp-z-cursor', this);
+				_$alpha = $('.cp-alpha', this);
+				_$alpha_cursor = $('.cp-alpha-cursor', this);
 			}).hide().
 			on('touchstart mousedown pointerdown',
 				'.cp-xy-slider,.cp-z-slider,.cp-alpha', pointerdown).
@@ -164,23 +169,23 @@
 			a = alpha * _cache.alphaWidth,
 			t3d = _GPU ? 'translate3d' : '';
 
-		$('.cp-xy-slider').css({
+		_$xy_slider.css({
 			backgroundColor: 'rgb(' +
 				hueRGB.r + ',' + hueRGB.g + ',' + hueRGB.b + ')'});
-		$('.cp-xy-cursor').css({
+		_$xy_cursor.css({
 			transform: t3d + '(' + s + 'px, ' + v + 'px, 0)',
 			left: !_GPU ? s : '',
 			top: !_GPU ? v : '',
 			borderColor : colors.RGBLuminance > 0.22 ? dark : light
 		});
-		$('.cp-z-cursor').css({
+		_$z_cursor.css({
 			transform: t3d + '(0, ' + h + 'px, 0)',
 			top: !_GPU ? h : '',
 			borderLeftColor : HUEContrast,
 			borderRightColor : HUEContrast
 		});
-		$('.cp-alpha').css({backgroundColor: 'rgb(' + RGBInnerText + ')'});
+		_$alpha.css({backgroundColor: 'rgb(' + RGBInnerText + ')'});
-		$('.cp-alpha-cursor').css({
+		_$alpha_cursor.css({
 			transform: t3d + '(' + a + 'px, 0, 0)',
 			left: !_GPU ? a : '',
 			borderTopColor : alphaContrast,