[Pkg-javascript-commits] [jquery-minicolors] 02/11: New upstream version 2.2.6
Michael Lustfield
mtecknology at debian.org
Sun Aug 27 02:29:56 UTC 2017
This is an automated email from the git hooks/post-receive script.
mtecknology pushed a commit to branch master
in repository jquery-minicolors.
commit d9955dbec60fabd0601de1365a327768c35295e5
Author: Michael Lustfield <michael at lustfield.net>
Date: Sat Aug 26 20:43:32 2017 -0500
New upstream version 2.2.6
---
.editorconfig | 9 +
.eslintrc | 20 +
.gitignore | 5 +-
LICENSE.md | 7 +
README.md | 19 +
bower.json | 2 +-
component.json | 38 +-
config.codekit | 935 ---------------------
gulpfile.js | 34 +
index.html | 1327 +++++++++++++++--------------
jquery.minicolors.css | 352 ++++----
jquery.minicolors.js | 2067 +++++++++++++++++++++++-----------------------
jquery.minicolors.min.js | 19 +-
package.json | 13 +-
readme.md | 9 -
without-bootstrap.html | 328 ++++----
16 files changed, 2146 insertions(+), 3038 deletions(-)
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
index 024cbe6..7d6ad5f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,5 +1,2 @@
.DS_Store
-.idea/
-.idea/**/*
-jquery-minicolors.sublime-project
-jquery-minicolors.sublime-workspace
\ No newline at end of file
+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
index 0a9883d..df9ff42 100644
--- a/bower.json
+++ b/bower.json
@@ -1,6 +1,6 @@
{
"name": "jquery-minicolors",
- "version": "2.2.3",
+ "version": "2.2.6",
"homepage": "https://github.com/claviska/jquery-minicolors",
"authors": [
"Cory LaViska"
diff --git a/component.json b/component.json
index b15704f..0681adb 100644
--- a/component.json
+++ b/component.json
@@ -1,19 +1,21 @@
{
- "name" : "jquery-minicolors",
- "version" : "2.2.3",
- "description" : "jQuery MiniColors Plugin",
- "homepage" : "",
- "main" : [ "./jquery.minicolors.js", "./jquery.minicolors.css" ],
- "dependencies" : {
- "jquery" : ">= 1.7.x"
- },
- "keywords" : [
- ],
- "author" : {
- "name" : "Cory LaViska",
- "web" : "http://www.abeautifulsite.net/"
- },
- "license": [
- "http://www.opensource.org/licenses/mit-license.php"
- ]
-}
\ No newline at end of file
+ "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/config.codekit b/config.codekit
deleted file mode 100644
index b8f57b7..0000000
--- a/config.codekit
+++ /dev/null
@@ -1,935 +0,0 @@
-{
-"CodeKitInfo": "This is a CodeKit 2.x project configuration file. It is designed to sync project settings across multiple machines. MODIFYING THE CONTENTS OF THIS FILE IS A POOR LIFE DECISION. If you do so, you will likely cause CodeKit to crash. This file is not useful unless accompanied by the project that created it in CodeKit 2. This file is not backwards-compatible with CodeKit 1.x. For more information, see: http:\/\/incident57.com\/codekit",
-"creatorBuild": "19076",
-"files": {
- "\/bower.json": {
- "fileType": 524288,
- "ignore": 1,
- "ignoreWasSetByUser": 0,
- "inputAbbreviatedPath": "\/bower.json",
- "orderOutput": 0,
- "outputAbbreviatedPath": "\/bower-min.json",
- "outputPathIsOutsideProject": 0,
- "outputPathIsSetByUser": 0,
- "outputStyle": 1
- },
- "\/component.json": {
- "fileType": 524288,
- "ignore": 1,
- "ignoreWasSetByUser": 0,
- "inputAbbreviatedPath": "\/component.json",
- "orderOutput": 0,
- "outputAbbreviatedPath": "\/component-min.json",
- "outputPathIsOutsideProject": 0,
- "outputPathIsSetByUser": 0,
- "outputStyle": 1
- },
- "\/composer.json": {
- "fileType": 524288,
- "ignore": 1,
- "ignoreWasSetByUser": 0,
- "inputAbbreviatedPath": "\/composer.json",
- "orderOutput": 0,
- "outputAbbreviatedPath": "\/composer-min.json",
- "outputPathIsOutsideProject": 0,
- "outputPathIsSetByUser": 0,
- "outputStyle": 1
- },
- "\/index.html": {
- "fileType": 8192,
- "ignore": 0,
- "ignoreWasSetByUser": 0,
- "inputAbbreviatedPath": "\/index.html",
- "outputAbbreviatedPath": "No Output Path",
- "outputPathIsOutsideProject": 0,
- "outputPathIsSetByUser": 0
- },
- "\/jquery.minicolors.css": {
- "fileType": 16,
- "ignore": 0,
- "ignoreWasSetByUser": 0,
- "inputAbbreviatedPath": "\/jquery.minicolors.css",
- "outputAbbreviatedPath": "No Output Path",
- "outputPathIsOutsideProject": 0,
- "outputPathIsSetByUser": 0
- },
- "\/jquery.minicolors.js": {
- "fileType": 64,
- "ignore": 0,
- "ignoreWasSetByUser": 0,
- "inputAbbreviatedPath": "\/jquery.minicolors.js",
- "outputAbbreviatedPath": "\/jquery.minicolors.min.js",
- "outputPathIsOutsideProject": 0,
- "outputPathIsSetByUser": 0,
- "outputStyle": 1,
- "syntaxCheckerStyle": 1
- },
- "\/jquery.minicolors.min.js": {
- "fileType": 64,
- "ignore": 1,
- "ignoreWasSetByUser": 0,
- "inputAbbreviatedPath": "\/jquery.minicolors.min.js",
- "outputAbbreviatedPath": "\/jquery.minicolors.min.min.js",
- "outputPathIsOutsideProject": 0,
- "outputPathIsSetByUser": 0,
- "outputStyle": 1,
- "syntaxCheckerStyle": 1
- },
- "\/jquery.minicolors.png": {
- "fileType": 32768,
- "ignore": 0,
- "ignoreWasSetByUser": 0,
- "initialSize": 77459,
- "inputAbbreviatedPath": "\/jquery.minicolors.png",
- "outputAbbreviatedPath": "\/jquery.minicolors.png",
- "outputPathIsOutsideProject": 0,
- "outputPathIsSetByUser": 0,
- "processed": 0
- },
- "\/package.json": {
- "fileType": 524288,
- "ignore": 1,
- "ignoreWasSetByUser": 0,
- "inputAbbreviatedPath": "\/package.json",
- "orderOutput": 0,
- "outputAbbreviatedPath": "\/package-min.json",
- "outputPathIsOutsideProject": 0,
- "outputPathIsSetByUser": 0,
- "outputStyle": 1
- },
- "\/readme.md": {
- "criticStyle": 0,
- "enableFootnotes": 0,
- "enableLabels": 1,
- "enableSmartQuotes": 1,
- "escapeLineBreaks": 0,
- "fileType": 4096,
- "ignore": 0,
- "ignoreWasSetByUser": 0,
- "inputAbbreviatedPath": "\/readme.md",
- "maskEmailAddresses": 1,
- "outputAbbreviatedPath": "\/readme.html",
- "outputFormat": 0,
- "outputPathIsOutsideProject": 0,
- "outputPathIsSetByUser": 0,
- "outputStyle": 0,
- "parseMetadata": 1,
- "processHTML": 0,
- "randomFootnoteNumbers": 0,
- "useCompatibilityMode": 0
- },
- "\/without-bootstrap.html": {
- "fileType": 8192,
- "ignore": 0,
- "ignoreWasSetByUser": 0,
- "inputAbbreviatedPath": "\/without-bootstrap.html",
- "outputAbbreviatedPath": "No Output Path",
- "outputPathIsOutsideProject": 0,
- "outputPathIsSetByUser": 0
- }
- },
-"hooks": [
- ],
-"lastSavedByUser": "Cory LaViska",
-"manualImportLinks": {
- },
-"projectAttributes": {
- "bowerAbbreviatedPath": "",
- "displayValue": "jquery-minicolors",
- "displayValueWasSetByUser": 0,
- "iconImageName": "brackets_blue"
- },
-"projectSettings": {
- "alwaysUseExternalServer": 0,
- "animateCSSInjections": 1,
- "autoApplyPSLanguageSettingsStyle": 0,
- "autoprefixerBrowserString": "> 1%, last 2 versions, Firefox ESR, Opera 12.1",
- "autoSyncProjectSettingsFile": 1,
- "browserRefreshDelay": 0,
- "coffeeAutoOutputPathEnabled": 1,
- "coffeeAutoOutputPathFilenamePattern": "*.js",
- "coffeeAutoOutputPathRelativePath": "",
- "coffeeAutoOutputPathReplace1": "",
- "coffeeAutoOutputPathReplace2": "",
- "coffeeAutoOutputPathStyle": 0,
- "coffeeCreateSourceMap": 0,
- "coffeeLintFlags2": {
- "arrow_spacing": {
- "active": 0,
- "flagValue": -1
- },
- "camel_case_classes": {
- "active": 1,
- "flagValue": -1
- },
- "colon_assignment_spacing": {
- "active": 0,
- "flagValue": 1
- },
- "cyclomatic_complexity": {
- "active": 0,
- "flagValue": 10
- },
- "duplicate_key": {
- "active": 1,
- "flagValue": -1
- },
- "empty_constructor_needs_parens": {
- "active": 0,
- "flagValue": -1
- },
- "ensure_comprehensions": {
- "active": 1,
- "flagValue": -1
- },
- "indentation": {
- "active": 1,
- "flagValue": 2
- },
- "line_endings": {
- "active": 0,
- "flagValue": 0
- },
- "max_line_length": {
- "active": 0,
- "flagValue": 150
- },
- "missing_fat_arrows": {
- "active": 0,
- "flagValue": -1
- },
- "newlines_after_classes": {
- "active": 0,
- "flagValue": 3
- },
- "no_backticks": {
- "active": 1,
- "flagValue": -1
- },
- "no_debugger": {
- "active": 1,
- "flagValue": -1
- },
- "no_empty_functions": {
- "active": 0,
- "flagValue": -1
- },
- "no_empty_param_list": {
- "active": 0,
- "flagValue": -1
- },
- "no_implicit_braces": {
- "active": 1,
- "flagValue": -1
- },
- "no_implicit_parens": {
- "active": 0,
- "flagValue": -1
- },
- "no_interpolation_in_single_quotes": {
- "active": 0,
- "flagValue": -1
- },
- "no_plusplus": {
- "active": 0,
- "flagValue": -1
- },
- "no_stand_alone_at": {
- "active": 1,
- "flagValue": -1
- },
- "no_tabs": {
- "active": 1,
- "flagValue": -1
- },
- "no_throwing_strings": {
- "active": 1,
- "flagValue": -1
- },
- "no_trailing_semicolons": {
- "active": 1,
- "flagValue": -1
- },
- "no_trailing_whitespace": {
- "active": 1,
- "flagValue": -1
- },
- "no_unnecessary_double_quotes": {
- "active": 0,
- "flagValue": -1
- },
- "no_unnecessary_fat_arrows": {
- "active": 1,
- "flagValue": -1
- },
- "non_empty_constructor_needs_parens": {
- "active": 0,
- "flagValue": -1
- },
- "prefer_english_operator": {
- "active": 0,
- "flagValue": -1
- },
- "space_operators": {
- "active": 0,
- "flagValue": -1
- },
- "spacing_after_comma": {
- "active": 1,
- "flagValue": -1
- }
- },
- "coffeeMinifyOutput": 1,
- "coffeeOutputStyle": 0,
- "coffeeSyntaxCheckerStyle": 1,
- "externalServerAddress": "http:\/\/localhost:8888",
- "externalServerPreviewPathAddition": "",
- "genericWebpageFileExtensionsString": "html, htm, shtml, shtm, xhtml, php, jsp, asp, aspx, erb, ctp",
- "hamlAutoOutputPathEnabled": 1,
- "hamlAutoOutputPathFilenamePattern": "*.html",
- "hamlAutoOutputPathRelativePath": "",
- "hamlAutoOutputPathReplace1": "",
- "hamlAutoOutputPathReplace2": "",
- "hamlAutoOutputPathStyle": 0,
- "hamlEscapeHTMLCharacters": 0,
- "hamlNoEscapeInAttributes": 0,
- "hamlOutputFormat": 2,
- "hamlOutputStyle": 0,
- "hamlUseCDATA": 0,
- "hamlUseDoubleQuotes": 0,
- "hamlUseUnixNewlines": 0,
- "jadeAutoOutputPathEnabled": 1,
- "jadeAutoOutputPathFilenamePattern": "*.html",
- "jadeAutoOutputPathRelativePath": "",
- "jadeAutoOutputPathReplace1": "",
- "jadeAutoOutputPathReplace2": "",
- "jadeAutoOutputPathStyle": 0,
- "jadeCompileDebug": 1,
- "jadeOutputStyle": 0,
- "javascriptAutoOutputPathEnabled": 1,
- "javascriptAutoOutputPathFilenamePattern": "*.min.js",
- "javascriptAutoOutputPathRelativePath": "\/min",
- "javascriptAutoOutputPathReplace1": "",
- "javascriptAutoOutputPathReplace2": "",
- "javascriptAutoOutputPathStyle": 0,
- "javascriptCreateSourceMap": 1,
- "javascriptOutputStyle": 1,
- "javascriptSyntaxCheckerStyle": 1,
- "jsCheckerReservedNamesString": "",
- "jsHintFlags2": {
- "asi": {
- "active": 0,
- "flagValue": -1
- },
- "bitwise": {
- "active": 1,
- "flagValue": -1
- },
- "boss": {
- "active": 0,
- "flagValue": -1
- },
- "browser": {
- "active": 1,
- "flagValue": -1
- },
- "browserify": {
- "active": 0,
- "flagValue": -1
- },
- "camelcase": {
- "active": 0,
- "flagValue": -1
- },
- "couch": {
- "active": 0,
- "flagValue": -1
- },
- "curly": {
- "active": 0,
- "flagValue": -1
- },
- "debug": {
- "active": 0,
- "flagValue": -1
- },
- "devel": {
- "active": 0,
- "flagValue": -1
- },
- "dojo": {
- "active": 0,
- "flagValue": -1
- },
- "elision": {
- "active": 1,
- "flagValue": -1
- },
- "eqeqeq": {
- "active": 1,
- "flagValue": -1
- },
- "eqnull": {
- "active": 0,
- "flagValue": -1
- },
- "es3": {
- "active": 0,
- "flagValue": -1
- },
- "esnext": {
- "active": 0,
- "flagValue": -1
- },
- "evil": {
- "active": 0,
- "flagValue": -1
- },
- "expr": {
- "active": 0,
- "flagValue": -1
- },
- "forin": {
- "active": 0,
- "flagValue": -1
- },
- "freeze": {
- "active": 1,
- "flagValue": -1
- },
- "funcscope": {
- "active": 0,
- "flagValue": -1
- },
- "futurehostile": {
- "active": 0,
- "flagValue": -1
- },
- "globalstrict": {
- "active": 0,
- "flagValue": -1
- },
- "immed": {
- "active": 0,
- "flagValue": -1
- },
- "indent": {
- "active": 0,
- "flagValue": 4
- },
- "iterator": {
- "active": 0,
- "flagValue": -1
- },
- "jasmine": {
- "active": 0,
- "flagValue": -1
- },
- "jquery": {
- "active": 1,
- "flagValue": -1
- },
- "lastsemic": {
- "active": 0,
- "flagValue": -1
- },
- "latedef": {
- "active": 1,
- "flagValue": -1
- },
- "laxbreak": {
- "active": 0,
- "flagValue": -1
- },
- "laxcomma": {
- "active": 0,
- "flagValue": -1
- },
- "loopfunc": {
- "active": 0,
- "flagValue": -1
- },
- "maxcomplexity": {
- "active": 0,
- "flagValue": 10
- },
- "maxdepth": {
- "active": 0,
- "flagValue": 3
- },
- "maxlen": {
- "active": 0,
- "flagValue": 150
- },
- "maxparams": {
- "active": 0,
- "flagValue": 3
- },
- "maxstatements": {
- "active": 0,
- "flagValue": 4
- },
- "mocha": {
- "active": 0,
- "flagValue": -1
- },
- "mootools": {
- "active": 0,
- "flagValue": -1
- },
- "moz": {
- "active": 0,
- "flagValue": -1
- },
- "multistr": {
- "active": 0,
- "flagValue": -1
- },
- "newcap": {
- "active": 1,
- "flagValue": -1
- },
- "noarg": {
- "active": 1,
- "flagValue": -1
- },
- "nocomma": {
- "active": 0,
- "flagValue": -1
- },
- "node": {
- "active": 0,
- "flagValue": -1
- },
- "noempty": {
- "active": 0,
- "flagValue": -1
- },
- "nonbsp": {
- "active": 0,
- "flagValue": -1
- },
- "nonew": {
- "active": 1,
- "flagValue": -1
- },
- "nonstandard": {
- "active": 0,
- "flagValue": -1
- },
- "notypeof": {
- "active": 1,
- "flagValue": -1
- },
- "noyield": {
- "active": 0,
- "flagValue": -1
- },
- "onecase": {
- "active": 0,
- "flagValue": -1
- },
- "phantom": {
- "active": 0,
- "flagValue": -1
- },
- "plusplus": {
- "active": 0,
- "flagValue": -1
- },
- "proto": {
- "active": 0,
- "flagValue": -1
- },
- "prototypejs": {
- "active": 0,
- "flagValue": -1
- },
- "qunit": {
- "active": 0,
- "flagValue": -1
- },
- "regexp": {
- "active": 1,
- "flagValue": -1
- },
- "rhino": {
- "active": 0,
- "flagValue": -1
- },
- "scripturl": {
- "active": 0,
- "flagValue": -1
- },
- "shadow": {
- "active": 0,
- "flagValue": -1
- },
- "shelljs": {
- "active": 0,
- "flagValue": -1
- },
- "singleGroups": {
- "active": 0,
- "flagValue": -1
- },
- "strict": {
- "active": 0,
- "flagValue": -1
- },
- "sub": {
- "active": 0,
- "flagValue": -1
- },
- "supernew": {
- "active": 0,
- "flagValue": -1
- },
- "typed": {
- "active": 0,
- "flagValue": -1
- },
- "undef": {
- "active": 1,
- "flagValue": -1
- },
- "unused": {
- "active": 1,
- "flagValue": -1
- },
- "varstmt": {
- "active": 0,
- "flagValue": -1
- },
- "withstmt": {
- "active": 0,
- "flagValue": -1
- },
- "worker": {
- "active": 0,
- "flagValue": -1
- },
- "wsh": {
- "active": 0,
- "flagValue": -1
- },
- "yui": {
- "active": 0,
- "flagValue": -1
- }
- },
- "jsLintFlags2": {
- "bitwise": {
- "active": 0,
- "flagValue": -1
- },
- "browser": {
- "active": 1,
- "flagValue": -1
- },
- "couch": {
- "active": 0,
- "flagValue": -1
- },
- "devel": {
- "active": 0,
- "flagValue": -1
- },
- "es6": {
- "active": 0,
- "flagValue": -1
- },
- "eval": {
- "active": 0,
- "flagValue": -1
- },
- "for": {
- "active": 0,
- "flagValue": -1
- },
- "maxlen": {
- "active": 0,
- "flagValue": 150
- },
- "node": {
- "active": 0,
- "flagValue": -1
- },
- "this": {
- "active": 0,
- "flagValue": -1
- },
- "white": {
- "active": 0,
- "flagValue": -1
- }
- },
- "jsonAutoOutputPathEnabled": 0,
- "jsonAutoOutputPathFilenamePattern": "*-min.json",
- "jsonAutoOutputPathRelativePath": "",
- "jsonAutoOutputPathReplace1": "",
- "jsonAutoOutputPathReplace2": "",
- "jsonAutoOutputPathStyle": 0,
- "jsonOrderOutput": 0,
- "jsonOutputStyle": 1,
- "kitAutoOutputPathEnabled": 1,
- "kitAutoOutputPathFilenamePattern": "*.html",
- "kitAutoOutputPathRelativePath": "",
- "kitAutoOutputPathReplace1": "",
- "kitAutoOutputPathReplace2": "",
- "kitAutoOutputPathStyle": 0,
- "lessAllowInsecureImports": 0,
- "lessAutoOutputPathEnabled": 1,
- "lessAutoOutputPathFilenamePattern": "*.css",
- "lessAutoOutputPathRelativePath": "..\/css",
- "lessAutoOutputPathReplace1": "less",
- "lessAutoOutputPathReplace2": "css",
- "lessAutoOutputPathStyle": 2,
- "lessCreateSourceMap": 0,
- "lessDisableJavascript": 0,
- "lessIeCompatibility": 1,
- "lessOutputStyle": 0,
- "lessRelativeURLS": 0,
- "lessStrictImports": 0,
- "lessStrictMath": 0,
- "lessStrictUnits": 0,
- "markdownAutoOutputPathEnabled": 0,
- "markdownAutoOutputPathFilenamePattern": "*.html",
- "markdownAutoOutputPathRelativePath": "",
- "markdownAutoOutputPathReplace1": "",
- "markdownAutoOutputPathReplace2": "",
- "markdownAutoOutputPathStyle": 0,
- "markdownCriticStyle": 0,
- "markdownEnableFootnotes": 0,
- "markdownEnableLabels": 1,
- "markdownEnableSmartQuotes": 1,
- "markdownEscapeLineBreaks": 0,
- "markdownMaskEmailAddresses": 1,
- "markdownOutputFormat": 0,
- "markdownOutputStyle": 0,
- "markdownParseMetadata": 1,
- "markdownProcessHTML": 0,
- "markdownRandomFootnoteNumbers": 0,
- "markdownUseCompatibilityMode": 0,
- "reloadFileURLs": 0,
- "sassAutoOutputPathEnabled": 1,
- "sassAutoOutputPathFilenamePattern": "*.css",
- "sassAutoOutputPathRelativePath": "..\/css",
- "sassAutoOutputPathReplace1": "sass",
- "sassAutoOutputPathReplace2": "css",
- "sassAutoOutputPathStyle": 2,
- "sassCreateSourceMap": 0,
- "sassDebugStyle": 0,
- "sassDecimalPrecision": 10,
- "sassOutputStyle": 0,
- "sassUseLibsass": 0,
- "shouldRunAutoprefixer": 0,
- "shouldRunBless": 0,
- "skippedItemsString": ".svn, .git, .hg, log, _logs, _cache, cache, logs, node_modules",
- "slimAutoOutputPathEnabled": 1,
- "slimAutoOutputPathFilenamePattern": "*.html",
- "slimAutoOutputPathRelativePath": "",
- "slimAutoOutputPathReplace1": "",
- "slimAutoOutputPathReplace2": "",
- "slimAutoOutputPathStyle": 0,
- "slimCompileOnly": 0,
- "slimLogicless": 0,
- "slimOutputFormat": 0,
- "slimOutputStyle": 1,
- "slimRailsCompatible": 0,
- "stylusAutoOutputPathEnabled": 1,
- "stylusAutoOutputPathFilenamePattern": "*.css",
- "stylusAutoOutputPathRelativePath": "..\/css",
- "stylusAutoOutputPathReplace1": "stylus",
- "stylusAutoOutputPathReplace2": "css",
- "stylusAutoOutputPathStyle": 2,
- "stylusCreateSourceMap": 0,
- "stylusDebugStyle": 0,
- "stylusImportCSS": 0,
- "stylusOutputStyle": 0,
- "stylusResolveRelativeURLS": 0,
- "typescriptAutoOutputPathEnabled": 1,
- "typescriptAutoOutputPathFilenamePattern": "*.js",
- "typescriptAutoOutputPathRelativePath": "\/js",
- "typescriptAutoOutputPathReplace1": "",
- "typescriptAutoOutputPathReplace2": "",
- "typescriptAutoOutputPathStyle": 2,
- "typescriptCreateDeclarationFile": 0,
- "typescriptCreateSourceMap": 0,
- "typescriptJSXMode": 0,
- "typescriptMinifyOutput": 0,
- "typescriptModuleResolutionType": 0,
- "typescriptModuleType": 0,
- "typescriptNoImplicitAny": 0,
- "typescriptPreserveConstEnums": 0,
- "typescriptRemoveComments": 0,
- "typescriptSuppressImplicitAnyIndexErrors": 0,
- "typescriptTargetECMAVersion": 0,
- "uglifyDefinesString": "",
- "uglifyFlags2": {
- "ascii-only": {
- "active": 0,
- "flagValue": -1
- },
- "bare-returns": {
- "active": 0,
- "flagValue": -1
- },
- "booleans": {
- "active": 1,
- "flagValue": -1
- },
- "bracketize": {
- "active": 0,
- "flagValue": -1
- },
- "cascade": {
- "active": 1,
- "flagValue": -1
- },
- "comments": {
- "active": 1,
- "flagValue": -1
- },
- "comparisons": {
- "active": 1,
- "flagValue": -1
- },
- "compress": {
- "active": 1,
- "flagValue": -1
- },
- "conditionals": {
- "active": 1,
- "flagValue": -1
- },
- "dead_code": {
- "active": 0,
- "flagValue": -1
- },
- "drop_console": {
- "active": 0,
- "flagValue": -1
- },
- "drop_debugger": {
- "active": 1,
- "flagValue": -1
- },
- "eval": {
- "active": 0,
- "flagValue": -1
- },
- "evaluate": {
- "active": 1,
- "flagValue": -1
- },
- "hoist_funs": {
- "active": 1,
- "flagValue": -1
- },
- "hoist_vars": {
- "active": 0,
- "flagValue": -1
- },
- "if_return": {
- "active": 1,
- "flagValue": -1
- },
- "indent-level": {
- "active": 0,
- "flagValue": 4
- },
- "indent-start": {
- "active": 0,
- "flagValue": 0
- },
- "inline-script": {
- "active": 0,
- "flagValue": -1
- },
- "join_vars": {
- "active": 1,
- "flagValue": -1
- },
- "keep_fargs": {
- "active": 0,
- "flagValue": -1
- },
- "keep_fnames": {
- "active": 0,
- "flagValue": -1
- },
- "loops": {
- "active": 1,
- "flagValue": -1
- },
- "mangle": {
- "active": 1,
- "flagValue": -1
- },
- "max-line-len": {
- "active": 1,
- "flagValue": 32000
- },
- "negate_iife": {
- "active": 1,
- "flagValue": -1
- },
- "properties": {
- "active": 1,
- "flagValue": -1
- },
- "pure_getters": {
- "active": 0,
- "flagValue": -1
- },
- "quote-keys": {
- "active": 0,
- "flagValue": -1
- },
- "screw-ie8": {
- "active": 0,
- "flagValue": -1
- },
- "semicolons": {
- "active": 1,
- "flagValue": -1
- },
- "sequences": {
- "active": 1,
- "flagValue": -1
- },
- "sort": {
- "active": 0,
- "flagValue": -1
- },
- "space-colon": {
- "active": 1,
- "flagValue": -1
- },
- "toplevel": {
- "active": 0,
- "flagValue": -1
- },
- "unsafe": {
- "active": 0,
- "flagValue": -1
- },
- "unused": {
- "active": 0,
- "flagValue": -1
- },
- "warnings": {
- "active": 0,
- "flagValue": -1
- },
- "width": {
- "active": 1,
- "flagValue": 80
- }
- },
- "uglifyReservedNamesString": "$",
- "websiteRelativeRoot": ""
- },
-"settingsFileVersion": "2"
-}
\ 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
index 8e85c53..8c33310 100644
--- a/index.html
+++ b/index.html
@@ -1,725 +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'
- });
-
- });
+ <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>
+
+ });
+
+ });
+ </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 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>
-
- <!-- 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 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>
- <!-- 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 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>
-
- <!-- 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 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>
-
- <!-- 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>
+ </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>
-
- <!-- 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="#fff|#000|#f00|#0f0|#00f|#ff0|#0ff" 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 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>
+ <!-- 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>
+ <!-- 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>
+ <!-- Settings -->
+ <h3 id="settings">Settings</h3>
- <p>
- Default settings are as follows:
- </p>
+ <p>
+ Default settings are as follows:
+ </p>
<pre>
$.minicolors = {
- defaults: {
- animationSpeed: 50,
- animationEasing: 'swing',
- change: null,
- changeDelay: 0,
- control: 'hue',
- dataUris: true,
- defaultValue: '',
- format: 'hex',
- hide: null,
- hideSpeed: 100,
- inline: false,
- keywords: '',
- letterCase: 'lowercase',
- opacity: false,
- position: 'bottom left',
- show: null,
- showSpeed: 100,
- theme: 'default',
- swatches: []
- }
+ 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>
+ <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>
+ <p>
+ To change multiple properties at once, use <code>$.extend()</code>:
+ </p>
<pre>
$.minicolors.defaults = $.extend($.minicolors.defaults, {
- changeDelay: 200,
- letterCase: 'uppercase',
- theme: 'bootstrap'
+ 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>dataUris</dt>
- <dd>
- <p>
- Set this to <code>false</code> if you require IE7/IE8 support. This setting will
- force the plugin to load an external image instead of using dataURIs.
- </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>
+ <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>
+ <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;
+ top: 5px;
+ left: 5px;
+ width: 18px;
+ height: 18px;
}
.minicolors-theme-default.minicolors-position-right .minicolors-swatch {
- left: auto;
- right: 5px;
+ 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. There can be only up to 7 colors.
- </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>
+ </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.
+ </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);
- }
+ 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>
+ <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!');
- }
+ 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>
+ </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!');
- }
+ 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>
+ </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
index 9cecc70..ac6b404 100644
--- a/jquery.minicolors.css
+++ b/jquery.minicolors.css
@@ -1,323 +1,319 @@
.minicolors {
- position: relative;
+ position: relative;
}
.minicolors-sprite {
- background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA2YAAACWCAYAAAC1r5t6AAEL2klEQVR4AeSaBY8czxHFqw6SW3vvz4yiMDMnojB9pESsfI8wMzNzRGFmMhz6aGcq1btvck/PM31eec0tlYp6eqp2fOP+ba//7cm3x7K35jYbEWHd8BItieNQmmHubhGWmuLpN7ZkD/96w22B40c/+tES+y960Ys0b3PmW1vsCA385Cc/MR0veMEL7FrMe97znsd1tiQhdlPJIQ+7vk4bEYM5iA3EG/YrttZVrTEi6uvUbe3tkmqp3LthH+tBBq8zjWtN0P+/fxmIdfnAaMhvy4DBIyaTSds0TXt0dBQHBwft3t5eu7Oz0545cyZ+85vftO941zuP7LTZVE6Rhmhs7tya2d6S2W6aFyx1TAU2xDsfOmWn8z1t+Nspmyn/xjxz/evl2Chj96e+ [...]
-}
-
-.minicolors-no-data-uris .minicolors-sprite {
- background-image: url(jquery.minicolors.png);
+ 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;
+ 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;
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
}
.minicolors input[type=hidden] + .minicolors-swatch {
- width: 28px;
- position: static;
- cursor: pointer;
+ width: 28px;
+ position: static;
+ cursor: pointer;
}
.minicolors input[type=hidden][disabled] + .minicolors-swatch {
- cursor: default;
+ cursor: default;
}
/* Panel */
.minicolors-panel {
- position: absolute;
- width: 173px;
- height: 152px;
- background: white;
- border: solid 1px #CCC;
- box-shadow: 0 0 20px rgba(0, 0, 0, .2);
- z-index: 99999;
- -moz-box-sizing: content-box;
- -webkit-box-sizing: content-box;
- box-sizing: content-box;
- display: none;
-}
-
-.minicolors-panel.minicolors-with-swatches {
- height: 182px;
+ 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;
+ display: block;
}
/* Panel positioning */
.minicolors-position-top .minicolors-panel {
- top: -154px;
+ top: -154px;
}
.minicolors-position-right .minicolors-panel {
- right: 0;
+ right: 0;
}
.minicolors-position-bottom .minicolors-panel {
- top: auto;
+ top: auto;
}
.minicolors-position-left .minicolors-panel {
- left: 0;
+ left: 0;
}
.minicolors-with-opacity .minicolors-panel {
- width: 194px;
+ width: 194px;
}
.minicolors .minicolors-grid {
- position: absolute;
- top: 1px;
- left: 1px;
- width: 150px;
- height: 150px;
- background-position: -120px 0;
- cursor: crosshair;
+ 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;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 150px;
+ height: 150px;
}
.minicolors-slider-saturation .minicolors-grid {
- background-position: -420px 0;
+ background-position: -420px 0;
}
.minicolors-slider-saturation .minicolors-grid-inner {
- background-position: -270px 0;
- background-image: inherit;
+ background-position: -270px 0;
+ background-image: inherit;
}
.minicolors-slider-brightness .minicolors-grid {
- background-position: -570px 0;
+ background-position: -570px 0;
}
.minicolors-slider-brightness .minicolors-grid-inner {
- background-color: black;
+ background-color: black;
}
.minicolors-slider-wheel .minicolors-grid {
- background-position: -720px 0;
+ 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;
+ 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;
+ background-position: -60px 0;
}
.minicolors-slider-brightness .minicolors-slider {
- background-position: -20px 0;
+ background-position: -20px 0;
}
.minicolors-slider-wheel .minicolors-slider {
- background-position: -20px 0;
+ background-position: -20px 0;
}
.minicolors-opacity-slider {
- left: 173px;
- background-position: -40px 0;
- display: none;
+ left: 173px;
+ background-position: -40px 0;
+ display: none;
}
.minicolors-with-opacity .minicolors-opacity-slider {
- display: block;
+ 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;
+ 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;
- -moz-box-sizing: content-box;
- -webkit-box-sizing: content-box;
- box-sizing: content-box;
+ 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;
- -moz-box-sizing: content-box;
- -webkit-box-sizing: content-box;
- box-sizing: content-box;
+ 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: 0;
- padding: 0;
- list-style: none;
- overflow: hidden;
- position: absolute;
- top: 157px;
- left: 5px;
+.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;
+ position: relative;
+ float: left;
+ cursor: pointer;
+ margin:0 4px 0 0;
}
.minicolors-with-opacity .minicolors-swatches .minicolors-swatch {
- margin-right:7px;
+ margin-right: 7px;
}
.minicolors-swatch.selected {
- border-color:#000;
+ border-color: #000;
}
/* Inline controls */
.minicolors-inline {
- display: inline-block;
+ display: inline-block;
}
.minicolors-inline .minicolors-input {
- display: none !important;
+ display: none !important;
}
.minicolors-inline .minicolors-panel {
- position: relative;
- top: auto;
- left: auto;
- box-shadow: none;
- z-index: auto;
- display: inline-block;
+ 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;
+ top: 5px;
+ left: 5px;
+ width: 18px;
+ height: 18px;
}
.minicolors-theme-default .minicolors-swatches .minicolors-swatch {
- top: 0;
- left: 0;
- width: 18px;
- height: 18px;
-}
-.minicolors-theme-default .minicolors-swatches {
- height: 20px;
+ margin-bottom: 2px;
+ top: 0;
+ left: 0;
+ width: 18px;
+ height: 18px;
}
.minicolors-theme-default.minicolors-position-right .minicolors-swatch {
- left: auto;
- right: 5px;
+ left: auto;
+ right: 5px;
}
.minicolors-theme-default.minicolors {
- width: auto;
- display: inline-block;
+ width: auto;
+ display: inline-block;
}
.minicolors-theme-default .minicolors-input {
- height: 20px;
- width: auto;
- display: inline-block;
- padding-left: 26px;
+ height: 20px;
+ width: auto;
+ display: inline-block;
+ padding-left: 26px;
}
.minicolors-theme-default.minicolors-position-right .minicolors-input {
- padding-right: 26px;
- padding-left: inherit;
+ 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;
+ z-index: 2;
+ top: 3px;
+ left: 3px;
+ width: 28px;
+ height: 28px;
+ border-radius: 3px;
}
.minicolors-theme-bootstrap .minicolors-swatches .minicolors-swatch {
- top: 0;
- left: 0;
- width: 20px;
- height: 20px;
+ margin-bottom: 2px;
+ top: 0;
+ left: 0;
+ width: 20px;
+ height: 20px;
}
.minicolors-theme-bootstrap .minicolors-swatch-color {
- border-radius: inherit;
+ border-radius: inherit;
}
-.minicolors-theme-bootstrap.minicolors-position-right .minicolors-swatch {
- left: auto;
- right: 3px;
+.minicolors-theme-bootstrap.minicolors-position-right > .minicolors-swatch {
+ left: auto;
+ right: 3px;
}
.minicolors-theme-bootstrap .minicolors-input {
- float: none;
- padding-left: 44px;
+ float: none;
+ padding-left: 44px;
}
.minicolors-theme-bootstrap.minicolors-position-right .minicolors-input {
- padding-right: 44px;
- padding-left: 12px;
+ 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;
+ top: 4px;
+ left: 4px;
+ width: 37px;
+ height: 37px;
+ border-radius: 5px;
}
.minicolors-theme-bootstrap .minicolors-input.input-sm + .minicolors-swatch {
- width: 24px;
- height: 24px;
+ 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;
+ 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
index ca20f92..0ccf08c 100644
--- a/jquery.minicolors.js
+++ b/jquery.minicolors.js
@@ -1,1135 +1,1108 @@
-/*
- * jQuery MiniColors: A tiny color picker built on jQuery
- *
- * Copyright: Cory LaViska for A Beautiful Site, LLC: http://www.abeautifulsite.net/
- *
- * Contribute: https://github.com/claviska/jquery-minicolors
- *
- * @license: http://opensource.org/licenses/MIT
- *
- */
+//
+// 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) {
- /* jshint ignore:start */
- 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);
- }
- /* jshint ignore:end */
+ 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: []
+ }
+ };
- 'use strict';
-
- // Defaults
- $.minicolors = {
- defaults: {
- animationSpeed: 50,
- animationEasing: 'swing',
- change: null,
- changeDelay: 0,
- control: 'hue',
- dataUris: true,
- 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' ) {
- 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);
+ // 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);
- // Initialize input elements
- function init(input, settings) {
-
- var minicolors = $('<div class="minicolors" />'),
- defaults = $.minicolors.defaults,
- size,
- swatches,
- swatch,
- panel,
- 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)
- .toggleClass('minicolors-no-data-uris', settings.dataUris !== true);
-
- // Custom positioning
- if( settings.position !== undefined ) {
- $.each(settings.position.split(' '), function() {
- minicolors.addClass('minicolors-position-' + this);
- });
- }
+ // Get an RGB(A) object based on the current color/opacity
+ case 'rgbObject':
+ return rgbObject($(this), method === 'rgbaObject');
- // Input size
- if( settings.format === 'rgb' ) {
- size = settings.opacity ? '25' : '20';
- } else {
- size = settings.keywords ? '11' : '7';
- }
+ // Get an RGB(A) string based on the current color/opacity
+ case 'rgbString':
+ case 'rgbaString':
+ return rgbString($(this), method === 'rgbaString');
- // 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();
- });
+ // 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));
+ });
}
-
- // 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) {
- if (settings.swatches.length > 7) {
- settings.swatches.length = 7;
- }
- 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;
+ 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);
- // Inline controls
- if( settings.inline ) input.parent().addClass('minicolors-inline');
-
- updateFromInput(input, false);
+ // Initializes the control
+ default:
+ if(method !== 'create') data = method;
+ $(this).each(function() {
+ init($(this), data);
+ });
+ return $(this);
- 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();
-
+ });
+
+ // 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);
+ });
}
- // Shows the specified dropdown panel
- function show(input) {
-
- var minicolors = input.parent(),
- panel = minicolors.find('.minicolors-panel'),
- 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));
- });
-
+ // Input size
+ if(settings.format === 'rgb') {
+ size = settings.opacity ? '25' : '20';
+ } else {
+ size = settings.keywords ? '11' : '7';
}
- // Hides all dropdown panels
- function hide() {
-
- $('.minicolors-focus').each( function() {
-
- var minicolors = $(this),
- input = minicolors.find('.minicolors-input'),
- panel = minicolors.find('.minicolors-panel'),
- settings = input.data('minicolors-settings');
-
- panel.fadeOut(settings.hideSpeed, function() {
- if( settings.hide ) settings.hide.call(input.get(0));
- minicolors.removeClass('minicolors-focus');
- });
+ // 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;
+ }
}
- // Moves the selected picker
- function move(target, event, animate) {
-
- var input = target.parents('.minicolors').find('.minicolors-input'),
- settings = input.data('minicolors-settings'),
- picker = target.find('[class$=-picker]'),
- offsetX = target.offset().left,
- offsetY = target.offset().top,
- x = Math.round(event.pageX - offsetX),
- y = Math.round(event.pageY - offsetY),
- duration = animate ? settings.animationSpeed : 0,
- wx, wy, r, phi;
-
- // Touch support
- if( event.originalEvent.changedTouches ) {
- x = event.originalEvent.changedTouches[0].pageX - offsetX;
- y = event.originalEvent.changedTouches[0].pageY - offsetY;
- }
+ // 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));
+ });
+ }
- // 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);
- }
+ // 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');
- // 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);
- });
- }
+ 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;
}
- // 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;
+ // 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);
+ }
- return {
- x: left - container.offset().left + (picker.outerWidth() / 2),
- y: top - container.offset().top + (picker.outerHeight() / 2)
- };
+ // 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) {
- var hue, saturation, brightness, x, y, r, phi,
-
- hex = input.val(),
- opacity = input.attr('data-opacity'),
-
- // Helpful references
- minicolors = input.parent(),
- settings = input.data('minicolors-settings'),
- swatch = minicolors.find('.minicolors-input-swatch'),
-
- // Panel objects
- grid = minicolors.find('.minicolors-grid'),
- slider = minicolors.find('.minicolors-slider'),
- opacitySlider = minicolors.find('.minicolors-opacity-slider'),
-
- // Picker objects
- gridPicker = grid.find('[class$=-picker]'),
- sliderPicker = slider.find('[class$=-picker]'),
- opacityPicker = opacitySlider.find('[class$=-picker]'),
-
- // Picker positions
- gridPos = getCoords(gridPicker, grid),
- sliderPos = getCoords(sliderPicker, slider),
- 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;
+ function getCoords(picker, container) {
+ var left, top;
+ if(!picker.length || !container) return null;
+ left = picker.offset().left;
+ top = picker.offset().top;
- }
-
- // 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);
- }
+ return {
+ x: left - container.offset().left + (picker.outerWidth() / 2),
+ y: top - container.offset().top + (picker.outerHeight() / 2)
+ };
}
-
- // 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
- minicolors = input.parent(),
- settings = input.data('minicolors-settings'),
- 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 );
+ 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 value from picker
- input.val( value );
-
- // Set swatch color
- swatch.find('span').css({
- backgroundColor: value,
- opacity: opacity
+ // 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
});
- // Handle change event
- doChange(input, value, opacity);
- }
+ // 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
+ });
- // 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
- minicolors = input.parent(),
- settings = input.data('minicolors-settings'),
- swatch = minicolors.find('.minicolors-input-swatch'),
-
- // Panel objects
- grid = minicolors.find('.minicolors-grid'),
- slider = minicolors.find('.minicolors-slider'),
- opacitySlider = minicolors.find('.minicolors-opacity-slider'),
-
- // Picker objects
- gridPicker = grid.find('[class$=-picker]'),
- sliderPicker = slider.find('[class$=-picker]'),
- 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);
- }
+ // 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
+ });
- if( !hex ){
- hex = convertCase(parseInput(settings.defaultValue, true), settings.letterCase);
- }
- hsb = hex2hsb(hex);
+ // Update UI
+ grid.css('backgroundColor', hsb2hex({ h: hue, s: 100, b: 100 }));
+ break;
+ }
- // Get array of lowercase keywords
- keywords = !settings.keywords ? [] : $.map(settings.keywords.split(','), function(a) {
- return $.trim(a.toLowerCase());
- });
+ // Handle opacity
+ if(settings.opacity) {
+ opacity = parseFloat(1 - (opacityPos.y / opacitySlider.height())).toFixed(2);
+ } else {
+ opacity = 1;
+ }
- // 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;
- }
+ 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
- // Update input value
- if( !preserveInputValue ) input.val(value);
+ // Checks for input format and does the conversion
+ if(isRgb(value)) {
+ value = rgbString2hex(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);
+ value = convertCase(value, settings.letterCase);
+ }
- // Set opacity picker position
- y = keepWithin(opacitySlider.height() - (opacitySlider.height() * opacity), 0, opacitySlider.height());
- opacityPicker.css('top', y + 'px');
- }
+ // Update value from picker
+ input.val(value);
- // Set opacity to zero if input value is transparent
- if( input.val().toLowerCase() === 'transparent' ) {
- swatch.find('span').css('opacity', 0);
- }
+ // Set swatch color
+ swatch.find('span').css({
+ backgroundColor: value,
+ opacity: opacity
+ });
- // 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;
+ // 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);
- // Fire change event, but only if minicolors is fully initialized
- if( input.data('minicolors-initialized') ) {
- doChange(input, value, opacity);
- }
+ // 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;
}
- // Runs the change and changeDelay callbacks
- function doChange(input, value, opacity) {
-
- var settings = input.data('minicolors-settings'),
- lastChange = input.data('minicolors-lastChange'),
- 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 (i !== -1) {
- input.parent().find('.minicolors-swatches .minicolors-swatch').eq(i).addClass('selected');
- }
- }
+ // Update input value
+ if(!preserveInputValue) input.val(value);
- // 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');
- }
+ // 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');
}
- // Generates an RGB(A) object based on the input's value
- function rgbObject(input) {
- var hex = parseHex($(input).val(), true),
- rgb = hex2rgb(hex),
- opacity = $(input).attr('data-opacity');
- if( !rgb ) return null;
- if( opacity !== undefined ) $.extend(rgb, { a: parseFloat(opacity) });
- return rgb;
+ // Set opacity to zero if input value is transparent
+ if(input.val().toLowerCase() === 'transparent') {
+ swatch.find('span').css('opacity', 0);
}
- // Generates an RGB(A) string based on the input's value
- function rgbString(input, alpha) {
- var hex = parseHex($(input).val(), true),
- rgb = hex2rgb(hex),
- opacity = $(input).attr('data-opacity');
- 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 + ')';
- }
+ // 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;
}
- // Converts to the letter case specified in settings
- function convertCase(string, letterCase) {
- return letterCase === 'uppercase' ? string.toUpperCase() : string.toLowerCase();
+ // Fire change event, but only if minicolors is fully initialized
+ if(input.data('minicolors-initialized')) {
+ doChange(input, value, opacity);
}
-
- // 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];
+ }
+
+ // 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);
}
- return '#' + string;
- }
-
- // Parses a string and returns a valid RGB(A) string when possible
- function parseRgb(string, obj) {
-
- var values = string.replace(/[^\d,.]/g, ''),
- 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);
+ else {
+ obj = parseRgb(value, true);
}
-
- // Return RGBA object
- if( obj ) {
- return {
- r: rgba[0],
- g: rgba[1],
- b: rgba[2],
- a: rgba[3] ? rgba[3] : null
- };
+ 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;
+ }
}
- // 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] + ')';
+ input.parent().find('.minicolors-swatches .minicolors-swatch').removeClass('selected');
+ if(sel !== -1) {
+ input.parent().find('.minicolors-swatches .minicolors-swatch').eq(i).addClass('selected');
}
-
- }
-
- // 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);
+ }
+
+ // 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 {
- return parseHex(string, expand);
+ // Call immediately
+ settings.change.call(input.get(0), value, opacity);
}
+ }
+ input.trigger('change').trigger('input');
}
-
- // Keeps value within min and max
- function keepWithin(value, min, max) {
- if( value < min ) value = min;
- if( value > max ) value = max;
- return value;
+ }
+
+ // 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);
}
-
- // 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;
+ 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);
}
-
- // 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';
+ 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);
}
- // 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 RGBA object
+ if( obj ) {
+ if (rgba[3]) {
return {
- r: Math.round(rgb.r),
- g: Math.round(rgb.g),
- b: Math.round(rgb.b)
+ r: rgba[0],
+ g: rgba[1],
+ b: rgba[2],
+ a: rgba[3]
};
+ } else {
+ return {
+ r: rgba[0],
+ g: rgba[1],
+ b: rgba[2]
+ };
+ }
}
- // 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) : '';
+ // 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] + ')';
}
- // 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));
+ // 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);
}
-
- // 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;
+ }
+
+ // 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; }
}
-
- // 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;
+ 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;
}
-
- // Converts a hex string to an RGB object
- function hex2rgb(hex) {
- hex = parseInt(((hex.indexOf('#') > -1) ? hex.substring(1) : hex), 16);
- return {
- /* jshint ignore:start */
- r: hex >> 16,
- g: (hex & 0x00FF00) >> 8,
- b: (hex & 0x0000FF)
- /* jshint ignore:end */
- };
+ 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)
- // 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();
- $(document).data('minicolors-target', target);
- move(target, event, true);
- })
- // Move pickers
- .on('mousemove.minicolors touchmove.minicolors', function(event) {
- var target = $(document).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),
- settings = input.data('minicolors-settings'),
- keywords,
- hex,
- rgba,
- swatchOpacity,
- 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);
- });
+ // 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.min.js b/jquery.minicolors.min.js
index 5e5d7c9..ef24e56 100644
--- a/jquery.minicolors.min.js
+++ b/jquery.minicolors.min.js
@@ -1,11 +1,8 @@
-/*
- * jQuery MiniColors: A tiny color picker built on jQuery
- *
- * Copyright: Cory LaViska for A Beautiful Site, LLC: http://www.abeautifulsite.net/
- *
- * Contribute: https://github.com/claviska/jquery-minicolors
- *
- * @license: http://opensource.org/licenses/MIT
- *
- */
-!function(i){"function"==typeof define&&define.amd?define(["jquery"],i):"object"==typeof exports?module.exports=i(require("jquery")):i(jQuery)}(function($){"use strict";function i(i,t){var o=$('<div class="minicolors" />'),a=$.minicolors.defaults,s=i.attr("data-opacity"),n;i.data("minicolors-initialized")||(t=$.extend(!0,{},a,t),o.addClass("minicolors-theme-"+t.theme).toggleClass("minicolors-with-opacity",t.opacity).toggleClass("minicolors-no-data-uris",t.dataUris!==!0),void 0!==t.positi [...]
\ No newline at end of file
+//
+// 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(i){"function"==typeof define&&define.amd?define(["jquery"],i):"object"==typeof exports?module.exports=i(require("jquery")):i(jQuery)}(function(i){"use strict";function t(t,o){var s,a,n,e,r,l=i('<div class="minicolors" />'),h=i.minicolors.defaults;if(!t.data("minicolors-initialized")){if(o=i.extend(!0,{},h,o),l.addClass("minicolors-theme-"+o.theme).toggleClass("minicolors-with-opacity",o.opacity),void 0!==o.position&&i.each(o.position.split(" "),function(){l.addClass("minicolors [...]
\ No newline at end of file
diff --git a/package.json b/package.json
index 8d9ad17..98f4d5f 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
- "name": "jquery-minicolors",
- "version": "2.2.3",
+ "name": "@claviska/jquery-minicolors",
+ "version": "2.2.6",
"homepage": "https://github.com/claviska/jquery-minicolors",
"author": "Cory LaViska",
"description": "jQuery MiniColors Plugin",
@@ -11,7 +11,14 @@
],
"license": "MIT",
"dependencies": {
- "jquery" : ">= 1.7.x"
+ "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",
diff --git a/readme.md b/readme.md
deleted file mode 100755
index c2cffd5..0000000
--- a/readme.md
+++ /dev/null
@@ -1,9 +0,0 @@
-# jQuery MiniColors: A tiny color picker built on jQuery
-
-_Copyright Cory LaViska for A Beautiful Site, LLC: http://www.abeautifulsite.net/_
-
-_Licensed under the MIT license_
-
-## Demo & Documentation
-
-http://labs.abeautifulsite.net/jquery-minicolors/
\ No newline at end of file
diff --git a/without-bootstrap.html b/without-bootstrap.html
index 7772b82..82f9092 100644
--- a/without-bootstrap.html
+++ b/without-bootstrap.html
@@ -1,185 +1,185 @@
<!doctype html>
<html>
<head>
- <title>jQuery MiniColors</title>
- <meta charset="utf-8">
+ <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>
+ <!-- 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">
+ <!-- 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>
+ <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() {
+ <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'
- });
+ $('.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>
+ });
+ </script>
</head>
<body>
- <h1>MiniColors Demo (without Bootstrap)</h1>
- <p>
- <a href="index.html">« Back to the Bootstrap demo</a>
- </p>
+ <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>
+ <!-- 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>
+ <!-- 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>
+ <!-- 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>
+ <!-- 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="#fff|#000|#f00|#0f0|#00f|#ff0|#0ff" 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>
+ <!-- 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/jquery-minicolors.git
More information about the Pkg-javascript-commits
mailing list