-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.html
173 lines (172 loc) · 9.64 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
<!DOCTYPE html><html class="no-js" lang="en">
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>ColourPicker.js</title>
<meta name="description" content="Colour Picker is a jQuery plugin for colour inputs">
<meta name="author" content="Jason Hibbs">
<link rel="shortcut icon" href="demo/src/img/meta/favicon.png?v=12">
<link rel="apple-touch-icon-precomposed" href="demo/src/img/meta/apple-touch-icon-precomposed.png?v=12">
<meta name="apple-mobile-web-app-title" content="ColourPicker">
<meta property="og:image" content="demo/src/img/meta/share.png?v=12">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="twitter:card" content="summary_large_image">
<link rel="stylesheet" href="demo/src/css/style.css">
<script>
document.documentElement.className=document.documentElement.className.replace('no-js','js')
</script><!--[if IEMobile]><meta http-equiv="cleartype" content="on"><![endif]-->
<body>
<header role="banner">
<div class="layout">
<h1 class="site_title"><a class="_unlink" href="index.html" title="The Homepage of ColourPicker.js">ColourPicker.js</a></h1>
<p>A jQuery plugin for colour inputs</p>
</div>
</header>
<main>
<div class="layout">
<p>Finally, a usable (accessible, rational, and responsive) colour picker for the web.</p>
<p>
<input id="titler" type="colour" placeholder="brown" value="gold" aria-label="Header Colour">
</p>
<p><a class="button_github" role="button" href="https://github.com/jasonhibbs/colourpicker.git"><i>
<svg class="octicon octicon-mark-github" version="1.1" width="14" height="14" viewbox="0 0 16 16" aria-hidden="true">
<path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path>
</svg></i><span>View on GitHub</span></a>
<a class="button_github" role="button" href="https://github.com/jasonhibbs/colourpicker/archive/master.zip"><i>
<svg class="octicon octicon-mark-github" version="1.1" width="14" height="14" viewbox="0 0 16 16" aria-hidden="true">
<path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path>
</svg></i><span>Download .zip</span></a>
</p>
<hr>
<h2>Why?</h2>
<p>I’ve not liked a single colour picker plugin I’ve found, and <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/color"><code><input type="color"/></code> is useless to me</a>.</p>
<p>The premise is simple: let people type their colour, or let them find one using a <a href="https://en.wikipedia.org/wiki/HSL_and_HSV">model designed with humans in mind</a>.</p>
<hr>
<h2>Setup</h2>
<p>Add the required files…</p>
<p>
<pre class="_code"><code><link rel="stylesheet" href="colourpicker.css">
<script src="jquery.min.js"></script>
<script src="tinycolor.js"></script>
<script src="colourpicker.js"></script>
</code></pre>
</p>
<p>Then…</p>
<p>
<pre class="_code _larger"><code><input type="colour"/></code></pre>
</p>
<p>Include <a href="https://jquery.com/download/">jQuery</a>, <a href="https://github.com/bgrins/TinyColor">TinyColor</a>, and the ColourPicker files, and simply put an <code><input type="colour"/></code> wherever you need one, or initialise an input with <code>$('#input').colourPicker(options)</code>.</p>
<p>Yes, that's the Old French spelling.</p>
<h3 class="h4">Compatibility</h3>
<p>It’s for the modern browsers, for sure. Here’s why:</p>
<ul>
<li><a href="https://caniuse.com/#feat=input-range">Sliders are range inputs</a></li>
<li><a href="https://caniuse.com/#feat=calc">Some gradients use calc()</a></li>
</ul>
<hr>
<h2>Examples</h2>
<label>
<p><code><input type="colour" placeholder="transparent" /></code></p>
<p>
<input type="colour" placeholder="transparent">
</p>
</label>
<label>
<p><code><input type="colour" no-alpha="true" value="dimgrey" /></code></p>
<p>
<input type="colour" no-alpha="true" value="dimgrey">
</p>
</label>
<label>
<p><code><input type="colour" placeholder="transparent" /></code></p>
<p>
<input type="colour" placeholder="gold" value="#44f">
</p>
</label>
<label>
<p><code><input type="colour" placeholder="black" disabled /></code></p>
<p>
<input type="colour" placeholder="black" disabled>
</p>
</label>
<label>
<p>Magic 🌈</p>
<p>
<input id="magic" type="colour" placeholder="yellow">
</p>
</label>
<hr>
<h2>Options</h2>
<pre class="_code"><code>$('#input').colourPicker({
autoSliders : true,
fallback : 'black',
fallbackAlpha : 'transparent',
forceHex : false,
matchInput : false,
noAlpha : false,
useLastValid : true,
});</code></pre>
<h3 class="h4">Attributes</h3>
<h4 class="h6"><code>[placeholder="skyblue"]</code></h4>
<p>The placeholder attribute is used as fallback when no input is given.</p>
<h4 class="h6"><code>[no-alpha="true"]</code></h4>
<p>Disables the alpha slider, disallows non-opaque colour. Same as <code>noAlpha: true</code>.</p>
<hr>
<h2>Methods</h2>
<pre class="_code"><code>$('#input').colourPicker('val' [, string]);
$('#input').colourPicker('hue' [, 0-360]);
$('#input').colourPicker('saturation' [, 0-1]);
$('#input').colourPicker('value' [, 0-1]);
$('#input').colourPicker('alpha' [, 0-1]);
$('#input').colourPicker('isDark');
$('#input').colourPicker('show');
$('#input').colourPicker('hide');
$('#input').colourPicker('toggle');
$('#input').colourPicker('destroy');
</code></pre>
<h3 class="h5">Colour</h3>
<p>get: <code>$('input').colourPicker('val'); => 'blue'</code></p>
<p>set: <code>$('input').colourPicker('val', 'red');</code></p>
<p>This is the current internal value of the ColourPicker, rather than what is in the input.</p>
<h3 class="h5">Hue</h3>
<p>get: <code>$('input').colourPicker('hue');</code></p>
<p>set: <code>$('input').colourPicker('hue', 360);</code></p>
<h3 class="h5">Saturation</h3>
<p>get: <code>$('input').colourPicker('saturation');</code></p>
<p>set: <code>$('input').colourPicker('saturation', 1);</code></p>
<h3 class="h5">Value (as in, HSV)</h3>
<p>get: <code>$('input').colourPicker('value');</code></p>
<p>set: <code>$('input').colourPicker('value', 1);</code></p>
<h3 class="h5">Alpha</h3>
<p>get: <code>$('input').colourPicker('alpha');</code></p>
<p>set: <code>$('input').colourPicker('alpha', 1);</code></p>
<h3 class="h5">isDark</h3>
<p><code>$('input').colourPicker('isDark'); // true or false</code></p>
<p>This is how we know if the arrow should be black or white for contrast</p>
<h3 class="h5">Show Controls</h3>
<p><code>$('input').colourPicker('show');</code></p>
<h3 class="h5">Hide Controls</h3>
<p><code>$('input').colourPicker('hide');</code></p>
<h3 class="h5">Toggle Controls</h3>
<p><code>$('input').colourPicker('toggle');</code></p>
<hr>
<h2>Style</h2>
<p>ColourPicker is designed to inherit existing input styles. The included LESS is minimal on the text input, and very basic for the slider popover. <a href="https://codepen.io/jasonhibbs/full/LdEXrm/">Here’s a minimal CSS demo</a>.</p>
<p>Since we’re using <code>input[type=range]</code> for the sliders, it is only compatible in recent browsers that allow styles here.</p>
<p>The particular style of this demo comes from my other project <a href="https://github.com/jasonhibbs/Pugless">Pugless</a> with only the addition of a focus style for the swatch button.</p>
<hr>
<h2>Is that it?</h2>
<p>I’m not a level 99 javascript developer so I’d appreciate that kind of feedback.</p>
<p>I have a few other to-dos.</p>
</div>
</main>
<footer role="contentinfo">
<div class="layout"><small>
©2018
<a class="_unlink" rel="author" href="http://jasonhibbs.co.uk">Jason Mervyn Hibbs</a><br><a class="_unlink" rel="license" href="https://opensource.org/licenses/MIT">MIT Licence</a></small></div>
</footer>
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>window.$ || document.write('<script src="demo/src/js/jquery-3.3.1.min.js"><\/script>')</script>
<script src="demo/src/js/script.min.js"></script></body>
</html>