mirror of
https://github.com/Lastorder-DC/rhymix.git
synced 2026-01-07 10:41:40 +09:00
Merge branch 'develop' into pr/new-config-format
This commit is contained in:
Kijin Sung
commit
78cb8aea17
73 changed files with 36336 additions and 42 deletions
|
|
@ -9,14 +9,49 @@ class JSONDisplayHandler
|
|||
* @param ModuleObject $oModule the module object
|
||||
* @return string
|
||||
*/
|
||||
function toDoc(&$oModule)
|
||||
public function toDoc($oModule)
|
||||
{
|
||||
$variables = $oModule->getVariables();
|
||||
$variables['error'] = $oModule->getError();
|
||||
$variables['message'] = $oModule->getMessage();
|
||||
return json_encode($variables);
|
||||
|
||||
$temp = array();
|
||||
foreach ($variables as $key => $value)
|
||||
{
|
||||
if (self::_isNumericArray($value))
|
||||
{
|
||||
$temp[$key] = array_values($value);
|
||||
}
|
||||
else
|
||||
{
|
||||
$temp[$key] = $value;
|
||||
}
|
||||
}
|
||||
|
||||
return json_encode($temp);
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if an array only has numeric keys.
|
||||
*
|
||||
* @param array $array
|
||||
* @return bool
|
||||
*/
|
||||
protected static function _isNumericArray($array)
|
||||
{
|
||||
if (!is_array($array) || !count($array))
|
||||
{
|
||||
return false;
|
||||
}
|
||||
foreach ($array as $key => $value)
|
||||
{
|
||||
if (!is_numeric($key))
|
||||
{
|
||||
return false;
|
||||
}
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
}
|
||||
/* End of file JSONDisplayHandler.class.php */
|
||||
/* Location: ./classes/display/JSONDisplayHandler.class.php */
|
||||
|
|
|
|||
2
common/js/plugins/spectrum/.gitignore
vendored
Normal file
2
common/js/plugins/spectrum/.gitignore
vendored
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
node_modules
|
||||
.DS_Store
|
||||
7
common/js/plugins/spectrum/.travis.yml
Normal file
7
common/js/plugins/spectrum/.travis.yml
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
language: node_js
|
||||
node_js:
|
||||
- "0.11"
|
||||
before_script:
|
||||
- npm install -g grunt-cli
|
||||
script:
|
||||
- grunt travis --verbose
|
||||
64
common/js/plugins/spectrum/Gruntfile.js
Normal file
64
common/js/plugins/spectrum/Gruntfile.js
Normal file
|
|
@ -0,0 +1,64 @@
|
|||
|
||||
module.exports = function(grunt) {
|
||||
|
||||
grunt.initConfig({
|
||||
pkg: grunt.file.readJSON('package.json'),
|
||||
|
||||
qunit: {
|
||||
all: ['test/index.html', 'test/loaders.html']
|
||||
},
|
||||
|
||||
jshint: {
|
||||
options: {
|
||||
sub: true,
|
||||
strict: true,
|
||||
newcap: false,
|
||||
globals: {
|
||||
jQuery: true
|
||||
}
|
||||
},
|
||||
|
||||
with_overrides: {
|
||||
options: {
|
||||
strict: false
|
||||
},
|
||||
files: {
|
||||
src: ['i18n/*.js', 'test/tests.js']
|
||||
}
|
||||
},
|
||||
|
||||
all: ['spectrum.js']
|
||||
},
|
||||
|
||||
|
||||
uglify: {
|
||||
options: {
|
||||
},
|
||||
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']);
|
||||
|
||||
};
|
||||
18
common/js/plugins/spectrum/LICENSE
Normal file
18
common/js/plugins/spectrum/LICENSE
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
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.
|
||||
69
common/js/plugins/spectrum/README.md
Normal file
69
common/js/plugins/spectrum/README.md
Normal file
|
|
@ -0,0 +1,69 @@
|
|||
# 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>
|
||||
|
||||
### npm
|
||||
|
||||
Spectrum is registered as package with npm. It can be installed with:
|
||||
|
||||
npm install spectrum-colorpicker
|
||||
|
||||
### Bower
|
||||
|
||||
Spectrum is registered as a package with [Bower](http://bower.io/), so it can be pulled down using:
|
||||
|
||||
bower install spectrum
|
||||
|
||||
### Using spectrum with a CDN
|
||||
|
||||
CDN provided by [cdnjs](https://cdnjs.com/libraries/spectrum)
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.0/spectrum.min.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.0/spectrum.min.css">
|
||||
|
||||
### 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
|
||||
|
||||
# runs jshint and the unit test suite
|
||||
grunt
|
||||
|
||||
# runs jshint, the unit test suite, and builds a minified version of the file.
|
||||
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.
|
||||
|
||||
For an example, see the [Dutch translation](i18n/jquery.spectrum-nl.js).
|
||||
22
common/js/plugins/spectrum/bower.json
Normal file
22
common/js/plugins/spectrum/bower.json
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
{
|
||||
"name": "spectrum",
|
||||
"version": "1.8.0",
|
||||
"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"
|
||||
},
|
||||
"ignore": [
|
||||
".gitignore",
|
||||
".travis.yml",
|
||||
"build/",
|
||||
"docs/",
|
||||
"example/",
|
||||
"Gruntfile.js",
|
||||
"LICENSE",
|
||||
"README.md",
|
||||
"test/"
|
||||
]
|
||||
}
|
||||
1
common/js/plugins/spectrum/build/.gitignore
vendored
Normal file
1
common/js/plugins/spectrum/build/.gitignore
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
spectrum-min.js
|
||||
6158
common/js/plugins/spectrum/docs/bootstrap.css
vendored
Normal file
6158
common/js/plugins/spectrum/docs/bootstrap.css
vendored
Normal file
File diff suppressed because it is too large
Load diff
273
common/js/plugins/spectrum/docs/docs.css
Normal file
273
common/js/plugins/spectrum/docs/docs.css
Normal file
|
|
@ -0,0 +1,273 @@
|
|||
|
||||
/* 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; }
|
||||
|
||||
input[type="text"] { height: auto; }
|
||||
.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;
|
||||
}
|
||||
.btn-primary:visited {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
/* 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;
|
||||
}
|
||||
466
common/js/plugins/spectrum/docs/docs.js
Normal file
466
common/js/plugins/spectrum/docs/docs.js
Normal file
|
|
@ -0,0 +1,466 @@
|
|||
|
||||
function updateBorders(color) {
|
||||
var hexColor = "transparent";
|
||||
if(color) {
|
||||
hexColor = color.toHexString();
|
||||
}
|
||||
$("#docs-content").css("border-color", hexColor);
|
||||
}
|
||||
|
||||
$(function() {
|
||||
|
||||
$("#full").spectrum({
|
||||
allowEmpty:true,
|
||||
color: "#ECC",
|
||||
showInput: true,
|
||||
containerClassName: "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
|
||||
});
|
||||
|
||||
$("#flatClearable").spectrum({
|
||||
flat: true,
|
||||
move: updateBorders,
|
||||
change: updateBorders,
|
||||
allowEmpty:true,
|
||||
showInput: true
|
||||
});
|
||||
|
||||
$("#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
|
||||
});
|
||||
|
||||
$("#showAlphaWithInputAndEmpty").spectrum({
|
||||
color: "rgba(255, 128, 0, .5)",
|
||||
allowEmpty:true,
|
||||
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
|
||||
});
|
||||
|
||||
$("#showInputWithClear").spectrum({
|
||||
allowEmpty:true,
|
||||
color: "",
|
||||
showInput: true,
|
||||
change: updateBorders,
|
||||
show: function() {
|
||||
|
||||
},
|
||||
hide: function() {
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
$("#openWithLink").spectrum({
|
||||
color: "#dd3333",
|
||||
change: updateBorders,
|
||||
show: function() {
|
||||
|
||||
},
|
||||
hide: function() {
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
$("#className").spectrum({
|
||||
className: 'awesome'
|
||||
});
|
||||
|
||||
$("#replacerClassName").spectrum({
|
||||
replacerClassName: 'awesome'
|
||||
});
|
||||
|
||||
$("#containerClassName").spectrum({
|
||||
containerClassName: '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']
|
||||
]
|
||||
});
|
||||
|
||||
$("#hideAfterPaletteSelect").spectrum({
|
||||
showPaletteOnly: true,
|
||||
showPalette:true,
|
||||
hideAfterPaletteSelect:true,
|
||||
color: 'blanchedalmond',
|
||||
palette: [
|
||||
['black', 'white', 'blanchedalmond',
|
||||
'rgb(255, 128, 0);', 'hsv 100 70 50'],
|
||||
['red', 'yellow', 'green', 'blue', 'violet']
|
||||
]
|
||||
});
|
||||
|
||||
$("#togglePaletteOnly").spectrum({
|
||||
color: 'blanchedalmond',
|
||||
showPaletteOnly: true,
|
||||
togglePaletteOnly: true,
|
||||
showPalette:true,
|
||||
palette: [
|
||||
["#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"]
|
||||
]
|
||||
});
|
||||
|
||||
$("#clickoutFiresChange").spectrum({
|
||||
change: updateBorders
|
||||
});
|
||||
|
||||
$("#clickoutDoesntFireChange").spectrum({
|
||||
change: updateBorders,
|
||||
clickoutFiresChange: false
|
||||
});
|
||||
|
||||
$("#showInitial").spectrum({
|
||||
showInitial: true
|
||||
});
|
||||
|
||||
$("#showInputAndInitial").spectrum({
|
||||
showInitial: true,
|
||||
showInput: true
|
||||
});
|
||||
|
||||
$("#showInputInitialClear").spectrum({
|
||||
allowEmpty:true,
|
||||
showInitial: true,
|
||||
showInput: true
|
||||
});
|
||||
|
||||
$("#changeOnMove").spectrum({
|
||||
move: function(c) {
|
||||
var label = $("#changeOnMoveLabel");
|
||||
label.text("Move called: " + c.toHexString());
|
||||
}
|
||||
});
|
||||
$("#changeOnMoveNo").spectrum({
|
||||
showInput: true,
|
||||
change: function(c) {
|
||||
var label = $("#changeOnMoveNoLabel");
|
||||
label.text("Change called: " + c.toHexString());
|
||||
}
|
||||
});
|
||||
|
||||
function prettyTime() {
|
||||
var date = new Date();
|
||||
|
||||
return date.toLocaleTimeString();
|
||||
}
|
||||
|
||||
$("#eventshow").spectrum({
|
||||
show: function(c) {
|
||||
var label = $("#eventshowLabel");
|
||||
label.text("show called at " + prettyTime() + " (color is " + c.toHexString() + ")");
|
||||
}
|
||||
});
|
||||
|
||||
$("#eventhide").spectrum({
|
||||
hide: function(c) {
|
||||
var label = $("#eventhideLabel");
|
||||
label.text("hide called at " + prettyTime() + " (color is " + c.toHexString() + ")");
|
||||
}
|
||||
});
|
||||
|
||||
$("#eventdragstart").spectrum({
|
||||
showAlpha: true
|
||||
}).on("dragstart.spectrum", function(e, c) {
|
||||
var label = $("#eventdragstartLabel");
|
||||
label.text("dragstart called at " + prettyTime() + " (color is " + c.toHexString() + ")");
|
||||
});
|
||||
|
||||
$("#eventdragstop").spectrum({
|
||||
showAlpha: true
|
||||
}).on("dragstop.spectrum", function(e, c) {
|
||||
var label = $("#eventdragstopLabel");
|
||||
label.text("dragstop called at " + prettyTime() + " (color is " + c.toHexString() + ")");
|
||||
});
|
||||
|
||||
|
||||
$(".basic").spectrum({ change: updateBorders });
|
||||
$(".override").spectrum({
|
||||
color: "yellow",
|
||||
change: updateBorders
|
||||
});
|
||||
|
||||
$(".startEmpty").spectrum({
|
||||
allowEmpty:true,
|
||||
change: updateBorders});
|
||||
|
||||
$("#beforeShow").spectrum({
|
||||
beforeShow: function() {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
$("#custom").spectrum({
|
||||
color: "#f00"
|
||||
});
|
||||
|
||||
$("#buttonText").spectrum({
|
||||
allowEmpty:true,
|
||||
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: [ ]
|
||||
});
|
||||
$("#showSelectionPaletteStorage2").spectrum({
|
||||
showPalette: true,
|
||||
localStorageKey: "spectrum.homepage", // Any picker with the same string will share selection
|
||||
showSelectionPalette: true,
|
||||
palette: [ ]
|
||||
});
|
||||
|
||||
$("#selectionPalette").spectrum({
|
||||
showPalette: true,
|
||||
palette: [ ],
|
||||
showSelectionPalette: true, // true by default
|
||||
selectionPalette: ["red", "green", "blue"]
|
||||
});
|
||||
|
||||
$("#maxSelectionSize").spectrum({
|
||||
showPalette: true,
|
||||
palette: [ ],
|
||||
showSelectionPalette: true, // true by default
|
||||
selectionPalette: ["red", "green", "blue"],
|
||||
maxSelectionSize: 2
|
||||
});
|
||||
|
||||
$("#preferredHex").spectrum({
|
||||
preferredFormat: "hex",
|
||||
showInput: true,
|
||||
showPalette: true,
|
||||
palette: [["red", "rgba(0, 255, 0, .5)", "rgb(0, 0, 255)"]]
|
||||
});
|
||||
$("#preferredHex3").spectrum({
|
||||
preferredFormat: "hex3",
|
||||
showInput: true,
|
||||
showPalette: true,
|
||||
palette: [["red", "rgba(0, 255, 0, .5)", "rgb(0, 0, 255)"]]
|
||||
});
|
||||
$("#preferredHsl").spectrum({
|
||||
preferredFormat: "hsl",
|
||||
showInput: true,
|
||||
showPalette: true,
|
||||
palette: [["red", "rgba(0, 255, 0, .5)", "rgb(0, 0, 255)"]]
|
||||
});
|
||||
$("#preferredRgb").spectrum({
|
||||
preferredFormat: "rgb",
|
||||
showInput: true,
|
||||
showPalette: true,
|
||||
palette: [["red", "rgba(0, 255, 0, .5)", "rgb(0, 0, 255)"]]
|
||||
});
|
||||
$("#preferredName").spectrum({
|
||||
preferredFormat: "name",
|
||||
showInput: true,
|
||||
showPalette: true,
|
||||
palette: [["red", "rgba(0, 255, 0, .5)", "rgb(0, 0, 255)"]]
|
||||
});
|
||||
$("#preferredNone").spectrum({
|
||||
showInput: true,
|
||||
showPalette: true,
|
||||
palette: [["red", "rgba(0, 255, 0, .5)", "rgb(0, 0, 255)"]]
|
||||
});
|
||||
|
||||
$("#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());
|
||||
});
|
||||
|
||||
$("#toggle").spectrum();
|
||||
$("#btn-toggle").click(function() {
|
||||
$("#toggle").spectrum("toggle");
|
||||
return false;
|
||||
});
|
||||
|
||||
|
||||
$('#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 heading.id || prefix+i;
|
||||
}
|
||||
});
|
||||
|
||||
prettyPrint();
|
||||
|
||||
|
||||
});
|
||||
9597
common/js/plugins/spectrum/docs/jquery-1.9.1.js
vendored
Normal file
9597
common/js/plugins/spectrum/docs/jquery-1.9.1.js
vendored
Normal file
File diff suppressed because it is too large
Load diff
9111
common/js/plugins/spectrum/docs/jquery-2.1.0.js
vendored
Normal file
9111
common/js/plugins/spectrum/docs/jquery-2.1.0.js
vendored
Normal file
File diff suppressed because it is too large
Load diff
28
common/js/plugins/spectrum/docs/prettify.js
Normal file
28
common/js/plugins/spectrum/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"}})();
|
||||
109
common/js/plugins/spectrum/docs/toc.js
Normal file
109
common/js/plugins/spectrum/docs/toc.js
Normal file
|
|
@ -0,0 +1,109 @@
|
|||
!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 anchorName = opts.anchorName(i, heading, opts.prefix);
|
||||
var anchor = $([]);
|
||||
if (!document.getElementById(anchorName)) {
|
||||
anchor = $('<span/>').attr('id', opts.anchorName(i, heading, opts.prefix)).insertBefore($h);
|
||||
}
|
||||
//build TOC item
|
||||
var a = $('<a/>')
|
||||
.text($h.text())
|
||||
.attr('href', '#' + anchorName)
|
||||
.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: '',
|
||||
highlightOnScroll: true,
|
||||
highlightOffset: 100,
|
||||
anchorName: function(i, heading, prefix) {
|
||||
return prefix+i;
|
||||
}
|
||||
};
|
||||
|
||||
}(jQuery);
|
||||
254
common/js/plugins/spectrum/example/example.js
Normal file
254
common/js/plugins/spectrum/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,
|
||||
});
|
||||
});
|
||||
149
common/js/plugins/spectrum/example/index.html
Normal file
149
common/js/plugins/spectrum/example/index.html
Normal file
|
|
@ -0,0 +1,149 @@
|
|||
<!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: linear-gradient(to bottom, #eee, #ccc);
|
||||
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>
|
||||
<button class='btn toggleBtn' data-rule='togglePaletteOnly'>Show Picker Toggle Button</button>
|
||||
<button class='btn toggleBtn' data-rule='showButtons'>Show Buttons</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>
|
||||
93
common/js/plugins/spectrum/example/testcase.html
Normal file
93
common/js/plugins/spectrum/example/testcase.html
Normal file
|
|
@ -0,0 +1,93 @@
|
|||
|
||||
<!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>
|
||||
</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>Basic Test Case</h2>
|
||||
<p>Also available as a <a href="http://jsfiddle.net/bgrins/ctkY3/">jsfiddle</a></p>
|
||||
|
||||
<button id="update">Update palette</button>
|
||||
<h2>Full Example</h2>
|
||||
<input type='text' id="full"/>
|
||||
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
$("#update").click (function() {
|
||||
console.log($("#full").spectrum("option", "palette"));
|
||||
$("#full").spectrum("option", "palette", [
|
||||
["red", "green", "blue"]
|
||||
]);
|
||||
});
|
||||
|
||||
$("#full").spectrum({
|
||||
color: "#ECC",
|
||||
flat: true,
|
||||
showInput: true,
|
||||
className: "full-spectrum",
|
||||
showInitial: true,
|
||||
showPalette: true,
|
||||
showSelectionPalette: true,
|
||||
maxPaletteSize: 10,
|
||||
preferredFormat: "hex",
|
||||
localStorageKey: "spectrum.demo",
|
||||
move: function (color) {
|
||||
|
||||
},
|
||||
show: function () {
|
||||
|
||||
},
|
||||
beforeShow: function () {
|
||||
|
||||
},
|
||||
hide: function () {
|
||||
|
||||
},
|
||||
change: function() {
|
||||
|
||||
},
|
||||
palette: [
|
||||
["rgb(0, 0, 0)", "rgb(67, 67, 67)", "rgb(102, 102, 102)",
|
||||
"rgb(204, 204, 204)", "rgb(217, 217, 217)","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(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)"]
|
||||
]
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
17
common/js/plugins/spectrum/i18n/jquery.spectrum-ar.js
Normal file
17
common/js/plugins/spectrum/i18n/jquery.spectrum-ar.js
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
// Spectrum Colorpicker
|
||||
// Arabic (ar) localization
|
||||
// https://github.com/bgrins/spectrum
|
||||
(function ( $ ) {
|
||||
|
||||
var localization = $.spectrum.localization["ar"] = {
|
||||
cancelText: "إلغاء",
|
||||
chooseText: "إختار",
|
||||
clearText: "إرجاع الألوان على ما كانت",
|
||||
noColorSelectedText: "لم تختار أي لون",
|
||||
togglePaletteMoreText: "أكثر",
|
||||
togglePaletteLessText: "أقل"
|
||||
};
|
||||
|
||||
$.extend($.fn.spectrum.defaults, localization);
|
||||
|
||||
})( jQuery );
|
||||
18
common/js/plugins/spectrum/i18n/jquery.spectrum-de.js
Normal file
18
common/js/plugins/spectrum/i18n/jquery.spectrum-de.js
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
// Spectrum Colorpicker
|
||||
// German (de) localization
|
||||
// https://github.com/bgrins/spectrum
|
||||
|
||||
(function ( $ ) {
|
||||
|
||||
var localization = $.spectrum.localization["de"] = {
|
||||
cancelText: "Abbrechen",
|
||||
chooseText: "Wählen",
|
||||
clearText: "Farbauswahl zurücksetzen",
|
||||
noColorSelectedText: "Keine Farbe ausgewählt",
|
||||
togglePaletteMoreText: "Mehr",
|
||||
togglePaletteLessText: "Weniger"
|
||||
};
|
||||
|
||||
$.extend($.fn.spectrum.defaults, localization);
|
||||
|
||||
})( jQuery );
|
||||
14
common/js/plugins/spectrum/i18n/jquery.spectrum-dk.js
Normal file
14
common/js/plugins/spectrum/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 );
|
||||
18
common/js/plugins/spectrum/i18n/jquery.spectrum-es.js
Normal file
18
common/js/plugins/spectrum/i18n/jquery.spectrum-es.js
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
// Spectrum Colorpicker
|
||||
// Spanish (es) localization
|
||||
// https://github.com/bgrins/spectrum
|
||||
|
||||
(function ( $ ) {
|
||||
|
||||
var localization = $.spectrum.localization["es"] = {
|
||||
cancelText: "Cancelar",
|
||||
chooseText: "Elegir",
|
||||
clearText: "Borrar color seleccionado",
|
||||
noColorSelectedText: "Ningún color seleccionado",
|
||||
togglePaletteMoreText: "Más",
|
||||
togglePaletteLessText: "Menos"
|
||||
};
|
||||
|
||||
$.extend($.fn.spectrum.defaults, localization);
|
||||
|
||||
})( jQuery );
|
||||
14
common/js/plugins/spectrum/i18n/jquery.spectrum-fa.js
Normal file
14
common/js/plugins/spectrum/i18n/jquery.spectrum-fa.js
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
// Spectrum Colorpicker
|
||||
// Persian (fa) localization
|
||||
// https://github.com/bgrins/spectrum
|
||||
|
||||
(function ( $ ) {
|
||||
|
||||
var localization = $.spectrum.localization["fa"] = {
|
||||
cancelText: "لغو",
|
||||
chooseText: "انتخاب"
|
||||
};
|
||||
|
||||
$.extend($.fn.spectrum.defaults, localization);
|
||||
|
||||
})( jQuery );
|
||||
14
common/js/plugins/spectrum/i18n/jquery.spectrum-fi.js
Normal file
14
common/js/plugins/spectrum/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 );
|
||||
18
common/js/plugins/spectrum/i18n/jquery.spectrum-fr.js
Normal file
18
common/js/plugins/spectrum/i18n/jquery.spectrum-fr.js
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
// Spectrum Colorpicker
|
||||
// French (fr) localization
|
||||
// https://github.com/bgrins/spectrum
|
||||
|
||||
(function ( $ ) {
|
||||
|
||||
var localization = $.spectrum.localization["fr"] = {
|
||||
cancelText: "Annuler",
|
||||
chooseText: "Valider",
|
||||
clearText: "Effacer couleur sélectionnée",
|
||||
noColorSelectedText: "Aucune couleur sélectionnée",
|
||||
togglePaletteMoreText: "Plus",
|
||||
togglePaletteLessText: "Moins"
|
||||
};
|
||||
|
||||
$.extend($.fn.spectrum.defaults, localization);
|
||||
|
||||
})( jQuery );
|
||||
18
common/js/plugins/spectrum/i18n/jquery.spectrum-gr.js
Normal file
18
common/js/plugins/spectrum/i18n/jquery.spectrum-gr.js
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
// Spectrum Colorpicker
|
||||
// Greek (gr) localization
|
||||
// https://github.com/bgrins/spectrum
|
||||
|
||||
(function ( $ ) {
|
||||
|
||||
var localization = $.spectrum.localization["gr"] = {
|
||||
cancelText: "Ακύρωση",
|
||||
chooseText: "Επιλογή",
|
||||
clearText: "Καθαρισμός επιλεγμένου χρώματος",
|
||||
noColorSelectedText: "Δεν έχει επιλεχθεί κάποιο χρώμα",
|
||||
togglePaletteMoreText: "Περισσότερα",
|
||||
togglePaletteLessText: "Λιγότερα"
|
||||
};
|
||||
|
||||
$.extend($.gr.spectrum.defaults, localization);
|
||||
|
||||
})( jQuery );
|
||||
18
common/js/plugins/spectrum/i18n/jquery.spectrum-he.js
Normal file
18
common/js/plugins/spectrum/i18n/jquery.spectrum-he.js
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
// Spectrum Colorpicker
|
||||
// Hebrew (he) localization
|
||||
// https://github.com/bgrins/spectrum
|
||||
|
||||
(function ( $ ) {
|
||||
|
||||
var localization = $.spectrum.localization["he"] = {
|
||||
cancelText: "בטל בחירה",
|
||||
chooseText: "בחר צבע",
|
||||
clearText: "אפס בחירה",
|
||||
noColorSelectedText: "לא נבחר צבע",
|
||||
togglePaletteMoreText: "עוד צבעים",
|
||||
togglePaletteLessText: "פחות צבעים"
|
||||
};
|
||||
|
||||
$.extend($.fn.spectrum.defaults, localization);
|
||||
|
||||
})( jQuery );
|
||||
18
common/js/plugins/spectrum/i18n/jquery.spectrum-hr.js
Normal file
18
common/js/plugins/spectrum/i18n/jquery.spectrum-hr.js
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
// Spectrum Colorpicker
|
||||
// Croatian (hr) localization
|
||||
// https://github.com/bgrins/spectrum
|
||||
|
||||
(function ( $ ) {
|
||||
|
||||
var localization = $.spectrum.localization["hr"] = {
|
||||
cancelText: "Odustani",
|
||||
chooseText: "Odaberi",
|
||||
clearText: "Poništi odabir",
|
||||
noColorSelectedText: "Niti jedna boja nije odabrana",
|
||||
togglePaletteMoreText: "Više",
|
||||
togglePaletteLessText: "Manje"
|
||||
};
|
||||
|
||||
$.extend($.fn.spectrum.defaults, localization);
|
||||
|
||||
})( jQuery );
|
||||
18
common/js/plugins/spectrum/i18n/jquery.spectrum-id.js
Normal file
18
common/js/plugins/spectrum/i18n/jquery.spectrum-id.js
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
// Spectrum Colorpicker
|
||||
// Indonesia/Bahasa Indonesia (id) localization
|
||||
// https://github.com/bgrins/spectrum
|
||||
|
||||
(function ( $ ) {
|
||||
|
||||
var localization = $.spectrum.localization["id"] = {
|
||||
cancelText: "Batal",
|
||||
chooseText: "Pilih",
|
||||
clearText: "Hapus Pilihan Warna",
|
||||
noColorSelectedText: "Warna Tidak Dipilih",
|
||||
togglePaletteMoreText: "tambah",
|
||||
togglePaletteLessText: "kurangi"
|
||||
};
|
||||
|
||||
$.extend($.fn.spectrum.defaults, localization);
|
||||
|
||||
})( jQuery );
|
||||
16
common/js/plugins/spectrum/i18n/jquery.spectrum-it.js
Normal file
16
common/js/plugins/spectrum/i18n/jquery.spectrum-it.js
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
// Spectrum Colorpicker
|
||||
// Italian (it) localization
|
||||
// https://github.com/bgrins/spectrum
|
||||
|
||||
(function ( $ ) {
|
||||
|
||||
var localization = $.spectrum.localization["it"] = {
|
||||
cancelText: "annulla",
|
||||
chooseText: "scegli",
|
||||
clearText: "Annulla selezione colore",
|
||||
noColorSelectedText: "Nessun colore selezionato"
|
||||
};
|
||||
|
||||
$.extend($.fn.spectrum.defaults, localization);
|
||||
|
||||
})( jQuery );
|
||||
14
common/js/plugins/spectrum/i18n/jquery.spectrum-ja.js
Normal file
14
common/js/plugins/spectrum/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 );
|
||||
18
common/js/plugins/spectrum/i18n/jquery.spectrum-ko.js
Normal file
18
common/js/plugins/spectrum/i18n/jquery.spectrum-ko.js
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
// Spectrum Colorpicker
|
||||
// Korean (ko) localization
|
||||
// https://github.com/bgrins/spectrum
|
||||
|
||||
(function ( $ ) {
|
||||
|
||||
var localization = $.spectrum.localization["ko"] = {
|
||||
cancelText: "취소",
|
||||
chooseText: "선택",
|
||||
clearText: "선택 초기화",
|
||||
noColorSelectedText: "선택된 색상 없음",
|
||||
togglePaletteMoreText: "더보기",
|
||||
togglePaletteLessText: "줄이기"
|
||||
};
|
||||
|
||||
$.extend($.fn.spectrum.defaults, localization);
|
||||
|
||||
})( jQuery );
|
||||
18
common/js/plugins/spectrum/i18n/jquery.spectrum-lt.js
Normal file
18
common/js/plugins/spectrum/i18n/jquery.spectrum-lt.js
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
// Spectrum Colorpicker
|
||||
// Lithuanian (lt) localization
|
||||
// https://github.com/liesislukas
|
||||
|
||||
(function ( $ ) {
|
||||
|
||||
var localization = $.spectrum.localization["lt"] = {
|
||||
cancelText: "Atšaukti",
|
||||
chooseText: "Pasirinkti",
|
||||
clearText: "Išvalyti pasirinkimą",
|
||||
noColorSelectedText: "Spalva nepasirinkta",
|
||||
togglePaletteMoreText: "Daugiau",
|
||||
togglePaletteLessText: "Mažiau"
|
||||
};
|
||||
|
||||
$.extend($.fn.spectrum.defaults, localization);
|
||||
|
||||
})( jQuery );
|
||||
17
common/js/plugins/spectrum/i18n/jquery.spectrum-nl.js
Normal file
17
common/js/plugins/spectrum/i18n/jquery.spectrum-nl.js
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
// Spectrum Colorpicker
|
||||
// Dutch (nl-nl) localization
|
||||
// https://github.com/bgrins/spectrum
|
||||
|
||||
(function ( $ ) {
|
||||
|
||||
var localization = $.spectrum.localization["nl-nl"] = {
|
||||
cancelText: "Annuleer",
|
||||
chooseText: "Kies",
|
||||
clearText: "Wis kleur selectie",
|
||||
togglePaletteMoreText: 'Meer',
|
||||
togglePaletteLessText: 'Minder'
|
||||
};
|
||||
|
||||
$.extend($.fn.spectrum.defaults, localization);
|
||||
|
||||
})( jQuery );
|
||||
18
common/js/plugins/spectrum/i18n/jquery.spectrum-pl.js
Normal file
18
common/js/plugins/spectrum/i18n/jquery.spectrum-pl.js
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
// Spectrum Colorpicker
|
||||
// Polish (pl) localization
|
||||
// https://github.com/bgrins/spectrum
|
||||
|
||||
(function ( $ ) {
|
||||
|
||||
var localization = $.spectrum.localization["pl"] = {
|
||||
cancelText: "Anuluj",
|
||||
chooseText: "Wybierz",
|
||||
clearText: "Usuń wybór koloru",
|
||||
noColorSelectedText: "Nie wybrano koloru",
|
||||
togglePaletteMoreText: "Więcej",
|
||||
togglePaletteLessText: "Mniej"
|
||||
};
|
||||
|
||||
$.extend($.fn.spectrum.defaults, localization);
|
||||
|
||||
})( jQuery );
|
||||
18
common/js/plugins/spectrum/i18n/jquery.spectrum-pt-br.js
Normal file
18
common/js/plugins/spectrum/i18n/jquery.spectrum-pt-br.js
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
// Spectrum Colorpicker
|
||||
// Brazilian (pt-br) localization
|
||||
// https://github.com/bgrins/spectrum
|
||||
|
||||
(function ( $ ) {
|
||||
|
||||
var localization = $.spectrum.localization["pt-br"] = {
|
||||
cancelText: "Cancelar",
|
||||
chooseText: "Escolher",
|
||||
clearText: "Limpar cor selecionada",
|
||||
noColorSelectedText: "Nenhuma cor selecionada",
|
||||
togglePaletteMoreText: "Mais",
|
||||
togglePaletteLessText: "Menos"
|
||||
};
|
||||
|
||||
$.extend($.fn.spectrum.defaults, localization);
|
||||
|
||||
})( jQuery );
|
||||
18
common/js/plugins/spectrum/i18n/jquery.spectrum-ru.js
Normal file
18
common/js/plugins/spectrum/i18n/jquery.spectrum-ru.js
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
// Spectrum Colorpicker
|
||||
// Russian (ru) localization
|
||||
// https://github.com/bgrins/spectrum
|
||||
|
||||
(function ( $ ) {
|
||||
|
||||
var localization = $.spectrum.localization["ru"] = {
|
||||
cancelText: "Отмена",
|
||||
chooseText: "Выбрать",
|
||||
clearText: "Сбросить",
|
||||
noColorSelectedText: "Цвет не выбран",
|
||||
togglePaletteMoreText: "Ещё",
|
||||
togglePaletteLessText: "Скрыть"
|
||||
};
|
||||
|
||||
$.extend($.fn.spectrum.defaults, localization);
|
||||
|
||||
})( jQuery );
|
||||
14
common/js/plugins/spectrum/i18n/jquery.spectrum-sv.js
Normal file
14
common/js/plugins/spectrum/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 );
|
||||
14
common/js/plugins/spectrum/i18n/jquery.spectrum-tr.js
Normal file
14
common/js/plugins/spectrum/i18n/jquery.spectrum-tr.js
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
// Spectrum Colorpicker
|
||||
// Turkish (tr) localization
|
||||
// https://github.com/bgrins/spectrum
|
||||
|
||||
(function ( $ ) {
|
||||
|
||||
var localization = $.spectrum.localization["tr"] = {
|
||||
cancelText: "iptal",
|
||||
chooseText: "tamam"
|
||||
};
|
||||
|
||||
$.extend($.fn.spectrum.defaults, localization);
|
||||
|
||||
})( jQuery );
|
||||
18
common/js/plugins/spectrum/i18n/jquery.spectrum-zh-cn.js
Normal file
18
common/js/plugins/spectrum/i18n/jquery.spectrum-zh-cn.js
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
// Spectrum Colorpicker
|
||||
// Simplified Chinese (zh-cn) localization
|
||||
// https://github.com/bgrins/spectrum
|
||||
|
||||
(function ( $ ) {
|
||||
|
||||
var localization = $.spectrum.localization["zh-cn"] = {
|
||||
cancelText: "取消",
|
||||
chooseText: "选择",
|
||||
clearText: "清除",
|
||||
togglePaletteMoreText: "更多选项",
|
||||
togglePaletteLessText: "隐藏",
|
||||
noColorSelectedText: "尚未选择任何颜色"
|
||||
};
|
||||
|
||||
$.extend($.fn.spectrum.defaults, localization);
|
||||
|
||||
})( jQuery );
|
||||
18
common/js/plugins/spectrum/i18n/jquery.spectrum-zh-tw.js
Normal file
18
common/js/plugins/spectrum/i18n/jquery.spectrum-zh-tw.js
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
// Spectrum Colorpicker
|
||||
// Traditional Chinese (zh-tw) localization
|
||||
// https://github.com/bgrins/spectrum
|
||||
|
||||
(function ( $ ) {
|
||||
|
||||
var localization = $.spectrum.localization["zh-tw"] = {
|
||||
cancelText: "取消",
|
||||
chooseText: "選擇",
|
||||
clearText: "清除",
|
||||
togglePaletteMoreText: "更多選項",
|
||||
togglePaletteLessText: "隱藏",
|
||||
noColorSelectedText: "尚未選擇任何顏色"
|
||||
};
|
||||
|
||||
$.extend($.fn.spectrum.defaults, localization);
|
||||
|
||||
})( jQuery );
|
||||
1210
common/js/plugins/spectrum/index.html
Normal file
1210
common/js/plugins/spectrum/index.html
Normal file
File diff suppressed because it is too large
Load diff
24
common/js/plugins/spectrum/package.json
Normal file
24
common/js/plugins/spectrum/package.json
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
{
|
||||
"name": "spectrum-colorpicker",
|
||||
"description": "Spectrum: the no hassle jQuery colorpicker",
|
||||
"version": "1.8.0",
|
||||
"main": "spectrum.js",
|
||||
"license": "MIT",
|
||||
"keywords": ["jquery-plugin", "ecosystem:jquery", "color", "colorpicker", "ui"],
|
||||
"homepage": "http://bgrins.github.com/spectrum",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://bgrins.github.com/spectrum"
|
||||
},
|
||||
"author": {
|
||||
"name" : "Brian Grinstead",
|
||||
"email" : "briangrinstead@gmail.com",
|
||||
"url" : "http://briangrinstead.com/"
|
||||
},
|
||||
"devDependencies": {
|
||||
"grunt": "~0.4.0",
|
||||
"grunt-contrib-jshint": "~0.4.3",
|
||||
"grunt-contrib-qunit": "~0.2.0",
|
||||
"grunt-contrib-uglify": "~0.2.0"
|
||||
}
|
||||
}
|
||||
3
common/js/plugins/spectrum/plugin.load
Normal file
3
common/js/plugins/spectrum/plugin.load
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
spectrum.css
|
||||
spectrum.js
|
||||
rx_spectrum.js
|
||||
48
common/js/plugins/spectrum/rx_spectrum.js
Normal file
48
common/js/plugins/spectrum/rx_spectrum.js
Normal file
|
|
@ -0,0 +1,48 @@
|
|||
/**
|
||||
* @brief Load colorpicker, spectrum
|
||||
* @author MinSoo Kim <misol.kr@gmail.com>
|
||||
**/
|
||||
jQuery(function($){
|
||||
$.fn.rx_spectrum = function(settings){
|
||||
return this.spectrum(settings);
|
||||
}
|
||||
|
||||
// 컬러 피커가 내장된 브라우저에서는 내장된 컬러피커 이용
|
||||
if ( $("input.rx-spectrum").prop('type') != 'color' ) {
|
||||
$.getScript(request_uri + "./common/js/plugins/spectrum/i18n/jquery.spectrum-"+ xe.current_lang.replace("jp", "ja").toLowerCase() +".js", function() {
|
||||
var settings = {
|
||||
showInput: true,
|
||||
showInitial: true,
|
||||
showPalette: true,
|
||||
showSelectionPalette: true,
|
||||
preferredFormat: "hex",
|
||||
move: function (color) {
|
||||
|
||||
},
|
||||
show: function () {
|
||||
|
||||
},
|
||||
beforeShow: function () {
|
||||
|
||||
},
|
||||
hide: function () {
|
||||
|
||||
},
|
||||
change: function() {
|
||||
|
||||
},
|
||||
palette: [
|
||||
["#000000","#444444","#666666","#999999","#cccccc","#eeeeee","#f3f3f3","#ffffff"],
|
||||
["#ff0000","#ff9900","#ffff00","#00ff00","#00ffff","#0000ff","#9900ff","#ff00ff"],
|
||||
["#f4cccc","#fce5cd","#fff2cc","#d9ead3","#d0e0e3","#cfe2f3","#d9d2e9","#ead1dc"],
|
||||
["#ea9999","#f9cb9c","#ffe599","#b6d7a8","#a2c4c9","#9fc5e8","#b4a7d6","#d5a6bd"],
|
||||
["#e06666","#f6b26b","#ffd966","#93c47d","#76a5af","#6fa8dc","#8e7cc3","#c27ba0"],
|
||||
["#cc0000","#e69138","#f1c232","#6aa84f","#45818e","#3d85c6","#674ea7","#a64d79"],
|
||||
["#990000","#b45f06","#bf9000","#38761d","#134f5c","#0b5394","#351c75","#741b47"],
|
||||
["#660000","#783f04","#7f6000","#274e13","#0c343d","#073763","#20124d","#4c1130"]
|
||||
]
|
||||
}
|
||||
$('input.rx-spectrum').rx_spectrum(settings);
|
||||
});
|
||||
}
|
||||
});
|
||||
507
common/js/plugins/spectrum/spectrum.css
Normal file
507
common/js/plugins/spectrum/spectrum.css
Normal file
|
|
@ -0,0 +1,507 @@
|
|||
/***
|
||||
Spectrum Colorpicker v1.8.0
|
||||
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;
|
||||
/* https://github.com/bgrins/spectrum/issues/40 */
|
||||
z-index: 9999994;
|
||||
overflow: hidden;
|
||||
}
|
||||
.sp-container.sp-flat {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Fix for * { box-sizing: border-box; } */
|
||||
.sp-container,
|
||||
.sp-container * {
|
||||
-webkit-box-sizing: content-box;
|
||||
-moz-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
/* 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-clear-enabled .sp-hue {
|
||||
top:33px;
|
||||
height: 77.5%;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.sp-clear {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sp-clear.sp-clear-display {
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
.sp-clear-enabled .sp-clear {
|
||||
display: block;
|
||||
position:absolute;
|
||||
top:0px;
|
||||
right:0;
|
||||
bottom:0;
|
||||
left:84%;
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
/* Don't allow text selection */
|
||||
.sp-container, .sp-replacer, .sp-preview, .sp-dragger, .sp-slider, .sp-alpha, .sp-clear, .sp-alpha-handle, .sp-container.sp-dragging .sp-input, .sp-container button {
|
||||
-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-container.sp-palette-buttons-disabled .sp-palette-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%);
|
||||
background: linear-gradient(to bottom, #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;
|
||||
}
|
||||
|
||||
/*
|
||||
Theme authors:
|
||||
Here are the basic themeable display options (colors, fonts, global widths).
|
||||
See http://bgrins.github.io/spectrum/themes/ for instructions.
|
||||
*/
|
||||
|
||||
.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, .sp-clear {
|
||||
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, .sp-clear {
|
||||
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-only .sp-palette-container {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.sp-initial .sp-clear-display {
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
.sp-palette-button-container,
|
||||
.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: 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: 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=);
|
||||
}
|
||||
|
||||
.sp-clear-display {
|
||||
background-repeat:no-repeat;
|
||||
background-position: center;
|
||||
background-image: url(data:image/gif;base64,R0lGODlhFAAUAPcAAAAAAJmZmZ2dnZ6enqKioqOjo6SkpKWlpaampqenp6ioqKmpqaqqqqurq/Hx8fLy8vT09PX19ff39/j4+Pn5+fr6+vv7+wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAP8ALAAAAAAUABQAAAihAP9FoPCvoMGDBy08+EdhQAIJCCMybCDAAYUEARBAlFiQQoMABQhKUJBxY0SPICEYHBnggEmDKAuoPMjS5cGYMxHW3IiT478JJA8M/CjTZ0GgLRekNGpwAsYABHIypcAgQMsITDtWJYBR6NSqMico9cqR6tKfY7GeBCuVwlipDNmefAtTrkSzB1RaIAoXodsABiZAEFB06gIBWC1mLVgBa0AAOw==);
|
||||
}
|
||||
2323
common/js/plugins/spectrum/spectrum.js
Normal file
2323
common/js/plugins/spectrum/spectrum.js
Normal file
File diff suppressed because it is too large
Load diff
18
common/js/plugins/spectrum/test/index.html
Normal file
18
common/js/plugins/spectrum/test/index.html
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Spectrum Tests</title>
|
||||
<link rel="stylesheet" href="qunit.css">
|
||||
<link rel="stylesheet" href="../spectrum.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>
|
||||
|
||||
<input type="color" id="type-color-on-page" />
|
||||
</body>
|
||||
</html>
|
||||
15
common/js/plugins/spectrum/test/loaders.html
Normal file
15
common/js/plugins/spectrum/test/loaders.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">
|
||||
<link rel="stylesheet" href="../spectrum.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="qunit"></div>
|
||||
<script src="qunit.js"></script>
|
||||
<script src="require.js"></script>
|
||||
<script src="loaders.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
22
common/js/plugins/spectrum/test/loaders.js
Normal file
22
common/js/plugins/spectrum/test/loaders.js
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
|
||||
require.config({
|
||||
paths: {
|
||||
jquery: '../docs/jquery-2.1.0'
|
||||
}
|
||||
});
|
||||
|
||||
asyncTest ("requirejs", function() {
|
||||
require([
|
||||
"../spectrum"
|
||||
], function(spectrum) {
|
||||
ok ($.fn.spectrum, "Plugin has been loaded");
|
||||
|
||||
// Just do some basic stuff with the API as a sanity check.
|
||||
var el = $("<input id='spec' />").spectrum();
|
||||
el.spectrum("set", "red");
|
||||
equal(el.spectrum("get").toName(), "red", "Basic color setting");
|
||||
el.spectrum("destroy");
|
||||
|
||||
QUnit.start();
|
||||
});
|
||||
});
|
||||
235
common/js/plugins/spectrum/test/qunit.css
Normal file
235
common/js/plugins/spectrum/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
common/js/plugins/spectrum/test/qunit.js
Normal file
1977
common/js/plugins/spectrum/test/qunit.js
Normal file
File diff suppressed because it is too large
Load diff
2076
common/js/plugins/spectrum/test/require.js
Normal file
2076
common/js/plugins/spectrum/test/require.js
Normal file
File diff suppressed because it is too large
Load diff
730
common/js/plugins/spectrum/test/tests.js
Normal file
730
common/js/plugins/spectrum/test/tests.js
Normal file
|
|
@ -0,0 +1,730 @@
|
|||
// Spectrum Colorpicker Tests
|
||||
// https://github.com/bgrins/spectrum
|
||||
// Author: Brian Grinstead
|
||||
// License: MIT
|
||||
|
||||
// Pretend like the color inputs aren't supported for initial load.
|
||||
$.fn.spectrum.inputTypeColorSupport = function() { return false; };
|
||||
|
||||
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");
|
||||
|
||||
equal(el.spectrum("option", "showInput"), false, "Undefined option is false.");
|
||||
|
||||
el.spectrum({showInput: true});
|
||||
|
||||
equal(el.spectrum("option", "showInput"), true, "Double initialized spectrum is destroyed before recreating.");
|
||||
|
||||
el.spectrum("destroy");
|
||||
|
||||
equal(el.spectrum("container"), el, "After destroying spectrum, string function returns input.");
|
||||
|
||||
});
|
||||
|
||||
test ("Polyfill", function() {
|
||||
var el = $("#type-color-on-page");
|
||||
ok (el.spectrum("get").toHex, "The input[type=color] has been initialized on load");
|
||||
el.spectrum("destroy");
|
||||
|
||||
// Pretend like the color inputs are supported.
|
||||
$.fn.spectrum.inputTypeColorSupport = function() { return true; };
|
||||
|
||||
el = $("<input type='color' value='red' />").spectrum({
|
||||
allowEmpty: true
|
||||
});
|
||||
el.spectrum("set", null);
|
||||
ok(el.spectrum("get"), "input[type] color does not allow null values");
|
||||
el.spectrum("destroy");
|
||||
});
|
||||
|
||||
test( "Per-element Options Are Read From Data Attributes", function() {
|
||||
var el = $("<input id='spec' data-show-alpha='true' />").spectrum();
|
||||
|
||||
equal ( el.spectrum("option", "showAlpha"), true, "Took showAlpha value from data attribute");
|
||||
|
||||
el.spectrum("destroy");
|
||||
|
||||
var changeDefault = $("<input id='spec' data-show-alpha='false' />").spectrum({
|
||||
showAlpha: true
|
||||
});
|
||||
|
||||
equal ( changeDefault.spectrum("option", "showAlpha"), false, "Took showAlpha value from data attribute");
|
||||
|
||||
changeDefault.spectrum("destroy");
|
||||
|
||||
var noData = $("<input id='spec' />").spectrum({
|
||||
showAlpha: true
|
||||
});
|
||||
|
||||
equal ( noData.spectrum("option", "showAlpha"), true, "Kept showAlpha without data attribute");
|
||||
|
||||
noData.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", function(e, color) {
|
||||
ok(false, "Change should not fire from `set` call");
|
||||
});
|
||||
|
||||
el.spectrum("show");
|
||||
el.spectrum("show");
|
||||
el.spectrum("hide");
|
||||
|
||||
el.spectrum("set", "red");
|
||||
|
||||
el.spectrum("destroy");
|
||||
|
||||
var el2 = $("<input />").spectrum({
|
||||
showInput: true
|
||||
});
|
||||
el2.on("change.spectrum", function(e, color) {
|
||||
ok(true, "Change should fire input changing");
|
||||
});
|
||||
el2.spectrum("container").find(".sp-input").val("blue").trigger("change");
|
||||
el2.spectrum("destroy");
|
||||
});
|
||||
|
||||
test( "Escape hides the colorpicker", function() {
|
||||
expect(1);
|
||||
var el = $("<input id='spec' />").spectrum();
|
||||
el.on("hide.spectrum", function(e) {
|
||||
ok(true, "Hide event should fire");
|
||||
});
|
||||
|
||||
// Simulate an escape before showing -- should do nothing
|
||||
var e = jQuery.Event("keydown");
|
||||
e.keyCode = 27;
|
||||
$(document).trigger(e);
|
||||
|
||||
el.spectrum("show");
|
||||
|
||||
// Simulate an escape after showing -- should call the hide handler
|
||||
$(document).trigger(e);
|
||||
|
||||
el.spectrum("destroy");
|
||||
});
|
||||
|
||||
test( "Dragging", function() {
|
||||
var el = $("<input id='spec' />").spectrum();
|
||||
var hueSlider = el.spectrum("container").find(".sp-hue");
|
||||
|
||||
ok (hueSlider.length, "There is a hue slider");
|
||||
|
||||
hueSlider.trigger("mousedown");
|
||||
|
||||
ok ($("body").hasClass("sp-dragging"), "The body has dragging class");
|
||||
|
||||
hueSlider.trigger("mouseup");
|
||||
|
||||
ok (!$("body").hasClass("sp-dragging"), "The body does not have a dragging class");
|
||||
|
||||
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( "Palette Events Fire In Correct Order ", function() {
|
||||
expect(2);
|
||||
var el = $("<input id='spec' value='red' />").spectrum({
|
||||
showPalette: true,
|
||||
palette: [
|
||||
["red", "green", "blue"]
|
||||
],
|
||||
move: function() {
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
var count = 0;
|
||||
el.on("move.spectrum", function(e) {
|
||||
ok(count === 0, "move fires before change");
|
||||
count++;
|
||||
});
|
||||
|
||||
el.on("change.spectrum", function(e) {
|
||||
ok(count === 1, "change fires after move");
|
||||
});
|
||||
|
||||
el.spectrum("container").find(".sp-thumb-el:last-child").click();
|
||||
el.spectrum("destroy");
|
||||
});
|
||||
|
||||
test( "Palette click events work ", function() {
|
||||
var el = $("<input id='spec' value='red' />").spectrum({
|
||||
showPalette: true,
|
||||
palette: [
|
||||
["red", "green", "blue"]
|
||||
],
|
||||
move: function() {
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
el.spectrum("container").find(".sp-thumb-el:nth-child(3)").click();
|
||||
equal (el.spectrum("get").toName(), "blue", "First click worked");
|
||||
el.spectrum("container").find(".sp-thumb-el:nth-child(2) .sp-thumb-inner").click();
|
||||
equal (el.spectrum("get").toName(), "green", "Second click worked (on child element)");
|
||||
el.spectrum("container").find(".sp-thumb-el:nth-child(1) .sp-thumb-inner").click();
|
||||
equal (el.spectrum("get").toName(), "red", "Third click worked (on child element)");
|
||||
el.spectrum("destroy");
|
||||
|
||||
});
|
||||
|
||||
test( "hideAfterPaletteSelect: Palette stays open after color select", function() {
|
||||
var el = $("<input id='spec' value='red' />").spectrum({
|
||||
showPalette: true,
|
||||
hideAfterPaletteSelect: false,
|
||||
palette: [
|
||||
["red", "green", "blue"]
|
||||
]
|
||||
});
|
||||
|
||||
el.spectrum("show");
|
||||
el.spectrum("container").find(".sp-thumb-el:nth-child(1)").click();
|
||||
|
||||
ok(!el.spectrum("container").hasClass('sp-hidden'), "palette is still visible after color selection");
|
||||
el.spectrum("destroy");
|
||||
});
|
||||
|
||||
test( "hideAfterPaletteSelect: Palette closes after color select", function() {
|
||||
var el = $("<input id='spec' value='red' />").spectrum({
|
||||
showPalette: true,
|
||||
hideAfterPaletteSelect: true,
|
||||
palette: [
|
||||
["red", "green", "blue"]
|
||||
]
|
||||
});
|
||||
|
||||
el.spectrum("show");
|
||||
el.spectrum("container").find(".sp-thumb-el:nth-child(1)").click();
|
||||
|
||||
ok(el.spectrum("container").hasClass('sp-hidden'), "palette is still hidden after color selection");
|
||||
el.spectrum("destroy");
|
||||
});
|
||||
|
||||
test( "Local Storage Is Limited ", function() {
|
||||
|
||||
var el = $("<input id='spec' value='red' />").spectrum({
|
||||
localStorageKey: "spectrum.tests",
|
||||
palette: [["#ff0", "#0ff"]],
|
||||
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("set", "#ff0");
|
||||
el.spectrum("set", "#0ff");
|
||||
|
||||
equal (
|
||||
localStorage["spectrum.tests"],
|
||||
"rgb(204, 0, 0);rgb(187, 0, 0);rgb(170, 0, 0)",
|
||||
"Local storage array did not get changed by selecting palette items"
|
||||
);
|
||||
el.spectrum("destroy");
|
||||
|
||||
});
|
||||
|
||||
module("Options");
|
||||
|
||||
test ("allowEmpty", function() {
|
||||
var el = $("<input value='red' />").spectrum({
|
||||
allowEmpty: true
|
||||
});
|
||||
el.spectrum("set", null);
|
||||
ok(!el.spectrum("get"), "input[type] color does not allow null values");
|
||||
el.spectrum("destroy");
|
||||
|
||||
el = $("<input value='red' />").spectrum();
|
||||
el.spectrum("set", null);
|
||||
ok(el.spectrum("get"), "input[type] color does not allow null values");
|
||||
el.spectrum("destroy");
|
||||
});
|
||||
|
||||
test ("clickoutFiresChange", function() {
|
||||
var el = $("<input value='red' />").spectrum({
|
||||
clickoutFiresChange: false
|
||||
});
|
||||
el.spectrum("show");
|
||||
equal ( el.spectrum("get").toName(), "red", "Color is initialized");
|
||||
el.spectrum("set", "orange");
|
||||
equal ( el.spectrum("get").toName(), "orange", "Color is set");
|
||||
$(document).click();
|
||||
equal ( el.spectrum("get").toName(), "red", "Color is reverted after clicking 'cancel'");
|
||||
el.spectrum("destroy");
|
||||
|
||||
// Try again with default behavior (clickoutFiresChange = true)
|
||||
el = $("<input value='red' />").spectrum();
|
||||
el.spectrum("show");
|
||||
equal ( el.spectrum("get").toName(), "red", "Color is initialized");
|
||||
el.spectrum("set", "orange");
|
||||
equal ( el.spectrum("get").toName(), "orange", "Color is set");
|
||||
$(document).click();
|
||||
equal ( el.spectrum("get").toName(), "orange", "Color is changed after clicking out");
|
||||
el.spectrum("destroy");
|
||||
});
|
||||
|
||||
test ("replacerClassName", function() {
|
||||
var el = $("<input />").appendTo("body").spectrum({
|
||||
replacerClassName: "test"
|
||||
});
|
||||
ok (el.next(".sp-replacer").hasClass("test"), "Replacer class has been applied");
|
||||
el.spectrum("destroy").remove();
|
||||
});
|
||||
|
||||
test ("containerClassName", function() {
|
||||
var el = $("<input />").appendTo("body").spectrum({
|
||||
containerClassName: "test"
|
||||
});
|
||||
ok (el.spectrum("container").hasClass("test"), "Container class has been applied");
|
||||
el.spectrum("destroy").remove();
|
||||
});
|
||||
|
||||
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 numPaletteElements = spec.spectrum("container").find(".sp-palette-row:not(.sp-palette-row-selection) .sp-thumb-el").length;
|
||||
equal (numPaletteElements, 2, "Two palette elements to start");
|
||||
spec.spectrum("option", "palette", [['red'], ['green'], ['blue']]);
|
||||
var optPalette = spec.spectrum("option", "palette");
|
||||
deepEqual (optPalette, [['red'], ['green'], ['blue']], "Changing an option then fetching it is updated");
|
||||
numPaletteElements = spec.spectrum("container").find(".sp-palette-row:not(.sp-palette-row-selection) .sp-thumb-el").length;
|
||||
equal (numPaletteElements, 3, "Three palette elements after updating");
|
||||
|
||||
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");
|
||||
|
||||
|
||||
// Issue #70 - https://github.com/bgrins/spectrum/issues/70
|
||||
equal (spec.spectrum("option", "showPalette"), true, "showPalette is true by default");
|
||||
spec.spectrum("option", "showPalette", false);
|
||||
|
||||
equal (spec.spectrum("option", "showPalette"), false, "showPalette is false after setting showPalette");
|
||||
spec.spectrum("option", "showPaletteOnly", true);
|
||||
|
||||
equal (spec.spectrum("option", "showPaletteOnly"), true, "showPaletteOnly is true after setting showPaletteOnly");
|
||||
equal (spec.spectrum("option", "showPalette"), true, "showPalette is true after setting showPaletteOnly");
|
||||
|
||||
spec.spectrum("destroy");
|
||||
appendToDefault.spectrum("destroy");
|
||||
appendToOther.spectrum("destroy");
|
||||
appendToOtherFlat.spectrum("destroy");
|
||||
appendToParent.spectrum("destroy").remove();
|
||||
delete window.localStorage["spectrum.example"];
|
||||
container.remove();
|
||||
});
|
||||
|
||||
test ("Show Input works as expected", function() {
|
||||
var el = $("<input />").spectrum({
|
||||
showInput: true,
|
||||
color: "red"
|
||||
});
|
||||
var input = el.spectrum("container").find(".sp-input");
|
||||
|
||||
equal(input.val(), "red", "Input is set to color by default");
|
||||
input.val("").trigger("change");
|
||||
|
||||
ok(input.hasClass("sp-validation-error"), "Input has validation error class after being emptied.");
|
||||
|
||||
input.val("red").trigger("change");
|
||||
|
||||
ok(!input.hasClass("sp-validation-error"), "Input does not have validation error class after being reset to original color.");
|
||||
|
||||
equal (el.spectrum("get").toHexString(), "#ff0000", "Color is still red");
|
||||
el.spectrum("destroy");
|
||||
});
|
||||
|
||||
test ("Toggle Picker Area button works as expected", function() {
|
||||
var div = $("<div style='position:absolute; right:0; height:20px; width:150px'>").appendTo('body').show(),
|
||||
el = $("<input />").appendTo(div);
|
||||
el.spectrum({
|
||||
showInput: true,
|
||||
showPaletteOnly: true,
|
||||
togglePaletteOnly: true,
|
||||
color: "red"
|
||||
});
|
||||
|
||||
var spectrum = el.spectrum("container").show(),
|
||||
toggle = spectrum.find(".sp-palette-toggle"),
|
||||
picker = spectrum.find(".sp-picker-container"),
|
||||
palette = spectrum.find(".sp-palette-container");
|
||||
|
||||
// Open the Colorpicker
|
||||
el.spectrum("show");
|
||||
equal(picker.is(":hidden"), true, "The picker area is hidden by default.");
|
||||
ok(spectrum.hasClass("sp-palette-only"), "The 'palette-only' class is enabled.");
|
||||
|
||||
// Click the Picker area Toggle button to show the Picker
|
||||
toggle.click();
|
||||
|
||||
equal(picker.is(":hidden"), false, "After toggling, the picker area is visible.");
|
||||
ok(!spectrum.hasClass("sp-palette-only"), "The 'palette-only' class is disabled.");
|
||||
equal(Math.round(picker.offset().top), Math.round(palette.offset().top), "The picker area is next to the palette.");
|
||||
|
||||
// Click the toggle again to hide the picker
|
||||
toggle.trigger("click");
|
||||
|
||||
equal(picker.is(":hidden"), true, "After toggling again, the picker area is hidden.");
|
||||
ok(spectrum.hasClass("sp-palette-only"), "And the 'palette-only' class is enabled.");
|
||||
|
||||
// Cleanup
|
||||
el.spectrum("hide");
|
||||
el.spectrum("destroy");
|
||||
el.remove();
|
||||
div.remove();
|
||||
});
|
||||
|
||||
test ("Tooltip is formatted based on preferred format", function() {
|
||||
var el = $("<input />").spectrum({
|
||||
showInput: true,
|
||||
color: "red",
|
||||
showPalette: true,
|
||||
palette: [["red", "rgba(255, 255, 255, .5)", "rgb(0, 0, 255)"]]
|
||||
});
|
||||
el.spectrum("show");
|
||||
|
||||
function getTitlesString() {
|
||||
return el.spectrum("container").find(".sp-thumb-el").map(function() {
|
||||
return this.getAttribute("title");
|
||||
}).toArray().join(" ");
|
||||
}
|
||||
|
||||
equal (getTitlesString(), "rgb(255, 0, 0) rgba(255, 255, 255, 0.5) rgb(0, 0, 255)", "Titles use rgb format by default");
|
||||
|
||||
el.spectrum("option", "preferredFormat", "hex");
|
||||
equal (getTitlesString(), "#ff0000 #ffffff #0000ff", "Titles are updated to hex");
|
||||
equal (el.spectrum("get").toString(), "#ff0000", "Value's format is updated");
|
||||
|
||||
el.spectrum("option", "preferredFormat", "hex6");
|
||||
equal (getTitlesString(), "#ff0000 #ffffff #0000ff", "Titles are updated to hex6");
|
||||
equal (el.spectrum("get").toString(), "#ff0000", "Value's format is updated");
|
||||
|
||||
el.spectrum("option", "preferredFormat", "hex3");
|
||||
equal (getTitlesString(), "#f00 #fff #00f", "Titles are updated to hex3");
|
||||
equal (el.spectrum("get").toString(), "#f00", "Value's format is updated");
|
||||
|
||||
el.spectrum("option", "preferredFormat", "name");
|
||||
equal (getTitlesString(), "red #ffffff blue", "Titles are updated to name");
|
||||
equal (el.spectrum("get").toString(), "red", "Value's format is updated");
|
||||
|
||||
el.spectrum("option", "preferredFormat", "hsv");
|
||||
equal (getTitlesString(), "hsv(0, 100%, 100%) hsva(0, 0%, 100%, 0.5) hsv(240, 100%, 100%)", "Titles are updated to hsv");
|
||||
equal (el.spectrum("get").toString(), "hsv(0, 100%, 100%)", "Value's format is updated");
|
||||
|
||||
el.spectrum("option", "preferredFormat", "hsl");
|
||||
equal (getTitlesString(), "hsl(0, 100%, 50%) hsla(0, 0%, 100%, 0.5) hsl(240, 100%, 50%)", "Titles are updated to hsl");
|
||||
equal (el.spectrum("get").toString(), "hsl(0, 100%, 50%)", "Value's format is updated");
|
||||
|
||||
el.spectrum("option", "preferredFormat", "rgb");
|
||||
equal (getTitlesString(), "rgb(255, 0, 0) rgba(255, 255, 255, 0.5) rgb(0, 0, 255)", "Titles are updated to rgb");
|
||||
equal (el.spectrum("get").toString(), "rgb(255, 0, 0)", "Value's format is updated");
|
||||
|
||||
el.spectrum("destroy");
|
||||
});
|
||||
|
||||
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");
|
||||
});
|
||||
|
||||
// https://github.com/bgrins/spectrum/issues/97
|
||||
test( "Change events fire as described" , function() {
|
||||
|
||||
expect(0);
|
||||
var input = $("<input />");
|
||||
|
||||
input.on("change", function() {
|
||||
ok(false, "Change should not be fired inside of input change");
|
||||
});
|
||||
|
||||
input.spectrum({
|
||||
color: "red",
|
||||
change: function() {
|
||||
ok (false, "Change should not be fired inside of spectrum callback");
|
||||
}
|
||||
});
|
||||
|
||||
input.spectrum("set", "orange");
|
||||
|
||||
});
|
||||
|
||||
test("The selectedPalette should be updated in each spectrum instance, when storageKeys are identical.", function () {
|
||||
|
||||
delete window.localStorage["spectrum.tests"];
|
||||
|
||||
var colorToChoose = "rgb(0, 244, 0)";
|
||||
var firstEl = $("<input id='firstEl' value='red' />").spectrum({
|
||||
showPalette: true,
|
||||
localStorageKey: "spectrum.tests"
|
||||
});
|
||||
var secondEl = $("<input id='secondEl' value='blue' />").spectrum({
|
||||
showPalette: true,
|
||||
localStorageKey: "spectrum.tests"
|
||||
});
|
||||
|
||||
firstEl.spectrum("set", colorToChoose);
|
||||
|
||||
secondEl.spectrum("toggle");
|
||||
|
||||
var selectedColor = secondEl.spectrum("container").find('span[data-color="' + colorToChoose + '"]');
|
||||
ok(selectedColor.length > 0, "Selected color is also shown in the others instance's palette.");
|
||||
|
||||
delete window.localStorage["spectrum.tests"];
|
||||
|
||||
firstEl.spectrum("destroy");
|
||||
secondEl.spectrum("destroy");
|
||||
});
|
||||
|
||||
test("The selectedPalette should not be updated in spectrum instances that have different storageKeys.", function () {
|
||||
|
||||
delete window.localStorage["spectrum.test_1"];
|
||||
delete window.localStorage["spectrum.test_2"];
|
||||
|
||||
var colorToChoose = "rgb(0, 244, 0)";
|
||||
var firstEl = $("<input id='firstEl' value='red' />").spectrum({
|
||||
showPalette: true,
|
||||
localStorageKey: "spectrum.test_1"
|
||||
});
|
||||
var secondEl = $("<input id='secondEl' value='blue' />").spectrum({
|
||||
showPalette: true,
|
||||
localStorageKey: "spectrum.test_2"
|
||||
});
|
||||
|
||||
firstEl.spectrum("set", colorToChoose);
|
||||
|
||||
secondEl.spectrum("toggle");
|
||||
|
||||
var selectedColor = secondEl.spectrum("container").find('span[data-color="' + colorToChoose + '"]');
|
||||
ok(selectedColor.length === 0, "Selected color should not be available in instances with other storageKey.");
|
||||
|
||||
firstEl.spectrum("destroy");
|
||||
secondEl.spectrum("destroy");
|
||||
|
||||
delete window.localStorage["spectrum.test_1"];
|
||||
delete window.localStorage["spectrum.test_2"];
|
||||
});
|
||||
|
||||
test( "Cancelling reverts color", function() {
|
||||
var el = $("<input value='red' />").spectrum();
|
||||
el.spectrum("show");
|
||||
equal ( el.spectrum("get").toName(), "red", "Color is initialized");
|
||||
el.spectrum("set", "orange");
|
||||
equal ( el.spectrum("get").toName(), "orange", "Color is set");
|
||||
el.spectrum("container").find(".sp-cancel").click();
|
||||
equal ( el.spectrum("get").toName(), "red", "Color is reverted after clicking 'cancel'");
|
||||
el.spectrum("destroy");
|
||||
});
|
||||
|
||||
test( "Choosing updates the color", function() {
|
||||
var el = $("<input value='red' />").spectrum();
|
||||
el.spectrum("show");
|
||||
equal ( el.spectrum("get").toName(), "red", "Color is initialized");
|
||||
el.spectrum("set", "orange");
|
||||
equal ( el.spectrum("get").toName(), "orange", "Color is set");
|
||||
el.spectrum("container").find(".sp-choose").click();
|
||||
equal ( el.spectrum("get").toName(), "orange", "Color is kept after clicking 'choose'");
|
||||
el.spectrum("destroy");
|
||||
});
|
||||
|
||||
test( "Custom offset", function() {
|
||||
var el = $("<input value='red' />").spectrum();
|
||||
el.spectrum("show");
|
||||
deepEqual (el.spectrum("container").offset(), {top: 0, left: 0});
|
||||
el.spectrum("hide");
|
||||
el.spectrum("offset", {top: 10, left: 10});
|
||||
el.spectrum("show");
|
||||
deepEqual (el.spectrum("container").offset(), {top: 10, left: 10});
|
||||
el.spectrum("hide");
|
||||
el.spectrum("offset", null);
|
||||
el.spectrum("show");
|
||||
deepEqual (el.spectrum("container").offset(), {top: 0, left: 0});
|
||||
el.spectrum("hide");
|
||||
el.spectrum("destroy");
|
||||
|
||||
var el2 = $("<input value='red' />").spectrum({
|
||||
offset: { top: 100, left: 100 }
|
||||
});
|
||||
el2.spectrum("show");
|
||||
deepEqual (el2.spectrum("container").offset(), {top: 100, left: 100});
|
||||
el2.spectrum("hide");
|
||||
});
|
||||
113
common/js/plugins/spectrum/themes/index.html
Normal file
113
common/js/plugins/spectrum/themes/index.html
Normal file
|
|
@ -0,0 +1,113 @@
|
|||
<!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>
|
||||
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="sp-dark.css">
|
||||
|
||||
</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>Themes</h2>
|
||||
|
||||
<div class="alert">
|
||||
This page is in development.
|
||||
</div>
|
||||
|
||||
<div id="theme-gallery">
|
||||
<h3>Gallery of existing themes</h3>
|
||||
|
||||
<div class="theme" id="sp-light">
|
||||
<h4>sp-light</h4>
|
||||
<p>This is the default theme that you know and love.</p>
|
||||
|
||||
<div class='example'>
|
||||
<input type='text' />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="theme" id="sp-dark">
|
||||
<h4>sp-dark</h4>
|
||||
<p>Similar to sp-light, only ... darker</p>
|
||||
|
||||
<div class='example'>
|
||||
<input type='text' />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="theme-instructions">
|
||||
<h3>Instructions for building themes</h3>
|
||||
<p>
|
||||
You can change most any property on spectrum using CSS. Anything from borders and colors, to the size of the draggable areas, to the layout of the colorpicker can be changed with plain CSS.
|
||||
</p>
|
||||
<h4>Playing friendly with other themes</h4>
|
||||
<p>
|
||||
Please prefix all of your rules with <code>.theme-name</code>. The exception is for changes to <code>.sp-container</code> and <code>.sp-replacer</code>, which will have your theme name applied.
|
||||
</p>
|
||||
<p>
|
||||
See a basic scaffold for a super simple theme. See <a href='sp-dark.css'>sp-dark.css</a> for a slightly more advanced example.
|
||||
</p>
|
||||
<pre>
|
||||
.theme-name.sp-container {
|
||||
|
||||
}
|
||||
.theme-name.sp-replacer {
|
||||
|
||||
}
|
||||
.theme-name .sp-preview {
|
||||
|
||||
}
|
||||
</pre>
|
||||
<h3>Submitting a theme</h3>
|
||||
<p>
|
||||
If you have made some customizations that you would like to share, please open a <a href="http://bgrins.github.com/spectrum/pulls">pull request</a> with the theme file inside of this themes/ directory in the project. Or <a href="http://bgrins.github.com/spectrum/issues">open an issue</a> with a link to the theme.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<script>
|
||||
$("#sp-light input").spectrum({
|
||||
theme: "sp-light"
|
||||
});
|
||||
$("#sp-dark input").spectrum({
|
||||
theme: "sp-dark"
|
||||
});
|
||||
</script>
|
||||
<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>
|
||||
128
common/js/plugins/spectrum/themes/sp-dark.css
Normal file
128
common/js/plugins/spectrum/themes/sp-dark.css
Normal file
|
|
@ -0,0 +1,128 @@
|
|||
/* Container */
|
||||
.sp-dark.sp-container {
|
||||
background-color: #333;
|
||||
border: solid 1px #555;
|
||||
}
|
||||
|
||||
/* Replacer (the little preview div that shows up instead of the <input>) */
|
||||
.sp-dark.sp-replacer {
|
||||
border: solid 1px #fff;
|
||||
background: #333;
|
||||
color: #eee;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.sp-replacer:hover, .sp-replacer.sp-active {
|
||||
border-color: #F0C49B;
|
||||
color: #fff;
|
||||
}
|
||||
.sp-replacer.sp-disabled {
|
||||
border-color: silver;
|
||||
color: silver;
|
||||
}
|
||||
.sp-dark .sp-preview {
|
||||
border: solid 1px #999;
|
||||
}
|
||||
.sp-dark .sp-cancel {
|
||||
color: #f99f9f !important;
|
||||
}
|
||||
|
||||
.sp-dark, .sp-dark button, .sp-dark input, .sp-color, .sp-hue {
|
||||
|
||||
}
|
||||
|
||||
/* Input */
|
||||
.sp-dark .sp-input-container {
|
||||
|
||||
}
|
||||
.sp-dark .sp-initial-disabled .sp-input-container {
|
||||
|
||||
}
|
||||
.sp-dark .sp-input {
|
||||
|
||||
}
|
||||
.sp-dark .sp-input:focus {
|
||||
|
||||
}
|
||||
.sp-dark .sp-input.sp-validation-error {
|
||||
|
||||
}
|
||||
|
||||
.sp-dark .sp-picker-container , .sp-dark .sp-palette-container {
|
||||
|
||||
}
|
||||
.sp-dark .sp-picker-container {
|
||||
|
||||
}
|
||||
|
||||
/* Palettes */
|
||||
.sp-dark .sp-palette-container {
|
||||
|
||||
}
|
||||
|
||||
.sp-dark .sp-palette .sp-thumb-el {
|
||||
|
||||
}
|
||||
.sp-dark .sp-palette .sp-thumb-el:hover, .sp-dark .sp-palette .sp-thumb-el.sp-thumb-active {
|
||||
|
||||
}
|
||||
.sp-dark .sp-thumb-el {
|
||||
}
|
||||
|
||||
/* Initial */
|
||||
.sp-dark .sp-initial {
|
||||
|
||||
}
|
||||
.sp-dark .sp-initial span {
|
||||
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
.sp-dark .sp-button-container {
|
||||
|
||||
}
|
||||
|
||||
/* Replacer (the little preview div that shows up instead of the <input>) */
|
||||
.sp-dark.sp-replacer {
|
||||
|
||||
}
|
||||
.sp-dark.sp-replacer:hover, .sp-dark.sp-replacer.sp-active {
|
||||
border-color: #F0C49B;
|
||||
color: #111;
|
||||
}
|
||||
.sp-dark.sp-replacer.sp-disabled {
|
||||
|
||||
}
|
||||
.sp-dark .sp-dd {
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
.sp-dark .sp-preview {
|
||||
|
||||
}
|
||||
.sp-dark .sp-palette {
|
||||
|
||||
}
|
||||
.sp-dark .sp-palette .sp-thumb-el {
|
||||
|
||||
}
|
||||
|
||||
.sp-dark button {
|
||||
|
||||
}
|
||||
.sp-dark button:hover {
|
||||
|
||||
}
|
||||
.sp-dark button:active {
|
||||
|
||||
}
|
||||
.sp-dark .sp-cancel {
|
||||
|
||||
}
|
||||
.sp-dark .sp-cancel:hover {
|
||||
|
||||
}
|
||||
.sp-dark .sp-palette span:hover, .sp-dark .sp-palette span.sp-thumb-active {
|
||||
|
||||
}
|
||||
|
|
@ -10,6 +10,15 @@ jQuery(function($){
|
|||
|
||||
// 컬러 피커가 내장된 브라우저에서는 내장된 컬러피커 이용 by misol 2016.02.05
|
||||
if ( $("input.color-indicator").prop('type') != 'color' ) {
|
||||
$('input.color-indicator').xe_colorpicker();
|
||||
$('input.color-indicator').xe_colorpicker({
|
||||
window:
|
||||
{
|
||||
position:
|
||||
{
|
||||
x: 'screenCenter', // acceptable values "left", "center", "right", "screenCenter", or relative px value
|
||||
y: 'center', // acceptable values "top", "bottom", "center", or relative px value
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
|
@ -427,11 +427,13 @@ margin-bottom: 10px;
|
|||
.x input[type="email"],
|
||||
.x input[type="url"],
|
||||
.x input[type="search"],
|
||||
.x input[type="tel"],
|
||||
.x input[type="color"] {
|
||||
.x input[type="tel"] {
|
||||
height: 16px;
|
||||
line-height: 16px;
|
||||
}
|
||||
.x input[type="color"] {
|
||||
height: 25px;
|
||||
}
|
||||
.x input[type="number"] {
|
||||
width: 50px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
<!--%load_js_plugin("ui.tree")-->
|
||||
|
||||
<load target="js/document_category.js" />
|
||||
<!--%load_js_plugin("ui.colorpicker")-->
|
||||
<!--%load_js_plugin("spectrum")-->
|
||||
<script>
|
||||
var category_title = "{$lang->category}";
|
||||
</script>
|
||||
|
|
@ -61,7 +61,7 @@
|
|||
<div class="x_control-group">
|
||||
<label class="x_control-label" for="category_color">{$lang->category_color}</label>
|
||||
<div class="x_controls">
|
||||
<span class="x_input-append"><input type="text" class="color-indicator" name="category_color" id="category_color" value="" /></span>
|
||||
<span class="x_input-append"><input type="color" class="rx-spectrum" name="category_color" id="category_color" value="" /></span>
|
||||
<a href="#categoy_color_help" class="x_icon-question-sign" data-toggle>{$lang->help}</a>
|
||||
<p id="categoy_color_help" hidden style="margin:8px 0 0 0">{$lang->about_category_color}</p>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -150,6 +150,7 @@ function clearValue(){
|
|||
$w.find('input[type="checkbox"]').removeAttr('checked');
|
||||
$w.find('.lang_code').trigger('reload-multilingual');
|
||||
$w.find('.color-indicator').trigger('keyup');
|
||||
$w.find('.rx-spectrum').trigger('keyup');
|
||||
}
|
||||
|
||||
function addNode(node,e){
|
||||
|
|
|
|||
|
|
@ -40,13 +40,13 @@
|
|||
<div class="x_control-group">
|
||||
<label for="" class="x_control-label">{$lang->gallery_border_color}</label>
|
||||
<div class="x_controls">
|
||||
<input type="color" id="border_color_input" class="color-indicator" size="7" value="#000000" />
|
||||
<input type="color" id="border_color_input" class="rx-spectrum" size="7" value="#000000" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="x_control-group">
|
||||
<label for="" class="x_control-label">{$lang->gallery_bg_color}</label>
|
||||
<div class="x_controls">
|
||||
<input type="color" id="bg_color_input" class="color-indicator" size="7" value="#FFFFFF" />
|
||||
<input type="color" id="bg_color_input" class="rx-spectrum" size="7" value="#FFFFFF" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="x_control-group">
|
||||
|
|
@ -65,5 +65,5 @@
|
|||
</div>
|
||||
</form>
|
||||
</section>
|
||||
<!--%load_js_plugin("ui.colorpicker")-->
|
||||
<!--%load_js_plugin("spectrum")-->
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<!--%load_js_plugin("ui")-->
|
||||
<!--%load_js_plugin("ui.colorpicker")-->
|
||||
<!--%load_js_plugin("spectrum")-->
|
||||
<!--%import("js/ui.hotkey.js",optimized=false)-->
|
||||
<!--%import("js/ui.toolbar.js",optimized=false)-->
|
||||
<!--%import("js/faceoff.js",optimized=false)-->
|
||||
|
|
@ -218,7 +218,7 @@
|
|||
<legend>{$lang->layout_manager[38]}</legend>
|
||||
<span class="inputall">
|
||||
<input type="text" id="border-width" size="3" title="border-width+px" />
|
||||
<input type="text" id="border-color" size="7" class="color-indicator" title="border-color" />
|
||||
<input type="color" id="border-color" size="7" class="rx-spectrum" title="border-color" />
|
||||
<select id="border-style" title="border-style">
|
||||
<option value="none">{$lang->layout_manager[39]}</option>
|
||||
<option value="hidden">hidden</option>
|
||||
|
|
@ -237,7 +237,7 @@
|
|||
<div>
|
||||
<label for="border-top-width">{$lang->layout_manager[34]} : </label>
|
||||
<input type="text" id="border-top-width" size="3" title="border-width+px" />
|
||||
<input type="text" id="border-top-color" size="7" class="color-indicator" title="border-color" />
|
||||
<input type="color" id="border-top-color" size="7" class="rx-spectrum" title="border-color" />
|
||||
<select id="border-top-style" title="border-style">
|
||||
<option value="none">{$lang->layout_manager[39]}</option>
|
||||
<option value="hidden">hidden</option>
|
||||
|
|
@ -254,7 +254,7 @@
|
|||
<div>
|
||||
<label for="border-right-width">{$lang->layout_manager[36]} : </label>
|
||||
<input type="text" id="border-right-width" size="3" title="border-width+px" />
|
||||
<input type="text" id="border-right-color" size="7" class="color-indicator" title="border-color" />
|
||||
<input type="color" id="border-right-color" size="7" class="rx-spectrum" title="border-color" />
|
||||
<select id="border-right-style" title="border-style">
|
||||
<option value="none">{$lang->layout_manager[39]}</option>
|
||||
<option value="hidden">hidden</option>
|
||||
|
|
@ -271,7 +271,7 @@
|
|||
<div>
|
||||
<label for="border-bottom-width">{$lang->layout_manager[37]} : </label>
|
||||
<input type="text" id="border-bottom-width" size="3" title="border-width+px" />
|
||||
<input type="text" id="border-bottom-color" size="7" class="color-indicator" title="border-color" />
|
||||
<input type="color" id="border-bottom-color" size="7" class="rx-spectrum" title="border-color" />
|
||||
<select id="border-bottom-style" title="border-style">
|
||||
<option value="none">{$lang->layout_manager[39]}</option>
|
||||
<option value="hidden">hidden</option>
|
||||
|
|
@ -288,7 +288,7 @@
|
|||
<div>
|
||||
<label for="border-left-width">{$lang->layout_manager[35]} : </label>
|
||||
<input type="text" id="border-left-width" size="3" title="border-width+px" />
|
||||
<input type="text" id="border-left-color" size="7" class="color-indicator" title="border-color" />
|
||||
<input type="color" id="border-left-color" size="7" class="rx-spectrum" title="border-color" />
|
||||
<select id="border-left-style" title="border-style">
|
||||
<option value="none">{$lang->layout_manager[39]}</option>
|
||||
<option value="hidden">hidden</option>
|
||||
|
|
@ -309,7 +309,7 @@
|
|||
<div class="visible-more">
|
||||
<div>
|
||||
<label for="background-color">{$lang->layout_manager[41]} : </label>
|
||||
<input type="text" id="background-color" size="7" class="color-indicator" />
|
||||
<input type="color" id="background-color" size="7" class="rx-spectrum" />
|
||||
</div>
|
||||
<div>
|
||||
<label for="background-image">{$lang->layout_manager[42]} :</label>
|
||||
|
|
@ -335,7 +335,7 @@
|
|||
</div>
|
||||
<div>
|
||||
<label for="color">{$lang->layout_manager[54]} : </label>
|
||||
<input type="text" id="color" size="7" class="color-indicator" />
|
||||
<input type="color" id="color" size="7" class="rx-spectrum" />
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
|
|
|||
|
|
@ -129,7 +129,7 @@
|
|||
</block>
|
||||
<block cond="$var->type == 'colorpicker'">
|
||||
{@ $use_colorpicker = true; }
|
||||
<input type="text" class="color-indicator" name="{$name}" id="{$name}" value="{$var->value}" />
|
||||
<input type="color" class="rx-spectrum" name="{$name}" id="{$name}" value="{$var->value}" />
|
||||
<p id="categoy_color_help" hidden style="margin:8px 0 0 0">{$lang->about_category_color}</p>
|
||||
</block>
|
||||
<p class="x_help-block">{$var->description}</p>
|
||||
|
|
@ -172,5 +172,5 @@
|
|||
</section>
|
||||
<iframe name="hiddenIframe" src="about:blank" hidden></iframe>
|
||||
<!--@if($use_colorpicker)-->
|
||||
<!--%load_js_plugin("ui.colorpicker")-->
|
||||
<!--%load_js_plugin("spectrum")-->
|
||||
<!--@end-->
|
||||
|
|
|
|||
|
|
@ -1242,9 +1242,14 @@ class moduleController extends module
|
|||
|
||||
$ext = strtolower(substr(strrchr($vars->addfile['name'],'.'),1));
|
||||
$vars->ext = $ext;
|
||||
if($vars->filter) $filter = explode(',',$vars->filter);
|
||||
else $filter = array('jpg','jpeg','gif','png');
|
||||
if(!in_array($ext,$filter)) return new Object(-1, 'msg_error_occured');
|
||||
if ($vars->filter)
|
||||
{
|
||||
$filter = array_map('trim', explode(',',$vars->filter));
|
||||
if (!in_array($ext, $filter))
|
||||
{
|
||||
return new Object(-1, 'msg_error_occured');
|
||||
}
|
||||
}
|
||||
|
||||
$vars->member_srl = $logged_info->member_srl;
|
||||
|
||||
|
|
@ -1314,9 +1319,9 @@ class moduleController extends module
|
|||
$args->module_filebox_srl = $vars->module_filebox_srl;
|
||||
$args->comment = $vars->comment;
|
||||
|
||||
// FIXME $args ??
|
||||
|
||||
return executeQuery('module.updateModuleFileBox', $vars);
|
||||
return executeQuery('module.updateModuleFileBox', $args);
|
||||
$output->add('save_filename', $save_filename);
|
||||
return $output;
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -4,6 +4,6 @@
|
|||
<column name="filename" type="varchar" size="250" notnull="notnull" />
|
||||
<column name="fileextension" type="varchar" size="4" notnull="notnull" index="idx_fileextension" />
|
||||
<column name="filesize" type="number" size="11" default="0" notnull="notnull" />
|
||||
<column name="comment" type="varchar" size="250" />
|
||||
<column name="comment" type="bigtext" />
|
||||
<column name="regdate" type="date" />
|
||||
</table>
|
||||
</table>
|
||||
|
|
|
|||
|
|
@ -63,6 +63,8 @@
|
|||
</object>
|
||||
<!--@elseif(in_array($val->fileextension,array('gif','png','jpg','jpeg')))-->
|
||||
<img src="{getUrl('')}{$val->filename}" style="max-height:60px" />
|
||||
<!--@else-->
|
||||
<a href="{getUrl('')}{$val->filename}">{basename($val->filename)}</a>
|
||||
<!--@end-->
|
||||
</td>
|
||||
<td>
|
||||
|
|
|
|||
|
|
@ -26,6 +26,8 @@
|
|||
|
||||
<!--@elseif(in_array($val->fileextension,array('gif','png','jpg','jpeg')))-->
|
||||
<img src="{getUrl('')}{$val->filename}" width="100" height="100" />
|
||||
<!--@else-->
|
||||
<a href="{getUrl('')}{$val->filename}">{basename($val->filename)}</a>
|
||||
<!--@end-->
|
||||
</div>
|
||||
</td>
|
||||
|
|
|
|||
|
|
@ -17,6 +17,8 @@
|
|||
</object>
|
||||
<!--@elseif(in_array($val->fileextension,array('gif','png','jpg','jpeg')))-->
|
||||
<img src="{getUrl('')}{$val->filename}" class="filebox_item" />
|
||||
<!--@else-->
|
||||
<a href="{getUrl('')}{$val->filename}">{basename($val->filename)}</a>
|
||||
<!--@end-->
|
||||
</td>
|
||||
<td>
|
||||
|
|
|
|||
|
|
@ -117,7 +117,7 @@
|
|||
<!--// colorpicker-->
|
||||
<div cond="$val->type == 'colorpicker'">
|
||||
{@ $use_colorpicker = true; }
|
||||
<input type="text" class="color-indicator" name="{$val->name}" id="{$val->name}" value="{$val->value}" />
|
||||
<input type="color" class="rx-spectrum" name="{$val->name}" id="{$val->name}" value="{$val->value}" />
|
||||
<p id="categoy_color_help" hidden style="margin:8px 0 0 0">{$lang->about_category_color}</p>
|
||||
</div>
|
||||
<a href="#about_{$val->name}" data-toggle class="x_icon-question-sign" cond="$val->description" style="vertical-align:top;margin-top:5px"|cond="$val->type == 'textarea'">{$lang->help}</a>
|
||||
|
|
@ -132,5 +132,5 @@
|
|||
</div>
|
||||
</form>
|
||||
<!--@if($use_colorpicker)-->
|
||||
<!--%load_js_plugin("ui.colorpicker")-->
|
||||
<!--%load_js_plugin("spectrum")-->
|
||||
<!--@end-->
|
||||
|
|
|
|||
|
|
@ -669,7 +669,7 @@ function doShowWidgetSizeSetup(px, py, obj) {
|
|||
if(el) {
|
||||
$el.val(val);
|
||||
|
||||
if($el.hasClass('color-indicator')) {
|
||||
if($el.hasClass('color-indicator') || $el.hasClass('rx-spectrum')) {
|
||||
if(val != 'transparent') {
|
||||
val = val.toUpperCase();
|
||||
$el.css('background', '#' + val);
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<load target="../../module/tpl/js/multi_order.js" />
|
||||
<load target="../../module/tpl/js/module_list.js" />
|
||||
<load target="../../module/tpl/js/mid.js" />
|
||||
<!--%load_js_plugin("ui.colorpicker")-->
|
||||
<!--%load_js_plugin("spectrum")-->
|
||||
|
||||
<div class="x_control-group">
|
||||
<label class="x_control-label" for="skin">{$lang->skin}</label>
|
||||
|
|
@ -49,7 +49,7 @@
|
|||
<input type="text" name="{$id}" />
|
||||
</block>
|
||||
<block cond="$var->type == 'color'">
|
||||
<input type="text" name="{$id}" value="" id="{$id}" class="color-indicator" style="width:178px" />
|
||||
<input type="color" name="{$id}" value="" id="{$id}" class="rx-spectrum" style="width:178px" />
|
||||
</block>
|
||||
<block cond="$var->type == 'textarea'">
|
||||
<textarea cond="$var->type == 'textarea'" name="{$id}" id="{$id}" rows="8" cols="42"></textarea>
|
||||
|
|
|
|||
|
|
@ -62,7 +62,7 @@
|
|||
<option value="solid">{$lang->cmd_widget_border_solid}</option>
|
||||
<option value="dotted">{$lang->cmd_widget_border_dotted}</option>
|
||||
</select>
|
||||
<input type="text" name="border_top_color" value="" class="color_input color-indicator" maxlength="7"/>
|
||||
<input type="color" name="border_top_color" value="" class="color_input rx-spectrum" maxlength="7"/>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
|
|
@ -72,7 +72,7 @@
|
|||
<option value="solid">{$lang->cmd_widget_border_solid}</option>
|
||||
<option value="dotted">{$lang->cmd_widget_border_dotted}</option>
|
||||
</select>
|
||||
<input type="text" name="border_left_color" value="" class="color_input color-indicator" maxlength="7"/>
|
||||
<input type="color" name="border_left_color" value="" class="color_input rx-spectrum" maxlength="7"/>
|
||||
</td>
|
||||
<td style="text-align:right">
|
||||
<input type="number" name="border_right_thick" value="" class="small_input" /> px
|
||||
|
|
@ -80,7 +80,7 @@
|
|||
<option value="solid">{$lang->cmd_widget_border_solid}</option>
|
||||
<option value="dotted">{$lang->cmd_widget_border_dotted}</option>
|
||||
</select>
|
||||
<input type="text" name="border_right_color" value="" class="color_input color-indicator" maxlength="7"/>
|
||||
<input type="color" name="border_right_color" value="" class="color_input rx-spectrum" maxlength="7"/>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
|
|
@ -90,12 +90,12 @@
|
|||
<option value="solid">{$lang->cmd_widget_border_solid}</option>
|
||||
<option value="dotted">{$lang->cmd_widget_border_dotted}</option>
|
||||
</select>
|
||||
<input type="text" name="border_bottom_color" value="" class="color_input color-indicator" maxlength="7"/>
|
||||
<input type="color" name="border_bottom_color" value="" class="color_input rx-spectrum" maxlength="7"/>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>{$lang->cmd_widget_background_color}</th>
|
||||
<td colspan="2"><input type="text" name="background_color" value="" class="input color-indicator" /></td>
|
||||
<td colspan="2"><input type="color" name="background_color" value="" class="input rx-spectrum" /></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>{$lang->cmd_widget_background_image_url}</th>
|
||||
|
|
@ -129,5 +129,5 @@
|
|||
.wgs input{margin:0!important;width:60px}
|
||||
</style>
|
||||
</section>
|
||||
<!--%load_js_plugin("ui.colorpicker")-->
|
||||
<!--%load_js_plugin("spectrum")-->
|
||||
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
<load target="../../admin/tpl/js/admin.js" />
|
||||
<load target="../../admin/tpl/js/jquery.tmpl.js" />
|
||||
<load target="js/generate_code.js" />
|
||||
<!--%load_js_plugin("ui.colorpicker")-->
|
||||
<!--%load_js_plugin("spectrum")-->
|
||||
<script>
|
||||
jQuery(function(){
|
||||
getWidgetVars();
|
||||
|
|
@ -72,7 +72,7 @@
|
|||
<input type="text" name="{$id}" value="" class="lang_code" />
|
||||
</div>
|
||||
|
||||
<input cond="$var->type == 'color'" type="text" name="{$id}" class="color-indicator" />
|
||||
<input cond="$var->type == 'color'" type="color" name="{$id}" class="rx-spectrum" />
|
||||
|
||||
<div cond="$var->type == 'textarea'">
|
||||
<textarea name="{$id}" rows="8" cols="42" class="lang_code"></textarea>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue