Browse Source

some optimization

pull/25/head
peterd 7 years ago
parent
commit
e2b8e93994
  1. 2
      development/colorPicker.css
  2. 43
      index.html
  3. 17
      jqColorPicker.js
  4. 2
      jqColorPicker.js.map
  5. 2
      jqColorPicker.min.js

2
development/colorPicker.css

@ -51,7 +51,7 @@
box-sizing: border-box;
}
.cp-alpha {
clear: left;
clear: both;
width: 100%;
height: 16px;
margin: 6px 0;

43
index.html

@ -66,15 +66,15 @@ window.myColorPicker = $('input.color').colorPicker({
<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 type="text/javascript" src="colors.js"></script> -->
<!-- <script type="text/javascript" src="jqColorPicker.js"></script> -->
<script type="text/javascript" src="jqColorPicker.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> -->
<script type="text/javascript">
(function(window, undefined){
'use strict';
var plugin = {},
pluginSelect = document.getElementById('pluginSelect'),
$pluginSelect = $('#pluginSelect'),
getQueryVariable = function(variable) {
var query = window.location.search.substring(1),
vars = query.split('&'),
@ -88,8 +88,7 @@ window.myColorPicker = $('input.color').colorPicker({
}
return(false);
},
type = getQueryVariable('type'),
selector = document.getElementById('pluginSelect');
type = getQueryVariable('type');
// plugin for mobile use (bigger and value/color display on top)
plugin.mobile = {
@ -161,17 +160,15 @@ window.myColorPicker = $('input.color').colorPicker({
'background:#666; border-top:1px solid #222;}',
renderCallback: function($elm, toggled) {
var $panel = $('.cp-panel'),
colors = this.color.colors,
var colors = this.color.colors,
rgb = colors.RND.rgb,
hsv = colors.RND.hsv;
hsv = colors.RND.hsv,
modes = { r: rgb.r, g: rgb.g, b: rgb.b,
h: hsv.h, s: hsv.s, v: hsv.v };
$('.cp-r', $panel).val(rgb.r);
$('.cp-g', $panel).val(rgb.g);
$('.cp-b', $panel).val(rgb.b);
$('.cp-h', $panel).val(hsv.h);
$('.cp-s', $panel).val(hsv.s);
$('.cp-v', $panel).val(hsv.v);
$('input', '.cp-panel').each(function() {
this.value = modes[this.className.substr(3, 1)];
});
}
};
@ -189,11 +186,13 @@ window.myColorPicker = $('input.color').colorPicker({
'<div></div><div></div><div></div><div></div>' +
'<div></div><div></div><div></div><div class="cp-store">&lt;</div>').
on('click', '.cp-memory div', function(e) {
var $this = $(this);
if (this.className) {
$(this).parent().prepend($(this).prev()).children().eq(0).
$this.parent().prepend($this.prev()).children().eq(0).
css('background-color', '#' + colorInstance.colors.HEX);
} else {
colorInstance.setColor($(this).css('background-color'));
colorInstance.setColor($this.css('background-color'));
colorPicker.render();
}
}).find('.cp-memory div').each(function() {
@ -238,13 +237,13 @@ window.myColorPicker = $('input.color').colorPicker({
pluginSelect.value = type || 'desktop';
pluginSelect.onchange = function(e) {
$pluginSelect.val(type || 'desktop').
on('change', function(e) {
location = window.location;
window.location = location.origin + location.pathname +
'?type=' + this.value + '#demo';
}
window.location =
location.origin + location.pathname + '?type=' + this.value + '#demo';
});
window.myColorPicker = $('input.color').colorPicker(
plugin[type] || plugin.desktop

17
jqColorPicker.js

@ -6,7 +6,7 @@
_color,
_options,
_cache = {},
_$UI,
_$UI, _$xy_slider, _$xy_cursor, _$z_cursor , _$alpha , _$alpha_cursor,
_pointermove = 'touchmove mousemove pointermove',
_pointerup = 'touchend mouseup pointerup',
_GPU = false,
@ -89,6 +89,11 @@
show(0, function() {
_GPU = _options.GPU && $(this).css('transform') === '';
_options.buidCallback.call(_colorPicker, $(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);
}).hide().
on('touchstart mousedown pointerdown',
'.cp-xy-slider,.cp-z-slider,.cp-alpha', pointerdown).
@ -164,23 +169,23 @@
a = alpha * _cache.alphaWidth,
t3d = _GPU ? 'translate3d' : '';
$('.cp-xy-slider').css({
_$xy_slider.css({
backgroundColor: 'rgb(' +
hueRGB.r + ',' + hueRGB.g + ',' + hueRGB.b + ')'});
$('.cp-xy-cursor').css({
_$xy_cursor.css({
transform: t3d + '(' + s + 'px, ' + v + 'px, 0)',
left: !_GPU ? s : '',
top: !_GPU ? v : '',
borderColor : colors.RGBLuminance > 0.22 ? dark : light
});
$('.cp-z-cursor').css({
_$z_cursor.css({
transform: t3d + '(0, ' + h + 'px, 0)',
top: !_GPU ? h : '',
borderLeftColor : HUEContrast,
borderRightColor : HUEContrast
});
$('.cp-alpha').css({backgroundColor: 'rgb(' + RGBInnerText + ')'});
$('.cp-alpha-cursor').css({
_$alpha.css({backgroundColor: 'rgb(' + RGBInnerText + ')'});
_$alpha_cursor.css({
transform: t3d + '(' + a + 'px, 0, 0)',
left: !_GPU ? a : '',
borderTopColor : alphaContrast,

2
jqColorPicker.js.map
File diff suppressed because it is too large
View File

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

Loading…
Cancel
Save