Browse Source

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.
pull/67/head 1.0.7
peterd 5 years ago
parent
commit
9d7ea525f7
  1. 12
      README.md
  2. 2
      demo/index.js
  3. 24
      index.js
  4. 21
      jqColorPicker.js
  5. 2
      jqColorPicker.js.map
  6. 4
      jqColorPicker.min.js
  7. 2
      package.json

12
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)

2
demo/index.js

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

24
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);

21
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),

2
jqColorPicker.js.map
File diff suppressed because it is too large
View File

4
jqColorPicker.min.js
File diff suppressed because it is too large
View File

2
package.json

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

Loading…
Cancel
Save