mirror of
https://github.com/PitPik/tinyColorPicker
synced 2025-06-27 05:01:03 -06:00
Minor updates
- minor optimizations - added options ‘dark’ and ‘light’
This commit is contained in:
peterd
parent
9d7ea525f7
commit
cd0e084ceb
@ -54,6 +54,8 @@ $('.color').colorPicker({
|
||||
margin: '', // positioning margin (can also be set in cssAddon)
|
||||
scrollResize: true // toggle for reposition colorPicker on window.resize/scroll
|
||||
gap: 4 // gap to right and bottom edge of view port if repositioned to fit
|
||||
dark: '#222' // default font color if background is light
|
||||
light: '#DDD' // default font color if background is dark
|
||||
preventFocus: false // prevents default on focus of input fields (e.g. no keyboard on mobile)
|
||||
body: document.body // the element where the events are attached to (touchstart, mousedown, pointerdown, focus, click, change),
|
||||
forceAlpha: // force printing alpha channel (undefined = auto; false = never print alpha)
|
||||
|
||||
@ -73,7 +73,7 @@ As Tiny jQuery colorPicker uses <a href="https://github.com/PitPik/colorPicker/b
|
||||
<pre style="display: block; overflow: auto;">
|
||||
window.myColorPicker = $('input.color').colorPicker({
|
||||
buildCallback: function($elm) {
|
||||
$elm.prepend('<div class="cp-disp"></div>');
|
||||
this.$colorPatch = $elm.prepend('<div class="cp-disp">').find('.cp-disp');
|
||||
},
|
||||
cssAddon:
|
||||
'.cp-disp {padding:10px; margin-bottom:6px; font-size:19px; height:20px; line-height:20px}' +
|
||||
@ -87,10 +87,10 @@ window.myColorPicker = $('input.color').colorPicker({
|
||||
renderCallback: function($elm, toggled) {
|
||||
var colors = this.color.colors;
|
||||
|
||||
$('.cp-disp').css({
|
||||
this.$colorPatch.css({
|
||||
backgroundColor: '#' + colors.HEX,
|
||||
color: colors.RGBLuminance > 0.22 ? '#222' : '#ddd'
|
||||
}).text(this.color.toString($elm._colorMode));
|
||||
}).text(this.color.toString($elm._colorMode)); // $elm.val();
|
||||
}
|
||||
});
|
||||
</pre>
|
||||
|
||||
4
index.js
4
index.js
@ -28,7 +28,7 @@
|
||||
|
||||
// demo on how to make plugins... mobile support plugin
|
||||
buildCallback: function($elm) {
|
||||
$elm.prepend('<div class="cp-disp"></div>');
|
||||
this.$colorPatch = $elm.prepend('<div class="cp-disp">').find('.cp-disp');
|
||||
$('.color').on('click', function(e) {
|
||||
e.preventDefault && e.preventDefault();
|
||||
});
|
||||
@ -45,7 +45,7 @@
|
||||
renderCallback: function($elm, toggled) {
|
||||
var colors = this.color.colors;
|
||||
|
||||
$('.cp-disp').css({
|
||||
this.$colorPatch.css({
|
||||
backgroundColor: '#' + colors.HEX,
|
||||
color: colors.RGBLuminance > 0.22 ? '#222' : '#ddd'
|
||||
}).text(this.color.toString($elm._colorMode)); // $elm.val();
|
||||
|
||||
@ -25,7 +25,6 @@
|
||||
_pointerdown = 'touchstart.tcp mousedown.tcp pointerdown.tcp',
|
||||
_pointerup = 'touchend.tcp mouseup.tcp pointerup.tcp',
|
||||
_GPU = false,
|
||||
_round = Math.round,
|
||||
_animate = window.requestAnimationFrame ||
|
||||
window.webkitRequestAnimationFrame || function(cb){cb()},
|
||||
_html = '<div class="cp-color-picker"><div class="cp-z-slider"><div c' +
|
||||
@ -92,15 +91,14 @@
|
||||
_colorPicker.$trigger = $this;
|
||||
|
||||
(_$UI || build()).css({
|
||||
// 'width': _$UI[0]._width,
|
||||
'left': (_$UI[0]._left = position.left) -
|
||||
((_$UI[0]._left += _$UI[0]._width -
|
||||
'left': (_$UI._left = position.left) -
|
||||
((_$UI._left += _$UI._width -
|
||||
($window.scrollLeft() + $window.width())) + gap > 0 ?
|
||||
_$UI[0]._left + gap : 0),
|
||||
'top': (_$UI[0]._top = position.top + $this.outerHeight()) -
|
||||
((_$UI[0]._top += _$UI[0]._height -
|
||||
_$UI._left + gap : 0),
|
||||
'top': (_$UI._top = position.top + $this.outerHeight()) -
|
||||
((_$UI._top += _$UI._height -
|
||||
($window.scrollTop() + $window.height())) + gap > 0 ?
|
||||
_$UI[0]._top + gap : 0)
|
||||
_$UI._top + gap : 0)
|
||||
}).show(_options.animationSpeed, function() {
|
||||
if (event === true) { // resize, scroll
|
||||
return;
|
||||
@ -127,25 +125,23 @@
|
||||
$('head').append('<style type="text/css" id="tinyColorPickerStyles">' +
|
||||
(_options.css || _css) + (_options.cssAddon || '') + '</style>');
|
||||
|
||||
return _colorPicker.$UI = _$UI =
|
||||
$(_html).css({'margin': _options.margin})
|
||||
return $(_html).css({'margin': _options.margin})
|
||||
.appendTo('body')
|
||||
.show(0, function() {
|
||||
var $this = $(this);
|
||||
_colorPicker.$UI = _$UI = $(this);
|
||||
|
||||
_GPU = _options.GPU && $this.css('perspective') !== undefined;
|
||||
_GPU = _options.GPU && _$UI.css('perspective') !== undefined;
|
||||
_$z_slider = $('.cp-z-slider', this);
|
||||
_$xy_slider = $('.cp-xy-slider', this);
|
||||
_$xy_cursor = $('.cp-xy-cursor', this);
|
||||
_$z_cursor = $('.cp-z-cursor', this);
|
||||
_$alpha = $('.cp-alpha', this);
|
||||
_$alpha_cursor = $('.cp-alpha-cursor', this);
|
||||
_options.buildCallback.call(_colorPicker, $this);
|
||||
$this.prepend('<div>').children().eq(0).css('width',
|
||||
$this.children().eq(0).width() // stabilizer
|
||||
);
|
||||
this._width = this.offsetWidth;
|
||||
this._height = this.offsetHeight;
|
||||
_options.buildCallback.call(_colorPicker, _$UI);
|
||||
_$UI.prepend('<div>').children().eq(0).css('width',
|
||||
_$UI.children().eq(0).width()); // stabilizer
|
||||
_$UI._width = this.offsetWidth;
|
||||
_$UI._height = this.offsetHeight;
|
||||
}).hide();
|
||||
}
|
||||
|
||||
@ -201,8 +197,8 @@
|
||||
hueRGB = colors.hueRGB,
|
||||
RGB = colors.RND.rgb,
|
||||
HSL = colors.RND.hsl,
|
||||
dark = '#222',
|
||||
light = '#ddd',
|
||||
dark = _options.dark,
|
||||
light = _options.light,
|
||||
colorText = _color.toString(_$trigger._colorMode, _options.forceAlpha),
|
||||
HUEContrast = colors.HUELuminance > 0.22 ? dark : light,
|
||||
alphaContrast = colors.rgbaMixBlack.luminance > 0.22 ? dark : light,
|
||||
@ -282,6 +278,8 @@
|
||||
body: document.body,
|
||||
scrollResize: true,
|
||||
gap: 4,
|
||||
dark: '#222',
|
||||
light: '#DDD'
|
||||
// forceAlpha: undefined,
|
||||
// css: '',
|
||||
// cssAddon: '',
|
||||
@ -324,7 +322,8 @@
|
||||
$elm.css({'background-color': value,
|
||||
'color': function() {
|
||||
return _color.setColor(value)
|
||||
.rgbaMixBGMixCustom.luminance > 0.22 ? '#222' : '#DDD'
|
||||
.rgbaMixBGMixCustom.luminance > 0.22 ?
|
||||
options.dark : options.light
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
File diff suppressed because one or more lines are too long
4
jqColorPicker.min.js
vendored
4
jqColorPicker.min.js
vendored
File diff suppressed because one or more lines are too long
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "tinyColorPicker",
|
||||
"version": "1.0.7",
|
||||
"version": "1.0.8",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "http://github.com/PitPik/tinyColorPicker.git"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user