Browse Source

Minor updates

 - minor optimizations
 - added options ‘dark’ and ‘light’
tags/1.1.0
peterd 3 years ago
parent
commit
cd0e084ceb
7 changed files with 31 additions and 30 deletions
  1. 2
    0
      README.md
  2. 3
    3
      index.html
  3. 2
    2
      index.js
  4. 20
    21
      jqColorPicker.js
  5. 1
    1
      jqColorPicker.js.map
  6. 2
    2
      jqColorPicker.min.js
  7. 1
    1
      package.json

+ 2
- 0
README.md View File

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

+ 3
- 3
index.html View File

@@ -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('&lt;div class="cp-disp">&lt;/div>');
this.$colorPatch = $elm.prepend('&lt;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>

+ 2
- 2
index.js View File

@@ -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();

+ 20
- 21
jqColorPicker.js View File

@@ -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
}
});
});

+ 1
- 1
jqColorPicker.js.map
File diff suppressed because it is too large
View File


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


+ 1
- 1
package.json View File

@@ -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…
Cancel
Save