[Pkg-javascript-commits] [libjs-jquery-minicolors] 01/03: New upstream version 2.2.6+dfsg
Michael Lustfield
mtecknology at debian.org
Sun Aug 27 01:09:01 UTC 2017
This is an automated email from the git hooks/post-receive script.
mtecknology pushed a commit to branch master
in repository libjs-jquery-minicolors.
commit 1176c338ce2ecf50c6d364b6dc8f88e650065a7b
Author: Michael Lustfield <michael at lustfield.net>
Date: Sat Aug 26 19:51:24 2017 -0500
New upstream version 2.2.6+dfsg
---
.editorconfig | 9 +
.eslintrc | 20 +
.gitignore | 2 +
LICENSE.md | 7 +
README.md | 19 +
bower.json | 25 ++
component.json | 21 +
composer.json | 20 +
gulpfile.js | 34 ++
index.html | 716 +++++++++++++++++++++++++++++++
jquery.minicolors.css | 319 ++++++++++++++
jquery.minicolors.js | 1108 ++++++++++++++++++++++++++++++++++++++++++++++++
jquery.minicolors.png | Bin 0 -> 68627 bytes
package.json | 31 ++
without-bootstrap.html | 185 ++++++++
15 files changed, 2516 insertions(+)
diff --git a/.editorconfig b/.editorconfig
new file mode 100644
index 0000000..c6c8b36
--- /dev/null
+++ b/.editorconfig
@@ -0,0 +1,9 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
diff --git a/.eslintrc b/.eslintrc
new file mode 100644
index 0000000..e04c87b
--- /dev/null
+++ b/.eslintrc
@@ -0,0 +1,20 @@
+{
+ "rules": {
+ "no-console": ["off"],
+ "indent": ["error", 2],
+ "quotes": ["error", "single"],
+ "linebreak-style": ["error", "unix"],
+ "no-unused-vars": ["warn", { "vars": "all", "args": "after-used" }],
+ "semi": ["error", "always"]
+ },
+ "env": {
+ "browser": true,
+ "jquery": true
+ },
+ "extends": "eslint:recommended",
+ "globals": {
+ "define": true,
+ "module": true,
+ "require": true
+ }
+}
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..7d6ad5f
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,2 @@
+.DS_Store
+node_modules/*
diff --git a/LICENSE.md b/LICENSE.md
new file mode 100644
index 0000000..39ebd3b
--- /dev/null
+++ b/LICENSE.md
@@ -0,0 +1,7 @@
+Copyright 2017 A Beautiful Site, LLC
+
+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:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+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.
diff --git a/README.md b/README.md
new file mode 100755
index 0000000..3bfc28d
--- /dev/null
+++ b/README.md
@@ -0,0 +1,19 @@
+# jQuery MiniColors: A tiny color picker built on jQuery
+
+Developed by Cory LaViska for A Beautiful Site, LLC
+
+Licensed under the MIT license: http://opensource.org/licenses/MIT
+
+## Demo & Documentation
+
+http://labs.abeautifulsite.net/jquery-minicolors/
+
+## Install via NPM
+
+This is the official NPM version of MiniColors:
+
+```
+npm install --save @claviska/jquery-minicolors
+```
+
+**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.
diff --git a/bower.json b/bower.json
new file mode 100644
index 0000000..df9ff42
--- /dev/null
+++ b/bower.json
@@ -0,0 +1,25 @@
+{
+ "name": "jquery-minicolors",
+ "version": "2.2.6",
+ "homepage": "https://github.com/claviska/jquery-minicolors",
+ "authors": [
+ "Cory LaViska"
+ ],
+ "description": "jQuery MiniColors Plugin",
+ "main": [
+ "./jquery.minicolors.js",
+ "./jquery.minicolors.css"
+ ],
+ "keywords": [
+ "jquery",
+ "colorpicker"
+ ],
+ "license": "MIT",
+ "ignore": [
+ "**/.*",
+ "node_modules",
+ "bower_components",
+ "test",
+ "tests"
+ ]
+}
diff --git a/component.json b/component.json
new file mode 100644
index 0000000..0681adb
--- /dev/null
+++ b/component.json
@@ -0,0 +1,21 @@
+{
+ "name": "jquery-minicolors",
+ "version": "2.2.6",
+ "description": "jQuery MiniColors Plugin",
+ "homepage": "",
+ "main": [ "./jquery.minicolors.js", "./jquery.minicolors.css" ],
+ "dependencies": {
+ "jquery": ">= 1.7.x"
+ },
+ "keywords": [
+ "jquery",
+ "colorpicker"
+ ],
+ "author": {
+ "name": "Cory LaViska",
+ "web": "http://www.abeautifulsite.net/"
+ },
+ "license": [
+ "http://www.opensource.org/licenses/mit-license.php"
+ ]
+}
diff --git a/composer.json b/composer.json
new file mode 100644
index 0000000..88f08a3
--- /dev/null
+++ b/composer.json
@@ -0,0 +1,20 @@
+{
+ "name": "abeautifulsite/jquery-minicolors",
+ "type": "component",
+ "description": "jQuery MiniColors Plugin",
+ "homepage": "http://www.abeautifulsite.net/",
+ "license": "MIT",
+ "extra": {
+ "component": {
+ "scripts": [
+ "jquery.minicolors.js"
+ ],
+ "files": [
+ "jquery.minicolors.js",
+ "jquery.minicolors.min.js",
+ "jquery.minicolors.css",
+ "jquery.minicolors.png"
+ ]
+ }
+ }
+}
\ No newline at end of file
diff --git a/gulpfile.js b/gulpfile.js
new file mode 100644
index 0000000..45082a8
--- /dev/null
+++ b/gulpfile.js
@@ -0,0 +1,34 @@
+/* eslint-env node, es6 */
+'use strict';
+
+const gulp = require('gulp-help')(require('gulp'));
+const del = require('del');
+const rename = require('gulp-rename');
+const uglify = require('gulp-uglify');
+
+// Clean
+gulp.task('clean', 'Clean up!', () => {
+ return del('jquery.minicolors.min.js');
+});
+
+// Minify
+gulp.task('minify', 'Minify it!', ['clean'], () => {
+ return gulp.src('jquery.minicolors.js')
+ .pipe(uglify({
+ preserveComments: 'license'
+ }))
+ .on('error', (err) => {
+ console.error(err);
+ this.emit('end');
+ })
+ .pipe(rename({ suffix: '.min' }))
+ .pipe(gulp.dest(__dirname));
+});
+
+// Watch for changes
+gulp.task('watch', 'Watch for changes!', () => {
+ gulp.watch('jquery.minicolors.js', ['minify']);
+});
+
+// Default
+gulp.task('default', 'The default task.', ['watch']);
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..8c33310
--- /dev/null
+++ b/index.html
@@ -0,0 +1,716 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>jQuery MiniColors</title>
+ <meta charset="utf-8">
+
+ <!-- jQuery -->
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
+
+ <!-- Bootstrap 3 -->
+ <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
+ <script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
+
+ <!-- MiniColors -->
+ <script src="jquery.minicolors.js"></script>
+ <link rel="stylesheet" href="jquery.minicolors.css">
+
+ <style>
+ dl {
+ margin: 20px 0;
+ }
+ dt {
+ font-size: 120%;
+ }
+ dd {
+ padding: 10px 20px 20px 20px;
+ }
+ dd:last-child {
+ border-bottom: none;
+ }
+ code {
+ color: black;
+ border: none;
+ background: rgba(128, 128, 128, .1);
+ }
+ pre {
+ background: #f8f8f8;
+ border: none;
+ color: #333;
+ padding: 20px;
+ }
+ h2 {
+ margin-top: 50px;
+ }
+ h3 {
+ color: #aaa;
+ }
+ .jumbotron {
+ padding: 40px;
+ }
+ .jumbotron h1 {
+ margin-top: 0;
+ }
+ .jumbotron p:last-child {
+ margin-bottom: 0;
+ }
+ </style>
+
+ <script>
+ $(document).ready( function() {
+
+ $('.demo').each( function() {
+ //
+ // Dear reader, it's actually very easy to initialize MiniColors. For example:
+ //
+ // $(selector).minicolors();
+ //
+ // The way I've done it below is just for the demo, so don't get confused
+ // by it. Also, data- attributes aren't supported at this time...they're
+ // only used for this demo.
+ //
+ $(this).minicolors({
+ control: $(this).attr('data-control') || 'hue',
+ defaultValue: $(this).attr('data-defaultValue') || '',
+ format: $(this).attr('data-format') || 'hex',
+ keywords: $(this).attr('data-keywords') || '',
+ inline: $(this).attr('data-inline') === 'true',
+ letterCase: $(this).attr('data-letterCase') || 'lowercase',
+ opacity: $(this).attr('data-opacity'),
+ position: $(this).attr('data-position') || 'bottom left',
+ swatches: $(this).attr('data-swatches') ? $(this).attr('data-swatches').split('|') : [],
+ change: function(value, opacity) {
+ if( !value ) return;
+ if( opacity ) value += ', ' + opacity;
+ if( typeof console === 'object' ) {
+ console.log(value);
+ }
+ },
+ theme: 'bootstrap'
+ });
+
+ });
+
+ });
+ </script>
+</head>
+<body>
+ <div class="row" style="margin: 40px 40px;">
+ <div class="col-12">
+
+ <!-- Intro -->
+ <div id="intro" class="jumbotron">
+ <h1>jQuery MiniColors</h1>
+ <p class="text-muted">
+ Now with Bootstrap 3 support!
+ </p>
+ <p>
+ A project by <a href="http://www.abeautifulsite.net/">A Beautiful Site</a>,
+ originally developed for <a href="http://www.surrealcms.com/">Surreal CMS</a>.
+ </p>
+ </div>
+
+ <!-- Contents -->
+ <h2 id="contents">Contents</h2>
+ <ul>
+ <li><a href="#download">Download</a></li>
+ <li><a href="#demos">Demos</a></li>
+ <li><a href="#api">API</a>
+ <ul>
+ <li><a href="#instantiation">Instantiation</a></li>
+ <li><a href="#settings">Settings</a></li>
+ <li><a href="#methods">Methods</a></li>
+ <li><a href="#events">Events</a></li>
+ </ul>
+ </li>
+ <li><a href="#license">License</a></li>
+ </ul>
+
+ <!-- Download -->
+ <h2 id="download">Download</h2>
+ <p>
+ This project is on GitHub. Feel free to post bug reports, feature requests, and code
+ improvements on the official project page.
+ </p>
+ <p>
+ <a href="https://github.com/claviska/jquery-minicolors" class="btn btn-success">Download on GitHub</a>
+ </p>
+
+ <!-- Demos -->
+ <h2 id="demos">Demos</h2>
+ <p>
+ This is the main demo page, which uses <a href="http://getbootstrap.com/">Bootstrap 3</a>,
+ but this plugin works without Bootstrap as well.
+ </p>
+ <p>
+ <a href="without-bootstrap.html" class="btn btn-primary">View Demo Without Bootstrap</a>
+ </p>
+
+ <!-- Control types -->
+ <h3>Control Types</h3>
+ <div class="well">
+ <div class="row">
+ <div class="col-lg-4 col-sm-4 col-12">
+
+ <div class="form-group">
+ <label for="hue-demo">Hue (default)</label>
+ <input type="text" id="hue-demo" class="form-control demo" data-control="hue" value="#ff6161">
+ </div>
+ <div class="form-group">
+ <label for="saturation-demo">Saturation</label>
+ <input type="text" id="saturation-demo" class="form-control demo" data-control="saturation" value="#0088cc">
+ </div>
+ </div>
+
+ <div class="col-lg-4 col-sm-4 col-12">
+ <div class="form-group">
+ <label for="brightness-demo">Brightness</label>
+ <input type="text" id="brightness-demo" class="form-control demo" data-control="brightness" value="#00ffff">
+ </div>
+ <div class="form-group">
+ <label for="wheel-demo">Wheel</label>
+ <input type="text" id="wheel-demo" class="form-control demo" data-control="wheel" value="#ff99ee">
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <!-- Input modes -->
+ <h3>Input Modes</h3>
+ <div class="well">
+ <div class="row">
+ <div class="col-lg-4 col-sm-4 col-12">
+ <div class="form-group">
+ <label for="text-field">Text field</label>
+ <br>
+ <input type="text" id="text-field" class="form-control demo" value="#70c24a">
+ </div>
+ <div class="form-group">
+ <label for="hidden-input">Hidden Input</label>
+ <br>
+ <input type="hidden" id="hidden-input" class="demo" value="#db913d">
+ </div>
+ </div>
+ <div class="col-lg-4 col-sm-4 col-12">
+ <div class="form-group">
+ <label for="inline">Inline</label>
+ <br>
+ <input type="text" id="inline" class="form-control demo" data-inline="true" value="#4fc8db">
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <!-- Positions -->
+ <h3>Positions</h3>
+ <div class="well">
+ <p>
+ Valid positions include <code>bottom left</code>, <code>bottom right</code>, <code>top
+ left</code>, and <code>top right</code>.
+ </p>
+ <div class="row">
+ <div class="col-lg-4 col-sm-4 col-12">
+ <div class="form-group">
+ <label for="position-bottom-left">bottom left (default)</label>
+ <input type="text" id="position-bottom-left" class="form-control demo" data-position="bottom left" value="#0088cc">
+ </div>
+ <div class="form-group">
+ <label for="position-top-left">top left</label>
+ <input type="text" id="position-top-left" class="form-control demo" data-position="top left" value="#0088cc">
+ </div>
+ </div>
+ <div class="col-lg-4 col-sm-4 col-12">
+ <div class="form-group">
+ <label for="position-bottom-right">bottom right</label>
+ <input type="text" id="position-bottom-right" class="form-control demo" data-position="bottom right" value="#0088cc">
+ </div>
+ <div class="form-group">
+ <label for="position-top-right">top right</label>
+ <input type="text" id="position-top-right" class="form-control demo" data-position="top right" value="#0088cc">
+ </div>
+ </div>
+ <div class="col-lg-4 col-sm-4 col-12">
+ </div>
+ </div>
+ </div>
+
+ <!-- RGB(A) -->
+ <h3>RGB(A)</h3>
+ <div class="well">
+ <div class="row">
+ <div class="col-lg-4 col-sm-4 col-12">
+ <div class="form-group">
+ <label for="rgb">RGB</label>
+ <br>
+ <input type="text" id="rgb" class="form-control demo" data-format="rgb" value="rgb(33, 147, 58)">
+ <span class="help-block">
+ RGB input can be assigned by setting the <code>format</code> option
+ to <code>rgb</code>.
+ </span>
+ </div>
+ </div>
+ <div class="col-lg-4 col-sm-4 col-12">
+ <div class="form-group">
+ <label for="rgba">RGBA</label>
+ <br>
+ <input type="text" id="rgba" class="form-control demo" data-format="rgb" data-opacity=".5" value="rgba(52, 64, 158, 0.5)">
+ <span class="help-block">
+ RGBA input can be assigned by setting the <code>format</code>
+ option to <code>rgb</code> and <code>opacity</code> option to
+ <code>true</code>.
+ </span>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <!-- and more -->
+ <h3>…and more!</h3>
+ <div class="well">
+ <div class="row">
+ <div class="col-lg-4 col-sm-4 col-12">
+ <div class="form-group">
+ <label for="opacity">Opacity</label>
+ <br>
+ <input type="text" id="opacity" class="form-control demo" data-opacity=".5" value="#766fa8">
+ <span class="help-block">
+ Opacity can be assigned by including the <code>data-opacity</code>
+ attribute or by setting the <code>opacity</code> option to
+ <code>true</code>.
+ </span>
+ </div>
+ </div>
+ <div class="col-lg-4 col-sm-4 col-12">
+ <div class="form-group">
+ <label for="keywords">Keywords</label>
+ <br>
+ <input type="text" id="keywords" class="form-control demo" data-keywords="transparent, initial, inherit" value="transparent">
+ <span class="help-block">
+ CSS-wide keywords can be assigned by setting the <code>keywords</code>
+ option to a comma-separated list of valid keywords: <code>transparent,
+ initial, inherit</code>.
+ </span>
+ </div>
+ </div>
+ </div>
+ <div class="row">
+ <div class="col-lg-4 col-sm-4 col-12">
+ <div class="form-group">
+ <label for="default-value">Default Value</label>
+ <br>
+ <input type="text" id="default-value" class="form-control demo" data-defaultValue="#ff6600">
+ <span class="help-block">
+ This field has a default value assigned to it, so it will never be empty.
+ </span>
+ </div>
+ </div>
+ <div class="col-lg-4 col-sm-4 col-12">
+ <div class="form-group">
+ <label for="letter-case">Letter Case</label>
+ <br>
+ <input type="text" id="letter-case" class="form-control demo" data-letterCase="uppercase" value="#abcdef">
+ <span class="help-block">
+ This field will always be uppercase.
+ </span>
+ </div>
+ </div>
+ </div>
+ <div class="row">
+ <div class="col-lg-4 col-sm-4 col-12">
+ <div class="form-group">
+ <label for="input-group">Input Groups</label>
+ <div class="input-group">
+ <input type="text" id="input-group" class="form-control demo" value="#ff0000"/>
+ <span class="input-group-btn">
+ <button class="btn btn-default" type="button">Button</button>
+ </span>
+ </div>
+ <span class="help-block">
+ Example using Bootstrap's input groups.
+ </span>
+ </div>
+ </div>
+ <div class="col-lg-4 col-sm-4 col-12">
+ <div class="form-group">
+ <label for="more-input-group">More Input Groups</label>
+ <div class="input-group">
+ <span class="input-group-addon">Color</span>
+ <input type="text" id="more-input-group" class="form-control demo" value="#ff0000"/>
+ <span class="input-group-btn">
+ <button class="btn btn-default" type="button">Button</button>
+ </span>
+ </div>
+ <span class="help-block">
+ Input group example with addon.
+ </span>
+ </div>
+ </div>
+ </div>
+ <div class="row">
+ <div class="col-lg-4 col-sm-4 col-12">
+ <div class="form-group">
+ <label for="letter-case">Swatches</label>
+ <br>
+ <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">
+ <span class="help-block">
+ Example with swatches.
+ </span>
+ </div>
+ </div>
+ <div class="col-lg-4 col-sm-4 col-12">
+ <div class="form-group">
+ <label for="letter-case">Swatches and opacity</label>
+ <br>
+ <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)">
+ <span class="help-block">
+ Example with swatches and opacity.
+ </span>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <!-- API -->
+ <h2 id="api">API</h2>
+
+ <!-- Instantiation -->
+ <h3 id="instantiation">Instantiation</h3>
+ <p>
+ Instantiate like any other jQuery plugin:
+ </p>
+ <pre>$('INPUT.minicolors').minicolors(settings);</pre>
+
+ <!-- Settings -->
+ <h3 id="settings">Settings</h3>
+
+ <p>
+ Default settings are as follows:
+ </p>
+<pre>
+$.minicolors = {
+ defaults: {
+ animationSpeed: 50,
+ animationEasing: 'swing',
+ change: null,
+ changeDelay: 0,
+ control: 'hue',
+ defaultValue: '',
+ format: 'hex',
+ hide: null,
+ hideSpeed: 100,
+ inline: false,
+ keywords: '',
+ letterCase: 'lowercase',
+ opacity: false,
+ position: 'bottom left',
+ show: null,
+ showSpeed: 100,
+ theme: 'default',
+ swatches: []
+ }
+};
+</pre>
+ <p>
+ For convenience, you can change default settings globally by assigning new values:
+ </p>
+<pre>
+$.minicolors.defaults.changeDelay = 200;
+</pre>
+ <p>
+ To change multiple properties at once, use <code>$.extend()</code>:
+ </p>
+<pre>
+$.minicolors.defaults = $.extend($.minicolors.defaults, {
+ changeDelay: 200,
+ letterCase: 'uppercase',
+ theme: 'bootstrap'
+});
+</pre>
+ <p class="alert alert-warning">
+ <strong>Note:</strong> Changing default settings will <em>not</em> affect controls that
+ are already initialized.
+ </p>
+
+ <dl>
+ <dt>animationSpeed</dt>
+ <dd>
+ <p>
+ The animation speed of the sliders when the user taps or clicks a new color. Set to
+ <code>0</code> for no animation.
+ </p>
+ </dd>
+
+ <dt>animationEasing</dt>
+ <dd>
+ <p>
+ The easing to use when animating the sliders.
+ </p>
+ </dd>
+
+ <dt>changeDelay</dt>
+ <dd>
+ <p>
+ The time, in milliseconds, to defer the <code>change</code> event from firing while
+ the user makes a selection. This is useful for preventing the <code>change</code> event
+ from firing frequently as the user drags the color picker around.
+ </p>
+ <p>
+ The default value is <code>0</code> (no delay). If your <code>change</code> callback
+ features something resource-intensive (such as an AJAX request), you’ll probably want
+ to set this to at least <code>200</code>.
+ </p>
+ </dd>
+
+ <dt>control</dt>
+ <dd>
+ <p>
+ Determines the type of control. Valid options are <code>hue</code>, <code>brightness</code>,
+ <code>saturation</code>, and <code>wheel</code>.
+ </p>
+ </dd>
+
+ <dt>defaultValue</dt>
+ <dd>
+ <p>
+ To force a default color, set this to a valid hex string. When the user clears the
+ control, it will revert to this color.
+ </p>
+ </dd>
+
+ <dt>format</dt>
+ <dd>
+ <p>
+ The format miniColors should use. Valid options are <code>hex</code> and
+ <code>rgb</code>.
+ </p>
+ </dd>
+
+ <dt>hideSpeed & showSpeed</dt>
+ <dd>
+ <p>
+ The speed at which to hide and show the color picker.
+ </p>
+ </dd>
+
+ <dt>inline</dt>
+ <dd>
+ <p>
+ Set to <code>true</code> to force the color picker to appear inline.
+ </p>
+ </dd>
+
+ <dt>keywords</dt>
+ <dd>
+ <p>
+ A comma-separated list of keywords that the control should accept (e.g. inherit,
+ transparent, initial). By default, no keywords are allowed.
+ </p>
+ </dd>
+
+ <dt>letterCase</dt>
+ <dd>
+ <p>
+ Determines the letter case of the hex code value. Valid options are <code>uppercase</code>
+ or <code>lowercase</code>.
+ </p>
+ </dd>
+
+ <dt>opacity</dt>
+ <dd>
+ <p>
+ Set to <code>true</code> to enable the opacity slider. (Use the input element's
+ <code>data-opacity</code> attribute to set a preset value.)
+ </p>
+ </dd>
+
+ <dt>position</dt>
+ <dd>
+ <p>
+ Sets the position of the dropdown. Valid options are <code>bottom left</code>,
+ <code>bottom right</code>, <code>top left</code>, and <code>top right</code>.
+ </p>
+ <p class="alert alert-warning">
+ The <code>swatchPosition</code> setting has been removed in version 2.1. The position
+ of the swatch is now determined by <code>position</code>.
+ </p>
+ </dd>
+
+ <dt>theme</dt>
+ <dd>
+ <p>
+ A string containing the name of the custom theme to be applied. In your CSS, prefix
+ your selectors like this:
+ </p>
+<pre>
+.minicolors-theme-yourThemeName { ... }
+</pre>
+ <p>
+ If you are using the default theme, you will probably need to adjust the swatch
+ styles depending on your existing stylesheet rules. Version 2.1 removes as much
+ styling on the <code>input</code> element as possible, which means it’s up to
+ you to adjust your CSS to make sure the swatch aligns properly.
+ </p>
+ <p>
+ To adjust the swatch, override these styles:
+ </p>
+<pre>
+.minicolors-theme-default .minicolors-swatch {
+ top: 5px;
+ left: 5px;
+ width: 18px;
+ height: 18px;
+}
+.minicolors-theme-default.minicolors-position-right .minicolors-swatch {
+ left: auto;
+ right: 5px;
+}
+</pre>
+ </div>
+ </dd>
+
+ <dt>swatches</dt>
+ <dd>
+ <p>
+ An array containing some colors, in either rgb(a) or hex format, that will
+ show up under the main color grid.
+ </p>
+ </dd>
+ </dl>
+
+ <!-- Methods -->
+ <h3 id="methods">Methods</h3>
+ <p>Use this syntax for calling methods:</p>
+ <pre>$(<em>selector</em>).minicolors('method', <em>[data]</em>);</pre>
+ <dl>
+ <dt>create</dt>
+ <dd>
+ <p>
+ Initializes the control for all items matching your selector. This is the default
+ method, so <code>data</code> may be passed in as the only argument.
+ </p>
+ <p>
+ To set a preset color value, populate the <code>value</code> attribute of the original
+ input element.
+ </p>
+ </dd>
+
+ <dt>destroy</dt>
+ <dd>
+ <p>
+ Returns the <em>input</em> element to its original, uninitialized state.
+ </p>
+ </dd>
+
+ <dt>opacity</dt>
+ <dd>
+ <p>
+ Gets or sets a control's opacity level. To use this method as a setter, pass data in
+ as a value between 0 and 1. (You can also obtain this value by checking the input
+ element's <code>data-opacity</code> attribute.)
+ </p>
+ <p>
+ To set a preset opacity value, populate the <code>data-opacity</code> attribute of the
+ original input element.
+ </p>
+ </dd>
+
+ <dt>rgbObject</dt>
+ <dd>
+ <p>
+ Returns an object containing red, green, blue, and alpha properties that correspond to
+ the control's current value. Example:
+ </p>
+ <pre>{ r: 0, g: 82, b: 148, a: 0.75 }</pre>
+ </dd>
+
+ <dt>rgbString & rgbaString</dt>
+ <dd>
+ <p>
+ Returns an RGB or RGBA string suitable for use in your CSS. Examples:
+ </p>
+<pre>
+rgb(0, 82, 148)
+rgba(0, 82, 148, .75)
+</pre>
+ </dd>
+
+ <dt>settings</dt>
+ <dd>
+ <p>
+ Gets or sets a control's settings. If new settings are passed in, the control will
+ destroy and re-initialize itself with any new settings overriding the old ones.
+ </p>
+ </dd>
+
+ <dt>value</dt>
+ <dd>
+ <p>
+ Gets or sets a control's color value. To use this method as a setter, pass
+ in a color string or an object (ex: <code>{color: '#fc0', opacity: .5}</code>).
+ </p>
+ </dd>
+ </dl>
+
+ <!-- Events -->
+ <h3 id="events">Events</h3>
+ <dl>
+ <dt>change</dt>
+ <dd>
+ <p>Fires when the value of the color picker changes. The <code>this</code> keyword will reference the original input element.
+<pre>
+$(<em>selector</em>).minicolors({
+ change: function(value, opacity) {
+ console.log(value + ' - ' + opacity);
+ }
+});
+</pre>
+ <p class="alert alert-warning">
+ <strong>Warning!</strong> This event will fire a lot when the user drags the
+ color picker around. Use the <code>changeDelay</code> setting to reduce its
+ frequency.
+ </p>
+ </dd>
+
+ <dt>hide</dt>
+ <dd>
+ <p>
+ Fires when the color picker is hidden. The <code>this</code> keyword will reference
+ the original input element.
+ </p>
+<pre>
+$(<em>selector</em>).minicolors({
+ hide: function() {
+ console.log('Hide event triggered!');
+ }
+});
+</pre>
+ </dd>
+
+ <dt>show</dt>
+ <dd>
+ <p>
+ Fires when the color picker is shown. The <code>this</code> keyword will reference
+ the original input element.
+ </p>
+<pre>
+$(<em>selector</em>).minicolors({
+ show: function() {
+ console.log('Show event triggered!');
+ }
+});
+</pre>
+ </dd>
+ </dl>
+
+ <h2 id="license">License</h2>
+ <p>
+ Licensed under the <a href="http://opensource.org/licenses/MIT">MIT license</a>,
+ same as <a href="https://jquery.org/license/">jQuery</a>.
+ </p>
+ <p>
+ ©2013 <a href="http://www.abeautifulsite.net/">A Beautiful Site, LLC.</a>
+ </p>
+ </div>
+ </div>
+</body>
+</html>
diff --git a/jquery.minicolors.css b/jquery.minicolors.css
new file mode 100644
index 0000000..ac6b404
--- /dev/null
+++ b/jquery.minicolors.css
@@ -0,0 +1,319 @@
+.minicolors {
+ position: relative;
+}
+
+.minicolors-sprite {
+ background-image: url(jquery.minicolors.png);
+}
+
+.minicolors-swatch {
+ position: absolute;
+ vertical-align: middle;
+ background-position: -80px 0;
+ border: solid 1px #ccc;
+ cursor: text;
+ padding: 0;
+ margin: 0;
+ display: inline-block;
+}
+
+.minicolors-swatch-color {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+}
+
+.minicolors input[type=hidden] + .minicolors-swatch {
+ width: 28px;
+ position: static;
+ cursor: pointer;
+}
+
+.minicolors input[type=hidden][disabled] + .minicolors-swatch {
+ cursor: default;
+}
+
+/* Panel */
+.minicolors-panel {
+ position: absolute;
+ width: 173px;
+ background: white;
+ border: solid 1px #CCC;
+ box-shadow: 0 0 20px rgba(0, 0, 0, .2);
+ z-index: 99999;
+ box-sizing: content-box;
+ display: none;
+}
+
+.minicolors-panel.minicolors-visible {
+ display: block;
+}
+
+/* Panel positioning */
+.minicolors-position-top .minicolors-panel {
+ top: -154px;
+}
+
+.minicolors-position-right .minicolors-panel {
+ right: 0;
+}
+
+.minicolors-position-bottom .minicolors-panel {
+ top: auto;
+}
+
+.minicolors-position-left .minicolors-panel {
+ left: 0;
+}
+
+.minicolors-with-opacity .minicolors-panel {
+ width: 194px;
+}
+
+.minicolors .minicolors-grid {
+ position: relative;
+ top: 1px;
+ left: 1px;
+ width: 150px;
+ height: 150px;
+ background-position: -120px 0;
+ cursor: crosshair;
+}
+
+.minicolors .minicolors-grid-inner {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 150px;
+ height: 150px;
+}
+
+.minicolors-slider-saturation .minicolors-grid {
+ background-position: -420px 0;
+}
+
+.minicolors-slider-saturation .minicolors-grid-inner {
+ background-position: -270px 0;
+ background-image: inherit;
+}
+
+.minicolors-slider-brightness .minicolors-grid {
+ background-position: -570px 0;
+}
+
+.minicolors-slider-brightness .minicolors-grid-inner {
+ background-color: black;
+}
+
+.minicolors-slider-wheel .minicolors-grid {
+ background-position: -720px 0;
+}
+
+.minicolors-slider,
+.minicolors-opacity-slider {
+ position: absolute;
+ top: 1px;
+ left: 152px;
+ width: 20px;
+ height: 150px;
+ background-color: white;
+ background-position: 0 0;
+ cursor: row-resize;
+}
+
+.minicolors-slider-saturation .minicolors-slider {
+ background-position: -60px 0;
+}
+
+.minicolors-slider-brightness .minicolors-slider {
+ background-position: -20px 0;
+}
+
+.minicolors-slider-wheel .minicolors-slider {
+ background-position: -20px 0;
+}
+
+.minicolors-opacity-slider {
+ left: 173px;
+ background-position: -40px 0;
+ display: none;
+}
+
+.minicolors-with-opacity .minicolors-opacity-slider {
+ display: block;
+}
+
+/* Pickers */
+.minicolors-grid .minicolors-picker {
+ position: absolute;
+ top: 70px;
+ left: 70px;
+ width: 12px;
+ height: 12px;
+ border: solid 1px black;
+ border-radius: 10px;
+ margin-top: -6px;
+ margin-left: -6px;
+ background: none;
+}
+
+.minicolors-grid .minicolors-picker > div {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 8px;
+ height: 8px;
+ border-radius: 8px;
+ border: solid 2px white;
+ box-sizing: content-box;
+}
+
+.minicolors-picker {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 18px;
+ height: 2px;
+ background: white;
+ border: solid 1px black;
+ margin-top: -2px;
+ box-sizing: content-box;
+}
+
+/* Swatches */
+.minicolors-swatches,
+.minicolors-swatches li {
+ margin: 5px 0 3px 5px;
+ padding: 0;
+ list-style: none;
+ overflow: hidden;
+}
+
+.minicolors-swatches .minicolors-swatch {
+ position: relative;
+ float: left;
+ cursor: pointer;
+ margin:0 4px 0 0;
+}
+
+.minicolors-with-opacity .minicolors-swatches .minicolors-swatch {
+ margin-right: 7px;
+}
+
+.minicolors-swatch.selected {
+ border-color: #000;
+}
+
+/* Inline controls */
+.minicolors-inline {
+ display: inline-block;
+}
+
+.minicolors-inline .minicolors-input {
+ display: none !important;
+}
+
+.minicolors-inline .minicolors-panel {
+ position: relative;
+ top: auto;
+ left: auto;
+ box-shadow: none;
+ z-index: auto;
+ display: inline-block;
+}
+
+/* Default theme */
+.minicolors-theme-default .minicolors-swatch {
+ top: 5px;
+ left: 5px;
+ width: 18px;
+ height: 18px;
+}
+.minicolors-theme-default .minicolors-swatches .minicolors-swatch {
+ margin-bottom: 2px;
+ top: 0;
+ left: 0;
+ width: 18px;
+ height: 18px;
+}
+.minicolors-theme-default.minicolors-position-right .minicolors-swatch {
+ left: auto;
+ right: 5px;
+}
+.minicolors-theme-default.minicolors {
+ width: auto;
+ display: inline-block;
+}
+.minicolors-theme-default .minicolors-input {
+ height: 20px;
+ width: auto;
+ display: inline-block;
+ padding-left: 26px;
+}
+.minicolors-theme-default.minicolors-position-right .minicolors-input {
+ padding-right: 26px;
+ padding-left: inherit;
+}
+
+/* Bootstrap theme */
+.minicolors-theme-bootstrap .minicolors-swatch {
+ z-index: 2;
+ top: 3px;
+ left: 3px;
+ width: 28px;
+ height: 28px;
+ border-radius: 3px;
+}
+.minicolors-theme-bootstrap .minicolors-swatches .minicolors-swatch {
+ margin-bottom: 2px;
+ top: 0;
+ left: 0;
+ width: 20px;
+ height: 20px;
+}
+.minicolors-theme-bootstrap .minicolors-swatch-color {
+ border-radius: inherit;
+}
+.minicolors-theme-bootstrap.minicolors-position-right > .minicolors-swatch {
+ left: auto;
+ right: 3px;
+}
+.minicolors-theme-bootstrap .minicolors-input {
+ float: none;
+ padding-left: 44px;
+}
+.minicolors-theme-bootstrap.minicolors-position-right .minicolors-input {
+ padding-right: 44px;
+ padding-left: 12px;
+}
+.minicolors-theme-bootstrap .minicolors-input.input-lg + .minicolors-swatch {
+ top: 4px;
+ left: 4px;
+ width: 37px;
+ height: 37px;
+ border-radius: 5px;
+}
+.minicolors-theme-bootstrap .minicolors-input.input-sm + .minicolors-swatch {
+ width: 24px;
+ height: 24px;
+}
+.minicolors-theme-bootstrap .minicolors-input.input-xs + .minicolors-swatch {
+ width: 18px;
+ height: 18px;
+}
+.input-group .minicolors-theme-bootstrap:not(:first-child) .minicolors-input {
+ border-top-left-radius: 0;
+ border-bottom-left-radius: 0;
+}
+
+/* Semantic Ui theme */
+.minicolors-theme-semanticui .minicolors-swatch {
+ top: 0;
+ left: 0;
+ padding: 18px;
+}
+.minicolors-theme-semanticui input {
+ text-indent: 30px;
+}
diff --git a/jquery.minicolors.js b/jquery.minicolors.js
new file mode 100644
index 0000000..0ccf08c
--- /dev/null
+++ b/jquery.minicolors.js
@@ -0,0 +1,1108 @@
+//
+// jQuery MiniColors: A tiny color picker built on jQuery
+//
+// Developed by Cory LaViska for A Beautiful Site, LLC
+//
+// Licensed under the MIT license: http://opensource.org/licenses/MIT
+//
+(function (factory) {
+ if(typeof define === 'function' && define.amd) {
+ // AMD. Register as an anonymous module.
+ define(['jquery'], factory);
+ } else if(typeof exports === 'object') {
+ // Node/CommonJS
+ module.exports = factory(require('jquery'));
+ } else {
+ // Browser globals
+ factory(jQuery);
+ }
+}(function ($) {
+ 'use strict';
+
+ // Defaults
+ $.minicolors = {
+ defaults: {
+ animationSpeed: 50,
+ animationEasing: 'swing',
+ change: null,
+ changeDelay: 0,
+ control: 'hue',
+ defaultValue: '',
+ format: 'hex',
+ hide: null,
+ hideSpeed: 100,
+ inline: false,
+ keywords: '',
+ letterCase: 'lowercase',
+ opacity: false,
+ position: 'bottom left',
+ show: null,
+ showSpeed: 100,
+ theme: 'default',
+ swatches: []
+ }
+ };
+
+ // Public methods
+ $.extend($.fn, {
+ minicolors: function(method, data) {
+
+ switch(method) {
+ // Destroy the control
+ case 'destroy':
+ $(this).each(function() {
+ destroy($(this));
+ });
+ return $(this);
+
+ // Hide the color picker
+ case 'hide':
+ hide();
+ return $(this);
+
+ // Get/set opacity
+ case 'opacity':
+ // Getter
+ if(data === undefined) {
+ // Getter
+ return $(this).attr('data-opacity');
+ } else {
+ // Setter
+ $(this).each(function() {
+ updateFromInput($(this).attr('data-opacity', data));
+ });
+ }
+ return $(this);
+
+ // Get an RGB(A) object based on the current color/opacity
+ case 'rgbObject':
+ return rgbObject($(this), method === 'rgbaObject');
+
+ // Get an RGB(A) string based on the current color/opacity
+ case 'rgbString':
+ case 'rgbaString':
+ return rgbString($(this), method === 'rgbaString');
+
+ // Get/set settings on the fly
+ case 'settings':
+ if(data === undefined) {
+ return $(this).data('minicolors-settings');
+ } else {
+ // Setter
+ $(this).each(function() {
+ var settings = $(this).data('minicolors-settings') || {};
+ destroy($(this));
+ $(this).minicolors($.extend(true, settings, data));
+ });
+ }
+ return $(this);
+
+ // Show the color picker
+ case 'show':
+ show($(this).eq(0));
+ return $(this);
+
+ // Get/set the hex color value
+ case 'value':
+ if(data === undefined) {
+ // Getter
+ return $(this).val();
+ } else {
+ // Setter
+ $(this).each(function() {
+ if(typeof(data) === 'object' && data !== 'null') {
+ if(data.opacity) {
+ $(this).attr('data-opacity', keepWithin(data.opacity, 0, 1));
+ }
+ if(data.color) {
+ $(this).val(data.color);
+ }
+ } else {
+ $(this).val(data);
+ }
+ updateFromInput($(this));
+ });
+ }
+ return $(this);
+
+ // Initializes the control
+ default:
+ if(method !== 'create') data = method;
+ $(this).each(function() {
+ init($(this), data);
+ });
+ return $(this);
+
+ }
+
+ }
+ });
+
+ // Initialize input elements
+ function init(input, settings) {
+ var minicolors = $('<div class="minicolors" />');
+ var defaults = $.minicolors.defaults;
+ var size;
+ var swatches;
+ var swatch;
+ var panel;
+ var i;
+
+ // Do nothing if already initialized
+ if(input.data('minicolors-initialized')) return;
+
+ // Handle settings
+ settings = $.extend(true, {}, defaults, settings);
+
+ // The wrapper
+ minicolors
+ .addClass('minicolors-theme-' + settings.theme)
+ .toggleClass('minicolors-with-opacity', settings.opacity);
+
+ // Custom positioning
+ if(settings.position !== undefined) {
+ $.each(settings.position.split(' '), function() {
+ minicolors.addClass('minicolors-position-' + this);
+ });
+ }
+
+ // Input size
+ if(settings.format === 'rgb') {
+ size = settings.opacity ? '25' : '20';
+ } else {
+ size = settings.keywords ? '11' : '7';
+ }
+
+ // The input
+ input
+ .addClass('minicolors-input')
+ .data('minicolors-initialized', false)
+ .data('minicolors-settings', settings)
+ .prop('size', size)
+ .wrap(minicolors)
+ .after(
+ '<div class="minicolors-panel minicolors-slider-' + settings.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>'
+ );
+
+ // The swatch
+ if(!settings.inline) {
+ input.after('<span class="minicolors-swatch minicolors-sprite minicolors-input-swatch"><span class="minicolors-swatch-color"></span></span>');
+ input.next('.minicolors-input-swatch').on('click', function(event) {
+ event.preventDefault();
+ input.focus();
+ });
+ }
+
+ // Prevent text selection in IE
+ panel = input.parent().find('.minicolors-panel');
+ panel.on('selectstart', function() { return false; }).end();
+
+ // Swatches
+ if(settings.swatches && settings.swatches.length !== 0) {
+ panel.addClass('minicolors-with-swatches');
+ swatches = $('<ul class="minicolors-swatches"></ul>')
+ .appendTo(panel);
+ for(i = 0; i < settings.swatches.length; ++i) {
+ swatch = settings.swatches[i];
+ swatch = isRgb(swatch) ? parseRgb(swatch, true) : hex2rgb(parseHex(swatch, true));
+ $('<li class="minicolors-swatch minicolors-sprite"><span class="minicolors-swatch-color"></span></li>')
+ .appendTo(swatches)
+ .data('swatch-color', settings.swatches[i])
+ .find('.minicolors-swatch-color')
+ .css({
+ backgroundColor: rgb2hex(swatch),
+ opacity: swatch.a
+ });
+ settings.swatches[i] = swatch;
+ }
+ }
+
+ // Inline controls
+ if(settings.inline) input.parent().addClass('minicolors-inline');
+
+ updateFromInput(input, false);
+
+ input.data('minicolors-initialized', true);
+ }
+
+ // Returns the input back to its original state
+ function destroy(input) {
+ var minicolors = input.parent();
+
+ // Revert the input element
+ input
+ .removeData('minicolors-initialized')
+ .removeData('minicolors-settings')
+ .removeProp('size')
+ .removeClass('minicolors-input');
+
+ // Remove the wrap and destroy whatever remains
+ minicolors.before(input).remove();
+ }
+
+ // Shows the specified dropdown panel
+ function show(input) {
+ var minicolors = input.parent();
+ var panel = minicolors.find('.minicolors-panel');
+ var settings = input.data('minicolors-settings');
+
+ // Do nothing if uninitialized, disabled, inline, or already open
+ if(
+ !input.data('minicolors-initialized') ||
+ input.prop('disabled') ||
+ minicolors.hasClass('minicolors-inline') ||
+ minicolors.hasClass('minicolors-focus')
+ ) return;
+
+ hide();
+
+ minicolors.addClass('minicolors-focus');
+ panel
+ .stop(true, true)
+ .fadeIn(settings.showSpeed, function() {
+ if(settings.show) settings.show.call(input.get(0));
+ });
+ }
+
+ // Hides all dropdown panels
+ function hide() {
+ $('.minicolors-focus').each(function() {
+ var minicolors = $(this);
+ var input = minicolors.find('.minicolors-input');
+ var panel = minicolors.find('.minicolors-panel');
+ var settings = input.data('minicolors-settings');
+
+ panel.fadeOut(settings.hideSpeed, function() {
+ if(settings.hide) settings.hide.call(input.get(0));
+ minicolors.removeClass('minicolors-focus');
+ });
+
+ });
+ }
+
+ // Moves the selected picker
+ function move(target, event, animate) {
+ var input = target.parents('.minicolors').find('.minicolors-input');
+ var settings = input.data('minicolors-settings');
+ var picker = target.find('[class$=-picker]');
+ var offsetX = target.offset().left;
+ var offsetY = target.offset().top;
+ var x = Math.round(event.pageX - offsetX);
+ var y = Math.round(event.pageY - offsetY);
+ var duration = animate ? settings.animationSpeed : 0;
+ var wx, wy, r, phi;
+
+ // Touch support
+ if(event.originalEvent.changedTouches) {
+ x = event.originalEvent.changedTouches[0].pageX - offsetX;
+ y = event.originalEvent.changedTouches[0].pageY - offsetY;
+ }
+
+ // Constrain picker to its container
+ if(x < 0) x = 0;
+ if(y < 0) y = 0;
+ if(x > target.width()) x = target.width();
+ if(y > target.height()) y = target.height();
+
+ // Constrain color wheel values to the wheel
+ if(target.parent().is('.minicolors-slider-wheel') && picker.parent().is('.minicolors-grid')) {
+ wx = 75 - x;
+ wy = 75 - y;
+ r = Math.sqrt(wx * wx + wy * wy);
+ phi = Math.atan2(wy, wx);
+ if(phi < 0) phi += Math.PI * 2;
+ if(r > 75) {
+ r = 75;
+ x = 75 - (75 * Math.cos(phi));
+ y = 75 - (75 * Math.sin(phi));
+ }
+ x = Math.round(x);
+ y = Math.round(y);
+ }
+
+ // Move the picker
+ if(target.is('.minicolors-grid')) {
+ picker
+ .stop(true)
+ .animate({
+ top: y + 'px',
+ left: x + 'px'
+ }, duration, settings.animationEasing, function() {
+ updateFromControl(input, target);
+ });
+ } else {
+ picker
+ .stop(true)
+ .animate({
+ top: y + 'px'
+ }, duration, settings.animationEasing, function() {
+ updateFromControl(input, target);
+ });
+ }
+ }
+
+ // Sets the input based on the color picker values
+ function updateFromControl(input, target) {
+
+ function getCoords(picker, container) {
+ var left, top;
+ if(!picker.length || !container) return null;
+ left = picker.offset().left;
+ top = picker.offset().top;
+
+ return {
+ x: left - container.offset().left + (picker.outerWidth() / 2),
+ y: top - container.offset().top + (picker.outerHeight() / 2)
+ };
+ }
+
+ var hue, saturation, brightness, x, y, r, phi;
+ var hex = input.val();
+ var opacity = input.attr('data-opacity');
+
+ // Helpful references
+ var minicolors = input.parent();
+ var settings = input.data('minicolors-settings');
+ var swatch = minicolors.find('.minicolors-input-swatch');
+
+ // Panel objects
+ var grid = minicolors.find('.minicolors-grid');
+ var slider = minicolors.find('.minicolors-slider');
+ var opacitySlider = minicolors.find('.minicolors-opacity-slider');
+
+ // Picker objects
+ var gridPicker = grid.find('[class$=-picker]');
+ var sliderPicker = slider.find('[class$=-picker]');
+ var opacityPicker = opacitySlider.find('[class$=-picker]');
+
+ // Picker positions
+ var gridPos = getCoords(gridPicker, grid);
+ var sliderPos = getCoords(sliderPicker, slider);
+ var opacityPos = getCoords(opacityPicker, opacitySlider);
+
+ // Handle colors
+ if(target.is('.minicolors-grid, .minicolors-slider, .minicolors-opacity-slider')) {
+
+ // Determine HSB values
+ switch(settings.control) {
+ case 'wheel':
+ // Calculate hue, saturation, and brightness
+ x = (grid.width() / 2) - gridPos.x;
+ y = (grid.height() / 2) - gridPos.y;
+ r = Math.sqrt(x * x + y * y);
+ phi = Math.atan2(y, x);
+ if(phi < 0) phi += Math.PI * 2;
+ if(r > 75) {
+ r = 75;
+ gridPos.x = 69 - (75 * Math.cos(phi));
+ gridPos.y = 69 - (75 * Math.sin(phi));
+ }
+ saturation = keepWithin(r / 0.75, 0, 100);
+ hue = keepWithin(phi * 180 / Math.PI, 0, 360);
+ brightness = keepWithin(100 - Math.floor(sliderPos.y * (100 / slider.height())), 0, 100);
+ hex = hsb2hex({
+ h: hue,
+ s: saturation,
+ b: brightness
+ });
+
+ // Update UI
+ slider.css('backgroundColor', hsb2hex({ h: hue, s: saturation, b: 100 }));
+ break;
+
+ case 'saturation':
+ // Calculate hue, saturation, and brightness
+ hue = keepWithin(parseInt(gridPos.x * (360 / grid.width()), 10), 0, 360);
+ saturation = keepWithin(100 - Math.floor(sliderPos.y * (100 / slider.height())), 0, 100);
+ brightness = keepWithin(100 - Math.floor(gridPos.y * (100 / grid.height())), 0, 100);
+ hex = hsb2hex({
+ h: hue,
+ s: saturation,
+ b: brightness
+ });
+
+ // Update UI
+ slider.css('backgroundColor', hsb2hex({ h: hue, s: 100, b: brightness }));
+ minicolors.find('.minicolors-grid-inner').css('opacity', saturation / 100);
+ break;
+
+ case 'brightness':
+ // Calculate hue, saturation, and brightness
+ hue = keepWithin(parseInt(gridPos.x * (360 / grid.width()), 10), 0, 360);
+ saturation = keepWithin(100 - Math.floor(gridPos.y * (100 / grid.height())), 0, 100);
+ brightness = keepWithin(100 - Math.floor(sliderPos.y * (100 / slider.height())), 0, 100);
+ hex = hsb2hex({
+ h: hue,
+ s: saturation,
+ b: brightness
+ });
+
+ // Update UI
+ slider.css('backgroundColor', hsb2hex({ h: hue, s: saturation, b: 100 }));
+ minicolors.find('.minicolors-grid-inner').css('opacity', 1 - (brightness / 100));
+ break;
+
+ default:
+ // Calculate hue, saturation, and brightness
+ hue = keepWithin(360 - parseInt(sliderPos.y * (360 / slider.height()), 10), 0, 360);
+ saturation = keepWithin(Math.floor(gridPos.x * (100 / grid.width())), 0, 100);
+ brightness = keepWithin(100 - Math.floor(gridPos.y * (100 / grid.height())), 0, 100);
+ hex = hsb2hex({
+ h: hue,
+ s: saturation,
+ b: brightness
+ });
+
+ // Update UI
+ grid.css('backgroundColor', hsb2hex({ h: hue, s: 100, b: 100 }));
+ break;
+ }
+
+ // Handle opacity
+ if(settings.opacity) {
+ opacity = parseFloat(1 - (opacityPos.y / opacitySlider.height())).toFixed(2);
+ } else {
+ opacity = 1;
+ }
+
+ updateInput(input, hex, opacity);
+ }
+ else {
+ // Set swatch color
+ swatch.find('span').css({
+ backgroundColor: hex,
+ opacity: opacity
+ });
+
+ // Handle change event
+ doChange(input, hex, opacity);
+ }
+ }
+
+ // Sets the value of the input and does the appropriate conversions
+ // to respect settings, also updates the swatch
+ function updateInput(input, value, opacity) {
+ var rgb;
+
+ // Helpful references
+ var minicolors = input.parent();
+ var settings = input.data('minicolors-settings');
+ var swatch = minicolors.find('.minicolors-input-swatch');
+
+ if(settings.opacity) input.attr('data-opacity', opacity);
+
+ // Set color string
+ if(settings.format === 'rgb') {
+ // Returns RGB(A) string
+
+ // Checks for input format and does the conversion
+ if(isRgb(value)) {
+ rgb = parseRgb(value, true);
+ }
+ else {
+ rgb = hex2rgb(parseHex(value, true));
+ }
+
+ opacity = input.attr('data-opacity') === '' ? 1 : keepWithin(parseFloat(input.attr('data-opacity')).toFixed(2), 0, 1);
+ if(isNaN(opacity) || !settings.opacity) opacity = 1;
+
+ if(input.minicolors('rgbObject').a <= 1 && rgb && settings.opacity) {
+ // Set RGBA string if alpha
+ value = 'rgba(' + rgb.r + ', ' + rgb.g + ', ' + rgb.b + ', ' + parseFloat(opacity) + ')';
+ } else {
+ // Set RGB string (alpha = 1)
+ value = 'rgb(' + rgb.r + ', ' + rgb.g + ', ' + rgb.b + ')';
+ }
+ } else {
+ // Returns hex color
+
+ // Checks for input format and does the conversion
+ if(isRgb(value)) {
+ value = rgbString2hex(value);
+ }
+
+ value = convertCase(value, settings.letterCase);
+ }
+
+ // Update value from picker
+ input.val(value);
+
+ // Set swatch color
+ swatch.find('span').css({
+ backgroundColor: value,
+ opacity: opacity
+ });
+
+ // Handle change event
+ doChange(input, value, opacity);
+ }
+
+ // Sets the color picker values from the input
+ function updateFromInput(input, preserveInputValue) {
+ var hex, hsb, opacity, keywords, alpha, value, x, y, r, phi;
+
+ // Helpful references
+ var minicolors = input.parent();
+ var settings = input.data('minicolors-settings');
+ var swatch = minicolors.find('.minicolors-input-swatch');
+
+ // Panel objects
+ var grid = minicolors.find('.minicolors-grid');
+ var slider = minicolors.find('.minicolors-slider');
+ var opacitySlider = minicolors.find('.minicolors-opacity-slider');
+
+ // Picker objects
+ var gridPicker = grid.find('[class$=-picker]');
+ var sliderPicker = slider.find('[class$=-picker]');
+ var opacityPicker = opacitySlider.find('[class$=-picker]');
+
+ // Determine hex/HSB values
+ if(isRgb(input.val())) {
+ // If input value is a rgb(a) string, convert it to hex color and update opacity
+ hex = rgbString2hex(input.val());
+ alpha = keepWithin(parseFloat(getAlpha(input.val())).toFixed(2), 0, 1);
+ if(alpha) {
+ input.attr('data-opacity', alpha);
+ }
+ } else {
+ hex = convertCase(parseHex(input.val(), true), settings.letterCase);
+ }
+
+ if(!hex){
+ hex = convertCase(parseInput(settings.defaultValue, true), settings.letterCase);
+ }
+ hsb = hex2hsb(hex);
+
+ // Get array of lowercase keywords
+ keywords = !settings.keywords ? [] : $.map(settings.keywords.split(','), function(a) {
+ return $.trim(a.toLowerCase());
+ });
+
+ // Set color string
+ if(input.val() !== '' && $.inArray(input.val().toLowerCase(), keywords) > -1) {
+ value = convertCase(input.val());
+ } else {
+ value = isRgb(input.val()) ? parseRgb(input.val()) : hex;
+ }
+
+ // Update input value
+ if(!preserveInputValue) input.val(value);
+
+ // Determine opacity value
+ if(settings.opacity) {
+ // Get from data-opacity attribute and keep within 0-1 range
+ opacity = input.attr('data-opacity') === '' ? 1 : keepWithin(parseFloat(input.attr('data-opacity')).toFixed(2), 0, 1);
+ if(isNaN(opacity)) opacity = 1;
+ input.attr('data-opacity', opacity);
+ swatch.find('span').css('opacity', opacity);
+
+ // Set opacity picker position
+ y = keepWithin(opacitySlider.height() - (opacitySlider.height() * opacity), 0, opacitySlider.height());
+ opacityPicker.css('top', y + 'px');
+ }
+
+ // Set opacity to zero if input value is transparent
+ if(input.val().toLowerCase() === 'transparent') {
+ swatch.find('span').css('opacity', 0);
+ }
+
+ // Update swatch
+ swatch.find('span').css('backgroundColor', hex);
+
+ // Determine picker locations
+ switch(settings.control) {
+ case 'wheel':
+ // Set grid position
+ r = keepWithin(Math.ceil(hsb.s * 0.75), 0, grid.height() / 2);
+ phi = hsb.h * Math.PI / 180;
+ x = keepWithin(75 - Math.cos(phi) * r, 0, grid.width());
+ y = keepWithin(75 - Math.sin(phi) * r, 0, grid.height());
+ gridPicker.css({
+ top: y + 'px',
+ left: x + 'px'
+ });
+
+ // Set slider position
+ y = 150 - (hsb.b / (100 / grid.height()));
+ if(hex === '') y = 0;
+ sliderPicker.css('top', y + 'px');
+
+ // Update panel color
+ slider.css('backgroundColor', hsb2hex({ h: hsb.h, s: hsb.s, b: 100 }));
+ break;
+
+ case 'saturation':
+ // Set grid position
+ x = keepWithin((5 * hsb.h) / 12, 0, 150);
+ y = keepWithin(grid.height() - Math.ceil(hsb.b / (100 / grid.height())), 0, grid.height());
+ gridPicker.css({
+ top: y + 'px',
+ left: x + 'px'
+ });
+
+ // Set slider position
+ y = keepWithin(slider.height() - (hsb.s * (slider.height() / 100)), 0, slider.height());
+ sliderPicker.css('top', y + 'px');
+
+ // Update UI
+ slider.css('backgroundColor', hsb2hex({ h: hsb.h, s: 100, b: hsb.b }));
+ minicolors.find('.minicolors-grid-inner').css('opacity', hsb.s / 100);
+ break;
+
+ case 'brightness':
+ // Set grid position
+ x = keepWithin((5 * hsb.h) / 12, 0, 150);
+ y = keepWithin(grid.height() - Math.ceil(hsb.s / (100 / grid.height())), 0, grid.height());
+ gridPicker.css({
+ top: y + 'px',
+ left: x + 'px'
+ });
+
+ // Set slider position
+ y = keepWithin(slider.height() - (hsb.b * (slider.height() / 100)), 0, slider.height());
+ sliderPicker.css('top', y + 'px');
+
+ // Update UI
+ slider.css('backgroundColor', hsb2hex({ h: hsb.h, s: hsb.s, b: 100 }));
+ minicolors.find('.minicolors-grid-inner').css('opacity', 1 - (hsb.b / 100));
+ break;
+
+ default:
+ // Set grid position
+ x = keepWithin(Math.ceil(hsb.s / (100 / grid.width())), 0, grid.width());
+ y = keepWithin(grid.height() - Math.ceil(hsb.b / (100 / grid.height())), 0, grid.height());
+ gridPicker.css({
+ top: y + 'px',
+ left: x + 'px'
+ });
+
+ // Set slider position
+ y = keepWithin(slider.height() - (hsb.h / (360 / slider.height())), 0, slider.height());
+ sliderPicker.css('top', y + 'px');
+
+ // Update panel color
+ grid.css('backgroundColor', hsb2hex({ h: hsb.h, s: 100, b: 100 }));
+ break;
+ }
+
+ // Fire change event, but only if minicolors is fully initialized
+ if(input.data('minicolors-initialized')) {
+ doChange(input, value, opacity);
+ }
+ }
+
+ // Runs the change and changeDelay callbacks
+ function doChange(input, value, opacity) {
+ var settings = input.data('minicolors-settings');
+ var lastChange = input.data('minicolors-lastChange');
+ var obj, sel, i;
+
+ // Only run if it actually changed
+ if(!lastChange || lastChange.value !== value || lastChange.opacity !== opacity) {
+
+ // Remember last-changed value
+ input.data('minicolors-lastChange', {
+ value: value,
+ opacity: opacity
+ });
+
+ // Check and select applicable swatch
+ if(settings.swatches && settings.swatches.length !== 0) {
+ if(!isRgb(value)) {
+ obj = hex2rgb(value);
+ }
+ else {
+ obj = parseRgb(value, true);
+ }
+ sel = -1;
+ for(i = 0; i < settings.swatches.length; ++i) {
+ 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) {
+ sel = i;
+ break;
+ }
+ }
+
+ input.parent().find('.minicolors-swatches .minicolors-swatch').removeClass('selected');
+ if(sel !== -1) {
+ input.parent().find('.minicolors-swatches .minicolors-swatch').eq(i).addClass('selected');
+ }
+ }
+
+ // Fire change event
+ if(settings.change) {
+ if(settings.changeDelay) {
+ // Call after a delay
+ clearTimeout(input.data('minicolors-changeTimeout'));
+ input.data('minicolors-changeTimeout', setTimeout(function() {
+ settings.change.call(input.get(0), value, opacity);
+ }, settings.changeDelay));
+ } else {
+ // Call immediately
+ settings.change.call(input.get(0), value, opacity);
+ }
+ }
+ input.trigger('change').trigger('input');
+ }
+ }
+
+ // Generates an RGB(A) object based on the input's value
+ function rgbObject(input) {
+ var rgb,
+ opacity = $(input).attr('data-opacity');
+ if( isRgb($(input).val()) ) {
+ rgb = parseRgb($(input).val(), true);
+ } else {
+ var hex = parseHex($(input).val(), true);
+ rgb = hex2rgb(hex);
+ }
+ if( !rgb ) return null;
+ if( opacity !== undefined ) $.extend(rgb, { a: parseFloat(opacity) });
+ return rgb;
+ }
+
+ // Generates an RGB(A) string based on the input's value
+ function rgbString(input, alpha) {
+ var rgb,
+ opacity = $(input).attr('data-opacity');
+ if( isRgb($(input).val()) ) {
+ rgb = parseRgb($(input).val(), true);
+ } else {
+ var hex = parseHex($(input).val(), true);
+ rgb = hex2rgb(hex);
+ }
+ if( !rgb ) return null;
+ if( opacity === undefined ) opacity = 1;
+ if( alpha ) {
+ return 'rgba(' + rgb.r + ', ' + rgb.g + ', ' + rgb.b + ', ' + parseFloat(opacity) + ')';
+ } else {
+ return 'rgb(' + rgb.r + ', ' + rgb.g + ', ' + rgb.b + ')';
+ }
+ }
+
+ // Converts to the letter case specified in settings
+ function convertCase(string, letterCase) {
+ return letterCase === 'uppercase' ? string.toUpperCase() : string.toLowerCase();
+ }
+
+ // Parses a string and returns a valid hex string when possible
+ function parseHex(string, expand) {
+ string = string.replace(/^#/g, '');
+ if(!string.match(/^[A-F0-9]{3,6}/ig)) return '';
+ if(string.length !== 3 && string.length !== 6) return '';
+ if(string.length === 3 && expand) {
+ string = string[0] + string[0] + string[1] + string[1] + string[2] + string[2];
+ }
+ return '#' + string;
+ }
+
+ // Parses a string and returns a valid RGB(A) string when possible
+ function parseRgb(string, obj) {
+ var values = string.replace(/[^\d,.]/g, '');
+ var rgba = values.split(',');
+
+ rgba[0] = keepWithin(parseInt(rgba[0], 10), 0, 255);
+ rgba[1] = keepWithin(parseInt(rgba[1], 10), 0, 255);
+ rgba[2] = keepWithin(parseInt(rgba[2], 10), 0, 255);
+ if(rgba[3]) {
+ rgba[3] = keepWithin(parseFloat(rgba[3], 10), 0, 1);
+ }
+
+ // Return RGBA object
+ if( obj ) {
+ if (rgba[3]) {
+ return {
+ r: rgba[0],
+ g: rgba[1],
+ b: rgba[2],
+ a: rgba[3]
+ };
+ } else {
+ return {
+ r: rgba[0],
+ g: rgba[1],
+ b: rgba[2]
+ };
+ }
+ }
+
+ // Return RGBA string
+ if(typeof(rgba[3]) !== 'undefined' && rgba[3] <= 1) {
+ return 'rgba(' + rgba[0] + ', ' + rgba[1] + ', ' + rgba[2] + ', ' + rgba[3] + ')';
+ } else {
+ return 'rgb(' + rgba[0] + ', ' + rgba[1] + ', ' + rgba[2] + ')';
+ }
+
+ }
+
+ // Parses a string and returns a valid color string when possible
+ function parseInput(string, expand) {
+ if(isRgb(string)) {
+ // Returns a valid rgb(a) string
+ return parseRgb(string);
+ } else {
+ return parseHex(string, expand);
+ }
+ }
+
+ // Keeps value within min and max
+ function keepWithin(value, min, max) {
+ if(value < min) value = min;
+ if(value > max) value = max;
+ return value;
+ }
+
+ // Checks if a string is a valid RGB(A) string
+ function isRgb(string) {
+ var rgb = string.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i);
+ return (rgb && rgb.length === 4) ? true : false;
+ }
+
+ // Function to get alpha from a RGB(A) string
+ function getAlpha(rgba) {
+ rgba = rgba.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+(\.\d{1,2})?|\.\d{1,2})[\s+]?/i);
+ return (rgba && rgba.length === 6) ? rgba[4] : '1';
+ }
+
+ // Converts an HSB object to an RGB object
+ function hsb2rgb(hsb) {
+ var rgb = {};
+ var h = Math.round(hsb.h);
+ var s = Math.round(hsb.s * 255 / 100);
+ var v = Math.round(hsb.b * 255 / 100);
+ if(s === 0) {
+ rgb.r = rgb.g = rgb.b = v;
+ } else {
+ var t1 = v;
+ var t2 = (255 - s) * v / 255;
+ var t3 = (t1 - t2) * (h % 60) / 60;
+ if(h === 360) h = 0;
+ if(h < 60) { rgb.r = t1; rgb.b = t2; rgb.g = t2 + t3; }
+ else if(h < 120) {rgb.g = t1; rgb.b = t2; rgb.r = t1 - t3; }
+ else if(h < 180) {rgb.g = t1; rgb.r = t2; rgb.b = t2 + t3; }
+ else if(h < 240) {rgb.b = t1; rgb.r = t2; rgb.g = t1 - t3; }
+ else if(h < 300) {rgb.b = t1; rgb.g = t2; rgb.r = t2 + t3; }
+ else if(h < 360) {rgb.r = t1; rgb.g = t2; rgb.b = t1 - t3; }
+ else { rgb.r = 0; rgb.g = 0; rgb.b = 0; }
+ }
+ return {
+ r: Math.round(rgb.r),
+ g: Math.round(rgb.g),
+ b: Math.round(rgb.b)
+ };
+ }
+
+ // Converts an RGB string to a hex string
+ function rgbString2hex(rgb){
+ rgb = rgb.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i);
+ return (rgb && rgb.length === 4) ? '#' +
+ ('0' + parseInt(rgb[1],10).toString(16)).slice(-2) +
+ ('0' + parseInt(rgb[2],10).toString(16)).slice(-2) +
+ ('0' + parseInt(rgb[3],10).toString(16)).slice(-2) : '';
+ }
+
+ // Converts an RGB object to a hex string
+ function rgb2hex(rgb) {
+ var hex = [
+ rgb.r.toString(16),
+ rgb.g.toString(16),
+ rgb.b.toString(16)
+ ];
+ $.each(hex, function(nr, val) {
+ if(val.length === 1) hex[nr] = '0' + val;
+ });
+ return '#' + hex.join('');
+ }
+
+ // Converts an HSB object to a hex string
+ function hsb2hex(hsb) {
+ return rgb2hex(hsb2rgb(hsb));
+ }
+
+ // Converts a hex string to an HSB object
+ function hex2hsb(hex) {
+ var hsb = rgb2hsb(hex2rgb(hex));
+ if(hsb.s === 0) hsb.h = 360;
+ return hsb;
+ }
+
+ // Converts an RGB object to an HSB object
+ function rgb2hsb(rgb) {
+ var hsb = { h: 0, s: 0, b: 0 };
+ var min = Math.min(rgb.r, rgb.g, rgb.b);
+ var max = Math.max(rgb.r, rgb.g, rgb.b);
+ var delta = max - min;
+ hsb.b = max;
+ hsb.s = max !== 0 ? 255 * delta / max : 0;
+ if(hsb.s !== 0) {
+ if(rgb.r === max) {
+ hsb.h = (rgb.g - rgb.b) / delta;
+ } else if(rgb.g === max) {
+ hsb.h = 2 + (rgb.b - rgb.r) / delta;
+ } else {
+ hsb.h = 4 + (rgb.r - rgb.g) / delta;
+ }
+ } else {
+ hsb.h = -1;
+ }
+ hsb.h *= 60;
+ if(hsb.h < 0) {
+ hsb.h += 360;
+ }
+ hsb.s *= 100/255;
+ hsb.b *= 100/255;
+ return hsb;
+ }
+
+ // Converts a hex string to an RGB object
+ function hex2rgb(hex) {
+ hex = parseInt(((hex.indexOf('#') > -1) ? hex.substring(1) : hex), 16);
+ return {
+ r: hex >> 16,
+ g: (hex & 0x00FF00) >> 8,
+ b: (hex & 0x0000FF)
+ };
+ }
+
+ // Handle events
+ $([document, top.document])
+ // Hide on clicks outside of the control
+ .on('mousedown.minicolors touchstart.minicolors', function(event) {
+ if(!$(event.target).parents().add(event.target).hasClass('minicolors')) {
+ hide();
+ }
+ })
+ // Start moving
+ .on('mousedown.minicolors touchstart.minicolors', '.minicolors-grid, .minicolors-slider, .minicolors-opacity-slider', function(event) {
+ var target = $(this);
+ event.preventDefault();
+ $(event.delegateTarget).data('minicolors-target', target);
+ move(target, event, true);
+ })
+ // Move pickers
+ .on('mousemove.minicolors touchmove.minicolors', function(event) {
+ var target = $(event.delegateTarget).data('minicolors-target');
+ if(target) move(target, event);
+ })
+ // Stop moving
+ .on('mouseup.minicolors touchend.minicolors', function() {
+ $(this).removeData('minicolors-target');
+ })
+ // Selected a swatch
+ .on('click.minicolors', '.minicolors-swatches li', function(event) {
+ event.preventDefault();
+ var target = $(this), input = target.parents('.minicolors').find('.minicolors-input'), color = target.data('swatch-color');
+ updateInput(input, color, getAlpha(color));
+ updateFromInput(input);
+ })
+ // Show panel when swatch is clicked
+ .on('mousedown.minicolors touchstart.minicolors', '.minicolors-input-swatch', function(event) {
+ var input = $(this).parent().find('.minicolors-input');
+ event.preventDefault();
+ show(input);
+ })
+ // Show on focus
+ .on('focus.minicolors', '.minicolors-input', function() {
+ var input = $(this);
+ if(!input.data('minicolors-initialized')) return;
+ show(input);
+ })
+ // Update value on blur
+ .on('blur.minicolors', '.minicolors-input', function() {
+ var input = $(this);
+ var settings = input.data('minicolors-settings');
+ var keywords;
+ var hex;
+ var rgba;
+ var swatchOpacity;
+ var value;
+
+ if(!input.data('minicolors-initialized')) return;
+
+ // Get array of lowercase keywords
+ keywords = !settings.keywords ? [] : $.map(settings.keywords.split(','), function(a) {
+ return $.trim(a.toLowerCase());
+ });
+
+ // Set color string
+ if(input.val() !== '' && $.inArray(input.val().toLowerCase(), keywords) > -1) {
+ value = input.val();
+ } else {
+ // Get RGBA values for easy conversion
+ if(isRgb(input.val())) {
+ rgba = parseRgb(input.val(), true);
+ } else {
+ hex = parseHex(input.val(), true);
+ rgba = hex ? hex2rgb(hex) : null;
+ }
+
+ // Convert to format
+ if(rgba === null) {
+ value = settings.defaultValue;
+ } else if(settings.format === 'rgb') {
+ value = settings.opacity ?
+ parseRgb('rgba(' + rgba.r + ',' + rgba.g + ',' + rgba.b + ',' + input.attr('data-opacity') + ')') :
+ parseRgb('rgb(' + rgba.r + ',' + rgba.g + ',' + rgba.b + ')');
+ } else {
+ value = rgb2hex(rgba);
+ }
+ }
+
+ // Update swatch opacity
+ swatchOpacity = settings.opacity ? input.attr('data-opacity') : 1;
+ if(value.toLowerCase() === 'transparent') swatchOpacity = 0;
+ input
+ .closest('.minicolors')
+ .find('.minicolors-input-swatch > span')
+ .css('opacity', swatchOpacity);
+
+ // Set input value
+ input.val(value);
+
+ // Is it blank?
+ if(input.val() === '') input.val(parseInput(settings.defaultValue, true));
+
+ // Adjust case
+ input.val(convertCase(input.val(), settings.letterCase));
+
+ })
+ // Handle keypresses
+ .on('keydown.minicolors', '.minicolors-input', function(event) {
+ var input = $(this);
+ if(!input.data('minicolors-initialized')) return;
+ switch(event.keyCode) {
+ case 9: // tab
+ hide();
+ break;
+ case 13: // enter
+ case 27: // esc
+ hide();
+ input.blur();
+ break;
+ }
+ })
+ // Update on keyup
+ .on('keyup.minicolors', '.minicolors-input', function() {
+ var input = $(this);
+ if(!input.data('minicolors-initialized')) return;
+ updateFromInput(input, true);
+ })
+ // Update on paste
+ .on('paste.minicolors', '.minicolors-input', function() {
+ var input = $(this);
+ if(!input.data('minicolors-initialized')) return;
+ setTimeout(function() {
+ updateFromInput(input, true);
+ }, 1);
+ });
+}));
diff --git a/jquery.minicolors.png b/jquery.minicolors.png
new file mode 100644
index 0000000..bccc201
Binary files /dev/null and b/jquery.minicolors.png differ
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..98f4d5f
--- /dev/null
+++ b/package.json
@@ -0,0 +1,31 @@
+{
+ "name": "@claviska/jquery-minicolors",
+ "version": "2.2.6",
+ "homepage": "https://github.com/claviska/jquery-minicolors",
+ "author": "Cory LaViska",
+ "description": "jQuery MiniColors Plugin",
+ "main": "jquery.minicolors.js",
+ "keywords": [
+ "jquery",
+ "colorpicker"
+ ],
+ "license": "MIT",
+ "dependencies": {
+ "jquery": ">= 1.7.x"
+ },
+ "devDependencies": {
+ "del": "^2.2.0",
+ "gulp": "^3.9.1",
+ "gulp-help": "^1.6.1",
+ "gulp-rename": "^1.2.2",
+ "gulp-uglify": "^1.5.3"
+ },
+ "repository": {
+ "type": "git",
+ "url": "https://github.com/claviska/jquery-minicolors.git"
+ },
+ "bugs": {
+ "url": "https://github.com/claviska/jquery-minicolors/issues"
+ },
+ "scripts": {}
+}
diff --git a/without-bootstrap.html b/without-bootstrap.html
new file mode 100644
index 0000000..82f9092
--- /dev/null
+++ b/without-bootstrap.html
@@ -0,0 +1,185 @@
+<!doctype html>
+<html>
+<head>
+ <title>jQuery MiniColors</title>
+ <meta charset="utf-8">
+
+ <!-- jQuery -->
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
+
+ <!-- MiniColors -->
+ <script src="jquery.minicolors.js"></script>
+ <link rel="stylesheet" href="jquery.minicolors.css">
+
+ <style>
+ body {
+ font: 16px sans-serif;
+ line-height: 1.8;
+ padding: 0 40px;
+ margin-bottom: 200px;
+ }
+ a {
+ color: #08c;
+ text-decoration: none;
+ }
+ a:hover {
+ text-decoration: underline;
+ }
+ .form-group {
+ margin: 20px 0;
+ }
+ label {
+ color: #888;
+ }
+ </style>
+
+ <script>
+ $(document).ready( function() {
+
+ $('.demo').each( function() {
+ //
+ // Dear reader, it's actually very easy to initialize MiniColors. For example:
+ //
+ // $(selector).minicolors();
+ //
+ // The way I've done it below is just for the demo, so don't get confused
+ // by it. Also, data- attributes aren't supported at this time. Again,
+ // they're only used for the purposes of this demo.
+ //
+ $(this).minicolors({
+ control: $(this).attr('data-control') || 'hue',
+ defaultValue: $(this).attr('data-defaultValue') || '',
+ format: $(this).attr('data-format') || 'hex',
+ keywords: $(this).attr('data-keywords') || '',
+ inline: $(this).attr('data-inline') === 'true',
+ letterCase: $(this).attr('data-letterCase') || 'lowercase',
+ opacity: $(this).attr('data-opacity'),
+ position: $(this).attr('data-position') || 'bottom left',
+ swatches: $(this).attr('data-swatches') ? $(this).attr('data-swatches').split('|') : [],
+ change: function(hex, opacity) {
+ var log;
+ try {
+ log = hex ? hex : 'transparent';
+ if( opacity ) log += ', ' + opacity;
+ console.log(log);
+ } catch(e) {}
+ },
+ theme: 'default'
+ });
+
+ });
+
+ });
+ </script>
+</head>
+<body>
+
+ <h1>MiniColors Demo (without Bootstrap)</h1>
+ <p>
+ <a href="index.html">« Back to the Bootstrap demo</a>
+ </p>
+
+ <!-- Control Types -->
+ <h3>Control Types</h3>
+ <div class="form-group">
+ <label for="hue-demo">Hue (default)</label>
+ <input type="text" id="hue-demo" class="demo" data-control="hue" value="#ff6161">
+ </div>
+ <div class="form-group">
+ <label for="saturation-demo">Saturation</label>
+ <input type="text" id="saturation-demo" class="demo" data-control="saturation" value="#0088cc">
+ </div>
+ <div class="form-group">
+ <label for="brightness-demo">Brightness</label>
+ <input type="text" id="brightness-demo" class="demo" data-control="brightness" value="#00ffff">
+ </div>
+ <div class="form-group">
+ <label for="wheel-demo">Wheel</label>
+ <input type="text" id="wheel-demo" class="demo" data-control="wheel" value="#ff99ee">
+ </div>
+
+ <!-- Input modes -->
+ <h3>Input Modes</h3>
+ <div class="form-group">
+ <label for="text-field">Text field</label>
+ <br>
+ <input type="text" id="text-field" class="demo" value="#70c24a">
+ </div>
+ <div class="form-group">
+ <label for="hidden-input">Hidden Input</label>
+ <br>
+ <input type="hidden" id="hidden-input" class="demo" value="#db913d">
+ </div>
+ <div class="form-group">
+ <label for="inline">Inline</label>
+ <br>
+ <input type="text" id="inline" class="demo" data-inline="true" value="#4fc8db">
+ </div>
+
+ <!-- Positions -->
+ <h3>Positions</h3>
+ <div class="form-group">
+ <label for="position-bottom-left">bottom left (default)</label>
+ <input type="text" id="position-bottom-left" class="demo" data-position="bottom left" value="#0088cc">
+ </div>
+ <div class="form-group">
+ <label for="position-top-left">top left</label>
+ <input type="text" id="position-top-left" class="demo" data-position="top left" value="#0088cc">
+ </div>
+ <div class="form-group">
+ <label for="position-bottom-right">bottom right</label>
+ <input type="text" id="position-bottom-right" class="demo" data-position="bottom right" value="#0088cc">
+ </div>
+ <div class="form-group">
+ <label for="position-top-right">top right</label>
+ <input type="text" id="position-top-right" class="demo" data-position="top right" value="#0088cc">
+ </div>
+
+ <!-- RGB(A) -->
+ <h3>RGB(A)</h3>
+ <div class="form-group">
+ <label for="rgb">rgb</label>
+ <br>
+ <input type="text" id="rgb" class="demo" data-format="rgb" value="rgb(33, 147, 58)">
+ </div>
+ <div class="form-group">
+ <label for="rgba">rgb(a)</label>
+ <br>
+ <input type="text" id="rgba" class="demo" data-format="rgb" data-opacity=".5" value="rgba(52, 64, 158, 0.5)">
+ </div>
+
+ <!-- and more -->
+ <h3>…and more!</h3>
+ <div class="form-group">
+ <label for="opacity">Opacity</label>
+ <br>
+ <input type="text" id="opacity" class="demo" data-opacity=".5" value="#766fa8">
+ </div>
+ <div class="form-group">
+ <label for="keywords">Keywords</label>
+ <br>
+ <input type="text" id="keywords" class="demo" data-keywords="transparent, inherit, initial" value="transparent">
+ </div>
+ <div class="form-group">
+ <label for="default-value">Default Value</label>
+ <br>
+ <input type="text" id="default-value" class="demo" data-defaultValue="#ff6600">
+ </div>
+ <div class="form-group">
+ <label for="letter-case">Letter Case</label>
+ <br>
+ <input type="text" id="letter-case" class="demo" data-letterCase="uppercase">
+ </div>
+ <div class="form-group">
+ <label for="letter-case">Swatches</label>
+ <br>
+ <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">
+ </div>
+ <div class="form-group">
+ <label for="letter-case">Swatches and opacity</label>
+ <br>
+ <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">
+ </div>
+
+</body>
+</html>
--
Alioth's /usr/local/bin/git-commit-notice on /srv/git.debian.org/git/pkg-javascript/libjs-jquery-minicolors.git
More information about the Pkg-javascript-commits
mailing list