mirror of
https://github.com/PitPik/colorPicker.git
synced 2025-08-30 20:42:45 -06:00
New (quite) stable version
Initial version (tested on IE7, IE6 possible with new CSS)
This commit is contained in:
peterd
commit
08725127a0
BIN
_blank.cur
Normal file
BIN
_blank.cur
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 102 B |
BIN
_blank.png
Normal file
BIN
_blank.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 70 B |
BIN
_icons.png
Normal file
BIN
_icons.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 594 B |
6
color.all.min.js
vendored
Normal file
6
color.all.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
64
color.html
Normal file
64
color.html
Normal file
@ -0,0 +1,64 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<link href="color.css" rel="stylesheet" type="text/css">
|
||||
<title>color_new</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div id="testPatch"> </div>
|
||||
|
||||
<div id="colorValues"> </div>
|
||||
|
||||
<div id="sliders" class="sliders">
|
||||
<div id="rgbR"><div></div></div>
|
||||
<div id="rgbG"><div></div></div>
|
||||
<div id="rgbB"><div></div></div>
|
||||
|
||||
<div id="hslH"><div></div></div>
|
||||
<div id="hslS"><div></div></div>
|
||||
<div id="hslL"><div></div></div>
|
||||
</div>
|
||||
|
||||
<div id="hsv_map">
|
||||
<canvas id="surface" width="200" height="200"></canvas>
|
||||
<div class="cover"></div>
|
||||
<div class="hsv-cursor"></div>
|
||||
<canvas id="brightness" width="25" height="200"></canvas>
|
||||
<div class="hsv-v-cursor" id="hsv_cursor">
|
||||
<div class="hsv-vl-cursor"></div>
|
||||
<div class="hsv-vr-cursor"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="color_squares">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div id="model_display"></div>
|
||||
|
||||
<!--[if IE]>
|
||||
<object id='wtPlugin' classid='CLSID:092dfa86-5807-5a94-bf3b-5a53ba9e5308'></object>
|
||||
<![endif]-->
|
||||
<!--[if !IE]> <-->
|
||||
<object id="wtPlugin" type="application/x-wacomtabletplugin">
|
||||
<param name="onload" value="pluginLoaded" />
|
||||
</object>
|
||||
<!--> <![endif]-->
|
||||
|
||||
|
||||
<!--canvas style="position: absolute; left: 500px; width: 255px; height: 255px" id="canvas"></canvas-->
|
||||
<!--[if IE]><script type="text/javascript" src="excanvas_r3/excanvas.js"></script><![endif]-->
|
||||
<script type="text/javascript" src="color.js"></script>
|
||||
<script type="text/javascript" src="tools.js"></script>
|
||||
<script type="text/javascript" src="color_init.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
713
color.js
Normal file
713
color.js
Normal file
@ -0,0 +1,713 @@
|
||||
;(function(window, undefined){
|
||||
"use strict"
|
||||
|
||||
var _valueRanges = {
|
||||
rgb: {r: [0, 255], g: [0, 255], b: [0, 255]},
|
||||
hsv: {h: [0, 360], s: [0, 100], v: [0, 100]},
|
||||
hsl: {h: [0, 360], s: [0, 100], l: [0, 100]},
|
||||
cmy: {c: [0, 100], m: [0, 100], y: [0, 100]},
|
||||
cmyk: {c: [0, 100], m: [0, 100], y: [0, 100], k: [0, 100]},
|
||||
XYZ: {X: [0, 100], Y: [0, 100], Z: [0, 100]},
|
||||
Lab: {L: [0, 100], a: [-128, 127], b: [-128, 127]},
|
||||
alpha: {alpha: [0, 1]},
|
||||
HEX: {HEX: [0, 16777215]} // maybe we don't need this
|
||||
},
|
||||
|
||||
_instance = {},
|
||||
_colors = {},
|
||||
|
||||
// http://www.brucelindbloom.com/index.html?Eqn_RGB_XYZ_Matrix.html for more
|
||||
XYZMatrix = { // Observer = 2° (CIE 1931), Illuminant = D65
|
||||
X: [ 0.4124564, 0.3575761, 0.1804375],
|
||||
Y: [ 0.2126729, 0.7151522, 0.0721750],
|
||||
Z: [ 0.0193339, 0.1191920, 0.9503041],
|
||||
R: [ 3.2404542, -1.5371385, -0.4985314],
|
||||
G: [-0.9692660, 1.8760108, 0.0415560],
|
||||
B: [ 0.0556434, -0.2040259, 1.0572252]
|
||||
},
|
||||
grey = {r: 0.298954, g: 0.586434, b: 0.114612}, // CIE-XYZ 1931
|
||||
luminance = {r: 0.2126, g: 0.7152, b: 0.0722}, // W3C 2.0
|
||||
|
||||
Colors = window.Colors = function(options) {
|
||||
this.colors = {RND: {}};
|
||||
this.options = {
|
||||
color: 'rgba(204, 82, 37, 0.8)', // init value(s)...
|
||||
XYZMatrix: XYZMatrix,
|
||||
// XYZReference: {},
|
||||
grey: grey,
|
||||
luminance: luminance,
|
||||
valueRanges: _valueRanges
|
||||
// customBG: '#808080'
|
||||
// convertCallback: undefined,
|
||||
// allMixDetails: false
|
||||
};
|
||||
initInstance(this, options || {});
|
||||
},
|
||||
initInstance = function(THIS, options) {
|
||||
var matrix,
|
||||
importColor,
|
||||
_options = THIS.options,
|
||||
customBG;
|
||||
|
||||
focusInstance(THIS);
|
||||
for (var option in options) {
|
||||
if (options[option] !== undefined) _options[option] = options[option];
|
||||
}
|
||||
matrix = _options.XYZMatrix;
|
||||
if (!options.XYZReference) _options.XYZReference = {
|
||||
X: matrix.X[0] + matrix.X[1] + matrix.X[2],
|
||||
Y: matrix.Y[0] + matrix.Y[1] + matrix.Y[2],
|
||||
Z: matrix.Z[0] + matrix.Z[1] + matrix.Z[2]
|
||||
};
|
||||
customBG = _options.customBG;
|
||||
_options.customBG = (typeof customBG === 'string') ? ColorConverter.txt2color(customBG).rgb : customBG;
|
||||
_colors = setColor(THIS.colors, _options.color, undefined, true); // THIS.colors = _colors =
|
||||
},
|
||||
focusInstance = function(THIS) {
|
||||
if (_instance !== THIS) {
|
||||
_instance = THIS;
|
||||
_colors = THIS.colors;
|
||||
}
|
||||
};
|
||||
|
||||
Colors.prototype.setColor = function(newCol, type, alpha) {
|
||||
focusInstance(this);
|
||||
if (newCol) {
|
||||
return setColor(this.colors, newCol, type, undefined, alpha);
|
||||
} else {
|
||||
if (alpha !== undefined) {
|
||||
this.colors.alpha = alpha;
|
||||
}
|
||||
return convertColors(type);
|
||||
}
|
||||
};
|
||||
|
||||
Colors.prototype.getColor = function(type) {
|
||||
var result = this.colors, n = 0;
|
||||
|
||||
if (type) {
|
||||
type = type.split('.');
|
||||
while (result[type[n]]) {
|
||||
result = result[type[n++]];
|
||||
}
|
||||
if (type.length !== n) {
|
||||
result = undefined;
|
||||
}
|
||||
}
|
||||
return result;
|
||||
};
|
||||
|
||||
Colors.prototype.setCustomBackground = function(col) { // wild gues,... check again...
|
||||
focusInstance(this); // needed???
|
||||
this.options.customBG = (typeof col === 'string') ? ColorConverter.txt2color(col).rgb : col;
|
||||
// return setColor(this.colors, this.options.customBG, 'rgb', true); // !!!!RGB
|
||||
return setColor(this.colors, undefined, 'rgb'); // just recalculate existing
|
||||
};
|
||||
|
||||
Colors.prototype.saveAsBackground = function() { // alpha
|
||||
focusInstance(this); // needed???
|
||||
// return setColor(this.colors, this.colors.RND.rgb, 'rgb', true);
|
||||
return setColor(this.colors, undefined, 'rgb', true);
|
||||
};
|
||||
|
||||
Colors.prototype.convertColor = function(color, type) {
|
||||
var convert = ColorConverter,
|
||||
ranges = _valueRanges,
|
||||
types = type.split('2'),
|
||||
fromType = types[0],
|
||||
toType = types[1],
|
||||
test = /(?:RG|HS|CM|LA)/,
|
||||
normalizeFrom = test.test(fromType),
|
||||
normalizeTo = test.test(toType),
|
||||
exceptions = {LAB: 'Lab'},
|
||||
normalize = function(color, type, reverse) {
|
||||
var result = {},
|
||||
Lab = type === 'Lab' ? 1 : 0;
|
||||
|
||||
for (var n in color) { // faster (but bigger) way: if/else outside 2 for loops
|
||||
result[n] = reverse ?
|
||||
Math.round(color[n] * (Lab || ranges[type][n][1])) :
|
||||
color[n] / (Lab || ranges[type][n][1]);
|
||||
}
|
||||
|
||||
return result;
|
||||
};
|
||||
|
||||
fromType = ranges[fromType] ? fromType : exceptions[fromType] || fromType.toLowerCase();
|
||||
toType = ranges[toType] ? toType : exceptions[toType] || toType.toLowerCase();
|
||||
|
||||
if (normalizeFrom && type !== 'RGB2HEX') { // from ABC to abc
|
||||
color = normalize(color, fromType);
|
||||
}
|
||||
color = fromType === toType ? color : ( // same type; returns same/normalized version
|
||||
convert[fromType + '2' + toType] ? convert[fromType + '2' + toType](color, true) : // existing converter
|
||||
toType === 'HEX' ? convert.RGB2HEX(type === 'RGB2HEX' ? color : normalize(fromType === 'rgb' ? color :
|
||||
convert[fromType + '2rgb'](color, true), 'rgb', true)) :
|
||||
convert['rgb2' + toType](convert[fromType + '2rgb'](color, true), true) // not in ColorConverter
|
||||
);
|
||||
if (normalizeTo) { // from abc to ABC
|
||||
color = normalize(color, toType, true);
|
||||
}
|
||||
|
||||
return color;
|
||||
};
|
||||
|
||||
// ------------------------------------------------------ //
|
||||
// ---------- Color calculation related stuff ---------- //
|
||||
// -------------------------------------------------------//
|
||||
|
||||
function setColor(colors, color, type, save, alpha) { // color only full range
|
||||
if (typeof color === 'string') {
|
||||
var color = ColorConverter.txt2color(color); // new object
|
||||
type = color.type;
|
||||
_colors[type] = color[type];
|
||||
alpha = alpha !== undefined ? alpha : color.alpha;
|
||||
} else if (color) {
|
||||
for (var n in color) {
|
||||
colors[type][n] = limitValue(color[n] / _valueRanges[type][n][1], 0 , 1);
|
||||
}
|
||||
}
|
||||
if (alpha !== undefined) {
|
||||
colors.alpha = +alpha;
|
||||
}
|
||||
return convertColors(type, save ? colors : undefined);
|
||||
}
|
||||
|
||||
function saveAsBackground(RGB, rgb, alpha) {
|
||||
var grey = _instance.options.grey,
|
||||
color = {};
|
||||
|
||||
color.RGB = {r: RGB.r, g: RGB.g, b: RGB.b};
|
||||
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.rgbaMixBlack = mixColors(rgb, {r: 0, g: 0, b: 0}, alpha, 1);
|
||||
color.rgbaMixWhite = mixColors(rgb, {r: 1, g: 1, b: 1}, alpha, 1);
|
||||
color.rgbaMixBlack.luminance = getLuminance(color.rgbaMixBlack, true);
|
||||
color.rgbaMixWhite.luminance = getLuminance(color.rgbaMixWhite, true);
|
||||
|
||||
if (_instance.options.customBG) {
|
||||
color.rgbaMixCustom = mixColors(rgb, _instance.options.customBG, alpha, 1);
|
||||
color.rgbaMixCustom.luminance = getLuminance(color.rgbaMixCustom, true);
|
||||
_instance.options.customBG.luminance = getLuminance(_instance.options.customBG, true);
|
||||
}
|
||||
|
||||
return color;
|
||||
}
|
||||
|
||||
function convertColors(type, colorObj) {
|
||||
// console.time('convertColors');
|
||||
var colors = colorObj || _colors,
|
||||
convert = ColorConverter,
|
||||
options = _instance.options,
|
||||
ranges = _valueRanges,
|
||||
RND = colors.RND,
|
||||
// type = colorType, // || _mode.type,
|
||||
modes, mode = '', from = '', // value = '',
|
||||
exceptions = {hsl: 'hsv', cmyk: 'cmy', rgb: type},
|
||||
RGB = RND.rgb, SAVE, SMART;
|
||||
|
||||
if (type !== 'alpha') {
|
||||
/* if (type !== 'rgb') colors.rgb = convert[type + '2rgb'](colors[type]);
|
||||
if (type !== 'hsv') colors.hsv = convert.rgb2hsv(colors.rgb);
|
||||
if (type !== 'hsl') colors.hsl = convert.hsv2hsl(colors.hsv);
|
||||
if (type !== 'cmy' && type !== 'cmyk') colors.cmy = convert.rgb2cmy(colors.rgb);
|
||||
if (type !== 'cmyk') colors.cmyk = convert.cmy2cmyk(colors.cmy);
|
||||
if (type !== 'Lab') {
|
||||
colors.Lab = convert.rgb2Lab(colors.rgb);
|
||||
delete colors._rgb;
|
||||
}
|
||||
*/
|
||||
for (var typ in ranges) {
|
||||
if (!ranges[typ][typ]) { // no alpha|HEX
|
||||
if (type !== typ && typ !== 'XYZ') {
|
||||
from = exceptions[typ] || 'rgb';
|
||||
colors[typ] = convert[from + '2' + typ](colors[from]);
|
||||
}
|
||||
|
||||
if (!RND[typ]) RND[typ] = {};
|
||||
modes = colors[typ];
|
||||
for(mode in modes) {
|
||||
RND[typ][mode] = Math.round(modes[mode] * (typ === 'Lab' ? 1 : ranges[typ][mode][1]));
|
||||
}
|
||||
}
|
||||
}
|
||||
if (type !== 'Lab') {
|
||||
delete colors._rgb;
|
||||
}
|
||||
|
||||
RGB = RND.rgb;
|
||||
colors.HEX = convert.RGB2HEX(RGB);
|
||||
colors.equivalentGrey =
|
||||
options.grey.r * colors.rgb.r +
|
||||
options.grey.g * colors.rgb.g +
|
||||
options.grey.b * colors.rgb.b;
|
||||
colors.webSave = SAVE = getClosestWebColor(RGB, 51);
|
||||
// colors.webSave.HEX = convert.RGB2HEX(colors.webSave);
|
||||
colors.webSmart = SMART = getClosestWebColor(RGB, 17);
|
||||
// colors.webSmart.HEX = convert.RGB2HEX(colors.webSmart);
|
||||
colors.saveColor =
|
||||
RGB.r === SAVE.r && RGB.g === SAVE.g && RGB.b === SAVE.b ? 'web save' :
|
||||
RGB.r === SMART.r && RGB.g === SMART.g && RGB.b === SMART.b ? 'web smart' : '';
|
||||
colors.hueRGB = ColorConverter.hue2RGB(colors.hsv.h);
|
||||
|
||||
if (colorObj) {
|
||||
colors.background = saveAsBackground(RGB, colors.rgb, colors.alpha);
|
||||
}
|
||||
} // else RGB = RND.rgb;
|
||||
|
||||
var rgb = colors.rgb, // for better minification...
|
||||
alpha = colors.alpha,
|
||||
luminance = 'luminance',
|
||||
background = colors.background,
|
||||
rgbaMixBlack, rgbaMixWhite, rgbaMixCustom,
|
||||
rgbaMixBG, rgbaMixBGMixBlack, rgbaMixBGMixWhite, rgbaMixBGMixCustom;
|
||||
|
||||
rgbaMixBlack = mixColors(rgb, {r: 0, g: 0, b: 0}, alpha, 1);
|
||||
rgbaMixBlack[luminance] = getLuminance(rgbaMixBlack, true);
|
||||
colors.rgbaMixBlack = rgbaMixBlack;
|
||||
|
||||
rgbaMixWhite = mixColors(rgb, {r: 1, g: 1, b: 1}, alpha, 1);
|
||||
rgbaMixWhite[luminance] = getLuminance(rgbaMixWhite, true);
|
||||
colors.rgbaMixWhite = rgbaMixWhite;
|
||||
|
||||
if (options.allMixDetails) {
|
||||
rgbaMixBlack.WCAG2Ratio = getWCAG2Ratio(rgbaMixBlack[luminance], 0);
|
||||
rgbaMixWhite.WCAG2Ratio = getWCAG2Ratio(rgbaMixWhite[luminance], 1);
|
||||
|
||||
if (options.customBG) {
|
||||
rgbaMixCustom = mixColors(rgb, options.customBG, alpha, 1);
|
||||
rgbaMixCustom[luminance] = getLuminance(rgbaMixCustom, true);
|
||||
rgbaMixCustom.WCAG2Ratio = getWCAG2Ratio(rgbaMixCustom[luminance], options.customBG[luminance]);
|
||||
colors.rgbaMixCustom = rgbaMixCustom;
|
||||
}
|
||||
|
||||
rgbaMixBG = mixColors(rgb, background.rgb, alpha, background.alpha);
|
||||
rgbaMixBG[luminance] = getLuminance(rgbaMixBG, true); // ?? do we need this?
|
||||
colors.rgbaMixBG = rgbaMixBG;
|
||||
|
||||
rgbaMixBGMixBlack = mixColors(rgb, background.rgbaMixBlack, alpha, 1);
|
||||
rgbaMixBGMixBlack[luminance] = getLuminance(rgbaMixBGMixBlack, true);
|
||||
rgbaMixBGMixBlack.WCAG2Ratio = getWCAG2Ratio(rgbaMixBGMixBlack[luminance],
|
||||
background.rgbaMixBlack[luminance]);
|
||||
/* ------ */
|
||||
rgbaMixBGMixBlack.luminanceDelta = Math.abs(
|
||||
rgbaMixBGMixBlack[luminance] - colors.background.rgbaMixBlack[luminance]);
|
||||
rgbaMixBGMixBlack.hueDelta = getHueDelta(background.rgbaMixBlack, rgbaMixBGMixBlack, true);
|
||||
/* ------ */
|
||||
colors.rgbaMixBGMixBlack = rgbaMixBGMixBlack;
|
||||
|
||||
rgbaMixBGMixWhite = mixColors(rgb, background.rgbaMixWhite, alpha, 1);
|
||||
rgbaMixBGMixWhite[luminance] = getLuminance(rgbaMixBGMixWhite, true);
|
||||
rgbaMixBGMixWhite.WCAG2Ratio = getWCAG2Ratio(rgbaMixBGMixWhite[luminance],
|
||||
background.rgbaMixWhite[luminance]);
|
||||
/* ------ */
|
||||
rgbaMixBGMixWhite.luminanceDelta = Math.abs(
|
||||
rgbaMixBGMixWhite[luminance] - colors.background.rgbaMixWhite[luminance]);
|
||||
rgbaMixBGMixWhite.hueDelta = getHueDelta(background.rgbaMixWhite, rgbaMixBGMixWhite, true);
|
||||
/* ------ */
|
||||
colors.rgbaMixBGMixWhite = rgbaMixBGMixWhite;
|
||||
}
|
||||
|
||||
if (options.customBG) {
|
||||
rgbaMixBGMixCustom = mixColors(rgb, background.rgbaMixCustom, alpha, 1);
|
||||
rgbaMixBGMixCustom[luminance] = getLuminance(rgbaMixBGMixCustom, true);
|
||||
rgbaMixBGMixCustom.WCAG2Ratio = getWCAG2Ratio(rgbaMixBGMixCustom[luminance],
|
||||
background.rgbaMixCustom[luminance]);
|
||||
colors.rgbaMixBGMixCustom = rgbaMixBGMixCustom;
|
||||
/* ------ */
|
||||
rgbaMixBGMixCustom.luminanceDelta = Math.abs(
|
||||
rgbaMixBGMixCustom[luminance] - colors.background.rgbaMixCustom[luminance]);
|
||||
rgbaMixBGMixCustom.hueDelta = getHueDelta(background.rgbaMixCustom, rgbaMixBGMixCustom, true);
|
||||
/* ------ */
|
||||
}
|
||||
|
||||
colors.RGBLuminance = getLuminance(RGB);
|
||||
colors.HUELuminance = getLuminance(colors.hueRGB);
|
||||
|
||||
// renderVars.readyToRender = true;
|
||||
if (options.convertCallback) {
|
||||
options.convertCallback(colors, type); //, convert); //, _mode);
|
||||
}
|
||||
|
||||
// console.timeEnd('convertColors')
|
||||
// if (colorObj)
|
||||
return colors;
|
||||
}
|
||||
|
||||
|
||||
// ------------------------------------------------------ //
|
||||
// ------------------ color conversion ------------------ //
|
||||
// -------------------------------------------------------//
|
||||
|
||||
var ColorConverter = {
|
||||
txt2color: function(txt) {
|
||||
var color = {},
|
||||
parts = txt.replace(/(?:#|\))/, '').split('('),
|
||||
values = (parts[1] || '').split(/,\s*/),
|
||||
type = parts[1] ? parts[0].substr(0, 3) : 'rgb',
|
||||
m = '';
|
||||
|
||||
color.type = type;
|
||||
color[type] = {};
|
||||
if (parts[1]) {
|
||||
for (var n = 3; n--; ) {
|
||||
m = type[n] || type.charAt(n); // IE7
|
||||
color[type][m] = +values[n] / _valueRanges[type][m][1];
|
||||
}
|
||||
} else {
|
||||
color.rgb = ColorConverter.HEX2rgb(parts[0]);
|
||||
}
|
||||
// color.color = color[type];
|
||||
color.alpha = values[3] ? +values[3] : 1;
|
||||
|
||||
return color;
|
||||
},
|
||||
|
||||
RGB2HEX: function(RGB) {
|
||||
return (
|
||||
(RGB.r < 16 ? '0' : '') + RGB.r.toString(16) +
|
||||
(RGB.g < 16 ? '0' : '') + RGB.g.toString(16) +
|
||||
(RGB.b < 16 ? '0' : '') + RGB.b.toString(16)
|
||||
).toUpperCase();
|
||||
},
|
||||
|
||||
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
|
||||
};
|
||||
},
|
||||
|
||||
hue2RGB: function(hue) {
|
||||
var h = hue * 6,
|
||||
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)
|
||||
}
|
||||
},
|
||||
|
||||
// ------------------------ HSV ------------------------ //
|
||||
|
||||
rgb2hsv: function(rgb) { // faster
|
||||
var r = rgb.r,
|
||||
g = rgb.g,
|
||||
b = rgb.b,
|
||||
k = 0, chroma, min, s;
|
||||
|
||||
if (g < b) {
|
||||
g = b + (b = g, 0);
|
||||
k = -1;
|
||||
}
|
||||
min = b;
|
||||
if (r < g) {
|
||||
r = g + (g = r, 0);
|
||||
k = -2 / 6 - k;
|
||||
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.h) || 0) : chroma ? Math.abs(k + (g - b) / (6 * chroma)) : 0,
|
||||
s: r ? (chroma / r) : ((_colors && _colors.hsv.s) || 0), // ??_colors.hsv.s || 0
|
||||
v: r
|
||||
};
|
||||
},
|
||||
|
||||
hsv2rgb: function(hsv) {
|
||||
var h = hsv.h * 6,
|
||||
s = hsv.s,
|
||||
v = hsv.v,
|
||||
i = ~~h, // Math.floor(h) -> faster in most browsers
|
||||
f = h - i,
|
||||
p = v * (1 - s),
|
||||
q = v * (1 - f * s),
|
||||
t = v * (1 - (1 - f) * s),
|
||||
mod = i % 6;
|
||||
|
||||
return {
|
||||
r: [v, q, p, p, t, v][mod],
|
||||
g: [t, v, v, q, p, p][mod],
|
||||
b: [p, p, t, v, v, q][mod]
|
||||
};
|
||||
},
|
||||
|
||||
// ------------------------ HSL ------------------------ //
|
||||
|
||||
hsv2hsl: function(hsv) {
|
||||
var l = (2 - hsv.s) * hsv.v,
|
||||
s = hsv.s * hsv.v;
|
||||
|
||||
s = !hsv.s ? 0 : l < 1 ? (l ? s / l : 0) : s / (2 - l);
|
||||
|
||||
return {
|
||||
h: hsv.h,
|
||||
s: !hsv.v && !s ? ((_colors && _colors.hsl.s) || 0) : s, // ???
|
||||
l: l / 2
|
||||
}
|
||||
},
|
||||
|
||||
rgb2hsl: function(rgb, dependent) { // not used in Color
|
||||
var hsv = ColorConverter.rgb2hsv(rgb);
|
||||
|
||||
return ColorConverter.hsv2hsl(dependent ? hsv : (_colors.hsv = hsv));
|
||||
},
|
||||
|
||||
hsl2rgb: function(hsl) {
|
||||
var h = hsl.h * 6,
|
||||
s = hsl.s,
|
||||
l = hsl.l,
|
||||
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
|
||||
fract = h - sextant,
|
||||
vsf = v * sv * fract,
|
||||
t = m + vsf,
|
||||
q = v - vsf,
|
||||
mod = sextant % 6;
|
||||
|
||||
return {
|
||||
r: [v, q, m, m, t, v][mod],
|
||||
g: [t, v, v, q, m, m][mod],
|
||||
b: [m, m, t, v, v, q][mod]
|
||||
};
|
||||
},
|
||||
|
||||
// ------------------------ CMYK ------------------------ //
|
||||
// Quote from Wikipedia:
|
||||
// "Since RGB and CMYK spaces are both device-dependent spaces, there is no
|
||||
// simple or general conversion formula that converts between them.
|
||||
// Conversions are generally done through color management systems, using
|
||||
// color profiles that describe the spaces being converted. Nevertheless, the
|
||||
// conversions cannot be exact, since these spaces have very different gamuts."
|
||||
// Translation: the following are just simple RGB to CMY(K) and visa versa conversion functions.
|
||||
|
||||
rgb2cmy: function(rgb) {
|
||||
return {
|
||||
c: 1 - rgb.r,
|
||||
m: 1 - rgb.g,
|
||||
y: 1 - rgb.b
|
||||
};
|
||||
},
|
||||
|
||||
cmy2cmyk: function(cmy) {
|
||||
var k = Math.min(Math.min(cmy.c, cmy.m), cmy.y),
|
||||
t = 1 - k || 1e-20;
|
||||
|
||||
return { // regular
|
||||
c: (cmy.c - k) / t,
|
||||
m: (cmy.m - k) / t,
|
||||
y: (cmy.y - k) / t,
|
||||
k: k
|
||||
};
|
||||
},
|
||||
|
||||
cmyk2cmy: function(cmyk) {
|
||||
var k = cmyk.k;
|
||||
|
||||
return { // regular
|
||||
c: cmyk.c * (1 - k) + k,
|
||||
m: cmyk.m * (1 - k) + k,
|
||||
y: cmyk.y * (1 - k) + k
|
||||
};
|
||||
},
|
||||
|
||||
cmy2rgb: function(cmy) {
|
||||
return {
|
||||
r: 1 - cmy.c,
|
||||
g: 1 - cmy.m,
|
||||
b: 1 - cmy.y
|
||||
};
|
||||
},
|
||||
|
||||
rgb2cmyk: function(rgb, dependent) {
|
||||
var cmy = ColorConverter.rgb2cmy(rgb); // doppelt??
|
||||
|
||||
return ColorConverter.cmy2cmyk(dependent ? cmy : (_colors.cmy = cmy));
|
||||
},
|
||||
|
||||
cmyk2rgb: function(cmyk, dependent) {
|
||||
var cmy = ColorConverter.cmyk2cmy(cmyk); // doppelt??
|
||||
|
||||
return ColorConverter.cmy2rgb(dependent ? cmy : (_colors.cmy = cmy));
|
||||
},
|
||||
|
||||
// ------------------------ LAB ------------------------ //
|
||||
|
||||
XYZ2rgb: function(XYZ, skip) {
|
||||
var M = _instance.options.XYZMatrix,
|
||||
X = XYZ.X,
|
||||
Y = XYZ.Y,
|
||||
Z = XYZ.Z,
|
||||
r = X * M.R[0] + Y * M.R[1] + Z * M.R[2],
|
||||
g = X * M.G[0] + Y * M.G[1] + Z * M.G[2],
|
||||
b = X * M.B[0] + Y * M.B[1] + Z * M.B[2],
|
||||
N = 1 / 2.4, M = 0.0031308;
|
||||
|
||||
r = (r > M ? 1.055 * Math.pow(r, N) - 0.055 : 12.92 * r);
|
||||
g = (g > M ? 1.055 * Math.pow(g, N) - 0.055 : 12.92 * g);
|
||||
b = (b > M ? 1.055 * Math.pow(b, N) - 0.055 : 12.92 * b);
|
||||
|
||||
if (!skip) { // out of gammut
|
||||
_colors._rgb = {r: r, g: g, b: b};
|
||||
}
|
||||
|
||||
return {
|
||||
r: limitValue(r, 0, 1),
|
||||
g: limitValue(g, 0, 1),
|
||||
b: limitValue(b, 0, 1)
|
||||
};
|
||||
},
|
||||
|
||||
rgb2XYZ: function(rgb) {
|
||||
var M = _instance.options.XYZMatrix,
|
||||
r = rgb.r,
|
||||
g = rgb.g,
|
||||
b = rgb.b,
|
||||
N = 0.04045;
|
||||
|
||||
r = (r > N ? Math.pow((r + 0.055) / 1.055, 2.4) : r / 12.92);
|
||||
g = (g > N ? Math.pow((g + 0.055) / 1.055, 2.4) : g / 12.92);
|
||||
b = (b > N ? Math.pow((b + 0.055) / 1.055, 2.4) : b / 12.92);
|
||||
|
||||
return {
|
||||
X: r * M.X[0] + g * M.X[1] + b * M.X[2],
|
||||
Y: r * M.Y[0] + g * M.Y[1] + b * M.Y[2],
|
||||
Z: r * M.Z[0] + g * M.Z[1] + b * M.Z[2]
|
||||
};
|
||||
},
|
||||
|
||||
XYZ2Lab: function(XYZ) {
|
||||
var R = _instance.options.XYZReference,
|
||||
X = XYZ.X / R.X,
|
||||
Y = XYZ.Y / R.Y,
|
||||
Z = XYZ.Z / R.Z,
|
||||
N = 16 / 116, M = 1 / 3, K = 0.008856, L = 7.787037;
|
||||
|
||||
X = X > K ? Math.pow(X, M) : (L * X) + N;
|
||||
Y = Y > K ? Math.pow(Y, M) : (L * Y) + N;
|
||||
Z = Z > K ? Math.pow(Z, M) : (L * Z) + N;
|
||||
|
||||
return {
|
||||
L: (116 * Y) - 16,
|
||||
a: 500 * (X - Y),
|
||||
b: 200 * (Y - Z)
|
||||
};
|
||||
},
|
||||
|
||||
Lab2XYZ: function(Lab) {
|
||||
var R = _instance.options.XYZReference,
|
||||
Y = (Lab.L + 16) / 116,
|
||||
X = Lab.a / 500 + Y,
|
||||
Z = Y - Lab.b / 200,
|
||||
X3 = Math.pow(X, 3),
|
||||
Y3 = Math.pow(Y, 3),
|
||||
Z3 = Math.pow(Z, 3),
|
||||
N = 16 / 116, K = 0.008856, L = 7.787037;
|
||||
|
||||
return {
|
||||
X: (X3 > K ? X3 : (X - N) / L) * R.X,
|
||||
Y: (Y3 > K ? Y3 : (Y - N) / L) * R.Y,
|
||||
Z: (Z3 > K ? Z3 : (Z - N) / L) * R.Z
|
||||
};
|
||||
},
|
||||
|
||||
rgb2Lab: function(rgb, dependent) {
|
||||
var XYZ = ColorConverter.rgb2XYZ(rgb);
|
||||
|
||||
return ColorConverter.XYZ2Lab(dependent ? XYZ : (_colors.XYZ = XYZ));
|
||||
},
|
||||
|
||||
Lab2rgb: function(Lab, dependent) {
|
||||
var XYZ = ColorConverter.Lab2XYZ(Lab);
|
||||
|
||||
return ColorConverter.XYZ2rgb(dependent ? XYZ : (_colors.XYZ = XYZ), dependent);
|
||||
}
|
||||
};
|
||||
|
||||
// ------------------------------------------------------ //
|
||||
// ------------------ helper functions ------------------ //
|
||||
// -------------------------------------------------------//
|
||||
|
||||
function getClosestWebColor(RGB, val) {
|
||||
var out = {},
|
||||
tmp = 0,
|
||||
half = val / 2;
|
||||
|
||||
for (var n in RGB) {
|
||||
tmp = RGB[n] % val; // 51 = 'web save', 17 = 'web smart'
|
||||
out[n] = RGB[n] + (tmp > half ? val - tmp : -tmp);
|
||||
}
|
||||
return out;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
function getLuminance(rgb, normalized) {
|
||||
var div = normalized ? 1 : 255,
|
||||
RGB = [rgb.r / div, rgb.g / div, rgb.b / div],
|
||||
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);
|
||||
}
|
||||
return ((luminance.r * RGB[0]) + (luminance.g * RGB[1]) + (luminance.b * RGB[2]));
|
||||
}
|
||||
|
||||
/* function mixColors(topColor, bottomColor, topAlpha, bottomAlpha) {
|
||||
// http://stackoverflow.com/questions/726549/algorithm-for-additive-color-mixing-for-rgb-values
|
||||
var newColor = {},
|
||||
alphaTop = (topAlpha !== undefined ? topAlpha : 1),
|
||||
alphaBottom = (bottomAlpha !== undefined ? bottomAlpha : 1);
|
||||
|
||||
// if (alphaTop >= 1) return topColor;
|
||||
|
||||
for(var n in topColor) {
|
||||
newColor[n] = topColor[n] * alphaTop +
|
||||
bottomColor[n] * alphaBottom * (1 - alphaTop);
|
||||
}
|
||||
newColor.a = alphaTop + alphaBottom * (1 - alphaTop);
|
||||
return newColor;
|
||||
}
|
||||
*/
|
||||
function mixColors(topColor, bottomColor, topAlpha, bottomAlpha) {
|
||||
var newColor = {},
|
||||
alphaTop = (topAlpha !== undefined ? topAlpha : 1),
|
||||
alphaBottom = (bottomAlpha !== undefined ? bottomAlpha : 1),
|
||||
alpha = alphaTop + alphaBottom * (1 - alphaTop); // 1 - (1 - alphaTop) * (1 - alphaBottom);
|
||||
|
||||
for(var n in topColor) {
|
||||
newColor[n] = (topColor[n] * alphaTop + bottomColor[n] * alphaBottom * (1 - alphaTop)) / alpha;
|
||||
}
|
||||
newColor.a = alpha;
|
||||
return newColor;
|
||||
}
|
||||
|
||||
function getWCAG2Ratio(lum1, lum2) {
|
||||
var ratio = 1;
|
||||
|
||||
if (lum1 >= lum2) {
|
||||
ratio = (lum1 + 0.05) / (lum2 + 0.05);
|
||||
} else {
|
||||
ratio = (lum2 + 0.05) / (lum1 + 0.05);
|
||||
}
|
||||
return Math.round(ratio * 100) / 100;
|
||||
}
|
||||
|
||||
function limitValue(value, min, max) {
|
||||
return (value > max ? max : value < min ? min : value);
|
||||
}
|
||||
})(window);
|
||||
646
colorPicker.css
Normal file
646
colorPicker.css
Normal file
@ -0,0 +1,646 @@
|
||||
/* -------- main app -------- */
|
||||
|
||||
.cp-app {
|
||||
color: #bbb;
|
||||
font-family: "Courier New", Courier, mono; /* "Courier New", */
|
||||
font-size: 12px;
|
||||
line-height: 15px;
|
||||
font-weight: bold;
|
||||
cursor: default;
|
||||
|
||||
width: 412px;
|
||||
height: 323px;
|
||||
background-color: #444;
|
||||
border-radius: 7px;
|
||||
}
|
||||
.S {
|
||||
width: 266px;
|
||||
height: 177px;
|
||||
}
|
||||
.XS {
|
||||
width: 158px;
|
||||
height: 173px;
|
||||
}
|
||||
.XXS {
|
||||
height: 105px;
|
||||
width: 154px;
|
||||
}
|
||||
.no-alpha {
|
||||
height: 308px;
|
||||
}
|
||||
.no-alpha .cp-opacity, .no-alpha .cp-alpha {
|
||||
display: none;
|
||||
}
|
||||
.S.no-alpha { /* IE6 */
|
||||
height: 162px;
|
||||
}
|
||||
.XS.no-alpha {
|
||||
height: 158px;
|
||||
}
|
||||
.XXS.no-alpha {
|
||||
height: 90px;
|
||||
}
|
||||
|
||||
|
||||
.cp-app,
|
||||
.cp-app div { /* reset for all children */
|
||||
border: none;
|
||||
padding: 0;
|
||||
float: none;
|
||||
margin: 0;
|
||||
outline: none;
|
||||
/* to be IE <7 compatible */
|
||||
-moz-box-sizing: content-box;
|
||||
-webkit-box-sizing: content-box;
|
||||
-ms-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
.cp-app div {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
/* -------- images -------- */
|
||||
|
||||
.cp-slds .cp-curm,
|
||||
.cp-panel .cp-disp,
|
||||
.cp-panel .cp-nsarrow,
|
||||
.cp-app .cp-exit,
|
||||
.cp-app .cp-memo-cursor,
|
||||
.cp-app .cp-resize {
|
||||
background-image: url(_icons.png);
|
||||
}
|
||||
.cp-app .do-drag div {
|
||||
cursor: url(_blank.png), auto;
|
||||
}
|
||||
.cp-app .cp-opacity,
|
||||
.cp-memo .cp-raster-bg,
|
||||
.cp-app .cp-raster {
|
||||
background-image: url(_bgs.png);
|
||||
}
|
||||
|
||||
/* -------- left sliders -------- */
|
||||
|
||||
.cp-app .cp-slds {
|
||||
width: 287px;
|
||||
height: 256px;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
overflow: hidden;
|
||||
cursor: crosshair;
|
||||
}
|
||||
.S .cp-slds {
|
||||
width: 143px;
|
||||
height: 128px;
|
||||
left: 9px;
|
||||
top: 9px;
|
||||
}
|
||||
.XS .cp-slds {
|
||||
left: 7px;
|
||||
top: 7px;
|
||||
}
|
||||
.XXS .cp-slds {
|
||||
left: 5px;
|
||||
top: 5px;
|
||||
}
|
||||
|
||||
/* .cp-slds .cp-sldl-1,
|
||||
.cp-slds .cp-sldl-2,
|
||||
.cp-slds .cp-sldl-3,
|
||||
.cp-slds .cp-sldl-4 { */
|
||||
.cp-slds div {
|
||||
width: 256px;
|
||||
height: 256px;
|
||||
left: 0;
|
||||
}
|
||||
.S .cp-sldl-1,
|
||||
.S .cp-sldl-2,
|
||||
.S .cp-sldl-3,
|
||||
.S .cp-sldl-4 {
|
||||
width: 128px;
|
||||
height: 128px;
|
||||
}
|
||||
.XXS .cp-slds,
|
||||
.XXS .cp-slds .cp-sldl-1,
|
||||
.XXS .cp-slds .cp-sldl-2,
|
||||
.XXS .cp-slds .cp-sldl-3,
|
||||
.XXS .cp-slds .cp-sldl-4 {
|
||||
height: 64px;
|
||||
}
|
||||
|
||||
/* -------- right sliders -------- */
|
||||
|
||||
.cp-slds .cp-sldr-1,
|
||||
.cp-slds .cp-sldr-2,
|
||||
.cp-slds .cp-sldr-3,
|
||||
.cp-slds .cp-sldr-4 {
|
||||
width: 31px;
|
||||
/* height: 256px; */
|
||||
left: 256px;
|
||||
cursor: default;
|
||||
}
|
||||
.S .cp-sldr-1,
|
||||
.S .cp-sldr-2,
|
||||
.S .cp-sldr-3,
|
||||
.S .cp-sldr-4 {
|
||||
width: 15px;
|
||||
height: 128px;
|
||||
left: 128px;
|
||||
}
|
||||
|
||||
/* -------- Cursors -------- */
|
||||
|
||||
.cp-slds .cp-curm {
|
||||
margin: -5px;
|
||||
width: 11px;
|
||||
height: 11px;
|
||||
background-position: -36px -30px;
|
||||
/* cursor: crosshair; */
|
||||
}
|
||||
.light .cp-curm {
|
||||
background-position: -7px -30px;
|
||||
}
|
||||
|
||||
.cp-slds .cp-curl,
|
||||
.cp-slds .cp-curr {
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
margin: -3px -4px;
|
||||
border: 4px solid;
|
||||
background-image: none;
|
||||
cursor: default;
|
||||
left: auto; /* due to .cp-slds div */
|
||||
}
|
||||
|
||||
.cp-slds .cp-curl,
|
||||
.cp-app .cp-slds .cp-curl-dark,
|
||||
.hue-dark div.cp-curl {
|
||||
right: 27px;
|
||||
border-color: transparent transparent transparent #fff;
|
||||
}
|
||||
.light .cp-curl,
|
||||
.cp-app .cp-slds .cp-curl-light,
|
||||
.hue-light .cp-curl {
|
||||
border-color: transparent transparent transparent #000;
|
||||
}
|
||||
.S .cp-slds .cp-curl,
|
||||
.S .cp-slds .cp-curr {
|
||||
border-width: 3px;
|
||||
}
|
||||
.S .cp-slds .cp-curl-light,
|
||||
.S .cp-slds .cp-curl {
|
||||
right: 13px;
|
||||
}
|
||||
|
||||
.cp-slds .cp-curr,
|
||||
.cp-app .cp-slds .cp-curr-dark {
|
||||
right: 4px;
|
||||
border-color: transparent #fff transparent transparent;
|
||||
}
|
||||
.light .cp-curr,
|
||||
.cp-app .cp-slds .cp-curr-light {
|
||||
border-color: transparent #000 transparent transparent;
|
||||
}
|
||||
|
||||
/* -------- alpha bar -------- */
|
||||
|
||||
.cp-app .cp-opacity {
|
||||
bottom: 44px;
|
||||
left: 10px;
|
||||
height: 10px;
|
||||
width: 287px;
|
||||
background-position: 0 -87px;
|
||||
}
|
||||
.S .cp-opacity {
|
||||
bottom: 27px;
|
||||
left: 9px;
|
||||
width: 143px;
|
||||
background-position: 0 -100px;
|
||||
}
|
||||
.XS .cp-opacity {
|
||||
left: 7px;
|
||||
bottom: 25px;
|
||||
}
|
||||
.XXS .cp-opacity {
|
||||
left: 5px;
|
||||
bottom: 23px;
|
||||
}
|
||||
.cp-opacity div {
|
||||
width: 100%;
|
||||
height: 16px;
|
||||
margin-top: -3px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.cp-opacity .cp-opacity-slider {
|
||||
margin: 0 -4px;
|
||||
width: 0px;
|
||||
height: 8px; /* IE7 */
|
||||
|
||||
border: 4px solid #aaa;
|
||||
border-color: #eee transparent;
|
||||
}
|
||||
|
||||
/* -------- color memory -------- */
|
||||
|
||||
.cp-app .cp-memo {
|
||||
bottom: 10px;
|
||||
left: 10px;
|
||||
width: 288px;
|
||||
height: 31px;
|
||||
background-color: #fff;
|
||||
}
|
||||
.S .cp-memo {
|
||||
height: 15px;
|
||||
width: 144px;
|
||||
left: 9px;
|
||||
bottom: 9px;
|
||||
}
|
||||
.XS .cp-memo {
|
||||
left: 7px;
|
||||
bottom: 7px;
|
||||
}
|
||||
.XXS .cp-memo {
|
||||
left: 5px;
|
||||
bottom: 5px;
|
||||
}
|
||||
.cp-memo div {
|
||||
position: relative;
|
||||
float: left;
|
||||
width: 31px;
|
||||
height: 31px;
|
||||
margin-right: 1px;
|
||||
}
|
||||
.S .cp-memo div {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
}
|
||||
.cp-app .cp-raster, /* also for .cp-ctrl section */
|
||||
.cp-memo .cp-raster-bg,
|
||||
.S .cp-memo .cp-raster,
|
||||
.S .cp-memo .cp-raster-bg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.S .cp-memo .cp-raster-bg {
|
||||
background-position: 0 -31px;
|
||||
}
|
||||
.cp-app .cp-raster {
|
||||
background-position: 0px -49px;
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
|
||||
filter: alpha(opacity=20);
|
||||
-moz-opacity: 0.2;
|
||||
-khtml-opacity: 0.2;
|
||||
opacity: .2;
|
||||
}
|
||||
.alpha-bg-b .cp-memo {
|
||||
background-color: #333;
|
||||
}
|
||||
.alpha-bg-b .cp-raster {
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
|
||||
filter: alpha(opacity=100);
|
||||
-moz-opacity: 1;
|
||||
-khtml-opacity: 1;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.cp-memo .cp-memo-cursor {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
background-position: -26px -87px;
|
||||
}
|
||||
.cp-app .light .cp-memo-cursor {
|
||||
background-position: 3px -87px;
|
||||
}
|
||||
.S .cp-memo-cursor {
|
||||
background-position: -34px -95px;
|
||||
}
|
||||
.S .light .cp-memo-cursor {
|
||||
background-position: -5px -95px;
|
||||
}
|
||||
|
||||
/* -------- panel -------- */
|
||||
|
||||
.cp-app .cp-panel {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
bottom: 10px;
|
||||
width: 96px;
|
||||
background-color: #333;
|
||||
border: 1px solid;
|
||||
border-color: #222 #555 #555 #222;
|
||||
overflow: hidden;
|
||||
}
|
||||
.S .cp-panel {
|
||||
top: 9px;
|
||||
right: 9px;
|
||||
bottom: 9px;
|
||||
}
|
||||
.XS .cp-panel {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.cp-panel div {
|
||||
position: relative;
|
||||
/*overflow: visible;*/ /* especially for .cp-disp */
|
||||
}
|
||||
|
||||
/* -------- panel sections -------- */
|
||||
|
||||
.cp-panel .cp-hsv, /* not very happy with this ... */
|
||||
.cp-panel .cp-hsl,
|
||||
.cp-panel .cp-rgb,
|
||||
.cp-panel .cp-cmyk,
|
||||
.cp-panel .cp-Lab,
|
||||
.cp-panel .cp-alpha,
|
||||
.no-alpha .cp-panel .cp-HEX,
|
||||
.cp-panel .cp-HEX {
|
||||
width: 86px;
|
||||
margin: -1px 0 1px 4px;
|
||||
padding: 1px 0 3px;
|
||||
border-top: 1px solid #444;
|
||||
border-bottom: 1px solid #222;
|
||||
float: left;
|
||||
}
|
||||
.cp-panel .cp-hsv,
|
||||
.cp-panel .cp-hsl {
|
||||
padding-top: 2px;
|
||||
}
|
||||
.S .cp-hsv,
|
||||
.S .cp-hsl {
|
||||
padding-top: 1px;
|
||||
}
|
||||
.cp-panel .cp-HEX {
|
||||
border-bottom: none; /* 1px solid #333; */
|
||||
border-top: 0;
|
||||
margin-top: -4px;
|
||||
padding-top: 0;
|
||||
}
|
||||
.no-alpha .cp-panel .cp-HEX {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.cp-panel .cp-alpha {
|
||||
border-bottom: none;
|
||||
}
|
||||
.S .rgb-r .cp-hsv,
|
||||
.S .rgb-g .cp-hsv,
|
||||
.S .rgb-b .cp-hsv,
|
||||
.S .rgb-r .cp-hsl,
|
||||
.S .rgb-g .cp-hsl,
|
||||
.S .rgb-b .cp-hsl,
|
||||
.S .hsv-h .cp-rgb,
|
||||
.S .hsv-s .cp-rgb,
|
||||
.S .hsv-v .cp-rgb,
|
||||
.S .hsl-h .cp-rgb,
|
||||
.S .hsl-s .cp-rgb,
|
||||
.S .hsl-l .cp-rgb,
|
||||
.S .cp-cmyk,
|
||||
.S .cp-Lab {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* -------- panel sections' elements -------- */
|
||||
|
||||
.cp-panel .cp-butt,
|
||||
.cp-panel .cp-labl {
|
||||
float: left;
|
||||
width: 16px; width: 14px; /* IE 7 */
|
||||
height: 16px; height: 14px; /* IE 7 */
|
||||
margin-top: 2px;
|
||||
text-align: center;
|
||||
border: 1px solid;
|
||||
}
|
||||
.cp-panel .cp-butt {
|
||||
border-color: #555 #222 #222 #555;
|
||||
}
|
||||
.cp-panel .cp-butt:active {
|
||||
background-color: #444;
|
||||
}
|
||||
.cp-panel .cp-labl {
|
||||
border-color: transparent;
|
||||
}
|
||||
.cp-panel .Lab-mode,
|
||||
.cp-panel .cmyk-mode,
|
||||
.cp-panel .hsv-mode,
|
||||
.cp-panel .hsl-mode {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0; /* IE 7 */
|
||||
height: 52px;
|
||||
}
|
||||
.cp-panel .cmyk-mode {
|
||||
height: 70px;
|
||||
}
|
||||
.hsl-h .hsl-h-labl,
|
||||
.hsl-s .hsl-s-labl,
|
||||
.hsl-l .hsl-l-labl,
|
||||
.hsv-h .hsv-h-labl,
|
||||
.hsv-s .hsv-s-labl,
|
||||
.hsv-v .hsv-v-labl {
|
||||
color: #FF9900;
|
||||
}
|
||||
|
||||
.cp-panel .cmyk-mode,
|
||||
.cp-panel .hsv-mode,
|
||||
|
||||
.rgb-r .rgb-r-butt, .rgb-g .rgb-g-butt, .rgb-b .rgb-b-butt,
|
||||
.hsv-h .hsv-h-butt, .hsv-s .hsv-s-butt, .hsv-v .hsv-v-butt,
|
||||
.hsl-h .hsl-h-butt, .hsl-s .hsl-s-butt, .hsl-l .hsl-l-butt,
|
||||
|
||||
.cp-panel .rgb-r-labl,
|
||||
.cp-panel .rgb-g-labl,
|
||||
.cp-panel .rgb-b-labl,
|
||||
|
||||
.cp-panel .alpha-butt,
|
||||
.cp-panel .HEX-butt,
|
||||
.cp-panel .Lab-x-labl/*,
|
||||
.cp-panel .alpha-labl*/ { /* ON */
|
||||
background-color: #444;
|
||||
border-color: #222 #555 #555 #222;
|
||||
}
|
||||
|
||||
.no-rgb-r .rgb-r-labl,
|
||||
.no-rgb-g .rgb-g-labl,
|
||||
.no-rgb-b .rgb-b-labl,
|
||||
|
||||
.mute-alpha .alpha-butt,
|
||||
.no-HEX .HEX-butt,
|
||||
.cmy-only .Lab-x-labl/*,
|
||||
.alpha-bg .alpha-labl*/ { /* OFF */
|
||||
background-color: #333;
|
||||
border-color: #555 #222 #222 #555;
|
||||
}
|
||||
|
||||
.Lab-x-disp,
|
||||
.cmy-only .cmyk-k-disp,
|
||||
.cmy-only .cmyk-k-butt {
|
||||
visibility: hidden;
|
||||
}
|
||||
.cp-panel .HEX-disp {
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
.cp-panel .cp-disp {
|
||||
float: left;
|
||||
width: 50px; width: 48px; /* IE 7 */
|
||||
height: 16px; height: 14px; /* IE 7 */
|
||||
margin: 2px 2px 0;
|
||||
cursor: text;
|
||||
text-align: left;
|
||||
text-indent: 3px;
|
||||
border: 1px solid;
|
||||
border-color: #222 #555 #555 #222;
|
||||
}
|
||||
.cp-app .cp-nsarrow {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -13px;
|
||||
width: 8px;
|
||||
height: 16px;
|
||||
background-position: -87px -23px;
|
||||
display: none;
|
||||
}
|
||||
.cp-app .start-change .cp-nsarrow {
|
||||
display: block;
|
||||
}
|
||||
.cp-app .do-change .cp-nsarrow {
|
||||
display: block;
|
||||
background-position: -87px -36px;
|
||||
}
|
||||
.do-change .cp-disp {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.cp-panel .cp-hide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* -------- controller color/contrast bars -------- */
|
||||
|
||||
.cp-panel .cp-cont,
|
||||
.cp-panel .cp-cold {
|
||||
position: absolute;
|
||||
top: -5px;
|
||||
left: 0; /* IE7 */
|
||||
height: 5px; height: 3px; /* IE7 */
|
||||
border: 1px solid #333;
|
||||
}
|
||||
.cp-panel .cp-cold {
|
||||
background-color: #c00;
|
||||
z-index: 1;
|
||||
}
|
||||
.cp-panel .cp-cont {
|
||||
margin-right: -1px;
|
||||
z-index: 2;
|
||||
}
|
||||
.cp-panel .contrast .cp-cont {
|
||||
background-color: #ccc;
|
||||
z-index: 1;
|
||||
}
|
||||
.cp-panel .orange .cp-cold {
|
||||
background-color: #FF9900;
|
||||
}
|
||||
.cp-panel .green .cp-cold {
|
||||
background-color: #44DD00;
|
||||
}
|
||||
|
||||
/* -------- controller buttons -------- */
|
||||
|
||||
.cp-panel .cp-ctrl {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%; /* IE7 */
|
||||
/* overflow: visible; */
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.alpha-bg-b .cp-ctrl,
|
||||
.cp-panel .cp-bres,
|
||||
.cp-panel .cp-bsav {
|
||||
background-color: #333;
|
||||
}
|
||||
|
||||
.cp-panel .cp-col1,
|
||||
.cp-panel .cp-col2,
|
||||
.cp-panel .cp-bres,
|
||||
.cp-panel .cp-bsav {
|
||||
border: 1px solid;
|
||||
border-color: #555 #222 #222 #555;
|
||||
float: left;
|
||||
width: 47px; width: 46px; /* IE7 */
|
||||
line-height: 28px;
|
||||
text-align: center;
|
||||
top: 0;
|
||||
}
|
||||
.cp-panel div div {
|
||||
height: 100%; /* IE7 */
|
||||
}
|
||||
.S .cp-ctrl div {
|
||||
line-height: 25px;
|
||||
}
|
||||
.S .cp-panel .cp-bres,
|
||||
.S .cp-panel .cp-bsav {
|
||||
line-height: 26px;
|
||||
}
|
||||
|
||||
/* -------- app controls -------- */
|
||||
|
||||
.cp-app .cp-exit,
|
||||
.cp-app .cp-resize {
|
||||
right: 3px;
|
||||
top: 3px;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
background-position: 0 -52px;
|
||||
}
|
||||
.cp-app .cp-resize {
|
||||
top: auto;
|
||||
bottom: 3px;
|
||||
background-position: -15px -52px;
|
||||
cursor: nwse-resize;
|
||||
}
|
||||
|
||||
.S .cp-exit {
|
||||
background-position: 1px -52px;
|
||||
}
|
||||
.XS .cp-resize,
|
||||
.XS .cp-exit {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
right: 0;
|
||||
background-image: none;
|
||||
}
|
||||
.XS .cp-exit {
|
||||
top: 0;
|
||||
}
|
||||
.XS .cp-resize {
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.cp-app .cp-resizer,
|
||||
.cp-app .cp-resizer div {
|
||||
position: absolute;
|
||||
border: 1px solid #888;
|
||||
top: -1px;
|
||||
right: -1px;
|
||||
bottom: -1px;
|
||||
left: -1px;
|
||||
z-index: 2; /* overwrites: .cp-panel .cp-cont, .cp-panel .cp-cold */
|
||||
display: none;
|
||||
cursor: nwse-resize;
|
||||
}
|
||||
.cp-app .cp-resizer div {
|
||||
border: 1px dashed #333;
|
||||
background-color: #bbb;
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
|
||||
filter: alpha(opacity=30);
|
||||
-moz-opacity: 0.3;
|
||||
-khtml-opacity: 0.3;
|
||||
opacity: .30;
|
||||
display: block;
|
||||
}
|
||||
30
colorPicker.data.js
Normal file
30
colorPicker.data.js
Normal file
File diff suppressed because one or more lines are too long
397
colorPicker.dev.js
Normal file
397
colorPicker.dev.js
Normal file
@ -0,0 +1,397 @@
|
||||
;(function(window, undefined){
|
||||
"use strict"
|
||||
|
||||
/* ------------ Compress HTML ------------ */
|
||||
var display = document.getElementById('displayHTML'),
|
||||
cp = document.body.children[0],
|
||||
html = cp.outerHTML,
|
||||
HTML = [];
|
||||
// console.log(html)
|
||||
html = html.replace(/\t*\n*/g, '').
|
||||
replace(/<div class="/g, '^').
|
||||
replace(/<div>/g, '|').
|
||||
replace(/disp/g, '~').
|
||||
replace(/butt/g, 'ß').
|
||||
replace(/labl/g, '@').
|
||||
replace(/<\/div>/g, '$').
|
||||
replace(/cp-/g, '§');
|
||||
|
||||
for (var n = 0, len = html.length; n < len; n += !n ? 95 : 100) {
|
||||
HTML.push('\'' + html.substr(n, !n ? 95 : 100));
|
||||
}
|
||||
|
||||
html = "_html = (" + HTML.join("' +\n\t") + "').\n\t" +
|
||||
"replace(/\\^/g, '<div class=\"').\n\t" +
|
||||
"replace(/\\$/g, '</div>').\n\t" +
|
||||
"replace(/~/g, 'disp').\n\t" +
|
||||
"replace(/ß/g, 'butt').\n\t" +
|
||||
"replace(/@/g, 'labl').\n\t" +
|
||||
"replace(/\\|/g, '<div>')";
|
||||
|
||||
display.firstChild.data = html;
|
||||
|
||||
|
||||
/* ------------ Compress CSS ------------ */
|
||||
var display = document.getElementById('displayCSS'),
|
||||
css = document.getElementsByTagName('link')[1],
|
||||
rules = css.sheet.rules,
|
||||
path = css.href.split('/'),
|
||||
CSS = [],
|
||||
bgPosCSS = {},
|
||||
// CSSSplit = [],
|
||||
reUnion = '',
|
||||
txt = '', key = '', val = '', end = 0, start = 0;
|
||||
|
||||
path.pop();
|
||||
path = path.join('/') + '/';
|
||||
|
||||
for (var n = 0, len = rules.length; n < len; n++) {
|
||||
txt = rules[n].cssText;
|
||||
if (/background-position/.test(txt)) {
|
||||
// .hsl-l div.cp-sldl-1 {background-position: -256px 0}
|
||||
end = txt.indexOf(' { ');
|
||||
val = txt.substr(0, end); // good now
|
||||
|
||||
start = txt.indexOf(' }');
|
||||
key = txt.substr(end + 24, start - end - 25);
|
||||
|
||||
if (!bgPosCSS[key]) {
|
||||
bgPosCSS[key] = [val];
|
||||
} else {
|
||||
bgPosCSS[key].push(val);
|
||||
}
|
||||
} else {
|
||||
CSS.push(txt.replace(new RegExp(path, 'g'), ''));
|
||||
}
|
||||
}
|
||||
|
||||
for (var n in bgPosCSS) {
|
||||
// console.log(bgPosCSS[n].join(',') + '{background-position:' + n + '}');
|
||||
CSS.push(
|
||||
bgPosCSS[n].join(',') + '{background-position:' + n + '}'
|
||||
);
|
||||
}
|
||||
|
||||
css = CSS.join(''). // recycle css
|
||||
replace(/cp-/g, '§').
|
||||
replace(/\: /g, ':').
|
||||
replace(/ \{ /g, '{').
|
||||
replace(/; \}/g, '}').
|
||||
replace(/, \./g, ',.').
|
||||
replace(/:0px /g, ':0 ').
|
||||
replace(/ 0px\}/g, ' 0}').
|
||||
replace(/rgb\((\d+), (\d+), (\d+)\)/g, function($1, $2, $3, $4){
|
||||
var hex = ('#' +
|
||||
($2 < 16 ? '0' : '') + (+$2).toString(16) +
|
||||
($3 < 16 ? '0' : '') + (+$3).toString(16) +
|
||||
($4 < 16 ? '0' : '') + (+$4).toString(16)
|
||||
)
|
||||
if ($2 === $3 && $3 === $4) {
|
||||
hex = hex.substring(0, 4);
|
||||
} else if (hex[1] === hex[2] && hex[3] === hex[4] && hex[5] === hex[6]) {
|
||||
hex = '#' + hex[1] + hex[3] + hex[5];
|
||||
}
|
||||
return hex;
|
||||
}).
|
||||
|
||||
replace(/ .\§sldl-/g, '^').
|
||||
replace(/ .\§sldr-/g, '?').
|
||||
replace(/ .no-rgb-/g, '~').
|
||||
|
||||
replace(/\.rgb-/g, 'ä').
|
||||
replace(/\.hsv-/g, 'ö').
|
||||
replace(/\.hsl-/g, 'ü').
|
||||
|
||||
replace(/background/g, '@').
|
||||
replace(/-position\:/g, '|').
|
||||
|
||||
replace(/,\.S /g, 'Ä').
|
||||
replace(/px}/g, 'Ö').
|
||||
replace(/\{@\|0 /g, 'Ü'); // !!!
|
||||
|
||||
|
||||
reUnion =
|
||||
"replace(/Ü/g, '{@|0 ').\n\t" +
|
||||
"replace(/Ö/g, 'px}').\n\t" +
|
||||
"replace(/Ä/g, ',.S ').\n\t" +
|
||||
|
||||
"replace(/\\|/g, '-position:').\n\t" +
|
||||
"replace(/@/g, 'background').\n\t" +
|
||||
|
||||
"replace(/ü/g, '.hsl-').\n\t" +
|
||||
"replace(/ö/g, '.hsv-').\n\t" +
|
||||
"replace(/ä/g, '.rgb-').\n\t" +
|
||||
|
||||
"replace(/~/g, ' .no-rgb-}').\n\t" +
|
||||
"replace(/\\?/g, ' .§sldr-').\n\t" +
|
||||
"replace(/\\^/g, ' .§sldl-')\n\t";
|
||||
|
||||
|
||||
// CSSSplit = css.split('.thisIsTheBreakPoint{}');
|
||||
// --------------
|
||||
// css = CSSSplit[0]; // first half
|
||||
CSS = [];
|
||||
|
||||
for (var n = 0, len = css.length; n < len; n += !n ? 92 : 100) {
|
||||
CSS.push('\'' + css.substr(n, !n ? 92 : 100));
|
||||
}
|
||||
var cssMain = "_cssFunc = (" + CSS.join("' +\n\t") + "').\n\t" + reUnion;
|
||||
|
||||
// --------------
|
||||
// css = CSSSplit[1]; // second half
|
||||
// CSS = [];
|
||||
// for (var n = 0, len = css.length; n < len; n += !n ? 92 : 100) {
|
||||
// CSS.push('\'' + css.substr(n, !n ? 92 : 100));
|
||||
// }
|
||||
// cssMain += "\n\n\n_cssFunc = (" + CSS.join("' +\n\t") + "').\n\t" + reUnion;
|
||||
|
||||
|
||||
|
||||
display.firstChild.data = cssMain;
|
||||
|
||||
/* --------------------- MAIN CSS ---------------------------- */
|
||||
|
||||
var display = document.getElementById('displayCSS'),
|
||||
css = document.getElementsByTagName('link')[0],
|
||||
rules = css.sheet.rules,
|
||||
path = css.href.split('/'),
|
||||
CSS = [],
|
||||
bgPosCSS = {},
|
||||
// CSSSplit = [],
|
||||
reUnion = '',
|
||||
txt = '', key = '', val = '', end = 0, start = 0;
|
||||
|
||||
path.pop();
|
||||
path = path.join('/') + '/';
|
||||
|
||||
for (var n = 0, len = rules.length; n < len; n++) {
|
||||
txt = rules[n].cssText;
|
||||
CSS.push(txt.replace(new RegExp(path, 'g'), ''));
|
||||
}
|
||||
|
||||
|
||||
css = CSS.join(''). // recycle css
|
||||
replace(/cp-/g, '§').
|
||||
replace(/\: /g, ':').
|
||||
replace(/ \{ /g, '{').
|
||||
replace(/; /g, ';').
|
||||
replace(/;\}/g, '}').
|
||||
replace(/, \./g, ',.').
|
||||
replace(/:0px /g, ':0 ').
|
||||
replace(/ 0px\}/g, ' 0}').
|
||||
replace(/rgb\((\d+), (\d+), (\d+)\)/g, function($1, $2, $3, $4){
|
||||
var hex = ('#' +
|
||||
($2 < 16 ? '0' : '') + (+$2).toString(16) +
|
||||
($3 < 16 ? '0' : '') + (+$3).toString(16) +
|
||||
($4 < 16 ? '0' : '') + (+$4).toString(16)
|
||||
)
|
||||
if ($2 === $3 && $3 === $4) {
|
||||
hex = hex.substring(0, 4);
|
||||
} else if (hex[1] === hex[2] && hex[3] === hex[4] && hex[5] === hex[6]) {
|
||||
hex = '#' + hex[1] + hex[3] + hex[5];
|
||||
}
|
||||
return hex;
|
||||
}).
|
||||
|
||||
replace(/\.§sld/g, '^').
|
||||
replace(/border\-/g, '?').
|
||||
replace(/width\:/g, '~').
|
||||
replace(/transparent/g, '†').
|
||||
replace(/\.§memo/g, 'ø').
|
||||
|
||||
replace(/height\:/g, 'ä').
|
||||
replace(/background\-/g, 'ö').
|
||||
// replace(/position\:/g, 'ü').
|
||||
|
||||
replace(/color\:/g, '@').
|
||||
replace(/position\:/g, '|').
|
||||
replace(/px\;/g, '¥').
|
||||
replace(/\.§panel \./g, '«').
|
||||
replace(/\.§app/g, '∑').
|
||||
|
||||
//replace(/color\:/g, 'Ä').
|
||||
replace(/left\}/g, 'Ö').
|
||||
replace(/right/g, 'Ü'); // !!!
|
||||
|
||||
// /.§slds/ 24
|
||||
// /border-/ 33
|
||||
// /width:/ 36
|
||||
// /height:/ 29
|
||||
// /background-/ 33
|
||||
// /position:/ 28
|
||||
// /color-/ 31
|
||||
// /left/ 25
|
||||
// /right/ 14
|
||||
// /px;/ 108
|
||||
// /.§panel ./ 45
|
||||
// /.§app/ 27 .§memo
|
||||
|
||||
reUnion =
|
||||
"replace(/Ü/g, 'right').\n\t" +
|
||||
"replace(/Ö/g, 'left}').\n\t" +
|
||||
//"replace(/Ä/g, ',color:').\n\t" +
|
||||
|
||||
"replace(/∑/g, '.§app').\n\t" +
|
||||
"replace(/«/g, '.§panel .').\n\t" +
|
||||
"replace(/¥/g, 'px;').\n\t" +
|
||||
"replace(/\\|/g, 'position:').\n\t" +
|
||||
"replace(/@/g, 'color:').\n\t" +
|
||||
|
||||
// "replace(/ü/g, 'position:').\n\t" +
|
||||
"replace(/ö/g, 'background-').\n\t" +
|
||||
"replace(/ä/g, 'height:').\n\t" +
|
||||
|
||||
"replace(/ø/g, '.§memo').\n\t" +
|
||||
"replace(/†/g, 'transparent').\n\t" +
|
||||
"replace(/\\~/g, 'width:').\n\t" +
|
||||
"replace(/\\?/g, 'border-').\n\t" +
|
||||
"replace(/\\^/g, '.§sld')\n\t";
|
||||
|
||||
|
||||
// CSSSplit = css.split('.thisIsTheBreakPoint{}');
|
||||
// --------------
|
||||
// css = CSSSplit[0]; // first half
|
||||
CSS = [];
|
||||
|
||||
for (var n = 0, len = css.length; n < len; n += !n ? 92 : 100) {
|
||||
CSS.push('\'' + css.substr(n, !n ? 92 : 100));
|
||||
}
|
||||
cssMain = "\n\n_cssMain = (" + CSS.join("' +\n\t") + "').\n\t" + reUnion;
|
||||
|
||||
|
||||
display.firstChild.data += cssMain;
|
||||
|
||||
|
||||
/* ------------ Compress images to BASE64 ------------ */
|
||||
// var canvas = document.createElement('canvas'),
|
||||
// ctx = canvas.getContext('2d'),
|
||||
// myimage = new Image(),
|
||||
// IMG64 = '',
|
||||
// images = ['_horizontal.png', '_vertical.png', '_patches.png'],
|
||||
// counter = 0,
|
||||
// encode = function(callback) {
|
||||
// var IMG = [];
|
||||
|
||||
// canvas.width = myimage.width;
|
||||
// canvas.height = myimage.height;
|
||||
|
||||
// ctx.drawImage(myimage, 0, 0);
|
||||
// IMG64 = canvas.toDataURL("image/png"),
|
||||
// imgName = images[counter];
|
||||
|
||||
// for (var n = 0, len = IMG64.length; n < len; n += !n ? 100 - imgName.length + 2 : 100) {
|
||||
// IMG.push('\'' + IMG64.substr(n, !n ? 100 - imgName.length + 2 : 100));
|
||||
// }
|
||||
// IMG = IMG.join("' +\n\t") + "'";
|
||||
// // display.firstChild.data += "\n\n\n" + imgName.replace('.p', 'P') + ' = ' + IMG;
|
||||
// if (images[++counter]) {
|
||||
// myimage.src = images[counter];
|
||||
// }
|
||||
// };
|
||||
|
||||
// myimage.onload = function() {
|
||||
// encode();
|
||||
// };
|
||||
// myimage.src = images[counter];
|
||||
|
||||
|
||||
/*
|
||||
BASE64 conversion via canvas turns out to be bigger than expected..
|
||||
had to upload them via http://webcodertools.com/imagetobase64converter/
|
||||
*/
|
||||
var images = {
|
||||
'_horizontalPng' : 'iVBORw0KGgoAAAANSUhEUgAABIAAAAABCAYAAACmC9U0AAABT0lEQVR4Xu2S3Y6CMBCFhyqIsjGBO1/B9/F5DC/pK3DHhVkUgc7Zqus2DVlGU/cnQZKTjznttNPJBABA149HyRf1iN//4mIBCg0jV4In+j9xJiuihly1V/Z9X88v//kNeDXVvyO/lK+IPR76B019+1Riab3H1zkmeqerKnL+Bzwxx6PAgZxaSQU8vB62T28pxcQeRQ2sHw6GxCOWHvP78zwHAARBABOfdYtd30rwxXOEPDF+dj2+91r6vV/id3k+/brrXmaGUkqKhX3i+ffSt16HQ/dorTGZTHrs7ev7Tl7XdZhOpzc651nfsm1bRFF0YRiGaJoGs9nsQuN/xafTCXEco65rzOdzHI9HJEmCqqqwXC6x3++RZRnKssRqtUJRFFiv19jtdthutyAi5Hl+Jo9VZg7+7f3yXuvZf5c3KaXYzByb+WIzO5ymKW82G/0BNcFhO/tOuuMAAAAASUVORK5CYII=',
|
||||
'_verticalPng' : 'iVBORw0KGgoAAAANSUhEUgAAAAEAABfACAYAAABn2KvYAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABHtJREFUeNrtnN9SqzAQxpOF1to6zuiVvoI+j6/gva/lA/kKeqUzjtX+QTi7SzSYBg49xdIzfL34+e1usoQQklCnmLwoCjImNwDQA2xRGMqNAYB+gPEH9IdCgIUA6Aem0P1fLoMQAPYNHYDoCKAv8OMHFgKgX2AjDPQDXn4t1l+gt/1fId//yWgE/hUJ+mAn8EyY5wCwXxhrbaHzn8E9iPlv79DdHxXTqciZ4KROnXRVZMF/6U2OPhcEavtAbZH1SM7wRDD7VoHZItCiyEQf4t6+MW9UOxaZybmdCGKqNrB9Eb5SfMg3wTyiagMtigTmWofiSDCOYNTSNz6sLDIoaCU9GWDd0tdhoMMsRm+r8U/EfB0GfjmLXiqzimDd0tdhoLMsI7la45+I+ToM/HIW0kfGVQTrlr7tA91kaUr//fxrKo8jUFB7VAn6AKpHJf+EKwAAAIYD/f7F7/8MVgMo7P+gBqDKr57Lf72V8x8AAMDgYIuvH4EAAAAMDQX6AACAQcI9GGMjDADA4MA/P2KlP8IEAAAYFCz6AACAgaLA8y8AAIN+CMYXoQAADA7u/UPYCAMAMDjI7z9S+SdwDFQX2C9Gh9GMEOWriz8/Pw1lWQZsi/L3R4czzP678Ve+P8f9nCv/C7hwLq99ah8NfKrU15zPB5pVcwtiJt9qGy0IfEE+jQa+Fn0VtI/fkxUPqBlEfRENeF+tqUpbGpi1iu8epwJzvV5XA4GpWC6XGz7F+/u766EgwJ+ckiTJKU3TnI6OjnI6OzvLZf6zMggt3dzckPhIoiTlSGpQ+eEsVegdz0fbCCi4fRs+Po+4yWdeDXiT+6pBSTeHple1pkz3FZ+avpyavoiPxgLN0B7yprY08PlyQTTm0+PWmkH7ynedNKraar4F/lRj1WpTtYh+ozL/cY2sAvZl0gcbZm0gSLBLvkxGoaogiy/HDXemQk2t5pUm8OAhH8/HH6e0mkJ9q9XKKQXfb07xfZnJbZrRxcVFVt6/t7e3Kc1ms5RGo1Eq5VIZuyl9fHw4k/M5xYeoKj64A7eqCt1ZeqWFVSl8NV9OTV3fmvP5qE9VmzSoEcsXpArK1UHen/hZbgL53BZSdyEXalGau/hU8TEW0u3VcoFPy3EDFrTgT+njydeZ0+l0UV7fu7u7iVzziQQmUm4iqRw4n/NxMxw4s/Mp1NSALxf4NEtQ10cjMDwSl+b+/j6hp6enVGb+jUvrn05iKobm6PboOt8vPISY5Pr6OqGXlxe3fOokoGtAbMUJZmqvYmaLQDP+sdrecOjtO/SXeH69P8Imutm5urqy9PDwYOny8tLS4+OjpfPzc0vPz8+WTk9PLb2+vlpZbCzN53NLx8fHVtYZS5PJxMoEZWWqsjKULY3HYytTi1Pex5OMldXKRVXxuLcy/20onmms3BBOxcr5qCrZtsrd45SPel8sGlOxGoGy0neynQ6VL9fsa1YtWlCrtj9G83G7PjdVush5n5q1iJWLZW6u21a1bUvbVnVzlru0pe3RdmlV1/23fZtbZv4Dx+7FBypx77kAAAAASUVORK5CYII=',
|
||||
'_patchesPng' : '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',
|
||||
'_iconsPng' : 'iVBORw0KGgoAAAANSUhEUgAAAGEAAABDCAMAAAC7vJusAAAAkFBMVEUAAAAvLy9ERERubm7///8AAAD///9EREREREREREREREQAAAD///8AAAD///8AAAD///8AAAD///8AAAD///8AAAD///8AAAD///8AAAD///8AAAD///8cHBwkJCQnJycoKCgpKSkqKiouLi4vLy8/Pz9AQEBCQkJDQ0NdXV1ubm58fHykpKRERERVVVUzMzPx7Ab+AAAAHXRSTlMAAAAAAAQEBQ4QGR4eIyMtLUVFVVVqapKSnJy7u9JKTggAAAFUSURBVHja7dXbUoMwEAbgSICqLYeW88F6KIogqe//dpoYZ0W4AXbv8g9TwkxmvtndZMrEwlw/F8YIRjCCEYxgBCOsFmzqGMEI28J5zzmt0Pc9rdDL0NYgMxIYC5KiKpKAzZphWtZlGm4SjlnkOV6UHeeEUx77rh/npw1dCrI9k9lnwUwF+UG9D3m4ftJJxH4SJdPtaawXcbr+tBaeFrxiur309cIv19+4ytGCU0031a5euPVigLYGqjlAqM4ShOQ+QAYQUO80AMMAAkUGGfMfR9Ul+kmvPq2QGxXKOQBAKdjUgk0t2NiCGEVP+rHT3/iCUMBT90YrPMsKsIWP3x/VolaonJEETchHCS8AYAmaUICQQwaAQnjoXgHAES7jLkEFaHO4bdq/k25HAIpgWY34FwAE5xjCffM+D2DV8B0gRsAZT7hr5gE8wdrJcU+CJqhcqQD7Cx5L7Ph4WnrKAAAAAElFTkSuQmCC',
|
||||
'_bgsPng' : 'iVBORw0KGgoAAAANSUhEUgAAASAAAABvCAYAAABM+h2NAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABORJREFUeNrs3VtTW1UYBuCEcxAI4YydWqTWdqr1V7T/2QsvvPDCCy9qjxZbamsrhZIQUHsCEtfafpmJe8qFjpUxfZ4Zuvt2feydJvAOARZUut1u5bRerl692nV913f99/f6QxWAU6KAAAUEKCAABQQoIAAFBCggAAUEKCAABQQoIAAFBCggAAUEKCAABQQoIEABASggQAEBKCBAAQEoIEABASggQAEBKCBAAQEoIGBQC+jatWvd07zxrv9+Xx8fAQEoIEABASggQAEBKCBAAQEoIEABAQoIQAEBCghAAQEKCEABAQOk2u36kS6AAgLetwJKL29toFRM1be+QrVq3rx58//KvM8BAadGAQEKCFBAAAoIGHwnfhneZ+/Nmzf/LufzrI+AAE/BAAUEoIAABQTwztgLZt68eXvBAE/BABQQoIAAFBAweOwFM2/evL1ggKdgAAoIUEAACggYPPaCmTdv3l4wwFMwAAUEKCAABQQMHnvBzJs3by8Y4CkYgAICFBCAAgIGz4lfBQNQQMDgFlCtVisaaHV1tThubW1VInciD0U+ysdnz54N5+PKysphOnRTHsvHlN9EHo/1l5FrkV9Enoz8W87b29tTOS8vLx9EnoncjlyPvBe5EbkZeT4fU96NvBDr2znv7Ows57y0tLQVeSXy08gf5mNfPhPrjyOfrVarlcXFxZ9yfv78+bl8TPlh5LU8n/KDyOuxfj/y+VjfyHl3d/dCKv28fi/yp/m4sLDwQ+SLke9GvhT5Tinfjnw5f4/F/Pz8rZybzeZn+ZjyzVK+EfnzUr4S+Xopf9/L+fxzc3M5d1qt1hf531Mu5k/IxzGf85VYL+fefHH+RqNRrO/t7RW3L+UbkS9Hvhk5/386Kd/qW8/5duRLMV/OdyJfzNebnZ0t7t92u53v/07K9yJfiLwROT9+ef7HyOux/iDyWuSHkT+K+eLtZX9//2xer9frjyOfyY9/Wn8S86v59qT1p7Ge315zLt4RU16K19+O9YXIu5HnYn435hux3opcj9yOPB3z+5E/iPXf43y1yMX778HBQS3f3pTz+28l5bHIr2N+LN3+zszMzGHkoh/S+mHMF98XlNaP8zHd/0W/pMe943NAwKlSQIACAhQQgAICFBCAAgIUEIACAhQQgAIC/n9GqtXqYbfbHa38+RtSu32llPdqdNL6aOSj+LfxyMVekLTem39Ryr/mPDQ0NBznzXtROikPRW6W8k7k3m9rzXthOsPDw73bUuylGRkZ6cR63nvTSfko8oPIr+Pnz96P/DLW816ezujoaN6DdtyX9+P8eS9QZ2xs7Hxf7qa8Xlr/JO6Ljcjrcf6cj1P+OO+N6V1/fHz8XLz+/Tjfubh+sZcorZ+N9Ycxfybyo8ircf6fc56YmFiJ1/8l8mLk7cjzkfP92U15Ns63G+u9nPcKdWq12lQ8Xu3Ixd6f9Pd8P3UmJycnUszzL2N9LM7/anNzs9V7Q2q32395w/q7ubdH6L/KrVbrpPxlKX9Vyl+X8jel/G0pf5f/aDabvXy9tH6ztH63lDdKebOUH5Xyk1LeKuWd/ry2tlap9P125Onp6Zf9eWpq6lW3b8f6zMzM6/71er3+ppSP+u/XNN/pz41Go+sjIMBTMEABASggQAEBKCBAAQEoIEABASggQAEB/CN/CDAAw78uW9AVDw4AAAAASUVORK5CYII=',
|
||||
},
|
||||
IMG = [],
|
||||
IMG64 = '';
|
||||
//AAAAAA
|
||||
|
||||
for (var m in images) {
|
||||
IMG64 = images[m];
|
||||
var IMG = [],
|
||||
isPatch = m === '_patchesPng';
|
||||
|
||||
if (isPatch) {
|
||||
IMG64 = IMG64.replace(/AAAAAA/g, '§').replace(/AAAA/g, '^').replace(/AAA/g, '#');
|
||||
}
|
||||
for (var n = 0, len = IMG64.length; n < len; n += !n ? 100 - m.length + (isPatch ? 0 : 1) : 100) {
|
||||
IMG.push('\'' + IMG64.substr(n, !n ? 100 - m.length + (isPatch ? 0 : 1) : 100));
|
||||
}
|
||||
|
||||
IMG = (isPatch ? '(' : '') + IMG.join("' +\n\t") + "'";
|
||||
display.firstChild.data += "\n\n\n" + m + ' = ' + IMG + (isPatch ? ')' : '') +
|
||||
(isPatch ? ".\n\treplace(/§/g, 'AAAAAA').replace(/\\^/g, 'AAAA').replace(/#/g, 'AAA')" : '');
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
var keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/="
|
||||
function encode64(input) {
|
||||
input = escape(input)
|
||||
var output = ""
|
||||
var chr1, chr2, chr3 = ""
|
||||
var enc1, enc2, enc3, enc4 = ""
|
||||
var i = 0
|
||||
do {
|
||||
chr1 = input.charCodeAt(i++)
|
||||
chr2 = input.charCodeAt(i++)
|
||||
chr3 = input.charCodeAt(i++)
|
||||
enc1 = chr1 >> 2
|
||||
enc2 = ((chr1 & 3) << 4) | (chr2 >> 4)
|
||||
enc3 = ((chr2 & 15) << 2) | (chr3 >> 6)
|
||||
enc4 = chr3 & 63
|
||||
if (isNaN(chr2)) {
|
||||
enc3 = enc4 = 64
|
||||
} else if (isNaN(chr3)) {
|
||||
enc4 = 64
|
||||
}
|
||||
output = output +
|
||||
keyStr.charAt(enc1) +
|
||||
keyStr.charAt(enc2) +
|
||||
keyStr.charAt(enc3) +
|
||||
keyStr.charAt(enc4)
|
||||
chr1 = chr2 = chr3 = ""
|
||||
enc1 = enc2 = enc3 = enc4 = ""
|
||||
} while(i < input.length)
|
||||
return output
|
||||
}
|
||||
function decode64(input) {
|
||||
var output = ""
|
||||
var chr1, chr2, chr3 = ""
|
||||
var enc1, enc2, enc3, enc4 = ""
|
||||
var i = 0
|
||||
// remove all characters that are not A-Z, a-z, 0-9, +, /, or =
|
||||
var base64test = /[^A-Za-z0-9\+\/\=]/g
|
||||
if (base64test.exec(input)) {
|
||||
alert("There were invalid base64 characters in the input text.\n" +
|
||||
"Valid base64 characters are A-Z, a-z, 0-9, '+', '/', and '='\n" +
|
||||
"Expect errors in decoding.")
|
||||
}
|
||||
input = input.replace(/[^A-Za-z0-9\+\/\=]/g, "")
|
||||
do {
|
||||
enc1 = keyStr.indexOf(input.charAt(i++))
|
||||
enc2 = keyStr.indexOf(input.charAt(i++))
|
||||
enc3 = keyStr.indexOf(input.charAt(i++))
|
||||
enc4 = keyStr.indexOf(input.charAt(i++))
|
||||
chr1 = (enc1 << 2) | (enc2 >> 4)
|
||||
chr2 = ((enc2 & 15) << 4) | (enc3 >> 2)
|
||||
chr3 = ((enc3 & 3) << 6) | enc4
|
||||
output = output + String.fromCharCode(chr1)
|
||||
if (enc3 != 64) {
|
||||
output = output + String.fromCharCode(chr2)
|
||||
}
|
||||
if (enc4 != 64) {
|
||||
output = output + String.fromCharCode(chr3)
|
||||
}
|
||||
chr1 = chr2 = chr3 = ""
|
||||
enc1 = enc2 = enc3 = enc4 = ""
|
||||
} while (i < input.length)
|
||||
return unescape(output)
|
||||
}
|
||||
*/
|
||||
|
||||
})(window);
|
||||
194
colorPicker.html
Normal file
194
colorPicker.html
Normal file
@ -0,0 +1,194 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<link href="colorPicker.css" rel="stylesheet" type="text/css">
|
||||
<link href="colorPicker.sys.css" rel="stylesheet" type="text/css">
|
||||
<style type="text/css">
|
||||
#displayHTML, #displayCSS {
|
||||
clear: both;
|
||||
padding: 2em 1em 0;
|
||||
color: #666;
|
||||
font-family: Courier,mono; /* "Courier New", */
|
||||
font-size: 12px;
|
||||
line-height: 15px;
|
||||
}
|
||||
pre {
|
||||
-moz-tab-size: 4;
|
||||
-o-tab-size: 4;
|
||||
-webkit-tab-size: 4;
|
||||
-ms-tab-size: 4;
|
||||
tab-size: 4;
|
||||
}
|
||||
.cp-app {
|
||||
position: relative;
|
||||
float: left;
|
||||
margin: 10px 0 0 10px;
|
||||
}
|
||||
.cp-app .cp-curm {
|
||||
top: 255px;
|
||||
left: 0;
|
||||
}
|
||||
.cp-app .cp-curl,
|
||||
.cp-app .cp-curr {
|
||||
top: 255px;
|
||||
}
|
||||
.cp-panel .cp-cold {
|
||||
width: 71%;
|
||||
}
|
||||
.cp-panel .cp-cont {
|
||||
width: 29%;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
<title>colorPicker markup</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="cp-app alpha-bg-w">
|
||||
<div class="cp-slds">
|
||||
<div class="cp-sldl-1"></div>
|
||||
<div class="cp-sldl-2"></div>
|
||||
<div class="cp-sldl-3"></div>
|
||||
<div class="cp-curm"></div>
|
||||
<div class="cp-sldr-1"></div>
|
||||
<div class="cp-sldr-2"></div>
|
||||
<div class="cp-sldr-4"></div>
|
||||
<div class="cp-curl"></div>
|
||||
<div class="cp-curr"></div>
|
||||
</div>
|
||||
<div class="cp-opacity">
|
||||
<div>
|
||||
<div class="cp-opacity-slider"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cp-memo">
|
||||
<div class="cp-raster"></div>
|
||||
<div class="cp-raster-bg"></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="cp-memo-store"></div>
|
||||
<div class="cp-memo-cursor"></div>
|
||||
</div>
|
||||
<div class="cp-panel">
|
||||
<div class="cp-hsv">
|
||||
<div class="hsl-mode cp-butt"></div>
|
||||
<div class="hsv-h-butt cp-butt">H</div>
|
||||
<div class="hsv-h-disp cp-disp">-<div class="cp-nsarrow"></div></div>
|
||||
<div class="hsl-h-labl cp-labl">H</div>
|
||||
<div class="hsv-s-butt cp-butt">S</div>
|
||||
<div class="hsv-s-disp cp-disp">-</div>
|
||||
<div class="hsl-s-labl cp-labl">S</div>
|
||||
<div class="hsv-v-butt cp-butt">B</div>
|
||||
<div class="hsv-v-disp cp-disp">-</div>
|
||||
<div class="hsl-l-labl cp-labl">L</div>
|
||||
</div>
|
||||
<div class="cp-hsl cp-hide">
|
||||
<div class="hsv-mode cp-butt"></div>
|
||||
<div class="hsl-h-butt cp-butt">H</div>
|
||||
<div class="hsl-h-disp cp-disp">-</div>
|
||||
<div class="hsv-h-labl cp-labl">H</div>
|
||||
<div class="hsl-s-butt cp-butt">S</div>
|
||||
<div class="hsl-s-disp cp-disp">-</div>
|
||||
<div class="hsv-s-labl cp-labl">S</div>
|
||||
<div class="hsl-l-butt cp-butt">L</div>
|
||||
<div class="hsl-l-disp cp-disp">-</div>
|
||||
<div class="hsv-v-labl cp-labl">B</div>
|
||||
</div>
|
||||
<div class="cp-rgb">
|
||||
<div class="rgb-r-butt cp-butt">R</div>
|
||||
<div class="rgb-r-disp cp-disp">-</div>
|
||||
<div class="rgb-r-labl cp-butt"> </div>
|
||||
<div class="rgb-g-butt cp-butt">G</div>
|
||||
<div class="rgb-g-disp cp-disp">-</div>
|
||||
<div class="rgb-g-labl cp-butt"> </div>
|
||||
<div class="rgb-b-butt cp-butt">B</div>
|
||||
<div class="rgb-b-disp cp-disp">-</div>
|
||||
<div class="rgb-b-labl cp-butt"> </div>
|
||||
</div>
|
||||
<div class="cp-cmyk">
|
||||
<div class="Lab-mode cp-butt"></div>
|
||||
<div class="cmyk-c-butt cp-labl">C</div>
|
||||
<div class="cmyk-c-disp cp-disp">-</div>
|
||||
<div class="Lab-L-labl cp-labl">L</div>
|
||||
<div class="cmyk-m-butt cp-labl">M</div>
|
||||
<div class="cmyk-m-disp cp-disp">-</div>
|
||||
<div class="Lab-a-labl cp-labl">a</div>
|
||||
<div class="cmyk-y-butt cp-labl">Y</div>
|
||||
<div class="cmyk-y-disp cp-disp">-</div>
|
||||
<div class="Lab-b-labl cp-labl">b</div>
|
||||
<div class="cmyk-k-butt cp-labl">K</div>
|
||||
<div class="cmyk-k-disp cp-disp">-</div>
|
||||
<div class="Lab-x-labl cp-butt"> </div>
|
||||
</div>
|
||||
<div class="cp-Lab cp-hide">
|
||||
<div class="cmyk-mode cp-butt"></div>
|
||||
<div class="Lab-L-butt cp-labl">L</div>
|
||||
<div class="Lab-L-disp cp-disp">-</div>
|
||||
<div class="cmyk-c-labl cp-labl">C</div>
|
||||
<div class="Lab-a-butt cp-labl">a</div>
|
||||
<div class="Lab-a-disp cp-disp">-</div>
|
||||
<div class="cmyk-m-labl cp-labl">M</div>
|
||||
<div class="Lab-b-butt cp-labl">b</div>
|
||||
<div class="Lab-b-disp cp-disp">-</div>
|
||||
<div class="cmyk-y-labl cp-labl">Y</div>
|
||||
<div class="Lab-x-butt cp-labl"> </div>
|
||||
<div class="Lab-x-disp cp-disp">-</div>
|
||||
<div class="cmyk-k-labl cp-labl">K</div>
|
||||
</div>
|
||||
<div class="cp-alpha">
|
||||
<div class="alpha-butt cp-butt">A</div>
|
||||
<div class="alpha-disp cp-disp">-</div>
|
||||
<div class="alpha-labl cp-butt">W</div>
|
||||
</div>
|
||||
<div class="cp-HEX">
|
||||
<div class="HEX-butt cp-butt">#</div>
|
||||
<div class="HEX-disp cp-disp">-</div>
|
||||
<div class="HEX-labl cp-butt">M</div>
|
||||
</div>
|
||||
<div class="cp-ctrl">
|
||||
<div class="cp-raster"></div>
|
||||
<div class="cp-cont"></div>
|
||||
<div class="cp-cold"></div>
|
||||
<div class="cp-col1">
|
||||
<div> </div>
|
||||
</div>
|
||||
<div class="cp-col2">
|
||||
<div> </div>
|
||||
</div>
|
||||
<div class="cp-bres">RESET</div>
|
||||
<div class="cp-bsav">SAVE</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cp-exit"></div>
|
||||
<div class="cp-resize"></div>
|
||||
<div class="cp-resizer"><div></div></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<pre id="displayHTML"> </pre>
|
||||
<pre id="displayCSS"> </pre>
|
||||
|
||||
<script type="text/javascript" src="colorPicker.dev.js"></script>
|
||||
|
||||
<script type="text/javascript" src="color.js"></script>
|
||||
<script type="text/javascript" src="colorPicker.js"></script>
|
||||
<script type="text/javascript">
|
||||
// var myDevMode = new ColorPicker({
|
||||
// devPicker: document.getElementsByClassName('cp-app')[0],
|
||||
// instanceName: 'myDevMode'
|
||||
// });
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
1314
colorPicker.js
Normal file
1314
colorPicker.js
Normal file
File diff suppressed because it is too large
Load Diff
68
index.html
Normal file
68
index.html
Normal file
@ -0,0 +1,68 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<!-- <link href="colorPicker.sys.css" rel="stylesheet" type="text/css"> -->
|
||||
<link href="colorPicker.css" rel="stylesheet" type="text/css">
|
||||
<link href="index.css" rel="stylesheet" type="text/css">
|
||||
<title>colorPicker_new</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div id="testPatch"> </div>
|
||||
|
||||
<div id="contrastPatch"><div></div><i>-Test-</i></div>
|
||||
|
||||
<div id="colorValues"> </div>
|
||||
|
||||
<div id="sliders" class="sliders">
|
||||
<div id="rgbR"><div></div></div>
|
||||
<div id="rgbG"><div></div></div>
|
||||
<div id="rgbB"><div></div></div>
|
||||
|
||||
<div id="hslH"><div></div></div>
|
||||
<div id="hslS"><div></div></div>
|
||||
<div id="hslL"><div></div></div>
|
||||
|
||||
<!-- <div id="cmyC"><div></div></div>
|
||||
<div id="cmyM"><div></div></div>
|
||||
<div id="cmyY"><div></div></div> -->
|
||||
</div>
|
||||
|
||||
<div id="hsv_map">
|
||||
<canvas id="surface" width="200" height="200"></canvas>
|
||||
<div class="cover"></div>
|
||||
<div class="hsv-cursor"></div>
|
||||
<div class="bar-bg"></div>
|
||||
<div class="bar-white"></div>
|
||||
<canvas id="luminanceBar" width="25" height="200"></canvas>
|
||||
<div class="hsv-barcursors" id="hsv_cursors">
|
||||
<div class="hsv-barcursor-l"></div>
|
||||
<div class="hsv-barcursor-r"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="color_squares">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div id="description">Demo patches: demonstrate how to build color pickers and how Colors' / ColorPicker's API work. Patches are linked to <select><option value="Colors">Colors</option><option value="ColorPicker">ColorPicker</option></select></div>
|
||||
|
||||
<!-- <div id="model_display"></div> -->
|
||||
<!--canvas style="position: absolute; left: 500px; width: 255px; height: 255px" id="canvas"></canvas-->
|
||||
<!-- <script type="text/javascript" src="color.ext.js"></script> -->
|
||||
<script type="text/javascript" src="color.js"></script>
|
||||
<!-- script type="text/javascript" src="tools.js"></script -->
|
||||
<script type="text/javascript" src="colorPicker.data.js"></script>
|
||||
<script type="text/javascript" src="colorPicker.js"></script>
|
||||
<!-- <script type="text/javascript" src="color.all.min.js"></script> -->
|
||||
<script type="text/javascript" src="index.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
537
index.js
Normal file
537
index.js
Normal file
@ -0,0 +1,537 @@
|
||||
;(function(window, undefined){
|
||||
"use strict"
|
||||
|
||||
|
||||
if (1 === 2) { // to run ColorPicker on its own....
|
||||
myColor = window.myColor = new window.ColorPicker({
|
||||
// customCSS: true
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// Some common use variables
|
||||
var ColorPicker = window.ColorPicker,
|
||||
Tools = ColorPicker || window.Tools, // provides functions like addEvent, ... getOrigin, etc.
|
||||
colorSourceSelector = document.getElementById('description').getElementsByTagName('select')[0],
|
||||
startPoint,
|
||||
currentTarget,
|
||||
currentTargetWidth = 0,
|
||||
currentTargetHeight = 0;
|
||||
|
||||
/* ---------------------------------- */
|
||||
/* ------- Render color patch ------- */
|
||||
/* ---------------------------------- */
|
||||
var testPatch = document.getElementById('testPatch'),
|
||||
renderTestPatch = function(color) { // used in renderCallback of 'new ColorPicker'
|
||||
var RGB = color.RND.rgb;
|
||||
|
||||
testPatch.style.cssText =
|
||||
'background-color: rgba(' + RGB.r + ',' + RGB.g + ',' + RGB.b + ',' + color.alpha + ');' +
|
||||
'color: ' + (color.rgbaMixBlack.luminance > 0.22 ? '#222' : '#ddd');
|
||||
testPatch.firstChild.data = '#' + color.HEX;
|
||||
};
|
||||
|
||||
/* ---------------------------------- */
|
||||
/* ------ Render contrast patch ----- */
|
||||
/* ---------------------------------- */
|
||||
var contrastPatch = document.getElementById('contrastPatch'),
|
||||
backGround = contrastPatch.firstChild,
|
||||
renderContrastPatch = function(color) { // used in renderCallback of 'new ColorPicker'
|
||||
var RGB = color.RND.rgb,
|
||||
bgColor = color.background.RGB,
|
||||
options = myColor.options ? myColor.options : myColor.color.options,
|
||||
cBGColor = myColor ? options.customBG : {},
|
||||
bgType,
|
||||
alphaBG;
|
||||
|
||||
if (!cBGColor) {
|
||||
// contrastPatch.style.display = 'none';
|
||||
// return;
|
||||
cBGColor = {r: 1, g: 1, b: 1};
|
||||
}
|
||||
alphaBG = options.alphaBG;
|
||||
bgType = {w: 'White', b: 'Black', c: 'Custom'}[alphaBG];
|
||||
cBGColor = alphaBG === 'b' ? {r: 0, g: 0, b: 0} : alphaBG === 'w' ? {r: 1, g: 1, b: 1} : cBGColor;
|
||||
contrastPatch.style.cssText =
|
||||
'background-color: rgb(' +
|
||||
Math.round(cBGColor.r * 255) + ',' +
|
||||
Math.round(cBGColor.g * 255) + ',' +
|
||||
Math.round(cBGColor.b * 255) + ');' +
|
||||
'color: ' + 'rgba(' + RGB.r + ',' + RGB.g + ',' + RGB.b + ',' + color.alpha + ');';
|
||||
backGround.style.cssText =
|
||||
'background-color: rgba(' +
|
||||
bgColor.r + ',' +
|
||||
bgColor.g + ',' +
|
||||
bgColor.b + ',' + color.background.alpha + ');';
|
||||
contrastPatch.children[1].firstChild.data = color['rgbaMixBGMix' + bgType] ?
|
||||
'*' + color['rgbaMixBGMix' + bgType].WCAG2Ratio + '*' :
|
||||
'-Test-';
|
||||
};
|
||||
|
||||
/* ---------------------------------- */
|
||||
/* ------- Render color values ------ */
|
||||
/* ---------------------------------- */
|
||||
var colorValues = document.getElementById('colorValues'),
|
||||
renderColorValues = function(color) { // used in renderCallback of 'new ColorPicker'
|
||||
var RND = color.RND;
|
||||
|
||||
colorValues.firstChild.data =
|
||||
'rgba(' + RND.rgb.r + ',' + RND.rgb.g + ',' + RND.rgb.b + ',' + color.alpha + ')' + "\n" +
|
||||
'hsva(' + RND.hsv.h + ',' + RND.hsv.s + ',' + RND.hsv.v + ',' + color.alpha + ')' + "\n" +
|
||||
'hsla(' + RND.hsl.h + ',' + RND.hsl.s + ',' + RND.hsl.l + ',' + color.alpha + ')' + "\n" +
|
||||
'CMYK(' + RND.cmyk.c + ',' + RND.cmyk.m + ',' + RND.cmyk.y + ',' + RND.cmyk.k + ')' + "\n" +
|
||||
'CMY(' + RND.cmy.c + ',' + RND.cmy.m + ',' + RND.cmy.y + ')' + "\n" +
|
||||
'Lab(' + RND.Lab.L + ',' + RND.Lab.a + ',' + RND.Lab.b + ')'; // + "\n" +
|
||||
|
||||
// 'mixBG: ' + (color.rgbaMixBG.luminance).toFixed(10) + "\n" +
|
||||
// 'mixBGCBG: ' + (color.rgbaMixCustom.luminance).toFixed(10);
|
||||
// 'XYZ(' + RND.XYZ.X + ',' + RND.XYZ.Y + ',' + RND.XYZ.Z + ')';
|
||||
};
|
||||
|
||||
/* ---------------------------------- */
|
||||
/* ---------- Color squares --------- */
|
||||
/* ---------------------------------- */
|
||||
var colorSquares = document.getElementById('color_squares'),
|
||||
squares = colorSquares.children,
|
||||
n = squares.length;
|
||||
|
||||
for ( ; n--; ) { // draw random color values as background
|
||||
squares[n].style.backgroundColor = 'rgb(' +
|
||||
Math.round(Math.random() * 255) + ',' +
|
||||
Math.round(Math.random() * 255) + ',' +
|
||||
Math.round(Math.random() * 255) +')';
|
||||
}
|
||||
|
||||
Tools.addEvent(colorSquares, 'click', function(e){ // event delegation
|
||||
if (e.target.parentNode === this) {
|
||||
myColor.setColor(e.target.style.backgroundColor);
|
||||
startRender(true);
|
||||
}
|
||||
});
|
||||
|
||||
/* ---------------------------------- */
|
||||
/* ---------- Color sliders --------- */
|
||||
/* ---------------------------------- */
|
||||
var sliders = document.getElementById('sliders'),
|
||||
sliderChildren = sliders.children,
|
||||
type,
|
||||
mode,
|
||||
max = {
|
||||
rgb: {r: 255, g: 255, b: 255},
|
||||
hsl: {h: 360, s: 100, l: 100},
|
||||
cmy: {c: 100, m: 100, y: 100}
|
||||
// hsv: {h: 360, s: 100, v: 100},
|
||||
// cmyk: {c: 100, m: 100, y: 100, k: 100},
|
||||
},
|
||||
sliderDown = function (e) { // mouseDown callback
|
||||
var target = e.target,
|
||||
id, len;
|
||||
|
||||
if (e.target !== this) {
|
||||
e.preventDefault();
|
||||
|
||||
currentTarget = target.id ? target : target.parentNode;
|
||||
id = currentTarget.id; // rgbR
|
||||
len = id.length - 1;
|
||||
type = id.substr(0, len); // rgb
|
||||
mode = id[len].toLowerCase(); // R -> r
|
||||
startPoint = Tools.getOrigin(currentTarget);
|
||||
currentTargetWidth = currentTarget.offsetWidth;
|
||||
|
||||
sliderMove(e);
|
||||
Tools.addEvent(window, 'mousemove', sliderMove);
|
||||
startRender();
|
||||
}
|
||||
},
|
||||
sliderMove = function (e) { // mouseMove callback
|
||||
var newColor = {};
|
||||
|
||||
// The idea here is (so in the HSV-color-picker) that you don't
|
||||
// render anything here but just send data to the colorPicker, no matter
|
||||
// if it's out of range. colorPicker will take care of that and render it
|
||||
// then in the renderColorSliders correctly (called in renderCallback).
|
||||
newColor[mode] = (e.clientX - startPoint.left) / currentTargetWidth * max[type][mode];
|
||||
myColor.setColor(newColor, type);
|
||||
},
|
||||
renderColorSliders = function(color) { // used in renderCallback of 'new ColorPicker'
|
||||
for (var n = sliderChildren.length; n--; ) {
|
||||
var child = sliderChildren[n],
|
||||
len = child.id.length - 1,
|
||||
type = child.id.substr(0, len),
|
||||
mode = child.id[len].toLowerCase();
|
||||
|
||||
child.children[0].style.width = (color.RND[type][mode] / max[type][mode] * 100) + '%';
|
||||
}
|
||||
};
|
||||
|
||||
Tools.addEvent(sliders, 'mousedown', sliderDown); // event delegation
|
||||
Tools.addEvent(window, 'mouseup', function() {
|
||||
Tools.removeEvent (window, 'mousemove', sliderMove);
|
||||
stopRender();
|
||||
});
|
||||
|
||||
/* ---------------------------------- */
|
||||
/* ---- HSV-circle color picker ----- */
|
||||
/* ---------------------------------- */
|
||||
var hsv_map = document.getElementById('hsv_map'),
|
||||
hsv_mapCover = hsv_map.children[1], // well...
|
||||
hsv_mapCursor = hsv_map.children[2],
|
||||
hsv_barBGLayer = hsv_map.children[3],
|
||||
hsv_barWhiteLayer = hsv_map.children[4],
|
||||
hsv_barCursors = hsv_map.children[6],
|
||||
hsv_barCursorsCln = hsv_barCursors.className,
|
||||
hsv_Leftcursor = hsv_barCursors.children[0],
|
||||
hsv_Rightcursor = hsv_barCursors.children[1],
|
||||
|
||||
colorDisc = document.getElementById('surface'),
|
||||
colorDiscRadius = colorDisc.offsetHeight / 2,
|
||||
luminanceBar = document.getElementById('luminanceBar'),
|
||||
|
||||
hsvDown = function(e) { // mouseDown callback
|
||||
var target = e.target;
|
||||
|
||||
e.preventDefault();
|
||||
|
||||
currentTarget = target.id ? target : target.parentNode;
|
||||
startPoint = Tools.getOrigin(currentTarget);
|
||||
currentTargetHeight = currentTarget.offsetHeight; // as diameter of circle
|
||||
|
||||
Tools.addEvent(window, 'mousemove', hsvMove);
|
||||
hsv_map.className = 'no-cursor';
|
||||
hsvMove(e);
|
||||
startRender();
|
||||
},
|
||||
hsvMove = function(e) { // mouseMove callback
|
||||
var r, x, y, h, s;
|
||||
|
||||
if(currentTarget === hsv_map) { // the circle
|
||||
r = currentTargetHeight / 2,
|
||||
x = e.clientX - startPoint.left - r,
|
||||
y = e.clientY - startPoint.top - r,
|
||||
h = 360 - ((Math.atan2(y, x) * 180 / Math.PI) + (y < 0 ? 360 : 0)),
|
||||
s = (Math.sqrt((x * x) + (y * y)) / r) * 100;
|
||||
myColor.setColor({h: h, s: s}, 'hsv');
|
||||
} else if (currentTarget === hsv_barCursors) { // the luminanceBar
|
||||
myColor.setColor({
|
||||
v: (currentTargetHeight - (e.clientY - startPoint.top)) / currentTargetHeight * 100
|
||||
}, 'hsv');
|
||||
}
|
||||
},
|
||||
/* renderHSVPicker = function(color) { // used in renderCallback of 'new ColorPicker'
|
||||
var pi2 = Math.PI * 2,
|
||||
x = Math.cos(pi2 - color.hsv.h * pi2),
|
||||
y = Math.sin(pi2 - color.hsv.h * pi2),
|
||||
r = color.hsv.s * (colorDiscRadius - 5), // - border
|
||||
// this approach useing hsl is not the fastest (I just wanted to try out)... so,
|
||||
// better would be to have 2 extra layers underneath luminanceBar, the middle one
|
||||
// being white and opac with color.hsl.l, the 2nd one bgColor to color.heuRGB.
|
||||
// This approach would then be faster and also work with older IEs.
|
||||
hsv2hsl = function(hsv) { // there is no hsv(h, s, v) in CSS
|
||||
var l = (2 - hsv.s) * hsv.v,
|
||||
s = hsv.s * hsv.v;
|
||||
|
||||
return {
|
||||
h: hsv.h,
|
||||
s: !hsv.s ? 0 : l < 1 ? (l ? s / l : 0) : s / (2 - l),
|
||||
l: l / 2
|
||||
}
|
||||
},
|
||||
hslFull = hsv2hsl({
|
||||
h: color.hsv.h,
|
||||
s: color.hsv.s,
|
||||
v: 1
|
||||
});
|
||||
|
||||
hsv_mapCover.style.opacity = 1 - color.hsv.v;
|
||||
hsv_mapCursor.style.cssText =
|
||||
'left: ' + (x * r + colorDiscRadius) + 'px;' +
|
||||
'top: ' + (y * r + colorDiscRadius) + 'px;' +
|
||||
(color.RGBLuminance > 0.22 ? 'background-position: 0 -36px;' : '');
|
||||
|
||||
luminanceBar.style.backgroundColor = 'hsl(' +
|
||||
Math.round(hslFull.h * 360) + ',' +
|
||||
Math.round(hslFull.s * 100) + '%,' +
|
||||
Math.round(hslFull.l * 100) + '%)';
|
||||
hsv_barCursors.className = color.RGBLuminance > 0.22 ? hsv_barCursorsCln + ' dark' : hsv_barCursorsCln;
|
||||
hsv_Leftcursor.style.top = hsv_Rightcursor.style.top = ((1 - color.hsv.v) * colorDiscRadius * 2) + 'px';
|
||||
};
|
||||
*/ renderHSVPicker = function(color) { // used in renderCallback of 'new ColorPicker'
|
||||
var pi2 = Math.PI * 2,
|
||||
x = Math.cos(pi2 - color.hsv.h * pi2),
|
||||
y = Math.sin(pi2 - color.hsv.h * pi2),
|
||||
r = color.hsv.s * (colorDiscRadius - 5);
|
||||
|
||||
hsv_mapCover.style.opacity = 1 - color.hsv.v;
|
||||
// this is the faster version...
|
||||
hsv_barWhiteLayer.style.opacity = 1 - color.hsv.s;
|
||||
hsv_barBGLayer.style.backgroundColor = 'rgb(' +
|
||||
color.hueRGB.r + ',' +
|
||||
color.hueRGB.g + ',' +
|
||||
color.hueRGB.b + ')';
|
||||
|
||||
hsv_mapCursor.style.cssText =
|
||||
'left: ' + (x * r + colorDiscRadius) + 'px;' +
|
||||
'top: ' + (y * r + colorDiscRadius) + 'px;' +
|
||||
// maybe change className of hsv_map to change colors of all cursors...
|
||||
'border-color: ' + (color.RGBLuminance > 0.22 ? '#333;' : '#ddd');
|
||||
hsv_barCursors.className = color.RGBLuminance > 0.22 ? hsv_barCursorsCln + ' dark' : hsv_barCursorsCln;
|
||||
hsv_Leftcursor.style.top = hsv_Rightcursor.style.top = ((1 - color.hsv.v) * colorDiscRadius * 2) + 'px';
|
||||
};
|
||||
|
||||
Tools.addEvent(hsv_map, 'mousedown', hsvDown); // event delegation
|
||||
Tools.addEvent(window, 'mouseup', function() {
|
||||
Tools.removeEvent (window, 'mousemove', hsvMove);
|
||||
hsv_map.className = '';
|
||||
stopRender();
|
||||
});
|
||||
|
||||
// generic function for drawing a canvas disc
|
||||
var drawDisk = function(ctx, coords, radius, steps, colorCallback) {
|
||||
var x = coords[0] || coords, // coordinate on x-axis
|
||||
y = coords[1] || coords, // coordinate on y-axis
|
||||
a = radius[0] || radius, // radius on x-axis
|
||||
b = radius[1] || radius, // radius on y-axis
|
||||
angle = 360,
|
||||
rotate = 0, coef = Math.PI / 180;
|
||||
|
||||
ctx.save();
|
||||
ctx.translate(x - a, y - b);
|
||||
ctx.scale(a, b);
|
||||
|
||||
steps = (angle / steps) || 360;
|
||||
|
||||
for (; angle > 0 ; angle -= steps){
|
||||
ctx.beginPath();
|
||||
if (steps !== 360) ctx.moveTo(1, 1); // stroke
|
||||
ctx.arc(1, 1, 1,
|
||||
(angle - (steps / 2) - 1) * coef,
|
||||
(angle + (steps / 2) + 1) * coef);
|
||||
|
||||
if (colorCallback) {
|
||||
colorCallback(ctx, angle);
|
||||
} else {
|
||||
ctx.fillStyle = 'black';
|
||||
ctx.fill();
|
||||
}
|
||||
}
|
||||
ctx.restore();
|
||||
},
|
||||
drawCircle = function(ctx, coords, radius, color, width) { // uses drawDisk
|
||||
width = width || 1;
|
||||
radius = [
|
||||
(radius[0] || radius) - width / 2,
|
||||
(radius[1] || radius) - width / 2
|
||||
];
|
||||
drawDisk(ctx, coords, radius, 1, function(ctx, angle){
|
||||
ctx.restore();
|
||||
ctx.lineWidth = width;
|
||||
ctx.strokeStyle = color || '#000';
|
||||
ctx.stroke();
|
||||
});
|
||||
};
|
||||
|
||||
drawDisk( // HSV color wheel with white center
|
||||
colorDisc.getContext("2d"),
|
||||
[colorDisc.width / 2, colorDisc.height / 2],
|
||||
[colorDisc.width / 2 - 1, colorDisc.height / 2 - 1],
|
||||
360,
|
||||
function(ctx, angle) {
|
||||
var gradient = ctx.createRadialGradient(1, 1, 1, 1, 1, 0);
|
||||
gradient.addColorStop(0, 'hsl(' + (360 - angle + 0) + ', 100%, 50%)');
|
||||
gradient.addColorStop(1, "#FFFFFF");
|
||||
|
||||
ctx.fillStyle = gradient;
|
||||
ctx.fill();
|
||||
}
|
||||
);
|
||||
drawCircle( // gray border
|
||||
colorDisc.getContext("2d"),
|
||||
[colorDisc.width / 2, colorDisc.height / 2],
|
||||
[colorDisc.width / 2, colorDisc.height / 2],
|
||||
'#555',
|
||||
3
|
||||
);
|
||||
// draw the luminanceBar bar
|
||||
var ctx = luminanceBar.getContext("2d"),
|
||||
gradient = ctx.createLinearGradient(0, 0, 0, 200);
|
||||
|
||||
gradient.addColorStop(0,"transparent");
|
||||
gradient.addColorStop(1,"black");
|
||||
|
||||
ctx.fillStyle = gradient;
|
||||
ctx.fillRect(0, 0, 30, 200);
|
||||
|
||||
|
||||
// experimental stuff
|
||||
|
||||
// var colorModel = document.getElementById('model_display'),
|
||||
// displayModel = function(model) {
|
||||
// var html = ['<ul class="model">'];
|
||||
// for (var n in model) {
|
||||
// if (typeof model[n] === 'object') {
|
||||
// html.push(n + ': ' + displayModel(model[n]));
|
||||
// // return html.join('');
|
||||
// } else {
|
||||
// html.push('<li>' + n + ': ' + model[n] + '</li>');
|
||||
// }
|
||||
// }
|
||||
// html.push('</ul>');
|
||||
// return html.join('');
|
||||
// };
|
||||
|
||||
|
||||
/*
|
||||
* This script is set up so it runs either with ColorPicker or with Color only.
|
||||
* The difference here is that ColorPicker has a renderCallback that Color doesn't have
|
||||
* therefor we have to set a render intervall in case it's missing...
|
||||
* setInterval() can be exchanged to window.requestAnimationFrame(callBack)...
|
||||
*
|
||||
* If you want to render on mouseMove only then get rid of startRender(); in
|
||||
* all the mouseDown callbacks and add doRender(myColor.colors); in all
|
||||
* mouseMove callbacks. (Also remove all stopRender(); in mouseUp callbacks)
|
||||
*/
|
||||
var doRender = function(color) {
|
||||
renderTestPatch(color);
|
||||
renderContrastPatch(color);
|
||||
renderColorValues(color);
|
||||
renderColorSliders(color);
|
||||
renderHSVPicker(color);
|
||||
// colorModel.innerHTML = displayModel(color); // experimental
|
||||
},
|
||||
renderTimer,
|
||||
// those functions are in case there is no ColorPicker but only Colors involved
|
||||
startRender = function(oneTime){
|
||||
if (isColorPicker) { // ColorPicker present
|
||||
myColor.startRender(oneTime);
|
||||
} else if (oneTime) { // only Colors is instanciated
|
||||
doRender(myColor.colors);
|
||||
} else {
|
||||
renderTimer = window.setInterval(
|
||||
function() {
|
||||
doRender(myColor.colors);
|
||||
// http://stackoverflow.com/questions/2940054/
|
||||
}, 13); // 1000 / 60); // ~16.666 -> 60Hz or 60fps
|
||||
}
|
||||
},
|
||||
stopRender = function(){
|
||||
if (isColorPicker) {
|
||||
myColor.stopRender();
|
||||
} else {
|
||||
window.clearInterval(renderTimer);
|
||||
}
|
||||
},
|
||||
renderCallback = doRender,
|
||||
// finally the instance of either ColorPicker or Colors (export for debugging purposes)
|
||||
color_ColorPicker = new (ColorPicker || Colors)({
|
||||
customBG: '#808080'
|
||||
// renderCallback: renderCallback, // doesn't work in Colors, but also doesn't matter
|
||||
// convertCallback: function(color, type){console.log(color, type)}
|
||||
// resizeCallback: function(e, value, scale, original){console.log(e, value, scale, original)}
|
||||
// actionCallback: function(e, value){console.log(e, value)},
|
||||
// customCSS: true,
|
||||
/* memoryColors: [
|
||||
{r: 100, g: 200, b: 10, a: 0.6},
|
||||
{r: 80, g: 100, b: 50, a: 0.9},
|
||||
{r: 70, g: 80, b: 10, a: 0.9},
|
||||
{r: 20, g: 200, b: 60, a: 0.9},
|
||||
{r: 88, g: 0, b: 30, a: 0.4},
|
||||
{r: 100, g: 0, b: 100, a: 0.6},
|
||||
{r: 200, g: 0, b: 0},
|
||||
{r: 200, g: 30, b: 100}
|
||||
],
|
||||
*/ // size: 2
|
||||
}),
|
||||
color_Colors = new Colors(),
|
||||
myColor,
|
||||
isColorPicker = colorSourceSelector.value === 'ColorPicker';
|
||||
|
||||
myColor = window.myColor = color_Colors;
|
||||
// mySecondColor = window.mySecondColor = new ColorPicker({instanceName: 'mySecondColor'});
|
||||
|
||||
// in case ColorPicker is not there...
|
||||
if (!isColorPicker) { // initial rendering
|
||||
doRender(myColor.colors);
|
||||
}
|
||||
|
||||
colorSourceSelector.onchange = function(e) {
|
||||
if (this.value === 'Colors') {
|
||||
color_ColorPicker.color.options.renderCallback = function(color){};
|
||||
myColor = window.myColor = color_Colors;
|
||||
isColorPicker = false;
|
||||
doRender(myColor.colors);
|
||||
} else {
|
||||
color_ColorPicker.color.options.renderCallback = doRender;
|
||||
myColor = window.myColor = color_ColorPicker;
|
||||
isColorPicker = true;
|
||||
doRender(myColor.color.colors);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function conversionTest () {
|
||||
// conversion test
|
||||
var convert = myColor.color ? myColor.color.convertColor : myColor.convertColor,
|
||||
x = 0.85, y = 0.33, z = 0.23, k = 0.1,
|
||||
modes = ['hsl', 'hsv', 'rgb', 'cmy', 'cmyk', 'Lab', 'XYZ', 'HEX'],
|
||||
color = {},
|
||||
fromMode = '',
|
||||
toMode = '',
|
||||
counter = 0,
|
||||
value,
|
||||
colorOut = [],
|
||||
valueOut = [],
|
||||
isLab = false;
|
||||
|
||||
for (var o = 2; o--; ) {
|
||||
for (var n = 0, m = modes.length; n < m; n++) {
|
||||
if (modes[n] === 'HEX') {
|
||||
color = '89ABCD';
|
||||
} else {
|
||||
color = {};
|
||||
isLab = modes[n] === 'Lab';
|
||||
color[modes[n][0]] = o && !isLab ? x : Math.round(x * 100) + (isLab ? x : 0);
|
||||
color[modes[n][1]] = o && !isLab ? y : Math.round(y * 100) + (isLab ? y : 0);
|
||||
color[modes[n][2]] = o && !isLab ? z : Math.round(z * 100) + (isLab ? z : 0);
|
||||
if (modes[n] === 'cmyk') {
|
||||
color[modes[n][3]] = o ? k : Math.round(k * 100);;
|
||||
}
|
||||
}
|
||||
fromMode = o ? modes[n] : modes[n].toUpperCase();
|
||||
for (var d = 2; d--; ) {
|
||||
for (var p = 0, q = modes.length; p < q; p++) {
|
||||
toMode = d ? modes[p] : modes[p].toUpperCase();
|
||||
if (fromMode !== toMode) {// && fromMode !== 'LAB' && toMode !== 'LAB') {
|
||||
if ((!d && /(?:XYZ|HEX)/.test(toMode)) || // good to avoid double 2XYZ or 2HEX
|
||||
(!o && /(?:XYZ|HEX)/.test(fromMode))) { // good to avoid double XYZ2 or HEX2
|
||||
// do nothing
|
||||
} else {
|
||||
value = convert(color, fromMode + '2' + toMode);
|
||||
colorOut = [];
|
||||
for (var s in color) {
|
||||
colorOut.push(s + ': ' + color[s]);
|
||||
}
|
||||
colorOut = fromMode === 'HEX' ? '"' + color + '"' : '{' + colorOut.join(', ') + '}';
|
||||
|
||||
valueOut = [];
|
||||
for (var s in value) {
|
||||
valueOut.push(s + ': ' + value[s]);
|
||||
}
|
||||
valueOut = toMode === 'HEX' ? '"' + value + '"' : '{' + valueOut.join(', ') + '}';
|
||||
|
||||
console.log('convertColor(' + colorOut + ', "' + fromMode +
|
||||
'2' + toMode + '") = ' + valueOut);
|
||||
counter++;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
console.log('Tested ' + counter + ' conversion combinations (excluding same to same)');
|
||||
}
|
||||
|
||||
window.conversionTest = conversionTest;
|
||||
|
||||
// conversionTest();
|
||||
|
||||
})(window);
|
||||
Loading…
x
Reference in New Issue
Block a user