Browse Source

Some more optimizations

optimization in demos; better translate3d detection (opera), some css
shorthand declarations and a faster, jQuery-free rendering test…
pull/25/head
peterd 7 years ago
parent
commit
b0d0881342
  1. 25
      index.html
  2. 41
      jqColorPicker.js
  3. 2
      jqColorPicker.js.map
  4. 4
      jqColorPicker.min.js

25
index.html

@ -65,7 +65,7 @@ window.myColorPicker = $('input.color').colorPicker({
<h2>API and usage</h2>
<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 src="//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="jqColorPicker.js"></script>
<!-- <script type="text/javascript" src="jqColorPicker.min.js"></script> -->
@ -160,11 +160,11 @@ window.myColorPicker = $('input.color').colorPicker({
'background:#666; border-top:1px solid #222;}',
renderCallback: function($elm, toggled) {
var colors = this.color.colors,
rgb = colors.RND.rgb,
hsv = colors.RND.hsv,
modes = { r: rgb.r, g: rgb.g, b: rgb.b,
h: hsv.h, s: hsv.s, v: hsv.v };
var colors = this.color.colors.RND,
modes = {
r: colors.rgb.r, g: colors.rgb.g, b: colors.rgb.b,
h: colors.hsv.h, s: colors.hsv.s, v: colors.hsv.v
};
$('input', '.cp-panel').each(function() {
this.value = modes[this.className.substr(3, 1)];
@ -180,7 +180,10 @@ window.myColorPicker = $('input.color').colorPicker({
buidCallback: function($elm) {
var colorInstance = this.color,
colorPicker = this;
colorPicker = this,
random = function(n) {
return Math.round(Math.random() * (n || 255));
};
$elm.append('<div class="cp-memory">' +
'<div></div><div></div><div></div><div></div>' +
@ -196,11 +199,9 @@ window.myColorPicker = $('input.color').colorPicker({
colorPicker.render();
}
}).find('.cp-memory div').each(function() {
!this.className && $(this).css({background: 'rgb(' +
Math.round(Math.random() * 255) + ', ' +
Math.round(Math.random() * 255) + ', ' +
Math.round(Math.random() * 255) +
')'});
!this.className && $(this).css({background:
'rgb(' + random() + ', ' + random() + ', ' + random() + ')'
});
});
},

41
jqColorPicker.js

@ -87,7 +87,7 @@
find('.cp-alpha').toggle(!!_options.opacity).
parent(). // back to $(_html)
show(0, function() {
_GPU = _options.GPU && $(this).css('transform') === '';
_GPU = _options.GPU && $(this).css('perspective') === '';
_options.buidCallback.call(_colorPicker, $(this));
_$xy_slider = $('.cp-xy-slider', this);
_$xy_cursor = $('.cp-xy-cursor', this);
@ -174,29 +174,52 @@
hueRGB.r + ',' + hueRGB.g + ',' + hueRGB.b + ')'});
_$xy_cursor.css({
transform: t3d + '(' + s + 'px, ' + v + 'px, 0)',
left: !_GPU ? s : '',
top: !_GPU ? v : '',
left: !_GPU ? s : 0,
top: !_GPU ? v : 0,
borderColor : colors.RGBLuminance > 0.22 ? dark : light
});
_$z_cursor.css({
transform: t3d + '(0, ' + h + 'px, 0)',
top: !_GPU ? h : '',
borderLeftColor : HUEContrast,
borderRightColor : HUEContrast
top: !_GPU ? h : 0,
borderColor : 'transparent ' + HUEContrast,
});
_$alpha.css({backgroundColor: 'rgb(' + RGBInnerText + ')'});
_$alpha_cursor.css({
transform: t3d + '(' + a + 'px, 0, 0)',
left: !_GPU ? a : '',
borderTopColor : alphaContrast,
borderBottomColor : alphaContrast
left: !_GPU ? a : 0,
borderColor : alphaContrast + ' transparent'
});
_options.doRender && _cache.$element.css({
backgroundColor : RGBAText,
color: colors.rgbaMixBGMixCustom.luminance > 0.22 ? dark : light
});
_cache.$element.val(text);
// faster version (more than 2.5x)... though, no jQuery (colors, ...)
//
// _$xy_slider[0].style.cssText =
// 'background-color:' + 'rgb(' +
// hueRGB.r + ',' + hueRGB.g + ',' + hueRGB.b + ');';
// _$xy_cursor[0].style.cssText =
// 'transform:' + t3d + '(' + s + 'px, ' + v + 'px, 0);' +
// 'left:' + (!_GPU ? s : 0) + 'px;' +
// 'top:' + (!_GPU ? v : 0) + 'px;' +
// 'border-color:' + (colors.RGBLuminance > 0.22 ? dark : light);
// _$z_cursor[0].style.cssText =
// 'transform:' + t3d + '(0, ' + h + 'px, 0);' +
// 'top:' + (!_GPU ? h : 0) + 'px;' +
// 'border-color:' + 'transparent ' + HUEContrast;
// _$alpha[0].style.cssText = 'background-color:' + 'rgb(' + RGBInnerText + ')';
// _$alpha_cursor[0].style.cssText =
// 'transform:' + t3d + '(' + a + 'px, 0, 0);' +
// 'left:' + (!_GPU ? a : 0) + 'px;' +
// 'border-color:' + alphaContrast + ' transparent';
// _options.doRender && (_cache.$element[0].style.cssText =
// 'background-color:' + RGBAText +
// ';color:' + (colors.rgbaMixBGMixCustom.luminance > 0.22 ? dark : light));
// _cache.$element[0].value = text;
_options.renderCallback.call(
_colorPicker, _cache.$element, toggled === true);
}

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