Netsyms/tinyColorPicker
2
0
Fork 0
mirror of https://github.com/PitPik/tinyColorPicker synced 2025-07-19 07:54:28 -06:00
Code Issues Releases Wiki Activity

extra z_slider height

Browse Source
This commit is contained in:
peterd 2016-04-18 21:03:49 +02:00
parent b9f0c9ae01
commit 21cdb7118f
6 changed files with 34 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
colors.js
View File

@ -267,7 +267,8 @@
'#' + colors.HEX; '#' + colors.HEX;
return isHex ? innerText : (shouldBeHex ? 'rgb' : colorMode) + return isHex ? innerText : (shouldBeHex ? 'rgb' : colorMode) +
(hasAlpha ? 'a' : '') + '(' + innerText + (hasAlpha ? ', ' + alpha : '') + ')'; (hasAlpha ? 'a' : '') + '(' + innerText +
(hasAlpha ? ', ' + alpha : '') + ')';
}, },
RGB2HEX: function(RGB) { RGB2HEX: function(RGB) {

2
demo/index.html
View File

@ -10,7 +10,7 @@
<link rel="stylesheet" type="text/css" href="../index.css"> <link rel="stylesheet" type="text/css" href="../index.css">
<link id="colorPickerMod" rel="stylesheet" type="text/css" href="mod.css"> <link id="colorPickerMod" rel="stylesheet" type="text/css" href="mod.css">
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script> <script src="http://code.jquery.com/jquery-2.2.3.min.js"></script>
<!-- <script type="text/javascript" src="../jqColorPicker.min.js"></script> --> <!-- <script type="text/javascript" src="../jqColorPicker.min.js"></script> -->
<script type="text/javascript" src="../colors.js"></script> <script type="text/javascript" src="../colors.js"></script>
<script type="text/javascript" src="../jqColorPicker.js"></script> <script type="text/javascript" src="../jqColorPicker.js"></script>

3
demo/index.js
View File

@ -80,7 +80,8 @@ $(function(){
this.$sliders.toggle(!$elm.hasClass('no-sliders')); this.$sliders.toggle(!$elm.hasClass('no-sliders'));
} }
this.patchStyle.backgroundColor = $elm[0].style.backgroundColor; // set patch color... // this.patchStyle.backgroundColor = $elm[0].style.backgroundColor; // set patch color...
this.patchStyle.backgroundColor = this.color.toString(); // no DOM access
this.$display.text(this.color.options.colorNames[colors.HEX] || $elm.val()); // ...and text aside this.$display.text(this.color.options.colorNames[colors.HEX] || $elm.val()); // ...and text aside
this.currentWidth = this.currentWidth || this.$UI.find('.cp-rgb-r')[0].clientWidth; // first time this.currentWidth = this.currentWidth || this.$UI.find('.cp-rgb-r')[0].clientWidth; // first time

48
jqColorPicker.js
View File

@ -17,12 +17,13 @@
_color, _color,
_options, _options,
_$trigger, _$trigger, _$UI,
_$UI, _$xy_slider, _$xy_cursor, _$z_cursor , _$alpha , _$alpha_cursor, _$z_slider, _$xy_slider,
_$xy_cursor, _$z_cursor , _$alpha , _$alpha_cursor,
_pointermove = 'touchmove.a mousemove.a pointermove.a', _pointermove = 'touchmove.tcp mousemove.tcp pointermove.tcp',
_pointerdown = 'touchstart.a mousedown.a pointerdown.a', _pointerdown = 'touchstart.tcp mousedown.tcp pointerdown.tcp',
_pointerup = 'touchend.a mouseup.a pointerup.a', _pointerup = 'touchend.tcp mouseup.tcp pointerup.tcp',
_GPU = false, _GPU = false,
_round = Math.round, _round = Math.round,
_animate = window.requestAnimationFrame || _animate = window.requestAnimationFrame ||
@ -93,29 +94,32 @@
(_$UI || build()).css({ (_$UI || build()).css({
// 'width': _$UI[0]._width, // 'width': _$UI[0]._width,
'left': (_$UI[0]._left = position.left) - 'left': (_$UI[0]._left = position.left) -
((_$UI[0]._left = _$UI[0]._left + _$UI[0]._width - ((_$UI[0]._left += _$UI[0]._width -
($window.scrollLeft() + $window.width())) + gap > 0 ? ($window.scrollLeft() + $window.width())) + gap > 0 ?
_$UI[0]._left + gap : 0), _$UI[0]._left + gap : 0),
'top': (_$UI[0]._top = position.top + $this.outerHeight()) - 'top': (_$UI[0]._top = position.top + $this.outerHeight()) -
((_$UI[0]._top = _$UI[0]._top + _$UI[0]._height - ((_$UI[0]._top += _$UI[0]._height -
($window.scrollTop() + $window.height())) + gap > 0 ? ($window.scrollTop() + $window.height())) + gap > 0 ?
_$UI[0]._top + gap : 0) _$UI[0]._top + gap : 0)
}).show(_options.animationSpeed, function() { }).show(_options.animationSpeed, function() {
if (event === true) { if (event === true) { // resize, scroll
return; return;
} }
_$alpha._width = _$alpha.width(); _$alpha._width = _$alpha.width();
_$xy_slider._width = _$xy_slider.width(); _$xy_slider._width = _$xy_slider.width();
_$xy_slider._height = _$xy_slider.height(); _$xy_slider._height = _$xy_slider.height();
_$z_slider._height = _$z_slider.height();
_color.setColor(extractValue(_$trigger[0])); _color.setColor(extractValue(_$trigger[0]));
preRender(true); preRender(true);
}); })
.off('.tcp').on(_pointerdown,
'.cp-xy-slider,.cp-z-slider,.cp-alpha', pointerdown);
} else if (_colorPicker.$trigger) { } else if (_colorPicker.$trigger) {
$(_$UI).hide(_options.animationSpeed, function() { $(_$UI).hide(_options.animationSpeed, function() {
preRender(false); preRender(false);
_colorPicker.$trigger = null; _colorPicker.$trigger = null;
}); }).off('.tcp');
} }
} }
@ -130,6 +134,7 @@
var $this = $(this); var $this = $(this);
_GPU = _options.GPU && $this.css('perspective') !== undefined; _GPU = _options.GPU && $this.css('perspective') !== undefined;
_$z_slider = $('.cp-z-slider', this);
_$xy_slider = $('.cp-xy-slider', this); _$xy_slider = $('.cp-xy-slider', this);
_$xy_cursor = $('.cp-xy-cursor', this); _$xy_cursor = $('.cp-xy-cursor', this);
_$z_cursor = $('.cp-z-cursor', this); _$z_cursor = $('.cp-z-cursor', this);
@ -141,9 +146,7 @@
); );
this._width = this.offsetWidth; this._width = this.offsetWidth;
this._height = this.offsetHeight; this._height = this.offsetHeight;
}).hide() }).hide();
.on(_pointerdown,
'.cp-xy-slider,.cp-z-slider,.cp-alpha', pointerdown);
} }
function pointerdown(e) { function pointerdown(e) {
@ -162,7 +165,7 @@
preRender(); preRender();
$document.on(_pointerup, function(e) { $document.on(_pointerup, function(e) {
$document.off('.a'); $document.off('.tcp');
}).on(_pointermove, function(e) { }).on(_pointermove, function(e) {
action(e); action(e);
preRender(); preRender();
@ -183,7 +186,7 @@
function z_slider(event) { function z_slider(event) {
var z = resolveEventType(event).pageY - _$trigger._offset.top; var z = resolveEventType(event).pageY - _$trigger._offset.top;
_color.setColor({h: 360 - (z / _$xy_slider._height * 360)}, 'hsv'); _color.setColor({h: 360 - (z / _$z_slider._height * 360)}, 'hsv');
} }
function alpha(event) { function alpha(event) {
@ -205,7 +208,7 @@
alphaContrast = colors.rgbaMixBlack.luminance > 0.22 ? dark : light, alphaContrast = colors.rgbaMixBlack.luminance > 0.22 ? dark : light,
h = (1 - colors.hsv.h) * _$xy_slider._height, h = (1 - colors.hsv.h) * _$xy_slider._height,
s = colors.hsv.s * _$xy_slider._width, s = colors.hsv.s * _$xy_slider._width,
v = (1 - colors.hsv.v) * _$xy_slider._height, v = (1 - colors.hsv.v) * _$z_slider._height,
a = colors.alpha * _$alpha._width, a = colors.alpha * _$alpha._width,
translate3d = _GPU ? 'translate3d' : '', translate3d = _GPU ? 'translate3d' : '',
triggerValue = _$trigger[0].value, triggerValue = _$trigger[0].value,
@ -286,7 +289,7 @@
}, options); }, options);
!_colorPicker && options.scrollResize && $(window) !_colorPicker && options.scrollResize && $(window)
.on('resize.a scroll.a', function() { .on('resize.tcp scroll.tcp', function() {
if (_colorPicker.$trigger) { if (_colorPicker.$trigger) {
_colorPicker.toggle.call(_colorPicker.$trigger[0], true); _colorPicker.toggle.call(_colorPicker.$trigger[0], true);
} }
@ -295,13 +298,13 @@
this.colorPicker = _instance.colorPicker = this.colorPicker = _instance.colorPicker =
_colorPicker || new ColorPicker(options); _colorPicker || new ColorPicker(options);
$(options.body).off('.a').on(_pointerdown, function(e) { $(options.body).off('.tcp').on(_pointerdown, function(e) {
!_instance.add(_$UI).find(e.target) !_instance.add(_$UI).find(e.target)
.add(_instance.filter(e.target))[0] && toggle(); .add(_instance.filter(e.target))[0] && toggle();
}); });
return this.on('focusin.a click.a', toggle) return this.on('focusin.tcp click.tcp', toggle)
.on('change.a', function() { .on('change.tcp', function() {
_color.setColor(this.value || '#FFF'); _color.setColor(this.value || '#FFF');
_instance.colorPicker.render(true); _instance.colorPicker.render(true);
}) })
@ -316,16 +319,17 @@
$elm.css({'background-color': value, $elm.css({'background-color': value,
'color': function() { 'color': function() {
return _color.setColor(value) return _color.setColor(value)
.rgbaMixBGMixCustom.luminance > 0.22 ? '#222' : '#ddd' .rgbaMixBGMixCustom.luminance > 0.22 ? '#222' : '#DDD'
} }
}); });
}); });
}; };
$.fn.colorPicker.destroy = function() { $.fn.colorPicker.destroy = function() {
_instance.add(_options.body).off('.a'); // saver $('*').off('.tcp'); // slower but saver
_colorPicker.toggle(false); _colorPicker.toggle(false);
_instance = $(); _instance = $();
// destroy _colorPicker
}; };
})); }));

2
jqColorPicker.js.map
View File

File diff suppressed because one or more lines are too long

4
jqColorPicker.min.js vendored
View File

File diff suppressed because one or more lines are too long