mirror of
https://github.com/PitPik/colorPicker.git
synced 2025-09-01 05:12:58 -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' : 'iVBORw0KGgoAAAANSUhEUgAAB4AAAAEACAIAAADdoPxzAAAL0UlEQVR4Xu3cQWrDQBREwR7FF8/BPR3wXktnQL+KvxfypuEhvLJXcp06d/bXd71OPt+trIw95zr33Z1bk1/fudEv79wa++7OfayZ59wrO2PBzklcGQmAZggAAOBYgAYBmpWRAGgAAAABGgRofAENgAANAAAI0CBA6w8AGAAAAECABgEa/QHAAAAAAAI0CNDoDwAYAAAAQIAGAVp/AMAAAAAAAjQI0OgPAAYAAAAQoEGARn8AwAAAAAACNAjQ+gMABgAAABCgQYCmGQmABgAAEKBBgEZ/AMAAAAAAAjQI0PoDAAYAAAAQoEGARn8AMAAAAIAADQI0+gMABgAAABCgQYDWHwAwAAAAgAANAjT6A4ABAAAABGgQoNEfADAAAACAAA0CtP4AgAEAAAAEaBCgaUYCoAEAAARoEKDRHwAwAAAAgAANArT+AIABAAAABGgQoNEfAAwAAAAgQIMAjf4AgAEAAAAEaBCg9QcADAAAACBAgwCN/gBgAAAAAAEaBGj0BwAMAAAAIECDAK0/AGAAAAAAARoEaJqRAGgAAAABGgRo9AcADAAAACBAgwCtPwBgAAAAAAEaBGj0BwADAAAACNAgQKM/AGAAAAAAARoEaP0BAAMAAAAI0CBAoz8AGAAAAECABgEa/QEAAwAAAAjQIEDrDwAYAAAAQIAGAZpmJACaBwAAAARoEKD1BwAMAAAAIECDAK0/AGAAAAAAARoEaPQHAAwAAAAgQIMArT8AYAAAAAABGgRo/QEAAwAAAAjQIECjPwBgAAAAAAEaBGj9AQADAAAACNAgQOsPABgAAABAgAYBGv0BAANwCwAAGB6gYeckmpEAaAAAAAEaBGj0BwAMAAAAIECDAK0/AGAAAAAAARoEaPQHAAMAAAAI0CBAoz8AYAAAAAABGgRo/QEAAwAAAAjQIECjPwAYAAAAQIAGARr9AQADAAAACNAgQOsPABgAAABAgAYBmmYkABoAAECABgEa/QEAAwAAAAjQIEDrDwAYAAAAQIAGARr9AcAAAAAAAjQI0OgPABgAAABAgAYBWn8AwAAAAAACNAjQ6A8ABgAAABCgQYBGfwDAAAAAAAI0CND6AwAGAAAAEKBBgKYZCYAGAAAQoEGARn8AwAAAAAACNAjQ+gMABgAAABCgQYBGfwAwAAAAgAANAjT6AwAGAAAAEKBBgNYfADAAAACAAA0CNPoDgAEAAAAEaBCg0R8AMAAAAIAADQK0/gCAAQAAAARoEKBpRgKgAQAABGgQoNEfADAAAACAAA0CtP4AgAEAAAAEaBCg0R8ADAAAACBAgwCN/gCAAQAAAARoEKD1BwAMAAAAIECDAI3+AGAAAAAAARoEaPQHAAwAAAAgQIMArT8AYAAAAAABGgRomsMAMAAAAIAADQK0/gCAAQAAAARoEKDRHwAwAAAAgAANO7fQHwAwAAAAgAANArT+AIABAAAABGgQoNEfAGgAAAABGgRo9AcADAAAACBAgwCtPwBgAAAAAAEaBGj0BwADAAAARIB+Ntg5iea5ADAAAADAIwI0CND6AwAGAAAAEKBBgEZ/AKABAAAEaBCg0R8AMAAAAIAADQK0/gCAAQAAAARoEKDRHwAMAAAAIECDAI3+AIABAAAABGgQoPUHAAwAAAAgQIMAjf4AYAAAAAABGgRo9AcADAAAACBAgwCtPwBgAAAAAAEaBGiakQBoAAAAARoEaPQHAAwAAAAgQIMArT8AYAAAAAABGgRo9AcAAwAAAAjQIECjPwBgAAAAAAEaBGj9AQADAAAACNAgQKM/ABgAAABAgAYBGv0BAAMAAAAI0CBA6w8AGAAAAECABgGaZiQAGgAAQIAGARr9AQADAAAACNAgQOsPABgAAABAgAYBGv0BwAAAAAACNAjQ6A8AGAAAAECABgFafwDAAAAAAAI0CNDoDwAGAAAAEKBBgEZ/AMAAAAAAAjQI0PoDAAYAAAAQoEGApjkMAAMAAAAI0CBA6w8AGAAAAECABgEa/QEAAwAAAAjQsIP+AIABAAAABGgQoPUHAAwAAAAgQIMAjf4AgAEAAABea/fK+3P5/3PJOvh8t1cO4nflmQAQoAEAAF9Aw/7JHfQHAAwAAAAgQIMArT8AYAAAAAABGvwHNPoDAA0AACBAgwCN/gCAAQAAAARoEKD1BwAMAAAAIECDAI3+AGAAAAAAARoEaPQHAAwAAAAgQIMArT8AYAAAAAABGgRo9AcAAwAAAAjQIECjPwBgAAAAAAEaBGj9AQADAAAACNAgQNOMBEADAAAI0CBAoz8AYAAAAAABGgRo/QEAAwAAAAjQIECjPwAYAAAAQIAGARr9AQADAAAACNAgQOsPABgAAABAgAYBGv0BwAAAAAACNAjQ6A8AGAAAAECABgFafwDAAAAAAAI0CNA0IwHQAAAAAjQI0OgPABgAAABAgAYBWn8AwAAAAAACNAjQ6A8ABgAAABCgQYBGfwDAAAAAAAI0CND6AwAGAAAAEKBBgEZ/ADAAAACAAA0CNPoDAAYAAAAQoEGA1h8AMAAAAIAADQI0DQAGAAAAEKBBgEZ/AMAAAAAAAjQI0PoDAAYAAAAQoEGA1h8AMAAAAIAADQI0+gMABgAAABCgQYDWHwAwAAAAgAANArT+AIABAAAABGgQoNEfADAAAACAAA0CtP4AgAEAAAAEaBCg9QcADAAAACBAgwCN/gCAAQAAAARoEKD1BwAMAAAAIECDAK0/AGAAAAAAARoEaPQHAAwAAAAgQIMArT8AYAAAAAABGgRo/QEAAwAAAAjQIECjPwBgACDhFgCAAA07t9AfADAAAACAAA0CtP4AgAEAAAAEaBCg0R8AaAAAAAEaBGj0BwAMAAAAIECDAK0/AGAAAAAAARoEaPQHAAMAAAAI0CBAoz8AYAAAAAABGgRo/QEAAwAAAAjQIECjPwAYAAAAQIAGARr9AQADAAAACNAgQOsPABgAAABAgAYBmmYkABoAAECABgEa/QEAAwAAAAjQIEDrDwAYAAAAQIAGARr9AcAAAAAAAjQI0OgPABgAAABAgAYBWn8AwAAAAAACNAjQ6A8ABgAAABCgQYBGfwDAAAAAAAI0CND6AwAGAAAAEKBBgKYZCYAGAAAQoEGARn8AwAAAAAACNAjQ+gMABgAAABCgQYBGfwAwAAAAgAANAjT6AwAGAAAAEKBBgNYfADAAAACAAA0CNPoDgAEAAAAEaBCg0R8AMAAAAIAADQK0/gCAAQAAAARoEKBpRgKgAQAABGgQoNEfADAAAACAAA0CtP4AgAEAAAAEaBCg0R8ADAAAACBAgwCN/gCAAQAAAARoEKD1BwAMAAAAIECDAI3+AGAAAAAAARoEaPQHAAwAAAAgQIMArT8AYAAAAAABGgRommEAMAAAACBAgwCN/gCAAQAAAARoEKD1BwAMAAAAIECDAI3+AIABAAAAARoEaPQHAAwAAAAgQIMArT8AYAAAAAABGgRo9AcAGgAAQICGCNBfRfNcABgAAABgeICGnVvoDwAYAAAAQIAGAVp/AMAAAAAAAjQI0OgPADQAAIAADQI0+gMABgAAABCgQYDWHwAwAAAAgAANAjT6A4ABAAAABGgQoNEfADAAAACAAA0CtP4AgAEAAAAEaBCg0R8ADAAAACBAgwCN/gCAAQAAAARoEKD1BwAMAAAAIECDAE0zEgANAAAgQIMAjf4AgAEAAAAEaBCg9QcADAAAACBAgwCN/gBgAAAAAAEaBGj0BwAMAAAAIECDAK0/AGAAAAAAARoEaPQHAAMAAAAI0CBAoz8AYAAAAAABGgRo/QEAAwAAAAjQIEDTjARAAwAACNAgQKM/AGAAAAAAARoEaP0BAAMAAAAI0CBAoz8AGAAAAECABgEa/QEAAwAAAAjQIEDrDwAYAAAAQIAGARr9AcAAAAAAAjQI0OgPABgAAABAgAYBWn8AwAAAAAACNAjQNIcBYAAAAAABGgRo/QEAAwAAAAjQIECjPwBgAAAAAAEadtAfADAAAACAAA0CtP4AgAEAAAAEaBCgAQABGgAA+AO2TAbHupOgHAAAAABJRU5ErkJggg==',
|
||||||
|
'_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