Support for multiple instances

 - Multiple instances based on jQuery instances
 - Backwards compatible (no changes in API)
 - Options now have to be set on every instantiation.
 - Option opacity is now toggled automatically.

Author: PitPik

README.md

@@ -34,7 +34,7 @@ tinyColorPicker can be received by bower:
 bower install tinyColorPicker
 ```
 
-##jqColorPicker.js
+## jqColorPicker.js
 
 colorPicker uses an instance of Colors and passes the options to it, so some values are the same...
 
@@ -59,7 +59,7 @@ $('.color').colorPicker({
     forceAlpha: // force printing alpha channel (undefined = auto; false = never print alpha)
 });
 ```
-####Some tips
+#### Some tips
 
 The renderCallback can be used as openCallback and closeCallback:
 
@@ -69,6 +69,8 @@ renderCallback: function($elm, toggled) {
         // ... like an open callback
     } else if (toggled === false) {
         // ... like a close callback
+    } else {
+        // rendering...
     }
 }
 ```
@@ -77,7 +79,7 @@ Here you can fire events if necessary or check for a className or data attribute
 this.$UI.find('.cp-alpha').toggle(!$elm.hasClass('no-alpha'));
 ```
 
-##colors.js
+## colors.js
 
 This section only shows the options for color.js. They are picked up automatically if set in $('.color').colorPicker
 
@@ -92,7 +94,7 @@ Colors({ // all options have a default value...
 });
 ```
 
-##The color model, the methods and more
+## The color model, the methods and more
 
 After initializing Color or ColorPicker you'll get a clean but rhich model of the instance:
 
@@ -129,7 +131,7 @@ myColorPicker: {
 ```
 
 
-The color model
+## The color model
 
 ```javascript
 HEX: // current color as HEX (upper case, 6 digits)

demo/index.js

@@ -93,5 +93,5 @@ $(function(){
 
 	window.myColorPicker =
 	$('.color').colorPicker(options);
-	$('.trigger').colorPicker();
+	$('.trigger').colorPicker(options);
 });

index.js

@@ -408,17 +408,17 @@
 			var that = this;
 
 			$elm.append('<div class="cp-patch"><div></div></div><div class="cp-disp"></div>');
-			$('.trigger').parent().on('click', '.trigger', function(e) {
-				if (e.target === this && $(this).hasClass('active')) {
-					e.cancelBubble = true;
-					e.stopPropagation && e.stopPropagation();
-					that.toggle();
-				}
-			});
+			// $('.trigger').parent().on('click', '.trigger', function(e) {
+			// 	if (e.target === this && $(this).hasClass('active')) {
+			// 		e.cancelBubble = true;
+			// 		e.stopPropagation && e.stopPropagation();
+			// 		that.toggle();
+			// 	}
+			// });
 			// if input type="color"
-			$('.color').on('click', function(e){
-				e.preventDefault && e.preventDefault();
-			});
+			// $('.color').on('click', function(e){
+			// 	e.preventDefault && e.preventDefault();
+			// });
 		},
 
 		cssAddon: // could also be in a css file instead
@@ -567,6 +567,6 @@
 	window.myColorPicker = $('.color').colorPicker(
 		plugin[type] || plugin.desktop
 	);
-	$('.trigger').colorPicker();
-	$('pre').colorPicker({doRender: false});
+	$('.trigger').colorPicker(plugin[type] || plugin.desktop);
+	$('pre').colorPicker(plugin[type] || plugin.desktop);
 })(window, jQuery);

jqColorPicker.js

@@ -17,7 +17,7 @@
         _color,
         _options,
 
-        _$trigger, _$UI, 
+        _$trigger, _$UI,
         _$z_slider, _$xy_slider,
         _$xy_cursor, _$z_cursor , _$alpha , _$alpha_cursor,
 
@@ -105,7 +105,7 @@
                 if (event === true) { // resize, scroll
                     return;
                 }
-                _$alpha._width = _$alpha.width();
+                _$alpha.toggle(!!_options.opacity)._width = _$alpha.width();
                 _$xy_slider._width = _$xy_slider.width();
                 _$xy_slider._height = _$xy_slider.height();
                 _$z_slider._height = _$z_slider.height();
@@ -138,7 +138,7 @@
                 _$xy_slider = $('.cp-xy-slider', this);
                 _$xy_cursor = $('.cp-xy-cursor', this);
                 _$z_cursor = $('.cp-z-cursor', this);
-                _$alpha = $('.cp-alpha', this).toggle(!!_options.opacity);
+                _$alpha = $('.cp-alpha', this);
                 _$alpha_cursor = $('.cp-alpha-cursor', this);
                 _options.buildCallback.call(_colorPicker, $this);
                 $this.prepend('<div>').children().eq(0).css('width',
@@ -268,7 +268,8 @@
     }
 
     $.fn.colorPicker = function(options) {
-        var noop = function(){};
+        var _this = this,
+            noop = function(){};
 
         options = $.extend({
             animationSpeed: 150,
@@ -295,18 +296,22 @@
             }
         });
         _instance = _instance.add(this);
-        this.colorPicker = _instance.colorPicker =
-            _colorPicker || new ColorPicker(options);
+        this.colorPicker = _colorPicker || new ColorPicker(options);
+        this.options = options;
 
         $(options.body).off('.tcp').on(_pointerdown, function(e) {
             !_instance.add(_$UI).find(e.target)
                 .add(_instance.filter(e.target))[0] && toggle();
         });
 
-        return this.on('focusin.tcp click.tcp', toggle)
+        return this.on('focusin.tcp click.tcp', function(event) {
+            _colorPicker.color.options = // swap options to fake new instance
+                $.extend(_colorPicker.color.options, _options = _this.options);
+            toggle.call(this, event);
+        })
         .on('change.tcp', function() {
             _color.setColor(this.value || '#FFF');
-            _instance.colorPicker.render(true);
+            _this.colorPicker.render(true);
         })
         .each(function() {
             var value = extractValue(this),

jqColorPicker.js.map

@@ -1,6 +1,6 @@
 {
   "name": "tinyColorPicker",
-  "version": "1.0.4",
+  "version": "1.0.7",
   "repository": {
     "type": "git",
     "url": "http://github.com/PitPik/tinyColorPicker.git"