cleanup and update of jquery-colorpicker dependency
This commit is contained in:
@ -1,210 +1,332 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>jQuery Colorpicker</title>
|
||||
<!-- jQuery/jQueryUI (hosted) -->
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>
|
||||
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/ui-lightness/jquery-ui.css" rel="stylesheet" type="text/css"/>
|
||||
<style>
|
||||
body {
|
||||
font-family: 'Segoe UI', Verdana, Arial, Helvetica, sans-serif;
|
||||
font-size: 62.5%;
|
||||
}
|
||||
</style>
|
||||
<script src="jquery.colorpicker.js"></script>
|
||||
<link href="jquery.colorpicker.css" rel="stylesheet" type="text/css"/>
|
||||
<script src="i18n/jquery.ui.colorpicker-nl.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<h1>jQuery ColorPicker</h1>
|
||||
|
||||
<hr/>
|
||||
|
||||
Basic <input> example, without any options: <input type="text" class="cp-basic" value="fe9810"/>
|
||||
|
||||
<hr/>
|
||||
|
||||
Basic <div> example, without any options: <span class="cp-basic" style="display: inline-block; vertical-align: top;"></span>
|
||||
<script>
|
||||
$( function() {
|
||||
$('.cp-basic').colorpicker();
|
||||
});
|
||||
</script>
|
||||
|
||||
<hr/>
|
||||
|
||||
Fully-featured example: <input type="text" class="cp-full" value="186aa7"/>
|
||||
<script>
|
||||
$( function() {
|
||||
$('.cp-full').colorpicker({
|
||||
parts: 'full',
|
||||
showOn: 'both',
|
||||
buttonColorize: true,
|
||||
showNoneButton: true,
|
||||
alpha: true
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<hr/>
|
||||
|
||||
Localized to Dutch (nl): <input type="text" class="cp-nl" value="ccea73"/>
|
||||
<script>
|
||||
$( function() {
|
||||
$('.cp-nl').colorpicker({
|
||||
regional: 'nl',
|
||||
showNoneButton: true,
|
||||
alpha: true
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<hr/>
|
||||
|
||||
Limit to websafe colors: <input type="text" class="cp-websafe" value="0fa7c2"/>
|
||||
<script>
|
||||
$( function() {
|
||||
$('.cp-websafe').colorpicker({
|
||||
limit: 'websafe'
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<hr/>
|
||||
|
||||
Alternative field class: <input type="text" class="cp-alt" value="b762ae"/>
|
||||
<span class="cp-alt-target" style="display: inline-block; border: thin solid black; padding: .5em 4em;">
|
||||
<div style=" background-color: white; border: thin solid black; padding: .25em 2em; font-size: 1.25em; font-weight: bold;">Background-color on outside, text color here</div>
|
||||
</span>
|
||||
<script>
|
||||
$( function() {
|
||||
$('.cp-alt').colorpicker({
|
||||
altField: '.cp-alt-target',
|
||||
altProperties: 'background-color,color',
|
||||
altAlpha: true,
|
||||
alpha: true
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<hr/>
|
||||
|
||||
Events: <input type="text" class="cp-events" value="92b64a"/>
|
||||
<div class="cp-events-log" style="vertical-align: top; display: inline-block; border: thin solid black; height: 10em; overflow-y: scroll; width: 50em;"></div>
|
||||
<script>
|
||||
$( function() {
|
||||
var count = 0;
|
||||
|
||||
function addToEventLog(label, message) {
|
||||
var line = '<div>#'+(++count)+' '+label+': '+message+'</div>';
|
||||
var log = $('.cp-events-log');
|
||||
log.append(line).scrollTop(log[0].scrollHeight);
|
||||
}
|
||||
|
||||
$('.cp-events').colorpicker({
|
||||
init: function(event, color) {
|
||||
addToEventLog('Init', color.formatted);
|
||||
},
|
||||
select: function(event, color) {
|
||||
addToEventLog('Select', color.formatted);
|
||||
},
|
||||
close: function(event, color) {
|
||||
addToEventLog('Close', color.formatted + ' r:' + color.rgb.r + ' g:' + color.rgb.g + ' b:' + color.rgb.b + ' a:' + color.a);
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<hr/>
|
||||
|
||||
Output formatting HSLA: <input type="text" class="cp-format" value="918237"/>
|
||||
<span class="cp-format-output"></span>
|
||||
<script>
|
||||
$( function() {
|
||||
$('.cp-format').colorpicker({
|
||||
colorFormat: 'HSLA',
|
||||
alpha: true,
|
||||
init: function(event, color) {
|
||||
$('.cp-format-output').text(color.formatted);
|
||||
},
|
||||
select: function(event, color) {
|
||||
$('.cp-format-output').text(color.formatted);
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<hr/>
|
||||
|
||||
Output format list: <input type="text" class="cp-name" value="a92fb4"/>
|
||||
<span class="cp-name-output"></span>
|
||||
<script>
|
||||
$( function() {
|
||||
$('.cp-name').colorpicker({
|
||||
parts: 'full',
|
||||
colorFormat: ['NAME', 'EXACT', '#HEX3', 'RGB', 'RGBA'],
|
||||
init: function(event, color) {
|
||||
$('.cp-name-output').text(color.formatted);
|
||||
},
|
||||
select: function(event, color) {
|
||||
$('.cp-name-output').text(color.formatted);
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<hr/>
|
||||
|
||||
Dialog with Colorpicker popup (demonstrates z-index):
|
||||
<button id="cp-dialog-open">Open dialog</button>
|
||||
<div id="cp-dialog-modal" title="Basic modal dialog">
|
||||
Basic <input> example, without any options: <input type="text" class="cp-basic" value="fe9810"/>
|
||||
<br/>
|
||||
Basic <div> example, without any options: <span class="cp-basic" style="display: inline-block; vertical-align: top;"></span>
|
||||
</div>
|
||||
<script>
|
||||
$(function() {
|
||||
var dialog = $('#cp-dialog-modal').dialog({
|
||||
autoOpen: false,
|
||||
minWidth: 500,
|
||||
modal: true,
|
||||
buttons: { 'Close': function() {
|
||||
$(this).dialog('close');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
$('#cp-dialog-open').click(function() {
|
||||
dialog.dialog('open');
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<hr/>
|
||||
|
||||
Modal (and showCancelButton, closeOnEscape, showCloseButton): <input type="text" class="cp-modal" value="9ba73f"/>
|
||||
<script>
|
||||
$( function() {
|
||||
$('.cp-modal').colorpicker({
|
||||
parts: 'draggable',
|
||||
showCloseButton: false,
|
||||
modal: true,
|
||||
showCancelButton: false,
|
||||
closeOnEscape: false
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<hr/>
|
||||
|
||||
Input formatting: <input type="text" class="cp-input" value="rgb(123,42,87)"/>
|
||||
<script>
|
||||
$( function() {
|
||||
$('.cp-input').colorpicker({
|
||||
colorFormat: ['RGBA']
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<title>jQuery.Colorpicker</title>
|
||||
|
||||
<!-- jQuery/jQueryUI (hosted) -->
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/jquery-ui.js"></script>
|
||||
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/themes/ui-lightness/jquery-ui.css" rel="stylesheet" type="text/css"/>
|
||||
|
||||
<!-- Markdown parser -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/pagedown/1.0/Markdown.Converter.min.js"></script>
|
||||
|
||||
<!-- Prettyprint -->
|
||||
<link href="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.css" rel="stylesheet" type="text/css"/>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.js"></script>
|
||||
|
||||
<!-- Index -->
|
||||
<style>
|
||||
body {
|
||||
font-family: "Segoe UI", Verdana, Helvetica, Arial, sans-serif;
|
||||
font-size: 11px;
|
||||
padding: 3em 8em 1em 4em;
|
||||
}
|
||||
|
||||
#logo {
|
||||
background: url('images/logotype-a.png') no-repeat center center;
|
||||
background-size: contain;
|
||||
height: 20em;
|
||||
}
|
||||
|
||||
#preview {
|
||||
text-align: center;
|
||||
}
|
||||
#preview > * {
|
||||
box-shadow: 0 0 2em silver;
|
||||
padding: 2em;
|
||||
}
|
||||
|
||||
.chapter {
|
||||
-webkit-columns: 460px;
|
||||
-moz-columns: 460px;
|
||||
columns: 460px;
|
||||
|
||||
-webkit-column-gap: 4em;
|
||||
-moz-column-gap: 4em;
|
||||
column-gap: 4em;
|
||||
|
||||
-webkit-column-rule: thin solid silver;
|
||||
-moz-column-rule: thin solid silver;
|
||||
column-rule: thin solid silver;
|
||||
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
background: black;
|
||||
color: white;
|
||||
padding: .2em .4em;
|
||||
}
|
||||
h1 {
|
||||
margin-top: 1em;
|
||||
}
|
||||
h2 {
|
||||
background: gray;
|
||||
}
|
||||
|
||||
hr {
|
||||
border-top: double;
|
||||
margin: 2em 25%;
|
||||
}
|
||||
|
||||
#footer {
|
||||
margin-top: 4em;
|
||||
text-align: center;
|
||||
color: silver;
|
||||
border-top: thin solid silver;
|
||||
padding-top: 1em;
|
||||
}
|
||||
|
||||
.output {
|
||||
font-family: monospace;
|
||||
border: solid thin silver;
|
||||
padding: .2em .4em;
|
||||
background-color: #cf3;
|
||||
}
|
||||
|
||||
.clickable {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
pre {
|
||||
tab-size: 4;
|
||||
overflow-x: auto;
|
||||
background-color: #eee;
|
||||
-webkit-column-break-inside: avoid;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
$(function() {
|
||||
function tabsToSpaces(line, tabsize) {
|
||||
var out = '',
|
||||
tabsize = tabsize || 4,
|
||||
c;
|
||||
for (c in line) {
|
||||
var ch = line.charAt(c);
|
||||
if (ch === '\t') {
|
||||
do {
|
||||
out += ' ';
|
||||
} while (out.length % tabsize);
|
||||
} else {
|
||||
out += ch;
|
||||
}
|
||||
}
|
||||
return out;
|
||||
}
|
||||
|
||||
function visualizeElement(element, type) {
|
||||
var code = $(element).html().split('\n'),
|
||||
tabsize = 4,
|
||||
minlength = 2E53,
|
||||
l;
|
||||
|
||||
// Convert tabs to spaces
|
||||
for (l in code) {
|
||||
code[l] = tabsToSpaces(code[l], tabsize);
|
||||
}
|
||||
|
||||
|
||||
// determine minimum length
|
||||
var minlength = 2E53;
|
||||
var first = 2E53;
|
||||
var last = 0;
|
||||
for (l in code) {
|
||||
if (/\S/.test(code[l])) {
|
||||
minlength = Math.min(minlength, /^\s*/.exec(code[l])[0].length);
|
||||
first = Math.min(first, l);
|
||||
last = Math.max(last, l);
|
||||
}
|
||||
}
|
||||
|
||||
code = code.slice(first, last + 1);
|
||||
|
||||
// strip tabs at start
|
||||
for (l in code) {
|
||||
code[l] = code[l].slice(minlength);
|
||||
}
|
||||
|
||||
// recombine
|
||||
code = code.join('\n');
|
||||
|
||||
var fragment = $('<pre class="prettyprint"><code/></pre>').text(code).insertAfter(element);
|
||||
$('<h3 class="clickable">'+type+'…</h3>').insertBefore(fragment).click(function() {
|
||||
fragment.slideToggle();
|
||||
});
|
||||
}
|
||||
|
||||
// extract html fragments
|
||||
$('div.prettyprint, span.prettyprint').each(function() {
|
||||
visualizeElement(this, 'HTML');
|
||||
});
|
||||
|
||||
// extract scripts
|
||||
$('script.prettyprint').each(function() {
|
||||
visualizeElement(this, 'Javascript');
|
||||
});
|
||||
|
||||
// Include the readme
|
||||
var markdown = new Markdown.Converter();
|
||||
$.get('README.md', function(readme) {
|
||||
$('#readme').html(markdown.makeHtml(readme));
|
||||
$('#readme h1').each(function() {
|
||||
$(this).nextUntil('h1').wrapAll('<div class="chapter"/>');
|
||||
});
|
||||
$('#readme pre').addClass('prettyprint');
|
||||
prettyPrint();
|
||||
|
||||
// build menu
|
||||
var menuitems = [];
|
||||
$('h1').each(function() {
|
||||
var text = $(this).text(),
|
||||
id = $(this).attr('id') || 'chapter '+text;
|
||||
$(this).attr('id', id);
|
||||
menuitems.push('<a href="#'+id+'">'+text+'</a>');
|
||||
});
|
||||
$(menu).html(menuitems.join(' — '));
|
||||
}, 'html');
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- Plugin -->
|
||||
<script src="jquery.colorpicker.js"></script>
|
||||
<link href="jquery.colorpicker.css" rel="stylesheet" type="text/css"/>
|
||||
|
||||
<!-- Plugin extensions -->
|
||||
<script src="i18n/jquery.ui.colorpicker-nl.js"></script>
|
||||
<script src="parts/jquery.ui.colorpicker-rgbslider.js"></script>
|
||||
<script src="parts/jquery.ui.colorpicker-memory.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<a href="https://github.com/vanderlee/colorpicker"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>
|
||||
|
||||
<div id="menu"></div>
|
||||
|
||||
<div id="logo"></div>
|
||||
|
||||
<div id="preview">
|
||||
<span id="colorpicker-preview" style="display: inline-block; vertical-align: top;"></span>
|
||||
<script>
|
||||
$(function() {
|
||||
$('#colorpicker-preview').colorpicker({
|
||||
parts: 'full',
|
||||
alpha: true
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</div>
|
||||
|
||||
<div id="book">
|
||||
<div id="readme"></div>
|
||||
|
||||
<h1>Examples</h1>
|
||||
<div id="examples" class="chapter">
|
||||
Try it yourself…
|
||||
|
||||
<h2>Simple popup</h2>
|
||||
<div class="prettyprint">
|
||||
<input type="text" id="colorpicker-popup" value="fe9810"/>
|
||||
</div>
|
||||
<script class="prettyprint">
|
||||
$(function() {
|
||||
$('#colorpicker-popup').colorpicker();
|
||||
});
|
||||
</script>
|
||||
|
||||
<h2>Fully featured popup</h2>
|
||||
<div class="prettyprint">
|
||||
<input type="text" id="colorpicker-full" value="fe9810"/>
|
||||
</div>
|
||||
<script class="prettyprint">
|
||||
$(function() {
|
||||
$('#colorpicker-full').colorpicker({
|
||||
parts: 'full',
|
||||
alpha: true,
|
||||
showOn: 'both',
|
||||
buttonColorize: true,
|
||||
showNoneButton: true
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<h2>Custom layout</h2>
|
||||
<div class="prettyprint">
|
||||
<input type="text" id="colorpicker-layout" value="fe9810"/>
|
||||
</div>
|
||||
<script class="prettyprint">
|
||||
$(function() {
|
||||
$('#colorpicker-layout').colorpicker({
|
||||
parts: [ 'header', 'map', 'bar', 'hex',
|
||||
'hsv', 'rgb', 'alpha', 'preview',
|
||||
'swatches', 'footer'
|
||||
],
|
||||
alpha: true,
|
||||
layout: {
|
||||
hex: [0, 0, 2, 1],
|
||||
preview: [2, 0, 1, 1],
|
||||
map: [0, 1, 3, 1],
|
||||
bar: [0, 2, 1, 4],
|
||||
swatches: [2, 2, 1, 4],
|
||||
rgb: [1, 2, 1, 1],
|
||||
hsv: [1, 3, 1, 1],
|
||||
alpha: [1, 4, 1, 1],
|
||||
lab: [0, 5, 1, 1],
|
||||
cmyk: [1, 5, 1, 2]
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<h2>Plugins</h2>
|
||||
<div class="prettyprint">
|
||||
<input type="text" id="colorpicker-plugins" value="fe9810"/>
|
||||
</div>
|
||||
<script class="prettyprint">
|
||||
$(function() {
|
||||
$('#colorpicker-plugins').colorpicker({
|
||||
parts: [ 'header', 'preview', 'hex',
|
||||
'rgbslider', 'memory', 'footer'
|
||||
],
|
||||
layout: {
|
||||
preview: [0, 0, 1, 1],
|
||||
hex: [1, 0, 1, 1],
|
||||
rgbslider: [0, 1, 2, 1],
|
||||
memory: [0, 2, 2, 1]
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<h2>Localization</h2>
|
||||
<div class="prettyprint">
|
||||
<input type="text" id="colorpicker-l10n" value="fe9810"/>
|
||||
</div>
|
||||
<script class="prettyprint">
|
||||
$(function() {
|
||||
$('#colorpicker-l10n').colorpicker({
|
||||
parts: 'draggable',
|
||||
regional: 'nl',
|
||||
showNoneButton: true,
|
||||
alpha: true
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<h2>More examples…</h2>
|
||||
Click here view a lot more demo's <a href="demo.html" target="_blank">Demos</a>
|
||||
</div>
|
||||
|
||||
<h1>Unittest</h1>
|
||||
<div id="unittest" class="chapter">
|
||||
jQuery.colorpicker comes with a small set of QUnit-based unittests.<br/>
|
||||
Click here to run the tests in a new window: <a href="test/index.html" target="_blank">Unittests</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="footer">
|
||||
Copyright © 2011-2017 Martijn van der Lee. MIT Open Source license applies.
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
Reference in New Issue
Block a user