added support for triggering nested elements

(Nested) elements besides input fields can now also be used for
triggering the colorPicker

index.css

@@ -27,3 +27,40 @@ pre {
 	border-radius: 3px;
 	width: 140px;
 }
+.div-toggles {
+	margin-top: 1em;
+}
+.div-toggles .color {
+	position: relative;
+	display: inline-block;
+	width: 40px;
+	padding: 5px;
+	height: 25px;
+	border: 1px solid #666;
+	border-radius: 2px;
+	background: #eee;
+}
+.div-toggles .color:after {
+	content: "";
+	display: block;
+	position: absolute;
+	top: 50%;
+	right: 5px;
+	margin-top: -2px;
+	border: 5px solid;
+	border-color: #000 transparent transparent;
+}
+.div-toggles .active:after {
+	margin-top: -8px;
+	border-color: transparent transparent #000;
+}
+.div-toggles .color div {
+	display: inline-block;
+	width: 23px;
+	height: 23px;
+	background: #fff url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMAQMAAABsu86kAAAABlBMVEXMzMwAAADTMzNkAAAAAnRSTlP/AOW3MEoAAAARSURBVAjXY2D+wICG/jCgIQDPPwub2NOsgwAAAABJRU5ErkJggg==');
+}
+.div-toggles .color div div {
+	border: 1px solid #666;
+	background: #aaa;
+}

index.html

@@ -14,7 +14,7 @@
 This <strong>4.4KB</strong> small HSB color picker is based on a subset of <a href="https://github.com/PitPik/colorPicker/blob/master/colors.js">colors.js</a> from it's big brother <a href="http://dematte.at/colorPicker/">colorPicker</a>, supports all modern features like touch and MS pointer, GPU accelerated rendering, battery friendly requestAnimationFrame and provides a lot of hooks for developers to write plugins (See demo plugins below in <a href="#demo">Demo</a>).</p>
 <a name="demo" id="demo"></a>
 <h2>Demo</h2>
-On all inputs with className 'color': <pre>$('input.color').colorPicker();</pre>
+On all elements with className 'color': <pre>$('.color').colorPicker();</pre>
 <p>Switch between plugins:
 	<select id="pluginSelect">
 		<option value="desktop">Desktop (no plugin)</option>
@@ -28,11 +28,16 @@ On all inputs with className 'color': <pre>$('input.color').colorPicker();</pre>
 	</select>
 	(see index.html for more details...)
 </p>
-<p>
+<div class="input-toggles">
 	<input class="color" value="#B6BD79" />
 	<input class="color" value="rgb(162, 63, 3)" />
 	<input class="color" value="hsl(32, 95%, 23%)" />
-</p>
+</div>
+<div class="div-toggles">
+	<div class="color" value="#44A647"><div><div></div></div></div>
+	<div class="color" value="rgb(100, 86, 70)"><div><div></div></div></div>
+	<div class="color" value="hsl(167, 29%, 68%)"><div><div></div></div></div>
+</div>
 <h2>Features</h2>
 <p>Tiny jQuery colorPicker only loads if triggered to show. It uses battery saving technologies and super fast rendering for best performance on desktop and mobile browsers.<br>
 This colorPicker is very flexible to modify and customize and there is an easy way to write plugins to extend functionality, look and feel...<br>
@@ -96,6 +101,7 @@ window.myColorPicker = $('input.color').colorPicker({
 		plugin.mobile = {
 			customBG: '#222',
 			margin: '4px -2px',
+			doRender: 'div div',
 
 			// demo on how to make plugins... mobile support plugin
 			buidCallback: function($elm) {
@@ -126,6 +132,7 @@ window.myColorPicker = $('input.color').colorPicker({
 		plugin.input = {
 			customBG: '#222',
 			margin: '4px -2px',
+			doRender: 'div div',
 
 			buidCallback: function($elm) {
 				var colorInstance = this.color,
@@ -184,6 +191,7 @@ window.myColorPicker = $('input.color').colorPicker({
 		plugin.memory = {
 			customBG: '#222',
 			margin: '4px -2px',
+			doRender: 'div div',
 			opacity: false,
 
 			buidCallback: function($elm) {
@@ -224,13 +232,15 @@ window.myColorPicker = $('input.color').colorPicker({
 		// the default; no extra stuff
 		plugin.desktop = {
 			customBG: '#222',
-			margin: '4px -2px'
+			margin: '4px -2px',
+			doRender: 'div div'
 		};
 
 		// the default without alpha chanel though
 		plugin.noalpha = {
 			customBG: '#222',
 			margin: '4px -2px',
+			doRender: 'div div',
 			opacity: false
 		};
 
@@ -238,6 +248,7 @@ window.myColorPicker = $('input.color').colorPicker({
 		plugin.small = {
 			customBG: '#222',
 			margin: '4px -2px',
+			doRender: 'div div',
 			cssAddon: // could also be in a css file instead
 				'.cp-color-picker{padding:5px 5px 0;}' +
 				'.cp-xy-slider{width:100px; height:100px; margin-bottom:3px;}' +
@@ -250,6 +261,7 @@ window.myColorPicker = $('input.color').colorPicker({
 		plugin.skinned = {
 			customBG: '#222',
 			margin: '5px -2px',
+			doRender: 'div div',
 			cssAddon: // could also be in a css file instead
 				'.cp-color-picker{border:1px solid #999; padding:10px;' +
 					'background:#eee; overflow:visible; border-radius:3px;}' +
@@ -276,6 +288,7 @@ window.myColorPicker = $('input.color').colorPicker({
 		plugin.dev_skinned = {
 			customBG: '#222',
 			margin: '5px -2px',
+			doRender: 'div div',
 
 			buidCallback: function($elm) {
 				$elm.append('<div class="cp-patch"><div></div></div><div class="cp-disp"></div>');
@@ -331,7 +344,7 @@ window.myColorPicker = $('input.color').colorPicker({
 			window.location = './?type=' + this.value + '#demo'
 		});
 
-		window.myColorPicker = $('input.color').colorPicker(
+		window.myColorPicker = $('.color').colorPicker(
 			plugin[type] || plugin.desktop
 		);
 	})(window);

jqColorPicker.js

@@ -46,7 +46,8 @@
 	ColorPicker.prototype.toggle = toggle;
 
 	function extractValue(elm) {
-		return elm.value || $(elm).css('background-color') || '#fff';
+		return elm.value || elm.getAttribute('value') ||
+			$(elm).css('background-color') || '#fff';
 	}
 
 	function resolveEventType(event) {
@@ -54,13 +55,17 @@
 			event.originalEvent.touches[0] : event;
 	}
 
+	function findElement($elm) {
+		return $($elm.find(_options.doRender)[0] || $elm[0]);
+	}
+
 	function toggle(event) {
 		var $this = $(this),
 			position;
 
 		if (event) {
 			position = $this.offset();
-			_cache.$element = $this;
+			_cache.$element = findElement($this);
 			_options.preventFocus && event.preventDefault();
 
 			(_$UI || build()).css({
@@ -69,12 +74,13 @@
 			}).show(_options.animationSpeed, function() {
 				_cache.alphaWidth = $('.cp-alpha', _$UI).width();
 				_cache.sliderWidth = $('.cp-xy-slider', _$UI).width();
-				_color.setColor(extractValue($this[0]));
-				_animate(function(){render(true)});
+				_color.setColor(extractValue(_cache.$element[0]));
+				render(true);
 			});
 		} else {
 			$(_$UI).hide(_options.animationSpeed, function() {
 				_cache.$element.blur();
+				render(false);
 			});
 		}
 	};
@@ -248,12 +254,15 @@
 			_colorPicker = new ColorPicker(options);
 
 			$document.on('touchstart mousedown pointerdown', function(e) {
-				if ($.inArray(e.target, $that) === -1 &&
-				!$(e.target).closest(_$UI).length) {
+				var $target = $(e.target);
+
+				if ($.inArray($target.closest($that.selector)[0],
+					$that) === -1 &&
+				!$target.closest(_$UI).length) {
 					toggle();
 				}
 			}).
-			on('focus', this.selector, toggle).
+			on('focus click', this.selector, toggle).
 			on('change', this.selector, function() {
 				_color.setColor(this.value);
 				$that.colorPicker.render();
@@ -267,7 +276,8 @@
 				mode = value.split('(');
 			// save initial color mode and set color and bgColor
 			$(this).data('colorMode', mode[1] ? mode[0].substr(0, 3) : 'HEX');
-			options.doRender && $(this).css({'background-color': value,
+			options.doRender && findElement($(this)).
+			css({'background-color': value,
 				'color': function() {
 					return _color.setColor(value).
 						rgbaMixBGMixCustom.luminance > 0.22 ? '#222' : '#ddd'