WIP - add extractor, generate snippet_data
This commit is contained in:
Stefan Fejes
207
node_modules/tinycolor2/index.html
generated
vendored
Normal file
207
node_modules/tinycolor2/index.html
generated
vendored
Normal file
@ -0,0 +1,207 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset='utf-8'>
|
||||
|
||||
<title>TinyColor - Fast, small color manipulation in JavaScript</title>
|
||||
|
||||
<link rel="stylesheet" href="demo/demo.css" type="text/css" media="screen" />
|
||||
<script type='text/javascript' src='demo/jquery-1.9.1.js'></script>
|
||||
<script type='text/javascript' src='tinycolor.js'></script>
|
||||
<script type='text/javascript'>
|
||||
|
||||
function colorChange(color) {
|
||||
var tiny = tinycolor(color);
|
||||
|
||||
var output = [
|
||||
"hex:\t" + tiny.toHexString(),
|
||||
"hex8:\t" + tiny.toHex8String(),
|
||||
"rgb:\t" + tiny.toRgbString(),
|
||||
"hsl:\t" + tiny.toHslString(),
|
||||
"hsv:\t" + tiny.toHsvString(),
|
||||
"name:\t" + (tiny.toName() || "none"),
|
||||
"format:\t" + (tiny.getFormat()),
|
||||
"format string:\t" + tiny.toString(),
|
||||
].join("\n");
|
||||
|
||||
$("#code-output").text(output).css("border-color", tiny.toHexString());
|
||||
|
||||
var filters = $("#filter-output").toggleClass("invisible", !tiny.isValid());
|
||||
|
||||
filters.find(".lighten").css("background-color",
|
||||
tinycolor(color).lighten(20).toHexString()
|
||||
);
|
||||
filters.find(".darken").css("background-color",
|
||||
tinycolor(color).darken(20).toHexString()
|
||||
);
|
||||
filters.find(".saturate").css("background-color",
|
||||
tinycolor(color).saturate(20).toHexString()
|
||||
);
|
||||
filters.find(".desaturate").css("background-color",
|
||||
tinycolor(color).desaturate(20).toHexString()
|
||||
);
|
||||
filters.find(".greyscale").css("background-color",
|
||||
tinycolor(color).greyscale().toHexString()
|
||||
);
|
||||
filters.find(".brighten").css("background-color",
|
||||
tinycolor(color).brighten(20).toHexString()
|
||||
);
|
||||
|
||||
var allColors = [];
|
||||
for (var i in tinycolor.names) {
|
||||
allColors.push(i);
|
||||
}
|
||||
var mostReadable = tinycolor.mostReadable(color, allColors);
|
||||
|
||||
$("#mostReadable").css("background-color",
|
||||
mostReadable.toHexString()
|
||||
);
|
||||
|
||||
var combines = $("#combine-output").toggleClass("invisible", !tiny.isValid());
|
||||
|
||||
function colorArrayToHTML(arr) {
|
||||
return $.map(arr, function(e) {
|
||||
return '<span style="background:'+e.toHexString()+'"></span>'
|
||||
}).join('');
|
||||
}
|
||||
|
||||
var triad = tiny.triad();
|
||||
combines.find(".triad").html(colorArrayToHTML(triad));
|
||||
console.log(triad.map(function(f) {return f.toHexString();}));
|
||||
|
||||
var tetrad = tiny.tetrad();
|
||||
combines.find(".tetrad").html(colorArrayToHTML(tetrad));
|
||||
|
||||
var mono = tiny.monochromatic();
|
||||
combines.find(".mono").html(colorArrayToHTML(mono));
|
||||
|
||||
var analogous = tiny.analogous();
|
||||
combines.find(".analogous").html(colorArrayToHTML(analogous));
|
||||
|
||||
var splitcomplement = tiny.splitcomplement();
|
||||
combines.find(".sc").html(colorArrayToHTML(splitcomplement));
|
||||
}
|
||||
|
||||
$(function() {
|
||||
$("#color").bind("keyup change", function() {
|
||||
colorChange($(this).val());
|
||||
});
|
||||
colorChange({r: 150, g: 0, b: 100});
|
||||
|
||||
$("#inputter a").click(function() {
|
||||
$("#color").val($(this).text()).trigger("change");
|
||||
return false;
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="container">
|
||||
<h1>TinyColor</h1>
|
||||
<h2>Fast, small color manipulation and conversion for JavaScript</h2>
|
||||
|
||||
<p>
|
||||
<a href="https://github.com/bgrins/TinyColor">TinyColor</a> is a micro framework for inputting colors and outputting colors as different formats.
|
||||
Input is meant to be as permissive as possible.
|
||||
</p>
|
||||
|
||||
<h3>Usage Documentation</h3>
|
||||
<p>Read all the documentation on the <a href='https://github.com/bgrins/TinyColor'>TinyColor project page</a> on github.</p>
|
||||
|
||||
<h3>Code</h3>
|
||||
<p><a href='docs/tinycolor.html'>View the annotated source code</a> or <a href='https://github.com/bgrins/TinyColor/blob/master/tinycolor.js'>see the full source on github</a>.</p>
|
||||
|
||||
<h3>Tests</h3>
|
||||
<p><a href='test/'>View the QUnit Tests</a>.</p>
|
||||
|
||||
<h3>Demo</h3>
|
||||
<div id='demo'>
|
||||
<div id='inputter'>
|
||||
<p>
|
||||
Enter a color: <input type="text" placeholder="any color." id='color' />
|
||||
</p>
|
||||
<p>
|
||||
Or try these:
|
||||
<a href="#">red</a>
|
||||
<a href="#">0f0</a>
|
||||
<a href="#">rgb 255 128 128</a>
|
||||
<a href='#'>hsl(0, 100%, 50%)</a>
|
||||
<a href='#'>hsv 0, 100%, 50%</a>
|
||||
</p>
|
||||
<p>And I'll tell you what I know about it:</p>
|
||||
</div>
|
||||
|
||||
<pre id='code-output'></pre>
|
||||
|
||||
<div id='filter-output'>
|
||||
<table>
|
||||
<tr>
|
||||
<th>Lighten</th>
|
||||
<td><div class='lighten'></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Darken</th>
|
||||
<td><div class='darken'></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Saturate</th>
|
||||
<td><div class='saturate'></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Desaturate</th>
|
||||
<td><div class='desaturate'></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Greyscale</th>
|
||||
<td><div class='greyscale'></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Brighten</th>
|
||||
<td><div class='brighten'></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Most Readable</th>
|
||||
<td><div id='mostReadable'></div></td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div id='combine-output'>
|
||||
<table>
|
||||
<tr>
|
||||
<th>Triad</th> <td><div class='triad'></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Tetrad</th> <td><div class='tetrad'></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Monochromatic</th> <td><div class='mono'></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Analogous</th> <td><div class='analogous'></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Split Complements</th> <td><div class='sc'></div></td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<h3>Credit</h3>
|
||||
<p>
|
||||
Developed by <a href='http://briangrinstead.com'>Brian Grinstead</a>. Big thanks to the following places:
|
||||
</p>
|
||||
<ul>
|
||||
<li><a href='https://github.com/cloudhead/less.js/blob/master/lib/less/functions.js'>less.js</a> for some of the modification functions</li>
|
||||
<li><a href='https://github.com/infusion/jQuery-xcolor/blob/master/jquery.xcolor.js'>jQuery xColor</a> for some of the combination functions</li>
|
||||
<li><a href='http://www.w3.org/TR/css3-color/#svg-color'>w3.org</a> for the color list and parsing rules</li>
|
||||
<li><a href='http://mjijackson.com/2008/02/rgb-to-hsl-and-rgb-to-hsv-color-model-conversion-algorithms-in-javascript'>mjijackson.com</a> for the first stab at RGB / HSL / HSV converters</li>
|
||||
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user