├── .gitignore ├── .travis.yml ├── Gruntfile.js ├── LICENSE ├── README.md ├── bower.json ├── build └── .gitignore ├── docs ├── bootstrap.css ├── docs.css ├── docs.js ├── jquery-1.9.1.js ├── jquery-2.1.0.js ├── jquery-3.5.1.js ├── prettify.js └── toc.js ├── example ├── example.js ├── index.html └── testcase.html ├── i18n ├── jquery.spectrum-ar.js ├── jquery.spectrum-ca.js ├── jquery.spectrum-cs.js ├── jquery.spectrum-de.js ├── jquery.spectrum-dk.js ├── jquery.spectrum-es.js ├── jquery.spectrum-fa.js ├── jquery.spectrum-fi.js ├── jquery.spectrum-fr.js ├── jquery.spectrum-gr.js ├── jquery.spectrum-he.js ├── jquery.spectrum-hr.js ├── jquery.spectrum-id.js ├── jquery.spectrum-it.js ├── jquery.spectrum-ja.js ├── jquery.spectrum-ko.js ├── jquery.spectrum-lt.js ├── jquery.spectrum-nl.js ├── jquery.spectrum-pl.js ├── jquery.spectrum-pt-br.js ├── jquery.spectrum-ru.js ├── jquery.spectrum-sv.js ├── jquery.spectrum-tr.js ├── jquery.spectrum-zh-cn.js └── jquery.spectrum-zh-tw.js ├── index.html ├── package.json ├── spectrum.css ├── spectrum.js ├── test ├── index.html ├── jquery.js ├── loaders.html ├── loaders.js ├── qunit.css ├── qunit.js ├── require.js └── tests.js └── themes ├── index.html └── sp-dark.css /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - 10 4 | before_script: 5 | - npm install -g grunt-cli 6 | script: 7 | - grunt travis --verbose -------------------------------------------------------------------------------- /Gruntfile.js: -------------------------------------------------------------------------------- 1 | 2 | module.exports = function(grunt) { 3 | 4 | grunt.initConfig({ 5 | pkg: grunt.file.readJSON('package.json'), 6 | 7 | qunit: { 8 | all: { 9 | options: { 10 | urls: ['test/index.html', 'test/loaders.html'], 11 | 12 | }, 13 | 14 | } 15 | }, 16 | 17 | jshint: { 18 | options: { 19 | sub: true, 20 | strict: true, 21 | newcap: false, 22 | globals: { 23 | jQuery: true 24 | } 25 | }, 26 | 27 | with_overrides: { 28 | options: { 29 | strict: false 30 | }, 31 | files: { 32 | src: ['i18n/*.js', 'test/tests.js'] 33 | } 34 | }, 35 | 36 | all: ['spectrum.js'] 37 | }, 38 | 39 | 40 | uglify: { 41 | options: { 42 | }, 43 | dist: { 44 | files: { 45 | 'build/spectrum-min.js': ['spectrum.js'] 46 | } 47 | } 48 | } 49 | 50 | }); 51 | 52 | 53 | grunt.loadNpmTasks('grunt-contrib-jshint'); 54 | grunt.loadNpmTasks('grunt-contrib-qunit'); 55 | grunt.loadNpmTasks('grunt-contrib-uglify'); 56 | 57 | 58 | // Testing tasks 59 | grunt.registerTask('test', ['jshint', 'qunit']); 60 | 61 | // Travis CI task. 62 | grunt.registerTask('travis', 'test'); 63 | 64 | // Default task. 65 | grunt.registerTask('default', ['test']); 66 | 67 | //Build Task. 68 | grunt.registerTask('build', ['test', 'uglify']); 69 | 70 | }; 71 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) Brian Grinstead 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining 4 | a copy of this software and associated documentation files (the 5 | "Software"), to deal in the Software without restriction, including 6 | without limitation the rights to use, copy, modify, merge, publish, 7 | distribute, sublicense, and/or sell copies of the Software, and to 8 | permit persons to whom the Software is furnished to do so, subject to 9 | the following conditions: 10 | 11 | The above copyright notice and this permission notice shall be 12 | included in all copies or substantial portions of the Software. 13 | 14 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 15 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 16 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 17 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE 18 | LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION 19 | OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION 20 | WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 21 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Spectrum 2 | ## The No Hassle Colorpicker 3 | 4 | See the demo and docs: http://bgrins.github.io/spectrum. 5 | 6 | I wanted a colorpicker that didn't require images, and that had an API that made sense to me as a developer who has worked with color in a number of applications. I had tried a number of existing plugins, but decided to try and make a smaller, simpler one. 7 | 8 | I started using canvas, then switched to CSS gradients, since it turned out to be easier to manage, and provided better cross browser support. 9 | 10 | ### Basic Usage 11 | 12 | Head over to the [docs](http://bgrins.github.io/spectrum) for more information. There is a visual demo of the different options hosted at: http://bgrins.github.io/spectrum. 13 | 14 | 15 | 16 | 17 | 18 | 19 | 24 | 25 | ### npm 26 | 27 | Spectrum is registered as package with npm. It can be installed with: 28 | 29 | npm install spectrum-colorpicker 30 | 31 | ### Bower 32 | 33 | Spectrum is registered as a package with [Bower](http://bower.io/), so it can be pulled down using: 34 | 35 | bower install spectrum 36 | 37 | ### Using spectrum with a CDN 38 | 39 | CDN provided by [cdnjs](https://cdnjs.com/libraries/spectrum) 40 | 41 | 42 | 43 | 44 | ### Continuous Integration 45 | 46 | [![Build Status](https://secure.travis-ci.org/bgrins/spectrum.png?branch=master)](http://travis-ci.org/bgrins/spectrum) 47 | 48 | Visit https://travis-ci.org/bgrins/spectrum to view the status of the automated tests. 49 | 50 | ### Building Spectrum Locally 51 | 52 | If you'd like to download and use the plugin, head over to http://bgrins.github.io/spectrum/ and click the 'Download Zip' button. 53 | 54 | If you'd like to run the development version, spectrum uses Grunt to automate the testing, linting, and building. Head over to http://gruntjs.com/getting-started for more information. First, clone the repository, then run: 55 | 56 | npm install -g grunt-cli 57 | npm install 58 | 59 | # runs jshint and the unit test suite 60 | grunt 61 | 62 | # runs jshint, the unit test suite, and builds a minified version of the file. 63 | grunt build 64 | 65 | ### Internationalization 66 | 67 | If you are able to translate the text in the UI to another language, please do! You can do so by either [filing a pull request](https://github.com/bgrins/spectrum/pulls) or [opening an issue]( https://github.com/bgrins/spectrum/issues) with the translation. The existing languages are listed at: https://github.com/bgrins/spectrum/tree/master/i18n. 68 | 69 | For an example, see the [Dutch translation](i18n/jquery.spectrum-nl.js). 70 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "spectrum", 3 | "version": "1.8.1", 4 | "main": ["./spectrum.css", "./spectrum.js"], 5 | "docs": "http://bgrins.github.com/spectrum", 6 | "homepage": "http://bgrins.github.com/spectrum", 7 | "demo": "http://jsfiddle.net/bgrins/ctkY3/", 8 | "dependencies": { 9 | "jquery": ">=1.7.2" 10 | }, 11 | "ignore": [ 12 | ".gitignore", 13 | ".travis.yml", 14 | "build/", 15 | "docs/", 16 | "example/", 17 | "Gruntfile.js", 18 | "LICENSE", 19 | "README.md", 20 | "test/" 21 | ] 22 | } 23 | -------------------------------------------------------------------------------- /build/.gitignore: -------------------------------------------------------------------------------- 1 | spectrum-min.js 2 | -------------------------------------------------------------------------------- /docs/docs.css: -------------------------------------------------------------------------------- 1 | 2 | /* Styles for the demo page only. See spectrum.css for the actual colorpicker styles */ 3 | html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } 4 | body { margin: 0; font-size: 14px; line-height: 1.5; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAG0lEQVQIW2OMqXogyYADMIIkl7QpPMcmP+gkAYLGGdeobP2EAAAAAElFTkSuQmCC); } 5 | body, button, input, select, textarea { font-family: Droid Sans, Tahoma, sans-serif; color: #222; } 6 | body p { font-family: Verdana; font-size: 12px; color: #333; line-height: 1.8; } 7 | h1 { font-family: Lucida Sans, Droid Sans, Verdana; font-size: 30px; line-height: inherit; margin: 0; padding:0; font-weight: lighter; position:fixed; top: 3px; left: 10px; } 8 | h1 a { text-decoration: none; color: #334 !important; } 9 | h1 a:hover { text-decoration: underline; color: #336 !important; } 10 | #header { background: #eee; background: #eee; height: 60px; line-height: 60px; padding: 3px 10px;} 11 | 12 | #goals { margin:0 auto; padding:0; width: 98%; } 13 | .goal { float: left; width: 29%; margin:1%; padding:1%; color: #335; min-height: 300px; background: #eee; border-radius: 10px; font-family: Verdana; } 14 | #docs .goal h4 { text-align: center; margin: .5em 0; font-weight: lighter; text-decoration: underline; font-family: Verdana; } 15 | a { color: #00e; } 16 | a:visited { color: #009; } 17 | a:hover { color: #06e; } 18 | a:focus { outline: thin dotted; } 19 | #header h2 { float:left; margin:0; padding:0; margin-left: 180px; font-size: 14px; line-height: inherit; font-weight: normal; font-family: Georgia;} 20 | #header h2 em {background: #444; color: #fff; font-style: normal; padding: 5px; border-radius: 5px; border: solid 1px #999; box-shadow: 0 0 4px #333;} 21 | #links { float:right; text-align: right; } 22 | #pick2-details { font: monospace; } 23 | #switch-current { float: left; position:relative; display:none;} 24 | /*#switch-current .spectrum-container { position: fixed; top:60px; left: 10px; }*/ 25 | #docs-content { margin-left: 190px; padding: 10px 30px; border:solid 10px #ecc; border-right:none;border-bottom:none; padding-bottom: 20px; background: #fff; background: rgba(255, 255, 255, .6); } 26 | .footer { padding-top: 50px; } 27 | .switch-current-output { display:none; margin:3px auto; width: 200px; text-align: center; } 28 | .type { padding-left: 4px; font-size: .8em; font-weight: bold;} 29 | .description, .example { 30 | padding: 10px; 31 | border: 1px solid #888; 32 | background: white; 33 | position:relative; 34 | padding-top: 15px; 35 | } 36 | #docs { } 37 | #docs ul { margin-left: 25px; padding-left:10px; } 38 | #docs li { list-style: square; margin-left: 6px; } 39 | #docs p { margin: 0; padding:0; padding-top:4px; } 40 | #docs pre { position:relative; } 41 | #docs h2 { margin: 30px -25px; border-bottom: solid 1px; } 42 | #docs h3 { padding: 10px 15px; margin: 10px auto; margin-top: 40px; border: solid 3px #aaa; 43 | box-shadow: 0 3px 5px #333; } 44 | #docs h3.point { box-shadow: none; margin-left: -30px; margin-right: -30px; border: solid 1px #999; border-left: none; border-right:none;} 45 | #code-heading { font-size: 24px; text-align: center; margin: 6px 0; } 46 | #docs-content { color: #222; } 47 | #docs-content.dark { color: #ddd; } 48 | code { font-weight: bold; color: #933; } 49 | .note { float:right; background: #eee; padding: 4px; font-size: 11px; border: solid 1px #bbb; border-radius: 4px;} 50 | .option-content .note { float:none; position:absolute; right: 0; top: -40px;} 51 | .option-content { position:relative; background: #ededed; 52 | border: solid 2px #aaa; border-top: none; 53 | padding: 12px; width: 95%; margin: 0 auto; 54 | margin-top: -10px; padding-top: 20px; 55 | box-shadow: 0 0 10px #ccc; border-radius: 0 0 5px 5px; 56 | } 57 | .em-label { padding:4px; margin-left: 10px; display:inline-block; vertical-align: top; margin-top: 3px; } 58 | .hide { display:none; } 59 | .clearfix:before, .clearfix:after { content: ""; display: table; } 60 | .clearfix:after { clear: both; } 61 | .clearfix { *zoom: 1; } 62 | 63 | input[type="text"] { height: auto; } 64 | .label { 65 | padding: 1px 4px 2px; 66 | font-size: 10.998px; 67 | font-weight: bold; 68 | line-height: 13px; 69 | color: #ffffff; 70 | vertical-align: middle; 71 | white-space: nowrap; 72 | text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); 73 | background-color: #999999; 74 | -webkit-border-radius: 3px; 75 | -moz-border-radius: 3px; 76 | border-radius: 3px; 77 | } 78 | .label:hover { 79 | color: #ffffff; 80 | text-decoration: none; 81 | } 82 | .label-important { 83 | background-color: #b94a48; 84 | } 85 | .label-important:hover { 86 | background-color: #953b39; 87 | } 88 | .label-result { 89 | background-color: #3a87ad; 90 | margin-right: 5px; 91 | } 92 | .example .label-result { 93 | position:absolute; 94 | top: -10px; 95 | left: 5px; 96 | } 97 | .label-warning { 98 | background-color: #f89406; 99 | } 100 | .label-warning:hover { 101 | background-color: #c67605; 102 | } 103 | .label-success { 104 | background-color: #468847; 105 | } 106 | .label-success:hover { 107 | background-color: #356635; 108 | } 109 | .label-info { 110 | background-color: #3a87ad; 111 | } 112 | .label-info:hover { 113 | background-color: #2d6987; 114 | } 115 | .label-inverse { 116 | background-color: #333333; 117 | } 118 | .label-inverse:hover { 119 | background-color: #1a1a1a; 120 | } 121 | .alert { 122 | padding: 8px 35px 8px 14px; 123 | margin: 10px 0; 124 | text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); 125 | background-color: #fcf8e3; 126 | border: 1px solid #fbeed5; 127 | -webkit-border-radius: 4px; 128 | -moz-border-radius: 4px; 129 | border-radius: 4px; 130 | color: #c09853; 131 | } 132 | .alert-heading { 133 | color: inherit; 134 | } 135 | .alert .close { 136 | position: relative; 137 | top: -2px; 138 | right: -21px; 139 | line-height: 18px; 140 | } 141 | .alert-success { 142 | background-color: #dff0d8; 143 | border-color: #d6e9c6; 144 | color: #468847; 145 | } 146 | .alert-danger, 147 | .alert-error { 148 | background-color: #f2dede; 149 | border-color: #eed3d7; 150 | color: #b94a48; 151 | } 152 | .alert-info { 153 | background-color: #d9edf7; 154 | border-color: #bce8f1; 155 | color: #3a87ad; 156 | } 157 | .alert-block { 158 | padding-top: 14px; 159 | padding-bottom: 14px; 160 | } 161 | .alert-block > p, 162 | .alert-block > ul { 163 | margin-bottom: 0; 164 | } 165 | .alert-block p + p { 166 | margin-top: 5px; 167 | } 168 | .btn-primary:visited { 169 | color: #ffffff; 170 | } 171 | 172 | /* prettify */ 173 | .pln{color:#000}@media screen{.str{color:#080}.kwd{color:#008}.com{color:#800}.typ{color:#606}.lit{color:#066}.pun,.opn,.clo{color:#660}.tag{color:#008}.atn{color:#606}.atv{color:#080}.dec,.var{color:#606}.fun{color:red}}@media print,projection{.str{color:#060}.kwd{color:#006;font-weight:bold}.com{color:#600;font-style:italic}.typ{color:#404;font-weight:bold}.lit{color:#044}.pun,.opn,.clo{color:#440}.tag{color:#006;font-weight:bold}.atn{color:#404}.atv{color:#060}}pre.prettyprint{padding:2px;border:1px solid #888; background: white;}ol.linenums{margin-top:0;margin-bottom:0}li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:none}li.L1,li.L3,li.L5,li.L7,li.L9{background:#eee} 174 | 175 | /* desert scheme ported from vim to google prettify */ 176 | .dark pre { display: block; background-color: #333; border:1px solid #888; padding:2px; } 177 | .dark pre .nocode { background-color: none; color: #000 } 178 | .dark pre .str { color: #ffa0a0 } /* string - pink */ 179 | .dark pre .kwd { color: #f0e68c; font-weight: bold } 180 | .dark pre .com { color: #87ceeb } /* comment - skyblue */ 181 | .dark pre .typ { color: #98fb98 } /* type - lightgreen */ 182 | .dark pre .lit { color: #cd5c5c } /* literal - darkred */ 183 | .dark pre .pun { color: #fff } /* punctuation */ 184 | .dark pre .pln { color: #fff } /* plaintext */ 185 | .dark pre .tag { color: #f0e68c; font-weight: bold } /* html/xml tag - lightyellow */ 186 | .dark pre .atn { color: #bdb76b; font-weight: bold } /* attribute name - khaki */ 187 | .dark pre .atv { color: #ffa0a0 } /* attribute value - pink */ 188 | .dark pre .dec { color: #98fb98 } /* decimal - lightgreen */ 189 | 190 | @media print { 191 | .dark pre { background-color: none } 192 | .dark pre .str, .dark code .str { color: #060 } 193 | .dark pre .kwd, .dark code .kwd { color: #006; font-weight: bold } 194 | .dark pre .com, .dark code .com { color: #600; font-style: italic } 195 | .dark pre .typ, .dark code .typ { color: #404; font-weight: bold } 196 | .dark pre .lit, .dark code .lit { color: #044 } 197 | .dark pre .pun, .dark code .pun { color: #440 } 198 | .dark pre .pln, .dark code .pln { color: #000 } 199 | .dark pre .tag, .dark code .tag { color: #006; font-weight: bold } 200 | .dark pre .atn, .dark code .atn { color: #404 } 201 | .dark pre .atv, .dark code .atv { color: #060 } 202 | } 203 | 204 | /* http://projects.jga.me/toc/ */ 205 | #toc { 206 | top: 76px; 207 | bottom: 0; 208 | left: 0px; 209 | position: fixed; 210 | font-size: 11px; 211 | width: 180px; 212 | color: #222; 213 | overflow-y: auto; 214 | font-family: Georgia; 215 | } 216 | #toc-slider { 217 | position:fixed; 218 | top:0; 219 | bottom:0; 220 | left: 0; 221 | width: 170px; 222 | background: #eee; 223 | line-height: 60px; 224 | padding-top: 3px; 225 | padding-left: 10px; 226 | border-right: solid 10px #cce; 227 | z-index: -1; 228 | } 229 | 230 | @media (max-device-width: 480px) { 231 | 232 | #toc, #toc-slider, h1 { 233 | position:absolute; 234 | } 235 | } 236 | #toc ul { 237 | margin: 0; 238 | padding: 0; 239 | list-style: none; 240 | } 241 | 242 | #toc li { 243 | padding: 5px 10px; 244 | } 245 | 246 | #toc a { 247 | color: #225; 248 | text-decoration: none; 249 | display: block; 250 | } 251 | 252 | #toc .toc-h2 { 253 | padding-left: 10px; 254 | } 255 | 256 | #toc .toc-h3 { 257 | padding-left: 25px; 258 | } 259 | 260 | #toc .toc-active { 261 | background: #CCE; 262 | } 263 | 264 | 265 | 266 | 267 | .full-spectrum { 268 | margin: 0 auto; 269 | } 270 | .full-spectrum .sp-palette { 271 | 272 | max-width: 200px; 273 | } -------------------------------------------------------------------------------- /docs/docs.js: -------------------------------------------------------------------------------- 1 | 2 | function updateBorders(color) { 3 | var hexColor = "transparent"; 4 | if(color) { 5 | hexColor = color.toHexString(); 6 | } 7 | $("#docs-content").css("border-color", hexColor); 8 | } 9 | 10 | $(function() { 11 | 12 | $("#full").spectrum({ 13 | allowEmpty:true, 14 | color: "#ECC", 15 | showInput: true, 16 | containerClassName: "full-spectrum", 17 | showInitial: true, 18 | showPalette: true, 19 | showSelectionPalette: true, 20 | showAlpha: true, 21 | maxPaletteSize: 10, 22 | preferredFormat: "hex", 23 | localStorageKey: "spectrum.demo", 24 | move: function (color) { 25 | updateBorders(color); 26 | }, 27 | show: function () { 28 | 29 | }, 30 | beforeShow: function () { 31 | 32 | }, 33 | hide: function (color) { 34 | updateBorders(color); 35 | }, 36 | 37 | palette: [ 38 | ["rgb(0, 0, 0)", "rgb(67, 67, 67)", "rgb(102, 102, 102)", /*"rgb(153, 153, 153)","rgb(183, 183, 183)",*/ 39 | "rgb(204, 204, 204)", "rgb(217, 217, 217)", /*"rgb(239, 239, 239)", "rgb(243, 243, 243)",*/ "rgb(255, 255, 255)"], 40 | ["rgb(152, 0, 0)", "rgb(255, 0, 0)", "rgb(255, 153, 0)", "rgb(255, 255, 0)", "rgb(0, 255, 0)", 41 | "rgb(0, 255, 255)", "rgb(74, 134, 232)", "rgb(0, 0, 255)", "rgb(153, 0, 255)", "rgb(255, 0, 255)"], 42 | ["rgb(230, 184, 175)", "rgb(244, 204, 204)", "rgb(252, 229, 205)", "rgb(255, 242, 204)", "rgb(217, 234, 211)", 43 | "rgb(208, 224, 227)", "rgb(201, 218, 248)", "rgb(207, 226, 243)", "rgb(217, 210, 233)", "rgb(234, 209, 220)", 44 | "rgb(221, 126, 107)", "rgb(234, 153, 153)", "rgb(249, 203, 156)", "rgb(255, 229, 153)", "rgb(182, 215, 168)", 45 | "rgb(162, 196, 201)", "rgb(164, 194, 244)", "rgb(159, 197, 232)", "rgb(180, 167, 214)", "rgb(213, 166, 189)", 46 | "rgb(204, 65, 37)", "rgb(224, 102, 102)", "rgb(246, 178, 107)", "rgb(255, 217, 102)", "rgb(147, 196, 125)", 47 | "rgb(118, 165, 175)", "rgb(109, 158, 235)", "rgb(111, 168, 220)", "rgb(142, 124, 195)", "rgb(194, 123, 160)", 48 | "rgb(166, 28, 0)", "rgb(204, 0, 0)", "rgb(230, 145, 56)", "rgb(241, 194, 50)", "rgb(106, 168, 79)", 49 | "rgb(69, 129, 142)", "rgb(60, 120, 216)", "rgb(61, 133, 198)", "rgb(103, 78, 167)", "rgb(166, 77, 121)", 50 | /*"rgb(133, 32, 12)", "rgb(153, 0, 0)", "rgb(180, 95, 6)", "rgb(191, 144, 0)", "rgb(56, 118, 29)", 51 | "rgb(19, 79, 92)", "rgb(17, 85, 204)", "rgb(11, 83, 148)", "rgb(53, 28, 117)", "rgb(116, 27, 71)",*/ 52 | "rgb(91, 15, 0)", "rgb(102, 0, 0)", "rgb(120, 63, 4)", "rgb(127, 96, 0)", "rgb(39, 78, 19)", 53 | "rgb(12, 52, 61)", "rgb(28, 69, 135)", "rgb(7, 55, 99)", "rgb(32, 18, 77)", "rgb(76, 17, 48)"] 54 | ] 55 | }); 56 | 57 | $("#hideButtons").spectrum({ 58 | showButtons: false, 59 | change: updateBorders 60 | }); 61 | 62 | 63 | var isDisabled = true; 64 | $("#toggle-disabled").click(function() { 65 | if (isDisabled) { 66 | $("#disabled").spectrum("enable"); 67 | } 68 | else { 69 | $("#disabled").spectrum("disable"); 70 | } 71 | isDisabled = !isDisabled; 72 | return false; 73 | }); 74 | 75 | $("input:disabled").spectrum({ 76 | 77 | }); 78 | $("#disabled").spectrum({ 79 | disabled: true 80 | }); 81 | 82 | $("#pick1").spectrum({ 83 | flat: true, 84 | change: function(color) { 85 | var hsv = color.toHsv(); 86 | var rgb = color.toRgbString(); 87 | var hex = color.toHexString(); 88 | //console.log("callback",color.toHslString(), color.toHsl().h, color.toHsl().s, color.toHsl().l) 89 | $("#docs-content").css({ 90 | 'background-color': color.toRgbString() 91 | }).toggleClass("dark", hsv.v < .5); 92 | $("#switch-current-rgb").text(rgb); 93 | $("#switch-current-hex").text(hex); 94 | }, 95 | show: function() { 96 | 97 | }, 98 | hide: function() { 99 | 100 | }, 101 | showInput: true, 102 | showPalette: true, 103 | palette: ['white', '#306', '#c5c88d', '#ac5c5c', '#344660'] 104 | }); 105 | 106 | $("#collapsed").spectrum({ 107 | color: "#dd3333", 108 | change: updateBorders, 109 | show: function() { 110 | 111 | }, 112 | hide: function() { 113 | 114 | } 115 | }); 116 | 117 | $("#flat").spectrum({ 118 | flat: true, 119 | showInput: true, 120 | move: updateBorders 121 | }); 122 | 123 | $("#flatClearable").spectrum({ 124 | flat: true, 125 | move: updateBorders, 126 | change: updateBorders, 127 | allowEmpty:true, 128 | showInput: true 129 | }); 130 | 131 | $("#showInput").spectrum({ 132 | color: "#dd33dd", 133 | showInput: true, 134 | change: updateBorders, 135 | show: function() { 136 | 137 | }, 138 | hide: function() { 139 | 140 | } 141 | }); 142 | 143 | $("#showAlpha").spectrum({ 144 | color: "rgba(255, 128, 0, .5)", 145 | showAlpha: true, 146 | change: updateBorders 147 | }); 148 | 149 | $("#showAlphaWithInput").spectrum({ 150 | color: "rgba(255, 128, 0, .5)", 151 | showAlpha: true, 152 | showInput: true, 153 | showPalette: true, 154 | palette: [ 155 | ["rgba(255, 128, 0, .9)", "rgba(255, 128, 0, .5)"], 156 | ["red", "green", "blue"], 157 | ["hsla(25, 50, 75, .5)", "rgba(100, .5, .5, .8)"] 158 | ], 159 | change: updateBorders 160 | }); 161 | 162 | $("#showAlphaWithInputAndEmpty").spectrum({ 163 | color: "rgba(255, 128, 0, .5)", 164 | allowEmpty:true, 165 | showAlpha: true, 166 | showInput: true, 167 | showPalette: true, 168 | palette: [ 169 | ["rgba(255, 128, 0, .9)", "rgba(255, 128, 0, .5)"], 170 | ["red", "green", "blue"], 171 | ["hsla(25, 50, 75, .5)", "rgba(100, .5, .5, .8)"] 172 | ], 173 | change: updateBorders 174 | }); 175 | 176 | $("#showInputWithClear").spectrum({ 177 | allowEmpty:true, 178 | color: "", 179 | showInput: true, 180 | change: updateBorders, 181 | show: function() { 182 | 183 | }, 184 | hide: function() { 185 | 186 | } 187 | }); 188 | 189 | $("#openWithLink").spectrum({ 190 | color: "#dd3333", 191 | change: updateBorders, 192 | show: function() { 193 | 194 | }, 195 | hide: function() { 196 | 197 | } 198 | }); 199 | 200 | $("#className").spectrum({ 201 | className: 'awesome' 202 | }); 203 | 204 | $("#replacerClassName").spectrum({ 205 | replacerClassName: 'awesome' 206 | }); 207 | 208 | $("#containerClassName").spectrum({ 209 | containerClassName: 'awesome' 210 | }); 211 | 212 | $("#showPalette").spectrum({ 213 | showPalette: true, 214 | palette: [ 215 | ['black', 'white', 'blanchedalmond'], 216 | ['rgb(255, 128, 0);', 'hsv 100 70 50', 'lightyellow'] 217 | ], 218 | hide: function(c) { 219 | var label = $("[data-label-for=" + this.id + "]"); 220 | label.text("Hidden: " + c.toHexString()); 221 | }, 222 | change: function(c) { 223 | var label = $("[data-label-for=" + this.id + "]"); 224 | label.text("Change called: " + c.toHexString()); 225 | }, 226 | move: function(c) { 227 | var label = $("[data-label-for=" + this.id + "]"); 228 | label.text("Move called: " + c.toHexString()); 229 | } 230 | }); 231 | 232 | var textPalette = ["rgb(255, 255, 255)", "rgb(204, 204, 204)", "rgb(192, 192, 192)", "rgb(153, 153, 153)", "rgb(102, 102, 102)", "rgb(51, 51, 51)", "rgb(0, 0, 0)", "rgb(255, 204, 204)", "rgb(255, 102, 102)", "rgb(255, 0, 0)", "rgb(204, 0, 0)", "rgb(153, 0, 0)", "rgb(102, 0, 0)", "rgb(51, 0, 0)", "rgb(255, 204, 153)", "rgb(255, 153, 102)", "rgb(255, 153, 0)", "rgb(255, 102, 0)", "rgb(204, 102, 0)", "rgb(153, 51, 0)", "rgb(102, 51, 0)", "rgb(255, 255, 153)", "rgb(255, 255, 102)", "rgb(255, 204, 102)", "rgb(255, 204, 51)", "rgb(204, 153, 51)", "rgb(153, 102, 51)", "rgb(102, 51, 51)", "rgb(255, 255, 204)", "rgb(255, 255, 51)", "rgb(255, 255, 0)", "rgb(255, 204, 0)", "rgb(153, 153, 0)", "rgb(102, 102, 0)", "rgb(51, 51, 0)", "rgb(153, 255, 153)", "rgb(102, 255, 153)", "rgb(51, 255, 51)", "rgb(51, 204, 0)", "rgb(0, 153, 0)", "rgb(0, 102, 0)", "rgb(0, 51, 0)", "rgb(153, 255, 255)", "rgb(51, 255, 255)", "rgb(102, 204, 204)", "rgb(0, 204, 204)", "rgb(51, 153, 153)", "rgb(51, 102, 102)", "rgb(0, 51, 51)", "rgb(204, 255, 255)", "rgb(102, 255, 255)", "rgb(51, 204, 255)", "rgb(51, 102, 255)", "rgb(51, 51, 255)", "rgb(0, 0, 153)", "rgb(0, 0, 102)", "rgb(204, 204, 255)", "rgb(153, 153, 255)", "rgb(102, 102, 204)", "rgb(102, 51, 255)", "rgb(102, 0, 204)", "rgb(51, 51, 153)", "rgb(51, 0, 153)", "rgb(255, 204, 255)", "rgb(255, 153, 255)", "rgb(204, 102, 204)", "rgb(204, 51, 204)", "rgb(153, 51, 153)", "rgb(102, 51, 102)", "rgb(51, 0, 51)"]; 233 | 234 | $("#showPaletteOnly").spectrum({ 235 | color: 'blanchedalmond', 236 | showPaletteOnly: true, 237 | showPalette:true, 238 | palette: [ 239 | ['black', 'white', 'blanchedalmond', 240 | 'rgb(255, 128, 0);', 'hsv 100 70 50'], 241 | ['red', 'yellow', 'green', 'blue', 'violet'] 242 | ], 243 | change: function(c) { 244 | var label = $("[data-label-for=" + this.id + "]"); 245 | label.text("Change called: " + c.toHexString()); 246 | }, 247 | move: function(c) { 248 | var label = $("[data-label-for=" + this.id + "]"); 249 | label.text("Move called: " + c.toHexString()); 250 | } 251 | }); 252 | 253 | $("#hideAfterPaletteSelect").spectrum({ 254 | showPaletteOnly: true, 255 | showPalette:true, 256 | hideAfterPaletteSelect:true, 257 | color: 'blanchedalmond', 258 | palette: [ 259 | ['black', 'white', 'blanchedalmond', 260 | 'rgb(255, 128, 0);', 'hsv 100 70 50'], 261 | ['red', 'yellow', 'green', 'blue', 'violet'] 262 | ], 263 | change: function(c) { 264 | var label = $("[data-label-for=" + this.id + "]"); 265 | label.text("Change called: " + c.toHexString()); 266 | }, 267 | move: function(c) { 268 | var label = $("[data-label-for=" + this.id + "]"); 269 | label.text("Move called: " + c.toHexString()); 270 | } 271 | }); 272 | 273 | $("#togglePaletteOnly").spectrum({ 274 | color: 'blanchedalmond', 275 | showPaletteOnly: true, 276 | togglePaletteOnly: true, 277 | showPalette:true, 278 | palette: [ 279 | ["#000","#444","#666","#999","#ccc","#eee","#f3f3f3","#fff"], 280 | ["#f00","#f90","#ff0","#0f0","#0ff","#00f","#90f","#f0f"], 281 | ["#f4cccc","#fce5cd","#fff2cc","#d9ead3","#d0e0e3","#cfe2f3","#d9d2e9","#ead1dc"], 282 | ["#ea9999","#f9cb9c","#ffe599","#b6d7a8","#a2c4c9","#9fc5e8","#b4a7d6","#d5a6bd"], 283 | ["#e06666","#f6b26b","#ffd966","#93c47d","#76a5af","#6fa8dc","#8e7cc3","#c27ba0"], 284 | ["#c00","#e69138","#f1c232","#6aa84f","#45818e","#3d85c6","#674ea7","#a64d79"], 285 | ["#900","#b45f06","#bf9000","#38761d","#134f5c","#0b5394","#351c75","#741b47"], 286 | ["#600","#783f04","#7f6000","#274e13","#0c343d","#073763","#20124d","#4c1130"] 287 | ] 288 | }); 289 | 290 | $("#clickoutFiresChange").spectrum({ 291 | change: updateBorders 292 | }); 293 | 294 | $("#clickoutDoesntFireChange").spectrum({ 295 | change: updateBorders, 296 | clickoutFiresChange: false 297 | }); 298 | 299 | $("#showInitial").spectrum({ 300 | showInitial: true 301 | }); 302 | 303 | $("#showInputAndInitial").spectrum({ 304 | showInitial: true, 305 | showInput: true 306 | }); 307 | 308 | $("#showInputInitialClear").spectrum({ 309 | allowEmpty:true, 310 | showInitial: true, 311 | showInput: true 312 | }); 313 | 314 | $("#changeOnMove").spectrum({ 315 | move: function(c) { 316 | var label = $("[data-label-for=" + this.id + "]"); 317 | label.text("Move called: " + c.toHexString()); 318 | } 319 | }); 320 | $("#changeOnMoveNo").spectrum({ 321 | showInput: true, 322 | change: function(c) { 323 | var label = $("[data-label-for=" + this.id + "]"); 324 | label.text("Change called: " + c.toHexString()); 325 | } 326 | }); 327 | 328 | function prettyTime() { 329 | var date = new Date(); 330 | 331 | return date.toLocaleTimeString(); 332 | } 333 | 334 | $("#eventshow").spectrum({ 335 | show: function(c) { 336 | var label = $("#eventshowLabel"); 337 | label.text("show called at " + prettyTime() + " (color is " + c.toHexString() + ")"); 338 | } 339 | }); 340 | 341 | $("#eventhide").spectrum({ 342 | hide: function(c) { 343 | var label = $("#eventhideLabel"); 344 | label.text("hide called at " + prettyTime() + " (color is " + c.toHexString() + ")"); 345 | } 346 | }); 347 | 348 | $("#eventdragstart").spectrum({ 349 | showAlpha: true 350 | }).on("dragstart.spectrum", function(e, c) { 351 | var label = $("#eventdragstartLabel"); 352 | label.text("dragstart called at " + prettyTime() + " (color is " + c.toHexString() + ")"); 353 | }); 354 | 355 | $("#eventdragstop").spectrum({ 356 | showAlpha: true 357 | }).on("dragstop.spectrum", function(e, c) { 358 | var label = $("#eventdragstopLabel"); 359 | label.text("dragstop called at " + prettyTime() + " (color is " + c.toHexString() + ")"); 360 | }); 361 | 362 | 363 | $(".basic").spectrum({ change: updateBorders }); 364 | $(".override").spectrum({ 365 | color: "yellow", 366 | change: updateBorders 367 | }); 368 | 369 | $(".startEmpty").spectrum({ 370 | allowEmpty:true, 371 | change: updateBorders}); 372 | 373 | $("#beforeShow").spectrum({ 374 | beforeShow: function() { 375 | return false; 376 | } 377 | }); 378 | 379 | 380 | $("#custom").spectrum({ 381 | color: "#f00" 382 | }); 383 | 384 | $("#buttonText").spectrum({ 385 | allowEmpty:true, 386 | chooseText: "Alright", 387 | cancelText: "No way" 388 | }); 389 | 390 | 391 | $("#showSelectionPalette").spectrum({ 392 | showPalette: true, 393 | showSelectionPalette: true, // true by default 394 | palette: [ ] 395 | }); 396 | $("#showSelectionPaletteStorage").spectrum({ 397 | showPalette: true, 398 | localStorageKey: "spectrum.homepage", // Any picker with the same string will share selection 399 | showSelectionPalette: true, 400 | palette: [ ] 401 | }); 402 | $("#showSelectionPaletteStorage2").spectrum({ 403 | showPalette: true, 404 | localStorageKey: "spectrum.homepage", // Any picker with the same string will share selection 405 | showSelectionPalette: true, 406 | palette: [ ] 407 | }); 408 | 409 | $("#selectionPalette").spectrum({ 410 | showPalette: true, 411 | palette: [ ], 412 | showSelectionPalette: true, // true by default 413 | selectionPalette: ["red", "green", "blue"] 414 | }); 415 | 416 | $("#maxSelectionSize").spectrum({ 417 | showPalette: true, 418 | palette: [ ], 419 | showSelectionPalette: true, // true by default 420 | selectionPalette: ["red", "green", "blue"], 421 | maxSelectionSize: 2 422 | }); 423 | 424 | $("#preferredHex").spectrum({ 425 | preferredFormat: "hex", 426 | showInput: true, 427 | showPalette: true, 428 | palette: [["red", "rgba(0, 255, 0, .5)", "rgb(0, 0, 255)"]] 429 | }); 430 | $("#preferredHex3").spectrum({ 431 | preferredFormat: "hex3", 432 | showInput: true, 433 | showPalette: true, 434 | palette: [["red", "rgba(0, 255, 0, .5)", "rgb(0, 0, 255)"]] 435 | }); 436 | $("#preferredHsl").spectrum({ 437 | preferredFormat: "hsl", 438 | showInput: true, 439 | showPalette: true, 440 | palette: [["red", "rgba(0, 255, 0, .5)", "rgb(0, 0, 255)"]] 441 | }); 442 | $("#preferredRgb").spectrum({ 443 | preferredFormat: "rgb", 444 | showInput: true, 445 | showPalette: true, 446 | palette: [["red", "rgba(0, 255, 0, .5)", "rgb(0, 0, 255)"]] 447 | }); 448 | $("#preferredName").spectrum({ 449 | preferredFormat: "name", 450 | showInput: true, 451 | showPalette: true, 452 | palette: [["red", "rgba(0, 255, 0, .5)", "rgb(0, 0, 255)"]] 453 | }); 454 | $("#preferredNone").spectrum({ 455 | showInput: true, 456 | showPalette: true, 457 | palette: [["red", "rgba(0, 255, 0, .5)", "rgb(0, 0, 255)"]] 458 | }); 459 | 460 | $("#triggerSet").spectrum({ 461 | change: updateBorders 462 | }); 463 | 464 | // Show the original input to demonstrate the value changing when calling `set` 465 | $("#triggerSet").show(); 466 | 467 | $("#btnEnterAColor").click(function() { 468 | $("#triggerSet").spectrum("set", $("#enterAColor").val()); 469 | }); 470 | 471 | $("#toggle").spectrum(); 472 | $("#btn-toggle").click(function() { 473 | $("#toggle").spectrum("toggle"); 474 | return false; 475 | }); 476 | 477 | 478 | $('#toc').toc({ 479 | 'selectors': 'h2,h3', //elements to use as headings 480 | 'container': '#docs', //element to find all selectors in 481 | 'smoothScrolling': true, //enable or disable smooth scrolling on click 482 | 'prefix': 'toc', //prefix for anchor tags and class names 483 | 'highlightOnScroll': true, //add class to heading that is currently in focus 484 | 'highlightOffset': 100, //offset to trigger the next headline 485 | 'anchorName': function(i, heading, prefix) { //custom function for anchor name 486 | return heading.id || prefix+i; 487 | } 488 | }); 489 | 490 | prettyPrint(); 491 | 492 | 493 | }); 494 | -------------------------------------------------------------------------------- /docs/prettify.js: -------------------------------------------------------------------------------- 1 | var q=null;window.PR_SHOULD_USE_CONTINUATION=!0; 2 | (function(){function L(a){function m(a){var f=a.charCodeAt(0);if(f!==92)return f;var b=a.charAt(1);return(f=r[b])?f:"0"<=b&&b<="7"?parseInt(a.substring(1),8):b==="u"||b==="x"?parseInt(a.substring(2),16):a.charCodeAt(1)}function e(a){if(a<32)return(a<16?"\\x0":"\\x")+a.toString(16);a=String.fromCharCode(a);if(a==="\\"||a==="-"||a==="["||a==="]")a="\\"+a;return a}function h(a){for(var f=a.substring(1,a.length-1).match(/\\u[\dA-Fa-f]{4}|\\x[\dA-Fa-f]{2}|\\[0-3][0-7]{0,2}|\\[0-7]{1,2}|\\[\S\s]|[^\\]/g),a= 3 | [],b=[],o=f[0]==="^",c=o?1:0,i=f.length;c122||(d<65||j>90||b.push([Math.max(65,j)|32,Math.min(d,90)|32]),d<97||j>122||b.push([Math.max(97,j)&-33,Math.min(d,122)&-33]))}}b.sort(function(a,f){return a[0]-f[0]||f[1]-a[1]});f=[];j=[NaN,NaN];for(c=0;ci[0]&&(i[1]+1>i[0]&&b.push("-"),b.push(e(i[1])));b.push("]");return b.join("")}function y(a){for(var f=a.source.match(/\[(?:[^\\\]]|\\[\S\s])*]|\\u[\dA-Fa-f]{4}|\\x[\dA-Fa-f]{2}|\\\d+|\\[^\dux]|\(\?[!:=]|[()^]|[^()[\\^]+/g),b=f.length,d=[],c=0,i=0;c=2&&a==="["?f[c]=h(j):a!=="\\"&&(f[c]=j.replace(/[A-Za-z]/g,function(a){a=a.charCodeAt(0);return"["+String.fromCharCode(a&-33,a|32)+"]"}));return f.join("")}for(var t=0,s=!1,l=!1,p=0,d=a.length;p=5&&"lang-"===b.substring(0,5))&&!(o&&typeof o[1]==="string"))c=!1,b="src";c||(r[f]=b)}i=d;d+=f.length;if(c){c=o[1];var j=f.indexOf(c),k=j+c.length;o[2]&&(k=f.length-o[2].length,j=k-c.length);b=b.substring(5);B(l+i,f.substring(0,j),e,p);B(l+i+j,c,C(b,c),p);B(l+i+k,f.substring(k),e,p)}else p.push(l+i,b)}a.e=p}var h={},y;(function(){for(var e=a.concat(m), 9 | l=[],p={},d=0,g=e.length;d=0;)h[n.charAt(k)]=r;r=r[1];n=""+r;p.hasOwnProperty(n)||(l.push(r),p[n]=q)}l.push(/[\S\s]/);y=L(l)})();var t=m.length;return e}function u(a){var m=[],e=[];a.tripleQuotedStrings?m.push(["str",/^(?:'''(?:[^'\\]|\\[\S\s]|''?(?=[^']))*(?:'''|$)|"""(?:[^"\\]|\\[\S\s]|""?(?=[^"]))*(?:"""|$)|'(?:[^'\\]|\\[\S\s])*(?:'|$)|"(?:[^"\\]|\\[\S\s])*(?:"|$))/,q,"'\""]):a.multiLineStrings?m.push(["str",/^(?:'(?:[^'\\]|\\[\S\s])*(?:'|$)|"(?:[^"\\]|\\[\S\s])*(?:"|$)|`(?:[^\\`]|\\[\S\s])*(?:`|$))/, 10 | q,"'\"`"]):m.push(["str",/^(?:'(?:[^\n\r'\\]|\\.)*(?:'|$)|"(?:[^\n\r"\\]|\\.)*(?:"|$))/,q,"\"'"]);a.verbatimStrings&&e.push(["str",/^@"(?:[^"]|"")*(?:"|$)/,q]);var h=a.hashComments;h&&(a.cStyleComments?(h>1?m.push(["com",/^#(?:##(?:[^#]|#(?!##))*(?:###|$)|.*)/,q,"#"]):m.push(["com",/^#(?:(?:define|elif|else|endif|error|ifdef|include|ifndef|line|pragma|undef|warning)\b|[^\n\r]*)/,q,"#"]),e.push(["str",/^<(?:(?:(?:\.\.\/)*|\/?)(?:[\w-]+(?:\/[\w-]+)+)?[\w-]+\.h|[a-z]\w*)>/,q])):m.push(["com",/^#[^\n\r]*/, 11 | q,"#"]));a.cStyleComments&&(e.push(["com",/^\/\/[^\n\r]*/,q]),e.push(["com",/^\/\*[\S\s]*?(?:\*\/|$)/,q]));a.regexLiterals&&e.push(["lang-regex",/^(?:^^\.?|[!+-]|!=|!==|#|%|%=|&|&&|&&=|&=|\(|\*|\*=|\+=|,|-=|->|\/|\/=|:|::|;|<|<<|<<=|<=|=|==|===|>|>=|>>|>>=|>>>|>>>=|[?@[^]|\^=|\^\^|\^\^=|{|\||\|=|\|\||\|\|=|~|break|case|continue|delete|do|else|finally|instanceof|return|throw|try|typeof)\s*(\/(?=[^*/])(?:[^/[\\]|\\[\S\s]|\[(?:[^\\\]]|\\[\S\s])*(?:]|$))+\/)/]);(h=a.types)&&e.push(["typ",h]);a=(""+a.keywords).replace(/^ | $/g, 12 | "");a.length&&e.push(["kwd",RegExp("^(?:"+a.replace(/[\s,]+/g,"|")+")\\b"),q]);m.push(["pln",/^\s+/,q," \r\n\t\xa0"]);e.push(["lit",/^@[$_a-z][\w$@]*/i,q],["typ",/^(?:[@_]?[A-Z]+[a-z][\w$@]*|\w+_t\b)/,q],["pln",/^[$_a-z][\w$@]*/i,q],["lit",/^(?:0x[\da-f]+|(?:\d(?:_\d+)*\d*(?:\.\d*)?|\.\d\+)(?:e[+-]?\d+)?)[a-z]*/i,q,"0123456789"],["pln",/^\\[\S\s]?/,q],["pun",/^.[^\s\w"-$'./@\\`]*/,q]);return x(m,e)}function D(a,m){function e(a){switch(a.nodeType){case 1:if(k.test(a.className))break;if("BR"===a.nodeName)h(a), 13 | a.parentNode&&a.parentNode.removeChild(a);else for(a=a.firstChild;a;a=a.nextSibling)e(a);break;case 3:case 4:if(p){var b=a.nodeValue,d=b.match(t);if(d){var c=b.substring(0,d.index);a.nodeValue=c;(b=b.substring(d.index+d[0].length))&&a.parentNode.insertBefore(s.createTextNode(b),a.nextSibling);h(a);c||a.parentNode.removeChild(a)}}}}function h(a){function b(a,d){var e=d?a.cloneNode(!1):a,f=a.parentNode;if(f){var f=b(f,1),g=a.nextSibling;f.appendChild(e);for(var h=g;h;h=g)g=h.nextSibling,f.appendChild(h)}return e} 14 | for(;!a.nextSibling;)if(a=a.parentNode,!a)return;for(var a=b(a.nextSibling,0),e;(e=a.parentNode)&&e.nodeType===1;)a=e;d.push(a)}var k=/(?:^|\s)nocode(?:\s|$)/,t=/\r\n?|\n/,s=a.ownerDocument,l;a.currentStyle?l=a.currentStyle.whiteSpace:window.getComputedStyle&&(l=s.defaultView.getComputedStyle(a,q).getPropertyValue("white-space"));var p=l&&"pre"===l.substring(0,3);for(l=s.createElement("LI");a.firstChild;)l.appendChild(a.firstChild);for(var d=[l],g=0;g=0;){var h=m[e];A.hasOwnProperty(h)?window.console&&console.warn("cannot override language handler %s",h):A[h]=a}}function C(a,m){if(!a||!A.hasOwnProperty(a))a=/^\s*=o&&(h+=2);e>=c&&(a+=2)}}catch(w){"console"in window&&console.log(w&&w.stack?w.stack:w)}}var v=["break,continue,do,else,for,if,return,while"],w=[[v,"auto,case,char,const,default,double,enum,extern,float,goto,int,long,register,short,signed,sizeof,static,struct,switch,typedef,union,unsigned,void,volatile"], 18 | "catch,class,delete,false,import,new,operator,private,protected,public,this,throw,true,try,typeof"],F=[w,"alignof,align_union,asm,axiom,bool,concept,concept_map,const_cast,constexpr,decltype,dynamic_cast,explicit,export,friend,inline,late_check,mutable,namespace,nullptr,reinterpret_cast,static_assert,static_cast,template,typeid,typename,using,virtual,where"],G=[w,"abstract,boolean,byte,extends,final,finally,implements,import,instanceof,null,native,package,strictfp,super,synchronized,throws,transient"], 19 | H=[G,"as,base,by,checked,decimal,delegate,descending,dynamic,event,fixed,foreach,from,group,implicit,in,interface,internal,into,is,lock,object,out,override,orderby,params,partial,readonly,ref,sbyte,sealed,stackalloc,string,select,uint,ulong,unchecked,unsafe,ushort,var"],w=[w,"debugger,eval,export,function,get,null,set,undefined,var,with,Infinity,NaN"],I=[v,"and,as,assert,class,def,del,elif,except,exec,finally,from,global,import,in,is,lambda,nonlocal,not,or,pass,print,raise,try,with,yield,False,True,None"], 20 | J=[v,"alias,and,begin,case,class,def,defined,elsif,end,ensure,false,in,module,next,nil,not,or,redo,rescue,retry,self,super,then,true,undef,unless,until,when,yield,BEGIN,END"],v=[v,"case,done,elif,esac,eval,fi,function,in,local,set,then,until"],K=/^(DIR|FILE|vector|(de|priority_)?queue|list|stack|(const_)?iterator|(multi)?(set|map)|bitset|u?(int|float)\d*)/,N=/\S/,O=u({keywords:[F,H,w,"caller,delete,die,do,dump,elsif,eval,exit,foreach,for,goto,if,import,last,local,my,next,no,our,print,package,redo,require,sub,undef,unless,until,use,wantarray,while,BEGIN,END"+ 21 | I,J,v],hashComments:!0,cStyleComments:!0,multiLineStrings:!0,regexLiterals:!0}),A={};k(O,["default-code"]);k(x([],[["pln",/^[^]*(?:>|$)/],["com",/^<\!--[\S\s]*?(?:--\>|$)/],["lang-",/^<\?([\S\s]+?)(?:\?>|$)/],["lang-",/^<%([\S\s]+?)(?:%>|$)/],["pun",/^(?:<[%?]|[%?]>)/],["lang-",/^]*>([\S\s]+?)<\/xmp\b[^>]*>/i],["lang-js",/^]*>([\S\s]*?)(<\/script\b[^>]*>)/i],["lang-css",/^]*>([\S\s]*?)(<\/style\b[^>]*>)/i],["lang-in.tag",/^(<\/?[a-z][^<>]*>)/i]]), 22 | ["default-markup","htm","html","mxml","xhtml","xml","xsl"]);k(x([["pln",/^\s+/,q," \t\r\n"],["atv",/^(?:"[^"]*"?|'[^']*'?)/,q,"\"'"]],[["tag",/^^<\/?[a-z](?:[\w-.:]*\w)?|\/?>$/i],["atn",/^(?!style[\s=]|on)[a-z](?:[\w:-]*\w)?/i],["lang-uq.val",/^=\s*([^\s"'>]*(?:[^\s"'/>]|\/(?=\s)))/],["pun",/^[/<->]+/],["lang-js",/^on\w+\s*=\s*"([^"]+)"/i],["lang-js",/^on\w+\s*=\s*'([^']+)'/i],["lang-js",/^on\w+\s*=\s*([^\s"'>]+)/i],["lang-css",/^style\s*=\s*"([^"]+)"/i],["lang-css",/^style\s*=\s*'([^']+)'/i],["lang-css", 23 | /^style\s*=\s*([^\s"'>]+)/i]]),["in.tag"]);k(x([],[["atv",/^[\S\s]+/]]),["uq.val"]);k(u({keywords:F,hashComments:!0,cStyleComments:!0,types:K}),["c","cc","cpp","cxx","cyc","m"]);k(u({keywords:"null,true,false"}),["json"]);k(u({keywords:H,hashComments:!0,cStyleComments:!0,verbatimStrings:!0,types:K}),["cs"]);k(u({keywords:G,cStyleComments:!0}),["java"]);k(u({keywords:v,hashComments:!0,multiLineStrings:!0}),["bsh","csh","sh"]);k(u({keywords:I,hashComments:!0,multiLineStrings:!0,tripleQuotedStrings:!0}), 24 | ["cv","py"]);k(u({keywords:"caller,delete,die,do,dump,elsif,eval,exit,foreach,for,goto,if,import,last,local,my,next,no,our,print,package,redo,require,sub,undef,unless,until,use,wantarray,while,BEGIN,END",hashComments:!0,multiLineStrings:!0,regexLiterals:!0}),["perl","pl","pm"]);k(u({keywords:J,hashComments:!0,multiLineStrings:!0,regexLiterals:!0}),["rb"]);k(u({keywords:w,cStyleComments:!0,regexLiterals:!0}),["js"]);k(u({keywords:"all,and,by,catch,class,else,extends,false,finally,for,if,in,is,isnt,loop,new,no,not,null,of,off,on,or,return,super,then,true,try,unless,until,when,while,yes", 25 | hashComments:3,cStyleComments:!0,multilineStrings:!0,tripleQuotedStrings:!0,regexLiterals:!0}),["coffee"]);k(x([],[["str",/^[\S\s]+/]]),["regex"]);window.prettyPrintOne=function(a,m,e){var h=document.createElement("PRE");h.innerHTML=a;e&&D(h,e);E({g:m,i:e,h:h});return h.innerHTML};window.prettyPrint=function(a){function m(){for(var e=window.PR_SHOULD_USE_CONTINUATION?l.now()+250:Infinity;p=0){var k=k.match(g),f,b;if(b= 26 | !k){b=n;for(var o=void 0,c=b.firstChild;c;c=c.nextSibling)var i=c.nodeType,o=i===1?o?b:c:i===3?N.test(c.nodeValue)?b:o:o;b=(f=o===b?void 0:o)&&"CODE"===f.tagName}b&&(k=f.className.match(g));k&&(k=k[1]);b=!1;for(o=n.parentNode;o;o=o.parentNode)if((o.tagName==="pre"||o.tagName==="code"||o.tagName==="xmp")&&o.className&&o.className.indexOf("prettyprint")>=0){b=!0;break}b||((b=(b=n.className.match(/\blinenums\b(?::(\d+))?/))?b[1]&&b[1].length?+b[1]:!0:!1)&&D(n,b),d={g:k,h:n,i:b},E(d))}}p 0) { 16 | return $scrollElement; 17 | } else { 18 | $scrollElement.scrollTop(1); 19 | var isScrollable = $scrollElement.scrollTop() > 0; 20 | $scrollElement.scrollTop(0); 21 | if (isScrollable) { 22 | return $scrollElement; 23 | } 24 | } 25 | } 26 | return []; 27 | }; 28 | var scrollable = findScrollableElement(opts.container, 'body', 'html'); 29 | 30 | var scrollTo = function(e) { 31 | if (opts.smoothScrolling) { 32 | e.preventDefault(); 33 | var elScrollTo = $(e.target).attr('href'); 34 | var $el = $(elScrollTo); 35 | 36 | scrollable.animate({ scrollTop: $el.offset().top }, 400, 'swing', function() { 37 | location.hash = elScrollTo; 38 | }); 39 | } 40 | $('li', self).removeClass(activeClassName); 41 | $(e.target).parent().addClass(activeClassName); 42 | }; 43 | 44 | //highlight on scroll 45 | var timeout; 46 | var highlightOnScroll = function(e) { 47 | if (timeout) { 48 | clearTimeout(timeout); 49 | } 50 | timeout = setTimeout(function() { 51 | var top = $(window).scrollTop(); 52 | for (var i = 0, c = headingOffsets.length; i < c; i++) { 53 | if (headingOffsets[i] >= top) { 54 | $('li', self).removeClass(activeClassName); 55 | $('li:eq('+(i-1)+')', self).addClass(activeClassName); 56 | break; 57 | } 58 | } 59 | }, 50); 60 | }; 61 | if (opts.highlightOnScroll) { 62 | $(window).bind('scroll', highlightOnScroll); 63 | highlightOnScroll(); 64 | } 65 | 66 | return this.each(function() { 67 | //build TOC 68 | var ul = $('
    '); 69 | headings.each(function(i, heading) { 70 | var $h = $(heading); 71 | headingOffsets.push($h.offset().top - opts.highlightOffset); 72 | 73 | //add anchor 74 | var anchorName = opts.anchorName(i, heading, opts.prefix); 75 | var anchor = $([]); 76 | if (!document.getElementById(anchorName)) { 77 | anchor = $('').attr('id', opts.anchorName(i, heading, opts.prefix)).insertBefore($h); 78 | } 79 | //build TOC item 80 | var a = $('') 81 | .text($h.text()) 82 | .attr('href', '#' + anchorName) 83 | .bind('click', scrollTo); 84 | 85 | var li = $('
  • ') 86 | .addClass(opts.prefix+'-'+$h[0].tagName.toLowerCase()) 87 | .append(a); 88 | 89 | ul.append(li); 90 | }); 91 | var el = $(this); 92 | el.html(ul); 93 | }); 94 | }; 95 | 96 | 97 | jQuery.fn.toc.defaults = { 98 | container: 'body', 99 | selectors: 'h1,h2,h3', 100 | smoothScrolling: true, 101 | prefix: '', 102 | highlightOnScroll: true, 103 | highlightOffset: 100, 104 | anchorName: function(i, heading, prefix) { 105 | return prefix+i; 106 | } 107 | }; 108 | 109 | }(jQuery); -------------------------------------------------------------------------------- /example/example.js: -------------------------------------------------------------------------------- 1 | 2 | $(function() { 3 | 4 | var colorpickerInput = $("#full"); 5 | 6 | 7 | function toggleButtonState() { 8 | var options = colorpickerInput.spectrum("option"); 9 | $(".toggleBtn").each(function() { 10 | $(this).toggleClass("active", !!options[$(this).data("rule")]); 11 | }); 12 | } 13 | 14 | $(document).on("click", ".toggleBtn", function() { 15 | var option = $(this).data("rule"); 16 | var existing = colorpickerInput.spectrum("option", option); 17 | 18 | colorpickerInput.spectrum("option", option, !existing); 19 | toggleButtonState(); 20 | }); 21 | 22 | colorpickerInput.spectrum({ 23 | color: "#ECC", 24 | flat: true, 25 | showInput: true, 26 | className: "full-spectrum", 27 | showInitial: true, 28 | showPalette: true, 29 | showSelectionPalette: true, 30 | maxPaletteSize: 10, 31 | preferredFormat: "hex", 32 | localStorageKey: "spectrum.example", 33 | move: function (color) { 34 | }, 35 | show: function () { 36 | 37 | }, 38 | beforeShow: function () { 39 | 40 | }, 41 | hide: function (color) { 42 | }, 43 | 44 | palette: [ 45 | ["rgb(0, 0, 0)", "rgb(67, 67, 67)", "rgb(102, 102, 102)", /*"rgb(153, 153, 153)","rgb(183, 183, 183)",*/ 46 | "rgb(204, 204, 204)", "rgb(217, 217, 217)", /*"rgb(239, 239, 239)", "rgb(243, 243, 243)",*/ "rgb(255, 255, 255)"], 47 | ["rgb(152, 0, 0)", "rgb(255, 0, 0)", "rgb(255, 153, 0)", "rgb(255, 255, 0)", "rgb(0, 255, 0)", 48 | "rgb(0, 255, 255)", "rgb(74, 134, 232)", "rgb(0, 0, 255)", "rgb(153, 0, 255)", "rgb(255, 0, 255)"], 49 | ["rgb(230, 184, 175)", "rgb(244, 204, 204)", "rgb(252, 229, 205)", "rgb(255, 242, 204)", "rgb(217, 234, 211)", 50 | "rgb(208, 224, 227)", "rgb(201, 218, 248)", "rgb(207, 226, 243)", "rgb(217, 210, 233)", "rgb(234, 209, 220)", 51 | "rgb(221, 126, 107)", "rgb(234, 153, 153)", "rgb(249, 203, 156)", "rgb(255, 229, 153)", "rgb(182, 215, 168)", 52 | "rgb(162, 196, 201)", "rgb(164, 194, 244)", "rgb(159, 197, 232)", "rgb(180, 167, 214)", "rgb(213, 166, 189)", 53 | "rgb(204, 65, 37)", "rgb(224, 102, 102)", "rgb(246, 178, 107)", "rgb(255, 217, 102)", "rgb(147, 196, 125)", 54 | "rgb(118, 165, 175)", "rgb(109, 158, 235)", "rgb(111, 168, 220)", "rgb(142, 124, 195)", "rgb(194, 123, 160)", 55 | "rgb(166, 28, 0)", "rgb(204, 0, 0)", "rgb(230, 145, 56)", "rgb(241, 194, 50)", "rgb(106, 168, 79)", 56 | "rgb(69, 129, 142)", "rgb(60, 120, 216)", "rgb(61, 133, 198)", "rgb(103, 78, 167)", "rgb(166, 77, 121)", 57 | /*"rgb(133, 32, 12)", "rgb(153, 0, 0)", "rgb(180, 95, 6)", "rgb(191, 144, 0)", "rgb(56, 118, 29)", 58 | "rgb(19, 79, 92)", "rgb(17, 85, 204)", "rgb(11, 83, 148)", "rgb(53, 28, 117)", "rgb(116, 27, 71)",*/ 59 | "rgb(91, 15, 0)", "rgb(102, 0, 0)", "rgb(120, 63, 4)", "rgb(127, 96, 0)", "rgb(39, 78, 19)", 60 | "rgb(12, 52, 61)", "rgb(28, 69, 135)", "rgb(7, 55, 99)", "rgb(32, 18, 77)", "rgb(76, 17, 48)"] 61 | ] 62 | }); 63 | 64 | $("#size").change(function() { 65 | var size = Math.min(500, Math.max(50, $(this).val())); 66 | $(".sp-picker-container").width(size); 67 | 68 | colorpickerInput.spectrum("reflow"); 69 | }); 70 | 71 | $("#huesize").change(function() { 72 | var size = Math.min(80, Math.max(5, $(this).val())); 73 | 74 | $(".sp-hue").css("left", (103 - size) + "%"); 75 | $(".sp-color").css("right", size + "%"); 76 | $(".sp-fill").css("padding-top", (100 - size) + "%"); 77 | 78 | colorpickerInput.spectrum("reflow"); 79 | }); 80 | 81 | toggleButtonState(); 82 | 83 | }); 84 | 85 | 86 | 87 | var palettes = { }; 88 | 89 | 90 | palettes.newGmail = [["#000","#444","#666","#999","#ccc","#eee","#f3f3f3","#fff"],["#f00","#f90","#ff0","#0f0","#0ff","#00f","#90f","#f0f"],["#f4cccc","#fce5cd","#fff2cc","#d9ead3","#d0e0e3","#cfe2f3","#d9d2e9","#ead1dc"],["#ea9999","#f9cb9c","#ffe599","#b6d7a8","#a2c4c9","#9fc5e8","#b4a7d6","#d5a6bd"],["#e06666","#f6b26b","#ffd966","#93c47d","#76a5af","#6fa8dc","#8e7cc3","#c27ba0"],["#c00","#e69138","#f1c232","#6aa84f","#45818e","#3d85c6","#674ea7","#a64d79"],["#900","#b45f06","#bf9000","#38761d","#134f5c","#0b5394","#351c75","#741b47"],["#600","#783f04","#7f6000","#274e13","#0c343d","#073763","#20124d","#4c1130"]]; 91 | 92 | palettes.default = [ 93 | ["#000000", "#434343", "#666666", "#999999", "#b7b7b7", "#cccccc", "#d9d9d9", "#efefef", "#f3f3f3", "#ffffff"], 94 | ["#980000", "#ff0000", "#ff9900", "#ffff00", "#00ff00", "#00ffff", "#4a86e8", "#0000ff", "#9900ff", "#ff00ff"], 95 | ["#e6b8af", "#f4cccc", "#fce5cd", "#fff2cc", "#d9ead3", "#d9ead3", "#c9daf8", "#cfe2f3", "#d9d2e9", "#ead1dc"], 96 | ["#dd7e6b", "#ea9999", "#f9cb9c", "#ffe599", "#b6d7a8", "#a2c4c9", "#a4c2f4", "#9fc5e8", "#b4a7d6", "#d5a6bd"], 97 | ["#cc4125", "#e06666", "#f6b26b", "#ffd966", "#93c47d", "#76a5af", "#6d9eeb", "#6fa8dc", "#8e7cc3", "#c27ba0"], 98 | ["#a61c00", "#cc0000", "#e69138", "#f1c232", "#6aa84f", "#45818e", "#3c78d8", "#3d85c6", "#674ea7", "#a64d79"], 99 | ["#85200c", "#990000", "#b45f06", "#bf9000", "#38761d", "#134f5c", "#1155cc", "#0b5394", "#351c75", "#741b47"], 100 | ["#5b0f00", "#660000", "#783f04", "#7f6000", "#274e13", "#0c343d", "#1c4587", "#073763", "#20124d", "#4c1130"] 101 | ]; 102 | 103 | palettes.snagit = [ 104 | ["#ffffff", "#000000", "#c00000", "#f79646", "#f5f445", "#7fd13b", "#4bacc6", "#1f497d", "#8064a2", "#ff0000"], 105 | ["#f2f2f2", "#7f7f7f", "#f8d1d3", "#fdeada", "#fafdd7", "#e5f5d7", "#dbeef3", "#c6d9f0", "#e5e0ec", "#ffcc00"], 106 | ["#d7d7d7", "#595959", "#f2a3a7", "#fbd5b5", "#fbfaae", "#cbecb0", "#b7dde8", "#8db3e2", "#ccc1d9", "#ffff00"], 107 | ["#bebebe", "#414141", "#eb757b", "#fac08f", "#eef98e", "#b2e389", "#92cddc", "#548dd4", "#b2a2c7", "#00ff00"], 108 | ["#a3a3a3", "#2a2a2a", "#a3171e", "#e36c09", "#dede07", "#5ea226", "#31859b", "#17365d", "#5f497a", "#0000ff"], 109 | ["#7e7e7e", "#141414", "#6d0f14", "#974806", "#c0c00d", "#3f6c19", "#205867", "#0f243e", "#3f3151", "#9900ff"] 110 | ]; 111 | 112 | palettes.newton = [ 113 | 114 | "#ffffff", "#000000", "#ff0000", "#ff8000", "#ffff00", "#008000", "#0000ff", "#4b0082", "#9400d3" 115 | 116 | ]; 117 | 118 | palettes.aol = [ 119 | 120 | ["#ffffff", "#fff7de", "#ffffce", "#ffffbd", "#ffffd6", "#b5ff84", "#c6efde", "#efffff", "#efe7f7", "#dea5d6"], 121 | ["#ded6c6", "#ffc6bd", "#ffe7b5", "#ffe7a5", "#efef7b", "#adf77b", "#5abd9c", "#a5d6f7", "#8494e7", "#ef7be7"], 122 | ["#cec6b5", "#e78473", "#efad52", "#f7b500", "#efef9c", "#a5ff00", "#7bd6bd", "#a5d6de", "#8c5ae7", "#de6bce"], 123 | ["#8c8473", "#ef0018", "#ef4210", "#f79400", "#ffff00", "#63d600", "#a5c684", "#5a63d6", "#7b52c6", "#c642ce"], 124 | ["#736b63", "#d60039", "#d67310", "#f7844a", "#f7de00", "#429400", "#4a944a", "#4200ff", "#9c00de", "#a500c6"], 125 | ["#39524a", "#b51821", "#944a08", "#a55229", "#8c8c00", "#318c00", "#429484", "#3100c6", "#523984", "#940084"], 126 | ["#000000", "#940008", "#840008", "#ad2929", "#637321", "#296b00", "#29006b", "#21007b", "#52007b", "#84007b"] 127 | 128 | 129 | ]; 130 | 131 | palettes.oldGmail = [ 132 | ["#ffffff", "#cecece", "#c6c6c6", "#9c9c9c", "#636363", "#313131", "#000000"], 133 | ["#ffcece", "#ff6363", "#ff0000", "#ce0000", "#9c0000", "#630000", "#310000"], 134 | ["#ffce9c", "#ff9c63", "#ff9c00", "#ff6300", "#ce6300", "#9c3100", "#633100"], 135 | ["#ffff9c", "#ffff63", "#ffce63", "#ffce31", "#ce9c31", "#9c6331", "#633131"], 136 | ["#ffffce", "#ffff31", "#ffff00", "#ffce00", "#9c9c00", "#636300", "#313100"], 137 | ["#9cff9c", "#63ff9c", "#31ff31", "#31ce00", "#009c00", "#006300", "#003100"], 138 | ["#9cffff", "#31ffff", "#63cece", "#00cece", "#319c9c", "#316363", "#003131"], 139 | ["#ceffff", "#63ffff", "#31ceff", "#3163ff", "#3131ff", "#00009c", "#000063"], 140 | ["#ceceff", "#9c9cff", "#6363ce", "#6331ff", "#6300ce", "#31319c", "#31009c"], 141 | ["#ffceff", "#ff9cff", "#ce63ce", "#ce31ce", "#9c319c", "#633163", "#310031"] 142 | 143 | 144 | ]; 145 | palettes.hotmail = [ 146 | ["#ffffff", "#000000", "#efefe7", "#184a7b", "#4a84bd", "#c6524a", "#9cbd5a", "#8463a5", "#4aadc6", "#f79442"], 147 | ["#f7f7f7", "#7b7b7b", "#dedec6", "#c6def7", "#dee7f7", "#f7dede", "#eff7de", "#e7e7ef", "#deeff7", "#ffefde"], 148 | ["#dedede", "#5a5a5a", "#c6bd94", "#8cb5e7", "#bdcee7", "#e7bdb5", "#d6e7bd", "#cec6de", "#b5deef", "#ffd6b5"], 149 | ["#bdbdbd", "#393939", "#948c52", "#528cd6", "#94b5d6", "#de9494", "#c6d69c", "#b5a5c6", "#94cede", "#ffc68c"], 150 | ["#a5a5a5", "#212121", "#4a4229", "#10315a", "#316394", "#943131", "#739439", "#5a4a7b", "#31849c", "#e76b08"], 151 | ["#848484", "#080808", "#181810", "#082139", "#214263", "#632121", "#4a6329", "#393152", "#215a63", "#944a00"], 152 | ["#c60000", "#ff0000", "#ffc600", "#ffff00", "#94d652", "#00b552", "#00b5f7", "#0073c6", "#002163", "#7331a5"], 153 | 154 | ]; 155 | palettes.yahoo = [ 156 | 157 | ["#000000", "#111111", "#2d2d2d", "#434343", "#5b5b5b", "#737373", "#8b8b8b", "#a2a2a2", "#b9b9b9", "#d0d0d0", "#e6e6e6", "#ffffff"], 158 | ["#7f7f00", "#bfbf00", "#ffff00", "#ffff40", "#ffff80", "#ffffbf", "#525330", "#898a49", "#aea945", "#c3be71", "#e0dcaa", "#fcfae1"], 159 | ["#407f00", "#60bf00", "#80ff00", "#a0ff40", "#c0ff80", "#dfffbf", "#3b5738", "#668f5a", "#7f9757", "#8a9b55", "#b7c296", "#e6ebd5"], 160 | ["#007f40", "#00bf60", "#00ff80", "#40ffa0", "#80ffc0", "#bfffdf", "#033d21", "#438059", "#7fa37c", "#8dae94", "#acc6b5", "#ddebe2"], 161 | ["#007f7f", "#00bfbf", "#00ffff", "#40ffff", "#80ffff", "#bfffff", "#033d3d", "#347d7e", "#609a9f", "#96bdc4", "#b5d1d7", "#e2f1f4"], 162 | ["#00407f", "#0060bf", "#0080ff", "#40a0ff", "#80c0ff", "#bfdfff", "#1b2c48", "#385376", "#57708f", "#7792ac", "#a8bed1", "#deebf6"], 163 | ["#00007f", "#0000bf", "#0000ff", "#4040ff", "#8080ff", "#bfbfff", "#212143", "#373e68", "#444f75", "#585e82", "#8687a4", "#d2d1e1"], 164 | ["#40007f", "#6000bf", "#8000ff", "#a040ff", "#c080ff", "#dfbfff", "#302449", "#54466f", "#655a7f", "#726284", "#9e8fa9", "#dcd1df"], 165 | ["#7f007f", "#bf00bf", "#ff00ff", "#ff40ff", "#ff80ff", "#ffbfff", "#4a234a", "#794a72", "#936386", "#9d7292", "#c0a0b6", "#ecdae5"], 166 | ["#7f003f", "#bf005f", "#ff007f", "#ff409f", "#ff80bf", "#ffbfdf", "#451528", "#823857", "#a94a76", "#bc6f95", "#d8a5bb", "#f7dde9"], 167 | ["#800000", "#c00000", "#ff0000", "#ff4040", "#ff8080", "#ffc0c0", "#441415", "#82393c", "#aa4d4e", "#bc6e6e", "#d8a3a4", "#f8dddd"], 168 | ["#7f3f00", "#bf5f00", "#ff7f00", "#ff9f40", "#ffbf80", "#ffdfbf", "#482c1b", "#855a40", "#b27c51", "#c49b71", "#e1c4a8", "#fdeee0"] 169 | 170 | ]; 171 | palettes.sixteen = [ 172 | ["#000000", "#000084", "#0000ff", "#840000"], 173 | ["#840084", "#008200", "#ff0000", "#008284"], 174 | ["#ff00ff", "#848200", "#848284", "#00ff00"], 175 | ["#ffa600", "#00ffff", "#c6c3c6", "#ffff00"], 176 | ["#ffffff"] 177 | ]; 178 | 179 | palettes.websafe = [ 180 | ["#000", "#300", "#600", "#900", "#c00", "#f00"], 181 | ["#003", "#303", "#603", "#903", "#c03", "#f03"], 182 | ["#006", "#306", "#606", "#906", "#c06", "#f06"], 183 | ["#009", "#309", "#609", "#909", "#c09", "#f09"], 184 | ["#00c", "#30c", "#60c", "#90c", "#c0c", "#f0c"], 185 | ["#00f", "#30f", "#60f", "#90f", "#c0f", "#f0f"], 186 | ["#030", "#330", "#630", "#930", "#c30", "#f30"], 187 | ["#033", "#333", "#633", "#933", "#c33", "#f33"], 188 | ["#036", "#336", "#636", "#936", "#c36", "#f36"], 189 | ["#039", "#339", "#639", "#939", "#c39", "#f39"], 190 | ["#03c", "#33c", "#63c", "#93c", "#c3c", "#f3c"], 191 | ["#03f", "#33f", "#63f", "#93f", "#c3f", "#f3f"], 192 | ["#060", "#360", "#660", "#960", "#c60", "#f60"], 193 | ["#063", "#363", "#663", "#963", "#c63", "#f63"], 194 | ["#066", "#366", "#666", "#966", "#c66", "#f66"], 195 | ["#069", "#369", "#669", "#969", "#c69", "#f69"], 196 | ["#06c", "#36c", "#66c", "#96c", "#c6c", "#f6c"], 197 | ["#06f", "#36f", "#66f", "#96f", "#c6f", "#f6f"], 198 | ["#090", "#390", "#690", "#990", "#c90", "#f90"], 199 | ["#093", "#393", "#693", "#993", "#c93", "#f93"], 200 | ["#096", "#396", "#696", "#996", "#c96", "#f96"], 201 | ["#099", "#399", "#699", "#999", "#c99", "#f99"], 202 | ["#09c", "#39c", "#69c", "#99c", "#c9c", "#f9c"], 203 | ["#09f", "#39f", "#69f", "#99f", "#c9f", "#f9f"], 204 | ["#0c0", "#3c0", "#6c0", "#9c0", "#cc0", "#fc0"], 205 | ["#0c3", "#3c3", "#6c3", "#9c3", "#cc3", "#fc3"], 206 | ["#0c6", "#3c6", "#6c6", "#9c6", "#cc6", "#fc6"], 207 | ["#0c9", "#3c9", "#6c9", "#9c9", "#cc9", "#fc9"], 208 | ["#0cc", "#3cc", "#6cc", "#9cc", "#ccc", "#fcc"], 209 | ["#0cf", "#3cf", "#6cf", "#9cf", "#ccf", "#fcf"], 210 | ["#0f0", "#3f0", "#6f0", "#9f0", "#cf0", "#ff0"], 211 | ["#0f3", "#3f3", "#6f3", "#9f3", "#cf3", "#ff3"], 212 | ["#0f6", "#3f6", "#6f6", "#9f6", "#cf6", "#ff6"], 213 | ["#0f9", "#3f9", "#6f9", "#9f9", "#cf9", "#ff9"], 214 | ["#0fc", "#3fc", "#6fc", "#9fc", "#cfc", "#ffc"], 215 | ["#0ff", "#3ff", "#6ff", "#9ff", "#cff", "#fff"] 216 | ]; 217 | 218 | 219 | palettes.named = [ 220 | ["White", "Ivory", "Snow", "LightYellow", "MintCream", "Azure", "FloralWhite", "Honeydew", "GhostWhite", "Seashell", "Cornsilk", "AliceBlue", "LemonChiffon", "LightCyan"], 221 | ["OldLace", "LightGoldenrodYellow", "LavenderBlush", "WhiteSmoke", "Beige", "Linen", "PapayaWhip", "BlanchedAlmond", "AntiqueWhite", "MistyRose", "Bisque", "Lavender", "Moccasin", "PaleGoldenrod"], 222 | ["NavajoWhite", "Yellow", "PeachPuff", "Wheat", "Khaki", "Gainsboro", "PaleTurquoise", "Pink", "Aquamarine", "LightGray", "PowderBlue", "PaleGreen", "GreenYellow", "LightPink"], 223 | ["LightBlue", "Gold", "Thistle", "LightGreen", "LightSteelBlue", "Silver", "LightSkyBlue", "BurlyWood", "SkyBlue", "Chartreuse", "Plum", "LawnGreen", "Tan", "LightSalmon"], 224 | ["SandyBrown", "Cyan", "Aqua", "DarkKhaki", "Violet", "Turquoise", "Orange", "YellowGreen", "DarkSalmon", "MediumAquamarine", "DarkSeaGreen", "DarkGray", "MediumTurquoise", "Goldenrod"], 225 | ["MediumSpringGreen", "SpringGreen", "Salmon", "LightCoral", "Coral", "DarkOrange", "HotPink", "RosyBrown", "Orchid", "Lime", "PaleVioletRed", "Peru", "DarkTurquoise", "CornflowerBlue"], 226 | ["Tomato", "DeepSkyBlue", "LimeGreen", "CadetBlue", "MediumSeaGreen", "DarkGoldenrod", "MediumPurple", "LightSeaGreen", "LightSlateGray", "MediumOrchid", "Gray", "Chocolate", "IndianRed", "SlateGray"], 227 | ["MediumSlateBlue", "DodgerBlue", "OliveDrab", "SteelBlue", "OrangeRed", "Olive", "SlateBlue", "RoyalBlue", "Magenta", "Fuchsia", "SeaGreen", "DimGray", "DeepPink", "Sienna"], 228 | ["DarkOrchid", "DarkCyan", "ForestGreen", "DarkOliveGreen", "BlueViolet", "Teal", "MediumVioletRed", "Crimson", "SaddleBrown", "Brown", "FireBrick", "Red", "Green", "DarkSlateBlue"], 229 | ["DarkSlateGray", "DarkViolet", "DarkGreen", "DarkMagenta", "Purple", "DarkRed", "Maroon", "Indigo", "MidnightBlue", "Blue", "MediumBlue", "DarkBlue", "Navy", "Black"] 230 | ]; 231 | 232 | 233 | 234 | $(function() { 235 | for (var i in palettes) { 236 | $("

    ").text(i).appendTo("#palettes"); 237 | $("").appendTo("#palettes").spectrum({ 238 | flat: true, 239 | showInput: true, 240 | className: i, 241 | preferredFormat: "rgb", 242 | showPalette: true, 243 | showPaletteOnly: true, 244 | palette: palettes[i] 245 | }); 246 | } 247 | }); 248 | 249 | $(function() { 250 | $("#langdemo").spectrum({ 251 | flat: false, 252 | showInput: true, 253 | }); 254 | }); -------------------------------------------------------------------------------- /example/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Spectrum - The No Hassle jQuery Colorpicker 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 60 | 61 | 62 | 70 | 71 |
    72 | 73 |

    Spectrum Colorpicker Crazy Configurator

    74 |
    NOTE: this page is currently in development. Please refer to the Home Page for demos and documentation instead. 75 |
    76 |

    77 | Spectrum can be customized to show and hide different portions of the colorpicker. Try clicking some of the buttons below to see how it can change. 78 |

    79 | 80 |
    81 |
    82 |
    83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 |
    91 |
    92 |
    93 |

    94 | 95 | 96 | 97 |

    98 |
    99 | 100 | 101 | 102 |
    103 | 104 |
    105 |

    Spectrum Colorpicker Localization

    106 |
    107 |

    108 | This page has loaded the German localization. Here is a list of all spectrum localizations. Please help expand our localizations if you know a language that isn't represented! You can copy and paste one of the files, and update the text for 'cancel' and 'choose', then submit a pull request at: https://github.com/bgrins/spectrum. 109 |

    110 |
    111 | 112 | 113 | 114 |
    115 |

    Spectrum Colorpicker Sample Palettes

    116 |
    117 | 118 |

    119 | NOTE: these palettes are also a work in progress. Ideally the site will eventually allow you to choose between a few options and download them. 120 |

    121 | 122 |

    123 | The newGmail palette below is an example of customizing the palette size and layout with CSS. 124 |

    125 | 126 |
    127 |
    128 | 129 |
    130 | 131 |
    132 | 133 | 134 | 135 | 148 | 149 | 150 | -------------------------------------------------------------------------------- /example/testcase.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Spectrum - The No Hassle jQuery Colorpicker 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 26 | 27 |
    28 |

    Basic Test Case

    29 |

    Also available as a jsfiddle

    30 | 31 | 32 |

    Full Example

    33 | 34 | 35 |
    36 | 37 | 91 | 92 | 93 | 94 | -------------------------------------------------------------------------------- /i18n/jquery.spectrum-ar.js: -------------------------------------------------------------------------------- 1 | // Spectrum Colorpicker 2 | // Arabic (ar) localization 3 | // https://github.com/bgrins/spectrum 4 | (function ( $ ) { 5 | 6 | var localization = $.spectrum.localization["ar"] = { 7 | cancelText: "إلغاء", 8 | chooseText: "إختار", 9 | clearText: "إرجاع الألوان على ما كانت", 10 | noColorSelectedText: "لم تختار أي لون", 11 | togglePaletteMoreText: "أكثر", 12 | togglePaletteLessText: "أقل" 13 | }; 14 | 15 | $.extend($.fn.spectrum.defaults, localization); 16 | 17 | })( jQuery ); 18 | -------------------------------------------------------------------------------- /i18n/jquery.spectrum-ca.js: -------------------------------------------------------------------------------- 1 | // Spectrum Colorpicker 2 | // Catalan (ca) localization 3 | // https://github.com/bgrins/spectrum 4 | 5 | (function ( $ ) { 6 | 7 | var localization = $.spectrum.localization["ca"] = { 8 | cancelText: "Cancel·lar", 9 | chooseText: "Escollir", 10 | clearText: "Esborrar color seleccionat", 11 | noColorSelectedText: "Cap color seleccionat", 12 | togglePaletteMoreText: "Més", 13 | togglePaletteLessText: "Menys" 14 | }; 15 | 16 | $.extend($.fn.spectrum.defaults, localization); 17 | 18 | })( jQuery ); 19 | -------------------------------------------------------------------------------- /i18n/jquery.spectrum-cs.js: -------------------------------------------------------------------------------- 1 | // Spectrum Colorpicker 2 | // Czech (cs) localization 3 | // https://github.com/bgrins/spectrum 4 | // author localization cs Pavel Laupe Dvorak pavel@pavel-dvorak.cz 5 | 6 | (function ( $ ) { 7 | 8 | var localization = $.spectrum.localization["cs"] = { 9 | cancelText: "zrušit", 10 | chooseText: "vybrat", 11 | clearText: "Resetovat výměr barev", 12 | noColorSelectedText: "Žádná barva nebyla vybrána", 13 | togglePaletteMoreText: "více", 14 | togglePaletteLessText: "méně" 15 | }; 16 | 17 | $.extend($.fn.spectrum.defaults, localization); 18 | 19 | })( jQuery ); -------------------------------------------------------------------------------- /i18n/jquery.spectrum-de.js: -------------------------------------------------------------------------------- 1 | // Spectrum Colorpicker 2 | // German (de) localization 3 | // https://github.com/bgrins/spectrum 4 | 5 | (function ( $ ) { 6 | 7 | var localization = $.spectrum.localization["de"] = { 8 | cancelText: "Abbrechen", 9 | chooseText: "Wählen", 10 | clearText: "Farbauswahl zurücksetzen", 11 | noColorSelectedText: "Keine Farbe ausgewählt", 12 | togglePaletteMoreText: "Mehr", 13 | togglePaletteLessText: "Weniger" 14 | }; 15 | 16 | $.extend($.fn.spectrum.defaults, localization); 17 | 18 | })( jQuery ); 19 | -------------------------------------------------------------------------------- /i18n/jquery.spectrum-dk.js: -------------------------------------------------------------------------------- 1 | // Spectrum Colorpicker 2 | // Danish (dk) localization 3 | // https://github.com/bgrins/spectrum 4 | 5 | (function ( $ ) { 6 | 7 | var localization = $.spectrum.localization["dk"] = { 8 | cancelText: "annuller", 9 | chooseText: "Vælg" 10 | }; 11 | 12 | $.extend($.fn.spectrum.defaults, localization); 13 | 14 | })( jQuery ); 15 | -------------------------------------------------------------------------------- /i18n/jquery.spectrum-es.js: -------------------------------------------------------------------------------- 1 | // Spectrum Colorpicker 2 | // Spanish (es) localization 3 | // https://github.com/bgrins/spectrum 4 | 5 | (function ( $ ) { 6 | 7 | var localization = $.spectrum.localization["es"] = { 8 | cancelText: "Cancelar", 9 | chooseText: "Elegir", 10 | clearText: "Borrar color seleccionado", 11 | noColorSelectedText: "Ningún color seleccionado", 12 | togglePaletteMoreText: "Más", 13 | togglePaletteLessText: "Menos" 14 | }; 15 | 16 | $.extend($.fn.spectrum.defaults, localization); 17 | 18 | })( jQuery ); 19 | -------------------------------------------------------------------------------- /i18n/jquery.spectrum-fa.js: -------------------------------------------------------------------------------- 1 | // Spectrum Colorpicker 2 | // Persian (fa) localization 3 | // https://github.com/bgrins/spectrum 4 | 5 | (function ( $ ) { 6 | 7 | var localization = $.spectrum.localization["fa"] = { 8 | cancelText: "لغو", 9 | chooseText: "انتخاب", 10 | clearText: "تنظیم مجدد رنگ", 11 | noColorSelectedText: "هیچ رنگی انتخاب نشده است!", 12 | togglePaletteMoreText: "بیشتر", 13 | togglePaletteLessText: "کمتر" 14 | }; 15 | 16 | $.extend($.fn.spectrum.defaults, localization); 17 | 18 | })( jQuery ); 19 | -------------------------------------------------------------------------------- /i18n/jquery.spectrum-fi.js: -------------------------------------------------------------------------------- 1 | // Spectrum Colorpicker 2 | // Finnish (fi) localization 3 | // https://github.com/bgrins/spectrum 4 | 5 | (function ( $ ) { 6 | 7 | var localization = $.spectrum.localization["fi"] = { 8 | cancelText: "Kumoa", 9 | chooseText: "Valitse" 10 | }; 11 | 12 | $.extend($.fn.spectrum.defaults, localization); 13 | 14 | })( jQuery ); 15 | -------------------------------------------------------------------------------- /i18n/jquery.spectrum-fr.js: -------------------------------------------------------------------------------- 1 | // Spectrum Colorpicker 2 | // French (fr) localization 3 | // https://github.com/bgrins/spectrum 4 | 5 | (function ( $ ) { 6 | 7 | var localization = $.spectrum.localization["fr"] = { 8 | cancelText: "Annuler", 9 | chooseText: "Valider", 10 | clearText: "Effacer couleur sélectionnée", 11 | noColorSelectedText: "Aucune couleur sélectionnée", 12 | togglePaletteMoreText: "Plus", 13 | togglePaletteLessText: "Moins" 14 | }; 15 | 16 | $.extend($.fn.spectrum.defaults, localization); 17 | 18 | })( jQuery ); 19 | -------------------------------------------------------------------------------- /i18n/jquery.spectrum-gr.js: -------------------------------------------------------------------------------- 1 | // Spectrum Colorpicker 2 | // Greek (gr) localization 3 | // https://github.com/bgrins/spectrum 4 | 5 | (function ( $ ) { 6 | 7 | var localization = $.spectrum.localization["gr"] = { 8 | cancelText: "Ακύρωση", 9 | chooseText: "Επιλογή", 10 | clearText: "Καθαρισμός επιλεγμένου χρώματος", 11 | noColorSelectedText: "Δεν έχει επιλεχθεί κάποιο χρώμα", 12 | togglePaletteMoreText: "Περισσότερα", 13 | togglePaletteLessText: "Λιγότερα" 14 | }; 15 | 16 | $.extend($.gr.spectrum.defaults, localization); 17 | 18 | })( jQuery ); 19 | -------------------------------------------------------------------------------- /i18n/jquery.spectrum-he.js: -------------------------------------------------------------------------------- 1 | // Spectrum Colorpicker 2 | // Hebrew (he) localization 3 | // https://github.com/bgrins/spectrum 4 | 5 | (function ( $ ) { 6 | 7 | var localization = $.spectrum.localization["he"] = { 8 | cancelText: "בטל בחירה", 9 | chooseText: "בחר צבע", 10 | clearText: "אפס בחירה", 11 | noColorSelectedText: "לא נבחר צבע", 12 | togglePaletteMoreText: "עוד צבעים", 13 | togglePaletteLessText: "פחות צבעים" 14 | }; 15 | 16 | $.extend($.fn.spectrum.defaults, localization); 17 | 18 | })( jQuery ); 19 | -------------------------------------------------------------------------------- /i18n/jquery.spectrum-hr.js: -------------------------------------------------------------------------------- 1 | // Spectrum Colorpicker 2 | // Croatian (hr) localization 3 | // https://github.com/bgrins/spectrum 4 | 5 | (function ( $ ) { 6 | 7 | var localization = $.spectrum.localization["hr"] = { 8 | cancelText: "Odustani", 9 | chooseText: "Odaberi", 10 | clearText: "Poništi odabir", 11 | noColorSelectedText: "Niti jedna boja nije odabrana", 12 | togglePaletteMoreText: "Više", 13 | togglePaletteLessText: "Manje" 14 | }; 15 | 16 | $.extend($.fn.spectrum.defaults, localization); 17 | 18 | })( jQuery ); 19 | -------------------------------------------------------------------------------- /i18n/jquery.spectrum-id.js: -------------------------------------------------------------------------------- 1 | // Spectrum Colorpicker 2 | // Indonesia/Bahasa Indonesia (id) localization 3 | // https://github.com/bgrins/spectrum 4 | 5 | (function ( $ ) { 6 | 7 | var localization = $.spectrum.localization["id"] = { 8 | cancelText: "Batal", 9 | chooseText: "Pilih", 10 | clearText: "Hapus Pilihan Warna", 11 | noColorSelectedText: "Warna Tidak Dipilih", 12 | togglePaletteMoreText: "tambah", 13 | togglePaletteLessText: "kurangi" 14 | }; 15 | 16 | $.extend($.fn.spectrum.defaults, localization); 17 | 18 | })( jQuery ); 19 | -------------------------------------------------------------------------------- /i18n/jquery.spectrum-it.js: -------------------------------------------------------------------------------- 1 | // Spectrum Colorpicker 2 | // Italian (it) localization 3 | // https://github.com/bgrins/spectrum 4 | 5 | (function ( $ ) { 6 | 7 | var localization = $.spectrum.localization["it"] = { 8 | cancelText: "annulla", 9 | chooseText: "scegli", 10 | clearText: "Annulla selezione colore", 11 | noColorSelectedText: "Nessun colore selezionato" 12 | }; 13 | 14 | $.extend($.fn.spectrum.defaults, localization); 15 | 16 | })( jQuery ); 17 | -------------------------------------------------------------------------------- /i18n/jquery.spectrum-ja.js: -------------------------------------------------------------------------------- 1 | // Spectrum Colorpicker 2 | // Japanese (ja) localization 3 | // https://github.com/bgrins/spectrum 4 | 5 | (function ( $ ) { 6 | 7 | var localization = $.spectrum.localization["ja"] = { 8 | cancelText: "中止", 9 | chooseText: "選択" 10 | }; 11 | 12 | $.extend($.fn.spectrum.defaults, localization); 13 | 14 | })( jQuery ); 15 | -------------------------------------------------------------------------------- /i18n/jquery.spectrum-ko.js: -------------------------------------------------------------------------------- 1 | // Spectrum Colorpicker 2 | // Korean (ko) localization 3 | // https://github.com/bgrins/spectrum 4 | 5 | (function ( $ ) { 6 | 7 | var localization = $.spectrum.localization["ko"] = { 8 | cancelText: "취소", 9 | chooseText: "선택", 10 | clearText: "선택 초기화", 11 | noColorSelectedText: "선택된 색상 없음", 12 | togglePaletteMoreText: "더보기", 13 | togglePaletteLessText: "줄이기" 14 | }; 15 | 16 | $.extend($.fn.spectrum.defaults, localization); 17 | 18 | })( jQuery ); 19 | -------------------------------------------------------------------------------- /i18n/jquery.spectrum-lt.js: -------------------------------------------------------------------------------- 1 | // Spectrum Colorpicker 2 | // Lithuanian (lt) localization 3 | // https://github.com/liesislukas 4 | 5 | (function ( $ ) { 6 | 7 | var localization = $.spectrum.localization["lt"] = { 8 | cancelText: "Atšaukti", 9 | chooseText: "Pasirinkti", 10 | clearText: "Išvalyti pasirinkimą", 11 | noColorSelectedText: "Spalva nepasirinkta", 12 | togglePaletteMoreText: "Daugiau", 13 | togglePaletteLessText: "Mažiau" 14 | }; 15 | 16 | $.extend($.fn.spectrum.defaults, localization); 17 | 18 | })( jQuery ); 19 | -------------------------------------------------------------------------------- /i18n/jquery.spectrum-nl.js: -------------------------------------------------------------------------------- 1 | // Spectrum Colorpicker 2 | // Dutch (nl-nl) localization 3 | // https://github.com/bgrins/spectrum 4 | 5 | (function ( $ ) { 6 | 7 | var localization = $.spectrum.localization["nl-nl"] = { 8 | cancelText: "Annuleer", 9 | chooseText: "Kies", 10 | clearText: "Wis kleur selectie", 11 | togglePaletteMoreText: 'Meer', 12 | togglePaletteLessText: 'Minder' 13 | }; 14 | 15 | $.extend($.fn.spectrum.defaults, localization); 16 | 17 | })( jQuery ); 18 | -------------------------------------------------------------------------------- /i18n/jquery.spectrum-pl.js: -------------------------------------------------------------------------------- 1 | // Spectrum Colorpicker 2 | // Polish (pl) localization 3 | // https://github.com/bgrins/spectrum 4 | 5 | (function ( $ ) { 6 | 7 | var localization = $.spectrum.localization["pl"] = { 8 | cancelText: "Anuluj", 9 | chooseText: "Wybierz", 10 | clearText: "Usuń wybór koloru", 11 | noColorSelectedText: "Nie wybrano koloru", 12 | togglePaletteMoreText: "Więcej", 13 | togglePaletteLessText: "Mniej" 14 | }; 15 | 16 | $.extend($.fn.spectrum.defaults, localization); 17 | 18 | })( jQuery ); 19 | -------------------------------------------------------------------------------- /i18n/jquery.spectrum-pt-br.js: -------------------------------------------------------------------------------- 1 | // Spectrum Colorpicker 2 | // Brazilian (pt-br) localization 3 | // https://github.com/bgrins/spectrum 4 | 5 | (function ( $ ) { 6 | 7 | var localization = $.spectrum.localization["pt-br"] = { 8 | cancelText: "Cancelar", 9 | chooseText: "Escolher", 10 | clearText: "Limpar cor selecionada", 11 | noColorSelectedText: "Nenhuma cor selecionada", 12 | togglePaletteMoreText: "Mais", 13 | togglePaletteLessText: "Menos" 14 | }; 15 | 16 | $.extend($.fn.spectrum.defaults, localization); 17 | 18 | })( jQuery ); 19 | -------------------------------------------------------------------------------- /i18n/jquery.spectrum-ru.js: -------------------------------------------------------------------------------- 1 | // Spectrum Colorpicker 2 | // Russian (ru) localization 3 | // https://github.com/bgrins/spectrum 4 | 5 | (function ( $ ) { 6 | 7 | var localization = $.spectrum.localization["ru"] = { 8 | cancelText: "Отмена", 9 | chooseText: "Выбрать", 10 | clearText: "Сбросить", 11 | noColorSelectedText: "Цвет не выбран", 12 | togglePaletteMoreText: "Ещё", 13 | togglePaletteLessText: "Скрыть" 14 | }; 15 | 16 | $.extend($.fn.spectrum.defaults, localization); 17 | 18 | })( jQuery ); 19 | -------------------------------------------------------------------------------- /i18n/jquery.spectrum-sv.js: -------------------------------------------------------------------------------- 1 | // Spectrum Colorpicker 2 | // Swedish (sv) localization 3 | // https://github.com/bgrins/spectrum 4 | 5 | (function ( $ ) { 6 | 7 | var localization = $.spectrum.localization["sv"] = { 8 | cancelText: "Avbryt", 9 | chooseText: "Välj" 10 | }; 11 | 12 | $.extend($.fn.spectrum.defaults, localization); 13 | 14 | })( jQuery ); 15 | -------------------------------------------------------------------------------- /i18n/jquery.spectrum-tr.js: -------------------------------------------------------------------------------- 1 | // Spectrum Colorpicker 2 | // Turkish (tr) localization 3 | // https://github.com/bgrins/spectrum 4 | 5 | (function ( $ ) { 6 | 7 | var localization = $.spectrum.localization["tr"] = { 8 | cancelText: "iptal", 9 | chooseText: "tamam" 10 | }; 11 | 12 | $.extend($.fn.spectrum.defaults, localization); 13 | 14 | })( jQuery ); 15 | -------------------------------------------------------------------------------- /i18n/jquery.spectrum-zh-cn.js: -------------------------------------------------------------------------------- 1 | // Spectrum Colorpicker 2 | // Simplified Chinese (zh-cn) localization 3 | // https://github.com/bgrins/spectrum 4 | 5 | (function ( $ ) { 6 | 7 | var localization = $.spectrum.localization["zh-cn"] = { 8 | cancelText: "取消", 9 | chooseText: "选择", 10 | clearText: "清除", 11 | togglePaletteMoreText: "更多选项", 12 | togglePaletteLessText: "隐藏", 13 | noColorSelectedText: "尚未选择任何颜色" 14 | }; 15 | 16 | $.extend($.fn.spectrum.defaults, localization); 17 | 18 | })( jQuery ); 19 | -------------------------------------------------------------------------------- /i18n/jquery.spectrum-zh-tw.js: -------------------------------------------------------------------------------- 1 | // Spectrum Colorpicker 2 | // Traditional Chinese (zh-tw) localization 3 | // https://github.com/bgrins/spectrum 4 | 5 | (function ( $ ) { 6 | 7 | var localization = $.spectrum.localization["zh-tw"] = { 8 | cancelText: "取消", 9 | chooseText: "選擇", 10 | clearText: "清除", 11 | togglePaletteMoreText: "更多選項", 12 | togglePaletteLessText: "隱藏", 13 | noColorSelectedText: "尚未選擇任何顏色" 14 | }; 15 | 16 | $.extend($.fn.spectrum.defaults, localization); 17 | 18 | })( jQuery ); 19 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Spectrum - The No Hassle jQuery Colorpicker 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 28 | 29 |
    30 |
    31 | 32 |
    33 |
    34 | 35 |
    36 | 37 |
    38 |
    39 |
    40 |
    41 | 42 |
    43 | 44 |
    45 | 46 |
      47 | <input type='color' value='#f594d0' />
      48 | 
      49 | 
    50 | 51 |

    Why A Colorpicker?

    52 |

    I wasn't satisfied with the solutions available for colorpicking. 53 | Many of them included a ton of images, were hard to skin or customize, or were very large plugins. 54 | Here are the goals I had when making a new one: 55 |

    56 | 57 |

    Small Footprint

    58 |
    see a working jsFiddle example
    59 |

    Just include the needed CSS and JavaScript files, and you are ready to go!

    60 |
      61 | <script src='spectrum.js'></script>
      62 | <link rel='stylesheet' href='spectrum.css' />
      63 | 
    64 |

    We don't need no stinkin' images!

    65 |

    Nobody wants to add a bunch of code into their project. Spectrum is contained in two files, and both are careful not to mess with your existing code.

    66 | 67 |

    Polyfill

    68 |

    I wanted an option for the most basic use case, a polyfill for the input[type=color] HTML5 control. 69 | This mode needs to work without JavaScript enabled - and fallback to an input[type=text] like other HTML5 inputs. 70 |

    71 |

    If you don't want this behavior to happen, but still want to use spectrum elsewhere on the page, you can set $.fn.spectrum.load = false; right after loading the script file.

    72 | 73 | 74 |

    Customizable

    75 |

    Just because you don't have to change anything to get it to work, doesn't mean you can't! 76 | It is easy to skin and customize the plugin with CSS, and there are a wide range of modes and options to explore. 77 |

    78 | 79 |

    Mobile Support

    80 |

    Along with desktop browser support, I wanted a mobile colorpicker that was touch friendly, worked in iOS and Android, and used standards 81 | that maximize future mobile support. 82 |

    83 | 84 |

    Devtools

    85 | 86 |

    87 | Believe it or not, this colorpicker lives inside of Chrome, Firefox, and Safari devtools to make picking colors easier for web developers and designers. 88 |

    89 | 90 |

    91 | When I started the project, I wrote about developer tools concept colorpicker implementation. After that, I was contacted on the devtools mailing list and got some initial feedback about the possibility of integrating it with devtools. Then I pulled the jQuery dependency out of a branch and I submitted a patch to the WebKit project. 92 |

    93 | 94 |

    95 | From there, I opened a bug to start working on it Web Inspector. 50+ comments and 10 patches later, the case landed in WebKit. Here is the Firefox bug where it was added. 96 |

    97 | 98 | 99 |

    Modes

    100 | 101 |

    Custom

    102 |

    If you want to get more into the functionality, just create a normal input and initialize it as a normal jQuery plugin. 103 | You can set a lot of options when initializing the colorpicker. 104 | See the 'Options' section below. 105 |

    106 | 107 |
     108 | <input type='text' id="custom" />
     109 | 
    110 | 111 |
     112 | <script>
     113 | $("#custom").spectrum({
     114 |     color: "#f00"
     115 | });
     116 | </script>
     117 | 
    118 | 119 |
    120 | 121 |
    122 | 123 |

    Flat

    124 |

    Flat 125 | This means that it will always show up at full size, 126 | and be positioned as an inline-block element. 127 | Look to the left for a full sized flat picker. 128 |

    129 | 130 |
     131 | <input type='text' id="flat" />
     132 | <br/>
     133 | <input type='text' id="flat" />
     134 | 
    135 |
     136 | $("#flat").spectrum({
     137 |     flat: true,
     138 |     showInput: true
     139 | });
     140 | $("#flatClearable").spectrum({
     141 |     flat: true,
     142 |     showInput: true,
     143 |     allowEmpty:true
     144 | });
     145 | 
    146 | 147 |
    148 | 149 |
    150 | 151 |
    152 | 153 |

    input[type=color]

    154 | 155 |

    156 | If you just want to provide a polyfill for the native color input, 157 | the easiest way is to create an input with the type of color. 158 | Once a user's browser supports a native color control, it will opt to use their native control instead. 159 |

    160 |

    Unlike the other modes, your value must be a 6 character hex value starting with a '#'. Why? Because the spec says so, that's why. 161 |

    162 | 163 |
     164 | <input type='color' name='color' />
     165 | <input type='color' name='color2' value='#3355cc' />
     166 | 
    167 |
    168 |
    169 | 170 | 171 | 172 | 173 |
    174 |
    175 |

    That's it! 176 | The field will degrade to a text input if the user does not have JavaScript enabled, 177 | so that they will still be able to manually enter a color. You don't need to add a single line of code. 178 |

    179 | 180 | 185 | 186 |

    Options

    187 |
     188 | $("#picker").spectrum({
     189 |     color: tinycolor,
     190 |     flat: bool,
     191 |     showInput: bool,
     192 |     showInitial: bool,
     193 |     allowEmpty: bool,
     194 |     showAlpha: bool,
     195 |     disabled: bool,
     196 |     localStorageKey: string,
     197 |     showPalette: bool,
     198 |     showPaletteOnly: bool,
     199 |     togglePaletteOnly: bool,
     200 |     showSelectionPalette: bool,
     201 |     clickoutFiresChange: bool,
     202 |     cancelText: string,
     203 |     chooseText: string,
     204 |     togglePaletteMoreText: string,
     205 |     togglePaletteLessText: string,
     206 |     containerClassName: string,
     207 |     replacerClassName: string,
     208 |     preferredFormat: string,
     209 |     maxSelectionSize: int,
     210 |     palette: [[string]],
     211 |     selectionPalette: [string]
     212 | });
     213 | 
    214 |
    215 | Tip: options can be specified in an options object in the spectrum initializer, like $(element).spectrum({showAlpha: true }) or on the element's markup, like <input data-show-alpha="true" />. 216 |
    217 | 218 |

    Color

    219 |
    220 |
    221 |

    222 | The initial color will be set with the color option. 223 | If you don't pass in a color, Spectrum will use the value attribute on the input. 224 |

    225 |

    226 | The color parsing is based on the TinyColor plugin. 227 | This should parse any color string you throw at it.

    228 |

    229 |
    230 | 231 |
     232 | <input type='text' class='basic' value='red' />
     233 | <input type='text' class='basic' value='#0f0' />
     234 | <input type='text' class='basic' value='blue' />
     235 | <br />
     236 | <input type='text' class='override' />
     237 | <br />
     238 | <input type='text' class='startEmpty' value='' />
     239 |             
    240 | 241 |
     242 | <script>
     243 | $(".basic").spectrum();
     244 | $(".override").spectrum({
     245 |     color: "yellow"
     246 | });
     247 | (".startEmpty").spectrum({
     248 |     allowEmpty: true
     249 | });
     250 | </script>
     251 |             
    252 |
    253 | 254 | 255 | 256 |
    257 | 258 |
    259 | 260 |
    261 |
    262 | 263 |

    Show Input

    264 |
    265 |
    266 |

    You can add an input to allow free form typing. The color parsing is very permissive in the allowed strings. See TinyColor for more details. 267 |

    268 |
     269 | $("#showInput").spectrum({
     270 |     showInput: true
     271 | });
     272 | $("#showInputWithClear").spectrum({
     273 |     showInput: true,
     274 |     allowEmpty:true
     275 | });
     276 |             
    277 |
    278 | 279 |
    280 | 281 |
    282 |
    283 | 284 |

    Show Alpha

    285 |
    286 |
    287 |

    You can allow alpha transparency selection. Check out these examples:

    288 |
    289 |
     290 | $("#showAlpha").spectrum({
     291 |     showAlpha: true
     292 | });
     293 |             
    294 |
    295 | 296 |
    297 |
    298 | 299 |
    300 |
    301 | 302 |

    Disabled

    303 |
    304 |
    305 |

    Spectrum can be automatically disabled if you pass in the disabled flag. Additionally, if the input that you initialize spectrum on is disabled, this will be the default value. Note: you cannot enable spectrum if the input is disabled (see below).

    306 |
    307 |
     308 | $("#disabled").spectrum({
     309 |     disabled: true
     310 | });
     311 | $("input:disabled").spectrum({
     312 | 
     313 | });
     314 |             
    315 |
    316 | 317 | 318 | 319 |
    320 |
    321 | 322 |

    Show Palette

    323 |
    324 |
    325 |

    Spectrum can show a palette below the colorpicker to make it convenient for users to choose from frequently or recently used colors. When the colorpicker is closed, the current color will be added to the palette if it isn't there already. Check it out here:

    326 |
    327 |
     328 | $("#showPalette").spectrum({
     329 |     showPalette: true,
     330 |     palette: [
     331 |         ['black', 'white', 'blanchedalmond'],
     332 |         ['rgb(255, 128, 0);', 'hsv 100 70 50', 'lightyellow']
     333 |     ]
     334 | });
     335 |             
    336 |
    337 | 338 | 339 | 340 |
    341 |
    342 | 343 |

    Show Palette Only

    344 |
    345 |
    see a working jsFiddle example
    346 |
    347 |

    If you'd like, spectrum can show the palettes you specify, and nothing else.

    348 |
    349 | 350 |
     351 | $("#showPaletteOnly").spectrum({
     352 |     showPaletteOnly: true,
     353 |     showPalette:true,
     354 |     color: 'blanchedalmond',
     355 |     palette: [
     356 |         ['black', 'white', 'blanchedalmond',
     357 |         'rgb(255, 128, 0);', 'hsv 100 70 50'],
     358 |         ['red', 'yellow', 'green', 'blue', 'violet']
     359 |     ]
     360 | });
     361 |             
    362 |
    363 | 364 | Result 365 | 366 | 367 | 368 |
    369 |
    370 | 371 |

    Toggle Palette Only

    372 |
    373 |
    374 |

    Spectrum can show a button to toggle the colorpicker next to the palette. This way, the user can choose from a limited number of colors in the palette, but still be able to pick a color that's not in the palette.
    375 | The default value for togglePaletteOnly is FALSE. Set it to TRUE to enable the Toggle button.

    376 | You can also change the text on the Toggle Button with the options togglePaletteMoreText (default is "more") and togglePaletteLessText (default is "less").

    377 |
    378 | 379 |
     380 | $("#togglePaletteOnly").spectrum({
     381 |     showPaletteOnly: true,
     382 |     togglePaletteOnly: true,
     383 |     togglePaletteMoreText: 'more',
     384 |     togglePaletteLessText: 'less',
     385 |     color: 'blanchedalmond',
     386 |     palette: [
     387 |         ["#000","#444","#666","#999","#ccc","#eee","#f3f3f3","#fff"],
     388 |         ["#f00","#f90","#ff0","#0f0","#0ff","#00f","#90f","#f0f"],
     389 |         ["#f4cccc","#fce5cd","#fff2cc","#d9ead3","#d0e0e3","#cfe2f3","#d9d2e9","#ead1dc"],
     390 |         ["#ea9999","#f9cb9c","#ffe599","#b6d7a8","#a2c4c9","#9fc5e8","#b4a7d6","#d5a6bd"],
     391 |         ["#e06666","#f6b26b","#ffd966","#93c47d","#76a5af","#6fa8dc","#8e7cc3","#c27ba0"],
     392 |         ["#c00","#e69138","#f1c232","#6aa84f","#45818e","#3d85c6","#674ea7","#a64d79"],
     393 |         ["#900","#b45f06","#bf9000","#38761d","#134f5c","#0b5394","#351c75","#741b47"],
     394 |         ["#600","#783f04","#7f6000","#274e13","#0c343d","#073763","#20124d","#4c1130"]
     395 |     ]
     396 | });
     397 |             
    398 |
    399 | 400 | Result 401 | 402 | 403 |
    404 |
    405 | 406 |

    Show Selection Palette

    407 |
    408 |
    409 |

    Spectrum can keep track of what has been selected by the user with the showSelectionPalette option.

    410 |

    If the localStorageKey option is defined, the selection will be saved in the browser's localStorage object

    411 |
    412 | 413 |
     414 | $("#showSelectionPalette").spectrum({
     415 |     showPalette: true,
     416 |     showSelectionPalette: true, // true by default
     417 |     palette: [ ]
     418 | });
     419 | $("#showSelectionPaletteStorage").spectrum({
     420 |     showPalette: true,
     421 |     showSelectionPalette: true,
     422 |     palette: [ ],
     423 |     localStorageKey: "spectrum.homepage", // Any Spectrum with the same string will share selection
     424 | });
     425 |             
    426 | 427 |
    428 | This colorpicker will store what you pick:

    429 |

    430 | Try switching between the two colorpickers or reloading your page, the chosen colors are always available:

    431 | 432 | 433 |
    434 |
    435 | 436 |

    Selection Palette

    437 |
    438 |
    439 |

    The default values inside of the selection palette. Make sure that showSelectionPalette and showPalette are both enabled.

    440 |

    If a localStorageKey is defined, then this value will be overwritten by it.

    441 |
    442 | 443 |
     444 | $("#selectionPalette").spectrum({
     445 |     showPalette: true,
     446 |     palette: [ ],
     447 |     showSelectionPalette: true, // true by default
     448 |     selectionPalette: ["red", "green", "blue"]
     449 | });
     450 |             
    451 | 452 |
    453 | This colorpicker has default values in the selection palette:

    454 | 455 |
    456 |
    457 | 458 |

    Max Selection Size

    459 |
    460 |
    461 |

    This is how many elements are allowed in the selectionPallete at once.

    462 |

    Elements will be removed from the palette in first in - first out order if this limit is reached.

    463 |
    464 | 465 |
     466 | $("#maxSelectionSize").spectrum({
     467 |     showPalette: true,
     468 |     palette: [ ],
     469 |     showSelectionPalette: true, // true by default
     470 |     selectionPalette: ["red", "green", "blue"],
     471 |     maxSelectionSize: 2
     472 | });
     473 |             
    474 | 475 |
    476 | This colorpicker starts removing selection palette colors older than 2:

    477 | 478 |
    479 |
    480 | 481 |

    Hide After Palette Select

    482 |
    483 |
    484 |

    You can have the colorpicker automatically hide after a palette color is selected.

    485 |
    486 | 487 |
     488 | $("#hideAfterPaletteSelect").spectrum({
     489 |     showPaletteOnly: true,
     490 |     showPalette:true,
     491 |     hideAfterPaletteSelect:true,
     492 |     color: 'blanchedalmond',
     493 |     palette: [
     494 |         ['black', 'white', 'blanchedalmond',
     495 |         'rgb(255, 128, 0);', 'hsv 100 70 50'],
     496 |         ['red', 'yellow', 'green', 'blue', 'violet']
     497 |     ]
     498 | });
     499 |             
    500 |
    501 | 502 | Result 503 | 504 | 505 | 506 |
    507 |
    508 | 509 |

    Clickout Fires Change

    510 |
    511 |
    512 |

    513 | When clicking outside of the colorpicker, you can force it to fire a change event rather than having it revert the change. This is true by default. 514 |

    515 |
    516 | 517 |
     518 | $("#clickoutFiresChange").spectrum({
     519 |     clickoutFiresChange: true
     520 | });
     521 | $("#clickoutDoesntChange").spectrum({
     522 |     clickoutFiresChange: false
     523 | });
     524 |             
    525 | 526 |
    527 | 528 | 529 |
    530 |
    531 | 532 |

    Show Initial

    533 |
    534 |
    535 |

    536 | Spectrum can show the color that was initially set when opening. 537 | This provides an easy way to click back to what was set when opened. 538 |

    539 |
    540 | 541 |
     542 | $("#showInitial").spectrum({
     543 |     showInitial: true
     544 | });
     545 |             
    546 | 547 |
    548 | 549 |
    550 |
    551 | 552 |

    Show Input and Initial

    553 |
    554 |
    555 |

    If you specify both the showInput and showInitial options, the CSS keeps things in order by wrapping the buttons to the bottom row, and shrinking the input. Note: this is all customizable via CSS.

    556 |
    557 |
     558 | $("#showInputAndInitial").spectrum({
     559 |     showInitial: true,
     560 |     showInput: true
     561 | });
     562 |             
    563 | 564 |
    565 | 566 |
    567 |
    568 |

    Show Input, Initial, and Clear

    569 |
    570 |
    571 |

    If you specify both the showInput, showInitial, and allowEmpty options, the CSS keeps things in order by wrapping the buttons to the bottom row, and shrinking the input. Note: this is all customizable via CSS.

    572 |
    573 |
     574 | $("#showInputInitialClear").spectrum({
     575 |     allowEmpty:true,
     576 |     showInitial: true,
     577 |     showInput: true
     578 | });
     579 |             
    580 | 581 |
    582 | 583 |
    584 |
    585 |

    Button Text

    586 |
    587 |
    588 |

    You can set the button's text using cancelText and chooseText properties.

    589 |
    590 | 591 |
     592 | $("#buttonText").spectrum({
     593 |     allowEmpty:true,
     594 |     chooseText: "Alright",
     595 |     cancelText: "No way"
     596 | });
     597 |             
    598 | 599 |
    600 | 601 |
    602 |
    603 | 604 |

    Show Buttons

    605 |
    606 |
    607 |

    608 | You can show or hide the buttons using the showButtons property. 609 | If there are no buttons, the behavior will be to fire the `change` event (and update the original input) when the picker is closed. 610 |

    611 |
    612 | 613 |
     614 | $("#hideButtons").spectrum({
     615 |     showButtons: false
     616 | });
     617 |             
    618 | 619 |
    620 | 621 |
    622 |
    623 | 624 |

    Container Class Name

    625 |
    626 |
    627 |

    628 | You can add an additional class name to the just the container element using the containerClassName property. 629 |

    630 |
    631 | 632 |
     633 | $("#containerClassName").spectrum({
     634 |     containerClassName: 'awesome'
     635 | });
     636 |             
    637 |
     638 | .awesome {
     639 |     background: purple;
     640 | }
     641 |             
    642 | 647 | 648 |
    649 | 650 |
    651 |
    652 | 653 |

    Replacer Class Name

    654 |
    655 |
    656 |

    657 | You can add an additional class name to just the replacer element using the replacerClassName property. 658 |

    659 |
    660 | 661 |
     662 | $("#replacerClassName").spectrum({
     663 |     replacerClassName: 'awesome'
     664 | });
     665 |             
    666 |
     667 | .awesome {
     668 |     background: purple;
     669 | }
     670 |             
    671 | 676 | 677 |
    678 | 679 |
    680 |
    681 | 682 |

    Preferred Format

    683 |
    684 |
    685 |

    You can set the format that is displayed in the text box.

    686 |

    This will also change the format that is displayed in the titles from the palette swatches.

    687 |
    688 | 689 |
     690 | $("#preferredHex").spectrum({
     691 |     preferredFormat: "hex",
     692 |     showInput: true,
     693 |     showPalette: true,
     694 |     palette: [["red", "rgba(0, 255, 0, .5)", "rgb(0, 0, 255)"]]
     695 | });
     696 | $("#preferredHex3").spectrum({
     697 |     preferredFormat: "hex3",
     698 |     showInput: true,
     699 |     showPalette: true,
     700 |     palette: [["red", "rgba(0, 255, 0, .5)", "rgb(0, 0, 255)"]]
     701 | });
     702 | $("#preferredHsl").spectrum({
     703 |     preferredFormat: "hsl",
     704 |     showInput: true,
     705 |     showPalette: true,
     706 |     palette: [["red", "rgba(0, 255, 0, .5)", "rgb(0, 0, 255)"]]
     707 | });
     708 | $("#preferredRgb").spectrum({
     709 |     preferredFormat: "rgb",
     710 |     showInput: true,
     711 |     showPalette: true,
     712 |     palette: [["red", "rgba(0, 255, 0, .5)", "rgb(0, 0, 255)"]]
     713 | });
     714 | $("#preferredName").spectrum({
     715 |     preferredFormat: "name",
     716 |     showInput: true,
     717 |     showPalette: true,
     718 |     palette: [["red", "rgba(0, 255, 0, .5)", "rgb(0, 0, 255)"]]
     719 | });
     720 | $("#preferredNone").spectrum({
     721 |     showInput: true,
     722 |     showPalette: true,
     723 |     palette: [["red", "rgba(0, 255, 0, .5)", "rgb(0, 0, 255)"]]
     724 | });
     725 |             
    726 |
    727 |
    Hex
    728 | 729 |
    Hex (3 Characters If Possible)
    730 | 731 |
    Hsl
    732 | 733 |
    Rgb
    734 | 735 |
    Name (Falls back to hex)
    736 | 737 |
    None (Depends on input - try changing formats with the text box)
    738 | 739 |
    740 |
    741 | 742 |

    appendTo

    743 |
    744 |
    745 |

    You can choose which element the colorpicker container is appended to (default is "body"). This can be any valid object taken into the jQuery appendTo function.

    746 |

    Changing this can help resolve issues with opening the colorpicker in a modal dialog or fixed position container, for instance.

    747 |
    748 | 749 |
    750 |

    Events

    751 | 752 |
     753 | // Events can be bound in the intialization process as options:
     754 | $("#picker").spectrum({
     755 |     move: function(tinycolor) { },
     756 |     show: function(tinycolor) { },
     757 |     hide: function(tinycolor) { },
     758 |     beforeShow: function(tinycolor) { },
     759 | });
     760 | 
     761 | // Alternatively, they can be added as an event listener:
     762 | $("#picker").on('move.spectrum', function(e, tinycolor) { });
     763 | $("#picker").on('show.spectrum', function(e, tinycolor) { });
     764 | $("#picker").on('hide.spectrum', function(e, tinycolor) { });
     765 | $("#picker").on('beforeShow.spectrum', function(e, tinycolor) { });
     766 | 
    767 | 768 |

    change

    769 |
    770 |
    771 |

    Called as the original input changes. Only happens when the input is closed or the 'Choose' button is clicked.

    772 |
    773 | 774 |
     775 | change: function(color) {
     776 |     color.toHexString(); // #ff0000
     777 | }
     778 |             
    779 | 780 |
    781 | 782 | 783 |
    784 |
    785 | 786 |

    move

    787 | 788 |
    789 |
    790 |

    Called as the user moves around within the colorpicker

    791 |
    792 | 793 |
     794 | move: function(color) {
     795 |     color.toHexString(); // #ff0000
     796 | }
     797 |             
    798 | 799 |
    800 | 801 | 802 |
    803 |
    804 | 805 |

    hide

    806 | 807 |
    808 |
    809 | 810 |

    811 | Called after the colorpicker is hidden. 812 | This happens when clicking outside of the picker while it is open. 813 | Note, when any colorpicker on the page is shown it will hide any that are already open. 814 | This event is ignored on a flat colorpicker. 815 |

    816 |
    817 | 818 |
     819 | hide: function(color) {
     820 |     color.toHexString(); // #ff0000
     821 | }
     822 |             
    823 | 824 |
    825 | 826 | 827 |
    828 |
    829 | 830 |

    show

    831 | 832 |
    833 |
    834 |

    835 | Called after the colorpicker is opened. 836 | This is ignored on a flat colorpicker. 837 | Note, when any colorpicker on the page is shown it will hide any that are already open. 838 |

    839 |
    840 | 841 |
     842 | show: function(color) {
     843 |     color.toHexString(); // #ff0000
     844 | }
     845 |             
    846 | 847 |
    848 | 849 | 850 |
    851 |
    852 | 853 |

    beforeShow

    854 | 855 |
    856 |
    857 |

    858 | You can prevent the colorpicker from showing up if you return false in the beforeShow event. 859 | This event is ignored on a flat colorpicker. 860 |

    861 |
    862 | 863 |
     864 | beforeShow: function(color) {
     865 |     return false; // Will never show up
     866 | }
     867 |             
    868 | 869 |
    870 | 871 |
    872 |
    873 | 874 |

    dragstart

    875 | 876 |
    877 |
    878 |

    879 | Called at the beginning of a drag event on either 880 | hue slider, alpha slider, or main color picker areas 881 |

    882 |
    883 | 884 |
     885 | $(element).on("dragstart.spectrum", function(e, color) {
     886 |     color.toHexString(); // #ff0000
     887 | });
     888 |             
    889 | 890 |
    891 | 892 | 893 |
    894 |
    895 | 896 |

    dragstop

    897 | 898 |
    899 |
    900 |

    901 | Called at the end of a drag event on either 902 | hue slider, alpha slider, or main color picker areas 903 |

    904 |
    905 | 906 |
     907 | $(element).on("dragstop.spectrum", function(e, color) {
     908 |     color.toHexString(); // #ff0000
     909 | });
     910 |             
    911 | 912 |
    913 | 914 | 915 |
    916 |
    917 | 918 | 919 |

    Methods

    920 |
     921 | $("#picker").spectrum("show");
     922 | $("#picker").spectrum("hide");
     923 | $("#picker").spectrum("toggle");
     924 | $("#picker").spectrum("get");
     925 | $("#picker").spectrum("set", colorString);
     926 | $("#picker").spectrum("container");
     927 | $("#picker").spectrum("reflow");
     928 | $("#picker").spectrum("destroy");
     929 | $("#picker").spectrum("enable");
     930 | $("#picker").spectrum("disable");
     931 | $("#picker").spectrum("option", optionName);
     932 | $("#picker").spectrum("option", optionName, newOptionValue);
     933 | 
    934 | 935 |

    show

    936 | 937 |
    938 |
    939 |

    940 | Shows the colorpicker. 941 |

    942 |
    943 |
    944 | 945 |

    hide

    946 | 947 |
    948 |
    949 |

    950 | Hides the colorpicker. 951 |

    952 |
    953 |
    954 | 955 |

    toggle

    956 | 957 |
    958 |
    959 |

    960 | Toggles the colorpicker. 961 |

    962 |

    963 | Warning: If you are calling toggle from a click handler, make sure you return false to prevent the colorpicker from immediately hiding after it is toggled. 964 |

    965 |
    966 | 967 |
     968 | $("#btn-toggle").click(function() {
     969 |     $("#toggle").spectrum("toggle");
     970 |     return false;
     971 | });
     972 |             
    973 | 974 |
    975 | 976 | 977 |
    978 |
    979 | 980 |

    get

    981 | 982 |
    983 |
    984 |

    985 | Gets the current value from the colorpicker. 986 |

    987 |
    988 |
    989 | 990 |

    set

    991 | 992 |
    993 |
    994 |

    995 | Setting the colorpicker programmatically will update the original input. 996 |

    997 |

    998 | Note: this will not fire the change event, 999 | to prevent infinite loops from calling set from within change. 1000 |

    1001 |
    1002 | 1003 |
    1004 | <input type='text' value='blanchedalmond' name='triggerSet' id='triggerSet' />
    1005 | <input type='text' placeholder='Enter A Color' id='enterAColor' />
    1006 | <button id='btnEnterAColor'>Trigger Set</button>
    1007 | 
    1008 | <script>
    1009 | $("#triggerSet").spectrum();
    1010 | 
    1011 | // Show the original input to demonstrate the value changing when calling `set`
    1012 | $("#triggerSet").show();
    1013 | 
    1014 | $("#btnEnterAColor").click(function() {
    1015 |     $("#triggerSet").spectrum("set", $("#enterAColor").val());
    1016 | });
    1017 | </script>
    1018 |             
    1019 | 1020 |
    1021 |

    1022 | 1023 |
    1024 |
    1025 | 1026 |

    container

    1027 | 1028 |
    1029 |
    1030 |

    1031 | Retrieves the container element of the colorpicker, in case you want to manaully position it or do other things. 1032 |

    1033 |
    1034 |
    1035 | 1036 |

    reflow

    1037 | 1038 |
    1039 |
    1040 |

    1041 | Resets the positioning of the container element. This could be used was hidden when initialized, or if the colorpicker is inside of a moving area. 1042 |

    1043 |
    1044 |
    1045 | 1046 |

    destroy

    1047 | 1048 |
    1049 |
    1050 |

    1051 | Removes the colorpicker functionality and restores the element to its original state. 1052 |

    1053 |
    1054 |
    1055 | 1056 |

    enable

    1057 | 1058 |
    1059 |
    1060 |

    1061 | Allows selection of the colorpicker component. If it is already enabled, this method does nothing. 1062 |

    1063 |

    1064 | Additionally, this will cause the original (now hidden) input to be set as disabled. 1065 |

    1066 |
    1067 |
    1068 | 1069 |

    disable

    1070 | 1071 |
    1072 |
    1073 |

    1074 | Disables selection of the colorpicker component. Adds the sp-disabled class onto the replacer element. If it is already disabled, this method does nothing. 1075 |

    1076 |

    1077 | Additionally, this will remove the disabled property on the original (now hidden). 1078 |

    1079 |
    1080 |
    1081 | 1082 |

    option

    1083 | 1084 |
    1085 |
    1086 |

    1087 | Calling option with an option name will return the current value of that option. So, for example: 1088 |

    1089 |
    1090 | $("input").spectrum({
    1091 |     showInput: true
    1092 | });
    1093 | 
    1094 | $("input").spectrum("option", "showInput"); // true
    1095 |                 
    1096 |

    1097 | Calling option with an option name and an option value will set the option to the new value. 1098 |

    1099 |
    1100 | $("input").spectrum({
    1101 |     showInput: true
    1102 | });
    1103 | 
    1104 | $("input").spectrum("option", "showInput", false);
    1105 | $("input").spectrum("option", "showInput"); // false
    1106 |                 
    1107 |
    1108 |
    1109 | 1110 | 1111 |

    Skinning

    1112 | 1113 |

    Since it is all built with HTML/CSS, you can skin it easily. There are two parts to the spectrum.css file, the core rules (at the top of the file), and the themable rules (at the bottom). Feel free to tweak these rules to make it look how you want.

    1114 | 1115 |

    Non-input elements

    1116 |

    1117 | You can use any element you would like to trigger the colorpicker: Click me to open a colorpicker, though it is strongly recommended to stick with <input> tags. 1118 |

    1119 | 1120 |

    Nitty Gritty

    1121 | 1122 |

    Browser Support

    1123 |

    I wanted this to work in the latest and greatest browsers, but also target backwords compatibility and mobile support. 1124 | Here are the currently supported browers: 1125 |

      1126 |
    • IE 6+
    • 1127 |
    • Chrome 4+
    • 1128 |
    • Firefox 3.6+
    • 1129 |
    • Safari 4+
    • 1130 |
    • Opera 11.1+
    • 1131 |
    • iOS
    • 1132 |
    1133 | 1134 |

    IE Implementation

    1135 |

    1136 | IE Support is provided using 1137 | proprietary filters. 1138 | Other browsers use CSS gradients. 1139 |

    1140 | 1141 | 1142 |

    Accepted Color Inputs

    1143 |

    Spectrum will use the color passed in to initialize. If there is no color passed in, 1144 | it will try to parse a color based on the value of the input. The color parsing is based on the TinyColor plugin, and accepts many forms of input:

    1145 |
    1146 | red
    1147 | #fff
    1148 | fff
    1149 | #ffffff
    1150 | ffffff
    1151 | rgb(255, 0, 0)
    1152 | rgb 255 0 0
    1153 | hsl(0, 100, 50)
    1154 | hsl(0, 100%, 50%)
    1155 | hsl 0 100 50
    1156 | hsl 0 100% 50%
    1157 | hsv(0, 100%, 100%)
    1158 | hsv(0, 100, 100)
    1159 | hsv 0 100% 100%
    1160 | hsv 0 100 100
    1161 | 
    1162 |

    It also provides the following forms of output:

    1163 |
    1164 | var t = $("#element").spectrum("get");
    1165 | t.toHex()       // "ff0000"
    1166 | t.toHexString() // "#ff0000"
    1167 | t.toRgb()       // {"r":255,"g":0,"b":0}
    1168 | t.toRgbString() // "rgb(255, 0, 0)"
    1169 | t.toHsv()       // {"h":0,"s":1,"v":1}
    1170 | t.toHsvString() // "hsv(0, 100%, 100%)"
    1171 | t.toHsl()       // {"h":0,"s":1,"l":0.5}
    1172 | t.toHslString() // "hsl(0, 100%, 50%)"
    1173 | t.toName()      // "red"
    1174 | 
    1175 | 1176 | 1177 | 1194 | 1195 |
    1196 | 1197 |
    1198 | 1199 | 1200 | 1213 | 1214 | 1215 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "spectrum-colorpicker", 3 | "description": "Spectrum: the no hassle jQuery colorpicker", 4 | "version": "1.8.1", 5 | "main": "spectrum.js", 6 | "license": "MIT", 7 | "keywords": [ 8 | "jquery-plugin", 9 | "ecosystem:jquery", 10 | "color", 11 | "colorpicker", 12 | "ui" 13 | ], 14 | "homepage": "http://bgrins.github.com/spectrum", 15 | "repository": { 16 | "type": "git", 17 | "url": "https://bgrins.github.com/spectrum" 18 | }, 19 | "author": { 20 | "name": "Brian Grinstead", 21 | "email": "briangrinstead@gmail.com", 22 | "url": "http://briangrinstead.com/" 23 | }, 24 | "devDependencies": { 25 | "grunt": "^1.1.0", 26 | "grunt-contrib-jshint": "^2.1.0", 27 | "grunt-contrib-qunit": "^3.1.0", 28 | "grunt-contrib-uglify": "^4.0.1" 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /spectrum.css: -------------------------------------------------------------------------------- 1 | /*** 2 | Spectrum Colorpicker v1.8.1 3 | https://github.com/bgrins/spectrum 4 | Author: Brian Grinstead 5 | License: MIT 6 | ***/ 7 | 8 | .sp-container { 9 | position:absolute; 10 | top:0; 11 | left:0; 12 | display:inline-block; 13 | *display: inline; 14 | *zoom: 1; 15 | /* https://github.com/bgrins/spectrum/issues/40 */ 16 | z-index: 9999994; 17 | overflow: hidden; 18 | } 19 | .sp-container.sp-flat { 20 | position: relative; 21 | } 22 | 23 | /* Fix for * { box-sizing: border-box; } */ 24 | .sp-container, 25 | .sp-container * { 26 | -webkit-box-sizing: content-box; 27 | -moz-box-sizing: content-box; 28 | box-sizing: content-box; 29 | } 30 | 31 | /* http://ansciath.tumblr.com/post/7347495869/css-aspect-ratio */ 32 | .sp-top { 33 | position:relative; 34 | width: 100%; 35 | display:inline-block; 36 | } 37 | .sp-top-inner { 38 | position:absolute; 39 | top:0; 40 | left:0; 41 | bottom:0; 42 | right:0; 43 | } 44 | .sp-color { 45 | position: absolute; 46 | top:0; 47 | left:0; 48 | bottom:0; 49 | right:20%; 50 | } 51 | .sp-hue { 52 | position: absolute; 53 | top:0; 54 | right:0; 55 | bottom:0; 56 | left:84%; 57 | height: 100%; 58 | } 59 | 60 | .sp-clear-enabled .sp-hue { 61 | top:33px; 62 | height: 77.5%; 63 | } 64 | 65 | .sp-fill { 66 | padding-top: 80%; 67 | } 68 | .sp-sat, .sp-val { 69 | position: absolute; 70 | top:0; 71 | left:0; 72 | right:0; 73 | bottom:0; 74 | } 75 | 76 | .sp-alpha-enabled .sp-top { 77 | margin-bottom: 18px; 78 | } 79 | .sp-alpha-enabled .sp-alpha { 80 | display: block; 81 | } 82 | .sp-alpha-handle { 83 | position:absolute; 84 | top:-4px; 85 | bottom: -4px; 86 | width: 6px; 87 | left: 50%; 88 | cursor: pointer; 89 | border: 1px solid black; 90 | background: white; 91 | opacity: .8; 92 | } 93 | .sp-alpha { 94 | display: none; 95 | position: absolute; 96 | bottom: -14px; 97 | right: 0; 98 | left: 0; 99 | height: 8px; 100 | } 101 | .sp-alpha-inner { 102 | border: solid 1px #333; 103 | } 104 | 105 | .sp-clear { 106 | display: none; 107 | } 108 | 109 | .sp-clear.sp-clear-display { 110 | background-position: center; 111 | } 112 | 113 | .sp-clear-enabled .sp-clear { 114 | display: block; 115 | position:absolute; 116 | top:0px; 117 | right:0; 118 | bottom:0; 119 | left:84%; 120 | height: 28px; 121 | } 122 | 123 | /* Don't allow text selection */ 124 | .sp-container, .sp-replacer, .sp-preview, .sp-dragger, .sp-slider, .sp-alpha, .sp-clear, .sp-alpha-handle, .sp-container.sp-dragging .sp-input, .sp-container button { 125 | -webkit-user-select:none; 126 | -moz-user-select: -moz-none; 127 | -o-user-select:none; 128 | user-select: none; 129 | } 130 | 131 | .sp-container.sp-input-disabled .sp-input-container { 132 | display: none; 133 | } 134 | .sp-container.sp-buttons-disabled .sp-button-container { 135 | display: none; 136 | } 137 | .sp-container.sp-palette-buttons-disabled .sp-palette-button-container { 138 | display: none; 139 | } 140 | .sp-palette-only .sp-picker-container { 141 | display: none; 142 | } 143 | .sp-palette-disabled .sp-palette-container { 144 | display: none; 145 | } 146 | 147 | .sp-initial-disabled .sp-initial { 148 | display: none; 149 | } 150 | 151 | 152 | /* Gradients for hue, saturation and value instead of images. Not pretty... but it works */ 153 | .sp-sat { 154 | background-image: -webkit-gradient(linear, 0 0, 100% 0, from(#FFF), to(rgba(204, 154, 129, 0))); 155 | background-image: -webkit-linear-gradient(left, #FFF, rgba(204, 154, 129, 0)); 156 | background-image: -moz-linear-gradient(left, #fff, rgba(204, 154, 129, 0)); 157 | background-image: -o-linear-gradient(left, #fff, rgba(204, 154, 129, 0)); 158 | background-image: -ms-linear-gradient(left, #fff, rgba(204, 154, 129, 0)); 159 | background-image: linear-gradient(to right, #fff, rgba(204, 154, 129, 0)); 160 | -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr=#FFFFFFFF, endColorstr=#00CC9A81)"; 161 | filter : progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr='#FFFFFFFF', endColorstr='#00CC9A81'); 162 | } 163 | .sp-val { 164 | background-image: -webkit-gradient(linear, 0 100%, 0 0, from(#000000), to(rgba(204, 154, 129, 0))); 165 | background-image: -webkit-linear-gradient(bottom, #000000, rgba(204, 154, 129, 0)); 166 | background-image: -moz-linear-gradient(bottom, #000, rgba(204, 154, 129, 0)); 167 | background-image: -o-linear-gradient(bottom, #000, rgba(204, 154, 129, 0)); 168 | background-image: -ms-linear-gradient(bottom, #000, rgba(204, 154, 129, 0)); 169 | background-image: linear-gradient(to top, #000, rgba(204, 154, 129, 0)); 170 | -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00CC9A81, endColorstr=#FF000000)"; 171 | filter : progid:DXImageTransform.Microsoft.gradient(startColorstr='#00CC9A81', endColorstr='#FF000000'); 172 | } 173 | 174 | .sp-hue { 175 | background: -moz-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%); 176 | background: -ms-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%); 177 | background: -o-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%); 178 | background: -webkit-gradient(linear, left top, left bottom, from(#ff0000), color-stop(0.17, #ffff00), color-stop(0.33, #00ff00), color-stop(0.5, #00ffff), color-stop(0.67, #0000ff), color-stop(0.83, #ff00ff), to(#ff0000)); 179 | background: -webkit-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%); 180 | background: linear-gradient(to bottom, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%); 181 | } 182 | 183 | /* IE filters do not support multiple color stops. 184 | Generate 6 divs, line them up, and do two color gradients for each. 185 | Yes, really. 186 | */ 187 | .sp-1 { 188 | height:17%; 189 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0000', endColorstr='#ffff00'); 190 | } 191 | .sp-2 { 192 | height:16%; 193 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff00', endColorstr='#00ff00'); 194 | } 195 | .sp-3 { 196 | height:17%; 197 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ff00', endColorstr='#00ffff'); 198 | } 199 | .sp-4 { 200 | height:17%; 201 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffff', endColorstr='#0000ff'); 202 | } 203 | .sp-5 { 204 | height:16%; 205 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0000ff', endColorstr='#ff00ff'); 206 | } 207 | .sp-6 { 208 | height:17%; 209 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff00ff', endColorstr='#ff0000'); 210 | } 211 | 212 | .sp-hidden { 213 | display: none !important; 214 | } 215 | 216 | /* Clearfix hack */ 217 | .sp-cf:before, .sp-cf:after { content: ""; display: table; } 218 | .sp-cf:after { clear: both; } 219 | .sp-cf { *zoom: 1; } 220 | 221 | /* Mobile devices, make hue slider bigger so it is easier to slide */ 222 | @media (max-device-width: 480px) { 223 | .sp-color { right: 40%; } 224 | .sp-hue { left: 63%; } 225 | .sp-fill { padding-top: 60%; } 226 | } 227 | .sp-dragger { 228 | border-radius: 5px; 229 | height: 5px; 230 | width: 5px; 231 | border: 1px solid #fff; 232 | background: #000; 233 | cursor: pointer; 234 | position:absolute; 235 | top:0; 236 | left: 0; 237 | } 238 | .sp-slider { 239 | position: absolute; 240 | top:0; 241 | cursor:pointer; 242 | height: 3px; 243 | left: -1px; 244 | right: -1px; 245 | border: 1px solid #000; 246 | background: white; 247 | opacity: .8; 248 | } 249 | 250 | /* 251 | Theme authors: 252 | Here are the basic themeable display options (colors, fonts, global widths). 253 | See http://bgrins.github.io/spectrum/themes/ for instructions. 254 | */ 255 | 256 | .sp-container { 257 | border-radius: 0; 258 | background-color: #ECECEC; 259 | border: solid 1px #f0c49B; 260 | padding: 0; 261 | } 262 | .sp-container, .sp-container button, .sp-container input, .sp-color, .sp-hue, .sp-clear { 263 | font: normal 12px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif; 264 | -webkit-box-sizing: border-box; 265 | -moz-box-sizing: border-box; 266 | -ms-box-sizing: border-box; 267 | box-sizing: border-box; 268 | } 269 | .sp-top { 270 | margin-bottom: 3px; 271 | } 272 | .sp-color, .sp-hue, .sp-clear { 273 | border: solid 1px #666; 274 | } 275 | 276 | /* Input */ 277 | .sp-input-container { 278 | float:right; 279 | width: 100px; 280 | margin-bottom: 4px; 281 | } 282 | .sp-initial-disabled .sp-input-container { 283 | width: 100%; 284 | } 285 | .sp-input { 286 | font-size: 12px !important; 287 | border: 1px inset; 288 | padding: 4px 5px; 289 | margin: 0; 290 | width: 100%; 291 | background:transparent; 292 | border-radius: 3px; 293 | color: #222; 294 | } 295 | .sp-input:focus { 296 | border: 1px solid orange; 297 | } 298 | .sp-input.sp-validation-error { 299 | border: 1px solid red; 300 | background: #fdd; 301 | } 302 | .sp-picker-container , .sp-palette-container { 303 | float:left; 304 | position: relative; 305 | padding: 10px; 306 | padding-bottom: 300px; 307 | margin-bottom: -290px; 308 | } 309 | .sp-picker-container { 310 | width: 172px; 311 | border-left: solid 1px #fff; 312 | } 313 | 314 | /* Palettes */ 315 | .sp-palette-container { 316 | border-right: solid 1px #ccc; 317 | } 318 | 319 | .sp-palette-only .sp-palette-container { 320 | border: 0; 321 | } 322 | 323 | .sp-palette .sp-thumb-el { 324 | display: block; 325 | position:relative; 326 | float:left; 327 | width: 24px; 328 | height: 15px; 329 | margin: 3px; 330 | cursor: pointer; 331 | border:solid 2px transparent; 332 | } 333 | .sp-palette .sp-thumb-el:hover, .sp-palette .sp-thumb-el.sp-thumb-active { 334 | border-color: orange; 335 | } 336 | .sp-thumb-el { 337 | position:relative; 338 | } 339 | 340 | /* Initial */ 341 | .sp-initial { 342 | float: left; 343 | border: solid 1px #333; 344 | } 345 | .sp-initial span { 346 | width: 30px; 347 | height: 25px; 348 | border:none; 349 | display:block; 350 | float:left; 351 | margin:0; 352 | } 353 | 354 | .sp-initial .sp-clear-display { 355 | background-position: center; 356 | } 357 | 358 | /* Buttons */ 359 | .sp-palette-button-container, 360 | .sp-button-container { 361 | float: right; 362 | } 363 | 364 | /* Replacer (the little preview div that shows up instead of the ) */ 365 | .sp-replacer { 366 | margin:0; 367 | overflow:hidden; 368 | cursor:pointer; 369 | padding: 4px; 370 | display:inline-block; 371 | *zoom: 1; 372 | *display: inline; 373 | border: solid 1px #91765d; 374 | background: #eee; 375 | color: #333; 376 | vertical-align: middle; 377 | } 378 | .sp-replacer:hover, .sp-replacer.sp-active { 379 | border-color: #F0C49B; 380 | color: #111; 381 | } 382 | .sp-replacer.sp-disabled { 383 | cursor:default; 384 | border-color: silver; 385 | color: silver; 386 | } 387 | .sp-dd { 388 | padding: 2px 0; 389 | height: 16px; 390 | line-height: 16px; 391 | float:left; 392 | font-size:10px; 393 | } 394 | .sp-preview { 395 | position:relative; 396 | width:25px; 397 | height: 20px; 398 | border: solid 1px #222; 399 | margin-right: 5px; 400 | float:left; 401 | z-index: 0; 402 | } 403 | 404 | .sp-palette { 405 | *width: 220px; 406 | max-width: 220px; 407 | } 408 | .sp-palette .sp-thumb-el { 409 | width:16px; 410 | height: 16px; 411 | margin:2px 1px; 412 | border: solid 1px #d0d0d0; 413 | } 414 | 415 | .sp-container { 416 | padding-bottom:0; 417 | } 418 | 419 | 420 | /* Buttons: http://hellohappy.org/css3-buttons/ */ 421 | .sp-container button { 422 | background-color: #eeeeee; 423 | background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc); 424 | background-image: -moz-linear-gradient(top, #eeeeee, #cccccc); 425 | background-image: -ms-linear-gradient(top, #eeeeee, #cccccc); 426 | background-image: -o-linear-gradient(top, #eeeeee, #cccccc); 427 | background-image: linear-gradient(to bottom, #eeeeee, #cccccc); 428 | border: 1px solid #ccc; 429 | border-bottom: 1px solid #bbb; 430 | border-radius: 3px; 431 | color: #333; 432 | font-size: 14px; 433 | line-height: 1; 434 | padding: 5px 4px; 435 | text-align: center; 436 | text-shadow: 0 1px 0 #eee; 437 | vertical-align: middle; 438 | } 439 | .sp-container button:hover { 440 | background-color: #dddddd; 441 | background-image: -webkit-linear-gradient(top, #dddddd, #bbbbbb); 442 | background-image: -moz-linear-gradient(top, #dddddd, #bbbbbb); 443 | background-image: -ms-linear-gradient(top, #dddddd, #bbbbbb); 444 | background-image: -o-linear-gradient(top, #dddddd, #bbbbbb); 445 | background-image: linear-gradient(to bottom, #dddddd, #bbbbbb); 446 | border: 1px solid #bbb; 447 | border-bottom: 1px solid #999; 448 | cursor: pointer; 449 | text-shadow: 0 1px 0 #ddd; 450 | } 451 | .sp-container button:active { 452 | border: 1px solid #aaa; 453 | border-bottom: 1px solid #888; 454 | -webkit-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee; 455 | -moz-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee; 456 | -ms-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee; 457 | -o-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee; 458 | box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee; 459 | } 460 | .sp-cancel { 461 | font-size: 11px; 462 | color: #d93f3f !important; 463 | margin:0; 464 | padding:2px; 465 | margin-right: 5px; 466 | vertical-align: middle; 467 | text-decoration:none; 468 | 469 | } 470 | .sp-cancel:hover { 471 | color: #d93f3f !important; 472 | text-decoration: underline; 473 | } 474 | 475 | 476 | .sp-palette span:hover, .sp-palette span.sp-thumb-active { 477 | border-color: #000; 478 | } 479 | 480 | .sp-preview, .sp-alpha, .sp-thumb-el { 481 | position:relative; 482 | background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==); 483 | } 484 | .sp-preview-inner, .sp-alpha-inner, .sp-thumb-inner { 485 | display:block; 486 | position:absolute; 487 | top:0;left:0;bottom:0;right:0; 488 | } 489 | 490 | .sp-palette .sp-thumb-inner { 491 | background-position: 50% 50%; 492 | background-repeat: no-repeat; 493 | } 494 | 495 | .sp-palette .sp-thumb-light.sp-thumb-active .sp-thumb-inner { 496 | background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAIVJREFUeNpiYBhsgJFMffxAXABlN5JruT4Q3wfi/0DsT64h8UD8HmpIPCWG/KemIfOJCUB+Aoacx6EGBZyHBqI+WsDCwuQ9mhxeg2A210Ntfo8klk9sOMijaURm7yc1UP2RNCMbKE9ODK1HM6iegYLkfx8pligC9lCD7KmRof0ZhjQACDAAceovrtpVBRkAAAAASUVORK5CYII=); 497 | } 498 | 499 | .sp-palette .sp-thumb-dark.sp-thumb-active .sp-thumb-inner { 500 | background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAMdJREFUOE+tkgsNwzAMRMugEAahEAahEAZhEAqlEAZhEAohEAYh81X2dIm8fKpEspLGvudPOsUYpxE2BIJCroJmEW9qJ+MKaBFhEMNabSy9oIcIPwrB+afvAUFoK4H0tMaQ3XtlrggDhOVVMuT4E5MMG0FBbCEYzjYT7OxLEvIHQLY2zWwQ3D+9luyOQTfKDiFD3iUIfPk8VqrKjgAiSfGFPecrg6HN6m/iBcwiDAo7WiBeawa+Kwh7tZoSCGLMqwlSAzVDhoK+6vH4G0P5wdkAAAAASUVORK5CYII=); 501 | } 502 | 503 | .sp-clear-display { 504 | background-repeat:no-repeat; 505 | background-position: center; 506 | background-image: url(data:image/gif;base64,R0lGODlhFAAUAPcAAAAAAJmZmZ2dnZ6enqKioqOjo6SkpKWlpaampqenp6ioqKmpqaqqqqurq/Hx8fLy8vT09PX19ff39/j4+Pn5+fr6+vv7+wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAP8ALAAAAAAUABQAAAihAP9FoPCvoMGDBy08+EdhQAIJCCMybCDAAYUEARBAlFiQQoMABQhKUJBxY0SPICEYHBnggEmDKAuoPMjS5cGYMxHW3IiT478JJA8M/CjTZ0GgLRekNGpwAsYABHIypcAgQMsITDtWJYBR6NSqMico9cqR6tKfY7GeBCuVwlipDNmefAtTrkSzB1RaIAoXodsABiZAEFB06gIBWC1mLVgBa0AAOw==); 507 | } 508 | -------------------------------------------------------------------------------- /test/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Spectrum Tests 6 | 7 | 8 | 9 | 10 |
    11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /test/loaders.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Spectrum Tests 6 | 7 | 8 | 9 | 10 |
    11 | 12 | 13 | -------------------------------------------------------------------------------- /test/loaders.js: -------------------------------------------------------------------------------- 1 | 2 | require(["../spectrum", "./qunit"], function (spectrum, QUnit) { 3 | QUnit.module("Initialization"); 4 | QUnit.test("Custom offset", function (assert) { 5 | assert.ok($.fn.spectrum, "Plugin has been loaded"); 6 | 7 | // Just do some basic stuff with the API as a sanity check. 8 | var el = $("").spectrum(); 9 | el.spectrum("set", "red"); 10 | assert.equal(el.spectrum("get").toName(), "red", "Basic color setting"); 11 | el.spectrum("destroy"); 12 | }); 13 | 14 | QUnit.start(); 15 | }); 16 | -------------------------------------------------------------------------------- /test/qunit.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * QUnit 2.10.0 3 | * https://qunitjs.com/ 4 | * 5 | * Copyright jQuery Foundation and other contributors 6 | * Released under the MIT license 7 | * https://jquery.org/license 8 | * 9 | * Date: 2020-05-02T22:51Z 10 | */ 11 | 12 | /** Font Family and Sizes */ 13 | 14 | 15 | [id^=qunit] button { 16 | font-size: initial; 17 | border: initial; 18 | background-color: buttonface; 19 | } 20 | 21 | #qunit-tests, #qunit-header, #qunit-banner, #qunit-testrunner-toolbar, #qunit-filteredTest, #qunit-userAgent, #qunit-testresult { 22 | font-family: "Helvetica Neue Light", "HelveticaNeue-Light", "Helvetica Neue", Calibri, Helvetica, Arial, sans-serif; 23 | } 24 | 25 | #qunit-testrunner-toolbar, #qunit-filteredTest, #qunit-userAgent, #qunit-testresult, #qunit-tests li { font-size: small; } 26 | #qunit-tests { font-size: smaller; } 27 | 28 | 29 | /** Resets */ 30 | 31 | #qunit-tests, #qunit-header, #qunit-banner, #qunit-filteredTest, #qunit-userAgent, #qunit-testresult, #qunit-modulefilter { 32 | margin: 0; 33 | padding: 0; 34 | } 35 | 36 | 37 | /** Header (excluding toolbar) */ 38 | 39 | #qunit-header { 40 | padding: 0.5em 0 0.5em 1em; 41 | 42 | color: #8699A4; 43 | background-color: #0D3349; 44 | 45 | font-size: 1.5em; 46 | line-height: 1em; 47 | font-weight: 400; 48 | 49 | border-radius: 5px 5px 0 0; 50 | } 51 | 52 | #qunit-header a { 53 | text-decoration: none; 54 | color: #C2CCD1; 55 | } 56 | 57 | #qunit-header a:hover, 58 | #qunit-header a:focus { 59 | color: #FFF; 60 | } 61 | 62 | #qunit-banner { 63 | height: 5px; 64 | } 65 | 66 | #qunit-filteredTest { 67 | padding: 0.5em 1em 0.5em 1em; 68 | color: #366097; 69 | background-color: #F4FF77; 70 | } 71 | 72 | #qunit-userAgent { 73 | padding: 0.5em 1em 0.5em 1em; 74 | color: #FFF; 75 | background-color: #2B81AF; 76 | text-shadow: rgba(0, 0, 0, 0.5) 2px 2px 1px; 77 | } 78 | 79 | 80 | /** Toolbar */ 81 | 82 | #qunit-testrunner-toolbar { 83 | padding: 0.5em 1em 0.5em 1em; 84 | color: #5E740B; 85 | background-color: #EEE; 86 | } 87 | 88 | #qunit-testrunner-toolbar .clearfix { 89 | height: 0; 90 | clear: both; 91 | } 92 | 93 | #qunit-testrunner-toolbar label { 94 | display: inline-block; 95 | } 96 | 97 | #qunit-testrunner-toolbar input[type=checkbox], 98 | #qunit-testrunner-toolbar input[type=radio] { 99 | margin: 3px; 100 | vertical-align: -2px; 101 | } 102 | 103 | #qunit-testrunner-toolbar input[type=text] { 104 | box-sizing: border-box; 105 | height: 1.6em; 106 | } 107 | 108 | #qunit-toolbar-filters { 109 | float: right; 110 | } 111 | 112 | .qunit-url-config, 113 | .qunit-filter, 114 | #qunit-modulefilter { 115 | display: inline-block; 116 | line-height: 2.1em; 117 | } 118 | 119 | .qunit-filter, 120 | #qunit-modulefilter { 121 | position: relative; 122 | margin-left: 1em; 123 | } 124 | 125 | .qunit-url-config label { 126 | margin-right: 0.5em; 127 | } 128 | 129 | #qunit-modulefilter-search { 130 | box-sizing: border-box; 131 | min-width: 400px; 132 | } 133 | 134 | #qunit-modulefilter-search-container:after { 135 | position: absolute; 136 | right: 0.3em; 137 | content: "\25bc"; 138 | color: black; 139 | } 140 | 141 | #qunit-modulefilter-dropdown { 142 | /* align with #qunit-modulefilter-search */ 143 | box-sizing: border-box; 144 | min-width: 400px; 145 | position: absolute; 146 | right: 0; 147 | top: 50%; 148 | margin-top: 0.8em; 149 | 150 | border: 1px solid #D3D3D3; 151 | border-top: none; 152 | border-radius: 0 0 .25em .25em; 153 | color: #000; 154 | background-color: #F5F5F5; 155 | z-index: 99; 156 | } 157 | 158 | #qunit-modulefilter-dropdown a { 159 | color: inherit; 160 | text-decoration: none; 161 | } 162 | 163 | #qunit-modulefilter-dropdown .clickable.checked { 164 | font-weight: bold; 165 | color: #000; 166 | background-color: #D2E0E6; 167 | } 168 | 169 | #qunit-modulefilter-dropdown .clickable:hover { 170 | color: #FFF; 171 | background-color: #0D3349; 172 | } 173 | 174 | #qunit-modulefilter-actions { 175 | display: block; 176 | overflow: auto; 177 | 178 | /* align with #qunit-modulefilter-dropdown-list */ 179 | font: smaller/1.5em sans-serif; 180 | } 181 | 182 | #qunit-modulefilter-dropdown #qunit-modulefilter-actions > * { 183 | box-sizing: border-box; 184 | max-height: 2.8em; 185 | display: block; 186 | padding: 0.4em; 187 | } 188 | 189 | #qunit-modulefilter-dropdown #qunit-modulefilter-actions > button { 190 | float: right; 191 | font: inherit; 192 | } 193 | 194 | #qunit-modulefilter-dropdown #qunit-modulefilter-actions > :last-child { 195 | /* insert padding to align with checkbox margins */ 196 | padding-left: 3px; 197 | } 198 | 199 | #qunit-modulefilter-dropdown-list { 200 | max-height: 200px; 201 | overflow-y: auto; 202 | margin: 0; 203 | border-top: 2px groove threedhighlight; 204 | padding: 0.4em 0 0; 205 | font: smaller/1.5em sans-serif; 206 | } 207 | 208 | #qunit-modulefilter-dropdown-list li { 209 | white-space: nowrap; 210 | overflow: hidden; 211 | text-overflow: ellipsis; 212 | } 213 | 214 | #qunit-modulefilter-dropdown-list .clickable { 215 | display: block; 216 | padding-left: 0.15em; 217 | padding-right: 0.5em; 218 | } 219 | 220 | 221 | /** Tests: Pass/Fail */ 222 | 223 | #qunit-tests { 224 | list-style-position: inside; 225 | } 226 | 227 | #qunit-tests li { 228 | padding: 0.4em 1em 0.4em 1em; 229 | border-bottom: 1px solid #FFF; 230 | list-style-position: inside; 231 | } 232 | 233 | #qunit-tests > li { 234 | display: none; 235 | } 236 | 237 | #qunit-tests li.running, 238 | #qunit-tests li.pass, 239 | #qunit-tests li.fail, 240 | #qunit-tests li.skipped, 241 | #qunit-tests li.aborted { 242 | display: list-item; 243 | } 244 | 245 | #qunit-tests.hidepass { 246 | position: relative; 247 | } 248 | 249 | #qunit-tests.hidepass li.running, 250 | #qunit-tests.hidepass li.pass:not(.todo) { 251 | visibility: hidden; 252 | position: absolute; 253 | width: 0; 254 | height: 0; 255 | padding: 0; 256 | border: 0; 257 | margin: 0; 258 | } 259 | 260 | #qunit-tests li strong { 261 | cursor: pointer; 262 | } 263 | 264 | #qunit-tests li.skipped strong { 265 | cursor: default; 266 | } 267 | 268 | #qunit-tests li a { 269 | padding: 0.5em; 270 | color: #C2CCD1; 271 | text-decoration: none; 272 | } 273 | 274 | #qunit-tests li p a { 275 | padding: 0.25em; 276 | color: #6B6464; 277 | } 278 | #qunit-tests li a:hover, 279 | #qunit-tests li a:focus { 280 | color: #000; 281 | } 282 | 283 | #qunit-tests li .runtime { 284 | float: right; 285 | font-size: smaller; 286 | } 287 | 288 | .qunit-assert-list { 289 | margin-top: 0.5em; 290 | padding: 0.5em; 291 | 292 | background-color: #FFF; 293 | 294 | border-radius: 5px; 295 | } 296 | 297 | .qunit-source { 298 | margin: 0.6em 0 0.3em; 299 | } 300 | 301 | .qunit-collapsed { 302 | display: none; 303 | } 304 | 305 | #qunit-tests table { 306 | border-collapse: collapse; 307 | margin-top: 0.2em; 308 | } 309 | 310 | #qunit-tests th { 311 | text-align: right; 312 | vertical-align: top; 313 | padding: 0 0.5em 0 0; 314 | } 315 | 316 | #qunit-tests td { 317 | vertical-align: top; 318 | } 319 | 320 | #qunit-tests pre { 321 | margin: 0; 322 | white-space: pre-wrap; 323 | word-wrap: break-word; 324 | } 325 | 326 | #qunit-tests del { 327 | color: #374E0C; 328 | background-color: #E0F2BE; 329 | text-decoration: none; 330 | } 331 | 332 | #qunit-tests ins { 333 | color: #500; 334 | background-color: #FFCACA; 335 | text-decoration: none; 336 | } 337 | 338 | /*** Test Counts */ 339 | 340 | #qunit-tests b.counts { color: #000; } 341 | #qunit-tests b.passed { color: #5E740B; } 342 | #qunit-tests b.failed { color: #710909; } 343 | 344 | #qunit-tests li li { 345 | padding: 5px; 346 | background-color: #FFF; 347 | border-bottom: none; 348 | list-style-position: inside; 349 | } 350 | 351 | /*** Passing Styles */ 352 | 353 | #qunit-tests li li.pass { 354 | color: #3C510C; 355 | background-color: #FFF; 356 | border-left: 10px solid #C6E746; 357 | } 358 | 359 | #qunit-tests .pass { color: #528CE0; background-color: #D2E0E6; } 360 | #qunit-tests .pass .test-name { color: #366097; } 361 | 362 | #qunit-tests .pass .test-actual, 363 | #qunit-tests .pass .test-expected { color: #999; } 364 | 365 | #qunit-banner.qunit-pass { background-color: #C6E746; } 366 | 367 | /*** Failing Styles */ 368 | 369 | #qunit-tests li li.fail { 370 | color: #710909; 371 | background-color: #FFF; 372 | border-left: 10px solid #EE5757; 373 | white-space: pre; 374 | } 375 | 376 | #qunit-tests > li:last-child { 377 | border-radius: 0 0 5px 5px; 378 | } 379 | 380 | #qunit-tests .fail { color: #000; background-color: #EE5757; } 381 | #qunit-tests .fail .test-name, 382 | #qunit-tests .fail .module-name { color: #000; } 383 | 384 | #qunit-tests .fail .test-actual { color: #EE5757; } 385 | #qunit-tests .fail .test-expected { color: #008000; } 386 | 387 | #qunit-banner.qunit-fail { background-color: #EE5757; } 388 | 389 | 390 | /*** Aborted tests */ 391 | #qunit-tests .aborted { color: #000; background-color: orange; } 392 | /*** Skipped tests */ 393 | 394 | #qunit-tests .skipped { 395 | background-color: #EBECE9; 396 | } 397 | 398 | #qunit-tests .qunit-todo-label, 399 | #qunit-tests .qunit-skipped-label { 400 | background-color: #F4FF77; 401 | display: inline-block; 402 | font-style: normal; 403 | color: #366097; 404 | line-height: 1.8em; 405 | padding: 0 0.5em; 406 | margin: -0.4em 0.4em -0.4em 0; 407 | } 408 | 409 | #qunit-tests .qunit-todo-label { 410 | background-color: #EEE; 411 | } 412 | 413 | /** Result */ 414 | 415 | #qunit-testresult { 416 | color: #2B81AF; 417 | background-color: #D2E0E6; 418 | 419 | border-bottom: 1px solid #FFF; 420 | } 421 | #qunit-testresult .clearfix { 422 | height: 0; 423 | clear: both; 424 | } 425 | #qunit-testresult .module-name { 426 | font-weight: 700; 427 | } 428 | #qunit-testresult-display { 429 | padding: 0.5em 1em 0.5em 1em; 430 | width: 85%; 431 | float:left; 432 | } 433 | #qunit-testresult-controls { 434 | padding: 0.5em 1em 0.5em 1em; 435 | width: 10%; 436 | float:left; 437 | } 438 | 439 | /** Fixture */ 440 | 441 | #qunit-fixture { 442 | position: absolute; 443 | top: -10000px; 444 | left: -10000px; 445 | width: 1000px; 446 | height: 1000px; 447 | } 448 | -------------------------------------------------------------------------------- /test/tests.js: -------------------------------------------------------------------------------- 1 | // Spectrum Colorpicker Tests 2 | // https://github.com/bgrins/spectrum 3 | // Author: Brian Grinstead 4 | // License: MIT 5 | 6 | // Pretend like the color inputs aren't supported for initial load. 7 | $.fn.spectrum.inputTypeColorSupport = function () { 8 | return false; 9 | }; 10 | 11 | QUnit.module("Initialization"); 12 | 13 | QUnit.test("jQuery Plugin Can Be Created", function (assert) { 14 | var el = $("").spectrum(); 15 | 16 | assert.ok(el.attr("id") === "spec", "Element returned from plugin"); 17 | 18 | el.spectrum("set", "red"); 19 | assert.equal(el.spectrum("get").toName(), "red", "Basic color setting"); 20 | 21 | assert.equal( 22 | el.spectrum("option", "showInput"), 23 | false, 24 | "Undefined option is false." 25 | ); 26 | 27 | el.spectrum({ showInput: true }); 28 | 29 | assert.equal( 30 | el.spectrum("option", "showInput"), 31 | true, 32 | "Double initialized spectrum is destroyed before recreating." 33 | ); 34 | 35 | el.spectrum("destroy"); 36 | 37 | assert.equal( 38 | el.spectrum("container"), 39 | el, 40 | "After destroying spectrum, string function returns input." 41 | ); 42 | }); 43 | 44 | QUnit.test("Polyfill", function (assert) { 45 | var el = $("#type-color-on-page"); 46 | assert.ok( 47 | el.spectrum("get").toHex, 48 | "The input[type=color] has been initialized on load" 49 | ); 50 | el.spectrum("destroy"); 51 | 52 | // Pretend like the color inputs are supported. 53 | $.fn.spectrum.inputTypeColorSupport = function () { 54 | return true; 55 | }; 56 | 57 | el = $("").spectrum({ 58 | allowEmpty: true, 59 | }); 60 | el.spectrum("set", null); 61 | assert.ok(el.spectrum("get"), "input[type] color does not allow null values"); 62 | el.spectrum("destroy"); 63 | }); 64 | 65 | QUnit.test("Per-element Options Are Read From Data Attributes", function ( 66 | assert 67 | ) { 68 | var el = $("").spectrum(); 69 | 70 | assert.equal( 71 | el.spectrum("option", "showAlpha"), 72 | true, 73 | "Took showAlpha value from data attribute" 74 | ); 75 | 76 | el.spectrum("destroy"); 77 | 78 | var changeDefault = $("").spectrum( 79 | { 80 | showAlpha: true, 81 | } 82 | ); 83 | 84 | assert.equal( 85 | changeDefault.spectrum("option", "showAlpha"), 86 | true, 87 | "Took showAlpha value from options arg" 88 | ); 89 | 90 | changeDefault.spectrum("destroy"); 91 | 92 | var noData = $("").spectrum({ 93 | showAlpha: true, 94 | }); 95 | 96 | assert.equal( 97 | noData.spectrum("option", "showAlpha"), 98 | true, 99 | "Kept showAlpha without data attribute" 100 | ); 101 | 102 | noData.spectrum("destroy"); 103 | }); 104 | 105 | QUnit.test("Events Fire", function (assert) { 106 | assert.expect(4); 107 | var count = 0; 108 | var el = $("").spectrum(); 109 | 110 | el.on("beforeShow.spectrum", function (e) { 111 | // Cancel the event the first time 112 | if (count === 0) { 113 | assert.ok(true, "Cancel beforeShow"); 114 | count++; 115 | return false; 116 | } 117 | 118 | assert.equal(count, 1, "Allow beforeShow"); 119 | count++; 120 | }); 121 | 122 | el.on("show.spectrum", function (e) { 123 | assert.equal(count, 2, "Show"); 124 | count++; 125 | }); 126 | 127 | el.on("hide.spectrum", function (e) { 128 | assert.equal(count, 3, "Hide"); 129 | count++; 130 | }); 131 | 132 | el.on("move.spectrum", function (e) { 133 | assert.ok(false, "Change should not fire from `move` call"); 134 | }); 135 | 136 | el.on("change", function (e, color) { 137 | assert.ok(false, "Change should not fire from `set` call"); 138 | }); 139 | 140 | el.spectrum("show"); 141 | el.spectrum("show"); 142 | el.spectrum("hide"); 143 | 144 | el.spectrum("set", "red"); 145 | el.spectrum("destroy"); 146 | }); 147 | 148 | QUnit.test("Events Fire (text input change)", function (assert) { 149 | assert.expect(3); 150 | var count = 0; 151 | var el = $("").spectrum({ 152 | showInput: true, 153 | }); 154 | el.on("move.spectrum", function (e, color) { 155 | assert.equal(count, 0, "Move fires when input changes"); 156 | count++; 157 | }); 158 | 159 | el.on("change.spectrum", function (e, color) { 160 | assert.equal( 161 | count, 162 | 2, 163 | "Change should not fire when input changes, only when chosen" 164 | ); 165 | count++; 166 | }); 167 | 168 | el.spectrum("container").find(".sp-input").val("blue").trigger("change"); 169 | count++; 170 | el.spectrum("container").find(".sp-choose").click(); 171 | el.spectrum("destroy"); 172 | 173 | assert.equal(count, 3, "All events fired"); 174 | }); 175 | 176 | QUnit.test("Escape hides the colorpicker", function (assert) { 177 | assert.expect(1); 178 | var el = $("").spectrum(); 179 | el.on("hide.spectrum", function (e) { 180 | assert.ok(true, "Hide event should fire"); 181 | }); 182 | 183 | // Simulate an escape before showing -- should do nothing 184 | var e = jQuery.Event("keydown"); 185 | e.keyCode = 27; 186 | $(document).trigger(e); 187 | 188 | el.spectrum("show"); 189 | 190 | // Simulate an escape after showing -- should call the hide handler 191 | $(document).trigger(e); 192 | 193 | el.spectrum("destroy"); 194 | }); 195 | 196 | QUnit.test("Dragging", function (assert) { 197 | var el = $("").spectrum(); 198 | var hueSlider = el.spectrum("container").find(".sp-hue"); 199 | 200 | assert.ok(hueSlider.length, "There is a hue slider"); 201 | 202 | hueSlider.trigger("mousedown"); 203 | 204 | assert.ok($("body").hasClass("sp-dragging"), "The body has dragging class"); 205 | 206 | hueSlider.trigger("mouseup"); 207 | 208 | assert.ok( 209 | !$("body").hasClass("sp-dragging"), 210 | "The body does not have a dragging class" 211 | ); 212 | 213 | el.spectrum("destroy"); 214 | }); 215 | 216 | QUnit.module("Defaults"); 217 | 218 | QUnit.test("Default Color Is Set By Input Value", function (assert) { 219 | var red = $("").spectrum(); 220 | assert.equal(red.spectrum("get").toName(), "red", "Basic color setting"); 221 | 222 | var noColor = $("").spectrum(); 223 | assert.equal( 224 | noColor.spectrum("get").toHex(), 225 | "000000", 226 | "Defaults to black with an invalid color" 227 | ); 228 | 229 | var noValue = $("").spectrum(); 230 | assert.equal( 231 | noValue.spectrum("get").toHex(), 232 | "000000", 233 | "Defaults to black with no value set" 234 | ); 235 | 236 | var noValueHex3 = $("").spectrum({ 237 | preferredFormat: "hex3", 238 | }); 239 | assert.equal( 240 | noValueHex3.spectrum("get").toHex(true), 241 | "000", 242 | "Defaults to 3 char hex with no value set" 243 | ); 244 | assert.equal( 245 | noValueHex3.spectrum("get").toString(), 246 | "#000", 247 | "Defaults to 3 char hex with no value set" 248 | ); 249 | 250 | red.spectrum("destroy"); 251 | noColor.spectrum("destroy"); 252 | noValue.spectrum("destroy"); 253 | noValueHex3.spectrum("destroy"); 254 | }); 255 | 256 | QUnit.module("Palettes"); 257 | 258 | QUnit.test("Palette Events Fire In Correct Order ", function (assert) { 259 | assert.expect(4); 260 | var el = $("").spectrum({ 261 | showPalette: true, 262 | palette: [["red", "green", "blue"]], 263 | move: function () {}, 264 | }); 265 | 266 | var count = 0; 267 | el.on("move.spectrum", function (e) { 268 | assert.equal(count, 0, "move fires before change"); 269 | count++; 270 | }); 271 | 272 | el.on("change.spectrum", function (e) { 273 | assert.equal(count, 1, "change fires after move"); 274 | count++; 275 | }); 276 | 277 | el.spectrum("container").find(".sp-thumb-el:last-child").click(); 278 | assert.equal(count, 1, "Change event hasn't fired after palette click"); 279 | 280 | el.spectrum("container").find(".sp-choose").click(); 281 | assert.equal(count, 2, "Change event has fired after choose button click"); 282 | 283 | el.spectrum("destroy"); 284 | }); 285 | 286 | QUnit.test("Palette click events work", function (assert) { 287 | assert.expect(7); 288 | 289 | var moveCount = 0; 290 | var moves = ["blue", "green", "red"]; 291 | var changeCount = 0; 292 | 293 | var el = $("") 294 | .spectrum({ 295 | showPalette: true, 296 | preferredFormat: "name", 297 | palette: [["red", "green", "blue"]], 298 | show: function (c) { 299 | assert.equal(c.toName(), "orange", "correct shown color"); 300 | }, 301 | move: function (c) { 302 | assert.equal( 303 | c.toName(), 304 | moves[moveCount], 305 | "Move # " + moveCount + " is correct" 306 | ); 307 | moveCount++; 308 | }, 309 | change: function (c) { 310 | assert.equal(changeCount, 0, "Only one change happens"); 311 | assert.equal(c.toName(), "red"); 312 | changeCount++; 313 | }, 314 | }) 315 | .spectrum("show"); 316 | 317 | el.spectrum("container").find(".sp-thumb-el:nth-child(3)").click(); 318 | el.spectrum("container") 319 | .find(".sp-thumb-el:nth-child(2) .sp-thumb-inner") 320 | .click(); 321 | el.spectrum("container") 322 | .find(".sp-thumb-el:nth-child(1) .sp-thumb-inner") 323 | .click(); 324 | el.spectrum("container").find(".sp-choose").click(); 325 | 326 | assert.equal(el.val(), "red", "Element's value is set"); 327 | el.spectrum("destroy"); 328 | }); 329 | 330 | QUnit.test("Palette doesn't changes don't stick if cancelled", function ( 331 | assert 332 | ) { 333 | assert.expect(4); 334 | 335 | var moveCount = 0; 336 | var moves = ["blue", "green", "red", "orange"]; 337 | var changeCount = 0; 338 | 339 | var el = $("") 340 | .spectrum({ 341 | showPalette: true, 342 | preferredFormat: "name", 343 | palette: [["red", "green", "blue"]], 344 | move: function (c) { 345 | assert.equal( 346 | c.toName(), 347 | moves[moveCount], 348 | "Move # " + moveCount + " is correct" 349 | ); 350 | moveCount++; 351 | }, 352 | change: function (c) { 353 | assert.ok(false, "No change fires"); 354 | }, 355 | }) 356 | .spectrum("show"); 357 | 358 | el.spectrum("container").find(".sp-thumb-el:nth-child(3)").click(); 359 | el.spectrum("container").find(".sp-thumb-el:nth-child(2)").click(); 360 | el.spectrum("container").find(".sp-thumb-el:nth-child(1)").click(); 361 | el.spectrum("container").find(".sp-cancel").click(); 362 | 363 | assert.equal(el.val(), "orange", "Element's value is the same"); 364 | el.spectrum("destroy"); 365 | }); 366 | 367 | QUnit.test( 368 | "hideAfterPaletteSelect: Palette stays open after color select when false", 369 | function (assert) { 370 | var el = $("").spectrum({ 371 | showPalette: true, 372 | hideAfterPaletteSelect: false, 373 | palette: [["red", "green", "blue"]], 374 | }); 375 | 376 | el.spectrum("show"); 377 | el.spectrum("container").find(".sp-thumb-el:nth-child(1)").click(); 378 | 379 | assert.ok( 380 | !el.spectrum("container").hasClass("sp-hidden"), 381 | "palette is still visible after color selection" 382 | ); 383 | el.spectrum("destroy"); 384 | } 385 | ); 386 | 387 | QUnit.test( 388 | "hideAfterPaletteSelect: Palette closes after color select when true", 389 | function (assert) { 390 | assert.expect(2); 391 | var el = $("").spectrum({ 392 | showPalette: true, 393 | hideAfterPaletteSelect: true, 394 | change: function (c) { 395 | assert.equal(c.toName(), "red", "change fires"); 396 | }, 397 | palette: [["red", "green", "blue"]], 398 | }); 399 | 400 | el.spectrum("show"); 401 | el.spectrum("container").find(".sp-thumb-el:nth-child(1)").click(); 402 | 403 | assert.ok( 404 | el.spectrum("container").hasClass("sp-hidden"), 405 | "palette is still hidden after color selection" 406 | ); 407 | el.spectrum("destroy"); 408 | } 409 | ); 410 | 411 | QUnit.test("Local Storage Is Limited ", function (assert) { 412 | var el = $("").spectrum({ 413 | localStorageKey: "spectrum.tests", 414 | palette: [["#ff0", "#0ff"]], 415 | maxSelectionSize: 3, 416 | }); 417 | 418 | el.spectrum("set", "#f00"); 419 | el.spectrum("set", "#e00"); 420 | el.spectrum("set", "#d00"); 421 | el.spectrum("set", "#c00"); 422 | el.spectrum("set", "#b00"); 423 | el.spectrum("set", "#a00"); 424 | 425 | assert.equal( 426 | localStorage["spectrum.tests"], 427 | "rgb(204, 0, 0);rgb(187, 0, 0);rgb(170, 0, 0)", 428 | "Local storage array has been limited" 429 | ); 430 | 431 | el.spectrum("set", "#ff0"); 432 | el.spectrum("set", "#0ff"); 433 | 434 | assert.equal( 435 | localStorage["spectrum.tests"], 436 | "rgb(204, 0, 0);rgb(187, 0, 0);rgb(170, 0, 0)", 437 | "Local storage array did not get changed by selecting palette items" 438 | ); 439 | el.spectrum("destroy"); 440 | }); 441 | 442 | QUnit.module("Options"); 443 | 444 | QUnit.test("allowEmpty", function (assert) { 445 | var el = $("").spectrum({ 446 | allowEmpty: true, 447 | }); 448 | el.spectrum("set", null); 449 | assert.ok( 450 | !el.spectrum("get"), 451 | "input[type] color does not allow null values" 452 | ); 453 | el.spectrum("destroy"); 454 | 455 | el = $("").spectrum(); 456 | el.spectrum("set", null); 457 | assert.ok(el.spectrum("get"), "input[type] color does not allow null values"); 458 | el.spectrum("destroy"); 459 | }); 460 | 461 | QUnit.test("clickoutFiresChange", function (assert) { 462 | var el = $("").spectrum({ 463 | clickoutFiresChange: false, 464 | }); 465 | el.spectrum("show"); 466 | assert.equal(el.spectrum("get").toName(), "red", "Color is initialized"); 467 | el.spectrum("set", "orange"); 468 | assert.equal(el.spectrum("get").toName(), "orange", "Color is set"); 469 | $(document).click(); 470 | assert.equal( 471 | el.spectrum("get").toName(), 472 | "red", 473 | "Color is reverted after clicking 'cancel'" 474 | ); 475 | el.spectrum("destroy"); 476 | 477 | // Try again with default behavior (clickoutFiresChange = true) 478 | el = $("").spectrum(); 479 | el.spectrum("show"); 480 | assert.equal(el.spectrum("get").toName(), "red", "Color is initialized"); 481 | el.spectrum("set", "orange"); 482 | assert.equal(el.spectrum("get").toName(), "orange", "Color is set"); 483 | $(document).click(); 484 | assert.equal( 485 | el.spectrum("get").toName(), 486 | "orange", 487 | "Color is changed after clicking out" 488 | ); 489 | el.spectrum("destroy"); 490 | }); 491 | 492 | QUnit.test("replacerClassName", function (assert) { 493 | var el = $("").appendTo("body").spectrum({ 494 | replacerClassName: "test", 495 | }); 496 | assert.ok( 497 | el.next(".sp-replacer").hasClass("test"), 498 | "Replacer class has been applied" 499 | ); 500 | el.spectrum("destroy").remove(); 501 | }); 502 | 503 | QUnit.test("containerClassName", function (assert) { 504 | var el = $("").appendTo("body").spectrum({ 505 | containerClassName: "test", 506 | }); 507 | assert.ok( 508 | el.spectrum("container").hasClass("test"), 509 | "Container class has been applied" 510 | ); 511 | el.spectrum("destroy").remove(); 512 | }); 513 | 514 | QUnit.test("Options Can Be Set and Gotten Programmatically", function (assert) { 515 | var spec = $("").spectrum({ 516 | color: "#ECC", 517 | flat: true, 518 | showInput: true, 519 | className: "full-spectrum", 520 | showInitial: true, 521 | showPalette: true, 522 | showSelectionPalette: true, 523 | maxPaletteSize: 10, 524 | preferredFormat: "hex", 525 | localStorageKey: "spectrum.example", 526 | palette: [["red"], ["green"]], 527 | }); 528 | 529 | var allOptions = spec.spectrum("option"); 530 | assert.equal( 531 | allOptions.flat, 532 | true, 533 | "Fetching all options provides accurate value" 534 | ); 535 | 536 | var singleOption = spec.spectrum("option", "className"); 537 | assert.equal( 538 | singleOption, 539 | "full-spectrum", 540 | "Fetching a single option returns that value" 541 | ); 542 | 543 | spec.spectrum("option", "className", "changed"); 544 | singleOption = spec.spectrum("option", "className"); 545 | assert.equal( 546 | singleOption, 547 | "changed", 548 | "Changing an option then fetching it is updated" 549 | ); 550 | 551 | var numPaletteElements = spec 552 | .spectrum("container") 553 | .find(".sp-palette-row:not(.sp-palette-row-selection) .sp-thumb-el").length; 554 | assert.equal(numPaletteElements, 2, "Two palette elements to start"); 555 | spec.spectrum("option", "palette", [["red"], ["green"], ["blue"]]); 556 | var optPalette = spec.spectrum("option", "palette"); 557 | assert.deepEqual( 558 | optPalette, 559 | [["red"], ["green"], ["blue"]], 560 | "Changing an option then fetching it is updated" 561 | ); 562 | numPaletteElements = spec 563 | .spectrum("container") 564 | .find(".sp-palette-row:not(.sp-palette-row-selection) .sp-thumb-el").length; 565 | assert.equal(numPaletteElements, 3, "Three palette elements after updating"); 566 | 567 | var appendToDefault = $("").spectrum({}); 568 | 569 | var container = $("
    ").appendTo("body"); 570 | var appendToOther = $("").spectrum({ 571 | appendTo: container, 572 | }); 573 | 574 | var appendToParent = $("").appendTo("#c").spectrum({ 575 | appendTo: "parent", 576 | }); 577 | 578 | var appendToOtherFlat = $("").spectrum({ 579 | appendTo: container, 580 | flat: true, 581 | }); 582 | 583 | assert.equal( 584 | appendToDefault.spectrum("container").parent()[0], 585 | document.body, 586 | "Appended to body by default" 587 | ); 588 | 589 | assert.equal( 590 | appendToOther.spectrum("container").parent()[0], 591 | container[0], 592 | "Can be appended to another element" 593 | ); 594 | 595 | assert.equal( 596 | appendToOtherFlat.spectrum("container").parent()[0], 597 | $(appendToOtherFlat).parent()[0], 598 | "Flat CANNOT be appended to another element, will be same as input" 599 | ); 600 | 601 | assert.equal( 602 | appendToParent.spectrum("container").parent()[0], 603 | container[0], 604 | "Passing 'parent' to appendTo works as expected" 605 | ); 606 | 607 | // Issue #70 - https://github.com/bgrins/spectrum/issues/70 608 | assert.equal( 609 | spec.spectrum("option", "showPalette"), 610 | true, 611 | "showPalette is true by default" 612 | ); 613 | spec.spectrum("option", "showPalette", false); 614 | 615 | assert.equal( 616 | spec.spectrum("option", "showPalette"), 617 | false, 618 | "showPalette is false after setting showPalette" 619 | ); 620 | spec.spectrum("option", "showPaletteOnly", true); 621 | 622 | assert.equal( 623 | spec.spectrum("option", "showPaletteOnly"), 624 | true, 625 | "showPaletteOnly is true after setting showPaletteOnly" 626 | ); 627 | assert.equal( 628 | spec.spectrum("option", "showPalette"), 629 | true, 630 | "showPalette is true after setting showPaletteOnly" 631 | ); 632 | 633 | spec.spectrum("destroy"); 634 | appendToDefault.spectrum("destroy"); 635 | appendToOther.spectrum("destroy"); 636 | appendToOtherFlat.spectrum("destroy"); 637 | appendToParent.spectrum("destroy").remove(); 638 | delete window.localStorage["spectrum.example"]; 639 | container.remove(); 640 | }); 641 | 642 | QUnit.test("Show Input works as expected", function (assert) { 643 | var el = $("").spectrum({ 644 | showInput: true, 645 | color: "red", 646 | }); 647 | var input = el.spectrum("container").find(".sp-input"); 648 | 649 | assert.equal(input.val(), "red", "Input is set to color by default"); 650 | input.val("").trigger("change"); 651 | 652 | assert.ok( 653 | input.hasClass("sp-validation-error"), 654 | "Input has validation error class after being emptied." 655 | ); 656 | 657 | input.val("red").trigger("change"); 658 | 659 | assert.ok( 660 | !input.hasClass("sp-validation-error"), 661 | "Input does not have validation error class after being reset to original color." 662 | ); 663 | 664 | assert.equal( 665 | el.spectrum("get").toHexString(), 666 | "#ff0000", 667 | "Color is still red" 668 | ); 669 | el.spectrum("destroy"); 670 | }); 671 | 672 | QUnit.test("Toggle Picker Area button works as expected", function (assert) { 673 | var div = $( 674 | "
    " 675 | ) 676 | .appendTo("body") 677 | .show(), 678 | el = $("").appendTo(div); 679 | el.spectrum({ 680 | showInput: true, 681 | showPaletteOnly: true, 682 | togglePaletteOnly: true, 683 | color: "red", 684 | }); 685 | 686 | var spectrum = el.spectrum("container").show(), 687 | toggle = spectrum.find(".sp-palette-toggle"), 688 | picker = spectrum.find(".sp-picker-container"), 689 | palette = spectrum.find(".sp-palette-container"); 690 | 691 | // Open the Colorpicker 692 | el.spectrum("show"); 693 | assert.equal( 694 | picker.is(":hidden"), 695 | true, 696 | "The picker area is hidden by default." 697 | ); 698 | assert.ok( 699 | spectrum.hasClass("sp-palette-only"), 700 | "The 'palette-only' class is enabled." 701 | ); 702 | 703 | // Click the Picker area Toggle button to show the Picker 704 | toggle.click(); 705 | 706 | assert.equal( 707 | picker.is(":hidden"), 708 | false, 709 | "After toggling, the picker area is visible." 710 | ); 711 | assert.ok( 712 | !spectrum.hasClass("sp-palette-only"), 713 | "The 'palette-only' class is disabled." 714 | ); 715 | assert.equal( 716 | Math.round(picker.offset().top), 717 | Math.round(palette.offset().top), 718 | "The picker area is next to the palette." 719 | ); 720 | 721 | // Click the toggle again to hide the picker 722 | toggle.trigger("click"); 723 | 724 | assert.equal( 725 | picker.is(":hidden"), 726 | true, 727 | "After toggling again, the picker area is hidden." 728 | ); 729 | assert.ok( 730 | spectrum.hasClass("sp-palette-only"), 731 | "And the 'palette-only' class is enabled." 732 | ); 733 | 734 | // Cleanup 735 | el.spectrum("hide"); 736 | el.spectrum("destroy"); 737 | el.remove(); 738 | div.remove(); 739 | }); 740 | 741 | QUnit.test("Tooltip is formatted based on preferred format", function (assert) { 742 | var el = $("").spectrum({ 743 | showInput: true, 744 | color: "red", 745 | showPalette: true, 746 | palette: [["red", "rgba(255, 255, 255, .5)", "rgb(0, 0, 255)"]], 747 | }); 748 | el.spectrum("show"); 749 | 750 | function getTitlesString() { 751 | return el 752 | .spectrum("container") 753 | .find(".sp-thumb-el") 754 | .map(function () { 755 | return this.getAttribute("title"); 756 | }) 757 | .toArray() 758 | .join(" "); 759 | } 760 | 761 | assert.equal( 762 | getTitlesString(), 763 | "rgb(255, 0, 0) rgba(255, 255, 255, 0.5) rgb(0, 0, 255)", 764 | "Titles use rgb format by default" 765 | ); 766 | 767 | el.spectrum("option", "preferredFormat", "hex"); 768 | assert.equal( 769 | getTitlesString(), 770 | "#ff0000 #ffffff #0000ff", 771 | "Titles are updated to hex" 772 | ); 773 | assert.equal( 774 | el.spectrum("get").toString(), 775 | "#ff0000", 776 | "Value's format is updated" 777 | ); 778 | 779 | el.spectrum("option", "preferredFormat", "hex6"); 780 | assert.equal( 781 | getTitlesString(), 782 | "#ff0000 #ffffff #0000ff", 783 | "Titles are updated to hex6" 784 | ); 785 | assert.equal( 786 | el.spectrum("get").toString(), 787 | "#ff0000", 788 | "Value's format is updated" 789 | ); 790 | 791 | el.spectrum("option", "preferredFormat", "hex3"); 792 | assert.equal( 793 | getTitlesString(), 794 | "#f00 #fff #00f", 795 | "Titles are updated to hex3" 796 | ); 797 | assert.equal( 798 | el.spectrum("get").toString(), 799 | "#f00", 800 | "Value's format is updated" 801 | ); 802 | 803 | el.spectrum("option", "preferredFormat", "name"); 804 | assert.equal( 805 | getTitlesString(), 806 | "red #ffffff blue", 807 | "Titles are updated to name" 808 | ); 809 | assert.equal( 810 | el.spectrum("get").toString(), 811 | "red", 812 | "Value's format is updated" 813 | ); 814 | 815 | el.spectrum("option", "preferredFormat", "hsv"); 816 | assert.equal( 817 | getTitlesString(), 818 | "hsv(0, 100%, 100%) hsva(0, 0%, 100%, 0.5) hsv(240, 100%, 100%)", 819 | "Titles are updated to hsv" 820 | ); 821 | assert.equal( 822 | el.spectrum("get").toString(), 823 | "hsv(0, 100%, 100%)", 824 | "Value's format is updated" 825 | ); 826 | 827 | el.spectrum("option", "preferredFormat", "hsl"); 828 | assert.equal( 829 | getTitlesString(), 830 | "hsl(0, 100%, 50%) hsla(0, 0%, 100%, 0.5) hsl(240, 100%, 50%)", 831 | "Titles are updated to hsl" 832 | ); 833 | assert.equal( 834 | el.spectrum("get").toString(), 835 | "hsl(0, 100%, 50%)", 836 | "Value's format is updated" 837 | ); 838 | 839 | el.spectrum("option", "preferredFormat", "rgb"); 840 | assert.equal( 841 | getTitlesString(), 842 | "rgb(255, 0, 0) rgba(255, 255, 255, 0.5) rgb(0, 0, 255)", 843 | "Titles are updated to rgb" 844 | ); 845 | assert.equal( 846 | el.spectrum("get").toString(), 847 | "rgb(255, 0, 0)", 848 | "Value's format is updated" 849 | ); 850 | 851 | el.spectrum("destroy"); 852 | }); 853 | 854 | QUnit.module("Methods"); 855 | 856 | QUnit.test("Methods work as described", function (assert) { 857 | var el = $("").spectrum(); 858 | 859 | // Method - show 860 | el.spectrum("show"); 861 | assert.ok(el.spectrum("container").is(":visible"), "Spectrum is visible"); 862 | 863 | // Method - hide 864 | el.spectrum("hide"); 865 | assert.ok( 866 | el.spectrum("container").not(":visible"), 867 | "Spectrum is no longer visible" 868 | ); 869 | 870 | // Method - toggle 871 | el.spectrum("toggle"); 872 | assert.ok( 873 | el.spectrum("container").is(":visible"), 874 | "Spectrum is visible after toggle" 875 | ); 876 | 877 | el.spectrum("toggle"); 878 | assert.ok( 879 | el.spectrum("container").not(":visible"), 880 | "Spectrum is no longer visible after toggle" 881 | ); 882 | 883 | // Method - set / get 884 | el.spectrum("set", "orange"); 885 | var color = el.spectrum("get", "color"); 886 | 887 | assert.ok( 888 | color.toHexString() == "#ffa500", 889 | "Color has been set and gotten as hex" 890 | ); 891 | assert.ok( 892 | color.toName() == "orange", 893 | "Color has been set and gotten as name" 894 | ); 895 | assert.ok( 896 | color.toHsvString() == "hsv(39, 100%, 100%)", 897 | "Color has been set and gotten as hsv" 898 | ); 899 | assert.ok( 900 | color.toRgbString() == "rgb(255, 165, 0)", 901 | "Color has been set and gotten as rgb" 902 | ); 903 | assert.ok( 904 | color.toHslString() == "hsl(39, 100%, 50%)", 905 | "Color has been set and gotten as hsl" 906 | ); 907 | assert.ok( 908 | (function () { 909 | var i, argb, a; 910 | for (i = 0; i < 16; i++) { 911 | argb = "0" + i.toString(16) + "000000"; 912 | a = Math.round( 913 | el.spectrum("set", argb).spectrum("get").getAlpha() * 255 914 | ); 915 | if (a != i) { 916 | return false; 917 | } 918 | } 919 | return true; 920 | })(), 921 | "Set and get has preserved alpha resolution" 922 | ); 923 | 924 | // Method - container 925 | assert.ok( 926 | el.spectrum("container").hasClass("sp-container"), 927 | "Container can be retrieved" 928 | ); 929 | 930 | // Method - disable 931 | el.spectrum("disable"); 932 | assert.ok(el.is(":disabled"), "Can be disabled"); 933 | 934 | el.spectrum("show"); 935 | assert.ok(el.not(":visible"), "Cannot show when disabled"); 936 | 937 | // Method - enable 938 | el.spectrum("enable"); 939 | assert.ok(!el.is(":disabled"), "Can be enabled"); 940 | 941 | // Method - reflow 942 | el.spectrum("reflow"); 943 | 944 | // Method - throw exception when not existing 945 | assert.throws(function () { 946 | el.spectrum("no method"); 947 | }, "Expecting exception to be thrown when calling with no method"); 948 | 949 | // Method - destroy 950 | el.spectrum("destroy"); 951 | 952 | assert.equal(el.spectrum("container"), el, "No usage after being destroyed"); 953 | assert.equal(el.spectrum("get"), el, "No usage after being destroyed"); 954 | 955 | el.spectrum("destroy"); 956 | }); 957 | 958 | // https://github.com/bgrins/spectrum/issues/97 959 | QUnit.test("Change events fire as described", function (assert) { 960 | assert.expect(0); 961 | var input = $(""); 962 | 963 | input.on("change", function () { 964 | assert.ok(false, "Change should not be fired inside of input change"); 965 | }); 966 | 967 | input.spectrum({ 968 | color: "red", 969 | change: function () { 970 | assert.ok( 971 | false, 972 | "Change should not be fired inside of spectrum callback" 973 | ); 974 | }, 975 | }); 976 | 977 | input.spectrum("set", "orange"); 978 | }); 979 | 980 | QUnit.test( 981 | "The selectedPalette should be updated in each spectrum instance, when storageKeys are identical.", 982 | function (assert) { 983 | delete window.localStorage["spectrum.tests"]; 984 | 985 | var colorToChoose = "rgb(0, 244, 0)"; 986 | var firstEl = $("").spectrum({ 987 | showPalette: true, 988 | localStorageKey: "spectrum.tests", 989 | }); 990 | var secondEl = $("").spectrum({ 991 | showPalette: true, 992 | localStorageKey: "spectrum.tests", 993 | }); 994 | 995 | firstEl.spectrum("set", colorToChoose); 996 | 997 | secondEl.spectrum("toggle"); 998 | 999 | var selectedColor = secondEl 1000 | .spectrum("container") 1001 | .find('span[data-color="' + colorToChoose + '"]'); 1002 | assert.ok( 1003 | selectedColor.length > 0, 1004 | "Selected color is also shown in the others instance's palette." 1005 | ); 1006 | 1007 | delete window.localStorage["spectrum.tests"]; 1008 | 1009 | firstEl.spectrum("destroy"); 1010 | secondEl.spectrum("destroy"); 1011 | } 1012 | ); 1013 | 1014 | QUnit.test( 1015 | "The selectedPalette should not be updated in spectrum instances that have different storageKeys.", 1016 | function (assert) { 1017 | delete window.localStorage["spectrum.test_1"]; 1018 | delete window.localStorage["spectrum.test_2"]; 1019 | 1020 | var colorToChoose = "rgb(0, 244, 0)"; 1021 | var firstEl = $("").spectrum({ 1022 | showPalette: true, 1023 | localStorageKey: "spectrum.test_1", 1024 | }); 1025 | var secondEl = $("").spectrum({ 1026 | showPalette: true, 1027 | localStorageKey: "spectrum.test_2", 1028 | }); 1029 | 1030 | firstEl.spectrum("set", colorToChoose); 1031 | 1032 | secondEl.spectrum("toggle"); 1033 | 1034 | var selectedColor = secondEl 1035 | .spectrum("container") 1036 | .find('span[data-color="' + colorToChoose + '"]'); 1037 | assert.ok( 1038 | selectedColor.length === 0, 1039 | "Selected color should not be available in instances with other storageKey." 1040 | ); 1041 | 1042 | firstEl.spectrum("destroy"); 1043 | secondEl.spectrum("destroy"); 1044 | 1045 | delete window.localStorage["spectrum.test_1"]; 1046 | delete window.localStorage["spectrum.test_2"]; 1047 | } 1048 | ); 1049 | 1050 | QUnit.test("Cancelling reverts color", function (assert) { 1051 | var el = $("").spectrum(); 1052 | el.spectrum("show"); 1053 | assert.equal(el.spectrum("get").toName(), "red", "Color is initialized"); 1054 | el.spectrum("set", "orange"); 1055 | assert.equal(el.spectrum("get").toName(), "orange", "Color is set"); 1056 | el.spectrum("container").find(".sp-cancel").click(); 1057 | assert.equal( 1058 | el.spectrum("get").toName(), 1059 | "red", 1060 | "Color is reverted after clicking 'cancel'" 1061 | ); 1062 | el.spectrum("destroy"); 1063 | }); 1064 | 1065 | QUnit.test("Choosing updates the color", function (assert) { 1066 | var el = $("").spectrum(); 1067 | el.spectrum("show"); 1068 | assert.equal(el.spectrum("get").toName(), "red", "Color is initialized"); 1069 | el.spectrum("set", "orange"); 1070 | assert.equal(el.spectrum("get").toName(), "orange", "Color is set"); 1071 | el.spectrum("container").find(".sp-choose").click(); 1072 | assert.equal( 1073 | el.spectrum("get").toName(), 1074 | "orange", 1075 | "Color is kept after clicking 'choose'" 1076 | ); 1077 | el.spectrum("destroy"); 1078 | }); 1079 | 1080 | QUnit.test("Custom offset", function (assert) { 1081 | var el = $("").spectrum(); 1082 | el.spectrum("show"); 1083 | assert.deepEqual(el.spectrum("container").offset(), { top: 0, left: 0 }); 1084 | el.spectrum("hide"); 1085 | el.spectrum("offset", { top: 10, left: 10 }); 1086 | el.spectrum("show"); 1087 | assert.deepEqual(el.spectrum("container").offset(), { top: 10, left: 10 }); 1088 | el.spectrum("hide"); 1089 | el.spectrum("offset", null); 1090 | el.spectrum("show"); 1091 | assert.deepEqual(el.spectrum("container").offset(), { top: 0, left: 0 }); 1092 | el.spectrum("hide"); 1093 | el.spectrum("destroy"); 1094 | 1095 | var el2 = $("").spectrum({ 1096 | offset: { top: 100, left: 100 }, 1097 | }); 1098 | el2.spectrum("show"); 1099 | assert.deepEqual(el2.spectrum("container").offset(), { top: 100, left: 100 }); 1100 | el2.spectrum("hide"); 1101 | }); 1102 | -------------------------------------------------------------------------------- /themes/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Spectrum - The No Hassle jQuery Colorpicker 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 29 | 30 |
    31 |

    Themes

    32 | 33 |
    34 | This page is in development. 35 |
    36 | 37 | 58 | 59 |
    60 |

    Instructions for building themes

    61 |

    62 | You can change most any property on spectrum using CSS. Anything from borders and colors, to the size of the draggable areas, to the layout of the colorpicker can be changed with plain CSS. 63 |

    64 |

    Playing friendly with other themes

    65 |

    66 | Please prefix all of your rules with .theme-name. The exception is for changes to .sp-container and .sp-replacer, which will have your theme name applied. 67 |

    68 |

    69 | See a basic scaffold for a super simple theme. See sp-dark.css for a slightly more advanced example. 70 |

    71 |
     72 | .theme-name.sp-container {
     73 | 
     74 | }
     75 | .theme-name.sp-replacer {
     76 | 
     77 | }
     78 | .theme-name .sp-preview {
     79 | 
     80 | }
     81 |         
    82 |

    Submitting a theme

    83 |

    84 | If you have made some customizations that you would like to share, please open a pull request with the theme file inside of this themes/ directory in the project. Or open an issue with a link to the theme. 85 |

    86 |
    87 |
    88 | 89 | 90 | 98 | 99 | 112 | 113 | 114 | -------------------------------------------------------------------------------- /themes/sp-dark.css: -------------------------------------------------------------------------------- 1 | /* Container */ 2 | .sp-dark.sp-container { 3 | background-color: #333; 4 | border: solid 1px #555; 5 | } 6 | 7 | /* Replacer (the little preview div that shows up instead of the ) */ 8 | .sp-dark.sp-replacer { 9 | border: solid 1px #fff; 10 | background: #333; 11 | color: #eee; 12 | vertical-align: middle; 13 | } 14 | .sp-replacer:hover, .sp-replacer.sp-active { 15 | border-color: #F0C49B; 16 | color: #fff; 17 | } 18 | .sp-replacer.sp-disabled { 19 | border-color: silver; 20 | color: silver; 21 | } 22 | .sp-dark .sp-preview { 23 | border: solid 1px #999; 24 | } 25 | .sp-dark .sp-cancel { 26 | color: #f99f9f !important; 27 | } 28 | 29 | .sp-dark, .sp-dark button, .sp-dark input, .sp-color, .sp-hue { 30 | 31 | } 32 | 33 | /* Input */ 34 | .sp-dark .sp-input-container { 35 | 36 | } 37 | .sp-dark .sp-initial-disabled .sp-input-container { 38 | 39 | } 40 | .sp-dark .sp-input { 41 | 42 | } 43 | .sp-dark .sp-input:focus { 44 | 45 | } 46 | .sp-dark .sp-input.sp-validation-error { 47 | 48 | } 49 | 50 | .sp-dark .sp-picker-container , .sp-dark .sp-palette-container { 51 | 52 | } 53 | .sp-dark .sp-picker-container { 54 | 55 | } 56 | 57 | /* Palettes */ 58 | .sp-dark .sp-palette-container { 59 | 60 | } 61 | 62 | .sp-dark .sp-palette .sp-thumb-el { 63 | 64 | } 65 | .sp-dark .sp-palette .sp-thumb-el:hover, .sp-dark .sp-palette .sp-thumb-el.sp-thumb-active { 66 | 67 | } 68 | .sp-dark .sp-thumb-el { 69 | } 70 | 71 | /* Initial */ 72 | .sp-dark .sp-initial { 73 | 74 | } 75 | .sp-dark .sp-initial span { 76 | 77 | } 78 | 79 | /* Buttons */ 80 | .sp-dark .sp-button-container { 81 | 82 | } 83 | 84 | /* Replacer (the little preview div that shows up instead of the ) */ 85 | .sp-dark.sp-replacer { 86 | 87 | } 88 | .sp-dark.sp-replacer:hover, .sp-dark.sp-replacer.sp-active { 89 | border-color: #F0C49B; 90 | color: #111; 91 | } 92 | .sp-dark.sp-replacer.sp-disabled { 93 | 94 | } 95 | .sp-dark .sp-dd { 96 | 97 | } 98 | 99 | 100 | 101 | .sp-dark .sp-preview { 102 | 103 | } 104 | .sp-dark .sp-palette { 105 | 106 | } 107 | .sp-dark .sp-palette .sp-thumb-el { 108 | 109 | } 110 | 111 | .sp-dark button { 112 | 113 | } 114 | .sp-dark button:hover { 115 | 116 | } 117 | .sp-dark button:active { 118 | 119 | } 120 | .sp-dark .sp-cancel { 121 | 122 | } 123 | .sp-dark .sp-cancel:hover { 124 | 125 | } 126 | .sp-dark .sp-palette span:hover, .sp-dark .sp-palette span.sp-thumb-active { 127 | 128 | } 129 | --------------------------------------------------------------------------------