Browse Source

added support for triggering nested elements

(Nested) elements besides input fields can now also be used for
triggering the colorPicker
pull/25/head
peterd 7 years ago
parent
commit
2e20c96ee7
  1. 37
      index.css
  2. 23
      index.html
  3. 26
      jqColorPicker.js
  4. 2
      jqColorPicker.js.map
  5. 4
      jqColorPicker.min.js

37
index.css

@ -26,4 +26,41 @@ pre {
border: 1px solid #aaa;
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;
}

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

26
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'

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

Loading…
Cancel
Save