├── .editorconfig
├── .eslintrc
├── .github
    └── FUNDING.yml
├── .gitignore
├── LICENSE.md
├── README.md
├── bower.json
├── component.json
├── composer.json
├── gulpfile.js
├── index.html
├── jquery.minicolors.css
├── jquery.minicolors.js
├── jquery.minicolors.min.js
├── jquery.minicolors.png
├── package-lock.json
├── package.json
└── without-bootstrap.html


/.editorconfig:
--------------------------------------------------------------------------------
 1 | root = true
 2 | 
 3 | [*]
 4 | indent_style = space
 5 | indent_size = 2
 6 | end_of_line = lf
 7 | charset = utf-8
 8 | trim_trailing_whitespace = true
 9 | insert_final_newline = true
10 | 


--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "rules": {
 3 |     "no-console": ["off"],
 4 |     "indent": ["error", 2],
 5 |     "quotes": ["error", "single"],
 6 |     "linebreak-style": ["error", "unix"],
 7 |     "no-unused-vars": ["warn", { "vars": "all", "args": "after-used" }],
 8 |     "semi": ["error", "always"]
 9 |   },
10 |   "env": {
11 |     "browser": true,
12 |     "jquery": true
13 |   },
14 |   "extends": "eslint:recommended",
15 |   "globals": {
16 |     "define": true,
17 |     "module": true,
18 |     "require": true
19 |   }
20 | }
21 | 


--------------------------------------------------------------------------------
/.github/FUNDING.yml:
--------------------------------------------------------------------------------
1 | github: [claviska]
2 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules/*
3 | 


--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
1 | Copyright 2017 A Beautiful Site, LLC
2 | 
3 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
4 | 
5 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
6 | 
7 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
8 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # jQuery MiniColors: A tiny color picker built on jQuery
 2 | 
 3 | Developed by Cory LaViska for A Beautiful Site, LLC
 4 | 
 5 | Licensed under the MIT license: http://opensource.org/licenses/MIT
 6 | 
 7 | ## Install via NPM
 8 | 
 9 | This is the official NPM version of MiniColors:
10 | 
11 | ```
12 | npm install --save @claviska/jquery-minicolors
13 | ```
14 | 
15 | **Note:** There is another version on NPM without the namespace that is out of date and not supported. I did not create it nor do I have control of it. Please use the official NPM version to ensure you have the latest updates.
16 | 


--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "jquery-minicolors",
 3 |   "version": "2.3.6",
 4 |   "homepage": "https://github.com/claviska/jquery-minicolors",
 5 |   "authors": ["Cory LaViska"],
 6 |   "description": "jQuery MiniColors Plugin",
 7 |   "main": ["./jquery.minicolors.js", "./jquery.minicolors.css"],
 8 |   "keywords": ["jquery", "colorpicker"],
 9 |   "license": "MIT",
10 |   "ignore": ["**/.*", "node_modules", "bower_components", "test", "tests"]
11 | }
12 | 


--------------------------------------------------------------------------------
/component.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "jquery-minicolors",
 3 |   "version": "2.3.6",
 4 |   "description": "jQuery MiniColors Plugin",
 5 |   "homepage": "",
 6 |   "main": ["./jquery.minicolors.js", "./jquery.minicolors.css"],
 7 |   "dependencies": {
 8 |     "jquery": ">= 1.7.x"
 9 |   },
10 |   "keywords": ["jquery", "colorpicker"],
11 |   "author": {
12 |     "name": "Cory LaViska",
13 |     "web": "http://www.abeautifulsite.net/"
14 |   },
15 |   "license": ["http://www.opensource.org/licenses/mit-license.php"]
16 | }
17 | 


--------------------------------------------------------------------------------
/composer.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "abeautifulsite/jquery-minicolors",
 3 |   "type": "component",
 4 |   "description": "jQuery MiniColors Plugin",
 5 |   "homepage": "http://www.abeautifulsite.net/",
 6 |   "license": "MIT",
 7 |   "extra": {
 8 |     "component": {
 9 |       "scripts": [
10 |         "jquery.minicolors.js"
11 |       ],
12 |       "files": [
13 |         "jquery.minicolors.js",
14 |         "jquery.minicolors.min.js",
15 |         "jquery.minicolors.css",
16 |         "jquery.minicolors.png"
17 |       ]
18 |     }
19 |   }
20 | }


--------------------------------------------------------------------------------
/gulpfile.js:
--------------------------------------------------------------------------------
 1 | /* eslint-env node, es6 */
 2 | 'use strict';
 3 | 
 4 | const gulp = require('gulp');
 5 | const del = require('del');
 6 | const rename = require('gulp-rename');
 7 | const uglify = require('gulp-uglify');
 8 | 
 9 | // Clean
10 | gulp.task('clean', gulp.series(() => {
11 |   return del('jquery.minicolors.min.js');
12 | }));
13 | 
14 | // Minify
15 | gulp.task('minify', gulp.series('clean', () => {
16 |   return gulp.src('jquery.minicolors.js')
17 |     .pipe(uglify({
18 |       output: {
19 |         comments: require('uglify-save-license')
20 |       }
21 |     }))
22 |     .on('error', (err) => {
23 |       console.error(err);
24 |       this.emit('end');
25 |     })
26 |     .pipe(rename({ suffix: '.min' }))
27 |     .pipe(gulp.dest(__dirname));
28 | }));
29 | 
30 | // Watch for changes
31 | gulp.task('watch', gulp.series(() => {
32 |   gulp.watch('jquery.minicolors.js', ['minify']);
33 | }));
34 | 
35 | // Default
36 | gulp.task('default', gulp.series('minify'));
37 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 |   <title>jQuery MiniColors</title>
  5 |   <meta charset="utf-8">
  6 | 
  7 |   <!-- jQuery -->
  8 |   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  9 | 
 10 |   <!-- Bootstrap 3 -->
 11 |   <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
 12 |   <script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
 13 | 
 14 |   <!-- MiniColors -->
 15 |   <script src="jquery.minicolors.js"></script>
 16 |   <link rel="stylesheet" href="jquery.minicolors.css">
 17 | 
 18 |   <style>
 19 |     dl {
 20 |       margin: 20px 0;
 21 |     }
 22 |     dt {
 23 |       font-size: 120%;
 24 |     }
 25 |     dd {
 26 |       padding: 10px 20px 20px 20px;
 27 |     }
 28 |     dd:last-child {
 29 |       border-bottom: none;
 30 |     }
 31 |     code {
 32 |       color: black;
 33 |       border: none;
 34 |       background: rgba(128, 128, 128, .1);
 35 |     }
 36 |     [dir=rtl] code {
 37 |       direction: ltr;
 38 |     }
 39 |     pre {
 40 |       background: #f8f8f8;
 41 |       border: none;
 42 |       color: #333;
 43 |       padding: 20px;
 44 |     }
 45 |     [dir=rtl] pre {
 46 |       direction: ltr;
 47 |     }
 48 |     h2 {
 49 |       margin-top: 50px;
 50 |     }
 51 |     h3 {
 52 |       color: #aaa;
 53 |     }
 54 |     .jumbotron {
 55 |       padding: 40px;
 56 |     }
 57 |     .jumbotron h1 {
 58 |       margin-top: 0;
 59 |     }
 60 |     .jumbotron p:last-child {
 61 |       margin-bottom: 0;
 62 |     }
 63 |   </style>
 64 | 
 65 |   <script>
 66 |     $(document).ready( function() {
 67 | 
 68 |       $('.demo').each( function() {
 69 |         //
 70 |         // Dear reader, it's actually very easy to initialize MiniColors. For example:
 71 |         //
 72 |         //  $(selector).minicolors();
 73 |         //
 74 |         // The way I've done it below is just for the demo, so don't get confused
 75 |         // by it. Also, data- attributes aren't supported at this time...they're
 76 |         // only used for this demo.
 77 |         //
 78 |         $(this).minicolors({
 79 |           control: $(this).attr('data-control') || 'hue',
 80 |           defaultValue: $(this).attr('data-defaultValue') || '',
 81 |           format: $(this).attr('data-format') || 'hex',
 82 |           keywords: $(this).attr('data-keywords') || '',
 83 |           inline: $(this).attr('data-inline') === 'true',
 84 |           letterCase: $(this).attr('data-letterCase') || 'lowercase',
 85 |           opacity: $(this).attr('data-opacity'),
 86 |           position: $(this).attr('data-position') || 'bottom',
 87 |           swatches: $(this).attr('data-swatches') ? $(this).attr('data-swatches').split('|') : [],
 88 |           change: function(value, opacity) {
 89 |             if( !value ) return;
 90 |             if( opacity ) value += ', ' + opacity;
 91 |             if( typeof console === 'object' ) {
 92 |               console.log(value);
 93 |             }
 94 |           },
 95 |           theme: 'bootstrap'
 96 |         });
 97 | 
 98 |       });
 99 | 
100 |     });
101 |   </script>
102 | </head>
103 | <body>
104 |   <div class="row" style="margin: 40px 40px;">
105 |     <div class="col-12">
106 | 
107 |       <!-- Intro -->
108 |       <div id="intro" class="jumbotron">
109 |         <h1>jQuery MiniColors</h1>
110 |         <p class="text-muted">
111 |           Now with Bootstrap 3 support!
112 |         </p>
113 |         <p>
114 |           A project by <a href="https://www.abeautifulsite.net/">A Beautiful Site</a>,
115 |           originally developed for <a href="https://www.surrealcms.com/">Surreal CMS</a>.
116 |         </p>
117 |       </div>
118 | 
119 |       <!-- Contents -->
120 |       <h2 id="contents">Contents</h2>
121 |       <ul>
122 |         <li><a href="#download">Download</a></li>
123 |         <li><a href="#demos">Demos</a></li>
124 |         <li><a href="#api">API</a>
125 |           <ul>
126 |             <li><a href="#instantiation">Instantiation</a></li>
127 |             <li><a href="#settings">Settings</a></li>
128 |             <li><a href="#methods">Methods</a></li>
129 |             <li><a href="#events">Events</a></li>
130 |           </ul>
131 |         </li>
132 |         <li><a href="#license">License</a></li>
133 |       </ul>
134 | 
135 |       <!-- Download -->
136 |       <h2 id="download">Download</h2>
137 |       <p>
138 |         This project is on GitHub. Feel free to post bug reports, feature requests, and code
139 |         improvements on the official project page.
140 |       </p>
141 |       <p>
142 |         <a href="https://github.com/claviska/jquery-minicolors" class="btn btn-success">Download on GitHub</a>
143 |       </p>
144 | 
145 |       <!-- Demos -->
146 |       <h2 id="demos">Demos</h2>
147 |       <p>
148 |         This is the main demo page, which uses <a href="https://getbootstrap.com/">Bootstrap 3</a>,
149 |         but this plugin works without Bootstrap as well.
150 |       </p>
151 |       <p>
152 |         <a href="without-bootstrap.html" class="btn btn-primary">View Demo Without Bootstrap</a>
153 |       </p>
154 |       <p>
155 |         <a class="btn btn-primary" onclick="$(body).attr('dir')=='rtl'?$(body).removeAttr('dir'):$(body).attr('dir', 'rtl')">Toggle LTR/RTL</a>
156 |       </p>
157 | 
158 |       <!-- Control types -->
159 |       <h3>Control Types</h3>
160 |       <div class="well">
161 |         <div class="row">
162 |           <div class="col-lg-4 col-sm-4 col-12">
163 | 
164 |             <div class="form-group">
165 |               <label for="hue-demo">Hue (default)</label>
166 |               <input type="text" id="hue-demo" class="form-control demo" data-control="hue" value="#ff6161">
167 |             </div>
168 |             <div class="form-group">
169 |               <label for="saturation-demo">Saturation</label>
170 |               <input type="text" id="saturation-demo" class="form-control demo" data-control="saturation" value="#0088cc">
171 |             </div>
172 |           </div>
173 | 
174 |           <div class="col-lg-4 col-sm-4 col-12">
175 |             <div class="form-group">
176 |               <label for="brightness-demo">Brightness</label>
177 |               <input type="text" id="brightness-demo" class="form-control demo" data-control="brightness" value="#00ffff">
178 |             </div>
179 |             <div class="form-group">
180 |               <label for="wheel-demo">Wheel</label>
181 |               <input type="text" id="wheel-demo" class="form-control demo" data-control="wheel" value="#ff99ee">
182 |             </div>
183 |           </div>
184 |         </div>
185 |       </div>
186 | 
187 |       <!-- Input modes -->
188 |       <h3>Input Modes</h3>
189 |       <div class="well">
190 |         <div class="row">
191 |           <div class="col-lg-4 col-sm-4 col-12">
192 |             <div class="form-group">
193 |               <label for="text-field">Text field</label>
194 |               <br>
195 |               <input type="text" id="text-field" class="form-control demo" value="#70c24a">
196 |             </div>
197 |             <div class="form-group">
198 |               <label for="hidden-input">Hidden Input</label>
199 |               <br>
200 |               <input type="hidden" id="hidden-input" class="demo" value="#db913d">
201 |             </div>
202 |           </div>
203 |           <div class="col-lg-4 col-sm-4 col-12">
204 |             <div class="form-group">
205 |               <label for="inline">Inline</label>
206 |               <br>
207 |               <input type="text" id="inline" class="form-control demo" data-inline="true" value="#4fc8db">
208 |             </div>
209 |           </div>
210 |         </div>
211 |       </div>
212 | 
213 |       <!-- Positions -->
214 |       <h3>Positions</h3>
215 |       <div class="well">
216 |         <p>
217 |           Valid positions include <code>bottom left</code>, <code>bottom right</code>, <code>top
218 |           left</code>, and <code>top right</code>.
219 |         </p>
220 |         <div class="row">
221 |           <div class="col-lg-4 col-sm-4 col-12">
222 |             <div class="form-group">
223 |               <label for="position-bottom-left">bottom left (default)</label>
224 |               <input type="text" id="position-bottom-left" class="form-control demo" data-position="bottom left" value="#0088cc">
225 |             </div>
226 |             <div class="form-group">
227 |               <label for="position-top-left">top left</label>
228 |               <input type="text" id="position-top-left" class="form-control demo" data-position="top left" value="#0088cc">
229 |             </div>
230 |           </div>
231 |           <div class="col-lg-4 col-sm-4 col-12">
232 |             <div class="form-group">
233 |               <label for="position-bottom-right">bottom right</label>
234 |               <input type="text" id="position-bottom-right" class="form-control demo" data-position="bottom right" value="#0088cc">
235 |             </div>
236 |             <div class="form-group">
237 |               <label for="position-top-right">top right</label>
238 |               <input type="text" id="position-top-right" class="form-control demo" data-position="top right" value="#0088cc">
239 |             </div>
240 |           </div>
241 |           <div class="col-lg-4 col-sm-4 col-12">
242 |           </div>
243 |         </div>
244 |       </div>
245 | 
246 |       <!-- RGB(A) -->
247 |       <h3>RGB(A)</h3>
248 |       <div class="well">
249 |         <div class="row">
250 |           <div class="col-lg-4 col-sm-4 col-12">
251 |             <div class="form-group">
252 |               <label for="rgb">RGB</label>
253 |               <br>
254 |               <input type="text" id="rgb" class="form-control demo" data-format="rgb" value="rgb(33, 147, 58)">
255 |               <span class="help-block">
256 |                 RGB input can be assigned by setting the <code>format</code> option
257 |                 to <code>rgb</code>.
258 |               </span>
259 |             </div>
260 |           </div>
261 |           <div class="col-lg-4 col-sm-4 col-12">
262 |             <div class="form-group">
263 |               <label for="rgba">RGBA</label>
264 |               <br>
265 |               <input type="text" id="rgba" class="form-control demo" data-format="rgb" data-opacity=".5" value="rgba(52, 64, 158, 0.5)">
266 |               <span class="help-block">
267 |                 RGBA input can be assigned by setting the <code>format</code>
268 |                 option to <code>rgb</code> and <code>opacity</code> option to
269 |                 <code>true</code>.
270 |               </span>
271 |             </div>
272 |           </div>
273 |         </div>
274 |       </div>
275 | 
276 |       <!-- and more -->
277 |       <h3>&hellip;and more!</h3>
278 |       <div class="well">
279 |         <div class="row">
280 |           <div class="col-lg-4 col-sm-4 col-12">
281 |             <div class="form-group">
282 |               <label for="opacity">Opacity</label>
283 |               <br>
284 |               <input type="text" id="opacity" class="form-control demo" data-opacity=".5" value="#766fa8">
285 |               <span class="help-block">
286 |                 Opacity can be assigned by including the <code>data-opacity</code>
287 |                 attribute or by setting the <code>opacity</code> option to
288 |                 <code>true</code>.
289 |               </span>
290 |             </div>
291 |           </div>
292 |           <div class="col-lg-4 col-sm-4 col-12">
293 |             <div class="form-group">
294 |               <label for="keywords">Keywords</label>
295 |               <br>
296 |               <input type="text" id="keywords" class="form-control demo" data-keywords="transparent, initial, inherit" value="transparent">
297 |               <span class="help-block">
298 |                 CSS-wide keywords can be assigned by setting the <code>keywords</code>
299 |                 option to a comma-separated list of valid keywords: <code>transparent,
300 |                 initial, inherit</code>.
301 |               </span>
302 |             </div>
303 |           </div>
304 |         </div>
305 |         <div class="row">
306 |           <div class="col-lg-4 col-sm-4 col-12">
307 |             <div class="form-group">
308 |               <label for="default-value">Default Value</label>
309 |               <br>
310 |               <input type="text" id="default-value" class="form-control demo" data-defaultValue="#ff6600">
311 |               <span class="help-block">
312 |                 This field has a default value assigned to it, so it will never be empty.
313 |               </span>
314 |             </div>
315 |           </div>
316 |           <div class="col-lg-4 col-sm-4 col-12">
317 |             <div class="form-group">
318 |               <label for="letter-case">Letter Case</label>
319 |               <br>
320 |               <input type="text" id="letter-case" class="form-control demo" data-letterCase="uppercase" value="#abcdef">
321 |               <span class="help-block">
322 |                 This field will always be uppercase.
323 |               </span>
324 |             </div>
325 |           </div>
326 |         </div>
327 |         <div class="row">
328 |           <div class="col-lg-4 col-sm-4 col-12">
329 |             <div class="form-group">
330 |               <label for="input-group">Input Groups</label>
331 |               <div class="input-group">
332 |                 <input type="text" id="input-group" class="form-control demo" value="#ff0000"/>
333 |                 <span class="input-group-btn">
334 |                   <button class="btn btn-default" type="button">Button</button>
335 |                 </span>
336 |               </div>
337 |               <span class="help-block">
338 |                 Example using Bootstrap's input groups.
339 |               </span>
340 |             </div>
341 |           </div>
342 |           <div class="col-lg-4 col-sm-4 col-12">
343 |             <div class="form-group">
344 |               <label for="more-input-group">More Input Groups</label>
345 |               <div class="input-group">
346 |                 <span class="input-group-addon">Color</span>
347 |                 <input type="text" id="more-input-group" class="form-control demo" value="#ff0000"/>
348 |                 <span class="input-group-btn">
349 |                   <button class="btn btn-default" type="button">Button</button>
350 |                 </span>
351 |               </div>
352 |               <span class="help-block">
353 |                 Input group example with addon.
354 |               </span>
355 |             </div>
356 |           </div>
357 |         </div>
358 |         <div class="row">
359 |           <div class="col-lg-4 col-sm-4 col-12">
360 |             <div class="form-group">
361 |               <label for="letter-case">Swatches</label>
362 |               <br>
363 |               <input type="text" id="swatches" class="form-control demo" data-swatches="#ef9a9a|#90caf9|#a5d6a7|#fff59d|#ffcc80|#bcaaa4|#eeeeee|#f44336|#2196f3|#4caf50|#ffeb3b|#ff9800|#795548|#9e9e9e" value="#abcdef">
364 |               <span class="help-block">
365 |                 Example with swatches.
366 |               </span>
367 |             </div>
368 |           </div>
369 |           <div class="col-lg-4 col-sm-4 col-12">
370 |             <div class="form-group">
371 |               <label for="letter-case">Swatches and opacity</label>
372 |               <br>
373 |               <input type="text" id="swatches" class="form-control demo" data-format="rgb" data-opacity="1" data-swatches="#fff|#000|#f00|#0f0|#00f|#ff0|rgba(0,0,255,0.5)"  value="rgba(14, 206, 235, .5)">
374 |               <span class="help-block">
375 |                 Example with swatches and opacity.
376 |               </span>
377 |             </div>
378 |           </div>
379 |         </div>
380 |       </div>
381 | 
382 |       <!-- API -->
383 |       <h2 id="api">API</h2>
384 | 
385 |       <!-- Instantiation -->
386 |       <h3 id="instantiation">Instantiation</h3>
387 |       <p>
388 |         Instantiate like any other jQuery plugin:
389 |       </p>
390 |       <pre>$('INPUT.minicolors').minicolors(settings);</pre>
391 | 
392 |       <!-- Settings -->
393 |       <h3 id="settings">Settings</h3>
394 | 
395 |       <p>
396 |         Default settings are as follows:
397 |       </p>
398 | <pre>
399 | $.minicolors = {
400 |   defaults: {
401 |     animationSpeed: 50,
402 |     animationEasing: 'swing',
403 |     change: null,
404 |     changeDelay: 0,
405 |     control: 'hue',
406 |     defaultValue: '',
407 |     format: 'hex',
408 |     hide: null,
409 |     hideSpeed: 100,
410 |     inline: false,
411 |     keywords: '',
412 |     letterCase: 'lowercase',
413 |     opacity: false,
414 |     position: 'bottom left',
415 |     show: null,
416 |     showSpeed: 100,
417 |     theme: 'default',
418 |     swatches: []
419 |   }
420 | };
421 | </pre>
422 |       <p>
423 |         For convenience, you can change default settings globally by assigning new values:
424 |       </p>
425 | <pre>
426 | $.minicolors.defaults.changeDelay = 200;
427 | </pre>
428 |       <p>
429 |         To change multiple properties at once, use <code>$.extend()</code>:
430 |       </p>
431 | <pre>
432 | $.minicolors.defaults = $.extend($.minicolors.defaults, {
433 |   changeDelay: 200,
434 |   letterCase: 'uppercase',
435 |   theme: 'bootstrap'
436 | });
437 | </pre>
438 |       <p class="alert alert-warning">
439 |         <strong>Note:</strong> Changing default settings will <em>not</em> affect controls that
440 |         are already initialized.
441 |       </p>
442 | 
443 |       <dl>
444 |         <dt>animationSpeed</dt>
445 |         <dd>
446 |           <p>
447 |             The animation speed of the sliders when the user taps or clicks a new color. Set to
448 |             <code>0</code> for no animation.
449 |           </p>
450 |         </dd>
451 | 
452 |         <dt>animationEasing</dt>
453 |         <dd>
454 |           <p>
455 |             The easing to use when animating the sliders.
456 |           </p>
457 |         </dd>
458 | 
459 |         <dt>changeDelay</dt>
460 |         <dd>
461 |           <p>
462 |             The time, in milliseconds, to defer the <code>change</code> event from firing while
463 |             the user makes a selection. This is useful for preventing the <code>change</code> event
464 |             from firing frequently as the user drags the color picker around.
465 |           </p>
466 |           <p>
467 |             The default value is <code>0</code> (no delay). If your <code>change</code> callback
468 |             features something resource-intensive (such as an AJAX request), you’ll probably want
469 |             to set this to at least <code>200</code>.
470 |           </p>
471 |         </dd>
472 | 
473 |         <dt>control</dt>
474 |         <dd>
475 |           <p>
476 |             Determines the type of control. Valid options are <code>hue</code>, <code>brightness</code>,
477 |             <code>saturation</code>, and <code>wheel</code>.
478 |           </p>
479 |         </dd>
480 | 
481 |         <dt>defaultValue</dt>
482 |         <dd>
483 |           <p>
484 |             To force a default color, set this to a valid hex string. When the user clears the
485 |             control, it will revert to this color.
486 |           </p>
487 |         </dd>
488 | 
489 |         <dt>format</dt>
490 |         <dd>
491 |           <p>
492 |             The format miniColors should use. Valid options are <code>hex</code> and
493 |             <code>rgb</code>.
494 |           </p>
495 |         </dd>
496 | 
497 |         <dt>hideSpeed &amp; showSpeed</dt>
498 |         <dd>
499 |           <p>
500 |             The speed at which to hide and show the color picker.
501 |           </p>
502 |         </dd>
503 | 
504 |         <dt>inline</dt>
505 |         <dd>
506 |           <p>
507 |             Set to <code>true</code> to force the color picker to appear inline.
508 |           </p>
509 |         </dd>
510 | 
511 |         <dt>keywords</dt>
512 |         <dd>
513 |           <p>
514 |             A comma-separated list of keywords that the control should accept (e.g. inherit,
515 |             transparent, initial). By default, no keywords are allowed.
516 |           </p>
517 |         </dd>
518 | 
519 |         <dt>letterCase</dt>
520 |         <dd>
521 |           <p>
522 |             Determines the letter case of the hex code value. Valid options are <code>uppercase</code>
523 |             or <code>lowercase</code>.
524 |           </p>
525 |         </dd>
526 | 
527 |         <dt>opacity</dt>
528 |         <dd>
529 |           <p>
530 |             Set to <code>true</code> to enable the opacity slider. (Use the input element's
531 |             <code>data-opacity</code> attribute to set a preset value.)
532 |           </p>
533 |         </dd>
534 | 
535 |         <dt>position</dt>
536 |         <dd>
537 |           <p>
538 |             Sets the position of the dropdown. Valid options are <code>bottom left</code>,
539 |             <code>bottom right</code>, <code>top left</code>, and <code>top right</code>.
540 |           </p>
541 |           <p class="alert alert-warning">
542 |             The <code>swatchPosition</code> setting has been removed in version 2.1. The position
543 |             of the swatch is now determined by <code>position</code>.
544 |           </p>
545 |         </dd>
546 | 
547 |         <dt>theme</dt>
548 |         <dd>
549 |           <p>
550 |             A string containing the name of the custom theme to be applied. In your CSS, prefix
551 |             your selectors like this:
552 |           </p>
553 | <pre>
554 | .minicolors-theme-yourThemeName { ... }
555 | </pre>
556 |           <p>
557 |             If you are using the default theme, you will probably need to adjust the swatch
558 |             styles depending on your existing stylesheet rules. Version 2.1 removes as much
559 |             styling on the <code>input</code> element as possible, which means it’s up to
560 |             you to adjust your CSS to make sure the swatch aligns properly.
561 |           </p>
562 |           <p>
563 |             To adjust the swatch, override these styles:
564 |           </p>
565 | <pre>
566 | .minicolors-theme-default .minicolors-swatch {
567 |   top: 5px;
568 |   left: 5px;
569 |   width: 18px;
570 |   height: 18px;
571 | }
572 | .minicolors-theme-default.minicolors-position-right .minicolors-swatch {
573 |   left: auto;
574 |   right: 5px;
575 | }
576 | </pre>
577 |           </div>
578 |         </dd>
579 | 
580 |         <dt>swatches</dt>
581 |         <dd>
582 |           <p>
583 |             An array containing one or more strings of hex colors that will show up under the main
584 |             color grid.
585 |           </p>
586 |           <p>
587 |             Alternatively, this can be an array of <code>{ name, color }</code> objects where
588 |             <code>name</code> is a human-readable color name and <code>color</code> is a hex code.
589 |             In this case, the name will be used to set the swatch's <code>title</code> attribute.
590 |           </p>
591 |         </dd>
592 |       </dl>
593 | 
594 |       <!-- Methods -->
595 |       <h3 id="methods">Methods</h3>
596 |       <p>Use this syntax for calling methods:</p>
597 |       <pre>$(<em>selector</em>).minicolors('method', <em>[data]</em>);</pre>
598 |       <dl>
599 |         <dt>create</dt>
600 |         <dd>
601 |           <p>
602 |             Initializes the control for all items matching your selector. This is the default
603 |             method, so <code>data</code> may be passed in as the only argument.
604 |           </p>
605 |           <p>
606 |             To set a preset color value, populate the <code>value</code> attribute of the original
607 |             input element.
608 |           </p>
609 |         </dd>
610 | 
611 |         <dt>destroy</dt>
612 |         <dd>
613 |           <p>
614 |             Returns the <em>input</em> element to its original, uninitialized state.
615 |           </p>
616 |         </dd>
617 | 
618 |         <dt>hide</dt>
619 |         <dd>
620 |           <p>
621 |             Hides the color picker.
622 |           </p>
623 |         </dd>
624 | 
625 |         <dt>show</dt>
626 |         <dd>
627 |           <p>
628 |             Shows the color picker.
629 |           </p>
630 |         </dd>
631 | 
632 |         <dt>opacity</dt>
633 |         <dd>
634 |           <p>
635 |             Gets or sets a control's opacity level. To use this method as a setter, pass data in
636 |             as a value between 0 and 1. (You can also obtain this value by checking the input
637 |             element's <code>data-opacity</code> attribute.)
638 |           </p>
639 |           <p>
640 |             To set a preset opacity value, populate the <code>data-opacity</code> attribute of the
641 |             original input element.
642 |           </p>
643 |         </dd>
644 | 
645 |         <dt>rgbObject</dt>
646 |         <dd>
647 |           <p>
648 |             Returns an object containing red, green, blue, and alpha properties that correspond to
649 |             the control's current value. Example:
650 |           </p>
651 |           <pre>{ r: 0, g: 82, b: 148, a: 0.75 }</pre>
652 |         </dd>
653 | 
654 |         <dt>rgbString &amp; rgbaString</dt>
655 |         <dd>
656 |           <p>
657 |             Returns an RGB or RGBA string suitable for use in your CSS. Examples:
658 |           </p>
659 | <pre>
660 | rgb(0, 82, 148)
661 | rgba(0, 82, 148, .75)
662 | </pre>
663 |         </dd>
664 | 
665 |         <dt>settings</dt>
666 |         <dd>
667 |           <p>
668 |             Gets or sets a control's settings. If new settings are passed in, the control will
669 |             destroy and re-initialize itself with any new settings overriding the old ones.
670 |           </p>
671 |         </dd>
672 | 
673 |         <dt>value</dt>
674 |         <dd>
675 |           <p>
676 |             Gets or sets a control's color value. To use this method as a setter, pass
677 |             in a color string or an object (ex: <code>{color: '#fc0', opacity: .5}</code>).
678 |           </p>
679 |         </dd>
680 |       </dl>
681 | 
682 |       <!-- Events -->
683 |       <h3 id="events">Events</h3>
684 |       <dl>
685 |         <dt>change</dt>
686 |         <dd>
687 |           <p>Fires when the value of the color picker changes. The <code>this</code> keyword will reference the original input element.
688 | <pre>
689 | $(<em>selector</em>).minicolors({
690 |   change: function(value, opacity) {
691 |     console.log(value + ' - ' + opacity);
692 |   }
693 | });
694 | </pre>
695 |           <p class="alert alert-warning">
696 |             <strong>Warning!</strong> This event will fire a lot when the user drags the
697 |             color picker around. Use the <code>changeDelay</code> setting to reduce its
698 |             frequency.
699 |           </p>
700 |         </dd>
701 | 
702 |         <dt>hide</dt>
703 |         <dd>
704 |           <p>
705 |             Fires when the color picker is hidden. The <code>this</code> keyword will reference
706 |             the original input element.
707 |           </p>
708 | <pre>
709 | $(<em>selector</em>).minicolors({
710 |   hide: function() {
711 |   console.log('Hide event triggered!');
712 |   }
713 | });
714 | </pre>
715 |         </dd>
716 | 
717 |         <dt>show</dt>
718 |         <dd>
719 |           <p>
720 |             Fires when the color picker is shown. The <code>this</code> keyword will reference
721 |             the original input element.
722 |           </p>
723 | <pre>
724 | $(<em>selector</em>).minicolors({
725 |   show: function() {
726 |     console.log('Show event triggered!');
727 |   }
728 | });
729 | </pre>
730 |         </dd>
731 |       </dl>
732 | 
733 |       <h2 id="license">License</h2>
734 |       <p>
735 |         Licensed under the <a href="https://opensource.org/licenses/MIT">MIT license</a>,
736 |         same as <a href="https://jquery.org/license/">jQuery</a>.
737 |       </p>
738 |       <p>
739 |         &copy;2013 <a href="https://www.abeautifulsite.net/">A Beautiful Site, LLC.</a>
740 |       </p>
741 |     </div>
742 |   </div>
743 | </body>
744 | </html>
745 | 


--------------------------------------------------------------------------------
/jquery.minicolors.css:
--------------------------------------------------------------------------------
  1 | .minicolors {
  2 |   position: relative;
  3 | }
  4 | 
  5 | .minicolors-sprite {
  6 |   background-image: url(jquery.minicolors.png);
  7 | }
  8 | 
  9 | .minicolors-swatch {
 10 |   position: absolute;
 11 |   vertical-align: middle;
 12 |   background-position: -80px 0;
 13 |   cursor: text;
 14 |   padding: 0;
 15 |   margin: 0;
 16 |   display: inline-block;
 17 | }
 18 | 
 19 | .minicolors-swatch::after {
 20 |   content: '';
 21 |   position: absolute;
 22 |   top: 0;
 23 |   left: 0;
 24 |   width: 100%;
 25 |   height: 100%;
 26 |   box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15);
 27 |   border-radius: 2px;
 28 | }
 29 | 
 30 | .minicolors-swatch-color {
 31 |   position: absolute;
 32 |   top: 0;
 33 |   left: 0;
 34 |   right: 0;
 35 |   bottom: 0;
 36 | }
 37 | 
 38 | .minicolors input[type=hidden] + .minicolors-swatch {
 39 |   width: 28px;
 40 |   position: static;
 41 |   cursor: pointer;
 42 | }
 43 | 
 44 | .minicolors input[type=hidden][disabled] + .minicolors-swatch {
 45 |   cursor: default;
 46 | }
 47 | 
 48 | /* Panel */
 49 | .minicolors-panel {
 50 |   position: absolute;
 51 |   width: 173px;
 52 |   background: white;
 53 |   border-radius: 2px;
 54 |   box-shadow: 0 0 20px rgba(0, 0, 0, .2);
 55 |   z-index: 99999;
 56 |   box-sizing: content-box;
 57 |   display: none;
 58 |   touch-action: none;
 59 | }
 60 | 
 61 | .minicolors-panel.minicolors-visible {
 62 |   display: block;
 63 | }
 64 | 
 65 | /* Panel positioning */
 66 | .minicolors-position-top .minicolors-panel {
 67 |   top: -154px;
 68 | }
 69 | 
 70 | .minicolors-position-right .minicolors-panel {
 71 |   right: 0;
 72 | }
 73 | 
 74 | .minicolors-position-bottom .minicolors-panel {
 75 |   top: auto;
 76 | }
 77 | 
 78 | .minicolors-position-left .minicolors-panel {
 79 |   left: 0;
 80 | }
 81 | 
 82 | .minicolors-with-opacity .minicolors-panel {
 83 |   width: 194px;
 84 | }
 85 | 
 86 | .minicolors .minicolors-grid {
 87 |   position: relative;
 88 |   top: 1px;
 89 |   left: 1px; /* LTR */
 90 |   width: 150px;
 91 |   height: 150px;
 92 |   margin-bottom: 2px;
 93 |   background-position: -120px 0;
 94 |   cursor: crosshair;
 95 | }
 96 | [dir=rtl] .minicolors .minicolors-grid {
 97 |   right: 1px;
 98 | }
 99 | 
100 | .minicolors .minicolors-grid-inner {
101 |   position: absolute;
102 |   top: 0;
103 |   left: 0;
104 |   width: 150px;
105 |   height: 150px;
106 | }
107 | 
108 | .minicolors-slider-saturation .minicolors-grid {
109 |   background-position: -420px 0;
110 | }
111 | 
112 | .minicolors-slider-saturation .minicolors-grid-inner {
113 |   background-position: -270px 0;
114 |   background-image: inherit;
115 | }
116 | 
117 | .minicolors-slider-brightness .minicolors-grid {
118 |   background-position: -570px 0;
119 | }
120 | 
121 | .minicolors-slider-brightness .minicolors-grid-inner {
122 |   background-color: black;
123 | }
124 | 
125 | .minicolors-slider-wheel .minicolors-grid {
126 |   background-position: -720px 0;
127 | }
128 | 
129 | .minicolors-slider,
130 | .minicolors-opacity-slider {
131 |   position: absolute;
132 |   top: 1px;
133 |   left: 152px; /* LTR */
134 |   width: 20px;
135 |   height: 150px;
136 |   background-color: white;
137 |   background-position: 0 0;
138 |   cursor: row-resize;
139 | }
140 | [dir=rtl] .minicolors-slider,
141 | [dir=rtl] .minicolors-opacity-slider {
142 |   right: 152px;
143 | }
144 | 
145 | .minicolors-slider-saturation .minicolors-slider {
146 |   background-position: -60px 0;
147 | }
148 | 
149 | .minicolors-slider-brightness .minicolors-slider {
150 |   background-position: -20px 0;
151 | }
152 | 
153 | .minicolors-slider-wheel .minicolors-slider {
154 |   background-position: -20px 0;
155 | }
156 | 
157 | .minicolors-opacity-slider {
158 |   left: 173px; /* LTR */
159 |   background-position: -40px 0;
160 |   display: none;
161 | }
162 | [dir=rtl] .minicolors-opacity-slider {
163 |   right: 173px;
164 | }
165 | 
166 | .minicolors-with-opacity .minicolors-opacity-slider {
167 |   display: block;
168 | }
169 | 
170 | /* Pickers */
171 | .minicolors-grid .minicolors-picker {
172 |   position: absolute;
173 |   top: 70px;
174 |   left: 70px;
175 |   width: 12px;
176 |   height: 12px;
177 |   box-shadow: 0 0 0 1px rgba(0, 0, 0, .25);
178 |   border-radius: 10px;
179 |   margin-top: -6px;
180 |   margin-left: -6px;
181 |   background: none;
182 | }
183 | 
184 | .minicolors-grid .minicolors-picker > div {
185 |   position: absolute;
186 |   top: 0;
187 |   left: 0;
188 |   width: 8px;
189 |   height: 8px;
190 |   border-radius: 8px;
191 |   border: solid 2px white;
192 |   box-sizing: content-box;
193 | }
194 | 
195 | .minicolors-picker {
196 |   position: absolute;
197 |   top: 0;
198 |   left: 0;
199 |   width: 18px;
200 |   height: 3px;
201 |   background: white;
202 |   box-shadow: 0 0 0 1px rgba(0, 0, 0, .25);
203 |   border-radius: 2px;
204 |   margin-top: -2px;
205 |   margin-left: 1px;
206 |   box-sizing: content-box;
207 | }
208 | 
209 | /* Swatches */
210 | .minicolors-swatches,
211 | .minicolors-swatches li {
212 |   margin: 5px 0 3px 5px; /* LTR */
213 |   padding: 0;
214 |   list-style: none;
215 |   overflow: hidden;
216 | }
217 | [dir=rtl] .minicolors-swatches,
218 | [dir=rtl] .minicolors-swatches li {
219 |   margin: 5px 5px 3px 0;
220 | }
221 | 
222 | .minicolors-swatches .minicolors-swatch {
223 |   position: relative;
224 |   float: left; /* LTR */
225 |   cursor: pointer;
226 |   margin: 0 4px 0 0; /* LTR */
227 | }
228 | [dir=rtl] .minicolors-swatches .minicolors-swatch {
229 |   float: right;
230 |   margin: 0 0 0 4px;
231 | }
232 | 
233 | .minicolors-with-opacity .minicolors-swatches .minicolors-swatch {
234 |   margin-right: 7px; /* LTR */
235 | }
236 | [dir=rtl] .minicolors-with-opacity .minicolors-swatches .minicolors-swatch {
237 |   margin-right: 0;
238 |   margin-left: 7px;
239 | }
240 | 
241 | .minicolors-swatch.selected {
242 |   border-color: #000;
243 | }
244 | 
245 | /* Inline controls */
246 | .minicolors-inline {
247 |   display: inline-block;
248 | }
249 | 
250 | .minicolors-inline .minicolors-input {
251 |   display: none !important;
252 | }
253 | 
254 | .minicolors-inline .minicolors-panel {
255 |   position: relative;
256 |   top: auto;
257 |   left: auto; /* LTR */
258 |   box-shadow: none;
259 |   z-index: auto;
260 |   display: inline-block;
261 | }
262 | [dir=rtl] .minicolors-inline .minicolors-panel {
263 |   right: auto;
264 | }
265 | 
266 | /* Default theme */
267 | .minicolors-theme-default .minicolors-swatch {
268 |   top: 5px;
269 |   left: 5px; /* LTR */
270 |   width: 18px;
271 |   height: 18px;
272 | }
273 | [dir=rtl] .minicolors-theme-default .minicolors-swatch {
274 |   right: 5px;
275 | }
276 | .minicolors-theme-default .minicolors-swatches .minicolors-swatch {
277 |   margin-bottom: 2px;
278 |   top: 0;
279 |   left: 0; /* LTR */
280 |   width: 18px;
281 |   height: 18px;
282 | }
283 | [dir=rtl] .minicolors-theme-default .minicolors-swatches .minicolors-swatch {
284 |   right: 0;
285 | }
286 | .minicolors-theme-default.minicolors-position-right .minicolors-swatch {
287 |   left: auto; /* LTR */
288 |   right: 5px; /* LTR */
289 | }
290 | [dir=rtl] .minicolors-theme-default.minicolors-position-left .minicolors-swatch {
291 |   right: auto;
292 |   left: 5px;
293 | }
294 | .minicolors-theme-default.minicolors {
295 |   width: auto;
296 |   display: inline-block;
297 | }
298 | .minicolors-theme-default .minicolors-input {
299 |   height: 20px;
300 |   width: auto;
301 |   display: inline-block;
302 |   padding-left: 26px; /* LTR */
303 | }
304 | [dir=rtl] .minicolors-theme-default .minicolors-input {
305 |   text-align: right;
306 |   unicode-bidi: plaintext;
307 |   padding-left: 1px;
308 |   padding-right: 26px;
309 | }
310 | .minicolors-theme-default.minicolors-position-right .minicolors-input {
311 |   padding-right: 26px; /* LTR */
312 |   padding-left: inherit; /* LTR */
313 | }
314 | [dir=rtl] .minicolors-theme-default.minicolors-position-left .minicolors-input {
315 |   padding-right: inherit;
316 |   padding-left: 26px;
317 | }
318 | 
319 | /* Bootstrap theme */
320 | .minicolors-theme-bootstrap .minicolors-swatch {
321 |   z-index: 2;
322 |   top: 3px;
323 |   left: 3px; /* LTR */
324 |   width: 28px;
325 |   height: 28px;
326 |   border-radius: 2px;
327 | }
328 | [dir=rtl] .minicolors-theme-bootstrap .minicolors-swatch {
329 |   right: 3px;
330 | }
331 | .minicolors-theme-bootstrap .minicolors-swatches .minicolors-swatch {
332 |   margin-bottom: 2px;
333 |   top: 0;
334 |   left: 0; /* LTR */
335 |   width: 20px;
336 |   height: 20px;
337 | }
338 | [dir=rtl] .minicolors-theme-bootstrap .minicolors-swatches .minicolors-swatch {
339 |   right: 0;
340 | }
341 | .minicolors-theme-bootstrap .minicolors-swatch-color {
342 |   border-radius: inherit;
343 | }
344 | .minicolors-theme-bootstrap.minicolors-position-right > .minicolors-swatch {
345 |   left: auto; /* LTR */
346 |   right: 3px; /* LTR */
347 | }
348 | [dir=rtl] .minicolors-theme-bootstrap.minicolors-position-left > .minicolors-swatch {
349 |   right: auto;
350 |   left: 3px;
351 | }
352 | .minicolors-theme-bootstrap .minicolors-input {
353 |   float: none;
354 |   padding-left: 44px; /* LTR */
355 | }
356 | [dir=rtl] .minicolors-theme-bootstrap .minicolors-input {
357 |   text-align: right;
358 |   unicode-bidi: plaintext;
359 |   padding-left: 12px;
360 |   padding-right: 44px;
361 | }
362 | .minicolors-theme-bootstrap.minicolors-position-right .minicolors-input {
363 |   padding-right: 44px; /* LTR */
364 |   padding-left: 12px; /* LTR */
365 | }
366 | [dir=rtl] .minicolors-theme-bootstrap.minicolors-position-left .minicolors-input {
367 |   padding-right: 12px;
368 |   padding-left: 44px;
369 | }
370 | .minicolors-theme-bootstrap .minicolors-input.input-lg + .minicolors-swatch {
371 |   top: 4px;
372 |   left: 4px; /* LTR */
373 |   width: 37px;
374 |   height: 37px;
375 |   border-radius: 5px;
376 | }
377 | [dir=rtl] .minicolors-theme-bootstrap .minicolors-input.input-lg + .minicolors-swatch {
378 |   right: 4px;
379 | }
380 | .minicolors-theme-bootstrap .minicolors-input.input-sm + .minicolors-swatch {
381 |   width: 24px;
382 |   height: 24px;
383 | }
384 | .minicolors-theme-bootstrap .minicolors-input.input-xs + .minicolors-swatch {
385 |   width: 18px;
386 |   height: 18px;
387 | }
388 | .input-group .minicolors-theme-bootstrap:not(:first-child) .minicolors-input {
389 |   border-top-left-radius: 0; /* LTR */
390 |   border-bottom-left-radius: 0; /* LTR */
391 | }
392 | [dir=rtl] .input-group .minicolors-theme-bootstrap .minicolors-input {
393 |   border-radius: 4px;
394 | }
395 | [dir=rtl] .input-group .minicolors-theme-bootstrap:not(:first-child) .minicolors-input {
396 |   border-top-right-radius: 0;
397 |   border-bottom-right-radius: 0;
398 | }
399 | [dir=rtl] .input-group .minicolors-theme-bootstrap:not(:last-child) .minicolors-input {
400 |   border-top-left-radius: 0;
401 |   border-bottom-left-radius: 0;
402 | }
403 | /* bootstrap input-group rtl override */
404 | [dir=rtl] .input-group .form-control,
405 | [dir=rtl] .input-group-addon,
406 | [dir=rtl] .input-group-btn > .btn,
407 | [dir=rtl] .input-group-btn > .btn-group > .btn,
408 | [dir=rtl] .input-group-btn > .dropdown-toggle {
409 |   border: 1px solid #ccc;
410 |   border-radius: 4px;
411 | }
412 | [dir=rtl] .input-group .form-control:first-child,
413 | [dir=rtl] .input-group-addon:first-child,
414 | [dir=rtl] .input-group-btn:first-child > .btn,
415 | [dir=rtl] .input-group-btn:first-child > .btn-group > .btn,
416 | [dir=rtl] .input-group-btn:first-child > .dropdown-toggle,
417 | [dir=rtl] .input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle),
418 | [dir=rtl] .input-group-btn:last-child > .btn-group:not(:last-child) > .btn {
419 |   border-top-left-radius: 0;
420 |   border-bottom-left-radius: 0;
421 |   border-left: 0;
422 | }
423 | [dir=rtl] .input-group .form-control:last-child,
424 | [dir=rtl] .input-group-addon:last-child,
425 | [dir=rtl] .input-group-btn:last-child > .btn,
426 | [dir=rtl] .input-group-btn:last-child > .btn-group > .btn,
427 | [dir=rtl] .input-group-btn:last-child > .dropdown-toggle,
428 | [dir=rtl] .input-group-btn:first-child > .btn:not(:first-child),
429 | [dir=rtl] .input-group-btn:first-child > .btn-group:not(:first-child) > .btn {
430 |   border-top-right-radius: 0;
431 |   border-bottom-right-radius: 0;
432 | }
433 | 
434 | /* Semantic Ui theme */
435 | .minicolors-theme-semanticui .minicolors-swatch {
436 |   top: 0;
437 |   left: 0; /* LTR */
438 |   padding: 18px;
439 | }
440 | [dir=rtl] .minicolors-theme-semanticui .minicolors-swatch {
441 |   right: 0;
442 | }
443 | .minicolors-theme-semanticui input {
444 |   text-indent: 30px;
445 | }
446 | 


--------------------------------------------------------------------------------
/jquery.minicolors.js:
--------------------------------------------------------------------------------
   1 | //
   2 | // jQuery MiniColors: A tiny color picker built on jQuery
   3 | //
   4 | // Developed by Cory LaViska for A Beautiful Site, LLC
   5 | //
   6 | // Licensed under the MIT license: http://opensource.org/licenses/MIT
   7 | //
   8 | (function (factory) {
   9 |   if(typeof define === 'function' && define.amd) {
  10 |     // AMD. Register as an anonymous module.
  11 |     define(['jquery'], factory);
  12 |   } else if(typeof exports === 'object') {
  13 |     // Node/CommonJS
  14 |     module.exports = factory(require('jquery'));
  15 |   } else {
  16 |     // Browser globals
  17 |     factory(jQuery);
  18 |   }
  19 | }(function ($) {
  20 |   'use strict';
  21 | 
  22 |   // Defaults
  23 |   $.minicolors = {
  24 |     defaults: {
  25 |       animationSpeed: 50,
  26 |       animationEasing: 'swing',
  27 |       change: null,
  28 |       changeDelay: 0,
  29 |       control: 'hue',
  30 |       defaultValue: '',
  31 |       format: 'hex',
  32 |       hide: null,
  33 |       hideSpeed: 100,
  34 |       inline: false,
  35 |       keywords: '',
  36 |       letterCase: 'lowercase',
  37 |       opacity: false,
  38 |       position: 'bottom',
  39 |       show: null,
  40 |       showSpeed: 100,
  41 |       theme: 'default',
  42 |       swatches: []
  43 |     }
  44 |   };
  45 | 
  46 |   // Public methods
  47 |   $.extend($.fn, {
  48 |     minicolors: function(method, data) {
  49 | 
  50 |       switch(method) {
  51 |         // Destroy the control
  52 |         case 'destroy':
  53 |           $(this).each(function() {
  54 |             destroy($(this));
  55 |           });
  56 |           return $(this);
  57 | 
  58 |         // Hide the color picker
  59 |         case 'hide':
  60 |           hide();
  61 |           return $(this);
  62 | 
  63 |         // Get/set opacity
  64 |         case 'opacity':
  65 |           // Getter
  66 |           if(data === undefined) {
  67 |             // Getter
  68 |             return $(this).attr('data-opacity');
  69 |           } else {
  70 |             // Setter
  71 |             $(this).each(function() {
  72 |               updateFromInput($(this).attr('data-opacity', data));
  73 |             });
  74 |           }
  75 |           return $(this);
  76 | 
  77 |         // Get an RGB(A) object based on the current color/opacity
  78 |         case 'rgbObject':
  79 |           return rgbObject($(this), method === 'rgbaObject');
  80 | 
  81 |         // Get an RGB(A) string based on the current color/opacity
  82 |         case 'rgbString':
  83 |         case 'rgbaString':
  84 |           return rgbString($(this), method === 'rgbaString');
  85 | 
  86 |         // Get/set settings on the fly
  87 |         case 'settings':
  88 |           if(data === undefined) {
  89 |             return $(this).data('minicolors-settings');
  90 |           } else {
  91 |             // Setter
  92 |             $(this).each(function() {
  93 |               var settings = $(this).data('minicolors-settings') || {};
  94 |               destroy($(this));
  95 |               $(this).minicolors($.extend(true, settings, data));
  96 |             });
  97 |           }
  98 |           return $(this);
  99 | 
 100 |         // Show the color picker
 101 |         case 'show':
 102 |           show($(this).eq(0));
 103 |           return $(this);
 104 | 
 105 |         // Get/set the hex color value
 106 |         case 'value':
 107 |           if(data === undefined) {
 108 |             // Getter
 109 |             return $(this).val();
 110 |           } else {
 111 |             // Setter
 112 |             $(this).each(function() {
 113 |               if(typeof(data) === 'object' && data !== null) {
 114 |                 if(data.opacity !== undefined) {
 115 |                   $(this).attr('data-opacity', keepWithin(data.opacity, 0, 1));
 116 |                 }
 117 |                 if(data.color) {
 118 |                   $(this).val(data.color);
 119 |                 }
 120 |               } else {
 121 |                 $(this).val(data);
 122 |               }
 123 |               updateFromInput($(this));
 124 |             });
 125 |           }
 126 |           return $(this);
 127 | 
 128 |         // Initializes the control
 129 |         default:
 130 |           if(method !== 'create') data = method;
 131 |           $(this).each(function() {
 132 |             init($(this), data);
 133 |           });
 134 |           return $(this);
 135 | 
 136 |       }
 137 | 
 138 |     }
 139 |   });
 140 | 
 141 |   // Initialize input elements
 142 |   function init(input, settings) {
 143 |     var minicolors = $('<div class="minicolors" />');
 144 |     var defaults = $.minicolors.defaults;
 145 |     var name;
 146 |     var size;
 147 |     var swatches;
 148 |     var swatch;
 149 |     var swatchString;
 150 |     var panel;
 151 |     var i;
 152 | 
 153 |     // Do nothing if already initialized
 154 |     if(input.data('minicolors-initialized')) return;
 155 | 
 156 |     // Handle settings
 157 |     settings = $.extend(true, {}, defaults, settings);
 158 | 
 159 |     // The wrapper
 160 |     minicolors
 161 |       .addClass('minicolors-theme-' + settings.theme)
 162 |       .toggleClass('minicolors-with-opacity', settings.opacity);
 163 | 
 164 |     // Custom positioning
 165 |     if(settings.position !== undefined) {
 166 |       $.each(settings.position.split(' '), function() {
 167 |         minicolors.addClass('minicolors-position-' + this);
 168 |       });
 169 |     }
 170 | 
 171 |     // Input size
 172 |     if(settings.format === 'rgb') {
 173 |       size = settings.opacity ? '25' : '20';
 174 |     } else {
 175 |       size = settings.keywords ? '11' : '7';
 176 |     }
 177 | 
 178 |     // The input
 179 |     input
 180 |       .addClass('minicolors-input')
 181 |       .data('minicolors-initialized', false)
 182 |       .data('minicolors-settings', settings)
 183 |       .prop('size', size)
 184 |       .wrap(minicolors)
 185 |       .after(
 186 |         '<div class="minicolors-panel minicolors-slider-' + settings.control + '">' +
 187 |                 '<div class="minicolors-slider minicolors-sprite">' +
 188 |                   '<div class="minicolors-picker"></div>' +
 189 |                 '</div>' +
 190 |                 '<div class="minicolors-opacity-slider minicolors-sprite">' +
 191 |                   '<div class="minicolors-picker"></div>' +
 192 |                 '</div>' +
 193 |                 '<div class="minicolors-grid minicolors-sprite">' +
 194 |                   '<div class="minicolors-grid-inner"></div>' +
 195 |                   '<div class="minicolors-picker"><div></div></div>' +
 196 |                 '</div>' +
 197 |               '</div>'
 198 |       );
 199 | 
 200 |     // The swatch
 201 |     if(!settings.inline) {
 202 |       input.after('<span class="minicolors-swatch minicolors-sprite minicolors-input-swatch"><span class="minicolors-swatch-color"></span></span>');
 203 |       input.next('.minicolors-input-swatch').on('click', function(event) {
 204 |         event.preventDefault();
 205 |         input.trigger('focus');
 206 |       });
 207 |     }
 208 | 
 209 |     // Prevent text selection in IE
 210 |     panel = input.parent().find('.minicolors-panel');
 211 |     panel.on('selectstart', function() { return false; }).end();
 212 | 
 213 |     // Swatches
 214 |     if(settings.swatches && settings.swatches.length !== 0) {
 215 |       panel.addClass('minicolors-with-swatches');
 216 |       swatches = $('<ul class="minicolors-swatches"></ul>')
 217 |         .appendTo(panel);
 218 |       for(i = 0; i < settings.swatches.length; ++i) {
 219 |         // allow for custom objects as swatches
 220 |         if(typeof settings.swatches[i] === 'object') {
 221 |           name = settings.swatches[i].name;
 222 |           swatch = settings.swatches[i].color;
 223 |         } else {
 224 |           name = '';
 225 |           swatch = settings.swatches[i];
 226 |         }
 227 |         swatchString = swatch;
 228 |         swatch = isRgb(swatch) ? parseRgb(swatch, true) : hex2rgb(parseHex(swatch, true));
 229 |         $('<li class="minicolors-swatch minicolors-sprite"><span class="minicolors-swatch-color"></span></li>')
 230 |           .attr("title", name)
 231 |           .appendTo(swatches)
 232 |           .data('swatch-color', swatchString)
 233 |           .find('.minicolors-swatch-color')
 234 |           .css({
 235 |             backgroundColor: ((swatchString !== 'transparent') ? rgb2hex(swatch) : 'transparent'),
 236 |             opacity: String(swatch.a)
 237 |           });
 238 |         settings.swatches[i] = swatch;
 239 |       }
 240 |     }
 241 | 
 242 |     // Inline controls
 243 |     if(settings.inline) input.parent().addClass('minicolors-inline');
 244 | 
 245 |     updateFromInput(input, false);
 246 | 
 247 |     input.data('minicolors-initialized', true);
 248 |   }
 249 | 
 250 |   // Returns the input back to its original state
 251 |   function destroy(input) {
 252 |     var minicolors = input.parent();
 253 | 
 254 |     // Revert the input element
 255 |     input
 256 |       .removeData('minicolors-initialized')
 257 |       .removeData('minicolors-settings')
 258 |       .removeProp('size')
 259 |       .removeClass('minicolors-input');
 260 | 
 261 |     // Remove the wrap and destroy whatever remains
 262 |     minicolors.before(input).remove();
 263 |   }
 264 | 
 265 |   // Shows the specified dropdown panel
 266 |   function show(input) {
 267 |     var minicolors = input.parent();
 268 |     var panel = minicolors.find('.minicolors-panel');
 269 |     var settings = input.data('minicolors-settings');
 270 | 
 271 |     // Do nothing if uninitialized, disabled, inline, or already open
 272 |     if(
 273 |       !input.data('minicolors-initialized') ||
 274 |       input.prop('disabled') ||
 275 |       minicolors.hasClass('minicolors-inline') ||
 276 |       minicolors.hasClass('minicolors-focus')
 277 |     ) return;
 278 | 
 279 |     hide();
 280 | 
 281 |     minicolors.addClass('minicolors-focus');
 282 |     if (panel.animate) {
 283 |       panel
 284 |         .stop(true, true)
 285 |         .fadeIn(settings.showSpeed, function () {
 286 |           if (settings.show) settings.show.call(input.get(0));
 287 |         });
 288 |     } else {
 289 |       panel.show();
 290 |       if (settings.show) settings.show.call(input.get(0));
 291 |     }
 292 |   }
 293 | 
 294 |   // Hides all dropdown panels
 295 |   function hide() {
 296 |     $('.minicolors-focus').each(function() {
 297 |       var minicolors = $(this);
 298 |       var input = minicolors.find('.minicolors-input');
 299 |       var panel = minicolors.find('.minicolors-panel');
 300 |       var settings = input.data('minicolors-settings');
 301 | 
 302 |       if (panel.animate) {
 303 |         panel.fadeOut(settings.hideSpeed, function () {
 304 |           if (settings.hide) settings.hide.call(input.get(0));
 305 |           minicolors.removeClass('minicolors-focus');
 306 |         });
 307 |       } else {
 308 |         panel.hide();
 309 |         if (settings.hide) settings.hide.call(input.get(0));
 310 |         minicolors.removeClass('minicolors-focus');
 311 |       }
 312 |     });
 313 |   }
 314 | 
 315 |   // Moves the selected picker
 316 |   function move(target, event, animate) {
 317 |     var input = target.parents('.minicolors').find('.minicolors-input');
 318 |     var settings = input.data('minicolors-settings');
 319 |     var picker = target.find('[class$=-picker]');
 320 |     var offsetX = target.offset().left;
 321 |     var offsetY = target.offset().top;
 322 |     var x = Math.round(event.pageX - offsetX);
 323 |     var y = Math.round(event.pageY - offsetY);
 324 |     var duration = animate ? settings.animationSpeed : 0;
 325 |     var wx, wy, r, phi, styles;
 326 | 
 327 |     // Touch support
 328 |     if(event.originalEvent.changedTouches) {
 329 |       x = event.originalEvent.changedTouches[0].pageX - offsetX;
 330 |       y = event.originalEvent.changedTouches[0].pageY - offsetY;
 331 |     }
 332 | 
 333 |     // Constrain picker to its container
 334 |     if(x < 0) x = 0;
 335 |     if(y < 0) y = 0;
 336 |     if(x > target.width()) x = target.width();
 337 |     if(y > target.height()) y = target.height();
 338 | 
 339 |     // Constrain color wheel values to the wheel
 340 |     if(target.parent().is('.minicolors-slider-wheel') && picker.parent().is('.minicolors-grid')) {
 341 |       wx = 75 - x;
 342 |       wy = 75 - y;
 343 |       r = Math.sqrt(wx * wx + wy * wy);
 344 |       phi = Math.atan2(wy, wx);
 345 |       if(phi < 0) phi += Math.PI * 2;
 346 |       if(r > 75) {
 347 |         r = 75;
 348 |         x = 75 - (75 * Math.cos(phi));
 349 |         y = 75 - (75 * Math.sin(phi));
 350 |       }
 351 |       x = Math.round(x);
 352 |       y = Math.round(y);
 353 |     }
 354 | 
 355 |     // Move the picker
 356 |     styles = {
 357 |       top: y + 'px'
 358 |     };
 359 |     if(target.is('.minicolors-grid')) {
 360 |       styles.left = x + 'px';
 361 |     }
 362 |     if (picker.animate) {
 363 |       picker
 364 |         .stop(true)
 365 |         .animate(styles, duration, settings.animationEasing, function() {
 366 |           updateFromControl(input, target);
 367 |         });
 368 |     } else {
 369 |       picker
 370 |         .css(styles);
 371 |       updateFromControl(input, target);
 372 |     }
 373 |   }
 374 | 
 375 |   // Sets the input based on the color picker values
 376 |   function updateFromControl(input, target) {
 377 | 
 378 |     function getCoords(picker, container) {
 379 |       var left, top;
 380 |       if(!picker.length || !container) return null;
 381 |       left = picker.offset().left;
 382 |       top = picker.offset().top;
 383 | 
 384 |       return {
 385 |         x: left - container.offset().left + (picker.outerWidth() / 2),
 386 |         y: top - container.offset().top + (picker.outerHeight() / 2)
 387 |       };
 388 |     }
 389 | 
 390 |     var hue, saturation, brightness, x, y, r, phi;
 391 |     var hex = input.val();
 392 |     var opacity = input.attr('data-opacity');
 393 | 
 394 |     // Helpful references
 395 |     var minicolors = input.parent();
 396 |     var settings = input.data('minicolors-settings');
 397 |     var swatch = minicolors.find('.minicolors-input-swatch');
 398 | 
 399 |     // Panel objects
 400 |     var grid = minicolors.find('.minicolors-grid');
 401 |     var slider = minicolors.find('.minicolors-slider');
 402 |     var opacitySlider = minicolors.find('.minicolors-opacity-slider');
 403 | 
 404 |     // Picker objects
 405 |     var gridPicker = grid.find('[class$=-picker]');
 406 |     var sliderPicker = slider.find('[class$=-picker]');
 407 |     var opacityPicker = opacitySlider.find('[class$=-picker]');
 408 | 
 409 |     // Picker positions
 410 |     var gridPos = getCoords(gridPicker, grid);
 411 |     var sliderPos = getCoords(sliderPicker, slider);
 412 |     var opacityPos = getCoords(opacityPicker, opacitySlider);
 413 | 
 414 |     // Handle colors
 415 |     if(target.is('.minicolors-grid, .minicolors-slider, .minicolors-opacity-slider')) {
 416 | 
 417 |       // Determine HSB values
 418 |       switch(settings.control) {
 419 |         case 'wheel':
 420 |           // Calculate hue, saturation, and brightness
 421 |           x = (grid.width() / 2) - gridPos.x;
 422 |           y = (grid.height() / 2) - gridPos.y;
 423 |           r = Math.sqrt(x * x + y * y);
 424 |           phi = Math.atan2(y, x);
 425 |           if(phi < 0) phi += Math.PI * 2;
 426 |           if(r > 75) {
 427 |             r = 75;
 428 |             gridPos.x = 69 - (75 * Math.cos(phi));
 429 |             gridPos.y = 69 - (75 * Math.sin(phi));
 430 |           }
 431 |           saturation = keepWithin(r / 0.75, 0, 100);
 432 |           hue = keepWithin(phi * 180 / Math.PI, 0, 360);
 433 |           brightness = keepWithin(100 - Math.floor(sliderPos.y * (100 / slider.height())), 0, 100);
 434 |           hex = hsb2hex({
 435 |             h: hue,
 436 |             s: saturation,
 437 |             b: brightness
 438 |           });
 439 | 
 440 |           // Update UI
 441 |           slider.css('backgroundColor', hsb2hex({ h: hue, s: saturation, b: 100 }));
 442 |           break;
 443 | 
 444 |         case 'saturation':
 445 |           // Calculate hue, saturation, and brightness
 446 |           hue = keepWithin(parseInt(gridPos.x * (360 / grid.width()), 10), 0, 360);
 447 |           saturation = keepWithin(100 - Math.floor(sliderPos.y * (100 / slider.height())), 0, 100);
 448 |           brightness = keepWithin(100 - Math.floor(gridPos.y * (100 / grid.height())), 0, 100);
 449 |           hex = hsb2hex({
 450 |             h: hue,
 451 |             s: saturation,
 452 |             b: brightness
 453 |           });
 454 | 
 455 |           // Update UI
 456 |           slider.css('backgroundColor', hsb2hex({ h: hue, s: 100, b: brightness }));
 457 |           minicolors.find('.minicolors-grid-inner').css('opacity', saturation / 100);
 458 |           break;
 459 | 
 460 |         case 'brightness':
 461 |           // Calculate hue, saturation, and brightness
 462 |           hue = keepWithin(parseInt(gridPos.x * (360 / grid.width()), 10), 0, 360);
 463 |           saturation = keepWithin(100 - Math.floor(gridPos.y * (100 / grid.height())), 0, 100);
 464 |           brightness = keepWithin(100 - Math.floor(sliderPos.y * (100 / slider.height())), 0, 100);
 465 |           hex = hsb2hex({
 466 |             h: hue,
 467 |             s: saturation,
 468 |             b: brightness
 469 |           });
 470 | 
 471 |           // Update UI
 472 |           slider.css('backgroundColor', hsb2hex({ h: hue, s: saturation, b: 100 }));
 473 |           minicolors.find('.minicolors-grid-inner').css('opacity', 1 - (brightness / 100));
 474 |           break;
 475 | 
 476 |         default:
 477 |           // Calculate hue, saturation, and brightness
 478 |           hue = keepWithin(360 - parseInt(sliderPos.y * (360 / slider.height()), 10), 0, 360);
 479 |           saturation = keepWithin(Math.floor(gridPos.x * (100 / grid.width())), 0, 100);
 480 |           brightness = keepWithin(100 - Math.floor(gridPos.y * (100 / grid.height())), 0, 100);
 481 |           hex = hsb2hex({
 482 |             h: hue,
 483 |             s: saturation,
 484 |             b: brightness
 485 |           });
 486 | 
 487 |           // Update UI
 488 |           grid.css('backgroundColor', hsb2hex({ h: hue, s: 100, b: 100 }));
 489 |           break;
 490 |       }
 491 | 
 492 |       // Handle opacity
 493 |       if(settings.opacity) {
 494 |         opacity = parseFloat(1 - (opacityPos.y / opacitySlider.height())).toFixed(2);
 495 |       } else {
 496 |         opacity = 1;
 497 |       }
 498 | 
 499 |       updateInput(input, hex, opacity);
 500 |     }
 501 |     else {
 502 |       // Set swatch color
 503 |       swatch.find('span').css({
 504 |         backgroundColor: hex,
 505 |         opacity: String(opacity)
 506 |       });
 507 | 
 508 |       // Handle change event
 509 |       doChange(input, hex, opacity);
 510 |     }
 511 |   }
 512 | 
 513 |   // Sets the value of the input and does the appropriate conversions
 514 |   // to respect settings, also updates the swatch
 515 |   function updateInput(input, value, opacity) {
 516 |     var rgb;
 517 | 
 518 |     // Helpful references
 519 |     var minicolors = input.parent();
 520 |     var settings = input.data('minicolors-settings');
 521 |     var swatch = minicolors.find('.minicolors-input-swatch');
 522 | 
 523 |     if(settings.opacity) input.attr('data-opacity', opacity);
 524 | 
 525 |     // Set color string
 526 |     if(settings.format === 'rgb') {
 527 |       // Returns RGB(A) string
 528 | 
 529 |       // Checks for input format and does the conversion
 530 |       if(isRgb(value)) {
 531 |         rgb = parseRgb(value, true);
 532 |       }
 533 |       else {
 534 |         rgb = hex2rgb(parseHex(value, true));
 535 |       }
 536 | 
 537 |       opacity = input.attr('data-opacity') === '' ? 1 : keepWithin(parseFloat(input.attr('data-opacity')).toFixed(2), 0, 1);
 538 |       if(isNaN(opacity) || !settings.opacity) opacity = 1;
 539 | 
 540 |       if(input.minicolors('rgbObject').a <= 1 && rgb && settings.opacity) {
 541 |         // Set RGBA string if alpha
 542 |         value = 'rgba(' + rgb.r + ', ' + rgb.g + ', ' + rgb.b + ', ' + parseFloat(opacity) + ')';
 543 |       } else {
 544 |         // Set RGB string (alpha = 1)
 545 |         value = 'rgb(' + rgb.r + ', ' + rgb.g + ', ' + rgb.b + ')';
 546 |       }
 547 |     } else {
 548 |       // Returns hex color
 549 | 
 550 |       // Checks for input format and does the conversion
 551 |       if(isRgb(value)) {
 552 |         value = rgbString2hex(value);
 553 |       }
 554 | 
 555 |       value = convertCase(value, settings.letterCase);
 556 |     }
 557 | 
 558 |     // Update value from picker
 559 |     input.val(value);
 560 | 
 561 |     // Set swatch color
 562 |     swatch.find('span').css({
 563 |       backgroundColor: value,
 564 |       opacity: String(opacity)
 565 |     });
 566 | 
 567 |     // Handle change event
 568 |     doChange(input, value, opacity);
 569 |   }
 570 | 
 571 |   // Sets the color picker values from the input
 572 |   function updateFromInput(input, preserveInputValue) {
 573 |     var hex, hsb, opacity, keywords, alpha, value, x, y, r, phi;
 574 | 
 575 |     // Helpful references
 576 |     var minicolors = input.parent();
 577 |     var settings = input.data('minicolors-settings');
 578 |     var swatch = minicolors.find('.minicolors-input-swatch');
 579 | 
 580 |     // Panel objects
 581 |     var grid = minicolors.find('.minicolors-grid');
 582 |     var slider = minicolors.find('.minicolors-slider');
 583 |     var opacitySlider = minicolors.find('.minicolors-opacity-slider');
 584 | 
 585 |     // Picker objects
 586 |     var gridPicker = grid.find('[class$=-picker]');
 587 |     var sliderPicker = slider.find('[class$=-picker]');
 588 |     var opacityPicker = opacitySlider.find('[class$=-picker]');
 589 | 
 590 |     // Determine hex/HSB values
 591 |     if(isRgb(input.val())) {
 592 |       // If input value is a rgb(a) string, convert it to hex color and update opacity
 593 |       hex = rgbString2hex(input.val());
 594 |       alpha = keepWithin(parseFloat(getAlpha(input.val())).toFixed(2), 0, 1);
 595 |       if(alpha) {
 596 |         input.attr('data-opacity', alpha);
 597 |       }
 598 |     } else {
 599 |       hex = convertCase(parseHex(input.val(), true), settings.letterCase);
 600 |     }
 601 | 
 602 |     if(!hex){
 603 |       hex = convertCase(parseInput(settings.defaultValue, true), settings.letterCase);
 604 |     }
 605 |     hsb = hex2hsb(hex);
 606 | 
 607 |     // Get array of lowercase keywords
 608 |     keywords = !settings.keywords ? [] : $.map(settings.keywords.split(','), function(a) {
 609 |       return a.toLowerCase().trim();
 610 |     });
 611 | 
 612 |     // Set color string
 613 |     if(input.val() !== '' && $.inArray(input.val().toLowerCase(), keywords) > -1) {
 614 |       value = convertCase(input.val());
 615 |     } else {
 616 |       value = isRgb(input.val()) ? parseRgb(input.val()) : hex;
 617 |     }
 618 | 
 619 |     // Update input value
 620 |     if(!preserveInputValue) input.val(value);
 621 | 
 622 |     // Determine opacity value
 623 |     if(settings.opacity) {
 624 |       // Get from data-opacity attribute and keep within 0-1 range
 625 |       opacity = input.attr('data-opacity') === '' ? 1 : keepWithin(parseFloat(input.attr('data-opacity')).toFixed(2), 0, 1);
 626 |       if(isNaN(opacity)) opacity = 1;
 627 |       input.attr('data-opacity', opacity);
 628 |       swatch.find('span').css('opacity', String(opacity));
 629 | 
 630 |       // Set opacity picker position
 631 |       y = keepWithin(opacitySlider.height() - (opacitySlider.height() * opacity), 0, opacitySlider.height());
 632 |       opacityPicker.css('top', y + 'px');
 633 |     }
 634 | 
 635 |     // Set opacity to zero if input value is transparent
 636 |     if(input.val().toLowerCase() === 'transparent') {
 637 |       swatch.find('span').css('opacity', String(0));
 638 |     }
 639 | 
 640 |     // Update swatch
 641 |     swatch.find('span').css('backgroundColor', hex);
 642 | 
 643 |     // Determine picker locations
 644 |     switch(settings.control) {
 645 |       case 'wheel':
 646 |         // Set grid position
 647 |         r = keepWithin(Math.ceil(hsb.s * 0.75), 0, grid.height() / 2);
 648 |         phi = hsb.h * Math.PI / 180;
 649 |         x = keepWithin(75 - Math.cos(phi) * r, 0, grid.width());
 650 |         y = keepWithin(75 - Math.sin(phi) * r, 0, grid.height());
 651 |         gridPicker.css({
 652 |           top: y + 'px',
 653 |           left: x + 'px'
 654 |         });
 655 | 
 656 |         // Set slider position
 657 |         y = 150 - (hsb.b / (100 / grid.height()));
 658 |         if(hex === '') y = 0;
 659 |         sliderPicker.css('top', y + 'px');
 660 |         
 661 |         // Update panel color
 662 |         slider.css('backgroundColor', hsb2hex({ h: hsb.h, s: hsb.s, b: 100 }));
 663 |         break;
 664 | 
 665 |       case 'saturation':
 666 |         // Set grid position
 667 |         x = keepWithin((5 * hsb.h) / 12, 0, 150);
 668 |         y = keepWithin(grid.height() - Math.ceil(hsb.b / (100 / grid.height())), 0, grid.height());
 669 |         gridPicker.css({
 670 |           top: y + 'px',
 671 |           left: x + 'px'
 672 |         });
 673 | 
 674 |         // Set slider position
 675 |         y = keepWithin(slider.height() - (hsb.s * (slider.height() / 100)), 0, slider.height());
 676 |         sliderPicker.css('top', y + 'px');
 677 | 
 678 |         // Update UI
 679 |         slider.css('backgroundColor', hsb2hex({ h: hsb.h, s: 100, b: hsb.b }));
 680 |         minicolors.find('.minicolors-grid-inner').css('opacity', hsb.s / 100);
 681 |         break;
 682 | 
 683 |       case 'brightness':
 684 |         // Set grid position
 685 |         x = keepWithin((5 * hsb.h) / 12, 0, 150);
 686 |         y = keepWithin(grid.height() - Math.ceil(hsb.s / (100 / grid.height())), 0, grid.height());
 687 |         gridPicker.css({
 688 |           top: y + 'px',
 689 |           left: x + 'px'
 690 |         });
 691 | 
 692 |         // Set slider position
 693 |         y = keepWithin(slider.height() - (hsb.b * (slider.height() / 100)), 0, slider.height());
 694 |         sliderPicker.css('top', y + 'px');
 695 | 
 696 |         // Update UI
 697 |         slider.css('backgroundColor', hsb2hex({ h: hsb.h, s: hsb.s, b: 100 }));
 698 |         minicolors.find('.minicolors-grid-inner').css('opacity', 1 - (hsb.b / 100));
 699 |         break;
 700 | 
 701 |       default:
 702 |         // Set grid position
 703 |         x = keepWithin(Math.ceil(hsb.s / (100 / grid.width())), 0, grid.width());
 704 |         y = keepWithin(grid.height() - Math.ceil(hsb.b / (100 / grid.height())), 0, grid.height());
 705 |         gridPicker.css({
 706 |           top: y + 'px',
 707 |           left: x + 'px'
 708 |         });
 709 | 
 710 |         // Set slider position
 711 |         y = keepWithin(slider.height() - (hsb.h / (360 / slider.height())), 0, slider.height());
 712 |         sliderPicker.css('top', y + 'px');
 713 | 
 714 |         // Update panel color
 715 |         grid.css('backgroundColor', hsb2hex({ h: hsb.h, s: 100, b: 100 }));
 716 |         break;
 717 |     }
 718 | 
 719 |     // Fire change event, but only if minicolors is fully initialized
 720 |     if(input.data('minicolors-initialized')) {
 721 |       doChange(input, value, opacity);
 722 |     }
 723 |   }
 724 | 
 725 |   // Runs the change and changeDelay callbacks
 726 |   function doChange(input, value, opacity) {
 727 |     var settings = input.data('minicolors-settings');
 728 |     var lastChange = input.data('minicolors-lastChange');
 729 |     var obj, sel, i;
 730 | 
 731 |     // Only run if it actually changed
 732 |     if(!lastChange || lastChange.value !== value || lastChange.opacity !== opacity) {
 733 | 
 734 |       // Remember last-changed value
 735 |       input.data('minicolors-lastChange', {
 736 |         value: value,
 737 |         opacity: opacity
 738 |       });
 739 | 
 740 |       // Check and select applicable swatch
 741 |       if(settings.swatches && settings.swatches.length !== 0) {
 742 |         if(!isRgb(value)) {
 743 |           obj = hex2rgb(value);
 744 |         }
 745 |         else {
 746 |           obj = parseRgb(value, true);
 747 |         }
 748 |         sel = -1;
 749 |         for(i = 0; i < settings.swatches.length; ++i) {
 750 |           if(obj.r === settings.swatches[i].r && obj.g === settings.swatches[i].g && obj.b === settings.swatches[i].b && obj.a === settings.swatches[i].a) {
 751 |             sel = i;
 752 |             break;
 753 |           }
 754 |         }
 755 | 
 756 |         input.parent().find('.minicolors-swatches .minicolors-swatch').removeClass('selected');
 757 |         if(sel !== -1) {
 758 |           input.parent().find('.minicolors-swatches .minicolors-swatch').eq(i).addClass('selected');
 759 |         }
 760 |       }
 761 | 
 762 |       // Fire change event
 763 |       if(settings.change) {
 764 |         if(settings.changeDelay) {
 765 |           // Call after a delay
 766 |           clearTimeout(input.data('minicolors-changeTimeout'));
 767 |           input.data('minicolors-changeTimeout', setTimeout(function() {
 768 |             settings.change.call(input.get(0), value, opacity);
 769 |           }, settings.changeDelay));
 770 |         } else {
 771 |           // Call immediately
 772 |           settings.change.call(input.get(0), value, opacity);
 773 |         }
 774 |       }
 775 |       input.trigger('change').trigger('input');
 776 |     }
 777 |   }
 778 | 
 779 |   // Generates an RGB(A) object based on the input's value
 780 |   function rgbObject(input) {
 781 |     var rgb,
 782 |       opacity = $(input).attr('data-opacity');
 783 |     if( isRgb($(input).val()) ) {
 784 |       rgb = parseRgb($(input).val(), true);
 785 |     } else {
 786 |       var hex = parseHex($(input).val(), true);
 787 |       rgb = hex2rgb(hex);
 788 |     }
 789 |     if( !rgb ) return null;
 790 |     if( opacity !== undefined ) $.extend(rgb, { a: parseFloat(opacity) });
 791 |     return rgb;
 792 |   }
 793 | 
 794 |   // Generates an RGB(A) string based on the input's value
 795 |   function rgbString(input, alpha) {
 796 |     var rgb,
 797 |       opacity = $(input).attr('data-opacity');
 798 |     if( isRgb($(input).val()) ) {
 799 |       rgb = parseRgb($(input).val(), true);
 800 |     } else {
 801 |       var hex = parseHex($(input).val(), true);
 802 |       rgb = hex2rgb(hex);
 803 |     }
 804 |     if( !rgb ) return null;
 805 |     if( opacity === undefined ) opacity = 1;
 806 |     if( alpha ) {
 807 |       return 'rgba(' + rgb.r + ', ' + rgb.g + ', ' + rgb.b + ', ' + parseFloat(opacity) + ')';
 808 |     } else {
 809 |       return 'rgb(' + rgb.r + ', ' + rgb.g + ', ' + rgb.b + ')';
 810 |     }
 811 |   }
 812 | 
 813 |   // Converts to the letter case specified in settings
 814 |   function convertCase(string, letterCase) {
 815 |     return letterCase === 'uppercase' ? string.toUpperCase() : string.toLowerCase();
 816 |   }
 817 | 
 818 |   // Parses a string and returns a valid hex string when possible
 819 |   function parseHex(string, expand) {
 820 |     string = string.replace(/^#/g, '');
 821 |     if(!string.match(/^[A-F0-9]{3,6}/ig)) return '';
 822 |     if(string.length !== 3 && string.length !== 6) return '';
 823 |     if(string.length === 3 && expand) {
 824 |       string = string[0] + string[0] + string[1] + string[1] + string[2] + string[2];
 825 |     }
 826 |     return '#' + string;
 827 |   }
 828 | 
 829 |   // Parses a string and returns a valid RGB(A) string when possible
 830 |   function parseRgb(string, obj) {
 831 |     var values = string.replace(/[^\d,.]/g, '');
 832 |     var rgba = values.split(',');
 833 | 
 834 |     rgba[0] = keepWithin(parseInt(rgba[0], 10), 0, 255);
 835 |     rgba[1] = keepWithin(parseInt(rgba[1], 10), 0, 255);
 836 |     rgba[2] = keepWithin(parseInt(rgba[2], 10), 0, 255);
 837 |     if(rgba[3] !== undefined) {
 838 |       rgba[3] = keepWithin(parseFloat(rgba[3], 10), 0, 1);
 839 |     }
 840 | 
 841 |     // Return RGBA object
 842 |     if( obj ) {
 843 |       if (rgba[3] !== undefined) {
 844 |         return {
 845 |           r: rgba[0],
 846 |           g: rgba[1],
 847 |           b: rgba[2],
 848 |           a: rgba[3]
 849 |         };
 850 |       } else {
 851 |         return {
 852 |           r: rgba[0],
 853 |           g: rgba[1],
 854 |           b: rgba[2]
 855 |         };
 856 |       }
 857 |     }
 858 | 
 859 |     // Return RGBA string
 860 |     if(typeof(rgba[3]) !== 'undefined' && rgba[3] <= 1) {
 861 |       return 'rgba(' + rgba[0] + ', ' + rgba[1] + ', ' + rgba[2] + ', ' + rgba[3] + ')';
 862 |     } else {
 863 |       return 'rgb(' + rgba[0] + ', ' + rgba[1] + ', ' + rgba[2] + ')';
 864 |     }
 865 | 
 866 |   }
 867 | 
 868 |   // Parses a string and returns a valid color string when possible
 869 |   function parseInput(string, expand) {
 870 |     if(isRgb(string)) {
 871 |       // Returns a valid rgb(a) string
 872 |       return parseRgb(string);
 873 |     } else {
 874 |       return parseHex(string, expand);
 875 |     }
 876 |   }
 877 | 
 878 |   // Keeps value within min and max
 879 |   function keepWithin(value, min, max) {
 880 |     if(value < min) value = min;
 881 |     if(value > max) value = max;
 882 |     return value;
 883 |   }
 884 | 
 885 |   // Checks if a string is a valid RGB(A) string
 886 |   function isRgb(string) {
 887 |     var rgb = string.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i);
 888 |     return (rgb && rgb.length === 4) ? true : false;
 889 |   }
 890 | 
 891 |   // Function to get alpha from a RGB(A) string
 892 |   function getAlpha(rgba) {
 893 |     rgba = rgba.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+(\.\d{1,2})?|\.\d{1,2})[\s+]?/i);
 894 |     return (rgba && rgba.length === 6) ? rgba[4] : '1';
 895 |   }
 896 | 
 897 |   // Converts an HSB object to an RGB object
 898 |   function hsb2rgb(hsb) {
 899 |     var rgb = {};
 900 |     var h = Math.round(hsb.h);
 901 |     var s = Math.round(hsb.s * 255 / 100);
 902 |     var v = Math.round(hsb.b * 255 / 100);
 903 |     if(s === 0) {
 904 |       rgb.r = rgb.g = rgb.b = v;
 905 |     } else {
 906 |       var t1 = v;
 907 |       var t2 = (255 - s) * v / 255;
 908 |       var t3 = (t1 - t2) * (h % 60) / 60;
 909 |       if(h === 360) h = 0;
 910 |       if(h < 60) { rgb.r = t1; rgb.b = t2; rgb.g = t2 + t3; }
 911 |       else if(h < 120) {rgb.g = t1; rgb.b = t2; rgb.r = t1 - t3; }
 912 |       else if(h < 180) {rgb.g = t1; rgb.r = t2; rgb.b = t2 + t3; }
 913 |       else if(h < 240) {rgb.b = t1; rgb.r = t2; rgb.g = t1 - t3; }
 914 |       else if(h < 300) {rgb.b = t1; rgb.g = t2; rgb.r = t2 + t3; }
 915 |       else if(h < 360) {rgb.r = t1; rgb.g = t2; rgb.b = t1 - t3; }
 916 |       else { rgb.r = 0; rgb.g = 0; rgb.b = 0; }
 917 |     }
 918 |     return {
 919 |       r: Math.round(rgb.r),
 920 |       g: Math.round(rgb.g),
 921 |       b: Math.round(rgb.b)
 922 |     };
 923 |   }
 924 | 
 925 |   // Converts an RGB string to a hex string
 926 |   function rgbString2hex(rgb){
 927 |     rgb = rgb.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i);
 928 |     return (rgb && rgb.length === 4) ? '#' +
 929 |       ('0' + parseInt(rgb[1],10).toString(16)).slice(-2) +
 930 |       ('0' + parseInt(rgb[2],10).toString(16)).slice(-2) +
 931 |       ('0' + parseInt(rgb[3],10).toString(16)).slice(-2) : '';
 932 |   }
 933 | 
 934 |   // Converts an RGB object to a hex string
 935 |   function rgb2hex(rgb) {
 936 |     var hex = [
 937 |       rgb.r.toString(16),
 938 |       rgb.g.toString(16),
 939 |       rgb.b.toString(16)
 940 |     ];
 941 |     $.each(hex, function(nr, val) {
 942 |       if(val.length === 1) hex[nr] = '0' + val;
 943 |     });
 944 |     return '#' + hex.join('');
 945 |   }
 946 | 
 947 |   // Converts an HSB object to a hex string
 948 |   function hsb2hex(hsb) {
 949 |     return rgb2hex(hsb2rgb(hsb));
 950 |   }
 951 | 
 952 |   // Converts a hex string to an HSB object
 953 |   function hex2hsb(hex) {
 954 |     var hsb = rgb2hsb(hex2rgb(hex));
 955 |     if(hsb.s === 0) hsb.h = 360;
 956 |     return hsb;
 957 |   }
 958 | 
 959 |   // Converts an RGB object to an HSB object
 960 |   function rgb2hsb(rgb) {
 961 |     var hsb = { h: 0, s: 0, b: 0 };
 962 |     var min = Math.min(rgb.r, rgb.g, rgb.b);
 963 |     var max = Math.max(rgb.r, rgb.g, rgb.b);
 964 |     var delta = max - min;
 965 |     hsb.b = max;
 966 |     hsb.s = max !== 0 ? 255 * delta / max : 0;
 967 |     if(hsb.s !== 0) {
 968 |       if(rgb.r === max) {
 969 |         hsb.h = (rgb.g - rgb.b) / delta;
 970 |       } else if(rgb.g === max) {
 971 |         hsb.h = 2 + (rgb.b - rgb.r) / delta;
 972 |       } else {
 973 |         hsb.h = 4 + (rgb.r - rgb.g) / delta;
 974 |       }
 975 |     } else {
 976 |       hsb.h = -1;
 977 |     }
 978 |     hsb.h *= 60;
 979 |     if(hsb.h < 0) {
 980 |       hsb.h += 360;
 981 |     }
 982 |     hsb.s *= 100/255;
 983 |     hsb.b *= 100/255;
 984 |     return hsb;
 985 |   }
 986 | 
 987 |   // Converts a hex string to an RGB object
 988 |   function hex2rgb(hex) {
 989 |     hex = parseInt(((hex.indexOf('#') > -1) ? hex.substring(1) : hex), 16);
 990 |     return {
 991 |       r: hex >> 16,
 992 |       g: (hex & 0x00FF00) >> 8,
 993 |       b: (hex & 0x0000FF)
 994 |     };
 995 |   }
 996 | 
 997 |   // Handle events
 998 |   $([document])
 999 |     // Hide on clicks outside of the control
1000 |     .on('mousedown.minicolors touchstart.minicolors', function(event) {
1001 |       if(!$(event.target).parents().add(event.target).hasClass('minicolors')) {
1002 |         hide();
1003 |       }
1004 |     })
1005 |     // Start moving
1006 |     .on('mousedown.minicolors touchstart.minicolors', '.minicolors-grid, .minicolors-slider, .minicolors-opacity-slider', function(event) {
1007 |       var target = $(this);
1008 |       event.preventDefault();
1009 |       $(event.delegateTarget).data('minicolors-target', target);
1010 |       move(target, event, true);
1011 |     })
1012 |     // Move pickers
1013 |     .on('mousemove.minicolors touchmove.minicolors', function(event) {
1014 |       var target = $(event.delegateTarget).data('minicolors-target');
1015 |       if(target) move(target, event);
1016 |     })
1017 |     // Stop moving
1018 |     .on('mouseup.minicolors touchend.minicolors', function() {
1019 |       $(this).removeData('minicolors-target');
1020 |     })
1021 |     // Selected a swatch
1022 |     .on('click.minicolors', '.minicolors-swatches li', function(event) {
1023 |       event.preventDefault();
1024 |       var target = $(this), input = target.parents('.minicolors').find('.minicolors-input'), color = target.data('swatch-color');
1025 |       updateInput(input, color, getAlpha(color));
1026 |       updateFromInput(input);
1027 |     })
1028 |     // Show panel when swatch is clicked
1029 |     .on('mousedown.minicolors touchstart.minicolors', '.minicolors-input-swatch', function(event) {
1030 |       var input = $(this).parent().find('.minicolors-input');
1031 |       event.preventDefault();
1032 |       show(input);
1033 |     })
1034 |     // Show on focus
1035 |     .on('focus.minicolors', '.minicolors-input', function() {
1036 |       var input = $(this);
1037 |       if(!input.data('minicolors-initialized')) return;
1038 |       show(input);
1039 |     })
1040 |     // Update value on blur
1041 |     .on('blur.minicolors', '.minicolors-input', function() {
1042 |       var input = $(this);
1043 |       var settings = input.data('minicolors-settings');
1044 |       var keywords;
1045 |       var hex;
1046 |       var rgba;
1047 |       var swatchOpacity;
1048 |       var value;
1049 | 
1050 |       if(!input.data('minicolors-initialized')) return;
1051 | 
1052 |       // Get array of lowercase keywords
1053 |       keywords = !settings.keywords ? [] : $.map(settings.keywords.split(','), function(a) {
1054 |         return a.toLowerCase().trim();
1055 |       });
1056 | 
1057 |       // Set color string
1058 |       if(input.val() !== '' && $.inArray(input.val().toLowerCase(), keywords) > -1) {
1059 |         value = input.val();
1060 |       } else {
1061 |         // Get RGBA values for easy conversion
1062 |         if(isRgb(input.val())) {
1063 |           rgba = parseRgb(input.val(), true);
1064 |         } else {
1065 |           hex = parseHex(input.val(), true);
1066 |           rgba = hex ? hex2rgb(hex) : null;
1067 |         }
1068 | 
1069 |         // Convert to format
1070 |         if(rgba === null) {
1071 |           value = settings.defaultValue;
1072 |         } else if(settings.format === 'rgb') {
1073 |           value = settings.opacity ?
1074 |             parseRgb('rgba(' + rgba.r + ',' + rgba.g + ',' + rgba.b + ',' + input.attr('data-opacity') + ')') :
1075 |             parseRgb('rgb(' + rgba.r + ',' + rgba.g + ',' + rgba.b + ')');
1076 |         } else {
1077 |           value = rgb2hex(rgba);
1078 |         }
1079 |       }
1080 | 
1081 |       // Update swatch opacity
1082 |       swatchOpacity = settings.opacity ? input.attr('data-opacity') : 1;
1083 |       if(value.toLowerCase() === 'transparent') swatchOpacity = 0;
1084 |       input
1085 |         .closest('.minicolors')
1086 |         .find('.minicolors-input-swatch > span')
1087 |         .css('opacity', String(swatchOpacity));
1088 | 
1089 |       // Set input value
1090 |       input.val(value);
1091 | 
1092 |       // Is it blank?
1093 |       if(input.val() === '') input.val(parseInput(settings.defaultValue, true));
1094 | 
1095 |       // Adjust case
1096 |       input.val(convertCase(input.val(), settings.letterCase));
1097 | 
1098 |     })
1099 |     // Handle keypresses
1100 |     .on('keydown.minicolors', '.minicolors-input', function(event) {
1101 |       var input = $(this);
1102 |       if(!input.data('minicolors-initialized')) return;
1103 |       switch(event.which) {
1104 |         case 9: // tab
1105 |           hide();
1106 |           break;
1107 |         case 13: // enter
1108 |         case 27: // esc
1109 |           hide();
1110 |           input.blur();
1111 |           break;
1112 |       }
1113 |     })
1114 |     // Update on keyup
1115 |     .on('keyup.minicolors', '.minicolors-input', function() {
1116 |       var input = $(this);
1117 |       if(!input.data('minicolors-initialized')) return;
1118 |       updateFromInput(input, true);
1119 |     })
1120 |     // Update on paste
1121 |     .on('paste.minicolors', '.minicolors-input', function() {
1122 |       var input = $(this);
1123 |       if(!input.data('minicolors-initialized')) return;
1124 |       setTimeout(function() {
1125 |         updateFromInput(input, true);
1126 |       }, 1);
1127 |     });
1128 | }));
1129 | 


--------------------------------------------------------------------------------
/jquery.minicolors.min.js:
--------------------------------------------------------------------------------
1 | //
2 | // jQuery MiniColors: A tiny color picker built on jQuery
3 | //
4 | // Developed by Cory LaViska for A Beautiful Site, LLC
5 | //
6 | // Licensed under the MIT license: http://opensource.org/licenses/MIT
7 | //
8 | !function(i){"function"==typeof define&&define.amd?define(["jquery"],i):"object"==typeof exports?module.exports=i(require("jquery")):i(jQuery)}(function(C){"use strict";function o(i){var t=i.parent();i.removeData("minicolors-initialized").removeData("minicolors-settings").removeProp("size").removeClass("minicolors-input"),t.before(i).remove()}function s(i){var t=i.parent(),o=t.find(".minicolors-panel"),s=i.data("minicolors-settings");!i.data("minicolors-initialized")||i.prop("disabled")||t.hasClass("minicolors-inline")||t.hasClass("minicolors-focus")||(a(),t.addClass("minicolors-focus"),o.animate?o.stop(!0,!0).fadeIn(s.showSpeed,function(){s.show&&s.show.call(i.get(0))}):(o.show(),s.show&&s.show.call(i.get(0))))}function a(){C(".minicolors-focus").each(function(){var i=C(this),t=i.find(".minicolors-input"),o=i.find(".minicolors-panel"),s=t.data("minicolors-settings");o.animate?o.fadeOut(s.hideSpeed,function(){s.hide&&s.hide.call(t.get(0)),i.removeClass("minicolors-focus")}):(o.hide(),s.hide&&s.hide.call(t.get(0)),i.removeClass("minicolors-focus"))})}function n(i,t,o){var s,a,n,r,e,c=i.parents(".minicolors").find(".minicolors-input"),l=c.data("minicolors-settings"),h=i.find("[class$=-picker]"),d=i.offset().left,p=i.offset().top,u=Math.round(t.pageX-d),g=Math.round(t.pageY-p),m=o?l.animationSpeed:0;t.originalEvent.changedTouches&&(u=t.originalEvent.changedTouches[0].pageX-d,g=t.originalEvent.changedTouches[0].pageY-p),u<0&&(u=0),g<0&&(g=0),u>i.width()&&(u=i.width()),g>i.height()&&(g=i.height()),i.parent().is(".minicolors-slider-wheel")&&h.parent().is(".minicolors-grid")&&(s=75-u,a=75-g,n=Math.sqrt(s*s+a*a),(r=Math.atan2(a,s))<0&&(r+=2*Math.PI),75<n&&(u=(n=75)-75*Math.cos(r),g=75-75*Math.sin(r)),u=Math.round(u),g=Math.round(g)),e={top:g+"px"},i.is(".minicolors-grid")&&(e.left=u+"px"),h.animate?h.stop(!0).animate(e,m,l.animationEasing,function(){f(c,i)}):(h.css(e),f(c,i))}function f(i,t){function o(i,t){var o,s;return i.length&&t?(o=i.offset().left,s=i.offset().top,{x:o-t.offset().left+i.outerWidth()/2,y:s-t.offset().top+i.outerHeight()/2}):null}var s,a,n,r,e,c,l,h=i.val(),d=i.attr("data-opacity"),p=i.parent(),u=i.data("minicolors-settings"),g=p.find(".minicolors-input-swatch"),m=p.find(".minicolors-grid"),f=p.find(".minicolors-slider"),v=p.find(".minicolors-opacity-slider"),b=m.find("[class$=-picker]"),w=f.find("[class$=-picker]"),y=v.find("[class$=-picker]"),C=o(b,m),k=o(w,f),M=o(y,v);if(t.is(".minicolors-grid, .minicolors-slider, .minicolors-opacity-slider")){switch(u.control){case"wheel":r=m.width()/2-C.x,e=m.height()/2-C.y,c=Math.sqrt(r*r+e*e),(l=Math.atan2(e,r))<0&&(l+=2*Math.PI),75<c&&(c=75,C.x=69-75*Math.cos(l),C.y=69-75*Math.sin(l)),a=F(c/.75,0,100),h=q({h:s=F(180*l/Math.PI,0,360),s:a,b:n=F(100-Math.floor(k.y*(100/f.height())),0,100)}),f.css("backgroundColor",q({h:s,s:a,b:100}));break;case"saturation":h=q({h:s=F(parseInt(C.x*(360/m.width()),10),0,360),s:a=F(100-Math.floor(k.y*(100/f.height())),0,100),b:n=F(100-Math.floor(C.y*(100/m.height())),0,100)}),f.css("backgroundColor",q({h:s,s:100,b:n})),p.find(".minicolors-grid-inner").css("opacity",a/100);break;case"brightness":h=q({h:s=F(parseInt(C.x*(360/m.width()),10),0,360),s:a=F(100-Math.floor(C.y*(100/m.height())),0,100),b:n=F(100-Math.floor(k.y*(100/f.height())),0,100)}),f.css("backgroundColor",q({h:s,s:a,b:100})),p.find(".minicolors-grid-inner").css("opacity",1-n/100);break;default:h=q({h:s=F(360-parseInt(k.y*(360/f.height()),10),0,360),s:a=F(Math.floor(C.x*(100/m.width())),0,100),b:n=F(100-Math.floor(C.y*(100/m.height())),0,100)}),m.css("backgroundColor",q({h:s,s:100,b:100}))}x(i,h,d=u.opacity?parseFloat(1-M.y/v.height()).toFixed(2):1)}else g.find("span").css({backgroundColor:h,opacity:String(d)}),S(i,h,d)}function x(i,t,o){var s,a=i.parent(),n=i.data("minicolors-settings"),r=a.find(".minicolors-input-swatch");n.opacity&&i.attr("data-opacity",o),t="rgb"===n.format?(s=T(t)?I(t,!0):L(M(t,!0)),o=""===i.attr("data-opacity")?1:F(parseFloat(i.attr("data-opacity")).toFixed(2),0,1),!isNaN(o)&&n.opacity||(o=1),i.minicolors("rgbObject").a<=1&&s&&n.opacity?"rgba("+s.r+", "+s.g+", "+s.b+", "+parseFloat(o)+")":"rgb("+s.r+", "+s.g+", "+s.b+")"):(T(t)&&(t=j(t)),k(t,n.letterCase)),i.val(t),r.find("span").css({backgroundColor:t,opacity:String(o)}),S(i,t,o)}function d(i,t){var o,s,a,n,r,e,c,l,h,d,p=i.parent(),u=i.data("minicolors-settings"),g=p.find(".minicolors-input-swatch"),m=p.find(".minicolors-grid"),f=p.find(".minicolors-slider"),v=p.find(".minicolors-opacity-slider"),b=m.find("[class$=-picker]"),w=f.find("[class$=-picker]"),y=v.find("[class$=-picker]");switch(T(i.val())?(o=j(i.val()),(r=F(parseFloat(D(i.val())).toFixed(2),0,1))&&i.attr("data-opacity",r)):o=k(M(i.val(),!0),u.letterCase),s=function(i){var t=function(i){var t={h:0,s:0,b:0},o=Math.min(i.r,i.g,i.b),s=Math.max(i.r,i.g,i.b),a=s-o;t.b=s,t.s=0!==s?255*a/s:0,0!==t.s?i.r===s?t.h=(i.g-i.b)/a:i.g===s?t.h=2+(i.b-i.r)/a:t.h=4+(i.r-i.g)/a:t.h=-1;t.h*=60,t.h<0&&(t.h+=360);return t.s*=100/255,t.b*=100/255,t}(L(i));0===t.s&&(t.h=360);return t}(o=o||k(z(u.defaultValue,!0),u.letterCase)),n=u.keywords?C.map(u.keywords.split(","),function(i){return i.toLowerCase().trim()}):[],e=""!==i.val()&&-1<C.inArray(i.val().toLowerCase(),n)?k(i.val()):T(i.val())?I(i.val()):o,t||i.val(e),u.opacity&&(a=""===i.attr("data-opacity")?1:F(parseFloat(i.attr("data-opacity")).toFixed(2),0,1),isNaN(a)&&(a=1),i.attr("data-opacity",a),g.find("span").css("opacity",String(a)),l=F(v.height()-v.height()*a,0,v.height()),y.css("top",l+"px")),"transparent"===i.val().toLowerCase()&&g.find("span").css("opacity",String(0)),g.find("span").css("backgroundColor",o),u.control){case"wheel":h=F(Math.ceil(.75*s.s),0,m.height()/2),d=s.h*Math.PI/180,c=F(75-Math.cos(d)*h,0,m.width()),l=F(75-Math.sin(d)*h,0,m.height()),b.css({top:l+"px",left:c+"px"}),l=150-s.b/(100/m.height()),""===o&&(l=0),w.css("top",l+"px"),f.css("backgroundColor",q({h:s.h,s:s.s,b:100}));break;case"saturation":c=F(5*s.h/12,0,150),l=F(m.height()-Math.ceil(s.b/(100/m.height())),0,m.height()),b.css({top:l+"px",left:c+"px"}),l=F(f.height()-s.s*(f.height()/100),0,f.height()),w.css("top",l+"px"),f.css("backgroundColor",q({h:s.h,s:100,b:s.b})),p.find(".minicolors-grid-inner").css("opacity",s.s/100);break;case"brightness":c=F(5*s.h/12,0,150),l=F(m.height()-Math.ceil(s.s/(100/m.height())),0,m.height()),b.css({top:l+"px",left:c+"px"}),l=F(f.height()-s.b*(f.height()/100),0,f.height()),w.css("top",l+"px"),f.css("backgroundColor",q({h:s.h,s:s.s,b:100})),p.find(".minicolors-grid-inner").css("opacity",1-s.b/100);break;default:c=F(Math.ceil(s.s/(100/m.width())),0,m.width()),l=F(m.height()-Math.ceil(s.b/(100/m.height())),0,m.height()),b.css({top:l+"px",left:c+"px"}),l=F(f.height()-s.h/(360/f.height()),0,f.height()),w.css("top",l+"px"),m.css("backgroundColor",q({h:s.h,s:100,b:100}))}i.data("minicolors-initialized")&&S(i,e,a)}function S(i,t,o){var s,a,n,r=i.data("minicolors-settings"),e=i.data("minicolors-lastChange");if(!e||e.value!==t||e.opacity!==o){if(i.data("minicolors-lastChange",{value:t,opacity:o}),r.swatches&&0!==r.swatches.length){for(s=T(t)?I(t,!0):L(t),a=-1,n=0;n<r.swatches.length;++n)if(s.r===r.swatches[n].r&&s.g===r.swatches[n].g&&s.b===r.swatches[n].b&&s.a===r.swatches[n].a){a=n;break}i.parent().find(".minicolors-swatches .minicolors-swatch").removeClass("selected"),-1!==a&&i.parent().find(".minicolors-swatches .minicolors-swatch").eq(n).addClass("selected")}r.change&&(r.changeDelay?(clearTimeout(i.data("minicolors-changeTimeout")),i.data("minicolors-changeTimeout",setTimeout(function(){r.change.call(i.get(0),t,o)},r.changeDelay))):r.change.call(i.get(0),t,o)),i.trigger("change").trigger("input")}}function k(i,t){return"uppercase"===t?i.toUpperCase():i.toLowerCase()}function M(i,t){return!(i=i.replace(/^#/g,"")).match(/^[A-F0-9]{3,6}/gi)||3!==i.length&&6!==i.length?"":(3===i.length&&t&&(i=i[0]+i[0]+i[1]+i[1]+i[2]+i[2]),"#"+i)}function I(i,t){var o=i.replace(/[^\d,.]/g,"").split(",");return o[0]=F(parseInt(o[0],10),0,255),o[1]=F(parseInt(o[1],10),0,255),o[2]=F(parseInt(o[2],10),0,255),void 0!==o[3]&&(o[3]=F(parseFloat(o[3],10),0,1)),t?void 0!==o[3]?{r:o[0],g:o[1],b:o[2],a:o[3]}:{r:o[0],g:o[1],b:o[2]}:void 0!==o[3]&&o[3]<=1?"rgba("+o[0]+", "+o[1]+", "+o[2]+", "+o[3]+")":"rgb("+o[0]+", "+o[1]+", "+o[2]+")"}function z(i,t){return T(i)?I(i):M(i,t)}function F(i,t,o){return i<t&&(i=t),o<i&&(i=o),i}function T(i){var t=i.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i);return!(!t||4!==t.length)}function D(i){return(i=i.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+(\.\d{1,2})?|\.\d{1,2})[\s+]?/i))&&6===i.length?i[4]:"1"}function j(i){return(i=i.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i))&&4===i.length?"#"+("0"+parseInt(i[1],10).toString(16)).slice(-2)+("0"+parseInt(i[2],10).toString(16)).slice(-2)+("0"+parseInt(i[3],10).toString(16)).slice(-2):""}function p(i){var o=[i.r.toString(16),i.g.toString(16),i.b.toString(16)];return C.each(o,function(i,t){1===t.length&&(o[i]="0"+t)}),"#"+o.join("")}function q(i){return p((t=i,n={},r=Math.round(t.h),e=Math.round(255*t.s/100),c=Math.round(255*t.b/100),0===e?n.r=n.g=n.b=c:(a=r%60*((o=c)-(s=(255-e)*c/255))/60,360===r&&(r=0),r<60?(n.r=o,n.b=s,n.g=s+a):r<120?(n.g=o,n.b=s,n.r=o-a):r<180?(n.g=o,n.r=s,n.b=s+a):r<240?(n.b=o,n.r=s,n.g=o-a):r<300?(n.b=o,n.g=s,n.r=s+a):r<360?(n.r=o,n.g=s,n.b=o-a):(n.r=0,n.g=0,n.b=0)),{r:Math.round(n.r),g:Math.round(n.g),b:Math.round(n.b)}));var t,o,s,a,n,r,e,c}function L(i){return{r:(i=parseInt(-1<i.indexOf("#")?i.substring(1):i,16))>>16,g:(65280&i)>>8,b:255&i}}C.minicolors={defaults:{animationSpeed:50,animationEasing:"swing",change:null,changeDelay:0,control:"hue",defaultValue:"",format:"hex",hide:null,hideSpeed:100,inline:!1,keywords:"",letterCase:"lowercase",opacity:!1,position:"bottom",show:null,showSpeed:100,theme:"default",swatches:[]}},C.extend(C.fn,{minicolors:function(i,t){switch(i){case"destroy":return C(this).each(function(){o(C(this))}),C(this);case"hide":return a(),C(this);case"opacity":return void 0===t?C(this).attr("data-opacity"):(C(this).each(function(){d(C(this).attr("data-opacity",t))}),C(this));case"rgbObject":return function(i){var t,o=C(i).attr("data-opacity");{var s;t=T(C(i).val())?I(C(i).val(),!0):(s=M(C(i).val(),!0),L(s))}if(!t)return null;void 0!==o&&C.extend(t,{a:parseFloat(o)});return t}(C(this));case"rgbString":case"rgbaString":return function(i,t){var o,s=C(i).attr("data-opacity");{var a;o=T(C(i).val())?I(C(i).val(),!0):(a=M(C(i).val(),!0),L(a))}if(!o)return null;void 0===s&&(s=1);return t?"rgba("+o.r+", "+o.g+", "+o.b+", "+parseFloat(s)+")":"rgb("+o.r+", "+o.g+", "+o.b+")"}(C(this),"rgbaString"===i);case"settings":return void 0===t?C(this).data("minicolors-settings"):(C(this).each(function(){var i=C(this).data("minicolors-settings")||{};o(C(this)),C(this).minicolors(C.extend(!0,i,t))}),C(this));case"show":return s(C(this).eq(0)),C(this);case"value":return void 0===t?C(this).val():(C(this).each(function(){"object"==typeof t&&null!==t?(void 0!==t.opacity&&C(this).attr("data-opacity",F(t.opacity,0,1)),t.color&&C(this).val(t.color)):C(this).val(t),d(C(this))}),C(this));default:return"create"!==i&&(t=i),C(this).each(function(){!function(t,i){var o,s,a,n,r,e,c,l=C('<div class="minicolors" />'),h=C.minicolors.defaults;if(t.data("minicolors-initialized"))return;i=C.extend(!0,{},h,i),l.addClass("minicolors-theme-"+i.theme).toggleClass("minicolors-with-opacity",i.opacity),void 0!==i.position&&C.each(i.position.split(" "),function(){l.addClass("minicolors-position-"+this)});s="rgb"===i.format?i.opacity?"25":"20":i.keywords?"11":"7";t.addClass("minicolors-input").data("minicolors-initialized",!1).data("minicolors-settings",i).prop("size",s).wrap(l).after('<div class="minicolors-panel minicolors-slider-'+i.control+'"><div class="minicolors-slider minicolors-sprite"><div class="minicolors-picker"></div></div><div class="minicolors-opacity-slider minicolors-sprite"><div class="minicolors-picker"></div></div><div class="minicolors-grid minicolors-sprite"><div class="minicolors-grid-inner"></div><div class="minicolors-picker"><div></div></div></div></div>'),i.inline||(t.after('<span class="minicolors-swatch minicolors-sprite minicolors-input-swatch"><span class="minicolors-swatch-color"></span></span>'),t.next(".minicolors-input-swatch").on("click",function(i){i.preventDefault(),t.trigger("focus")}));if((e=t.parent().find(".minicolors-panel")).on("selectstart",function(){return!1}).end(),i.swatches&&0!==i.swatches.length)for(e.addClass("minicolors-with-swatches"),a=C('<ul class="minicolors-swatches"></ul>').appendTo(e),c=0;c<i.swatches.length;++c)n="object"==typeof i.swatches[c]?(o=i.swatches[c].name,i.swatches[c].color):(o="",i.swatches[c]),n=T(r=n)?I(n,!0):L(M(n,!0)),C('<li class="minicolors-swatch minicolors-sprite"><span class="minicolors-swatch-color"></span></li>').attr("title",o).appendTo(a).data("swatch-color",r).find(".minicolors-swatch-color").css({backgroundColor:"transparent"!==r?p(n):"transparent",opacity:String(n.a)}),i.swatches[c]=n;i.inline&&t.parent().addClass("minicolors-inline");d(t,!1),t.data("minicolors-initialized",!0)}(C(this),t)}),C(this)}}}),C([document]).on("mousedown.minicolors touchstart.minicolors",function(i){C(i.target).parents().add(i.target).hasClass("minicolors")||a()}).on("mousedown.minicolors touchstart.minicolors",".minicolors-grid, .minicolors-slider, .minicolors-opacity-slider",function(i){var t=C(this);i.preventDefault(),C(i.delegateTarget).data("minicolors-target",t),n(t,i,!0)}).on("mousemove.minicolors touchmove.minicolors",function(i){var t=C(i.delegateTarget).data("minicolors-target");t&&n(t,i)}).on("mouseup.minicolors touchend.minicolors",function(){C(this).removeData("minicolors-target")}).on("click.minicolors",".minicolors-swatches li",function(i){i.preventDefault();var t=C(this),o=t.parents(".minicolors").find(".minicolors-input"),s=t.data("swatch-color");x(o,s,D(s)),d(o)}).on("mousedown.minicolors touchstart.minicolors",".minicolors-input-swatch",function(i){var t=C(this).parent().find(".minicolors-input");i.preventDefault(),s(t)}).on("focus.minicolors",".minicolors-input",function(){var i=C(this);i.data("minicolors-initialized")&&s(i)}).on("blur.minicolors",".minicolors-input",function(){var i,t,o,s,a,n=C(this),r=n.data("minicolors-settings");n.data("minicolors-initialized")&&(i=r.keywords?C.map(r.keywords.split(","),function(i){return i.toLowerCase().trim()}):[],a=""!==n.val()&&-1<C.inArray(n.val().toLowerCase(),i)?n.val():null===(o=T(n.val())?I(n.val(),!0):(t=M(n.val(),!0))?L(t):null)?r.defaultValue:"rgb"===r.format?r.opacity?I("rgba("+o.r+","+o.g+","+o.b+","+n.attr("data-opacity")+")"):I("rgb("+o.r+","+o.g+","+o.b+")"):p(o),s=r.opacity?n.attr("data-opacity"):1,"transparent"===a.toLowerCase()&&(s=0),n.closest(".minicolors").find(".minicolors-input-swatch > span").css("opacity",String(s)),n.val(a),""===n.val()&&n.val(z(r.defaultValue,!0)),n.val(k(n.val(),r.letterCase)))}).on("keydown.minicolors",".minicolors-input",function(i){var t=C(this);if(t.data("minicolors-initialized"))switch(i.which){case 9:a();break;case 13:case 27:a(),t.blur()}}).on("keyup.minicolors",".minicolors-input",function(){var i=C(this);i.data("minicolors-initialized")&&d(i,!0)}).on("paste.minicolors",".minicolors-input",function(){var i=C(this);i.data("minicolors-initialized")&&setTimeout(function(){d(i,!0)},1)})});


--------------------------------------------------------------------------------
/jquery.minicolors.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/claviska/jquery-minicolors/f5383d1623aadd3174f818ef9bb1b3ff0542b0c2/jquery.minicolors.png


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "@claviska/jquery-minicolors",
 3 |   "version": "2.3.6",
 4 |   "homepage": "https://github.com/claviska/jquery-minicolors",
 5 |   "author": "Cory LaViska",
 6 |   "description": "jQuery MiniColors Plugin",
 7 |   "main": "jquery.minicolors.js",
 8 |   "keywords": [
 9 |     "jquery",
10 |     "colorpicker"
11 |   ],
12 |   "license": "MIT",
13 |   "peerDependencies": {
14 |     "jquery": ">= 1.7.x"
15 |   },
16 |   "devDependencies": {
17 |     "del": "^5.1.0",
18 |     "gulp": "^4.0.2",
19 |     "gulp-rename": "^2.0.0",
20 |     "gulp-uglify": "^3.0.2",
21 |     "uglify-save-license": "^0.4.1"
22 |   },
23 |   "repository": {
24 |     "type": "git",
25 |     "url": "https://github.com/claviska/jquery-minicolors.git"
26 |   },
27 |   "bugs": {
28 |     "url": "https://github.com/claviska/jquery-minicolors/issues"
29 |   },
30 |   "scripts": {
31 |     "build": "gulp",
32 |     "watch": "gulp watch"
33 |   }
34 | }
35 | 


--------------------------------------------------------------------------------
/without-bootstrap.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html>
  3 | <head>
  4 |   <title>jQuery MiniColors</title>
  5 |   <meta charset="utf-8">
  6 | 
  7 |   <!-- jQuery -->
  8 |   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  9 | 
 10 |   <!-- MiniColors -->
 11 |   <script src="jquery.minicolors.js"></script>
 12 |   <link rel="stylesheet" href="jquery.minicolors.css">
 13 | 
 14 |   <style>
 15 |     body {
 16 |       font: 16px sans-serif;
 17 |       line-height: 1.8;
 18 |       padding: 0 40px;
 19 |       margin-bottom: 200px;
 20 |     }
 21 |     a {
 22 |       color: #08c;
 23 |       text-decoration: none;
 24 |     }
 25 |     a:hover {
 26 |       text-decoration: underline;
 27 |     }
 28 |     .form-group {
 29 |       margin: 20px 0;
 30 |     }
 31 |     label {
 32 |       color: #888;
 33 |     }
 34 |   </style>
 35 | 
 36 |   <script>
 37 |     $(document).ready( function() {
 38 | 
 39 |       $('.demo').each( function() {
 40 |         //
 41 |         // Dear reader, it's actually very easy to initialize MiniColors. For example:
 42 |         //
 43 |         //  $(selector).minicolors();
 44 |         //
 45 |         // The way I've done it below is just for the demo, so don't get confused
 46 |         // by it. Also, data- attributes aren't supported at this time. Again,
 47 |         // they're only used for the purposes of this demo.
 48 |         //
 49 |         $(this).minicolors({
 50 |           control: $(this).attr('data-control') || 'hue',
 51 |           defaultValue: $(this).attr('data-defaultValue') || '',
 52 |           format: $(this).attr('data-format') || 'hex',
 53 |           keywords: $(this).attr('data-keywords') || '',
 54 |           inline: $(this).attr('data-inline') === 'true',
 55 |           letterCase: $(this).attr('data-letterCase') || 'lowercase',
 56 |           opacity: $(this).attr('data-opacity'),
 57 |           position: $(this).attr('data-position') || 'bottom',
 58 |           swatches: $(this).attr('data-swatches') ? $(this).attr('data-swatches').split('|') : [],
 59 |           change: function(hex, opacity) {
 60 |             var log;
 61 |             try {
 62 |               log = hex ? hex : 'transparent';
 63 |               if( opacity ) log += ', ' + opacity;
 64 |               console.log(log);
 65 |             } catch(e) {}
 66 |           },
 67 |           theme: 'default'
 68 |         });
 69 | 
 70 |       });
 71 | 
 72 |     });
 73 |   </script>
 74 | </head>
 75 | <body>
 76 | 
 77 |   <h1>MiniColors Demo (without Bootstrap)</h1>
 78 |   <p>
 79 |     <a href="index.html">&laquo; Back to the Bootstrap demo</a>
 80 |   </p>
 81 |   <p>
 82 |     <a onclick="$(body).attr('dir')=='rtl'?$(body).removeAttr('dir'):$(body).attr('dir', 'rtl')">Toggle LTR/RTL</a>
 83 |   </p>
 84 |   <!-- Control Types -->
 85 |   <h3>Control Types</h3>
 86 |   <div class="form-group">
 87 |     <label for="hue-demo">Hue (default)</label>
 88 |     <input type="text" id="hue-demo" class="demo" data-control="hue" value="#ff6161">
 89 |   </div>
 90 |   <div class="form-group">
 91 |     <label for="saturation-demo">Saturation</label>
 92 |     <input type="text" id="saturation-demo" class="demo" data-control="saturation" value="#0088cc">
 93 |   </div>
 94 |   <div class="form-group">
 95 |     <label for="brightness-demo">Brightness</label>
 96 |     <input type="text" id="brightness-demo" class="demo" data-control="brightness" value="#00ffff">
 97 |   </div>
 98 |   <div class="form-group">
 99 |     <label for="wheel-demo">Wheel</label>
100 |     <input type="text" id="wheel-demo" class="demo" data-control="wheel" value="#ff99ee">
101 |   </div>
102 | 
103 |   <!-- Input modes -->
104 |   <h3>Input Modes</h3>
105 |   <div class="form-group">
106 |     <label for="text-field">Text field</label>
107 |     <br>
108 |     <input type="text" id="text-field" class="demo" value="#70c24a">
109 |   </div>
110 |   <div class="form-group">
111 |     <label for="hidden-input">Hidden Input</label>
112 |     <br>
113 |     <input type="hidden" id="hidden-input" class="demo" value="#db913d">
114 |   </div>
115 |   <div class="form-group">
116 |     <label for="inline">Inline</label>
117 |     <br>
118 |     <input type="text" id="inline" class="demo" data-inline="true" value="#4fc8db">
119 |   </div>
120 | 
121 |   <!-- Positions -->
122 |   <h3>Positions</h3>
123 |   <div class="form-group">
124 |     <label for="position-bottom-left">bottom left (default)</label>
125 |     <input type="text" id="position-bottom-left" class="demo" data-position="bottom left" value="#0088cc">
126 |   </div>
127 |   <div class="form-group">
128 |     <label for="position-top-left">top left</label>
129 |     <input type="text" id="position-top-left" class="demo" data-position="top left" value="#0088cc">
130 |   </div>
131 |   <div class="form-group">
132 |     <label for="position-bottom-right">bottom right</label>
133 |     <input type="text" id="position-bottom-right" class="demo" data-position="bottom right" value="#0088cc">
134 |   </div>
135 |   <div class="form-group">
136 |     <label for="position-top-right">top right</label>
137 |     <input type="text" id="position-top-right" class="demo" data-position="top right" value="#0088cc">
138 |   </div>
139 | 
140 |   <!-- RGB(A) -->
141 |   <h3>RGB(A)</h3>
142 |   <div class="form-group">
143 |     <label for="rgb">rgb</label>
144 |     <br>
145 |     <input type="text" id="rgb" class="demo" data-format="rgb" value="rgb(33, 147, 58)">
146 |   </div>
147 |   <div class="form-group">
148 |     <label for="rgba">rgb(a)</label>
149 |     <br>
150 |     <input type="text" id="rgba" class="demo" data-format="rgb" data-opacity=".5" value="rgba(52, 64, 158, 0.5)">
151 |   </div>
152 | 
153 |   <!-- and more -->
154 |   <h3>&hellip;and more!</h3>
155 |   <div class="form-group">
156 |     <label for="opacity">Opacity</label>
157 |     <br>
158 |     <input type="text" id="opacity" class="demo" data-opacity=".5" value="#766fa8">
159 |   </div>
160 |   <div class="form-group">
161 |     <label for="keywords">Keywords</label>
162 |     <br>
163 |     <input type="text" id="keywords" class="demo" data-keywords="transparent, inherit, initial" value="transparent">
164 |   </div>
165 |   <div class="form-group">
166 |     <label for="default-value">Default Value</label>
167 |     <br>
168 |     <input type="text" id="default-value" class="demo" data-defaultValue="#ff6600">
169 |   </div>
170 |   <div class="form-group">
171 |     <label for="letter-case">Letter Case</label>
172 |     <br>
173 |     <input type="text" id="letter-case" class="demo" data-letterCase="uppercase">
174 |   </div>
175 |   <div class="form-group">
176 |     <label for="letter-case">Swatches</label>
177 |     <br>
178 |     <input type="text" id="swatches" class="demo" data-swatches="#ef9a9a|#90caf9|#a5d6a7|#fff59d|#ffcc80|#bcaaa4|#eeeeee|#f44336|#2196f3|#4caf50|#ffeb3b|#ff9800|#795548|#9e9e9e" value="#f00">
179 |   </div>
180 |   <div class="form-group">
181 |     <label for="letter-case">Swatches and opacity</label>
182 |     <br>
183 |     <input type="text" id="swatches-opacity" class="demo" data-format="rgb" data-opacity="1" data-swatches="#fff|#000|#f00|#0f0|#00f|#ff0|rgba(0,0,255,0.5)" value="#f00">
184 |   </div>
185 | 
186 | </body>
187 | </html>
188 | 


--------------------------------------------------------------------------------