Multiple instance support

index.css

@@ -49,7 +49,7 @@ pre {
 .div-toggles {
 	margin-top: 1em;
 }
-.div-toggles .color {
+.div-toggles .trigger {
 	position: relative;
 	display: inline-block;
 	width: 40px;
@@ -60,7 +60,7 @@ pre {
 	background: #eee;
 	box-shadow: inset 0 -17px 8px rgba(0,0,0,0.3), inset 0 -4px 7px rgba(0,0,0,0.3);
 }
-.div-toggles .color:after {
+.div-toggles .trigger:after {
 	content: "";
 	display: block;
 	position: absolute;
@@ -70,7 +70,7 @@ pre {
 	border: 5px solid;
 	border-color: #000 transparent transparent;
 }
-.div-toggles .color:before {
+.div-toggles .trigger:before {
 	content: "";
 	display: block;
 	position: absolute;
@@ -88,13 +88,13 @@ pre {
 	margin-top: -8px;
 	border-color: transparent transparent #000;
 }
-.div-toggles .color div {
+.div-toggles .trigger div {
 	display: inline-block;
 	width: 23px;
 	height: 23px;
 	background: #fff url('data:image/gif;base64,R0lGODlhDAAMAIABAMzMzP///yH5BAEAAAEALAAAAAAMAAwAAAIWhB+ph5ps3IMyQFBvzVRq3zmfGC5QAQA7');
 }
-.div-toggles .color div div {
+.div-toggles .trigger div div {
 	border: 1px solid #666;
 	border-color: #666 #ccc #ccc #666;
 	background: #aaa;

index.html

@@ -40,9 +40,9 @@ On all elements with className 'color': <pre>$('.color').colorPicker();</pre>
 	<input class="color" value="hsl(32, 95%, 23%)" />
 </div>
 <div class="div-toggles">
-	<div class="color trigger" value="#556B2F"><div><div></div></div></div>
+	<div class="trigger" value="#556B2F"><div><div></div></div></div>
-	<div class="color trigger" value="rgb(100, 86, 70)"><div><div></div></div></div>
+	<div class="trigger" value="rgb(100, 86, 70)"><div><div></div></div></div>
-	<div class="color trigger" value="hsla(167, 29%, 68%, 0.8)"><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>
 <h2>Usage</h2>
 <p>There is only one file you need to load... No images and no CSS required.</p>
@@ -542,10 +542,10 @@ window.myColorPicker = $('input.color').colorPicker({
 				if (toggled === true) {
 					// here you can recalculate position after showing the color picker
 					// in case it doesn't fit into view.
-					$('.color').removeClass('active');
+					$('.trigger').removeClass('active');
-					$elm.closest('.color').addClass('active');
+					$elm.closest('.trigger').addClass('active');
 				} else if (toggled === false) {
-					$elm.closest('.color').removeClass('active');
+					$elm.closest('.trigger').removeClass('active');
 				}
 			}
 		};
@@ -566,6 +566,7 @@ window.myColorPicker = $('input.color').colorPicker({
 		window.myColorPicker = $('.color').colorPicker(
 			plugin[type] || plugin.desktop
 		);
+		$('.trigger').colorPicker();
 	})(window);
 </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>

jqColorPicker.js

@@ -2,10 +2,12 @@
 	'use strict';
 
 	var $document = $(document),
+		_instance,
 		_colorPicker,
 		_color,
 		_options,
 		_cache = {},
+		_selector = '',
 		_$UI, _$xy_slider, _$xy_cursor, _$z_cursor , _$alpha , _$alpha_cursor,
 		_pointermove = 'touchmove mousemove pointermove',
 		_pointerup = 'touchend mouseup pointerup',
@@ -207,7 +209,7 @@
 			color: colors.rgbaMixBGMixCustom.luminance > 0.22 ? dark : light
 		});
 
-		toggled !== true && $element.val(text); // avoids carret jump
+		$element.val() !== text && $element.val(text); // avoids carret jump
 
 		// faster version (more than 2.5x)... though, no jQuery (colors, ...)
 
@@ -244,8 +246,9 @@
 
 	// export as plugin to jQuery
 	$.fn.colorPicker = function(options) {
-		var $that = this,
+		var noop = function(){};
-			noop = function(){};
+
+		_instance = _instance ? _instance.add(this) : this;
 
  		options = $.extend({
 			animationSpeed: 150,
@@ -261,27 +264,27 @@
 			// margin: '',
 			// preventFocus: false
 		}, options);
- 
-		if (!_colorPicker) { // we only want one single instance...
-			_colorPicker = new ColorPicker(options);
-
-			$(options.body).on('touchstart mousedown pointerdown', function(e) {
-				var $target = $(e.target);
 
-				if ($.inArray($target.closest($that.selector)[0],
+		_selector += (_selector ? ', ' : '') + this.selector;
-					$that) === -1 &&
+
-				!$target.closest(_$UI).length) {
+ 		$(options.body).off('.a').
-					toggle();
+ 		on('touchstart.a mousedown.a pointerdown.a', function(e) {
-				}
+			var $target = $(e.target);
-			}).
+
-			on('focus click', this.selector, toggle).
+			if ($.inArray($target.closest(_selector)[0],
-			on('change', this.selector, function() {
+				_instance) === -1 &&
-				_color.setColor(this.value);
+			!$target.closest(_$UI).length) {
-				$that.colorPicker.render();
+				toggle();
-			});
+			}
-		}
+		}).
+		on('focus.a click.a', _selector, toggle).
+		on('change.a', _selector, function() {
+			_color.setColor(this.value);
+			_instance.colorPicker.render();
+		});
 
-		this.colorPicker = _colorPicker;
+		this.colorPicker = _colorPicker ||
+			(_colorPicker = new ColorPicker(options));
 
 		return this.each(function() {
 			var value = extractValue(this),