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

new method toString / optimization

Browse Source 
Added method ‚toString‘ to colors.js; Converts color to HTML-string
with auto or forced alpha. Some minor optimizations.
This commit is contained in:
peterd 2016-04-03 16:56:27 +02:00
parent 777b22aab4
commit bd230e47ff
12 changed files with 93 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
LICENSE.md
View File

@ -1,6 +1,6 @@
The MIT License (MIT)
Copyright (c) 2014 Peter Dematté
Copyright (c) 2016 Peter Dematté
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal

5
README.md
View File

@ -99,10 +99,13 @@ After initializing Color or ColorPicker you'll get a clean but rhich model of th
myColors: {
colors: { all kinds of color values... see later},
options: { all the options you set or that are set as default... },
__proto__: { // all methods Color uses
__proto__: { // all methods Color uses (See https://github.com/PitPik/colorPicker for details)
setColor: function(newCol, type, alpha) {},
setCustomBackground: function(col) {},
saveAsBackground: function() {},
// new method: converts current color to HTML-String like: rgba(123, 234, 0, 0.89)
// forceAlpha === true / false -> alway / never print alpha, === undefined -> auto
toString: function('rgb' || 'hsl' || 'hex' || '' -> 'rgb', forceAlpha) {},
}
}
```

66
colors.js
View File

@ -19,6 +19,9 @@
HEX: {HEX: [0, 16777215]} // maybe we don't need this
},
_Math = window.Math,
_round = _Math.round,
_instance = {},
_colors = {},
@ -83,6 +86,10 @@
return setColor(this.colors, undefined, 'rgb', true);
};
Colors.prototype.toString = function(colorMode, forceAlpha) {
return ColorConverter.color2text(colorMode || 'rgba', this.colors, forceAlpha);
};
// ------------------------------------------------------ //
// ---------- Color calculation related stuff ---------- //
// -------------------------------------------------------//
@ -112,7 +119,7 @@
color.rgb = {r: rgb.r, g: rgb.g, b: rgb.b};
color.alpha = alpha;
// color.RGBLuminance = getLuminance(RGB);
color.equivalentGrey = Math.round(grey.r * RGB.r + grey.g * RGB.g + grey.b * RGB.b);
color.equivalentGrey = _round(grey.r * RGB.r + grey.g * RGB.g + grey.b * RGB.b);
color.rgbaMixBlack = mixColors(rgb, {r: 0, g: 0, b: 0}, alpha, 1);
color.rgbaMixWhite = mixColors(rgb, {r: 1, g: 1, b: 1}, alpha, 1);
@ -151,7 +158,7 @@
if (!RND[typ]) RND[typ] = {};
modes = colors[typ];
for(mode in modes) {
RND[typ][mode] = Math.round(modes[mode] * ranges[typ][mode][1]);
RND[typ][mode] = _round(modes[mode] * ranges[typ][mode][1]);
}
}
}
@ -198,7 +205,7 @@
background.rgbaMixCustom[luminance]);
colors.rgbaMixBGMixCustom = rgbaMixBGMixCustom;
/* ------ */
rgbaMixBGMixCustom.luminanceDelta = Math.abs(
rgbaMixBGMixCustom.luminanceDelta = _Math.abs(
rgbaMixBGMixCustom[luminance] - background.rgbaMixCustom[luminance]);
rgbaMixBGMixCustom.hueDelta = getHueDelta(background.rgbaMixCustom, rgbaMixBGMixCustom, true);
/* ------ */
@ -246,6 +253,25 @@
return color;
},
color2text: function(colorMode, colors, forceAlpha) {
var alpha = forceAlpha !== false && _round(colors.alpha * 100) / 100,
hasAlpha = typeof alpha === 'number' &&
forceAlpha !== false && (forceAlpha || alpha !== 1),
RGB = colors.RND.rgb,
HSL = colors.RND.hsl,
mode = colorMode.toLowerCase().substr(0, 3),
shouldBeHex = mode === 'hex' && hasAlpha,
isHex = mode === 'hex' && !shouldBeHex,
isRgb = mode === 'rgb' || shouldBeHex,
innerText = isRgb ? RGB.r + ', ' + RGB.g + ', ' + RGB.b :
HSL.h + ', ' + HSL.s + '%, ' + HSL.l + '%',
text = isHex ? '#' + colors.HEX : (shouldBeHex ? 'rgb' : mode) +
(hasAlpha ? 'a' : '') + '(' + innerText +
(hasAlpha ? ', ' + alpha : '') + ')';
return text;
},
RGB2HEX: function(RGB) {
return (
(RGB.r < 16 ? '0' : '') + RGB.r.toString(16) +
@ -257,21 +283,21 @@
HEX2rgb: function(HEX) {
HEX = HEX.split(''); // IE7
return {
r: parseInt(HEX[0] + HEX[HEX[3] ? 1 : 0], 16) / 255,
g: parseInt(HEX[HEX[3] ? 2 : 1] + (HEX[3] || HEX[1]), 16) / 255,
b: parseInt((HEX[4] || HEX[2]) + (HEX[5] || HEX[2]), 16) / 255
r: +('0x' + HEX[0] + HEX[HEX[3] ? 1 : 0]) / 255,
g: +('0x' + HEX[HEX[3] ? 2 : 1] + (HEX[3] || HEX[1])) / 255,
b: +('0x' + (HEX[4] || HEX[2]) + (HEX[5] || HEX[2])) / 255
};
},
hue2RGB: function(hue) {
var h = hue * 6,
mod = ~~h % 6, // Math.floor(h) -> faster in most browsers
mod = ~~h % 6, // _Math.floor(h) -> faster in most browsers
i = h === 6 ? 0 : (h - mod);
return {
r: Math.round([1, 1 - i, 0, 0, i, 1][mod] * 255),
g: Math.round([i, 1, 1, 1 - i, 0, 0][mod] * 255),
b: Math.round([0, 0, i, 1, 1, 1 - i][mod] * 255)
r: _round([1, 1 - i, 0, 0, i, 1][mod] * 255),
g: _round([i, 1, 1, 1 - i, 0, 0][mod] * 255),
b: _round([0, 0, i, 1, 1, 1 - i][mod] * 255)
};
},
@ -291,13 +317,13 @@
if (r < g) {
r = g + (g = r, 0);
k = -2 / 6 - k;
min = Math.min(g, b); // g < b ? g : b; ???
min = _Math.min(g, b); // g < b ? g : b; ???
}
chroma = r - min;
s = r ? (chroma / r) : 0;
return {
h: s < 1e-15 ? ((_colors && _colors.hsl && _colors.hsl.h) || 0) :
chroma ? Math.abs(k + (g - b) / (6 * chroma)) : 0,
chroma ? _Math.abs(k + (g - b) / (6 * chroma)) : 0,
s: r ? (chroma / r) : ((_colors && _colors.hsv && _colors.hsv.s) || 0), // ??_colors.hsv.s || 0
v: r
};
@ -307,7 +333,7 @@
var h = hsv.h * 6,
s = hsv.s,
v = hsv.v,
i = ~~h, // Math.floor(h) -> faster in most browsers
i = ~~h, // _Math.floor(h) -> faster in most browsers
f = h - i,
p = v * (1 - s),
q = v * (1 - f * s),
@ -349,7 +375,7 @@
v = l < 0.5 ? l * (1 + s) : (l + s) - (s * l),
m = l + l - v,
sv = v ? ((v - m) / v) : 0,
sextant = ~~h, // Math.floor(h) -> faster in most browsers
sextant = ~~h, // _Math.floor(h) -> faster in most browsers
fract = h - sextant,
vsf = v * sv * fract,
t = m + vsf,
@ -381,9 +407,9 @@
}
function getHueDelta(rgb1, rgb2, nominal) {
return (Math.max(rgb1.r - rgb2.r, rgb2.r - rgb1.r) +
Math.max(rgb1.g - rgb2.g, rgb2.g - rgb1.g) +
Math.max(rgb1.b - rgb2.b, rgb2.b - rgb1.b)) * (nominal ? 255 : 1) / 765;
return (_Math.max(rgb1.r - rgb2.r, rgb2.r - rgb1.r) +
_Math.max(rgb1.g - rgb2.g, rgb2.g - rgb1.g) +
_Math.max(rgb1.b - rgb2.b, rgb2.b - rgb1.b)) * (nominal ? 255 : 1) / 765;
}
function getLuminance(rgb, normalized) {
@ -392,7 +418,7 @@
luminance = _instance.options.luminance;
for (var i = RGB.length; i--; ) {
RGB[i] = RGB[i] <= 0.03928 ? RGB[i] / 12.92 : Math.pow(((RGB[i] + 0.055) / 1.055), 2.4);
RGB[i] = RGB[i] <= 0.03928 ? RGB[i] / 12.92 : _Math.pow(((RGB[i] + 0.055) / 1.055), 2.4);
}
return ((luminance.r * RGB[0]) + (luminance.g * RGB[1]) + (luminance.b * RGB[2]));
}
@ -418,11 +444,11 @@
} else {
ratio = (lum2 + 0.05) / (lum1 + 0.05);
}
return Math.round(ratio * 100) / 100;
return _round(ratio * 100) / 100;
}
function limitValue(value, min, max) {
// return Math.max(min, Math.min(max, value)); // faster??
// return _Math.max(min, _Math.min(max, value)); // faster??
return (value > max ? max : value < min ? min : value);
}

10
demo/index.html
View File

@ -11,9 +11,9 @@
<link rel="stylesheet" type="text/css" href="../index.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 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" src="../colors.js"></script>
<script type="text/javascript" src="../jqColorPicker.js"></script>
<script type="text/javascript" src="index.js"></script>
<title>tiny jQuery color picker demo</title>
@ -25,9 +25,9 @@
<a name="demo" id="demo" class="a-inline"></a>
<h2>Skinned dev-tools like, with RGB sliders</h2>
<div class="input-toggles">
<input class="color no-alpha" value="#B6BD79" />
<input class="color" value="#B6BD79" />
<input class="color no-alpha" value="rgb(162, 63, 3)" />
<input class="color no-alpha" value="hsl(32, 95%, 23%)" />
<input class="color no-sliders" value="hsl(32, 95%, 23%)" />
</div>
<div class="div-toggles">
<div class="trigger" value="#556B2F"><div><div></div></div></div>

13
demo/index.js
View File

@ -36,12 +36,14 @@ $(function(){
'<div class="cp-rgb-b"><div class="cp-rgb-b-cursor"></div></div>' +
'<div class="cp-patch"><div></div></div><div class="cp-disp"></div>');
this.cursorRStyle = $elm.find('.cp-rgb-r-cursor')[0].style; // caching for faster render renderCallback
this.cursorGStyle = $elm.find('.cp-rgb-g-cursor')[0].style;
this.cursorBStyle = $elm.find('.cp-rgb-b-cursor')[0].style;
this.$sliders = $elm.find('.cp-rgb-r, .cp-rgb-g, .cp-rgb-b');
this.cursorRStyle = this.$sliders.find('.cp-rgb-r-cursor')[0].style; // caching for faster render renderCallback
this.cursorGStyle = this.$sliders.find('.cp-rgb-g-cursor')[0].style;
this.cursorBStyle = this.$sliders.find('.cp-rgb-b-cursor')[0].style;
this.patchStyle = $('.cp-patch div')[0].style;
this.$display = $('.cp-disp');
this.$alpha = $elm.find('.cp-alpha');
$elm.on('mousedown', '.cp-rgb-r, .cp-rgb-g, .cp-rgb-b', function(e) { // event delegation
$currentSlider = $(this); // well ;o)
@ -73,6 +75,11 @@ $(function(){
// $elm.closest('.trigger').removeClass('active');
// }
if (toggled === true) { // on show colorPicker
this.$alpha.toggle(!$elm.hasClass('no-alpha'));
this.$sliders.toggle(!$elm.hasClass('no-sliders'));
}
this.patchStyle.backgroundColor = $elm[0].style.backgroundColor; // set patch color...
this.$display.text(this.color.options.colorNames[colors.HEX] || $elm.val()); // ...and text aside

1
demo/mod.css
View File

@ -57,6 +57,7 @@
.cp-color-picker .cp-rgb-r,
.cp-color-picker .cp-rgb-g,
.cp-color-picker .cp-rgb-b {
clear: both;
overflow: visible;
width: 152px;
margin: 12px 0 0;

28
index.html
View File

@ -12,6 +12,13 @@
<link rel="icon" type="image/x-icon" href="development/favicon.ico">
<!-- <link rel="stylesheet" type="text/css" href="development/colorPicker.css"> -->
<link rel="stylesheet" type="text/css" href="development/compatibility.css">
<!-- <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 type="text/javascript" src="colors.js"></script>
<script type="text/javascript" src="jqColorPicker.js"></script>
<!-- <script type="text/javascript" src="jqColorPicker.min.js"></script> -->
<title>tiny jQuery color picker</title>
</head>
<body>
@ -48,7 +55,8 @@ On all elements with className 'color': <pre>$('.color').colorPicker();</pre>
<div class="trigger" value="#556B2F"><div><div></div></div></div>
<div class="trigger" value="rgb(100, 86, 70)"><div><div></div></div></div>
<div class="trigger" value="hsla(167, 29%, 68%, 0.8)"><div><div></div></div></div>
<img id="qr" style="float: right; display: block; display: none; margin-right: -200px;" src="./development/qr.png" alt="QR code for http://www.dematte.at/tinyColorPicker/?type=mobile#demo"></div>
<img id="qr" style="float: right; display: block; display: none; margin-right: -200px;" src="./development/qr.png" alt="QR code for http://www.dematte.at/tinyColorPicker/?type=mobile#demo">
</div>
<h2>Usage</h2>
<p>There is only one file you need to load... No images and no CSS required.</p>
<pre style="display: block; overflow: auto;">
@ -77,29 +85,21 @@ window.myColorPicker = $('input.color').colorPicker({
'.cp-alpha-cursor {border-width:8px; margin-left:-8px;}',
renderCallback: function($elm, toggled) {
var colors = this.color.colors,
rgb = colors.RND.rgb;
var colors = this.color.colors;
$('.cp-disp').css({
backgroundColor: '#' + colors.HEX,
color: colors.RGBLuminance > 0.22 ? '#222' : '#ddd'
}).text('rgba(' + rgb.r + ', ' + rgb.g + ', ' + rgb.b +
', ' + (Math.round(colors.alpha * 100) / 100) + ')');
}).text(this.color.toString($elm._colorMode));
}
});
</pre>
<h2>API and usage</h2>
<p>Will follow... See <a href="https://github.com/PitPik/tinyColorPicker">tinyColorPicker on GitHub</a> for now.</p>
</div>
<!-- <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 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="index.js"></script>
<a class="a-inline" href="https://github.com/PitPik/tinyColorPicker"><img style="position: absolute; top: 0; right: 0; border: 0;" src="development/fmog.png" alt="Fork me on GitHub"></a>
<script type="text/javascript" src="index.js"></script>
</body>
</html>

6
index.js
View File

@ -43,14 +43,12 @@
'.cp-alpha-cursor{border-width: 8px; margin-left:-8px;}',
renderCallback: function($elm, toggled) {
var colors = this.color.colors,
rgb = colors.RND.rgb;
var colors = this.color.colors;
$('.cp-disp').css({
backgroundColor: '#' + colors.HEX,
color: colors.RGBLuminance > 0.22 ? '#222' : '#ddd'
}).text('rgba(' + rgb.r + ', ' + rgb.g + ', ' + rgb.b +
', ' + (Math.round(colors.alpha * 100) / 100) + ')');
}).text(this.color.toString($elm._colorMode)); // $elm.val();
}
};

21
jqColorPicker.js
View File

@ -120,7 +120,7 @@
}
function build() {
$('head').append('<style type="text/css">' +
$('head').append('<style type="text/css" id="tinyColorPickerStyles">' +
(_options.css || _css) + (_options.cssAddon || '') + '</style>');
return _colorPicker.$UI = _$UI =
@ -200,22 +200,13 @@
HSL = colors.RND.hsl,
dark = '#222',
light = '#ddd',
colorMode = _$trigger._colorMode,
isAlpha = colors.alpha !== 1,
alpha = _round(colors.alpha * 100) / 100,
RGBInnerText = RGB.r + ', ' + RGB.g + ', ' + RGB.b,
text = (colorMode === 'HEX' && !isAlpha ? '#' + colors.HEX :
colorMode === 'rgb' || (colorMode === 'HEX' && isAlpha) ?
(!isAlpha ? 'rgb(' + RGBInnerText + ')' :
'rgba(' + RGBInnerText + ', ' + alpha + ')') :
('hsl' + (isAlpha ? 'a(' : '(') + HSL.h + ', ' + HSL.s + '%, ' +
HSL.l + '%' + (isAlpha ? ', ' + alpha : '') + ')')),
colorText = _color.toString(_$trigger._colorMode),
HUEContrast = colors.HUELuminance > 0.22 ? dark : light,
alphaContrast = colors.rgbaMixBlack.luminance > 0.22 ? dark : light,
h = (1 - colors.hsv.h) * _$xy_slider._height,
s = colors.hsv.s * _$xy_slider._width,
v = (1 - colors.hsv.v) * _$xy_slider._height,
a = alpha * _$alpha._width,
a = colors.alpha * _$alpha._width,
translate3d = _GPU ? 'translate3d' : '',
triggerValue = _$trigger[0].value,
hasNoValue = _$trigger[0].hasAttribute('value') && // question this
@ -235,18 +226,18 @@
top: !_GPU ? h : '',
borderColor : 'transparent ' + HUEContrast
};
_$alpha._css = {backgroundColor: 'rgb(' + RGBInnerText + ')'};
_$alpha._css = {backgroundColor: '#' + colors.HEX};
_$alpha_cursor._css = {
transform: translate3d + '(' + a + 'px, 0, 0)',
left: !_GPU ? a : '',
borderColor : alphaContrast + ' transparent'
};
_$trigger._css = {
backgroundColor : hasNoValue ? '' : text,
backgroundColor : hasNoValue ? '' : colorText,
color: hasNoValue ? '' :
colors.rgbaMixBGMixCustom.luminance > 0.22 ? dark : light
};
_$trigger.text = hasNoValue ? '' : triggerValue !== text ? text : '';
_$trigger.text = hasNoValue ? '' : triggerValue !== colorText ? colorText : '';
toggled !== undefined ? render(toggled) : _animate(render);
}

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

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "tinyColorPicker",
"version": "1.0.2",
"version": "1.0.4",
"repository": {
"type": "git",
"url": "http://github.com/PitPik/tinyColorPicker.git"