Browse Source

Multiple instance support

pull/25/head
peterd 7 years ago
parent
commit
1d6db268ad
  1. 10
      index.css
  2. 13
      index.html
  3. 47
      jqColorPicker.js
  4. 2
      jqColorPicker.js.map
  5. 2
      jqColorPicker.min.js

10
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;

13
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="color 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="#556B2F"><div><div></div></div></div>
<div class="trigger" value="rgb(100, 86, 70)"><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');
$elm.closest('.color').addClass('active');
$('.trigger').removeClass('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>

47
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,
noop = function(){};
var 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],
$that) === -1 &&
!$target.closest(_$UI).length) {
toggle();
}
}).
on('focus click', this.selector, toggle).
on('change', this.selector, function() {
_color.setColor(this.value);
$that.colorPicker.render();
});
}
_selector += (_selector ? ', ' : '') + this.selector;
$(options.body).off('.a').
on('touchstart.a mousedown.a pointerdown.a', function(e) {
var $target = $(e.target);
if ($.inArray($target.closest(_selector)[0],
_instance) === -1 &&
!$target.closest(_$UI).length) {
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),

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

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

Loading…
Cancel
Save