changing underlaying js
This commit is contained in:
parent
5571c7c8fc
commit
45f64495f8
70 changed files with 22927 additions and 5799 deletions
BIN
files/bgrins-spectrum-1.1.1-0-g2c2010c.zip
Normal file
BIN
files/bgrins-spectrum-1.1.1-0-g2c2010c.zip
Normal file
Binary file not shown.
2
files/bgrins-spectrum-2c2010c/.gitignore
vendored
Normal file
2
files/bgrins-spectrum-2c2010c/.gitignore
vendored
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
node_modules
|
||||
.DS_Store
|
||||
7
files/bgrins-spectrum-2c2010c/.travis.yml
Normal file
7
files/bgrins-spectrum-2c2010c/.travis.yml
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
language: node_js
|
||||
node_js:
|
||||
- 0.8
|
||||
before_script:
|
||||
- npm install -g grunt-cli
|
||||
script:
|
||||
- grunt travis --verbose
|
||||
55
files/bgrins-spectrum-2c2010c/Gruntfile.js
Normal file
55
files/bgrins-spectrum-2c2010c/Gruntfile.js
Normal file
|
|
@ -0,0 +1,55 @@
|
|||
|
||||
module.exports = function(grunt) {
|
||||
|
||||
grunt.initConfig({
|
||||
pkg: grunt.file.readJSON('component.json'),
|
||||
|
||||
qunit: {
|
||||
all: ['test/index.html']
|
||||
},
|
||||
|
||||
jshint: {
|
||||
options: {
|
||||
browser: true,
|
||||
sub: true,
|
||||
|
||||
globals: {
|
||||
jQuery: true
|
||||
}
|
||||
},
|
||||
all: ['spectrum.js']
|
||||
},
|
||||
|
||||
|
||||
uglify: {
|
||||
options: {
|
||||
mangle: false
|
||||
},
|
||||
dist: {
|
||||
files: {
|
||||
'build/spectrum-min.js': ['spectrum.js']
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
|
||||
grunt.loadNpmTasks('grunt-contrib-jshint');
|
||||
grunt.loadNpmTasks('grunt-contrib-qunit');
|
||||
grunt.loadNpmTasks('grunt-contrib-uglify');
|
||||
|
||||
|
||||
// Testing tasks
|
||||
grunt.registerTask('test', ['jshint', 'qunit']);
|
||||
|
||||
// Travis CI task.
|
||||
grunt.registerTask('travis', 'test');
|
||||
|
||||
// Default task.
|
||||
grunt.registerTask('default', ['test']);
|
||||
|
||||
//Build Task.
|
||||
grunt.registerTask('build', ['test', 'uglify']);
|
||||
|
||||
};
|
||||
20
files/bgrins-spectrum-2c2010c/LICENSE
Normal file
20
files/bgrins-spectrum-2c2010c/LICENSE
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
Copyright (c) 2013, Brian Grinstead, http://briangrinstead.com
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining
|
||||
a copy of this software and associated documentation files (the
|
||||
"Software"), to deal in the Software without restriction, including
|
||||
without limitation the rights to use, copy, modify, merge, publish,
|
||||
distribute, sublicense, and/or sell copies of the Software, and to
|
||||
permit persons to whom the Software is furnished to do so, subject to
|
||||
the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be
|
||||
included in all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
|
||||
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
|
||||
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
|
||||
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
|
||||
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
|
||||
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||
47
files/bgrins-spectrum-2c2010c/README.md
Normal file
47
files/bgrins-spectrum-2c2010c/README.md
Normal file
|
|
@ -0,0 +1,47 @@
|
|||
# Spectrum
|
||||
## The No Hassle Colorpicker
|
||||
|
||||
See the demo and docs: http://bgrins.github.io/spectrum.
|
||||
|
||||
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.
|
||||
|
||||
I started using canvas, then switched to CSS gradients, since it turned out to be easier to manage, and provided better cross browser support.
|
||||
|
||||
### Basic Usage
|
||||
|
||||
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.
|
||||
|
||||
<script src='spectrum.js'></script>
|
||||
<link rel='stylesheet' href='spectrum.css' />
|
||||
|
||||
<input id='colorpicker' />
|
||||
|
||||
<script>
|
||||
$("#colorpicker").spectrum({
|
||||
color: "#f00"
|
||||
});
|
||||
</script>
|
||||
|
||||
### jQuery Plugin Repository
|
||||
|
||||
Spectrum is registered as a jQuery plugin on the jQuery plugin repository here: http://plugins.jquery.com/spectrum/
|
||||
|
||||
### Continuous Integration
|
||||
|
||||
[](http://travis-ci.org/bgrins/spectrum)
|
||||
|
||||
Visit https://travis-ci.org/bgrins/spectrum to view the status of the automated tests.
|
||||
|
||||
### Building Spectrum Locally
|
||||
|
||||
If you'd like to download and use the plugin, head over to http://bgrins.github.io/spectrum/ and click the 'Download Zip' button.
|
||||
|
||||
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:
|
||||
|
||||
npm install -g grunt-cli
|
||||
npm install
|
||||
grunt build
|
||||
|
||||
### Internationalization
|
||||
|
||||
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.
|
||||
1
files/bgrins-spectrum-2c2010c/build/.gitignore
vendored
Normal file
1
files/bgrins-spectrum-2c2010c/build/.gitignore
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
spectrum-min.js
|
||||
11
files/bgrins-spectrum-2c2010c/component.json
Normal file
11
files/bgrins-spectrum-2c2010c/component.json
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
{
|
||||
"name": "spectrum",
|
||||
"version": "1.1.1",
|
||||
"main": ["./spectrum.css", "./spectrum.js"],
|
||||
"docs": "http://bgrins.github.com/spectrum",
|
||||
"homepage": "http://bgrins.github.com/spectrum",
|
||||
"demo": "http://jsfiddle.net/bgrins/ctkY3/",
|
||||
"dependencies": {
|
||||
"jquery": ">=1.7.2"
|
||||
}
|
||||
}
|
||||
6158
files/bgrins-spectrum-2c2010c/docs/bootstrap.css
vendored
Normal file
6158
files/bgrins-spectrum-2c2010c/docs/bootstrap.css
vendored
Normal file
File diff suppressed because it is too large
Load diff
271
files/bgrins-spectrum-2c2010c/docs/docs.css
Normal file
271
files/bgrins-spectrum-2c2010c/docs/docs.css
Normal file
|
|
@ -0,0 +1,271 @@
|
|||
|
||||
/* Styles for the demo page only. See spectrum.css for the actual colorpicker styles */
|
||||
html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
|
||||
body { margin: 0; font-size: 14px; line-height: 1.5; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAG0lEQVQIW2OMqXogyYADMIIkl7QpPMcmP+gkAYLGGdeobP2EAAAAAElFTkSuQmCC); }
|
||||
body, button, input, select, textarea { font-family: Droid Sans, Tahoma, sans-serif; color: #222; }
|
||||
body p { font-family: Verdana; font-size: 12px; color: #333; line-height: 1.8; }
|
||||
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; }
|
||||
h1 a { text-decoration: none; color: #334 !important; }
|
||||
h1 a:hover { text-decoration: underline; color: #336 !important; }
|
||||
#header { background: #eee; background: #eee; height: 60px; line-height: 60px; padding: 3px 10px;}
|
||||
|
||||
#goals { margin:0 auto; padding:0; width: 98%; }
|
||||
.goal { float: left; width: 29%; margin:1%; padding:1%; color: #335; min-height: 300px; background: #eee; border-radius: 10px; font-family: Verdana; }
|
||||
#docs .goal h4 { text-align: center; margin: .5em 0; font-weight: lighter; text-decoration: underline; font-family: Verdana; }
|
||||
a { color: #00e; }
|
||||
a:visited { color: #009; }
|
||||
a:hover { color: #06e; }
|
||||
a:focus { outline: thin dotted; }
|
||||
#header h2 { float:left; margin:0; padding:0; margin-left: 180px; font-size: 14px; line-height: inherit; font-weight: normal; font-family: Georgia;}
|
||||
#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;}
|
||||
#links { float:right; text-align: right; }
|
||||
#pick2-details { font: monospace; }
|
||||
#switch-current { float: left; position:relative; display:none;}
|
||||
/*#switch-current .spectrum-container { position: fixed; top:60px; left: 10px; }*/
|
||||
#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); }
|
||||
.footer { padding-top: 50px; }
|
||||
.switch-current-output { display:none; margin:3px auto; width: 200px; text-align: center; }
|
||||
.type { padding-left: 4px; font-size: .8em; font-weight: bold;}
|
||||
.description, .example {
|
||||
padding: 10px;
|
||||
border: 1px solid #888;
|
||||
background: white;
|
||||
position:relative;
|
||||
padding-top: 15px;
|
||||
}
|
||||
#docs { }
|
||||
#docs ul { margin-left: 25px; padding-left:10px; }
|
||||
#docs li { list-style: square; margin-left: 6px; }
|
||||
#docs p { margin: 0; padding:0; padding-top:4px; }
|
||||
#docs pre { position:relative; }
|
||||
#docs h2 { margin: 30px -25px; border-bottom: solid 1px; }
|
||||
#docs h3 { padding: 10px 15px; margin: 10px auto; margin-top: 40px; border: solid 3px #aaa;
|
||||
box-shadow: 0 3px 5px #333; }
|
||||
#docs h3.point { box-shadow: none; margin-left: -30px; margin-right: -30px; border: solid 1px #999; border-left: none; border-right:none;}
|
||||
#code-heading { font-size: 24px; text-align: center; margin: 6px 0; }
|
||||
#docs-content { color: #222; }
|
||||
#docs-content.dark { color: #ddd; }
|
||||
code { font-weight: bold; color: #933; }
|
||||
.note { float:right; background: #eee; padding: 4px; font-size: 11px; border: solid 1px #bbb; border-radius: 4px;}
|
||||
.option-content .note { float:none; position:absolute; right: 0; top: -40px;}
|
||||
.option-content { position:relative; background: #ededed;
|
||||
border: solid 2px #aaa; border-top: none;
|
||||
padding: 12px; width: 95%; margin: 0 auto;
|
||||
margin-top: -10px; padding-top: 20px;
|
||||
box-shadow: 0 0 10px #ccc; border-radius: 0 0 5px 5px;
|
||||
}
|
||||
.em-label { padding:4px; margin-left: 10px; display:inline-block; vertical-align: top; margin-top: 3px; }
|
||||
.hide { display:none; }
|
||||
.clearfix:before, .clearfix:after { content: ""; display: table; }
|
||||
.clearfix:after { clear: both; }
|
||||
.clearfix { *zoom: 1; }
|
||||
|
||||
|
||||
.label {
|
||||
padding: 1px 4px 2px;
|
||||
font-size: 10.998px;
|
||||
font-weight: bold;
|
||||
line-height: 13px;
|
||||
color: #ffffff;
|
||||
vertical-align: middle;
|
||||
white-space: nowrap;
|
||||
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
|
||||
background-color: #999999;
|
||||
-webkit-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.label:hover {
|
||||
color: #ffffff;
|
||||
text-decoration: none;
|
||||
}
|
||||
.label-important {
|
||||
background-color: #b94a48;
|
||||
}
|
||||
.label-important:hover {
|
||||
background-color: #953b39;
|
||||
}
|
||||
.label-result {
|
||||
background-color: #3a87ad;
|
||||
margin-right: 5px;
|
||||
}
|
||||
.example .label-result {
|
||||
position:absolute;
|
||||
top: -10px;
|
||||
left: 5px;
|
||||
}
|
||||
.label-warning {
|
||||
background-color: #f89406;
|
||||
}
|
||||
.label-warning:hover {
|
||||
background-color: #c67605;
|
||||
}
|
||||
.label-success {
|
||||
background-color: #468847;
|
||||
}
|
||||
.label-success:hover {
|
||||
background-color: #356635;
|
||||
}
|
||||
.label-info {
|
||||
background-color: #3a87ad;
|
||||
}
|
||||
.label-info:hover {
|
||||
background-color: #2d6987;
|
||||
}
|
||||
.label-inverse {
|
||||
background-color: #333333;
|
||||
}
|
||||
.label-inverse:hover {
|
||||
background-color: #1a1a1a;
|
||||
}
|
||||
.alert {
|
||||
padding: 8px 35px 8px 14px;
|
||||
margin: 10px 0;
|
||||
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
|
||||
background-color: #fcf8e3;
|
||||
border: 1px solid #fbeed5;
|
||||
-webkit-border-radius: 4px;
|
||||
-moz-border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
color: #c09853;
|
||||
}
|
||||
.alert-heading {
|
||||
color: inherit;
|
||||
}
|
||||
.alert .close {
|
||||
position: relative;
|
||||
top: -2px;
|
||||
right: -21px;
|
||||
line-height: 18px;
|
||||
}
|
||||
.alert-success {
|
||||
background-color: #dff0d8;
|
||||
border-color: #d6e9c6;
|
||||
color: #468847;
|
||||
}
|
||||
.alert-danger,
|
||||
.alert-error {
|
||||
background-color: #f2dede;
|
||||
border-color: #eed3d7;
|
||||
color: #b94a48;
|
||||
}
|
||||
.alert-info {
|
||||
background-color: #d9edf7;
|
||||
border-color: #bce8f1;
|
||||
color: #3a87ad;
|
||||
}
|
||||
.alert-block {
|
||||
padding-top: 14px;
|
||||
padding-bottom: 14px;
|
||||
}
|
||||
.alert-block > p,
|
||||
.alert-block > ul {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.alert-block p + p {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
|
||||
/* prettify */
|
||||
.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}
|
||||
|
||||
/* desert scheme ported from vim to google prettify */
|
||||
.dark pre { display: block; background-color: #333; border:1px solid #888; padding:2px; }
|
||||
.dark pre .nocode { background-color: none; color: #000 }
|
||||
.dark pre .str { color: #ffa0a0 } /* string - pink */
|
||||
.dark pre .kwd { color: #f0e68c; font-weight: bold }
|
||||
.dark pre .com { color: #87ceeb } /* comment - skyblue */
|
||||
.dark pre .typ { color: #98fb98 } /* type - lightgreen */
|
||||
.dark pre .lit { color: #cd5c5c } /* literal - darkred */
|
||||
.dark pre .pun { color: #fff } /* punctuation */
|
||||
.dark pre .pln { color: #fff } /* plaintext */
|
||||
.dark pre .tag { color: #f0e68c; font-weight: bold } /* html/xml tag - lightyellow */
|
||||
.dark pre .atn { color: #bdb76b; font-weight: bold } /* attribute name - khaki */
|
||||
.dark pre .atv { color: #ffa0a0 } /* attribute value - pink */
|
||||
.dark pre .dec { color: #98fb98 } /* decimal - lightgreen */
|
||||
|
||||
@media print {
|
||||
.dark pre { background-color: none }
|
||||
.dark pre .str, .dark code .str { color: #060 }
|
||||
.dark pre .kwd, .dark code .kwd { color: #006; font-weight: bold }
|
||||
.dark pre .com, .dark code .com { color: #600; font-style: italic }
|
||||
.dark pre .typ, .dark code .typ { color: #404; font-weight: bold }
|
||||
.dark pre .lit, .dark code .lit { color: #044 }
|
||||
.dark pre .pun, .dark code .pun { color: #440 }
|
||||
.dark pre .pln, .dark code .pln { color: #000 }
|
||||
.dark pre .tag, .dark code .tag { color: #006; font-weight: bold }
|
||||
.dark pre .atn, .dark code .atn { color: #404 }
|
||||
.dark pre .atv, .dark code .atv { color: #060 }
|
||||
}
|
||||
|
||||
/* http://projects.jga.me/toc/ */
|
||||
#toc {
|
||||
top: 76px;
|
||||
bottom: 0;
|
||||
left: 0px;
|
||||
position: fixed;
|
||||
font-size: 11px;
|
||||
width: 180px;
|
||||
color: #222;
|
||||
overflow-y: auto;
|
||||
font-family: Georgia;
|
||||
}
|
||||
#toc-slider {
|
||||
position:fixed;
|
||||
top:0;
|
||||
bottom:0;
|
||||
left: 0;
|
||||
width: 170px;
|
||||
background: #eee;
|
||||
line-height: 60px;
|
||||
padding-top: 3px;
|
||||
padding-left: 10px;
|
||||
border-right: solid 10px #cce;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
@media (max-device-width: 480px) {
|
||||
|
||||
#toc, #toc-slider, h1 {
|
||||
position:absolute;
|
||||
}
|
||||
}
|
||||
#toc ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
#toc li {
|
||||
padding: 5px 10px;
|
||||
}
|
||||
|
||||
#toc a {
|
||||
color: #225;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
}
|
||||
|
||||
#toc .toc-h2 {
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
#toc .toc-h3 {
|
||||
padding-left: 25px;
|
||||
}
|
||||
|
||||
#toc .toc-active {
|
||||
background: #CCE;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.full-spectrum {
|
||||
margin: 0 auto;
|
||||
}
|
||||
.full-spectrum .sp-palette {
|
||||
|
||||
max-width: 200px;
|
||||
}
|
||||
305
files/bgrins-spectrum-2c2010c/docs/docs.js
Normal file
305
files/bgrins-spectrum-2c2010c/docs/docs.js
Normal file
|
|
@ -0,0 +1,305 @@
|
|||
|
||||
function updateBorders(color) {
|
||||
$("#docs-content").css("border-color", color.toHexString());
|
||||
}
|
||||
|
||||
$(function() {
|
||||
|
||||
$("#full").spectrum({
|
||||
color: "#ECC",
|
||||
showInput: true,
|
||||
className: "full-spectrum",
|
||||
showInitial: true,
|
||||
showPalette: true,
|
||||
showSelectionPalette: true,
|
||||
showAlpha: true,
|
||||
maxPaletteSize: 10,
|
||||
preferredFormat: "hex",
|
||||
localStorageKey: "spectrum.demo",
|
||||
move: function (color) {
|
||||
updateBorders(color);
|
||||
},
|
||||
show: function () {
|
||||
|
||||
},
|
||||
beforeShow: function () {
|
||||
|
||||
},
|
||||
hide: function (color) {
|
||||
updateBorders(color);
|
||||
},
|
||||
|
||||
palette: [
|
||||
["rgb(0, 0, 0)", "rgb(67, 67, 67)", "rgb(102, 102, 102)", /*"rgb(153, 153, 153)","rgb(183, 183, 183)",*/
|
||||
"rgb(204, 204, 204)", "rgb(217, 217, 217)", /*"rgb(239, 239, 239)", "rgb(243, 243, 243)",*/ "rgb(255, 255, 255)"],
|
||||
["rgb(152, 0, 0)", "rgb(255, 0, 0)", "rgb(255, 153, 0)", "rgb(255, 255, 0)", "rgb(0, 255, 0)",
|
||||
"rgb(0, 255, 255)", "rgb(74, 134, 232)", "rgb(0, 0, 255)", "rgb(153, 0, 255)", "rgb(255, 0, 255)"],
|
||||
["rgb(230, 184, 175)", "rgb(244, 204, 204)", "rgb(252, 229, 205)", "rgb(255, 242, 204)", "rgb(217, 234, 211)",
|
||||
"rgb(208, 224, 227)", "rgb(201, 218, 248)", "rgb(207, 226, 243)", "rgb(217, 210, 233)", "rgb(234, 209, 220)",
|
||||
"rgb(221, 126, 107)", "rgb(234, 153, 153)", "rgb(249, 203, 156)", "rgb(255, 229, 153)", "rgb(182, 215, 168)",
|
||||
"rgb(162, 196, 201)", "rgb(164, 194, 244)", "rgb(159, 197, 232)", "rgb(180, 167, 214)", "rgb(213, 166, 189)",
|
||||
"rgb(204, 65, 37)", "rgb(224, 102, 102)", "rgb(246, 178, 107)", "rgb(255, 217, 102)", "rgb(147, 196, 125)",
|
||||
"rgb(118, 165, 175)", "rgb(109, 158, 235)", "rgb(111, 168, 220)", "rgb(142, 124, 195)", "rgb(194, 123, 160)",
|
||||
"rgb(166, 28, 0)", "rgb(204, 0, 0)", "rgb(230, 145, 56)", "rgb(241, 194, 50)", "rgb(106, 168, 79)",
|
||||
"rgb(69, 129, 142)", "rgb(60, 120, 216)", "rgb(61, 133, 198)", "rgb(103, 78, 167)", "rgb(166, 77, 121)",
|
||||
/*"rgb(133, 32, 12)", "rgb(153, 0, 0)", "rgb(180, 95, 6)", "rgb(191, 144, 0)", "rgb(56, 118, 29)",
|
||||
"rgb(19, 79, 92)", "rgb(17, 85, 204)", "rgb(11, 83, 148)", "rgb(53, 28, 117)", "rgb(116, 27, 71)",*/
|
||||
"rgb(91, 15, 0)", "rgb(102, 0, 0)", "rgb(120, 63, 4)", "rgb(127, 96, 0)", "rgb(39, 78, 19)",
|
||||
"rgb(12, 52, 61)", "rgb(28, 69, 135)", "rgb(7, 55, 99)", "rgb(32, 18, 77)", "rgb(76, 17, 48)"]
|
||||
]
|
||||
});
|
||||
|
||||
$("#hideButtons").spectrum({
|
||||
showButtons: false,
|
||||
change: updateBorders
|
||||
});
|
||||
|
||||
|
||||
var isDisabled = true;
|
||||
$("#toggle-disabled").click(function() {
|
||||
if (isDisabled) {
|
||||
$("#disabled").spectrum("enable");
|
||||
}
|
||||
else {
|
||||
$("#disabled").spectrum("disable");
|
||||
}
|
||||
isDisabled = !isDisabled;
|
||||
return false;
|
||||
});
|
||||
|
||||
$("input:disabled").spectrum({
|
||||
|
||||
});
|
||||
$("#disabled").spectrum({
|
||||
disabled: true
|
||||
});
|
||||
|
||||
$("#pick1").spectrum({
|
||||
flat: true,
|
||||
change: function(color) {
|
||||
var hsv = color.toHsv();
|
||||
var rgb = color.toRgbString();
|
||||
var hex = color.toHexString();
|
||||
//console.log("callback",color.toHslString(), color.toHsl().h, color.toHsl().s, color.toHsl().l)
|
||||
$("#docs-content").css({
|
||||
'background-color': color.toRgbString()
|
||||
}).toggleClass("dark", hsv.v < .5);
|
||||
$("#switch-current-rgb").text(rgb);
|
||||
$("#switch-current-hex").text(hex);
|
||||
},
|
||||
show: function() {
|
||||
|
||||
},
|
||||
hide: function() {
|
||||
|
||||
},
|
||||
showInput: true,
|
||||
showPalette: true,
|
||||
palette: ['white', '#306', '#c5c88d', '#ac5c5c', '#344660']
|
||||
});
|
||||
|
||||
$("#collapsed").spectrum({
|
||||
color: "#dd3333",
|
||||
change: updateBorders,
|
||||
show: function() {
|
||||
|
||||
},
|
||||
hide: function() {
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
$("#flat").spectrum({
|
||||
flat: true,
|
||||
showInput: true,
|
||||
move: updateBorders
|
||||
});
|
||||
|
||||
$("#showInput").spectrum({
|
||||
color: "#dd33dd",
|
||||
showInput: true,
|
||||
change: updateBorders,
|
||||
show: function() {
|
||||
|
||||
},
|
||||
hide: function() {
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
$("#showAlpha").spectrum({
|
||||
color: "rgba(255, 128, 0, .5)",
|
||||
showAlpha: true,
|
||||
change: updateBorders
|
||||
});
|
||||
|
||||
$("#showAlphaWithInput").spectrum({
|
||||
color: "rgba(255, 128, 0, .5)",
|
||||
showAlpha: true,
|
||||
showInput: true,
|
||||
showPalette: true,
|
||||
palette: [
|
||||
["rgba(255, 128, 0, .9)", "rgba(255, 128, 0, .5)"],
|
||||
["red", "green", "blue"],
|
||||
["hsla(25, 50, 75, .5)", "rgba(100, .5, .5, .8)"]
|
||||
],
|
||||
change: updateBorders
|
||||
});
|
||||
|
||||
$("#openWithLink").spectrum({
|
||||
color: "#dd3333",
|
||||
change: updateBorders,
|
||||
show: function() {
|
||||
|
||||
},
|
||||
hide: function() {
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
$("#className").spectrum({
|
||||
className: 'awesome'
|
||||
});
|
||||
|
||||
$("#showPalette").spectrum({
|
||||
showPalette: true,
|
||||
palette: [
|
||||
['black', 'white', 'blanchedalmond'],
|
||||
['rgb(255, 128, 0);', 'hsv 100 70 50', 'lightyellow']
|
||||
],
|
||||
change: updateBorders
|
||||
});
|
||||
|
||||
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)"];
|
||||
|
||||
$("#showPaletteOnly").spectrum({
|
||||
color: 'blanchedalmond',
|
||||
showPaletteOnly: true,
|
||||
showPalette:true,
|
||||
palette: [
|
||||
['black', 'white', 'blanchedalmond',
|
||||
'rgb(255, 128, 0);', 'hsv 100 70 50'],
|
||||
['red', 'yellow', 'green', 'blue', 'violet']
|
||||
]
|
||||
});
|
||||
|
||||
$("#clickoutFiresChange").spectrum({
|
||||
clickoutFiresChange: true,
|
||||
change: updateBorders
|
||||
});
|
||||
|
||||
$("#clickoutDoesntFireChange").spectrum({
|
||||
change: updateBorders
|
||||
});
|
||||
|
||||
$("#showInitial").spectrum({
|
||||
showInitial: true
|
||||
});
|
||||
|
||||
$("#showInputAndInitial").spectrum({
|
||||
showInitial: true,
|
||||
showInput: true
|
||||
});
|
||||
|
||||
|
||||
$("#changeOnMove").spectrum({
|
||||
move: function(c) {
|
||||
var label = $("#changeOnMoveLabel");
|
||||
label.text("Move called: " + c.toHexString());
|
||||
}
|
||||
});
|
||||
$("#changeOnMoveNo").spectrum({
|
||||
change: function(c) {
|
||||
var label = $("#changeOnMoveNoLabel");
|
||||
label.text("Change called: " + c.toHexString());
|
||||
}
|
||||
});
|
||||
|
||||
$(".basic").spectrum({ change: updateBorders });
|
||||
$(".override").spectrum({
|
||||
color: "yellow",
|
||||
change: updateBorders
|
||||
});
|
||||
|
||||
$("#beforeShow").spectrum({
|
||||
beforeShow: function() {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
$("#custom").spectrum({
|
||||
color: "#f00"
|
||||
});
|
||||
|
||||
$("#buttonText").spectrum({
|
||||
chooseText: "Alright",
|
||||
cancelText: "No way"
|
||||
});
|
||||
|
||||
|
||||
$("#showSelectionPalette").spectrum({
|
||||
showPalette: true,
|
||||
showSelectionPalette: true, // true by default
|
||||
palette: [ ]
|
||||
});
|
||||
$("#showSelectionPaletteStorage").spectrum({
|
||||
showPalette: true,
|
||||
localStorageKey: "spectrum.homepage", // Any picker with the same string will share selection
|
||||
showSelectionPalette: true,
|
||||
palette: [ ]
|
||||
});
|
||||
|
||||
|
||||
$("#preferredHex").spectrum({
|
||||
preferredFormat: "hex",
|
||||
showInput: true
|
||||
});
|
||||
$("#preferredHex6").spectrum({
|
||||
preferredFormat: "hex6",
|
||||
showInput: true
|
||||
});
|
||||
$("#preferredHsl").spectrum({
|
||||
preferredFormat: "hsl",
|
||||
showInput: true
|
||||
});
|
||||
$("#preferredRgb").spectrum({
|
||||
preferredFormat: "rgb",
|
||||
showInput: true
|
||||
});
|
||||
$("#preferredName").spectrum({
|
||||
preferredFormat: "name",
|
||||
showInput: true
|
||||
});
|
||||
$("#preferredNone").spectrum({
|
||||
showInput: true
|
||||
});
|
||||
|
||||
$("#triggerSet").spectrum({
|
||||
change: updateBorders
|
||||
});
|
||||
|
||||
// Show the original input to demonstrate the value changing when calling `set`
|
||||
$("#triggerSet").show();
|
||||
|
||||
$("#btnEnterAColor").click(function() {
|
||||
$("#triggerSet").spectrum("set", $("#enterAColor").val());
|
||||
});
|
||||
|
||||
|
||||
$('#toc').toc({
|
||||
'selectors': 'h2,h3', //elements to use as headings
|
||||
'container': '#docs', //element to find all selectors in
|
||||
'smoothScrolling': true, //enable or disable smooth scrolling on click
|
||||
'prefix': 'toc', //prefix for anchor tags and class names
|
||||
'highlightOnScroll': true, //add class to heading that is currently in focus
|
||||
'highlightOffset': 100, //offset to trigger the next headline
|
||||
'anchorName': function(i, heading, prefix) { //custom function for anchor name
|
||||
return prefix+i;
|
||||
}
|
||||
});
|
||||
|
||||
prettyPrint();
|
||||
|
||||
|
||||
});
|
||||
9597
files/bgrins-spectrum-2c2010c/docs/jquery-1.9.1.js
vendored
Normal file
9597
files/bgrins-spectrum-2c2010c/docs/jquery-1.9.1.js
vendored
Normal file
File diff suppressed because it is too large
Load diff
28
files/bgrins-spectrum-2c2010c/docs/prettify.js
Normal file
28
files/bgrins-spectrum-2c2010c/docs/prettify.js
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
var q=null;window.PR_SHOULD_USE_CONTINUATION=!0;
|
||||
(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=
|
||||
[],b=[],o=f[0]==="^",c=o?1:0,i=f.length;c<i;++c){var j=f[c];if(/\\[bdsw]/i.test(j))a.push(j);else{var j=m(j),d;c+2<i&&"-"===f[c+1]?(d=m(f[c+2]),c+=2):d=j;b.push([j,d]);d<65||j>122||(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;c<b.length;++c)i=b[c],i[0]<=j[1]+1?j[1]=Math.max(j[1],i[1]):f.push(j=i);b=["["];o&&b.push("^");b.push.apply(b,a);for(c=0;c<
|
||||
f.length;++c)i=f[c],b.push(e(i[0])),i[1]>i[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<b;++c){var j=f[c];j==="("?++i:"\\"===j.charAt(0)&&(j=+j.substring(1))&&j<=i&&(d[j]=-1)}for(c=1;c<d.length;++c)-1===d[c]&&(d[c]=++t);for(i=c=0;c<b;++c)j=f[c],j==="("?(++i,d[i]===void 0&&(f[c]="(?:")):"\\"===j.charAt(0)&&
|
||||
(j=+j.substring(1))&&j<=i&&(f[c]="\\"+d[i]);for(i=c=0;c<b;++c)"^"===f[c]&&"^"!==f[c+1]&&(f[c]="");if(a.ignoreCase&&s)for(c=0;c<b;++c)j=f[c],a=j.charAt(0),j.length>=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<d;++p){var g=a[p];if(g.ignoreCase)l=!0;else if(/[a-z]/i.test(g.source.replace(/\\u[\da-f]{4}|\\x[\da-f]{2}|\\[^UXux]/gi,""))){s=!0;l=!1;break}}for(var r=
|
||||
{b:8,t:9,n:10,v:11,f:12,r:13},n=[],p=0,d=a.length;p<d;++p){g=a[p];if(g.global||g.multiline)throw Error(""+g);n.push("(?:"+y(g)+")")}return RegExp(n.join("|"),l?"gi":"g")}function M(a){function m(a){switch(a.nodeType){case 1:if(e.test(a.className))break;for(var g=a.firstChild;g;g=g.nextSibling)m(g);g=a.nodeName;if("BR"===g||"LI"===g)h[s]="\n",t[s<<1]=y++,t[s++<<1|1]=a;break;case 3:case 4:g=a.nodeValue,g.length&&(g=p?g.replace(/\r\n?/g,"\n"):g.replace(/[\t\n\r ]+/g," "),h[s]=g,t[s<<1]=y,y+=g.length,
|
||||
t[s++<<1|1]=a)}}var e=/(?:^|\s)nocode(?:\s|$)/,h=[],y=0,t=[],s=0,l;a.currentStyle?l=a.currentStyle.whiteSpace:window.getComputedStyle&&(l=document.defaultView.getComputedStyle(a,q).getPropertyValue("white-space"));var p=l&&"pre"===l.substring(0,3);m(a);return{a:h.join("").replace(/\n$/,""),c:t}}function B(a,m,e,h){m&&(a={a:m,d:a},e(a),h.push.apply(h,a.e))}function x(a,m){function e(a){for(var l=a.d,p=[l,"pln"],d=0,g=a.a.match(y)||[],r={},n=0,z=g.length;n<z;++n){var f=g[n],b=r[f],o=void 0,c;if(typeof b===
|
||||
"string")c=!1;else{var i=h[f.charAt(0)];if(i)o=f.match(i[1]),b=i[0];else{for(c=0;c<t;++c)if(i=m[c],o=f.match(i[1])){b=i[0];break}o||(b="pln")}if((c=b.length>=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),
|
||||
l=[],p={},d=0,g=e.length;d<g;++d){var r=e[d],n=r[3];if(n)for(var k=n.length;--k>=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])*(?:`|$))/,
|
||||
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]*/,
|
||||
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,
|
||||
"");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),
|
||||
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}
|
||||
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<d.length;++g)e(d[g]);m===(m|0)&&d[0].setAttribute("value",
|
||||
m);var r=s.createElement("OL");r.className="linenums";for(var n=Math.max(0,m-1|0)||0,g=0,z=d.length;g<z;++g)l=d[g],l.className="L"+(g+n)%10,l.firstChild||l.appendChild(s.createTextNode("\xa0")),r.appendChild(l);a.appendChild(r)}function k(a,m){for(var e=m.length;--e>=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*</.test(m)?"default-markup":"default-code";return A[a]}function E(a){var m=
|
||||
a.g;try{var e=M(a.h),h=e.a;a.a=h;a.c=e.c;a.d=0;C(m,h)(a);var k=/\bMSIE\b/.test(navigator.userAgent),m=/\n/g,t=a.a,s=t.length,e=0,l=a.c,p=l.length,h=0,d=a.e,g=d.length,a=0;d[g]=s;var r,n;for(n=r=0;n<g;)d[n]!==d[n+2]?(d[r++]=d[n++],d[r++]=d[n++]):n+=2;g=r;for(n=r=0;n<g;){for(var z=d[n],f=d[n+1],b=n+2;b+2<=g&&d[b+1]===f;)b+=2;d[r++]=z;d[r++]=f;n=b}for(d.length=r;h<p;){var o=l[h+2]||s,c=d[a+2]||s,b=Math.min(o,c),i=l[h+1],j;if(i.nodeType!==1&&(j=t.substring(e,b))){k&&(j=j.replace(m,"\r"));i.nodeValue=
|
||||
j;var u=i.ownerDocument,v=u.createElement("SPAN");v.className=d[a+1];var x=i.parentNode;x.replaceChild(v,i);v.appendChild(i);e<o&&(l[h+1]=i=u.createTextNode(t.substring(b,o)),x.insertBefore(i,v.nextSibling))}e=b;e>=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"],
|
||||
"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"],
|
||||
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"],
|
||||
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"+
|
||||
I,J,v],hashComments:!0,cStyleComments:!0,multiLineStrings:!0,regexLiterals:!0}),A={};k(O,["default-code"]);k(x([],[["pln",/^[^<?]+/],["dec",/^<!\w[^>]*(?:>|$)/],["com",/^<\!--[\S\s]*?(?:--\>|$)/],["lang-",/^<\?([\S\s]+?)(?:\?>|$)/],["lang-",/^<%([\S\s]+?)(?:%>|$)/],["pun",/^(?:<[%?]|[%?]>)/],["lang-",/^<xmp\b[^>]*>([\S\s]+?)<\/xmp\b[^>]*>/i],["lang-js",/^<script\b[^>]*>([\S\s]*?)(<\/script\b[^>]*>)/i],["lang-css",/^<style\b[^>]*>([\S\s]*?)(<\/style\b[^>]*>)/i],["lang-in.tag",/^(<\/?[a-z][^<>]*>)/i]]),
|
||||
["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",
|
||||
/^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}),
|
||||
["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",
|
||||
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<h.length&&l.now()<e;p++){var n=h[p],k=n.className;if(k.indexOf("prettyprint")>=0){var k=k.match(g),f,b;if(b=
|
||||
!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<h.length?setTimeout(m,
|
||||
250):a&&a()}for(var e=[document.getElementsByTagName("pre"),document.getElementsByTagName("code"),document.getElementsByTagName("xmp")],h=[],k=0;k<e.length;++k)for(var t=0,s=e[k].length;t<s;++t)h.push(e[k][t]);var e=q,l=Date;l.now||(l={now:function(){return+new Date}});var p=0,d,g=/\blang(?:uage)?-([\w.]+)(?!\S)/;m()};window.PR={createSimpleLexer:x,registerLangHandler:k,sourceDecorator:u,PR_ATTRIB_NAME:"atn",PR_ATTRIB_VALUE:"atv",PR_COMMENT:"com",PR_DECLARATION:"dec",PR_KEYWORD:"kwd",PR_LITERAL:"lit",
|
||||
PR_NOCODE:"nocode",PR_PLAIN:"pln",PR_PUNCTUATION:"pun",PR_SOURCE:"src",PR_STRING:"str",PR_TAG:"tag",PR_TYPE:"typ"}})();
|
||||
106
files/bgrins-spectrum-2c2010c/docs/toc.js
Normal file
106
files/bgrins-spectrum-2c2010c/docs/toc.js
Normal file
|
|
@ -0,0 +1,106 @@
|
|||
!function($) {
|
||||
$.fn.toc = function(options) {
|
||||
var self = this;
|
||||
var opts = $.extend({}, jQuery.fn.toc.defaults, options);
|
||||
|
||||
var container = $(opts.container);
|
||||
var headings = $(opts.selectors, container);
|
||||
var headingOffsets = [];
|
||||
var activeClassName = opts.prefix+'-active';
|
||||
|
||||
var findScrollableElement = function(els) {
|
||||
for (var i = 0, argLength = arguments.length; i < argLength; i++) {
|
||||
var el = arguments[i],
|
||||
$scrollElement = $(el);
|
||||
if ($scrollElement.scrollTop() > 0) {
|
||||
return $scrollElement;
|
||||
} else {
|
||||
$scrollElement.scrollTop(1);
|
||||
var isScrollable = $scrollElement.scrollTop() > 0;
|
||||
$scrollElement.scrollTop(0);
|
||||
if (isScrollable) {
|
||||
return $scrollElement;
|
||||
}
|
||||
}
|
||||
}
|
||||
return [];
|
||||
};
|
||||
var scrollable = findScrollableElement(opts.container, 'body', 'html');
|
||||
|
||||
var scrollTo = function(e) {
|
||||
if (opts.smoothScrolling) {
|
||||
e.preventDefault();
|
||||
var elScrollTo = $(e.target).attr('href');
|
||||
var $el = $(elScrollTo);
|
||||
|
||||
scrollable.animate({ scrollTop: $el.offset().top }, 400, 'swing', function() {
|
||||
location.hash = elScrollTo;
|
||||
});
|
||||
}
|
||||
$('li', self).removeClass(activeClassName);
|
||||
$(e.target).parent().addClass(activeClassName);
|
||||
};
|
||||
|
||||
//highlight on scroll
|
||||
var timeout;
|
||||
var highlightOnScroll = function(e) {
|
||||
if (timeout) {
|
||||
clearTimeout(timeout);
|
||||
}
|
||||
timeout = setTimeout(function() {
|
||||
var top = $(window).scrollTop();
|
||||
for (var i = 0, c = headingOffsets.length; i < c; i++) {
|
||||
if (headingOffsets[i] >= top) {
|
||||
$('li', self).removeClass(activeClassName);
|
||||
$('li:eq('+(i-1)+')', self).addClass(activeClassName);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}, 50);
|
||||
};
|
||||
if (opts.highlightOnScroll) {
|
||||
$(window).bind('scroll', highlightOnScroll);
|
||||
highlightOnScroll();
|
||||
}
|
||||
|
||||
return this.each(function() {
|
||||
//build TOC
|
||||
var ul = $('<ul/>');
|
||||
headings.each(function(i, heading) {
|
||||
var $h = $(heading);
|
||||
headingOffsets.push($h.offset().top - opts.highlightOffset);
|
||||
|
||||
//add anchor
|
||||
var anchor = $('<span/>').attr('id', opts.anchorName(i, heading, opts.prefix)).insertBefore($h);
|
||||
|
||||
//build TOC item
|
||||
var a = $('<a/>')
|
||||
.text($h.text())
|
||||
.attr('href', '#' + opts.anchorName(i, heading, opts.prefix))
|
||||
.bind('click', scrollTo);
|
||||
|
||||
var li = $('<li/>')
|
||||
.addClass(opts.prefix+'-'+$h[0].tagName.toLowerCase())
|
||||
.append(a);
|
||||
|
||||
ul.append(li);
|
||||
});
|
||||
var el = $(this);
|
||||
el.html(ul);
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
jQuery.fn.toc.defaults = {
|
||||
container: 'body',
|
||||
selectors: 'h1,h2,h3',
|
||||
smoothScrolling: true,
|
||||
prefix: 'toc',
|
||||
highlightOnScroll: true,
|
||||
highlightOffset: 100,
|
||||
anchorName: function(i, heading, prefix) {
|
||||
return prefix+i;
|
||||
}
|
||||
};
|
||||
|
||||
}(jQuery);
|
||||
254
files/bgrins-spectrum-2c2010c/example/example.js
Normal file
254
files/bgrins-spectrum-2c2010c/example/example.js
Normal file
|
|
@ -0,0 +1,254 @@
|
|||
|
||||
$(function() {
|
||||
|
||||
var colorpickerInput = $("#full");
|
||||
|
||||
|
||||
function toggleButtonState() {
|
||||
var options = colorpickerInput.spectrum("option");
|
||||
$(".toggleBtn").each(function() {
|
||||
$(this).toggleClass("active", !!options[$(this).data("rule")]);
|
||||
});
|
||||
}
|
||||
|
||||
$(document).on("click", ".toggleBtn", function() {
|
||||
var option = $(this).data("rule");
|
||||
var existing = colorpickerInput.spectrum("option", option);
|
||||
|
||||
colorpickerInput.spectrum("option", option, !existing);
|
||||
toggleButtonState();
|
||||
});
|
||||
|
||||
colorpickerInput.spectrum({
|
||||
color: "#ECC",
|
||||
flat: true,
|
||||
showInput: true,
|
||||
className: "full-spectrum",
|
||||
showInitial: true,
|
||||
showPalette: true,
|
||||
showSelectionPalette: true,
|
||||
maxPaletteSize: 10,
|
||||
preferredFormat: "hex",
|
||||
localStorageKey: "spectrum.example",
|
||||
move: function (color) {
|
||||
},
|
||||
show: function () {
|
||||
|
||||
},
|
||||
beforeShow: function () {
|
||||
|
||||
},
|
||||
hide: function (color) {
|
||||
},
|
||||
|
||||
palette: [
|
||||
["rgb(0, 0, 0)", "rgb(67, 67, 67)", "rgb(102, 102, 102)", /*"rgb(153, 153, 153)","rgb(183, 183, 183)",*/
|
||||
"rgb(204, 204, 204)", "rgb(217, 217, 217)", /*"rgb(239, 239, 239)", "rgb(243, 243, 243)",*/ "rgb(255, 255, 255)"],
|
||||
["rgb(152, 0, 0)", "rgb(255, 0, 0)", "rgb(255, 153, 0)", "rgb(255, 255, 0)", "rgb(0, 255, 0)",
|
||||
"rgb(0, 255, 255)", "rgb(74, 134, 232)", "rgb(0, 0, 255)", "rgb(153, 0, 255)", "rgb(255, 0, 255)"],
|
||||
["rgb(230, 184, 175)", "rgb(244, 204, 204)", "rgb(252, 229, 205)", "rgb(255, 242, 204)", "rgb(217, 234, 211)",
|
||||
"rgb(208, 224, 227)", "rgb(201, 218, 248)", "rgb(207, 226, 243)", "rgb(217, 210, 233)", "rgb(234, 209, 220)",
|
||||
"rgb(221, 126, 107)", "rgb(234, 153, 153)", "rgb(249, 203, 156)", "rgb(255, 229, 153)", "rgb(182, 215, 168)",
|
||||
"rgb(162, 196, 201)", "rgb(164, 194, 244)", "rgb(159, 197, 232)", "rgb(180, 167, 214)", "rgb(213, 166, 189)",
|
||||
"rgb(204, 65, 37)", "rgb(224, 102, 102)", "rgb(246, 178, 107)", "rgb(255, 217, 102)", "rgb(147, 196, 125)",
|
||||
"rgb(118, 165, 175)", "rgb(109, 158, 235)", "rgb(111, 168, 220)", "rgb(142, 124, 195)", "rgb(194, 123, 160)",
|
||||
"rgb(166, 28, 0)", "rgb(204, 0, 0)", "rgb(230, 145, 56)", "rgb(241, 194, 50)", "rgb(106, 168, 79)",
|
||||
"rgb(69, 129, 142)", "rgb(60, 120, 216)", "rgb(61, 133, 198)", "rgb(103, 78, 167)", "rgb(166, 77, 121)",
|
||||
/*"rgb(133, 32, 12)", "rgb(153, 0, 0)", "rgb(180, 95, 6)", "rgb(191, 144, 0)", "rgb(56, 118, 29)",
|
||||
"rgb(19, 79, 92)", "rgb(17, 85, 204)", "rgb(11, 83, 148)", "rgb(53, 28, 117)", "rgb(116, 27, 71)",*/
|
||||
"rgb(91, 15, 0)", "rgb(102, 0, 0)", "rgb(120, 63, 4)", "rgb(127, 96, 0)", "rgb(39, 78, 19)",
|
||||
"rgb(12, 52, 61)", "rgb(28, 69, 135)", "rgb(7, 55, 99)", "rgb(32, 18, 77)", "rgb(76, 17, 48)"]
|
||||
]
|
||||
});
|
||||
|
||||
$("#size").change(function() {
|
||||
var size = Math.min(500, Math.max(50, $(this).val()));
|
||||
$(".sp-picker-container").width(size);
|
||||
|
||||
colorpickerInput.spectrum("reflow");
|
||||
});
|
||||
|
||||
$("#huesize").change(function() {
|
||||
var size = Math.min(80, Math.max(5, $(this).val()));
|
||||
|
||||
$(".sp-hue").css("left", (103 - size) + "%");
|
||||
$(".sp-color").css("right", size + "%");
|
||||
$(".sp-fill").css("padding-top", (100 - size) + "%");
|
||||
|
||||
colorpickerInput.spectrum("reflow");
|
||||
});
|
||||
|
||||
toggleButtonState();
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
||||
var palettes = { };
|
||||
|
||||
|
||||
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"]];
|
||||
|
||||
palettes.default = [
|
||||
["#000000", "#434343", "#666666", "#999999", "#b7b7b7", "#cccccc", "#d9d9d9", "#efefef", "#f3f3f3", "#ffffff"],
|
||||
["#980000", "#ff0000", "#ff9900", "#ffff00", "#00ff00", "#00ffff", "#4a86e8", "#0000ff", "#9900ff", "#ff00ff"],
|
||||
["#e6b8af", "#f4cccc", "#fce5cd", "#fff2cc", "#d9ead3", "#d9ead3", "#c9daf8", "#cfe2f3", "#d9d2e9", "#ead1dc"],
|
||||
["#dd7e6b", "#ea9999", "#f9cb9c", "#ffe599", "#b6d7a8", "#a2c4c9", "#a4c2f4", "#9fc5e8", "#b4a7d6", "#d5a6bd"],
|
||||
["#cc4125", "#e06666", "#f6b26b", "#ffd966", "#93c47d", "#76a5af", "#6d9eeb", "#6fa8dc", "#8e7cc3", "#c27ba0"],
|
||||
["#a61c00", "#cc0000", "#e69138", "#f1c232", "#6aa84f", "#45818e", "#3c78d8", "#3d85c6", "#674ea7", "#a64d79"],
|
||||
["#85200c", "#990000", "#b45f06", "#bf9000", "#38761d", "#134f5c", "#1155cc", "#0b5394", "#351c75", "#741b47"],
|
||||
["#5b0f00", "#660000", "#783f04", "#7f6000", "#274e13", "#0c343d", "#1c4587", "#073763", "#20124d", "#4c1130"]
|
||||
];
|
||||
|
||||
palettes.snagit = [
|
||||
["#ffffff", "#000000", "#c00000", "#f79646", "#f5f445", "#7fd13b", "#4bacc6", "#1f497d", "#8064a2", "#ff0000"],
|
||||
["#f2f2f2", "#7f7f7f", "#f8d1d3", "#fdeada", "#fafdd7", "#e5f5d7", "#dbeef3", "#c6d9f0", "#e5e0ec", "#ffcc00"],
|
||||
["#d7d7d7", "#595959", "#f2a3a7", "#fbd5b5", "#fbfaae", "#cbecb0", "#b7dde8", "#8db3e2", "#ccc1d9", "#ffff00"],
|
||||
["#bebebe", "#414141", "#eb757b", "#fac08f", "#eef98e", "#b2e389", "#92cddc", "#548dd4", "#b2a2c7", "#00ff00"],
|
||||
["#a3a3a3", "#2a2a2a", "#a3171e", "#e36c09", "#dede07", "#5ea226", "#31859b", "#17365d", "#5f497a", "#0000ff"],
|
||||
["#7e7e7e", "#141414", "#6d0f14", "#974806", "#c0c00d", "#3f6c19", "#205867", "#0f243e", "#3f3151", "#9900ff"]
|
||||
];
|
||||
|
||||
palettes.newton = [
|
||||
|
||||
"#ffffff", "#000000", "#ff0000", "#ff8000", "#ffff00", "#008000", "#0000ff", "#4b0082", "#9400d3"
|
||||
|
||||
];
|
||||
|
||||
palettes.aol = [
|
||||
|
||||
["#ffffff", "#fff7de", "#ffffce", "#ffffbd", "#ffffd6", "#b5ff84", "#c6efde", "#efffff", "#efe7f7", "#dea5d6"],
|
||||
["#ded6c6", "#ffc6bd", "#ffe7b5", "#ffe7a5", "#efef7b", "#adf77b", "#5abd9c", "#a5d6f7", "#8494e7", "#ef7be7"],
|
||||
["#cec6b5", "#e78473", "#efad52", "#f7b500", "#efef9c", "#a5ff00", "#7bd6bd", "#a5d6de", "#8c5ae7", "#de6bce"],
|
||||
["#8c8473", "#ef0018", "#ef4210", "#f79400", "#ffff00", "#63d600", "#a5c684", "#5a63d6", "#7b52c6", "#c642ce"],
|
||||
["#736b63", "#d60039", "#d67310", "#f7844a", "#f7de00", "#429400", "#4a944a", "#4200ff", "#9c00de", "#a500c6"],
|
||||
["#39524a", "#b51821", "#944a08", "#a55229", "#8c8c00", "#318c00", "#429484", "#3100c6", "#523984", "#940084"],
|
||||
["#000000", "#940008", "#840008", "#ad2929", "#637321", "#296b00", "#29006b", "#21007b", "#52007b", "#84007b"]
|
||||
|
||||
|
||||
];
|
||||
|
||||
palettes.oldGmail = [
|
||||
["#ffffff", "#cecece", "#c6c6c6", "#9c9c9c", "#636363", "#313131", "#000000"],
|
||||
["#ffcece", "#ff6363", "#ff0000", "#ce0000", "#9c0000", "#630000", "#310000"],
|
||||
["#ffce9c", "#ff9c63", "#ff9c00", "#ff6300", "#ce6300", "#9c3100", "#633100"],
|
||||
["#ffff9c", "#ffff63", "#ffce63", "#ffce31", "#ce9c31", "#9c6331", "#633131"],
|
||||
["#ffffce", "#ffff31", "#ffff00", "#ffce00", "#9c9c00", "#636300", "#313100"],
|
||||
["#9cff9c", "#63ff9c", "#31ff31", "#31ce00", "#009c00", "#006300", "#003100"],
|
||||
["#9cffff", "#31ffff", "#63cece", "#00cece", "#319c9c", "#316363", "#003131"],
|
||||
["#ceffff", "#63ffff", "#31ceff", "#3163ff", "#3131ff", "#00009c", "#000063"],
|
||||
["#ceceff", "#9c9cff", "#6363ce", "#6331ff", "#6300ce", "#31319c", "#31009c"],
|
||||
["#ffceff", "#ff9cff", "#ce63ce", "#ce31ce", "#9c319c", "#633163", "#310031"]
|
||||
|
||||
|
||||
];
|
||||
palettes.hotmail = [
|
||||
["#ffffff", "#000000", "#efefe7", "#184a7b", "#4a84bd", "#c6524a", "#9cbd5a", "#8463a5", "#4aadc6", "#f79442"],
|
||||
["#f7f7f7", "#7b7b7b", "#dedec6", "#c6def7", "#dee7f7", "#f7dede", "#eff7de", "#e7e7ef", "#deeff7", "#ffefde"],
|
||||
["#dedede", "#5a5a5a", "#c6bd94", "#8cb5e7", "#bdcee7", "#e7bdb5", "#d6e7bd", "#cec6de", "#b5deef", "#ffd6b5"],
|
||||
["#bdbdbd", "#393939", "#948c52", "#528cd6", "#94b5d6", "#de9494", "#c6d69c", "#b5a5c6", "#94cede", "#ffc68c"],
|
||||
["#a5a5a5", "#212121", "#4a4229", "#10315a", "#316394", "#943131", "#739439", "#5a4a7b", "#31849c", "#e76b08"],
|
||||
["#848484", "#080808", "#181810", "#082139", "#214263", "#632121", "#4a6329", "#393152", "#215a63", "#944a00"],
|
||||
["#c60000", "#ff0000", "#ffc600", "#ffff00", "#94d652", "#00b552", "#00b5f7", "#0073c6", "#002163", "#7331a5"],
|
||||
|
||||
];
|
||||
palettes.yahoo = [
|
||||
|
||||
["#000000", "#111111", "#2d2d2d", "#434343", "#5b5b5b", "#737373", "#8b8b8b", "#a2a2a2", "#b9b9b9", "#d0d0d0", "#e6e6e6", "#ffffff"],
|
||||
["#7f7f00", "#bfbf00", "#ffff00", "#ffff40", "#ffff80", "#ffffbf", "#525330", "#898a49", "#aea945", "#c3be71", "#e0dcaa", "#fcfae1"],
|
||||
["#407f00", "#60bf00", "#80ff00", "#a0ff40", "#c0ff80", "#dfffbf", "#3b5738", "#668f5a", "#7f9757", "#8a9b55", "#b7c296", "#e6ebd5"],
|
||||
["#007f40", "#00bf60", "#00ff80", "#40ffa0", "#80ffc0", "#bfffdf", "#033d21", "#438059", "#7fa37c", "#8dae94", "#acc6b5", "#ddebe2"],
|
||||
["#007f7f", "#00bfbf", "#00ffff", "#40ffff", "#80ffff", "#bfffff", "#033d3d", "#347d7e", "#609a9f", "#96bdc4", "#b5d1d7", "#e2f1f4"],
|
||||
["#00407f", "#0060bf", "#0080ff", "#40a0ff", "#80c0ff", "#bfdfff", "#1b2c48", "#385376", "#57708f", "#7792ac", "#a8bed1", "#deebf6"],
|
||||
["#00007f", "#0000bf", "#0000ff", "#4040ff", "#8080ff", "#bfbfff", "#212143", "#373e68", "#444f75", "#585e82", "#8687a4", "#d2d1e1"],
|
||||
["#40007f", "#6000bf", "#8000ff", "#a040ff", "#c080ff", "#dfbfff", "#302449", "#54466f", "#655a7f", "#726284", "#9e8fa9", "#dcd1df"],
|
||||
["#7f007f", "#bf00bf", "#ff00ff", "#ff40ff", "#ff80ff", "#ffbfff", "#4a234a", "#794a72", "#936386", "#9d7292", "#c0a0b6", "#ecdae5"],
|
||||
["#7f003f", "#bf005f", "#ff007f", "#ff409f", "#ff80bf", "#ffbfdf", "#451528", "#823857", "#a94a76", "#bc6f95", "#d8a5bb", "#f7dde9"],
|
||||
["#800000", "#c00000", "#ff0000", "#ff4040", "#ff8080", "#ffc0c0", "#441415", "#82393c", "#aa4d4e", "#bc6e6e", "#d8a3a4", "#f8dddd"],
|
||||
["#7f3f00", "#bf5f00", "#ff7f00", "#ff9f40", "#ffbf80", "#ffdfbf", "#482c1b", "#855a40", "#b27c51", "#c49b71", "#e1c4a8", "#fdeee0"]
|
||||
|
||||
];
|
||||
palettes.sixteen = [
|
||||
["#000000", "#000084", "#0000ff", "#840000"],
|
||||
["#840084", "#008200", "#ff0000", "#008284"],
|
||||
["#ff00ff", "#848200", "#848284", "#00ff00"],
|
||||
["#ffa600", "#00ffff", "#c6c3c6", "#ffff00"],
|
||||
["#ffffff"]
|
||||
];
|
||||
|
||||
palettes.websafe = [
|
||||
["#000", "#300", "#600", "#900", "#c00", "#f00"],
|
||||
["#003", "#303", "#603", "#903", "#c03", "#f03"],
|
||||
["#006", "#306", "#606", "#906", "#c06", "#f06"],
|
||||
["#009", "#309", "#609", "#909", "#c09", "#f09"],
|
||||
["#00c", "#30c", "#60c", "#90c", "#c0c", "#f0c"],
|
||||
["#00f", "#30f", "#60f", "#90f", "#c0f", "#f0f"],
|
||||
["#030", "#330", "#630", "#930", "#c30", "#f30"],
|
||||
["#033", "#333", "#633", "#933", "#c33", "#f33"],
|
||||
["#036", "#336", "#636", "#936", "#c36", "#f36"],
|
||||
["#039", "#339", "#639", "#939", "#c39", "#f39"],
|
||||
["#03c", "#33c", "#63c", "#93c", "#c3c", "#f3c"],
|
||||
["#03f", "#33f", "#63f", "#93f", "#c3f", "#f3f"],
|
||||
["#060", "#360", "#660", "#960", "#c60", "#f60"],
|
||||
["#063", "#363", "#663", "#963", "#c63", "#f63"],
|
||||
["#066", "#366", "#666", "#966", "#c66", "#f66"],
|
||||
["#069", "#369", "#669", "#969", "#c69", "#f69"],
|
||||
["#06c", "#36c", "#66c", "#96c", "#c6c", "#f6c"],
|
||||
["#06f", "#36f", "#66f", "#96f", "#c6f", "#f6f"],
|
||||
["#090", "#390", "#690", "#990", "#c90", "#f90"],
|
||||
["#093", "#393", "#693", "#993", "#c93", "#f93"],
|
||||
["#096", "#396", "#696", "#996", "#c96", "#f96"],
|
||||
["#099", "#399", "#699", "#999", "#c99", "#f99"],
|
||||
["#09c", "#39c", "#69c", "#99c", "#c9c", "#f9c"],
|
||||
["#09f", "#39f", "#69f", "#99f", "#c9f", "#f9f"],
|
||||
["#0c0", "#3c0", "#6c0", "#9c0", "#cc0", "#fc0"],
|
||||
["#0c3", "#3c3", "#6c3", "#9c3", "#cc3", "#fc3"],
|
||||
["#0c6", "#3c6", "#6c6", "#9c6", "#cc6", "#fc6"],
|
||||
["#0c9", "#3c9", "#6c9", "#9c9", "#cc9", "#fc9"],
|
||||
["#0cc", "#3cc", "#6cc", "#9cc", "#ccc", "#fcc"],
|
||||
["#0cf", "#3cf", "#6cf", "#9cf", "#ccf", "#fcf"],
|
||||
["#0f0", "#3f0", "#6f0", "#9f0", "#cf0", "#ff0"],
|
||||
["#0f3", "#3f3", "#6f3", "#9f3", "#cf3", "#ff3"],
|
||||
["#0f6", "#3f6", "#6f6", "#9f6", "#cf6", "#ff6"],
|
||||
["#0f9", "#3f9", "#6f9", "#9f9", "#cf9", "#ff9"],
|
||||
["#0fc", "#3fc", "#6fc", "#9fc", "#cfc", "#ffc"],
|
||||
["#0ff", "#3ff", "#6ff", "#9ff", "#cff", "#fff"]
|
||||
];
|
||||
|
||||
|
||||
palettes.named = [
|
||||
["White", "Ivory", "Snow", "LightYellow", "MintCream", "Azure", "FloralWhite", "Honeydew", "GhostWhite", "Seashell", "Cornsilk", "AliceBlue", "LemonChiffon", "LightCyan"],
|
||||
["OldLace", "LightGoldenrodYellow", "LavenderBlush", "WhiteSmoke", "Beige", "Linen", "PapayaWhip", "BlanchedAlmond", "AntiqueWhite", "MistyRose", "Bisque", "Lavender", "Moccasin", "PaleGoldenrod"],
|
||||
["NavajoWhite", "Yellow", "PeachPuff", "Wheat", "Khaki", "Gainsboro", "PaleTurquoise", "Pink", "Aquamarine", "LightGray", "PowderBlue", "PaleGreen", "GreenYellow", "LightPink"],
|
||||
["LightBlue", "Gold", "Thistle", "LightGreen", "LightSteelBlue", "Silver", "LightSkyBlue", "BurlyWood", "SkyBlue", "Chartreuse", "Plum", "LawnGreen", "Tan", "LightSalmon"],
|
||||
["SandyBrown", "Cyan", "Aqua", "DarkKhaki", "Violet", "Turquoise", "Orange", "YellowGreen", "DarkSalmon", "MediumAquamarine", "DarkSeaGreen", "DarkGray", "MediumTurquoise", "Goldenrod"],
|
||||
["MediumSpringGreen", "SpringGreen", "Salmon", "LightCoral", "Coral", "DarkOrange", "HotPink", "RosyBrown", "Orchid", "Lime", "PaleVioletRed", "Peru", "DarkTurquoise", "CornflowerBlue"],
|
||||
["Tomato", "DeepSkyBlue", "LimeGreen", "CadetBlue", "MediumSeaGreen", "DarkGoldenrod", "MediumPurple", "LightSeaGreen", "LightSlateGray", "MediumOrchid", "Gray", "Chocolate", "IndianRed", "SlateGray"],
|
||||
["MediumSlateBlue", "DodgerBlue", "OliveDrab", "SteelBlue", "OrangeRed", "Olive", "SlateBlue", "RoyalBlue", "Magenta", "Fuchsia", "SeaGreen", "DimGray", "DeepPink", "Sienna"],
|
||||
["DarkOrchid", "DarkCyan", "ForestGreen", "DarkOliveGreen", "BlueViolet", "Teal", "MediumVioletRed", "Crimson", "SaddleBrown", "Brown", "FireBrick", "Red", "Green", "DarkSlateBlue"],
|
||||
["DarkSlateGray", "DarkViolet", "DarkGreen", "DarkMagenta", "Purple", "DarkRed", "Maroon", "Indigo", "MidnightBlue", "Blue", "MediumBlue", "DarkBlue", "Navy", "Black"]
|
||||
];
|
||||
|
||||
|
||||
|
||||
$(function() {
|
||||
for (var i in palettes) {
|
||||
$("<h3 />").text(i).appendTo("#palettes");
|
||||
$("<input />").appendTo("#palettes").spectrum({
|
||||
flat: true,
|
||||
showInput: true,
|
||||
className: i,
|
||||
preferredFormat: "rgb",
|
||||
showPalette: true,
|
||||
showPaletteOnly: true,
|
||||
palette: palettes[i]
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
$(function() {
|
||||
$("#langdemo").spectrum({
|
||||
flat: false,
|
||||
showInput: true,
|
||||
});
|
||||
});
|
||||
147
files/bgrins-spectrum-2c2010c/example/index.html
Normal file
147
files/bgrins-spectrum-2c2010c/example/index.html
Normal file
|
|
@ -0,0 +1,147 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
||||
<title>Spectrum - The No Hassle jQuery Colorpicker</title>
|
||||
|
||||
<meta name="description" content="Spectrum is a JavaScript colorpicker plugin using the jQuery framework. It is highly customizable, but can also be used as a simple input type=color polyfill">
|
||||
<meta name="author" content="Brian Grinstead and Spectrum contributors">
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../spectrum.css">
|
||||
<link rel="stylesheet" type="text/css" href="../docs/bootstrap.css">
|
||||
<link rel="stylesheet" type="text/css" href="../docs/docs.css">
|
||||
<script type="text/javascript" src="../docs/jquery-1.9.1.js"></script>
|
||||
<script type="text/javascript" src="../spectrum.js"></script>
|
||||
<script type="text/javascript" src="../i18n/jquery.spectrum-fi.js"></script>
|
||||
<script type='text/javascript' src='example.js'></script>
|
||||
|
||||
<style>
|
||||
|
||||
.example-container {
|
||||
margin-top: 10px;
|
||||
text-align: center;
|
||||
background: #333;
|
||||
background: -webkit-linear-gradient(top, #eee, #ddd);
|
||||
padding: 3px;
|
||||
padding-top: 0;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.example-controls {
|
||||
background: #999;
|
||||
margin: 0 -3px;
|
||||
padding: 10px 0;
|
||||
margin-bottom: 15px;
|
||||
|
||||
}
|
||||
label {
|
||||
display: inline-block;
|
||||
font-weight: bold;
|
||||
|
||||
}
|
||||
#palettes .sp-palette {
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
|
||||
.newGmail .sp-palette-row-0, .newGmail .sp-palette-row-1 {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.newGmail .sp-palette .sp-thumb-el {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin: 1px 1px;
|
||||
}
|
||||
|
||||
.newGmail .sp-palette .sp-thumb-el:hover, .newGmail .sp-palette .sp-thumb-el.sp-thumb-active {
|
||||
border-color: #000;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id='header'>
|
||||
<h1><a href='http://bgrins.github.com/spectrum'>Spectrum</a></h1> <h2><em>The No Hassle jQuery Colorpicker</em></h2>
|
||||
<div id='links'>
|
||||
View the <a href='http://github.com/bgrins/spectrum'>Source code</a>.
|
||||
Spectrum is a project by <a href='http://twitter.com/bgrins'>@bgrins</a>.
|
||||
</div>
|
||||
<br style='clear:both;' />
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
|
||||
<h2>Spectrum Colorpicker Crazy Configurator</h2>
|
||||
<div class='alert'>NOTE: this page is currently in development. Please refer to the <a href='http://github.com/bgrins/spectrum'>Home Page</a> for demos and documentation instead.
|
||||
</div>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
|
||||
<div class="example-container">
|
||||
<div class="example-controls">
|
||||
<div class='btn-group'>
|
||||
<button class='btn toggleBtn' data-rule='showPalette'>Show Palette</button>
|
||||
<button class='btn toggleBtn' data-rule='showInput'>Show Input</button>
|
||||
<button class='btn toggleBtn' data-rule='showInitial'>Show Initial</button>
|
||||
<button class='btn toggleBtn' data-rule='showAlpha'>Show Alpha</button>
|
||||
<button class='btn toggleBtn' data-rule='showPaletteOnly'>Show Palette Only</button>
|
||||
</div>
|
||||
<br />
|
||||
<br />
|
||||
<p>
|
||||
<label>Draggable Size <input type='range' value='172' id='size' max='500' min='50' /></label>
|
||||
|
||||
<label>Hue Size <input type='range' value='16' id='huesize' max='90' min='5' /></label>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<input id="full">
|
||||
|
||||
</div>
|
||||
|
||||
<hr />
|
||||
<h2>Spectrum Colorpicker Localization</h2>
|
||||
<div class='alert'>
|
||||
<p>
|
||||
This page has loaded the German localization. Here is a list of all <a href='https://github.com/bgrins/spectrum/tree/master/i18n'>spectrum localizations</a>. <strong>Please help expand our localizations</strong> 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: <a href'https://github.com/bgrins/spectrum'>https://github.com/bgrins/spectrum</a>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<input id="langdemo" />
|
||||
|
||||
<hr />
|
||||
<h2>Spectrum Colorpicker Sample Palettes</h2>
|
||||
<div class='alert'>
|
||||
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
The <code>newGmail</code> palette below is an example of customizing the palette size and layout with CSS.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
<div id="palettes" class="example-container">
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<script type="text/javascript" src="../docs/prettify.js"></script>
|
||||
<script type="text/javascript">
|
||||
|
||||
var _gaq = _gaq || [];
|
||||
_gaq.push(['_setAccount', 'UA-8259845-4']);
|
||||
_gaq.push(['_trackPageview']);
|
||||
|
||||
(function() {
|
||||
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
|
||||
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
|
||||
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
|
||||
})();
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
14
files/bgrins-spectrum-2c2010c/i18n/jquery.spectrum-de.js
Normal file
14
files/bgrins-spectrum-2c2010c/i18n/jquery.spectrum-de.js
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
// Spectrum Colorpicker
|
||||
// German (de) localization
|
||||
// https://github.com/bgrins/spectrum
|
||||
|
||||
(function ( $ ) {
|
||||
|
||||
var localization = $.spectrum.localization["de"] = {
|
||||
cancelText: "Abbrechen",
|
||||
chooseText: "Wählen"
|
||||
};
|
||||
|
||||
$.extend($.fn.spectrum.defaults, localization);
|
||||
|
||||
})( jQuery );
|
||||
14
files/bgrins-spectrum-2c2010c/i18n/jquery.spectrum-dk.js
Normal file
14
files/bgrins-spectrum-2c2010c/i18n/jquery.spectrum-dk.js
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
// Spectrum Colorpicker
|
||||
// Danish (dk) localization
|
||||
// https://github.com/bgrins/spectrum
|
||||
|
||||
(function ( $ ) {
|
||||
|
||||
var localization = $.spectrum.localization["dk"] = {
|
||||
cancelText: "annuller",
|
||||
chooseText: "Vælg"
|
||||
};
|
||||
|
||||
$.extend($.fn.spectrum.defaults, localization);
|
||||
|
||||
})( jQuery );
|
||||
14
files/bgrins-spectrum-2c2010c/i18n/jquery.spectrum-es.js
Normal file
14
files/bgrins-spectrum-2c2010c/i18n/jquery.spectrum-es.js
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
// Spectrum Colorpicker
|
||||
// Spanish (es) localization
|
||||
// https://github.com/bgrins/spectrum
|
||||
|
||||
(function ( $ ) {
|
||||
|
||||
var localization = $.spectrum.localization["es"] = {
|
||||
cancelText: "Cancelar",
|
||||
chooseText: "Elegir"
|
||||
};
|
||||
|
||||
$.extend($.fn.spectrum.defaults, localization);
|
||||
|
||||
})( jQuery );
|
||||
14
files/bgrins-spectrum-2c2010c/i18n/jquery.spectrum-fi.js
Normal file
14
files/bgrins-spectrum-2c2010c/i18n/jquery.spectrum-fi.js
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
// Spectrum Colorpicker
|
||||
// Finnish (fi) localization
|
||||
// https://github.com/bgrins/spectrum
|
||||
|
||||
(function ( $ ) {
|
||||
|
||||
var localization = $.spectrum.localization["fi"] = {
|
||||
cancelText: "Kumoa",
|
||||
chooseText: "Valitse"
|
||||
};
|
||||
|
||||
$.extend($.fn.spectrum.defaults, localization);
|
||||
|
||||
})( jQuery );
|
||||
14
files/bgrins-spectrum-2c2010c/i18n/jquery.spectrum-fr.js
Normal file
14
files/bgrins-spectrum-2c2010c/i18n/jquery.spectrum-fr.js
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
// Spectrum Colorpicker
|
||||
// French (fr) localization
|
||||
// https://github.com/bgrins/spectrum
|
||||
|
||||
(function ( $ ) {
|
||||
|
||||
var localization = $.spectrum.localization["fr"] = {
|
||||
cancelText: "Annuler",
|
||||
chooseText: "Valider"
|
||||
};
|
||||
|
||||
$.extend($.fn.spectrum.defaults, localization);
|
||||
|
||||
})( jQuery );
|
||||
14
files/bgrins-spectrum-2c2010c/i18n/jquery.spectrum-it.js
Normal file
14
files/bgrins-spectrum-2c2010c/i18n/jquery.spectrum-it.js
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
// Spectrum Colorpicker
|
||||
// Italian (it) localization
|
||||
// https://github.com/bgrins/spectrum
|
||||
|
||||
(function ( $ ) {
|
||||
|
||||
var localization = $.spectrum.localization["it"] = {
|
||||
cancelText: "annulla",
|
||||
chooseText: "scegli"
|
||||
};
|
||||
|
||||
$.extend($.fn.spectrum.defaults, localization);
|
||||
|
||||
})( jQuery );
|
||||
14
files/bgrins-spectrum-2c2010c/i18n/jquery.spectrum-ja.js
Normal file
14
files/bgrins-spectrum-2c2010c/i18n/jquery.spectrum-ja.js
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
// Spectrum Colorpicker
|
||||
// Japanese (ja) localization
|
||||
// https://github.com/bgrins/spectrum
|
||||
|
||||
(function ( $ ) {
|
||||
|
||||
var localization = $.spectrum.localization["ja"] = {
|
||||
cancelText: "中止",
|
||||
chooseText: "選択"
|
||||
};
|
||||
|
||||
$.extend($.fn.spectrum.defaults, localization);
|
||||
|
||||
})( jQuery );
|
||||
14
files/bgrins-spectrum-2c2010c/i18n/jquery.spectrum-ru.js
Normal file
14
files/bgrins-spectrum-2c2010c/i18n/jquery.spectrum-ru.js
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
// Spectrum Colorpicker
|
||||
// Russian (ru) localization
|
||||
// https://github.com/bgrins/spectrum
|
||||
|
||||
(function ( $ ) {
|
||||
|
||||
var localization = $.spectrum.localization["ru"] = {
|
||||
cancelText: "отмена",
|
||||
chooseText: "выбрать"
|
||||
};
|
||||
|
||||
$.extend($.fn.spectrum.defaults, localization);
|
||||
|
||||
})( jQuery );
|
||||
14
files/bgrins-spectrum-2c2010c/i18n/jquery.spectrum-sv.js
Normal file
14
files/bgrins-spectrum-2c2010c/i18n/jquery.spectrum-sv.js
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
// Spectrum Colorpicker
|
||||
// Swedish (sv) localization
|
||||
// https://github.com/bgrins/spectrum
|
||||
|
||||
(function ( $ ) {
|
||||
|
||||
var localization = $.spectrum.localization["sv"] = {
|
||||
cancelText: "Avbryt",
|
||||
chooseText: "Välj"
|
||||
};
|
||||
|
||||
$.extend($.fn.spectrum.defaults, localization);
|
||||
|
||||
})( jQuery );
|
||||
889
files/bgrins-spectrum-2c2010c/index.html
Normal file
889
files/bgrins-spectrum-2c2010c/index.html
Normal file
|
|
@ -0,0 +1,889 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
||||
<title>Spectrum - The No Hassle jQuery Colorpicker</title>
|
||||
|
||||
<meta name="description" content="Spectrum is a JavaScript colorpicker plugin using the jQuery framework. It is highly customizable, but can also be used as a simple input type=color polyfill">
|
||||
<meta name="author" content="Brian Grinstead and Spectrum contributors">
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="spectrum.css">
|
||||
<link rel="stylesheet" type="text/css" href="docs/bootstrap.css">
|
||||
<link rel="stylesheet" type="text/css" href="docs/docs.css">
|
||||
<script type="text/javascript" src="docs/jquery-1.9.1.js"></script>
|
||||
<script type="text/javascript" src="spectrum.js"></script>
|
||||
<script type='text/javascript' src='docs/toc.js'></script>
|
||||
<script type='text/javascript' src='docs/docs.js'></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id='header'>
|
||||
<h1><a href='http://bgrins.github.com/spectrum'>Spectrum</a></h1> <h2><em>The No Hassle jQuery Colorpicker</em></h2>
|
||||
<div id='links'>
|
||||
<a href='http://github.com/bgrins/spectrum/zipball/1.1.1' class="btn btn-primary">Download Zip</a>
|
||||
View the <a href='http://github.com/bgrins/spectrum'>Source code</a>.
|
||||
Spectrum is a project by <a href='http://twitter.com/bgrins'>@bgrins</a>.
|
||||
</div>
|
||||
<br style='clear:both;' />
|
||||
</div>
|
||||
|
||||
<div id='toc'></div>
|
||||
<div id='toc-slider'></div>
|
||||
|
||||
<div id='docs'>
|
||||
<div id='docs-content'>
|
||||
|
||||
<div id='switch-current'>
|
||||
<input type='text' name='color1' id='pick1' value='#ddddff' />
|
||||
<div id='switch-current-hsv' class='switch-current-output'></div>
|
||||
<div id='switch-current-rgb' class='switch-current-output'></div>
|
||||
<div id='switch-current-hex' class='switch-current-output'></div>
|
||||
</div>
|
||||
|
||||
<div style='text-align:center;'>
|
||||
<input id="full" />
|
||||
</div>
|
||||
|
||||
<pre class='prettyprint hide' id='code-heading'>
|
||||
<input type='color' value='#f594d0' />
|
||||
<input type='color' class='basic' value='#f594d0' />
|
||||
</pre>
|
||||
|
||||
<h2>Why A Colorpicker?</h2>
|
||||
<p><em>I wasn't satisfied with the solutions available for colorpicking</em>.
|
||||
Many of them included a ton of images, were hard to skin or customize, or were very large plugins.
|
||||
Here are the goals I had when making a new one:
|
||||
</p>
|
||||
|
||||
<h3 class='point'>Small Footprint</h3>
|
||||
<div class='note'>see a working <a href='http://jsfiddle.net/bgrins/ctkY3/'>jsFiddle example</a></div>
|
||||
<p>Just include the needed CSS and JavaScript files, and you are ready to go! </p>
|
||||
<pre class='prettyprint' id='code-subheading'>
|
||||
<script src='<a href='http://bgrins.github.com/spectrum/spectrum.js' target="_blank">spectrum.js</a>'></script>
|
||||
<link rel='stylesheet' href='<a href='http://bgrins.github.com/spectrum/spectrum.css' target="_blank">spectrum.css</a>' />
|
||||
</pre>
|
||||
<p><strong>We don't need no stinkin' images!</strong></p>
|
||||
<p>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.</p>
|
||||
|
||||
<h3 class='point'>Polyfill</h3>
|
||||
<p>I wanted an option for the most basic use case, a polyfill for the <a href='http://dev.w3.org/html5/markup/input.color.html'>input[type=color]</a> HTML5 control.
|
||||
This mode needs to work without JavaScript enabled - and fallback to an input[type=text] like other HTML5 inputs.
|
||||
</p>
|
||||
|
||||
|
||||
<h3 class='point'>Customizable</h3>
|
||||
<p>Just because you don't <em>have</em> to change anything to get it to work, doesn't mean you <em>can't</em>!
|
||||
It is easy to skin and customize the plugin with CSS, and there are a wide range of modes and options to explore.
|
||||
</p>
|
||||
|
||||
<h3 class='point'>Mobile Support</h3>
|
||||
<p>Along with desktop browser support, I wanted a mobile colorpicker that was touch friendly, worked in iOS and Android, and used standards
|
||||
that maximize future mobile support.
|
||||
</p>
|
||||
|
||||
<h3 class='point'>Devtools</h3>
|
||||
|
||||
<p>
|
||||
Believe it or not, <strong>this colorpicker lives inside of Chrome devtools</strong> to make picking colors easier for web developers and designers.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
When I started the project, I wrote about <a href="http://www.briangrinstead.com/blog/chrome-developer-tools-colorpicker-concept">developer tools concept colorpicker implementation</a>. After that, I was <a href="http://groups.google.com/group/google-chrome-developer-tools/browse_thread/thread/4dd1e853b8051727/4549a6f0788885d4">contacted on the devtools mailing list</a> 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.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
From there, I opened a development case, entitled <a href="https://bugs.webkit.org/show_bug.cgi?id=71262">Web Inspector: Add colorpicker functionality to color swatches in Styles Sidebar</a>. 50+ comments and 10 patches later, the case <a href="http://www.webkit.org/blog/1804/last-week-in-webkit-calculated-css-values-and-the-translate-attribute/">landed in WebKit</a>. Thanks to all the WebKit developers who helped me along the way with getting the code and UI ready for committing.
|
||||
</p>
|
||||
|
||||
|
||||
<h2>Modes</h2>
|
||||
<h3 class='point'>input[type=color]</h3>
|
||||
|
||||
<p>
|
||||
If you just want to provide a polyfill for the native color input,
|
||||
the easiest way is to create an input with the type of color.
|
||||
Once a user's browser supports a native color control, it will opt to use their native control instead.
|
||||
</p>
|
||||
<p><strong>Unlike the other modes, your value must be a 6 character hex value starting with a '#'.</strong> Why? Because the spec <a href='http://dev.w3.org/html5/markup/input.color.html#input.color.attrs.value'>says so</a>, that's why.
|
||||
</p>
|
||||
|
||||
<pre class='prettyprint' id='code-subheading'>
|
||||
<input type='color' name='color' />
|
||||
<input type='color' name='color2' value='#3355cc' />
|
||||
</pre>
|
||||
<div class='example'>
|
||||
<form method="get">
|
||||
<input type='color' name='color' />
|
||||
<input type='color' name='color2' value='#3355cc' />
|
||||
<input type='color' name='color3' value='#000000' />
|
||||
<input type="submit" />
|
||||
</form>
|
||||
</div>
|
||||
<p><strong>That's it!</strong>
|
||||
The field will degrade to a text input if the user does not have JavaScript enabled,
|
||||
so that they will still be able to manually enter a color. You don't need to add a single line of code.
|
||||
</p>
|
||||
|
||||
<h3 class='point'>Custom</h3>
|
||||
<p>If you want to get more into the functionality, just create a normal input and initialize it as a normal jQuery plugin.
|
||||
<strong>You can set a lot of options</strong> when initializing the colorpicker.
|
||||
See the 'Options' section below.
|
||||
</p>
|
||||
|
||||
<pre class='prettyprint'>
|
||||
<input type='text' id="custom" />
|
||||
</pre>
|
||||
|
||||
<pre class='prettyprint'>
|
||||
<script>
|
||||
$("#custom").spectrum({
|
||||
color: "#f00"
|
||||
});
|
||||
</script>
|
||||
</pre>
|
||||
|
||||
<div class='example'>
|
||||
<input type='text' id='custom' />
|
||||
</div>
|
||||
|
||||
<h3 class='point'>Flat</h3>
|
||||
<p><strong>Flat</strong>
|
||||
This means that it will always show up at full size,
|
||||
and be positioned as an inline-block element.
|
||||
Look to the left for a full sized flat picker.
|
||||
</p>
|
||||
|
||||
<pre class='prettyprint'>
|
||||
<input type='text' id="flat" />
|
||||
</pre>
|
||||
<pre class='prettyprint'>
|
||||
$("#flat").spectrum({
|
||||
flat: true,
|
||||
showInput: true
|
||||
});
|
||||
</pre>
|
||||
|
||||
<div class='example'>
|
||||
<input type='text' id='flat' value="limegreen" />
|
||||
</div>
|
||||
|
||||
|
||||
<h2>Options</h2>
|
||||
<pre class='prettyprint'>
|
||||
$("#picker").spectrum({
|
||||
color: <strong>tinycolor</strong>,
|
||||
flat: bool,
|
||||
showInput: bool,
|
||||
showInitial: bool,
|
||||
showAlpha: bool,
|
||||
disabled: bool,
|
||||
localStorageKey: string,
|
||||
showPalette: bool,
|
||||
showPaletteOnly: bool,
|
||||
showSelectionPalette: bool,
|
||||
clickoutFiresChange: bool,
|
||||
cancelText: string,
|
||||
chooseText: string,
|
||||
className: string,
|
||||
preferredFormat: string,
|
||||
maxSelectionSize: int,
|
||||
palette: [[string]],
|
||||
selectionPalette: [string]
|
||||
});
|
||||
</pre>
|
||||
|
||||
|
||||
<h3>Color</h3>
|
||||
<div class='option-content'>
|
||||
<div class='description'>
|
||||
<p>
|
||||
The initial color will be set with the <code>color</code> option.
|
||||
If you don't pass in a color, Spectrum will use the <code>value</code> attribute on the input.
|
||||
</p>
|
||||
<p>
|
||||
The color parsing is based on the <a href='https://github.com/bgrins/TinyColor'>TinyColor</a> plugin.
|
||||
This should parse any color string you throw at it.</p>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<pre class='prettyprint'>
|
||||
<input type='text' class='basic' value='red' />
|
||||
<input type='text' class='basic' value='#0f0' />
|
||||
<input type='text' class='basic' value='blue' />
|
||||
<br />
|
||||
<input type='text' class='override' />
|
||||
</pre>
|
||||
|
||||
<pre class='prettyprint'>
|
||||
<script>
|
||||
$(".basic").spectrum();
|
||||
$(".override").spectrum({
|
||||
color: "yellow"
|
||||
});
|
||||
</script>
|
||||
</pre>
|
||||
<div class='example'>
|
||||
<input type='text' class='basic' value='red' />
|
||||
<input type='text' class='basic' value='green' />
|
||||
<input type='text' class='basic' value='blue' />
|
||||
<br />
|
||||
<input type='text' class='override' />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Show Input</h3>
|
||||
<div class='option-content'>
|
||||
<div class='description'>
|
||||
<p>You can add an input to allow free form typing. The color parsing is very permissive in the allowed strings. See <a href='https://github.com/bgrins/TinyColor'>TinyColor</a> for more details.
|
||||
</div>
|
||||
<pre class='prettyprint'>
|
||||
$("#showInput").spectrum({
|
||||
showInput: true
|
||||
});
|
||||
</pre>
|
||||
<div class='example'>
|
||||
<input type='text' name='showInput' id='showInput' />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Show Alpha</h3>
|
||||
<div class='option-content'>
|
||||
<div class='description'>
|
||||
<p>You can allow alpha transparency selection. Check out these examples: </p>
|
||||
</div>
|
||||
<pre class='prettyprint'>
|
||||
$("#showAlpha").spectrum({
|
||||
showAlpha: true
|
||||
});
|
||||
</pre>
|
||||
<div class='example'>
|
||||
<input type='text' name='showAlpha' id='showAlpha' />
|
||||
</div>
|
||||
<div class='example'>
|
||||
<input type='text' name='showAlphaWithInput' id='showAlphaWithInput' />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Disabled</h3>
|
||||
<div class='option-content'>
|
||||
<div class='description'>
|
||||
<p>Spectrum can be automatically disabled if you pass in the <code>disabled</code> flag. Additionally, if the input that you initialize spectrum on is disabled, this will be the default value. Note: you <strong>cannot</strong> enable spectrum if the input is disabled (see below).</p>
|
||||
</div>
|
||||
<pre class='prettyprint'>
|
||||
$("#disabled").spectrum({
|
||||
disabled: true
|
||||
});
|
||||
$("input:disabled").spectrum({
|
||||
|
||||
});
|
||||
</pre>
|
||||
<div class='example'>
|
||||
<input type='text' name='disabled' id='disabled' value='lightblue' />
|
||||
<input type='text' disabled value='lightblue' />
|
||||
<button id='toggle-disabled' class='btn'>Toggle Disabled</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Show Palette</h3>
|
||||
<div class='option-content'>
|
||||
<div class='description'>
|
||||
<p>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: </p>
|
||||
</div>
|
||||
<pre class='prettyprint'>
|
||||
$("#showPalette").spectrum({
|
||||
showPalette: true,
|
||||
palette: [
|
||||
['black', 'white', 'blanchedalmond'],
|
||||
['rgb(255, 128, 0);', 'hsv 100 70 50', 'lightyellow']
|
||||
]
|
||||
});
|
||||
</pre>
|
||||
<div class='example'>
|
||||
<input type='text' name='showPalette' id='showPalette' value='lightblue' />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Show Palette Only</h3>
|
||||
<div class='option-content'>
|
||||
<div class='note'>see a working <a href='http://jsfiddle.net/bgrins/S45tW/'>jsFiddle example</a></div>
|
||||
<div class='description'>
|
||||
<p>If you'd like, spectrum can show the palettes you specify, and nothing else.</p>
|
||||
</div>
|
||||
|
||||
<pre class='prettyprint'>
|
||||
$("#showPaletteOnly").spectrum({
|
||||
showPaletteOnly: true,
|
||||
showPalette:true,
|
||||
color: 'blanchedalmond',
|
||||
palette: [
|
||||
['black', 'white', 'blanchedalmond',
|
||||
'rgb(255, 128, 0);', 'hsv 100 70 50'],
|
||||
['red', 'yellow', 'green', 'blue', 'violet']
|
||||
]
|
||||
});
|
||||
</pre>
|
||||
<div class='example'>
|
||||
<span class='label label-result'>
|
||||
Result
|
||||
</span>
|
||||
<input type='text' name='showPaletteOnly' id='showPaletteOnly' />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Show Selection Palette</h3>
|
||||
<div class='option-content'>
|
||||
<div class='description'>
|
||||
<p>Spectrum can keep track of what has been selected by the user with the <code>showSelectionPalette</code> option.</p>
|
||||
<p>If the <code>localStorageKey</code> option is defined, the selection will be saved in the browser's localStorage object</p>
|
||||
</div>
|
||||
|
||||
<pre class='prettyprint'>
|
||||
$("#showSelectionPalette").spectrum({
|
||||
showPalette: true,
|
||||
showSelectionPalette: true, // true by default
|
||||
palette: [ ]
|
||||
});
|
||||
$("#showSelectionPaletteStorage").spectrum({
|
||||
showPalette: true,
|
||||
showSelectionPalette: true,
|
||||
palette: [ ],
|
||||
localStorageKey: "spectrum.homepage", // Any Spectrum with the same string will share selection
|
||||
});
|
||||
</pre>
|
||||
|
||||
<div class='example'>
|
||||
<span class='label label-info'>This colorpicker will store what you pick:</span><br /><br />
|
||||
<input type='text' name='showSelectionPalette' id='showSelectionPalette' value='lightblue' /><br /><br />
|
||||
<span class='label label-info'>Try reloading your page, it will still be here on this one:</span><br /><br />
|
||||
<input type='text' name='showSelectionPaletteStorage' id='showSelectionPaletteStorage' value='lightblue' />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Clickout Fires Change</h3>
|
||||
<div class='option-content'>
|
||||
<div class='description'>
|
||||
<p>
|
||||
When clicking outside of the colorpicker, you can force it to fire a <code>change</code> event rather than having it revert the change.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<pre class='prettyprint'>
|
||||
$("#clickoutFiresChange").spectrum({
|
||||
clickoutFiresChange: true
|
||||
});
|
||||
$("#clickoutDoesntChange").spectrum({
|
||||
|
||||
});
|
||||
</pre>
|
||||
|
||||
<div class='example'>
|
||||
<input type='text' name='clickoutFiresChange' id='clickoutFiresChange' value='goldenrod' />
|
||||
<input type='text' name='clickoutDoesntFireChange' id='clickoutDoesntFireChange' value='goldenrod' />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Show Initial</h3>
|
||||
<div class='option-content'>
|
||||
<div class='description'>
|
||||
<p>
|
||||
Spectrum can show the color that was initially set when opening.
|
||||
This provides an easy way to click back to what was set when opened.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<pre class='prettyprint'>
|
||||
$("#showInitial").spectrum({
|
||||
showInitial: true
|
||||
});
|
||||
</pre>
|
||||
|
||||
<div class='example'>
|
||||
<input type='text' name='showInitial' id='showInitial' value='goldenrod' />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Show Input and Initial</h3>
|
||||
<div class='option-content'>
|
||||
<div class='description'>
|
||||
<p>If you specify both the <code>showInput</code> and <code>showInitial</code> options, the CSS keeps things in order by wrapping the buttons to the bottom row, and shrinking the input. <em>Note: this is all customizable via CSS.</em></p>
|
||||
</div>
|
||||
<pre class='prettyprint'>
|
||||
$("#showInputAndInitial").spectrum({
|
||||
showInitial: true,
|
||||
showInput: true
|
||||
});
|
||||
</pre>
|
||||
|
||||
<div class='example'>
|
||||
<input type='text' name='showInputAndInitial' id='showInputAndInitial' value='goldenrod' />
|
||||
</div>
|
||||
</div>
|
||||
<h3>Button Text</h3>
|
||||
<div class='option-content'>
|
||||
<div class='description'>
|
||||
<p>You can set the button's text using <code>cancelText</code> and <code>chooseText</code> properties.</p>
|
||||
</div>
|
||||
|
||||
<pre class='prettyprint'>
|
||||
$("#buttonText").spectrum({
|
||||
chooseText: "Alright",
|
||||
cancelText: "No way"
|
||||
});
|
||||
</pre>
|
||||
|
||||
<div class='example'>
|
||||
<input type='text' name='buttonText' id='buttonText' value='orangered' />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Show Buttons</h3>
|
||||
<div class='option-content'>
|
||||
<div class='description'>
|
||||
<p>
|
||||
You can show or hide the buttons using the <code>showButtons</code> property.
|
||||
If there are no buttons, the behavior will be to fire the `change` event (and update the original input) when the picker is closed.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<pre class='prettyprint'>
|
||||
$("#hideButtons").spectrum({
|
||||
showButtons: false
|
||||
});
|
||||
</pre>
|
||||
|
||||
<div class='example'>
|
||||
<input type='text' name='hideButtons' id='hideButtons' value='orangered' />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>className</h3>
|
||||
<div class='option-content'>
|
||||
<div class='description'>
|
||||
<p>
|
||||
You can add an additional class name to the replacer and container element using the <code>className</code> property.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<pre class='prettyprint'>
|
||||
$("#className").spectrum({
|
||||
className: 'awesome'
|
||||
});
|
||||
</pre>
|
||||
<pre class='prettyprint'>
|
||||
.awesome {
|
||||
background: purple;
|
||||
}
|
||||
</pre>
|
||||
<style type='text/css'>
|
||||
.awesome {
|
||||
background: purple;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class='example'>
|
||||
<input type='text' name='className' id='className' value='orangered' />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Preferred Format</h3>
|
||||
<div class='option-content'>
|
||||
<div class='description'>
|
||||
<p>You can set the format that is displayed</p>
|
||||
</div>
|
||||
|
||||
<pre class='prettyprint'>
|
||||
$("#preferredHex").spectrum({
|
||||
preferredFormat: "hex",
|
||||
showInput: true
|
||||
});
|
||||
$("#preferredHex6").spectrum({
|
||||
preferredFormat: "hex6",
|
||||
showInput: true
|
||||
});
|
||||
$("#preferredHsl").spectrum({
|
||||
preferredFormat: "hsl",
|
||||
showInput: true
|
||||
});
|
||||
$("#preferredRgb").spectrum({
|
||||
preferredFormat: "rgb",
|
||||
showInput: true
|
||||
});
|
||||
$("#preferredName").spectrum({
|
||||
preferredFormat: "name",
|
||||
showInput: true
|
||||
});
|
||||
$("#preferredNone").spectrum({
|
||||
showInput: true
|
||||
});
|
||||
</pre>
|
||||
<div class='example'>
|
||||
<div class='alert alert-info'>Hex</div>
|
||||
<input type='text' name='preferredHex' id='preferredHex' value='orangered' />
|
||||
<div class='alert alert-info'>Hex (6 Characters Always)</div>
|
||||
<input type='text' name='preferredHex6' id='preferredHex6' value='orangered' />
|
||||
<div class='alert alert-info'>Hsl</div>
|
||||
<input type='text' name='preferredHsl' id='preferredHsl' value='orangered' />
|
||||
<div class='alert alert-info'>Rgb</div>
|
||||
<input type='text' name='preferredRgb' id='preferredRgb' value='orangered' />
|
||||
<div class='alert alert-info'>Name (Falls back to hex)</div>
|
||||
<input type='text' name='preferredName' id='preferredName' value='orangered' />
|
||||
<div class='alert alert-info'>None (Depends on input - try changing formats with the text box)</div>
|
||||
<input type='text' name='preferredNone' id='preferredNone' value='orangered' />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2>Events</h2>
|
||||
|
||||
<pre class='prettyprint'>
|
||||
$("#picker").spectrum({
|
||||
move: function(tinycolor) { },
|
||||
show: function(tinycolor) { },
|
||||
hide: function(tinycolor) { },
|
||||
beforeShow: function(tinycolor) { },
|
||||
});
|
||||
</pre>
|
||||
|
||||
<h3>change</h3>
|
||||
<div class='option-content'>
|
||||
<div class='description'>
|
||||
<p>Called as the original input changes. Only happens when the input is closed or the 'Choose' button is clicked.</p>
|
||||
</div>
|
||||
|
||||
<pre class='prettyprint'>
|
||||
change: function(color) {
|
||||
color.toHexString(); // #ff0000
|
||||
}
|
||||
</pre>
|
||||
|
||||
<div class='example'>
|
||||
<input type='text' value='blanchedalmond' name='changeOnMoveNo' id='changeOnMoveNo' />
|
||||
<em id='changeOnMoveNoLabel' class='em-label'></em>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>move</h3>
|
||||
|
||||
<div class='option-content'>
|
||||
<div class='description'>
|
||||
<p>Called as the user moves around within the colorpicker</p>
|
||||
</div>
|
||||
|
||||
<pre class='prettyprint'>
|
||||
move: function(color) {
|
||||
color.toHexString(); // #ff0000
|
||||
}
|
||||
</pre>
|
||||
|
||||
<div class='example'>
|
||||
<input type='text' value='blanchedalmond' name='changeOnMove' id='changeOnMove' />
|
||||
<em id='changeOnMoveLabel' class='em-label'></em>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>hide</h3>
|
||||
|
||||
<div class='option-content'>
|
||||
<div class='description'>
|
||||
|
||||
<p>
|
||||
Called after the colorpicker is hidden.
|
||||
This happens when clicking outside of the picker while it is open.
|
||||
Note, when any colorpicker on the page is shown it will hide any that are already open.
|
||||
This event is ignored on a flat colorpicker.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<pre class='prettyprint'>
|
||||
hide: function(color) {
|
||||
color.toHexString(); // #ff0000
|
||||
}
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
<h3>show</h3>
|
||||
|
||||
<div class='option-content'>
|
||||
<div class='description'>
|
||||
<p>
|
||||
Called after the colorpicker is opened.
|
||||
This is ignored on a flat colorpicker.
|
||||
Note, when any colorpicker on the page is shown it will hide any that are already open.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<pre class='prettyprint'>
|
||||
show: function(color) {
|
||||
color.toHexString(); // #ff0000
|
||||
}
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
<h3>beforeShow</h3>
|
||||
|
||||
<div class='option-content'>
|
||||
<div class='description'>
|
||||
<p>
|
||||
You can prevent the colorpicker from showing up if you return false in the beforeShow event.
|
||||
This event is ignored on a flat colorpicker.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<pre class='prettyprint'>
|
||||
beforeShow: function(color) {
|
||||
return false; // Will never show up
|
||||
}
|
||||
</pre>
|
||||
|
||||
<div class='example'>
|
||||
<input type='text' value='blanchedalmond' name='beforeShow' id='beforeShow' />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2>Methods</h2>
|
||||
<pre class='prettyprint'>
|
||||
$("#picker").spectrum("show");
|
||||
$("#picker").spectrum("hide");
|
||||
$("#picker").spectrum("toggle");
|
||||
$("#picker").spectrum("get");
|
||||
$("#picker").spectrum("set", colorString);
|
||||
$("#picker").spectrum("container");
|
||||
$("#picker").spectrum("reflow");
|
||||
$("#picker").spectrum("destroy");
|
||||
$("#picker").spectrum("enable");
|
||||
$("#picker").spectrum("disable");
|
||||
</pre>
|
||||
|
||||
|
||||
<h3>show</h3>
|
||||
|
||||
<div class='option-content'>
|
||||
<div class='description'>
|
||||
<p>
|
||||
Shows the colorpicker.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>hide</h3>
|
||||
|
||||
<div class='option-content'>
|
||||
<div class='description'>
|
||||
<p>
|
||||
Hides the colorpicker.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>toggle</h3>
|
||||
|
||||
<div class='option-content'>
|
||||
<div class='description'>
|
||||
<p>
|
||||
Toggles the colorpicker.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>get</h3>
|
||||
|
||||
<div class='option-content'>
|
||||
<div class='description'>
|
||||
<p>
|
||||
Gets the current value from the colorpicker.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>set</h3>
|
||||
|
||||
<div class='option-content'>
|
||||
<div class='description'>
|
||||
<p>
|
||||
Setting the colorpicker programmatically will update the original input.
|
||||
</p>
|
||||
<p>
|
||||
Note: this will <strong>not</strong> fire the <code>change</code> event,
|
||||
to prevent infinite loops from calling <code>set</code> from within <code>change</code>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<pre class='prettyprint'>
|
||||
<input type='text' value='blanchedalmond' name='triggerSet' id='triggerSet' />
|
||||
<input type='text' placeholder='Enter A Color' id='enterAColor' />
|
||||
<button id='btnEnterAColor'>Trigger Set</button>
|
||||
|
||||
<script>
|
||||
$("#triggerSet").spectrum();
|
||||
|
||||
// Show the original input to demonstrate the value changing when calling `set`
|
||||
$("#triggerSet").show();
|
||||
|
||||
$("#btnEnterAColor").click(function() {
|
||||
$("#triggerSet").spectrum("set", $("#enterAColor").val());
|
||||
});
|
||||
</script>
|
||||
</pre>
|
||||
|
||||
<div class='example'>
|
||||
<input type='text' value='blanchedalmond' name='triggerSet' id='triggerSet' /><br /><br />
|
||||
<input type='text' placeholder='Enter A Color' id='enterAColor' /><button id='btnEnterAColor'>Trigger Set</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>container</h3>
|
||||
|
||||
<div class='option-content'>
|
||||
<div class='description'>
|
||||
<p>
|
||||
Retrieves the container element of the colorpicker, in case you want to manaully position it or do other things.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>reflow</h3>
|
||||
|
||||
<div class='option-content'>
|
||||
<div class='description'>
|
||||
<p>
|
||||
Resets the positioning of the container element. This could be used if the colorpicker is inside of a moving area.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>destroy</h3>
|
||||
|
||||
<div class='option-content'>
|
||||
<div class='description'>
|
||||
<p>
|
||||
Removes the colorpicker functionality and restores the element to its original state.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>enable</h3>
|
||||
|
||||
<div class='option-content'>
|
||||
<div class='description'>
|
||||
<p>
|
||||
Allows selection of the colorpicker component. If it is already enabled, this method does nothing.
|
||||
</p>
|
||||
<p>
|
||||
Additionally, this will cause the original (now hidden) input to be set as disabled.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>disable</h3>
|
||||
|
||||
<div class='option-content'>
|
||||
<div class='description'>
|
||||
<p>
|
||||
Disables selection of the colorpicker component. Adds the <code>sp-disabled</code> class onto the replacer element. If it is already disabled, this method does nothing.
|
||||
</p>
|
||||
<p>
|
||||
Additionally, this will remove the <code>disabled</code> property on the original (now hidden).
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<h2>Skinning</h2>
|
||||
|
||||
<p>Since it is all built with HTML/CSS, you can skin it easily. There are two parts to the <a href='https://github.com/bgrins/spectrum/blob/master/spectrum.css'>spectrum.css</a> 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.</p>
|
||||
|
||||
<h3 class='point'>Non-input elements</h3>
|
||||
<p>
|
||||
You can use any element you would like to trigger the colorpicker: <a href='#' id='openWithLink'>Click me to open a colorpicker</a>, though it is strongly recommended to stick with <code><input></code> tags.
|
||||
</p>
|
||||
|
||||
<h2>Nitty Gritty</h2>
|
||||
|
||||
<h3 class='point'>Browser Support</h3>
|
||||
<p>I wanted this to work in the latest and greatest browsers, but also target backwords compatibility and <strong>mobile support</strong>.
|
||||
Here are the currently supported browers:
|
||||
<ul>
|
||||
<li>IE <small>6+</small></li>
|
||||
<li>Chrome <small>4+</small></li>
|
||||
<li>Firefox <small>3.6+</small></li>
|
||||
<li>Safari <small>4+</small></li>
|
||||
<li>Opera <small>11.1+</small></li>
|
||||
<li>iOS</li>
|
||||
</ul>
|
||||
|
||||
<h3 class='point'>IE Implementation</h3>
|
||||
<p>
|
||||
IE Support is provided using
|
||||
<a href='http://msdn.microsoft.com/en-us/library/ms532997(v=vs.85).aspx'>proprietary filters</a>.
|
||||
Other browsers use CSS gradients.
|
||||
</p>
|
||||
|
||||
|
||||
<h3 class='point'>Accepted Color Inputs</h3>
|
||||
<p>Spectrum will use the color passed in to initialize. If there is no color passed in,
|
||||
it will try to parse a color based on the <code>value</code> of the input. The color parsing is based on the <a href='https://github.com/bgrins/TinyColor'>TinyColor</a> plugin, and accepts many forms of input:</p>
|
||||
<pre class='prettyprint'>
|
||||
red
|
||||
#fff
|
||||
fff
|
||||
#ffffff
|
||||
ffffff
|
||||
rgb(255, 0, 0)
|
||||
rgb 255 0 0
|
||||
hsl(0, 100, 50)
|
||||
hsl(0, 100%, 50%)
|
||||
hsl 0 100 50
|
||||
hsl 0 100% 50%
|
||||
hsv(0, 100%, 100%)
|
||||
hsv(0, 100, 100)
|
||||
hsv 0 100% 100%
|
||||
hsv 0 100 100
|
||||
</pre>
|
||||
<p>It also provides the following forms of output:</p>
|
||||
<pre class='prettyprint'>
|
||||
var t = $("#element").spectrum("get");
|
||||
t.toHex() // "ff0000"
|
||||
t.toHexString() // "#ff0000"
|
||||
t.toRgb() // {"r":255,"g":0,"b":0}
|
||||
t.toRgbString() // "rgb(255, 0, 0)"
|
||||
t.toHsv() // {"h":0,"s":1,"v":1}
|
||||
t.toHsvString() // "hsv(0, 100%, 100%)"
|
||||
t.toHsl() // {"h":0,"s":1,"l":0.5}
|
||||
t.toHslString() // "hsl(0, 100%, 50%)"
|
||||
t.toName() // "red"
|
||||
</pre>
|
||||
|
||||
|
||||
<div class='footer'>
|
||||
<h2>Share</h2>
|
||||
<p>
|
||||
If you've made it this far, please share one of these links to help others find this project!
|
||||
<br />
|
||||
<a href='http://bgrins.github.com/spectrum'>JavaScript Colorpicker</a> |
|
||||
<a href='http://bgrins.github.com/spectrum'>jQuery Colorpicker</a> |
|
||||
<a href='http://bgrins.github.com/spectrum'>Mobile Colorpicker</a> |
|
||||
<a href='http://bgrins.github.com/spectrum'>Spectrum colorpicker</a>
|
||||
</p>
|
||||
<p>
|
||||
If you want to let me (<a href='http://twitter.com/bgrins'>@bgrins</a>) know you are using it, send me a link where it can be seen or add it to the <a href='https://github.com/bgrins/spectrum/wiki/Sites-Using-Spectrum'>list of projects using Spectrum</a>!
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" src="docs/prettify.js"></script>
|
||||
<script type="text/javascript">
|
||||
|
||||
var _gaq = _gaq || [];
|
||||
_gaq.push(['_setAccount', 'UA-8259845-4']);
|
||||
_gaq.push(['_trackPageview']);
|
||||
|
||||
(function() {
|
||||
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
|
||||
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
|
||||
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
|
||||
})();
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
10
files/bgrins-spectrum-2c2010c/package.json
Normal file
10
files/bgrins-spectrum-2c2010c/package.json
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
{
|
||||
"name": "spectrum",
|
||||
"version": "1.1.1",
|
||||
"devDependencies": {
|
||||
"grunt": "~0.4.0",
|
||||
"grunt-contrib-jshint": "~0.4.3",
|
||||
"grunt-contrib-qunit": "~0.2.0",
|
||||
"grunt-contrib-uglify": "~0.2.0"
|
||||
}
|
||||
}
|
||||
15
files/bgrins-spectrum-2c2010c/test/index.html
Normal file
15
files/bgrins-spectrum-2c2010c/test/index.html
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Spectrum Tests</title>
|
||||
<link rel="stylesheet" href="qunit.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="qunit"></div>
|
||||
<script src="../docs/jquery-1.9.1.js"></script>
|
||||
<script src="../spectrum.js"></script>
|
||||
<script src="qunit.js"></script>
|
||||
<script src="tests.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
235
files/bgrins-spectrum-2c2010c/test/qunit.css
Normal file
235
files/bgrins-spectrum-2c2010c/test/qunit.css
Normal file
|
|
@ -0,0 +1,235 @@
|
|||
/**
|
||||
* QUnit v1.10.0 - A JavaScript Unit Testing Framework
|
||||
*
|
||||
* http://qunitjs.com
|
||||
*
|
||||
* Copyright 2012 jQuery Foundation and other contributors
|
||||
* Released under the MIT license.
|
||||
* http://jquery.org/license
|
||||
*/
|
||||
|
||||
/** Font Family and Sizes */
|
||||
|
||||
#qunit-tests, #qunit-header, #qunit-banner, #qunit-testrunner-toolbar, #qunit-userAgent, #qunit-testresult {
|
||||
font-family: "Helvetica Neue Light", "HelveticaNeue-Light", "Helvetica Neue", Calibri, Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
#qunit-testrunner-toolbar, #qunit-userAgent, #qunit-testresult, #qunit-tests li { font-size: small; }
|
||||
#qunit-tests { font-size: smaller; }
|
||||
|
||||
|
||||
/** Resets */
|
||||
|
||||
#qunit-tests, #qunit-tests ol, #qunit-header, #qunit-banner, #qunit-userAgent, #qunit-testresult, #qunit-modulefilter {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
|
||||
/** Header */
|
||||
|
||||
#qunit-header {
|
||||
padding: 0.5em 0 0.5em 1em;
|
||||
|
||||
color: #8699a4;
|
||||
background-color: #0d3349;
|
||||
|
||||
font-size: 1.5em;
|
||||
line-height: 1em;
|
||||
font-weight: normal;
|
||||
|
||||
border-radius: 5px 5px 0 0;
|
||||
-moz-border-radius: 5px 5px 0 0;
|
||||
-webkit-border-top-right-radius: 5px;
|
||||
-webkit-border-top-left-radius: 5px;
|
||||
}
|
||||
|
||||
#qunit-header a {
|
||||
text-decoration: none;
|
||||
color: #c2ccd1;
|
||||
}
|
||||
|
||||
#qunit-header a:hover,
|
||||
#qunit-header a:focus {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#qunit-testrunner-toolbar label {
|
||||
display: inline-block;
|
||||
padding: 0 .5em 0 .1em;
|
||||
}
|
||||
|
||||
#qunit-banner {
|
||||
height: 5px;
|
||||
}
|
||||
|
||||
#qunit-testrunner-toolbar {
|
||||
padding: 0.5em 0 0.5em 2em;
|
||||
color: #5E740B;
|
||||
background-color: #eee;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#qunit-userAgent {
|
||||
padding: 0.5em 0 0.5em 2.5em;
|
||||
background-color: #2b81af;
|
||||
color: #fff;
|
||||
text-shadow: rgba(0, 0, 0, 0.5) 2px 2px 1px;
|
||||
}
|
||||
|
||||
#qunit-modulefilter-container {
|
||||
float: right;
|
||||
}
|
||||
|
||||
/** Tests: Pass/Fail */
|
||||
|
||||
#qunit-tests {
|
||||
list-style-position: inside;
|
||||
}
|
||||
|
||||
#qunit-tests li {
|
||||
padding: 0.4em 0.5em 0.4em 2.5em;
|
||||
border-bottom: 1px solid #fff;
|
||||
list-style-position: inside;
|
||||
}
|
||||
|
||||
#qunit-tests.hidepass li.pass, #qunit-tests.hidepass li.running {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#qunit-tests li strong {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#qunit-tests li a {
|
||||
padding: 0.5em;
|
||||
color: #c2ccd1;
|
||||
text-decoration: none;
|
||||
}
|
||||
#qunit-tests li a:hover,
|
||||
#qunit-tests li a:focus {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
#qunit-tests ol {
|
||||
margin-top: 0.5em;
|
||||
padding: 0.5em;
|
||||
|
||||
background-color: #fff;
|
||||
|
||||
border-radius: 5px;
|
||||
-moz-border-radius: 5px;
|
||||
-webkit-border-radius: 5px;
|
||||
}
|
||||
|
||||
#qunit-tests table {
|
||||
border-collapse: collapse;
|
||||
margin-top: .2em;
|
||||
}
|
||||
|
||||
#qunit-tests th {
|
||||
text-align: right;
|
||||
vertical-align: top;
|
||||
padding: 0 .5em 0 0;
|
||||
}
|
||||
|
||||
#qunit-tests td {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
#qunit-tests pre {
|
||||
margin: 0;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
#qunit-tests del {
|
||||
background-color: #e0f2be;
|
||||
color: #374e0c;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#qunit-tests ins {
|
||||
background-color: #ffcaca;
|
||||
color: #500;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/*** Test Counts */
|
||||
|
||||
#qunit-tests b.counts { color: black; }
|
||||
#qunit-tests b.passed { color: #5E740B; }
|
||||
#qunit-tests b.failed { color: #710909; }
|
||||
|
||||
#qunit-tests li li {
|
||||
padding: 5px;
|
||||
background-color: #fff;
|
||||
border-bottom: none;
|
||||
list-style-position: inside;
|
||||
}
|
||||
|
||||
/*** Passing Styles */
|
||||
|
||||
#qunit-tests li li.pass {
|
||||
color: #3c510c;
|
||||
background-color: #fff;
|
||||
border-left: 10px solid #C6E746;
|
||||
}
|
||||
|
||||
#qunit-tests .pass { color: #528CE0; background-color: #D2E0E6; }
|
||||
#qunit-tests .pass .test-name { color: #366097; }
|
||||
|
||||
#qunit-tests .pass .test-actual,
|
||||
#qunit-tests .pass .test-expected { color: #999999; }
|
||||
|
||||
#qunit-banner.qunit-pass { background-color: #C6E746; }
|
||||
|
||||
/*** Failing Styles */
|
||||
|
||||
#qunit-tests li li.fail {
|
||||
color: #710909;
|
||||
background-color: #fff;
|
||||
border-left: 10px solid #EE5757;
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
#qunit-tests > li:last-child {
|
||||
border-radius: 0 0 5px 5px;
|
||||
-moz-border-radius: 0 0 5px 5px;
|
||||
-webkit-border-bottom-right-radius: 5px;
|
||||
-webkit-border-bottom-left-radius: 5px;
|
||||
}
|
||||
|
||||
#qunit-tests .fail { color: #000000; background-color: #EE5757; }
|
||||
#qunit-tests .fail .test-name,
|
||||
#qunit-tests .fail .module-name { color: #000000; }
|
||||
|
||||
#qunit-tests .fail .test-actual { color: #EE5757; }
|
||||
#qunit-tests .fail .test-expected { color: green; }
|
||||
|
||||
#qunit-banner.qunit-fail { background-color: #EE5757; }
|
||||
|
||||
|
||||
/** Result */
|
||||
|
||||
#qunit-testresult {
|
||||
padding: 0.5em 0.5em 0.5em 2.5em;
|
||||
|
||||
color: #2b81af;
|
||||
background-color: #D2E0E6;
|
||||
|
||||
border-bottom: 1px solid white;
|
||||
}
|
||||
#qunit-testresult .module-name {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/** Fixture */
|
||||
|
||||
#qunit-fixture {
|
||||
position: absolute;
|
||||
top: -10000px;
|
||||
left: -10000px;
|
||||
width: 1000px;
|
||||
height: 1000px;
|
||||
}
|
||||
1977
files/bgrins-spectrum-2c2010c/test/qunit.js
Normal file
1977
files/bgrins-spectrum-2c2010c/test/qunit.js
Normal file
File diff suppressed because it is too large
Load diff
243
files/bgrins-spectrum-2c2010c/test/tests.js
Normal file
243
files/bgrins-spectrum-2c2010c/test/tests.js
Normal file
|
|
@ -0,0 +1,243 @@
|
|||
// Spectrum Colorpicker Tests
|
||||
// https://github.com/bgrins/spectrum
|
||||
// Author: Brian Grinstead
|
||||
// License: MIT
|
||||
|
||||
|
||||
module("Initialization");
|
||||
|
||||
test( "jQuery Plugin Can Be Created", function() {
|
||||
var el = $("<input id='spec' />").spectrum();
|
||||
|
||||
ok( el.attr("id") === "spec", "Element returned from plugin" );
|
||||
|
||||
el.spectrum("set", "red");
|
||||
equal ( el.spectrum("get").toName(), "red", "Basic color setting");
|
||||
|
||||
el.spectrum("destroy");
|
||||
});
|
||||
|
||||
test( "Events Fire", function() {
|
||||
var el = $("<input id='spec' />").spectrum();
|
||||
var count = 0;
|
||||
expect(5);
|
||||
|
||||
el.on("beforeShow.spectrum", function(e) {
|
||||
|
||||
// Cancel the event the first time
|
||||
if (count === 0) {
|
||||
ok(true, "Cancel beforeShow");
|
||||
count++;
|
||||
return false;
|
||||
}
|
||||
|
||||
ok (count === 1, "Allow beforeShow");
|
||||
count++;
|
||||
});
|
||||
|
||||
|
||||
el.on("show.spectrum", function(e) {
|
||||
ok(count === 2, "Show");
|
||||
count++;
|
||||
});
|
||||
|
||||
el.on("hide.spectrum", function(e) {
|
||||
ok(count === 3, "Hide");
|
||||
|
||||
count++;
|
||||
});
|
||||
|
||||
el.on("move.spectrum", function(e) {
|
||||
|
||||
});
|
||||
|
||||
el.on("change.spectrum", function(e, color) {
|
||||
ok(count === 4, "Change");
|
||||
//equal(color.toHexString(), "#ff0000");
|
||||
count++;
|
||||
});
|
||||
|
||||
el.spectrum("show");
|
||||
el.spectrum("show");
|
||||
el.spectrum("hide");
|
||||
|
||||
el.spectrum("set", "red");
|
||||
|
||||
el.spectrum("destroy");
|
||||
});
|
||||
|
||||
module("Defaults");
|
||||
|
||||
test( "Default Color Is Set By Input Value", function() {
|
||||
|
||||
var red = $("<input id='spec' value='red' />").spectrum();
|
||||
equal ( red.spectrum("get").toName(), "red", "Basic color setting");
|
||||
|
||||
var noColor = $("<input id='spec' value='not a color' />").spectrum();
|
||||
equal ( noColor.spectrum("get").toHex(), "000000", "Defaults to black with an invalid color");
|
||||
|
||||
var noValue = $("<input id='spec' />").spectrum();
|
||||
equal ( noValue.spectrum("get").toHex(), "000000", "Defaults to black with no value set");
|
||||
|
||||
var noValueHex3 = $("<input id='spec' />").spectrum({
|
||||
preferredFormat: "hex3"
|
||||
});
|
||||
equal ( noValueHex3.spectrum("get").toHex(true), "000", "Defaults to 3 char hex with no value set");
|
||||
equal ( noValueHex3.spectrum("get").toString(), "#000", "Defaults to 3 char hex with no value set");
|
||||
|
||||
|
||||
red.spectrum("destroy");
|
||||
noColor.spectrum("destroy");
|
||||
noValue.spectrum("destroy");
|
||||
noValueHex3.spectrum("destroy");
|
||||
});
|
||||
|
||||
module("Palettes");
|
||||
|
||||
test( "Local Storage Is Limited ", function() {
|
||||
|
||||
var el = $("<input id='spec' value='red' />").spectrum({
|
||||
localStorageKey: "spectrum.tests",
|
||||
maxSelectionSize: 3
|
||||
});
|
||||
|
||||
el.spectrum("set", "#f00");
|
||||
el.spectrum("set", "#e00");
|
||||
el.spectrum("set", "#d00");
|
||||
el.spectrum("set", "#c00");
|
||||
el.spectrum("set", "#b00");
|
||||
el.spectrum("set", "#a00");
|
||||
|
||||
equal (
|
||||
localStorage["spectrum.tests"],
|
||||
"rgb(204, 0, 0);rgb(187, 0, 0);rgb(170, 0, 0)",
|
||||
"Local storage array has been limited"
|
||||
);
|
||||
|
||||
el.spectrum("destroy");
|
||||
|
||||
});
|
||||
|
||||
module("Options");
|
||||
|
||||
test( "Options Can Be Set and Gotten Programmatically", function() {
|
||||
|
||||
var spec = $("<input id='spec' />").spectrum({
|
||||
color: "#ECC",
|
||||
flat: true,
|
||||
showInput: true,
|
||||
className: "full-spectrum",
|
||||
showInitial: true,
|
||||
showPalette: true,
|
||||
showSelectionPalette: true,
|
||||
maxPaletteSize: 10,
|
||||
preferredFormat: "hex",
|
||||
localStorageKey: "spectrum.example",
|
||||
palette: [['red'], ['green']]
|
||||
});
|
||||
|
||||
var allOptions = spec.spectrum("option");
|
||||
equal ( allOptions.flat, true, "Fetching all options provides accurate value");
|
||||
|
||||
var singleOption = spec.spectrum("option", "className");
|
||||
equal ( singleOption, "full-spectrum", "Fetching a single option returns that value");
|
||||
|
||||
spec.spectrum("option", "className", "changed");
|
||||
singleOption = spec.spectrum("option", "className");
|
||||
equal ( singleOption, "changed", "Changing an option then fetching it is updated");
|
||||
|
||||
|
||||
var appendToDefault = $("<input />").spectrum({
|
||||
});
|
||||
|
||||
var container= $("<div id='c' />").appendTo("body");
|
||||
var appendToOther = $("<input />").spectrum({
|
||||
appendTo: container
|
||||
});
|
||||
|
||||
var appendToParent = $("<input />").appendTo("#c").spectrum({
|
||||
appendTo: "parent"
|
||||
});
|
||||
|
||||
|
||||
var appendToOtherFlat = $("<input />").spectrum({
|
||||
appendTo: container,
|
||||
flat: true
|
||||
});
|
||||
|
||||
equal ( appendToDefault.spectrum("container").parent()[0], document.body, "Appended to body by default");
|
||||
|
||||
equal ( appendToOther.spectrum("container").parent()[0], container[0], "Can be appended to another element");
|
||||
|
||||
equal ( appendToOtherFlat.spectrum("container").parent()[0], $(appendToOtherFlat).parent()[0], "Flat CANNOT be appended to another element, will be same as input");
|
||||
|
||||
equal ( appendToParent.spectrum("container").parent()[0], container[0], "Passing 'parent' to appendTo works as expected");
|
||||
|
||||
|
||||
spec.spectrum("destroy");
|
||||
appendToDefault.spectrum("destroy");
|
||||
appendToOther.spectrum("destroy");
|
||||
appendToOtherFlat.spectrum("destroy");
|
||||
appendToParent.spectrum("destroy").remove();
|
||||
});
|
||||
|
||||
module("Methods");
|
||||
|
||||
test( "Methods work as described", function() {
|
||||
var el = $("<input id='spec' />").spectrum();
|
||||
|
||||
// Method - show
|
||||
el.spectrum("show");
|
||||
ok (el.spectrum("container").is(":visible"), "Spectrum is visible");
|
||||
|
||||
// Method - hide
|
||||
el.spectrum("hide");
|
||||
ok (el.spectrum("container").not(":visible"), "Spectrum is no longer visible");
|
||||
|
||||
// Method - toggle
|
||||
el.spectrum("toggle");
|
||||
ok (el.spectrum("container").is(":visible"), "Spectrum is visible after toggle");
|
||||
|
||||
el.spectrum("toggle");
|
||||
ok (el.spectrum("container").not(":visible"), "Spectrum is no longer visible after toggle");
|
||||
|
||||
// Method - set / get
|
||||
el.spectrum("set", "orange");
|
||||
var color = el.spectrum("get", "color");
|
||||
|
||||
ok (color.toHexString() == "#ffa500", "Color has been set and gotten as hex");
|
||||
ok (color.toName() == "orange", "Color has been set and gotten as name");
|
||||
ok (color.toHsvString() == "hsv(39, 100%, 100%)", "Color has been set and gotten as hsv");
|
||||
ok (color.toRgbString() == "rgb(255, 165, 0)", "Color has been set and gotten as rgb");
|
||||
ok (color.toHslString() == "hsl(39, 100%, 50%)", "Color has been set and gotten as hsl");
|
||||
|
||||
// Method - container
|
||||
ok (el.spectrum("container").hasClass("sp-container"), "Container can be retrieved");
|
||||
|
||||
// Method - disable
|
||||
el.spectrum("disable");
|
||||
ok (el.is(":disabled") , "Can be disabled");
|
||||
|
||||
el.spectrum("show");
|
||||
ok (el.not(":visible") , "Cannot show when disabled");
|
||||
|
||||
// Method - enable
|
||||
el.spectrum("enable");
|
||||
ok (!el.is(":disabled") , "Can be enabled");
|
||||
|
||||
// Method - reflow
|
||||
el.spectrum("reflow");
|
||||
|
||||
// Method - throw exception when not existing
|
||||
raises(function() {
|
||||
el.spectrum("no method");
|
||||
}, "Expecting exception to be thrown when calling with no method");
|
||||
|
||||
// Method - destroy
|
||||
el.spectrum("destroy");
|
||||
|
||||
equal (el.spectrum("container"), el , "No usage after being destroyed");
|
||||
equal (el.spectrum("get"), el , "No usage after being destroyed");
|
||||
|
||||
el.spectrum("destroy");
|
||||
});
|
||||
|
|
@ -1,161 +0,0 @@
|
|||
.colorpicker {
|
||||
width: 356px;
|
||||
height: 176px;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
background: url(../images/colorpicker_background.png);
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
display: none;
|
||||
}
|
||||
.colorpicker_color {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
left: 14px;
|
||||
top: 13px;
|
||||
position: absolute;
|
||||
background: #f00;
|
||||
overflow: hidden;
|
||||
cursor: crosshair;
|
||||
}
|
||||
.colorpicker_color div {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
background: url(../images/colorpicker_overlay.png);
|
||||
}
|
||||
.colorpicker_color div div {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 11px;
|
||||
height: 11px;
|
||||
overflow: hidden;
|
||||
background: url(../images/colorpicker_select.gif);
|
||||
margin: -5px 0 0 -5px;
|
||||
}
|
||||
.colorpicker_hue {
|
||||
position: absolute;
|
||||
top: 13px;
|
||||
left: 171px;
|
||||
width: 35px;
|
||||
height: 150px;
|
||||
cursor: n-resize;
|
||||
}
|
||||
.colorpicker_hue div {
|
||||
position: absolute;
|
||||
width: 35px;
|
||||
height: 9px;
|
||||
overflow: hidden;
|
||||
background: url(../images/colorpicker_indic.gif) left top;
|
||||
margin: -4px 0 0 0;
|
||||
left: 0px;
|
||||
}
|
||||
.colorpicker_new_color {
|
||||
position: absolute;
|
||||
width: 60px;
|
||||
height: 30px;
|
||||
left: 213px;
|
||||
top: 13px;
|
||||
background: #f00;
|
||||
}
|
||||
.colorpicker_current_color {
|
||||
position: absolute;
|
||||
width: 60px;
|
||||
height: 30px;
|
||||
left: 283px;
|
||||
top: 13px;
|
||||
background: #f00;
|
||||
}
|
||||
.colorpicker input {
|
||||
background-color: transparent;
|
||||
border: 1px solid transparent;
|
||||
position: absolute;
|
||||
font-size: 10px;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
color: #898989;
|
||||
top: 4px;
|
||||
right: 11px;
|
||||
text-align: right;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 11px;
|
||||
}
|
||||
.colorpicker_hex {
|
||||
position: absolute;
|
||||
width: 72px;
|
||||
height: 22px;
|
||||
background: url(../images/colorpicker_hex.png) top;
|
||||
left: 212px;
|
||||
top: 142px;
|
||||
}
|
||||
.colorpicker_hex input {
|
||||
right: 6px;
|
||||
}
|
||||
.colorpicker_field {
|
||||
height: 22px;
|
||||
width: 62px;
|
||||
background-position: top;
|
||||
position: absolute;
|
||||
}
|
||||
.colorpicker_field span {
|
||||
position: absolute;
|
||||
width: 12px;
|
||||
height: 22px;
|
||||
overflow: hidden;
|
||||
top: 0;
|
||||
right: 0;
|
||||
cursor: n-resize;
|
||||
}
|
||||
.colorpicker_rgb_r {
|
||||
background-image: url(../images/colorpicker_rgb_r.png);
|
||||
top: 52px;
|
||||
left: 212px;
|
||||
}
|
||||
.colorpicker_rgb_g {
|
||||
background-image: url(../images/colorpicker_rgb_g.png);
|
||||
top: 82px;
|
||||
left: 212px;
|
||||
}
|
||||
.colorpicker_rgb_b {
|
||||
background-image: url(../images/colorpicker_rgb_b.png);
|
||||
top: 112px;
|
||||
left: 212px;
|
||||
}
|
||||
.colorpicker_hsb_h {
|
||||
background-image: url(../images/colorpicker_hsb_h.png);
|
||||
top: 52px;
|
||||
left: 282px;
|
||||
}
|
||||
.colorpicker_hsb_s {
|
||||
background-image: url(../images/colorpicker_hsb_s.png);
|
||||
top: 82px;
|
||||
left: 282px;
|
||||
}
|
||||
.colorpicker_hsb_b {
|
||||
background-image: url(../images/colorpicker_hsb_b.png);
|
||||
top: 112px;
|
||||
left: 282px;
|
||||
}
|
||||
.colorpicker_submit {
|
||||
position: absolute;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
background: url(../images/colorpicker_submit.png) top;
|
||||
left: 322px;
|
||||
top: 142px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.colorpicker_focus {
|
||||
background-position: center;
|
||||
}
|
||||
.colorpicker_hex.colorpicker_focus {
|
||||
background-position: bottom;
|
||||
}
|
||||
.colorpicker_submit.colorpicker_focus {
|
||||
background-position: bottom;
|
||||
}
|
||||
.colorpicker_slider {
|
||||
background-position: bottom;
|
||||
}
|
||||
|
|
@ -1,218 +0,0 @@
|
|||
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
|
||||
margin:0;
|
||||
padding:0;
|
||||
}
|
||||
table {
|
||||
border-collapse:collapse;
|
||||
border-spacing:0;
|
||||
}
|
||||
fieldset,img {
|
||||
border:0;
|
||||
}
|
||||
address,caption,cite,code,dfn,em,strong,th,var {
|
||||
font-style:normal;
|
||||
font-weight:normal;
|
||||
}
|
||||
ol,ul {
|
||||
list-style:none;
|
||||
}
|
||||
caption,th {
|
||||
text-align:left;
|
||||
}
|
||||
h1,h2,h3,h4,h5,h6 {
|
||||
font-size:100%;
|
||||
font-weight:normal;
|
||||
}
|
||||
q:before,q:after {
|
||||
content:'';
|
||||
}
|
||||
abbr,acronym { border:0;
|
||||
}
|
||||
html, body {
|
||||
background-color: #fff;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
color: #52697E;
|
||||
}
|
||||
body {
|
||||
text-align: center;
|
||||
overflow: auto;
|
||||
}
|
||||
.wrapper {
|
||||
width: 700px;
|
||||
margin: 0 auto;
|
||||
text-align: left;
|
||||
}
|
||||
h1 {
|
||||
font-size: 21px;
|
||||
height: 47px;
|
||||
line-height: 47px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.navigationTabs {
|
||||
height: 23px;
|
||||
line-height: 23px;
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
.navigationTabs li {
|
||||
float: left;
|
||||
height: 23px;
|
||||
line-height: 23px;
|
||||
padding-right: 3px;
|
||||
}
|
||||
.navigationTabs li a{
|
||||
float: left;
|
||||
dispaly: block;
|
||||
height: 23px;
|
||||
line-height: 23px;
|
||||
padding: 0 10px;
|
||||
overflow: hidden;
|
||||
color: #52697E;
|
||||
background-color: #eee;
|
||||
position: relative;
|
||||
text-decoration: none;
|
||||
}
|
||||
.navigationTabs li a:hover {
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
.navigationTabs li a.active {
|
||||
background-color: #fff;
|
||||
border: 1px solid #ccc;
|
||||
border-bottom: 0px solid;
|
||||
}
|
||||
.tabsContent {
|
||||
border: 1px solid #ccc;
|
||||
border-top: 0px solid;
|
||||
width: 698px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.tab {
|
||||
padding: 16px;
|
||||
display: none;
|
||||
}
|
||||
.tab h2 {
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
}
|
||||
.tab h3 {
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.tab p {
|
||||
margin-top: 16px;
|
||||
clear: both;
|
||||
}
|
||||
.tab ul {
|
||||
margin-top: 16px;
|
||||
list-style: disc;
|
||||
}
|
||||
.tab li {
|
||||
margin: 10px 0 0 35px;
|
||||
}
|
||||
.tab a {
|
||||
color: #8FB0CF;
|
||||
}
|
||||
.tab strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
.tab pre {
|
||||
font-size: 11px;
|
||||
margin-top: 20px;
|
||||
width: 668px;
|
||||
overflow: auto;
|
||||
clear: both;
|
||||
}
|
||||
.tab table {
|
||||
width: 100%;
|
||||
}
|
||||
.tab table td {
|
||||
padding: 6px 10px 6px 0;
|
||||
vertical-align: top;
|
||||
}
|
||||
.tab dt {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
#colorSelector {
|
||||
position: relative;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
background: url(../images/select.png);
|
||||
}
|
||||
#colorSelector div {
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
left: 3px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
background: url(../images/select.png) center;
|
||||
}
|
||||
#colorSelector2 {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
background: url(../images/select2.png);
|
||||
}
|
||||
#colorSelector2 div {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
left: 4px;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
background: url(../images/select2.png) center;
|
||||
}
|
||||
#colorpickerHolder2 {
|
||||
top: 32px;
|
||||
left: 0;
|
||||
width: 356px;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
}
|
||||
#colorpickerHolder2 .colorpicker {
|
||||
background-image: url(../images/custom_background.png);
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
#colorpickerHolder2 .colorpicker_hue div {
|
||||
background-image: url(../images/custom_indic.gif);
|
||||
}
|
||||
#colorpickerHolder2 .colorpicker_hex {
|
||||
background-image: url(../images/custom_hex.png);
|
||||
}
|
||||
#colorpickerHolder2 .colorpicker_rgb_r {
|
||||
background-image: url(../images/custom_rgb_r.png);
|
||||
}
|
||||
#colorpickerHolder2 .colorpicker_rgb_g {
|
||||
background-image: url(../images/custom_rgb_g.png);
|
||||
}
|
||||
#colorpickerHolder2 .colorpicker_rgb_b {
|
||||
background-image: url(../images/custom_rgb_b.png);
|
||||
}
|
||||
#colorpickerHolder2 .colorpicker_hsb_s {
|
||||
background-image: url(../images/custom_hsb_s.png);
|
||||
display: none;
|
||||
}
|
||||
#colorpickerHolder2 .colorpicker_hsb_h {
|
||||
background-image: url(../images/custom_hsb_h.png);
|
||||
display: none;
|
||||
}
|
||||
#colorpickerHolder2 .colorpicker_hsb_b {
|
||||
background-image: url(../images/custom_hsb_b.png);
|
||||
display: none;
|
||||
}
|
||||
#colorpickerHolder2 .colorpicker_submit {
|
||||
background-image: url(../images/custom_submit.png);
|
||||
}
|
||||
#colorpickerHolder2 .colorpicker input {
|
||||
color: #778398;
|
||||
}
|
||||
#customWidget {
|
||||
position: relative;
|
||||
height: 36px;
|
||||
}
|
||||
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 49 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 532 B |
Binary file not shown.
|
Before Width: | Height: | Size: 970 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1,012 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 86 B |
Binary file not shown.
|
Before Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 970 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 78 B |
Binary file not shown.
|
Before Width: | Height: | Size: 984 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 562 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 970 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 86 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1,008 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1,018 B |
Binary file not shown.
|
Before Width: | Height: | Size: 997 B |
Binary file not shown.
|
Before Width: | Height: | Size: 506 B |
Binary file not shown.
|
Before Width: | Height: | Size: 518 B |
Binary file not shown.
|
Before Width: | Height: | Size: 315 B |
210
files/index.html
210
files/index.html
|
|
@ -1,184 +1,26 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
||||
<head>
|
||||
<link rel="stylesheet" href="css/colorpicker.css" type="text/css" />
|
||||
<link rel="stylesheet" media="screen" type="text/css" href="css/layout.css" />
|
||||
<title>ColorPicker - jQuery plugin</title>
|
||||
<script type="text/javascript" src="js/jquery.js"></script>
|
||||
<script type="text/javascript" src="js/colorpicker.js"></script>
|
||||
<script type="text/javascript" src="js/eye.js"></script>
|
||||
<script type="text/javascript" src="js/utils.js"></script>
|
||||
<script type="text/javascript" src="js/layout.js?ver=1.0.2"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="wrapper">
|
||||
<h1>Color Picker - jQuery plugin</h1>
|
||||
<ul class="navigationTabs">
|
||||
<li><a href="#about" rel="about">About</a></li>
|
||||
<li><a href="#download" rel="download">Download</a></li>
|
||||
<li><a href="#implement" rel="implement">Implement</a></li>
|
||||
</ul>
|
||||
<div class="tabsContent">
|
||||
<div class="tab">
|
||||
<h2>About</h2>
|
||||
<p>A simple component to select color in the same way you select color in Adobe Photoshop</p>
|
||||
<h3>Last update</h3>
|
||||
<p>23.05.2009 - Check Download tab</p>
|
||||
<h3>Features</h3>
|
||||
<ul>
|
||||
<li>Flat mode - as element in page</li>
|
||||
<li>Powerful controls for color selection</li>
|
||||
<li>Easy to customize the look by changing some images</li>
|
||||
<li>Fits into the viewport</li>
|
||||
</ul>
|
||||
<h3>License</h3>
|
||||
<p>Dual licensed under the MIT and GPL licenses.</p>
|
||||
<h3>Examples</h3>
|
||||
<p>Flat mode.</p>
|
||||
<p id="colorpickerHolder">
|
||||
</p>
|
||||
<pre>
|
||||
$('#colorpickerHolder').ColorPicker({flat: true});
|
||||
</pre>
|
||||
<p>Custom skin and using flat mode to display the color picker in a custom widget.</p>
|
||||
<div id="customWidget">
|
||||
<div id="colorSelector2"><div style="background-color: #00ff00"></div></div>
|
||||
<div id="colorpickerHolder2">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>Attached to an text field and using callback functions to update the color with field's value and set the value back in the field by submiting the color.</p>
|
||||
<p><input type="text" maxlength="6" size="6" id="colorpickerField1" value="00ff00" /></p>
|
||||
<p><input type="text" maxlength="6" size="6" id="colorpickerField3" value="0000ff" /></p>
|
||||
<p><input type="text" maxlength="6" size="6" id="colorpickerField2" value="ff0000" /></p>
|
||||
<pre>$('#colorpickerField1, #colorpickerField2, #colorpickerField3').ColorPicker({
|
||||
onSubmit: function(hsb, hex, rgb, el) {
|
||||
$(el).val(hex);
|
||||
$(el).ColorPickerHide();
|
||||
},
|
||||
onBeforeShow: function () {
|
||||
$(this).ColorPickerSetColor(this.value);
|
||||
}
|
||||
})
|
||||
.bind('keyup', function(){
|
||||
$(this).ColorPickerSetColor(this.value);
|
||||
});
|
||||
</pre>
|
||||
<p>Attached to DOMElement and using callbacks to live preview the color and adding animation.</p>
|
||||
<p>
|
||||
<div id="colorSelector"><div style="background-color: #0000ff"></div></div>
|
||||
</p>
|
||||
<pre>
|
||||
$('#colorSelector').ColorPicker({
|
||||
color: '#0000ff',
|
||||
onShow: function (colpkr) {
|
||||
$(colpkr).fadeIn(500);
|
||||
return false;
|
||||
},
|
||||
onHide: function (colpkr) {
|
||||
$(colpkr).fadeOut(500);
|
||||
return false;
|
||||
},
|
||||
onChange: function (hsb, hex, rgb) {
|
||||
$('#colorSelector div').css('backgroundColor', '#' + hex);
|
||||
}
|
||||
});
|
||||
</pre>
|
||||
</div>
|
||||
<div class="tab">
|
||||
<h2>Download</h2>
|
||||
<p><a href="colorpicker.zip">colorpicker.zip (73 kb)</a>: jQuery, Javscript files, CSS files, images, examples and instructions.</p>
|
||||
<h3>Changelog</h3>
|
||||
<dl>
|
||||
<dt>23.05.2009</dt>
|
||||
<dd>Added: close on color selection example</dd>
|
||||
<dd>Added: restore original color option</dd>
|
||||
<dd>Changed: color update on key up event</dd>
|
||||
<dd>Fixed: colorpicker hide and show methods</dd>
|
||||
<dd>Fixed: reference to options. Multiple fields with colorpickers is possible now.</dd>
|
||||
<dd>Fixed: RGB to HSB convertion</dd>
|
||||
<dt>22.08.2008</dt>
|
||||
<dd>Fixed bug: where some events were not canceled right on Safari</dd>
|
||||
<dd>Fixed bug: where teh view port was not detected right on Safari</dd>
|
||||
<dt>16-07-2008</dt>
|
||||
<dd>Fixed bug where the letter 'F' could not be typed in the Hex field</dd>
|
||||
<dd>Fixed bug where the changes on Hex field where not parsed</dd>
|
||||
<dd>Added new option 'livePreview'</dd>
|
||||
<dt>08-07-2008</dt>
|
||||
<dd>Fixed typo in the code, both JavaScript and CSS</dd>
|
||||
<dd>Changed the cursor for some elements</dd>
|
||||
<dd>Added new demo explaining how to implement custom skin</dd>
|
||||
<dt>07.07.2008</dt>
|
||||
<dd>The first release.</dd>
|
||||
</dl>
|
||||
</div>
|
||||
<div class="tab">
|
||||
<h2>Implement</h2>
|
||||
<p>Attach the Javascript and CSS files to your document. Edit CSS file and fix the paths to images and change colors to fit your site theme.</p>
|
||||
<pre>
|
||||
<link rel="stylesheet" media="screen" type="text/css" href="css/colorpicker.css" />
|
||||
<script type="text/javascript" src="js/colorpicker.js"></script>
|
||||
</pre>
|
||||
<h3>Invocation code</h3>
|
||||
<p>All you have to do is to select the elements in a jQuery way and call the plugin.</p>
|
||||
<pre>
|
||||
$('input').ColorPicker(options);
|
||||
</pre>
|
||||
<h3>Options</h3>
|
||||
<p>A hash of parameters. All parameters are optional.</p>
|
||||
<table>
|
||||
<tr>
|
||||
<td><strong>eventName</strong></td>
|
||||
<td>string</td>
|
||||
<td>The desired event to trigger the colorpicker. Default: 'click'</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>color</strong></td>
|
||||
<td>string or hash</td>
|
||||
<td>The default color. String for hex color or hash for RGB and HSB ({r:255, r:0, b:0}) . Default: 'ff0000'</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>flat</strong></td>
|
||||
<td>boolean</td>
|
||||
<td>Whatever if the color picker is appended to the element or triggered by an event. Default false</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>livePreview</strong></td>
|
||||
<td>boolean</td>
|
||||
<td>Whatever if the color values are filled in the fields while changing values on selector or a field. If false it may improve speed. Default true</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>onShow</strong></td>
|
||||
<td>function</td>
|
||||
<td>Callback function triggered when the color picker is shown</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>onBeforeShow</strong></td>
|
||||
<td>function</td>
|
||||
<td>Callback function triggered before the color picker is shown</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>onHide</strong></td>
|
||||
<td>function</td>
|
||||
<td>Callback function triggered when the color picker is hidden</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>onChange</strong></td>
|
||||
<td>function</td>
|
||||
<td>Callback function triggered when the color is changed</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>onSubmit</strong></td>
|
||||
<td>function</td>
|
||||
<td>Callback function triggered when the color it is chosen</td>
|
||||
</tr>
|
||||
</table>
|
||||
<h3>Set color</h3>
|
||||
<p>If you want to set a new color.</p>
|
||||
<pre>$('input').ColorPickerSetColor(color);</pre>
|
||||
<p>The 'color' argument is the same format as the option color, string for hex color or hash for RGB and HSB ({r:255, r:0, b:0}).</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
<head>
|
||||
|
||||
<link rel="stylesheet" href="spectrum.css" type="text/css" />
|
||||
|
||||
<script src="http://code.jquery.com/jquery-1.10.2.min.js" ></script>
|
||||
<script src="spectrum.js" ></script>
|
||||
|
||||
<script>
|
||||
function submit_ajax(tinycolor) {
|
||||
var rgb = tinycolor.toRgb();
|
||||
$.ajax({url: '/ajax',
|
||||
type: 'POST',
|
||||
data: rgb})
|
||||
}
|
||||
|
||||
$(function () {
|
||||
|
||||
$(".basic").spectrum({flat: true, move: submit_ajax});
|
||||
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<input type='text' class='basic' value='red' />
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -1,484 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* Color picker
|
||||
* Author: Stefan Petre www.eyecon.ro
|
||||
*
|
||||
* Dual licensed under the MIT and GPL licenses
|
||||
*
|
||||
*/
|
||||
(function ($) {
|
||||
var ColorPicker = function () {
|
||||
var
|
||||
ids = {},
|
||||
inAction,
|
||||
charMin = 65,
|
||||
visible,
|
||||
tpl = '<div class="colorpicker"><div class="colorpicker_color"><div><div></div></div></div><div class="colorpicker_hue"><div></div></div><div class="colorpicker_new_color"></div><div class="colorpicker_current_color"></div><div class="colorpicker_hex"><input type="text" maxlength="6" size="6" /></div><div class="colorpicker_rgb_r colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_rgb_g colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_rgb_b colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_hsb_h colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_hsb_s colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_hsb_b colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_submit"></div></div>',
|
||||
defaults = {
|
||||
eventName: 'click',
|
||||
onShow: function () {},
|
||||
onBeforeShow: function(){},
|
||||
onHide: function () {},
|
||||
onChange: function () {},
|
||||
onSubmit: function () {},
|
||||
color: 'ff0000',
|
||||
livePreview: true,
|
||||
flat: false
|
||||
},
|
||||
fillRGBFields = function (hsb, cal) {
|
||||
var rgb = HSBToRGB(hsb);
|
||||
$(cal).data('colorpicker').fields
|
||||
.eq(1).val(rgb.r).end()
|
||||
.eq(2).val(rgb.g).end()
|
||||
.eq(3).val(rgb.b).end();
|
||||
},
|
||||
fillHSBFields = function (hsb, cal) {
|
||||
$(cal).data('colorpicker').fields
|
||||
.eq(4).val(hsb.h).end()
|
||||
.eq(5).val(hsb.s).end()
|
||||
.eq(6).val(hsb.b).end();
|
||||
},
|
||||
fillHexFields = function (hsb, cal) {
|
||||
$(cal).data('colorpicker').fields
|
||||
.eq(0).val(HSBToHex(hsb)).end();
|
||||
},
|
||||
setSelector = function (hsb, cal) {
|
||||
$(cal).data('colorpicker').selector.css('backgroundColor', '#' + HSBToHex({h: hsb.h, s: 100, b: 100}));
|
||||
$(cal).data('colorpicker').selectorIndic.css({
|
||||
left: parseInt(150 * hsb.s/100, 10),
|
||||
top: parseInt(150 * (100-hsb.b)/100, 10)
|
||||
});
|
||||
},
|
||||
setHue = function (hsb, cal) {
|
||||
$(cal).data('colorpicker').hue.css('top', parseInt(150 - 150 * hsb.h/360, 10));
|
||||
},
|
||||
setCurrentColor = function (hsb, cal) {
|
||||
$(cal).data('colorpicker').currentColor.css('backgroundColor', '#' + HSBToHex(hsb));
|
||||
},
|
||||
setNewColor = function (hsb, cal) {
|
||||
$(cal).data('colorpicker').newColor.css('backgroundColor', '#' + HSBToHex(hsb));
|
||||
},
|
||||
keyDown = function (ev) {
|
||||
var pressedKey = ev.charCode || ev.keyCode || -1;
|
||||
if ((pressedKey > charMin && pressedKey <= 90) || pressedKey == 32) {
|
||||
return false;
|
||||
}
|
||||
var cal = $(this).parent().parent();
|
||||
if (cal.data('colorpicker').livePreview === true) {
|
||||
change.apply(this);
|
||||
}
|
||||
},
|
||||
change = function (ev) {
|
||||
var cal = $(this).parent().parent(), col;
|
||||
if (this.parentNode.className.indexOf('_hex') > 0) {
|
||||
cal.data('colorpicker').color = col = HexToHSB(fixHex(this.value));
|
||||
} else if (this.parentNode.className.indexOf('_hsb') > 0) {
|
||||
cal.data('colorpicker').color = col = fixHSB({
|
||||
h: parseInt(cal.data('colorpicker').fields.eq(4).val(), 10),
|
||||
s: parseInt(cal.data('colorpicker').fields.eq(5).val(), 10),
|
||||
b: parseInt(cal.data('colorpicker').fields.eq(6).val(), 10)
|
||||
});
|
||||
} else {
|
||||
cal.data('colorpicker').color = col = RGBToHSB(fixRGB({
|
||||
r: parseInt(cal.data('colorpicker').fields.eq(1).val(), 10),
|
||||
g: parseInt(cal.data('colorpicker').fields.eq(2).val(), 10),
|
||||
b: parseInt(cal.data('colorpicker').fields.eq(3).val(), 10)
|
||||
}));
|
||||
}
|
||||
if (ev) {
|
||||
fillRGBFields(col, cal.get(0));
|
||||
fillHexFields(col, cal.get(0));
|
||||
fillHSBFields(col, cal.get(0));
|
||||
}
|
||||
setSelector(col, cal.get(0));
|
||||
setHue(col, cal.get(0));
|
||||
setNewColor(col, cal.get(0));
|
||||
cal.data('colorpicker').onChange.apply(cal, [col, HSBToHex(col), HSBToRGB(col)]);
|
||||
},
|
||||
blur = function (ev) {
|
||||
var cal = $(this).parent().parent();
|
||||
cal.data('colorpicker').fields.parent().removeClass('colorpicker_focus');
|
||||
},
|
||||
focus = function () {
|
||||
charMin = this.parentNode.className.indexOf('_hex') > 0 ? 70 : 65;
|
||||
$(this).parent().parent().data('colorpicker').fields.parent().removeClass('colorpicker_focus');
|
||||
$(this).parent().addClass('colorpicker_focus');
|
||||
},
|
||||
downIncrement = function (ev) {
|
||||
var field = $(this).parent().find('input').focus();
|
||||
var current = {
|
||||
el: $(this).parent().addClass('colorpicker_slider'),
|
||||
max: this.parentNode.className.indexOf('_hsb_h') > 0 ? 360 : (this.parentNode.className.indexOf('_hsb') > 0 ? 100 : 255),
|
||||
y: ev.pageY,
|
||||
field: field,
|
||||
val: parseInt(field.val(), 10),
|
||||
preview: $(this).parent().parent().data('colorpicker').livePreview
|
||||
};
|
||||
$(document).bind('mouseup', current, upIncrement);
|
||||
$(document).bind('mousemove', current, moveIncrement);
|
||||
},
|
||||
moveIncrement = function (ev) {
|
||||
ev.data.field.val(Math.max(0, Math.min(ev.data.max, parseInt(ev.data.val + ev.pageY - ev.data.y, 10))));
|
||||
if (ev.data.preview) {
|
||||
change.apply(ev.data.field.get(0), [true]);
|
||||
}
|
||||
return false;
|
||||
},
|
||||
upIncrement = function (ev) {
|
||||
change.apply(ev.data.field.get(0), [true]);
|
||||
ev.data.el.removeClass('colorpicker_slider').find('input').focus();
|
||||
$(document).unbind('mouseup', upIncrement);
|
||||
$(document).unbind('mousemove', moveIncrement);
|
||||
return false;
|
||||
},
|
||||
downHue = function (ev) {
|
||||
var current = {
|
||||
cal: $(this).parent(),
|
||||
y: $(this).offset().top
|
||||
};
|
||||
current.preview = current.cal.data('colorpicker').livePreview;
|
||||
$(document).bind('mouseup', current, upHue);
|
||||
$(document).bind('mousemove', current, moveHue);
|
||||
},
|
||||
moveHue = function (ev) {
|
||||
change.apply(
|
||||
ev.data.cal.data('colorpicker')
|
||||
.fields
|
||||
.eq(4)
|
||||
.val(parseInt(360*(150 - Math.max(0,Math.min(150,(ev.pageY - ev.data.y))))/150, 10))
|
||||
.get(0),
|
||||
[ev.data.preview]
|
||||
);
|
||||
return false;
|
||||
},
|
||||
upHue = function (ev) {
|
||||
fillRGBFields(ev.data.cal.data('colorpicker').color, ev.data.cal.get(0));
|
||||
fillHexFields(ev.data.cal.data('colorpicker').color, ev.data.cal.get(0));
|
||||
$(document).unbind('mouseup', upHue);
|
||||
$(document).unbind('mousemove', moveHue);
|
||||
return false;
|
||||
},
|
||||
downSelector = function (ev) {
|
||||
var current = {
|
||||
cal: $(this).parent(),
|
||||
pos: $(this).offset()
|
||||
};
|
||||
current.preview = current.cal.data('colorpicker').livePreview;
|
||||
$(document).bind('mouseup', current, upSelector);
|
||||
$(document).bind('mousemove', current, moveSelector);
|
||||
},
|
||||
moveSelector = function (ev) {
|
||||
change.apply(
|
||||
ev.data.cal.data('colorpicker')
|
||||
.fields
|
||||
.eq(6)
|
||||
.val(parseInt(100*(150 - Math.max(0,Math.min(150,(ev.pageY - ev.data.pos.top))))/150, 10))
|
||||
.end()
|
||||
.eq(5)
|
||||
.val(parseInt(100*(Math.max(0,Math.min(150,(ev.pageX - ev.data.pos.left))))/150, 10))
|
||||
.get(0),
|
||||
[ev.data.preview]
|
||||
);
|
||||
return false;
|
||||
},
|
||||
upSelector = function (ev) {
|
||||
fillRGBFields(ev.data.cal.data('colorpicker').color, ev.data.cal.get(0));
|
||||
fillHexFields(ev.data.cal.data('colorpicker').color, ev.data.cal.get(0));
|
||||
$(document).unbind('mouseup', upSelector);
|
||||
$(document).unbind('mousemove', moveSelector);
|
||||
return false;
|
||||
},
|
||||
enterSubmit = function (ev) {
|
||||
$(this).addClass('colorpicker_focus');
|
||||
},
|
||||
leaveSubmit = function (ev) {
|
||||
$(this).removeClass('colorpicker_focus');
|
||||
},
|
||||
clickSubmit = function (ev) {
|
||||
var cal = $(this).parent();
|
||||
var col = cal.data('colorpicker').color;
|
||||
cal.data('colorpicker').origColor = col;
|
||||
setCurrentColor(col, cal.get(0));
|
||||
cal.data('colorpicker').onSubmit(col, HSBToHex(col), HSBToRGB(col), cal.data('colorpicker').el);
|
||||
},
|
||||
show = function (ev) {
|
||||
var cal = $('#' + $(this).data('colorpickerId'));
|
||||
cal.data('colorpicker').onBeforeShow.apply(this, [cal.get(0)]);
|
||||
var pos = $(this).offset();
|
||||
var viewPort = getViewport();
|
||||
var top = pos.top + this.offsetHeight;
|
||||
var left = pos.left;
|
||||
if (top + 176 > viewPort.t + viewPort.h) {
|
||||
top -= this.offsetHeight + 176;
|
||||
}
|
||||
if (left + 356 > viewPort.l + viewPort.w) {
|
||||
left -= 356;
|
||||
}
|
||||
cal.css({left: left + 'px', top: top + 'px'});
|
||||
if (cal.data('colorpicker').onShow.apply(this, [cal.get(0)]) != false) {
|
||||
cal.show();
|
||||
}
|
||||
$(document).bind('mousedown', {cal: cal}, hide);
|
||||
return false;
|
||||
},
|
||||
hide = function (ev) {
|
||||
if (!isChildOf(ev.data.cal.get(0), ev.target, ev.data.cal.get(0))) {
|
||||
if (ev.data.cal.data('colorpicker').onHide.apply(this, [ev.data.cal.get(0)]) != false) {
|
||||
ev.data.cal.hide();
|
||||
}
|
||||
$(document).unbind('mousedown', hide);
|
||||
}
|
||||
},
|
||||
isChildOf = function(parentEl, el, container) {
|
||||
if (parentEl == el) {
|
||||
return true;
|
||||
}
|
||||
if (parentEl.contains) {
|
||||
return parentEl.contains(el);
|
||||
}
|
||||
if ( parentEl.compareDocumentPosition ) {
|
||||
return !!(parentEl.compareDocumentPosition(el) & 16);
|
||||
}
|
||||
var prEl = el.parentNode;
|
||||
while(prEl && prEl != container) {
|
||||
if (prEl == parentEl)
|
||||
return true;
|
||||
prEl = prEl.parentNode;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
getViewport = function () {
|
||||
var m = document.compatMode == 'CSS1Compat';
|
||||
return {
|
||||
l : window.pageXOffset || (m ? document.documentElement.scrollLeft : document.body.scrollLeft),
|
||||
t : window.pageYOffset || (m ? document.documentElement.scrollTop : document.body.scrollTop),
|
||||
w : window.innerWidth || (m ? document.documentElement.clientWidth : document.body.clientWidth),
|
||||
h : window.innerHeight || (m ? document.documentElement.clientHeight : document.body.clientHeight)
|
||||
};
|
||||
},
|
||||
fixHSB = function (hsb) {
|
||||
return {
|
||||
h: Math.min(360, Math.max(0, hsb.h)),
|
||||
s: Math.min(100, Math.max(0, hsb.s)),
|
||||
b: Math.min(100, Math.max(0, hsb.b))
|
||||
};
|
||||
},
|
||||
fixRGB = function (rgb) {
|
||||
return {
|
||||
r: Math.min(255, Math.max(0, rgb.r)),
|
||||
g: Math.min(255, Math.max(0, rgb.g)),
|
||||
b: Math.min(255, Math.max(0, rgb.b))
|
||||
};
|
||||
},
|
||||
fixHex = function (hex) {
|
||||
var len = 6 - hex.length;
|
||||
if (len > 0) {
|
||||
var o = [];
|
||||
for (var i=0; i<len; i++) {
|
||||
o.push('0');
|
||||
}
|
||||
o.push(hex);
|
||||
hex = o.join('');
|
||||
}
|
||||
return hex;
|
||||
},
|
||||
HexToRGB = function (hex) {
|
||||
var hex = parseInt(((hex.indexOf('#') > -1) ? hex.substring(1) : hex), 16);
|
||||
return {r: hex >> 16, g: (hex & 0x00FF00) >> 8, b: (hex & 0x0000FF)};
|
||||
},
|
||||
HexToHSB = function (hex) {
|
||||
return RGBToHSB(HexToRGB(hex));
|
||||
},
|
||||
RGBToHSB = function (rgb) {
|
||||
var hsb = {
|
||||
h: 0,
|
||||
s: 0,
|
||||
b: 0
|
||||
};
|
||||
var min = Math.min(rgb.r, rgb.g, rgb.b);
|
||||
var max = Math.max(rgb.r, rgb.g, rgb.b);
|
||||
var delta = max - min;
|
||||
hsb.b = max;
|
||||
if (max != 0) {
|
||||
|
||||
}
|
||||
hsb.s = max != 0 ? 255 * delta / max : 0;
|
||||
if (hsb.s != 0) {
|
||||
if (rgb.r == max) {
|
||||
hsb.h = (rgb.g - rgb.b) / delta;
|
||||
} else if (rgb.g == max) {
|
||||
hsb.h = 2 + (rgb.b - rgb.r) / delta;
|
||||
} else {
|
||||
hsb.h = 4 + (rgb.r - rgb.g) / delta;
|
||||
}
|
||||
} else {
|
||||
hsb.h = -1;
|
||||
}
|
||||
hsb.h *= 60;
|
||||
if (hsb.h < 0) {
|
||||
hsb.h += 360;
|
||||
}
|
||||
hsb.s *= 100/255;
|
||||
hsb.b *= 100/255;
|
||||
return hsb;
|
||||
},
|
||||
HSBToRGB = function (hsb) {
|
||||
var rgb = {};
|
||||
var h = Math.round(hsb.h);
|
||||
var s = Math.round(hsb.s*255/100);
|
||||
var v = Math.round(hsb.b*255/100);
|
||||
if(s == 0) {
|
||||
rgb.r = rgb.g = rgb.b = v;
|
||||
} else {
|
||||
var t1 = v;
|
||||
var t2 = (255-s)*v/255;
|
||||
var t3 = (t1-t2)*(h%60)/60;
|
||||
if(h==360) h = 0;
|
||||
if(h<60) {rgb.r=t1; rgb.b=t2; rgb.g=t2+t3}
|
||||
else if(h<120) {rgb.g=t1; rgb.b=t2; rgb.r=t1-t3}
|
||||
else if(h<180) {rgb.g=t1; rgb.r=t2; rgb.b=t2+t3}
|
||||
else if(h<240) {rgb.b=t1; rgb.r=t2; rgb.g=t1-t3}
|
||||
else if(h<300) {rgb.b=t1; rgb.g=t2; rgb.r=t2+t3}
|
||||
else if(h<360) {rgb.r=t1; rgb.g=t2; rgb.b=t1-t3}
|
||||
else {rgb.r=0; rgb.g=0; rgb.b=0}
|
||||
}
|
||||
return {r:Math.round(rgb.r), g:Math.round(rgb.g), b:Math.round(rgb.b)};
|
||||
},
|
||||
RGBToHex = function (rgb) {
|
||||
var hex = [
|
||||
rgb.r.toString(16),
|
||||
rgb.g.toString(16),
|
||||
rgb.b.toString(16)
|
||||
];
|
||||
$.each(hex, function (nr, val) {
|
||||
if (val.length == 1) {
|
||||
hex[nr] = '0' + val;
|
||||
}
|
||||
});
|
||||
return hex.join('');
|
||||
},
|
||||
HSBToHex = function (hsb) {
|
||||
return RGBToHex(HSBToRGB(hsb));
|
||||
},
|
||||
restoreOriginal = function () {
|
||||
var cal = $(this).parent();
|
||||
var col = cal.data('colorpicker').origColor;
|
||||
cal.data('colorpicker').color = col;
|
||||
fillRGBFields(col, cal.get(0));
|
||||
fillHexFields(col, cal.get(0));
|
||||
fillHSBFields(col, cal.get(0));
|
||||
setSelector(col, cal.get(0));
|
||||
setHue(col, cal.get(0));
|
||||
setNewColor(col, cal.get(0));
|
||||
};
|
||||
return {
|
||||
init: function (opt) {
|
||||
opt = $.extend({}, defaults, opt||{});
|
||||
if (typeof opt.color == 'string') {
|
||||
opt.color = HexToHSB(opt.color);
|
||||
} else if (opt.color.r != undefined && opt.color.g != undefined && opt.color.b != undefined) {
|
||||
opt.color = RGBToHSB(opt.color);
|
||||
} else if (opt.color.h != undefined && opt.color.s != undefined && opt.color.b != undefined) {
|
||||
opt.color = fixHSB(opt.color);
|
||||
} else {
|
||||
return this;
|
||||
}
|
||||
return this.each(function () {
|
||||
if (!$(this).data('colorpickerId')) {
|
||||
var options = $.extend({}, opt);
|
||||
options.origColor = opt.color;
|
||||
var id = 'collorpicker_' + parseInt(Math.random() * 1000);
|
||||
$(this).data('colorpickerId', id);
|
||||
var cal = $(tpl).attr('id', id);
|
||||
if (options.flat) {
|
||||
cal.appendTo(this).show();
|
||||
} else {
|
||||
cal.appendTo(document.body);
|
||||
}
|
||||
options.fields = cal
|
||||
.find('input')
|
||||
.bind('keyup', keyDown)
|
||||
.bind('change', change)
|
||||
.bind('blur', blur)
|
||||
.bind('focus', focus);
|
||||
cal
|
||||
.find('span').bind('mousedown', downIncrement).end()
|
||||
.find('>div.colorpicker_current_color').bind('click', restoreOriginal);
|
||||
options.selector = cal.find('div.colorpicker_color').bind('mousedown', downSelector);
|
||||
options.selectorIndic = options.selector.find('div div');
|
||||
options.el = this;
|
||||
options.hue = cal.find('div.colorpicker_hue div');
|
||||
cal.find('div.colorpicker_hue').bind('mousedown', downHue);
|
||||
options.newColor = cal.find('div.colorpicker_new_color');
|
||||
options.currentColor = cal.find('div.colorpicker_current_color');
|
||||
cal.data('colorpicker', options);
|
||||
cal.find('div.colorpicker_submit')
|
||||
.bind('mouseenter', enterSubmit)
|
||||
.bind('mouseleave', leaveSubmit)
|
||||
.bind('click', clickSubmit);
|
||||
fillRGBFields(options.color, cal.get(0));
|
||||
fillHSBFields(options.color, cal.get(0));
|
||||
fillHexFields(options.color, cal.get(0));
|
||||
setHue(options.color, cal.get(0));
|
||||
setSelector(options.color, cal.get(0));
|
||||
setCurrentColor(options.color, cal.get(0));
|
||||
setNewColor(options.color, cal.get(0));
|
||||
if (options.flat) {
|
||||
cal.css({
|
||||
position: 'relative',
|
||||
display: 'block'
|
||||
});
|
||||
} else {
|
||||
$(this).bind(options.eventName, show);
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
showPicker: function() {
|
||||
return this.each( function () {
|
||||
if ($(this).data('colorpickerId')) {
|
||||
show.apply(this);
|
||||
}
|
||||
});
|
||||
},
|
||||
hidePicker: function() {
|
||||
return this.each( function () {
|
||||
if ($(this).data('colorpickerId')) {
|
||||
$('#' + $(this).data('colorpickerId')).hide();
|
||||
}
|
||||
});
|
||||
},
|
||||
setColor: function(col) {
|
||||
if (typeof col == 'string') {
|
||||
col = HexToHSB(col);
|
||||
} else if (col.r != undefined && col.g != undefined && col.b != undefined) {
|
||||
col = RGBToHSB(col);
|
||||
} else if (col.h != undefined && col.s != undefined && col.b != undefined) {
|
||||
col = fixHSB(col);
|
||||
} else {
|
||||
return this;
|
||||
}
|
||||
return this.each(function(){
|
||||
if ($(this).data('colorpickerId')) {
|
||||
var cal = $('#' + $(this).data('colorpickerId'));
|
||||
cal.data('colorpicker').color = col;
|
||||
cal.data('colorpicker').origColor = col;
|
||||
fillRGBFields(col, cal.get(0));
|
||||
fillHSBFields(col, cal.get(0));
|
||||
fillHexFields(col, cal.get(0));
|
||||
setHue(col, cal.get(0));
|
||||
setSelector(col, cal.get(0));
|
||||
setCurrentColor(col, cal.get(0));
|
||||
setNewColor(col, cal.get(0));
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
}();
|
||||
$.fn.extend({
|
||||
ColorPicker: ColorPicker.init,
|
||||
ColorPickerHide: ColorPicker.hidePicker,
|
||||
ColorPickerShow: ColorPicker.showPicker,
|
||||
ColorPickerSetColor: ColorPicker.setColor
|
||||
});
|
||||
})(jQuery)
|
||||
|
|
@ -1,34 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* Zoomimage
|
||||
* Author: Stefan Petre www.eyecon.ro
|
||||
*
|
||||
*/
|
||||
(function($){
|
||||
var EYE = window.EYE = function() {
|
||||
var _registered = {
|
||||
init: []
|
||||
};
|
||||
return {
|
||||
init: function() {
|
||||
$.each(_registered.init, function(nr, fn){
|
||||
fn.call();
|
||||
});
|
||||
},
|
||||
extend: function(prop) {
|
||||
for (var i in prop) {
|
||||
if (prop[i] != undefined) {
|
||||
this[i] = prop[i];
|
||||
}
|
||||
}
|
||||
},
|
||||
register: function(fn, type) {
|
||||
if (!_registered[type]) {
|
||||
_registered[type] = [];
|
||||
}
|
||||
_registered[type].push(fn);
|
||||
}
|
||||
};
|
||||
}();
|
||||
$(EYE.init);
|
||||
})(jQuery);
|
||||
4376
files/js/jquery.js
vendored
4376
files/js/jquery.js
vendored
File diff suppressed because it is too large
Load diff
|
|
@ -1,67 +0,0 @@
|
|||
(function($){
|
||||
var initLayout = function() {
|
||||
var hash = window.location.hash.replace('#', '');
|
||||
var currentTab = $('ul.navigationTabs a')
|
||||
.bind('click', showTab)
|
||||
.filter('a[rel=' + hash + ']');
|
||||
if (currentTab.size() == 0) {
|
||||
currentTab = $('ul.navigationTabs a:first');
|
||||
}
|
||||
showTab.apply(currentTab.get(0));
|
||||
$('#colorpickerHolder').ColorPicker({flat: true});
|
||||
$('#colorpickerHolder2').ColorPicker({
|
||||
flat: true,
|
||||
color: '#00ff00',
|
||||
onSubmit: function(hsb, hex, rgb) {
|
||||
$('#colorSelector2 div').css('backgroundColor', '#' + hex);
|
||||
}
|
||||
});
|
||||
$('#colorpickerHolder2>div').css('position', 'absolute');
|
||||
var widt = false;
|
||||
$('#colorSelector2').bind('click', function() {
|
||||
$('#colorpickerHolder2').stop().animate({height: widt ? 0 : 173}, 500);
|
||||
widt = !widt;
|
||||
});
|
||||
$('#colorpickerField1, #colorpickerField2, #colorpickerField3').ColorPicker({
|
||||
onSubmit: function(hsb, hex, rgb, el) {
|
||||
$(el).val(hex);
|
||||
$(el).ColorPickerHide();
|
||||
},
|
||||
onBeforeShow: function () {
|
||||
$(this).ColorPickerSetColor(this.value);
|
||||
}
|
||||
})
|
||||
.bind('keyup', function(){
|
||||
$(this).ColorPickerSetColor(this.value);
|
||||
});
|
||||
$('#colorSelector').ColorPicker({
|
||||
color: '#0000ff',
|
||||
onShow: function (colpkr) {
|
||||
$(colpkr).fadeIn(500);
|
||||
return false;
|
||||
},
|
||||
onHide: function (colpkr) {
|
||||
$(colpkr).fadeOut(500);
|
||||
return false;
|
||||
},
|
||||
onChange: function (hsb, hex, rgb) {
|
||||
$('#colorSelector div').css('backgroundColor', '#' + hex);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
var showTab = function(e) {
|
||||
var tabIndex = $('ul.navigationTabs a')
|
||||
.removeClass('active')
|
||||
.index(this);
|
||||
$(this)
|
||||
.addClass('active')
|
||||
.blur();
|
||||
$('div.tab')
|
||||
.hide()
|
||||
.eq(tabIndex)
|
||||
.show();
|
||||
};
|
||||
|
||||
EYE.register(initLayout, 'init');
|
||||
})(jQuery)
|
||||
|
|
@ -1,252 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* Utilities
|
||||
* Author: Stefan Petre www.eyecon.ro
|
||||
*
|
||||
*/
|
||||
(function($) {
|
||||
EYE.extend({
|
||||
getPosition : function(e, forceIt)
|
||||
{
|
||||
var x = 0;
|
||||
var y = 0;
|
||||
var es = e.style;
|
||||
var restoreStyles = false;
|
||||
if (forceIt && jQuery.curCSS(e,'display') == 'none') {
|
||||
var oldVisibility = es.visibility;
|
||||
var oldPosition = es.position;
|
||||
restoreStyles = true;
|
||||
es.visibility = 'hidden';
|
||||
es.display = 'block';
|
||||
es.position = 'absolute';
|
||||
}
|
||||
var el = e;
|
||||
if (el.getBoundingClientRect) { // IE
|
||||
var box = el.getBoundingClientRect();
|
||||
x = box.left + Math.max(document.documentElement.scrollLeft, document.body.scrollLeft) - 2;
|
||||
y = box.top + Math.max(document.documentElement.scrollTop, document.body.scrollTop) - 2;
|
||||
} else {
|
||||
x = el.offsetLeft;
|
||||
y = el.offsetTop;
|
||||
el = el.offsetParent;
|
||||
if (e != el) {
|
||||
while (el) {
|
||||
x += el.offsetLeft;
|
||||
y += el.offsetTop;
|
||||
el = el.offsetParent;
|
||||
}
|
||||
}
|
||||
if (jQuery.browser.safari && jQuery.curCSS(e, 'position') == 'absolute' ) {
|
||||
x -= document.body.offsetLeft;
|
||||
y -= document.body.offsetTop;
|
||||
}
|
||||
el = e.parentNode;
|
||||
while (el && el.tagName.toUpperCase() != 'BODY' && el.tagName.toUpperCase() != 'HTML')
|
||||
{
|
||||
if (jQuery.curCSS(el, 'display') != 'inline') {
|
||||
x -= el.scrollLeft;
|
||||
y -= el.scrollTop;
|
||||
}
|
||||
el = el.parentNode;
|
||||
}
|
||||
}
|
||||
if (restoreStyles == true) {
|
||||
es.display = 'none';
|
||||
es.position = oldPosition;
|
||||
es.visibility = oldVisibility;
|
||||
}
|
||||
return {x:x, y:y};
|
||||
},
|
||||
getSize : function(e)
|
||||
{
|
||||
var w = parseInt(jQuery.curCSS(e,'width'), 10);
|
||||
var h = parseInt(jQuery.curCSS(e,'height'), 10);
|
||||
var wb = 0;
|
||||
var hb = 0;
|
||||
if (jQuery.curCSS(e, 'display') != 'none') {
|
||||
wb = e.offsetWidth;
|
||||
hb = e.offsetHeight;
|
||||
} else {
|
||||
var es = e.style;
|
||||
var oldVisibility = es.visibility;
|
||||
var oldPosition = es.position;
|
||||
es.visibility = 'hidden';
|
||||
es.display = 'block';
|
||||
es.position = 'absolute';
|
||||
wb = e.offsetWidth;
|
||||
hb = e.offsetHeight;
|
||||
es.display = 'none';
|
||||
es.position = oldPosition;
|
||||
es.visibility = oldVisibility;
|
||||
}
|
||||
return {w:w, h:h, wb:wb, hb:hb};
|
||||
},
|
||||
getClient : function(e)
|
||||
{
|
||||
var h, w;
|
||||
if (e) {
|
||||
w = e.clientWidth;
|
||||
h = e.clientHeight;
|
||||
} else {
|
||||
var de = document.documentElement;
|
||||
w = window.innerWidth || self.innerWidth || (de&&de.clientWidth) || document.body.clientWidth;
|
||||
h = window.innerHeight || self.innerHeight || (de&&de.clientHeight) || document.body.clientHeight;
|
||||
}
|
||||
return {w:w,h:h};
|
||||
},
|
||||
getScroll : function (e)
|
||||
{
|
||||
var t=0, l=0, w=0, h=0, iw=0, ih=0;
|
||||
if (e && e.nodeName.toLowerCase() != 'body') {
|
||||
t = e.scrollTop;
|
||||
l = e.scrollLeft;
|
||||
w = e.scrollWidth;
|
||||
h = e.scrollHeight;
|
||||
} else {
|
||||
if (document.documentElement) {
|
||||
t = document.documentElement.scrollTop;
|
||||
l = document.documentElement.scrollLeft;
|
||||
w = document.documentElement.scrollWidth;
|
||||
h = document.documentElement.scrollHeight;
|
||||
} else if (document.body) {
|
||||
t = document.body.scrollTop;
|
||||
l = document.body.scrollLeft;
|
||||
w = document.body.scrollWidth;
|
||||
h = document.body.scrollHeight;
|
||||
}
|
||||
if (typeof pageYOffset != 'undefined') {
|
||||
t = pageYOffset;
|
||||
l = pageXOffset;
|
||||
}
|
||||
iw = self.innerWidth||document.documentElement.clientWidth||document.body.clientWidth||0;
|
||||
ih = self.innerHeight||document.documentElement.clientHeight||document.body.clientHeight||0;
|
||||
}
|
||||
return { t: t, l: l, w: w, h: h, iw: iw, ih: ih };
|
||||
},
|
||||
getMargins : function(e, toInteger)
|
||||
{
|
||||
var t = jQuery.curCSS(e,'marginTop') || '';
|
||||
var r = jQuery.curCSS(e,'marginRight') || '';
|
||||
var b = jQuery.curCSS(e,'marginBottom') || '';
|
||||
var l = jQuery.curCSS(e,'marginLeft') || '';
|
||||
if (toInteger)
|
||||
return {
|
||||
t: parseInt(t, 10)||0,
|
||||
r: parseInt(r, 10)||0,
|
||||
b: parseInt(b, 10)||0,
|
||||
l: parseInt(l, 10)
|
||||
};
|
||||
else
|
||||
return {t: t, r: r, b: b, l: l};
|
||||
},
|
||||
getPadding : function(e, toInteger)
|
||||
{
|
||||
var t = jQuery.curCSS(e,'paddingTop') || '';
|
||||
var r = jQuery.curCSS(e,'paddingRight') || '';
|
||||
var b = jQuery.curCSS(e,'paddingBottom') || '';
|
||||
var l = jQuery.curCSS(e,'paddingLeft') || '';
|
||||
if (toInteger)
|
||||
return {
|
||||
t: parseInt(t, 10)||0,
|
||||
r: parseInt(r, 10)||0,
|
||||
b: parseInt(b, 10)||0,
|
||||
l: parseInt(l, 10)
|
||||
};
|
||||
else
|
||||
return {t: t, r: r, b: b, l: l};
|
||||
},
|
||||
getBorder : function(e, toInteger)
|
||||
{
|
||||
var t = jQuery.curCSS(e,'borderTopWidth') || '';
|
||||
var r = jQuery.curCSS(e,'borderRightWidth') || '';
|
||||
var b = jQuery.curCSS(e,'borderBottomWidth') || '';
|
||||
var l = jQuery.curCSS(e,'borderLeftWidth') || '';
|
||||
if (toInteger)
|
||||
return {
|
||||
t: parseInt(t, 10)||0,
|
||||
r: parseInt(r, 10)||0,
|
||||
b: parseInt(b, 10)||0,
|
||||
l: parseInt(l, 10)||0
|
||||
};
|
||||
else
|
||||
return {t: t, r: r, b: b, l: l};
|
||||
},
|
||||
traverseDOM : function(nodeEl, func)
|
||||
{
|
||||
func(nodeEl);
|
||||
nodeEl = nodeEl.firstChild;
|
||||
while(nodeEl){
|
||||
EYE.traverseDOM(nodeEl, func);
|
||||
nodeEl = nodeEl.nextSibling;
|
||||
}
|
||||
},
|
||||
getInnerWidth : function(el, scroll) {
|
||||
var offsetW = el.offsetWidth;
|
||||
return scroll ? Math.max(el.scrollWidth,offsetW) - offsetW + el.clientWidth:el.clientWidth;
|
||||
},
|
||||
getInnerHeight : function(el, scroll) {
|
||||
var offsetH = el.offsetHeight;
|
||||
return scroll ? Math.max(el.scrollHeight,offsetH) - offsetH + el.clientHeight:el.clientHeight;
|
||||
},
|
||||
getExtraWidth : function(el) {
|
||||
if($.boxModel)
|
||||
return (parseInt($.curCSS(el, 'paddingLeft'))||0)
|
||||
+ (parseInt($.curCSS(el, 'paddingRight'))||0)
|
||||
+ (parseInt($.curCSS(el, 'borderLeftWidth'))||0)
|
||||
+ (parseInt($.curCSS(el, 'borderRightWidth'))||0);
|
||||
return 0;
|
||||
},
|
||||
getExtraHeight : function(el) {
|
||||
if($.boxModel)
|
||||
return (parseInt($.curCSS(el, 'paddingTop'))||0)
|
||||
+ (parseInt($.curCSS(el, 'paddingBottom'))||0)
|
||||
+ (parseInt($.curCSS(el, 'borderTopWidth'))||0)
|
||||
+ (parseInt($.curCSS(el, 'borderBottomWidth'))||0);
|
||||
return 0;
|
||||
},
|
||||
isChildOf: function(parentEl, el, container) {
|
||||
if (parentEl == el) {
|
||||
return true;
|
||||
}
|
||||
if (!el || !el.nodeType || el.nodeType != 1) {
|
||||
return false;
|
||||
}
|
||||
if (parentEl.contains && !$.browser.safari) {
|
||||
return parentEl.contains(el);
|
||||
}
|
||||
if ( parentEl.compareDocumentPosition ) {
|
||||
return !!(parentEl.compareDocumentPosition(el) & 16);
|
||||
}
|
||||
var prEl = el.parentNode;
|
||||
while(prEl && prEl != container) {
|
||||
if (prEl == parentEl)
|
||||
return true;
|
||||
prEl = prEl.parentNode;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
centerEl : function(el, axis)
|
||||
{
|
||||
var clientScroll = EYE.getScroll();
|
||||
var size = EYE.getSize(el);
|
||||
if (!axis || axis == 'vertically')
|
||||
$(el).css(
|
||||
{
|
||||
top: clientScroll.t + ((Math.min(clientScroll.h,clientScroll.ih) - size.hb)/2) + 'px'
|
||||
}
|
||||
);
|
||||
if (!axis || axis == 'horizontally')
|
||||
$(el).css(
|
||||
{
|
||||
left: clientScroll.l + ((Math.min(clientScroll.w,clientScroll.iw) - size.wb)/2) + 'px'
|
||||
}
|
||||
);
|
||||
}
|
||||
});
|
||||
if (!$.easing.easeout) {
|
||||
$.easing.easeout = function(p, n, firstNum, delta, duration) {
|
||||
return -delta * ((n=n/duration-1)*n*n*n - 1) + firstNum;
|
||||
};
|
||||
}
|
||||
|
||||
})(jQuery);
|
||||
481
files/spectrum.css
Normal file
481
files/spectrum.css
Normal file
|
|
@ -0,0 +1,481 @@
|
|||
/***
|
||||
Spectrum Colorpicker v1.1.1
|
||||
https://github.com/bgrins/spectrum
|
||||
Author: Brian Grinstead
|
||||
License: MIT
|
||||
***/
|
||||
|
||||
.sp-container {
|
||||
position:absolute;
|
||||
top:0;
|
||||
left:0;
|
||||
display:inline-block;
|
||||
*display: inline;
|
||||
*zoom: 1;
|
||||
z-index: 2147483647;
|
||||
overflow: hidden;
|
||||
}
|
||||
.sp-container.sp-flat {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* http://ansciath.tumblr.com/post/7347495869/css-aspect-ratio */
|
||||
.sp-top {
|
||||
position:relative;
|
||||
width: 100%;
|
||||
display:inline-block;
|
||||
}
|
||||
.sp-top-inner {
|
||||
position:absolute;
|
||||
top:0;
|
||||
left:0;
|
||||
bottom:0;
|
||||
right:0;
|
||||
}
|
||||
.sp-color {
|
||||
position: absolute;
|
||||
top:0;
|
||||
left:0;
|
||||
bottom:0;
|
||||
right:20%;
|
||||
}
|
||||
.sp-hue {
|
||||
position: absolute;
|
||||
top:0;
|
||||
right:0;
|
||||
bottom:0;
|
||||
left:84%;
|
||||
height: 100%;
|
||||
}
|
||||
.sp-fill {
|
||||
padding-top: 80%;
|
||||
}
|
||||
.sp-sat, .sp-val {
|
||||
position: absolute;
|
||||
top:0;
|
||||
left:0;
|
||||
right:0;
|
||||
bottom:0;
|
||||
}
|
||||
|
||||
.sp-alpha-enabled .sp-top
|
||||
{
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
.sp-alpha-enabled .sp-alpha
|
||||
{
|
||||
display: block;
|
||||
}
|
||||
|
||||
.sp-alpha-handle
|
||||
{
|
||||
position:absolute;
|
||||
top:-4px;
|
||||
bottom: -4px;
|
||||
width: 6px;
|
||||
left: 50%;
|
||||
cursor: pointer;
|
||||
border: 1px solid black;
|
||||
background: white;
|
||||
opacity: .8;
|
||||
}
|
||||
|
||||
.sp-alpha
|
||||
{
|
||||
display: none;
|
||||
position: absolute;
|
||||
bottom: -14px;
|
||||
right: 0;
|
||||
left: 0;
|
||||
height: 8px;
|
||||
}
|
||||
.sp-alpha-inner{
|
||||
border: solid 1px #333;
|
||||
}
|
||||
|
||||
/* Don't allow text selection */
|
||||
.sp-container, .sp-replacer, .sp-preview, .sp-dragger, .sp-slider, .sp-alpha, .sp-alpha-handle, .sp-container.sp-dragging .sp-input, .sp-container button {
|
||||
-webkit-user-select:none;
|
||||
-moz-user-select: -moz-none;
|
||||
-o-user-select:none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.sp-container.sp-input-disabled .sp-input-container {
|
||||
display: none;
|
||||
}
|
||||
.sp-container.sp-buttons-disabled .sp-button-container {
|
||||
display: none;
|
||||
}
|
||||
.sp-palette-only .sp-picker-container {
|
||||
display: none;
|
||||
}
|
||||
.sp-palette-disabled .sp-palette-container {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sp-initial-disabled .sp-initial {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
/* Gradients for hue, saturation and value instead of images. Not pretty... but it works */
|
||||
.sp-sat {
|
||||
background-image: -webkit-gradient(linear, 0 0, 100% 0, from(#FFF), to(rgba(204, 154, 129, 0)));
|
||||
background-image: -webkit-linear-gradient(left, #FFF, rgba(204, 154, 129, 0));
|
||||
background-image: -moz-linear-gradient(left, #fff, rgba(204, 154, 129, 0));
|
||||
background-image: -o-linear-gradient(left, #fff, rgba(204, 154, 129, 0));
|
||||
background-image: -ms-linear-gradient(left, #fff, rgba(204, 154, 129, 0));
|
||||
background-image: linear-gradient(to right, #fff, rgba(204, 154, 129, 0));
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr=#FFFFFFFF, endColorstr=#00CC9A81)";
|
||||
filter : progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr='#FFFFFFFF', endColorstr='#00CC9A81');
|
||||
}
|
||||
.sp-val {
|
||||
background-image: -webkit-gradient(linear, 0 100%, 0 0, from(#000000), to(rgba(204, 154, 129, 0)));
|
||||
background-image: -webkit-linear-gradient(bottom, #000000, rgba(204, 154, 129, 0));
|
||||
background-image: -moz-linear-gradient(bottom, #000, rgba(204, 154, 129, 0));
|
||||
background-image: -o-linear-gradient(bottom, #000, rgba(204, 154, 129, 0));
|
||||
background-image: -ms-linear-gradient(bottom, #000, rgba(204, 154, 129, 0));
|
||||
background-image: linear-gradient(to top, #000, rgba(204, 154, 129, 0));
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00CC9A81, endColorstr=#FF000000)";
|
||||
filter : progid:DXImageTransform.Microsoft.gradient(startColorstr='#00CC9A81', endColorstr='#FF000000');
|
||||
}
|
||||
|
||||
.sp-hue {
|
||||
background: -moz-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
|
||||
background: -ms-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
|
||||
background: -o-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
|
||||
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));
|
||||
background: -webkit-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
|
||||
}
|
||||
|
||||
/* IE filters do not support multiple color stops.
|
||||
Generate 6 divs, line them up, and do two color gradients for each.
|
||||
Yes, really.
|
||||
*/
|
||||
|
||||
.sp-1 {
|
||||
height:17%;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0000', endColorstr='#ffff00');
|
||||
}
|
||||
.sp-2 {
|
||||
height:16%;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff00', endColorstr='#00ff00');
|
||||
}
|
||||
.sp-3 {
|
||||
height:17%;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ff00', endColorstr='#00ffff');
|
||||
}
|
||||
.sp-4 {
|
||||
height:17%;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffff', endColorstr='#0000ff');
|
||||
}
|
||||
.sp-5 {
|
||||
height:16%;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0000ff', endColorstr='#ff00ff');
|
||||
}
|
||||
.sp-6 {
|
||||
height:17%;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff00ff', endColorstr='#ff0000');
|
||||
}
|
||||
|
||||
.sp-hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Clearfix hack */
|
||||
.sp-cf:before, .sp-cf:after { content: ""; display: table; }
|
||||
.sp-cf:after { clear: both; }
|
||||
.sp-cf { *zoom: 1; }
|
||||
|
||||
/* Mobile devices, make hue slider bigger so it is easier to slide */
|
||||
@media (max-device-width: 480px) {
|
||||
.sp-color { right: 40%; }
|
||||
.sp-hue { left: 63%; }
|
||||
.sp-fill { padding-top: 60%; }
|
||||
}
|
||||
|
||||
.sp-dragger {
|
||||
border-radius: 5px;
|
||||
height: 5px;
|
||||
width: 5px;
|
||||
border: 1px solid #fff;
|
||||
background: #000;
|
||||
cursor: pointer;
|
||||
position:absolute;
|
||||
top:0;
|
||||
left: 0;
|
||||
}
|
||||
.sp-slider {
|
||||
position: absolute;
|
||||
top:0;
|
||||
cursor:pointer;
|
||||
height: 3px;
|
||||
left: -1px;
|
||||
right: -1px;
|
||||
border: 1px solid #000;
|
||||
background: white;
|
||||
opacity: .8;
|
||||
}
|
||||
|
||||
/* Basic display options (colors, fonts, global widths) */
|
||||
.sp-container {
|
||||
border-radius: 0;
|
||||
background-color: #ECECEC;
|
||||
border: solid 1px #f0c49B;
|
||||
padding: 0;
|
||||
}
|
||||
.sp-container, .sp-container button, .sp-container input, .sp-color, .sp-hue
|
||||
{
|
||||
font: normal 12px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
-ms-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.sp-top
|
||||
{
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
.sp-color, .sp-hue
|
||||
{
|
||||
border: solid 1px #666;
|
||||
}
|
||||
|
||||
/* Input */
|
||||
.sp-input-container {
|
||||
float:right;
|
||||
width: 100px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.sp-initial-disabled .sp-input-container {
|
||||
width: 100%;
|
||||
}
|
||||
.sp-input {
|
||||
font-size: 12px !important;
|
||||
border: 1px inset;
|
||||
padding: 4px 5px;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
background:transparent;
|
||||
border-radius: 3px;
|
||||
color: #222;
|
||||
}
|
||||
.sp-input:focus {
|
||||
border: 1px solid orange;
|
||||
}
|
||||
.sp-input.sp-validation-error
|
||||
{
|
||||
border: 1px solid red;
|
||||
background: #fdd;
|
||||
}
|
||||
.sp-picker-container , .sp-palette-container
|
||||
{
|
||||
float:left;
|
||||
position: relative;
|
||||
padding: 10px;
|
||||
padding-bottom: 300px;
|
||||
margin-bottom: -290px;
|
||||
}
|
||||
.sp-picker-container
|
||||
{
|
||||
width: 172px;
|
||||
border-left: solid 1px #fff;
|
||||
}
|
||||
|
||||
/* Palettes */
|
||||
.sp-palette-container
|
||||
{
|
||||
border-right: solid 1px #ccc;
|
||||
}
|
||||
|
||||
.sp-palette .sp-thumb-el {
|
||||
display: block;
|
||||
position:relative;
|
||||
float:left;
|
||||
width: 24px;
|
||||
height: 15px;
|
||||
margin: 3px;
|
||||
cursor: pointer;
|
||||
border:solid 2px transparent;
|
||||
}
|
||||
.sp-palette .sp-thumb-el:hover, .sp-palette .sp-thumb-el.sp-thumb-active {
|
||||
border-color: orange;
|
||||
}
|
||||
.sp-thumb-el
|
||||
{
|
||||
position:relative;
|
||||
}
|
||||
|
||||
/* Initial */
|
||||
.sp-initial
|
||||
{
|
||||
float: left;
|
||||
border: solid 1px #333;
|
||||
}
|
||||
.sp-initial span {
|
||||
width: 30px;
|
||||
height: 25px;
|
||||
border:none;
|
||||
display:block;
|
||||
float:left;
|
||||
margin:0;
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
.sp-button-container {
|
||||
float: right;
|
||||
}
|
||||
|
||||
/* Replacer (the little preview div that shows up instead of the <input>) */
|
||||
.sp-replacer {
|
||||
margin:0;
|
||||
overflow:hidden;
|
||||
cursor:pointer;
|
||||
padding: 4px;
|
||||
display:inline-block;
|
||||
*zoom: 1;
|
||||
*display: inline;
|
||||
border: solid 1px #91765d;
|
||||
background: #eee;
|
||||
color: #333;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.sp-replacer:hover, .sp-replacer.sp-active {
|
||||
border-color: #F0C49B;
|
||||
color: #111;
|
||||
}
|
||||
.sp-replacer.sp-disabled {
|
||||
cursor:default;
|
||||
border-color: silver;
|
||||
color: silver;
|
||||
}
|
||||
.sp-dd {
|
||||
padding: 2px 0;
|
||||
height: 16px;
|
||||
line-height: 16px;
|
||||
float:left;
|
||||
font-size:10px;
|
||||
}
|
||||
.sp-preview
|
||||
{
|
||||
position:relative;
|
||||
width:25px;
|
||||
height: 20px;
|
||||
border: solid 1px #222;
|
||||
margin-right: 5px;
|
||||
float:left;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.sp-palette
|
||||
{
|
||||
*width: 220px;
|
||||
max-width: 220px;
|
||||
}
|
||||
.sp-palette .sp-thumb-el
|
||||
{
|
||||
width:16px;
|
||||
height: 16px;
|
||||
margin:2px 1px;
|
||||
border: solid 1px #d0d0d0;
|
||||
}
|
||||
|
||||
.sp-container
|
||||
{
|
||||
padding-bottom:0;
|
||||
}
|
||||
|
||||
|
||||
/* Buttons: http://hellohappy.org/css3-buttons/ */
|
||||
.sp-container button {
|
||||
background-color: #eeeeee;
|
||||
background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
|
||||
background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
|
||||
background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
|
||||
background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
|
||||
background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
|
||||
background-image: linear-gradient(to bottom, #eeeeee, #cccccc);
|
||||
border: 1px solid #ccc;
|
||||
border-bottom: 1px solid #bbb;
|
||||
border-radius: 3px;
|
||||
color: #333;
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
padding: 5px 4px;
|
||||
text-align: center;
|
||||
text-shadow: 0 1px 0 #eee;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.sp-container button:hover {
|
||||
background-color: #dddddd;
|
||||
background-image: -webkit-linear-gradient(top, #dddddd, #bbbbbb);
|
||||
background-image: -moz-linear-gradient(top, #dddddd, #bbbbbb);
|
||||
background-image: -ms-linear-gradient(top, #dddddd, #bbbbbb);
|
||||
background-image: -o-linear-gradient(top, #dddddd, #bbbbbb);
|
||||
background-image: -ms-linear-gradient(top, #dddddd, #bbbbbb);
|
||||
background-image: linear-gradient(to bottom, #dddddd, #bbbbbb);
|
||||
border: 1px solid #bbb;
|
||||
border-bottom: 1px solid #999;
|
||||
cursor: pointer;
|
||||
text-shadow: 0 1px 0 #ddd;
|
||||
}
|
||||
.sp-container button:active {
|
||||
border: 1px solid #aaa;
|
||||
border-bottom: 1px solid #888;
|
||||
-webkit-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
|
||||
-moz-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
|
||||
-ms-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
|
||||
-o-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
|
||||
box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
|
||||
}
|
||||
.sp-cancel
|
||||
{
|
||||
font-size: 11px;
|
||||
color: #d93f3f !important;
|
||||
margin:0;
|
||||
padding:2px;
|
||||
margin-right: 5px;
|
||||
vertical-align: middle;
|
||||
text-decoration:none;
|
||||
|
||||
}
|
||||
.sp-cancel:hover
|
||||
{
|
||||
color: #d93f3f !important;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
|
||||
.sp-palette span:hover, .sp-palette span.sp-thumb-active
|
||||
{
|
||||
border-color: #000;
|
||||
}
|
||||
|
||||
.sp-preview, .sp-alpha, .sp-thumb-el
|
||||
{
|
||||
position:relative;
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);
|
||||
}
|
||||
.sp-preview-inner, .sp-alpha-inner, .sp-thumb-inner
|
||||
{
|
||||
display:block;
|
||||
position:absolute;
|
||||
top:0;left:0;bottom:0;right:0;
|
||||
}
|
||||
|
||||
.sp-palette .sp-thumb-inner
|
||||
{
|
||||
background-position: 50% 50%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.sp-palette .sp-thumb-light.sp-thumb-active .sp-thumb-inner
|
||||
{
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAIVJREFUeNpiYBhsgJFMffxAXABlN5JruT4Q3wfi/0DsT64h8UD8HmpIPCWG/KemIfOJCUB+Aoacx6EGBZyHBqI+WsDCwuQ9mhxeg2A210Ntfo8klk9sOMijaURm7yc1UP2RNCMbKE9ODK1HM6iegYLkfx8pligC9lCD7KmRof0ZhjQACDAAceovrtpVBRkAAAAASUVORK5CYII=);
|
||||
}
|
||||
|
||||
.sp-palette .sp-thumb-dark.sp-thumb-active .sp-thumb-inner
|
||||
{
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAMdJREFUOE+tkgsNwzAMRMugEAahEAahEAZhEAqlEAZhEAohEAYh81X2dIm8fKpEspLGvudPOsUYpxE2BIJCroJmEW9qJ+MKaBFhEMNabSy9oIcIPwrB+afvAUFoK4H0tMaQ3XtlrggDhOVVMuT4E5MMG0FBbCEYzjYT7OxLEvIHQLY2zWwQ3D+9luyOQTfKDiFD3iUIfPk8VqrKjgAiSfGFPecrg6HN6m/iBcwiDAo7WiBeawa+Kwh7tZoSCGLMqwlSAzVDhoK+6vH4G0P5wdkAAAAASUVORK5CYII=);
|
||||
}
|
||||
28
files/spectrum.jquery.json
Normal file
28
files/spectrum.jquery.json
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
{
|
||||
"name": "spectrum",
|
||||
"version": "1.1.1",
|
||||
"title": "Spectrum Colorpicker",
|
||||
"description": "The No Hassle jQuery Colorpicker",
|
||||
"docs": "http://bgrins.github.com/spectrum",
|
||||
"homepage": "http://bgrins.github.com/spectrum",
|
||||
"demo": "http://jsfiddle.net/bgrins/ctkY3/",
|
||||
"author": {
|
||||
"name" : "Brian Grinstead",
|
||||
"email" : "briangrinstead@gmail.com",
|
||||
"url" : "http://briangrinstead.com/"
|
||||
},
|
||||
"keywords": [
|
||||
"color",
|
||||
"colorpicker",
|
||||
"ui"
|
||||
],
|
||||
"licenses": [
|
||||
{
|
||||
"type": "MIT",
|
||||
"url": "https://github.com/bgrins/spectrum/blob/master/LICENSE"
|
||||
}
|
||||
],
|
||||
"dependencies": {
|
||||
"jquery": ">=1.7.2"
|
||||
}
|
||||
}
|
||||
1888
files/spectrum.js
Normal file
1888
files/spectrum.js
Normal file
File diff suppressed because it is too large
Load diff
|
|
@ -1,23 +0,0 @@
|
|||
<head>
|
||||
|
||||
<link rel="stylesheet" href="/css/colorpicker.css" type="text/css" />
|
||||
|
||||
<script src="/js/jquery.js" ></script>
|
||||
<script src="/js/colorpicker.js" ></script>
|
||||
|
||||
<script>
|
||||
function submit_ajax(hsb, hex, rgb) {
|
||||
$.ajax({url: '/ajax',
|
||||
type: 'POST',
|
||||
data: rgb})
|
||||
}
|
||||
|
||||
$(function () {
|
||||
$('#colorpickerHolder').ColorPicker({flat: true, onChange: submit_ajax});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<p id="colorpickerHolder">
|
||||
</p>
|
||||
</body>
|
||||
Loading…
Add table
Reference in a new issue