better GPU render detection and render enhancement

pull/25/head
peterd 9 years ago
parent 53e0cd4106
commit ce643f09d6

@ -11,7 +11,7 @@
<body> <body>
<h1>Tiny jQuery colorPicker</h1> <h1>Tiny jQuery colorPicker</h1>
<p>Looking for mobile first, tiny foot print, fast, scaleable, flexible and pluggable...<br> <p>Looking for mobile first, tiny foot print, fast, scaleable, flexible and pluggable...<br>
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> This <strong>4.5KB</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> <a name="demo" id="demo"></a>
<h2>Demo</h2> <h2>Demo</h2>
On all elements with className 'color': <pre>$('.color').colorPicker();</pre> On all elements with className 'color': <pre>$('.color').colorPicker();</pre>
@ -73,9 +73,9 @@ window.myColorPicker = $('input.color').colorPicker({
<p>Will follow... See <a href="https://github.com/PitPik/tinyColorPicker">tinyColorPicke on GitHub</a> for now.</p> <p>Will follow... See <a href="https://github.com/PitPik/tinyColorPicker">tinyColorPicke on GitHub</a> for now.</p>
<!-- <script type="text/javascript" src="jquery-1.11.2.js"></script> --> <!-- <script type="text/javascript" src="jquery-1.11.2.js"></script> -->
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script> <script src="http://code.jquery.com/jquery-1.11.2.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>
<script type="text/javascript" src="jqColorPicker.min.js"></script> <!-- <script type="text/javascript" src="jqColorPicker.min.js"></script> -->
<script type="text/javascript"> <script type="text/javascript">
(function(window, undefined){ (function(window, undefined){
'use strict'; 'use strict';
@ -477,7 +477,7 @@ window.myColorPicker = $('input.color').colorPicker({
var colors = this.color.colors, var colors = this.color.colors,
rgb = colors.RND.rgb; rgb = colors.RND.rgb;
$('.cp-patch div').css({'background-color': $elm.css('background-color')}); $('.cp-patch div').css({'background-color': $elm[0].style.backgroundColor});
$('.cp-disp').text(this.color.options.colorNames[colors.HEX] || $elm.val()); $('.cp-disp').text(this.color.options.colorNames[colors.HEX] || $elm.val());
if (toggled === true) { if (toggled === true) {
// here you can recalculate position after showing the color picker // here you can recalculate position after showing the color picker

@ -94,7 +94,9 @@
find('.cp-alpha').toggle(!!_options.opacity). find('.cp-alpha').toggle(!!_options.opacity).
parent(). // back to $(_html) parent(). // back to $(_html)
show(0, function() { show(0, function() {
_GPU = _options.GPU && $(this).css('perspective') === ''; _GPU = _options.GPU &&
$('<div>').css('transform', 'matrix(1,0,0,2,0,0)')[0].
style.cssText.replace(/2.*$/, '1,');
_options.buidCallback.call(_colorPicker, $(this)); _options.buidCallback.call(_colorPicker, $(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);
@ -173,58 +175,58 @@
h = (1 - colors.hsv.h) * _cache.sliderWidth, h = (1 - colors.hsv.h) * _cache.sliderWidth,
s = colors.hsv.s * _cache.sliderWidth, s = colors.hsv.s * _cache.sliderWidth,
v = (1 - colors.hsv.v) * _cache.sliderWidth, v = (1 - colors.hsv.v) * _cache.sliderWidth,
a = alpha * _cache.alphaWidth, a = alpha * _cache.alphaWidth; //,
t3d = _GPU ? 'translate3d' : ''; // t3d = _GPU ? 'translate3d' : '';
_$xy_slider.css({ // _$xy_slider.css({
backgroundColor: 'rgb(' + // backgroundColor: 'rgb(' +
hueRGB.r + ',' + hueRGB.g + ',' + hueRGB.b + ')'}); // hueRGB.r + ',' + hueRGB.g + ',' + hueRGB.b + ')'});
_$xy_cursor.css({ // _$xy_cursor.css({
transform: t3d + '(' + s + 'px, ' + v + 'px, 0)', // transform: t3d + '(' + s + 'px, ' + v + 'px, 0)',
left: !_GPU ? s : '', // left: !_GPU ? s : '',
top: !_GPU ? v : '', // top: !_GPU ? v : '',
borderColor : colors.RGBLuminance > 0.22 ? dark : light // borderColor : colors.RGBLuminance > 0.22 ? dark : light
}); // });
_$z_cursor.css({ // _$z_cursor.css({
transform: t3d + '(0, ' + h + 'px, 0)', // transform: t3d + '(0, ' + h + 'px, 0)',
top: !_GPU ? h : '', // top: !_GPU ? h : '',
borderColor : 'transparent ' + HUEContrast, // borderColor : 'transparent ' + HUEContrast,
}); // });
_$alpha.css({backgroundColor: 'rgb(' + RGBInnerText + ')'}); // _$alpha.css({backgroundColor: 'rgb(' + RGBInnerText + ')'});
_$alpha_cursor.css({ // _$alpha_cursor.css({
transform: t3d + '(' + a + 'px, 0, 0)', // transform: t3d + '(' + a + 'px, 0, 0)',
left: !_GPU ? a : '', // left: !_GPU ? a : '',
borderColor : alphaContrast + ' transparent' // borderColor : alphaContrast + ' transparent'
}); // });
_options.doRender && _cache.$element.css({ // _options.doRender && _cache.$element.css({
backgroundColor : RGBAText, // backgroundColor : RGBAText,
color: colors.rgbaMixBGMixCustom.luminance > 0.22 ? dark : light // color: colors.rgbaMixBGMixCustom.luminance > 0.22 ? dark : light
}); // });
_cache.$element.val(text); // _cache.$element.val(text);
// faster version (more than 2.5x)... though, no jQuery (colors, ...) // faster version (more than 2.5x)... though, no jQuery (colors, ...)
//
// _$xy_slider[0].style.cssText = _$xy_slider[0].style.cssText =
// 'background-color:' + 'rgb(' + 'background-color:' + 'rgb(' +
// hueRGB.r + ',' + hueRGB.g + ',' + hueRGB.b + ');'; hueRGB.r + ',' + hueRGB.g + ',' + hueRGB.b + ');';
// _$xy_cursor[0].style.cssText = _$xy_cursor[0].style.cssText =
// (_GPU ? 'transform:' + t3d + '(' + s + 'px, ' + v + 'px, 0);' : (_GPU ? _GPU + s + ',' + v + ');' :
// 'left:' + s + 'px;' + 'top:' + v + 'px;') + 'left:' + s + 'px;' + 'top:' + v + 'px;') +
// 'border-color:' + (colors.RGBLuminance > 0.22 ? dark : light); 'border-color:' + (colors.RGBLuminance > 0.22 ? dark : light);
// _$z_cursor[0].style.cssText = _$z_cursor[0].style.cssText =
// (_GPU ? 'transform:' + t3d + '(0, ' + h + 'px, 0);' : (_GPU ? _GPU + '0,' + h + ');' :
// 'top:' + h + 'px;') + 'top:' + h + 'px;') +
// 'border-color:' + 'transparent ' + HUEContrast; 'border-color:' + 'transparent ' + HUEContrast;
// _$alpha[0].style.cssText = 'background-color:' + 'rgb(' + RGBInnerText + ')'; _$alpha[0].style.cssText = 'background-color:' + 'rgb(' + RGBInnerText + ')';
// _$alpha_cursor[0].style.cssText = _$alpha_cursor[0].style.cssText =
// (_GPU ? 'transform:' + t3d + '(' + a + 'px, 0, 0);' : (_GPU ? _GPU + a + ', 0);' :
// 'left:' + a + 'px;') + 'left:' + a + 'px;') +
// 'border-color:' + alphaContrast + ' transparent'; 'border-color:' + alphaContrast + ' transparent';
// _options.doRender && (_cache.$element[0].style.cssText = _options.doRender && (_cache.$element[0].style.cssText =
// 'background-color:' + RGBAText + 'background-color:' + RGBAText +
// ';color:' + (colors.rgbaMixBGMixCustom.luminance > 0.22 ? dark : light)); ';color:' + (colors.rgbaMixBGMixCustom.luminance > 0.22 ? dark : light));
// _cache.$element[0].value = text; _cache.$element[0].value = text;
_options.renderCallback.call( _options.renderCallback.call(
_colorPicker, _colorPicker,

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long
Loading…
Cancel
Save