Repository: wieringen/tinycolorpicker
Branch: master
Commit: df748ba11bfa
Files: 38
Total size: 86.4 KB
Directory structure:
gitextract_yb7_sm4l/
├── .gitignore
├── .jshintrc
├── .travis.yml
├── Gruntfile.coffee
├── MIT-LICENSE.txt
├── README.md
├── bower.json
├── docs/
│ ├── css/
│ │ └── tinycolorpicker.css
│ ├── index.html
│ └── technical/
│ └── theme/
│ ├── layouts/
│ │ └── main.handlebars
│ ├── partials/
│ │ ├── attrs.handlebars
│ │ ├── classes.handlebars
│ │ ├── events.handlebars
│ │ ├── files.handlebars
│ │ ├── index.handlebars
│ │ ├── method.handlebars
│ │ ├── module.handlebars
│ │ ├── options.handlebars
│ │ ├── props.handlebars
│ │ └── sidebar.handlebars
│ └── theme.json
├── examples/
│ ├── nojquery/
│ │ ├── index.html
│ │ └── tinycolorpicker.css
│ └── simple/
│ ├── index.html
│ └── tinycolorpicker.css
├── lib/
│ ├── jquery.tinycolorpicker.js
│ └── tinycolorpicker.js
├── package.json
├── test/
│ ├── conf/
│ │ ├── karma-all.js
│ │ ├── karma-ci.js
│ │ ├── karma-common.js
│ │ ├── karma-debug.js
│ │ └── karma-dev.js
│ ├── fixtures/
│ │ ├── tinycolorpicker-css.html
│ │ └── tinycolorpicker.html
│ └── unit/
│ ├── jquery.tinycolorpicker.spec.js
│ └── tinycolorpicker.spec.js
└── tinycolorpicker.jquery.json
================================================
FILE CONTENTS
================================================
================================================
FILE: .gitignore
================================================
.DS_Store
.ftppass
dist/
docs/technical/generated/
node_modules/
*.sublime-project
*.sublime-workspace
================================================
FILE: .jshintrc
================================================
{
"laxcomma" : true
, "laxbreak" : false
}
================================================
FILE: .travis.yml
================================================
language: node_js
node_js:
- 0.10
before_script:
- export CHROME_BIN=chromium-browser
- export DISPLAY=:99.0
- sh -e /etc/init.d/xvfb start
- npm install -g grunt-cli
env:
global:
- secure: h/UQzq/D5P/fmZRCTNdJt5LrKjCNSEKY+nTfgnzXk3yt5bIvVVxkOLsWo8dmb7JWKHhS/UJrwzmrFNCNh2DH8Zm/ffkW505Z4tH3f6tZjEoQ0nSVyuumsJ7I7rEQ0Y7e2nGE+2X8FY54JIe+hM2mUdA87OLV8XL8pcYpQDO/I7s=
- secure: GJCmrqpUEkbAJ8/BfWvh8bGhGH8By1lOCTyArzBNph6EcW1x48fkVrnPYHt4JIEbDFtZbsUCeDoUut44m0pnqEb1JOEyDKDHZIWka+5i2qH4omod5zXkV9spXJ9RiM9gNlIlzQhc6A7u4uMC3pvgo8rvRONxN/I7Pf13tyDhgHQ=
script:
- grunt ci
after_script:
- cat ./dist/reports/coverage/**/lcov.info | ./node_modules/coveralls/bin/coveralls.js
================================================
FILE: Gruntfile.coffee
================================================
module.exports = ( grunt ) ->
grunt.loadNpmTasks "grunt-contrib-clean"
grunt.loadNpmTasks "grunt-contrib-compress"
grunt.loadNpmTasks "grunt-contrib-copy"
grunt.loadNpmTasks "grunt-contrib-jshint"
grunt.loadNpmTasks "grunt-contrib-uglify"
grunt.loadNpmTasks "grunt-contrib-yuidoc"
grunt.loadNpmTasks "grunt-ftp-deploy"
grunt.loadNpmTasks "grunt-karma"
grunt.loadNpmTasks "grunt-processhtml"
grunt.initConfig
pkg: grunt.file.readJSON "package.json"
# Banner we want to show above the minified js files.
#
banner: '/*! <%= pkg.title || pkg.name %> - v<%= pkg.version %> - ' +
'<%= grunt.template.today("yyyy-mm-dd") %>\n ' +
'<%= pkg.homepage ? "* " + pkg.homepage + "\\n *\\n " : "" %>' +
'* Copyright (c) <%= grunt.template.today("yyyy") %> <%= pkg.author.name %> <<%= pkg.author.email %>>;\n' +
' * Licensed under the <%= _.pluck(pkg.licenses, "type").join(", ") %> license */\n\n'
# Validate javascript files with jsHint.
#
jshint:
options:
jshintrc: ".jshintrc"
all: [
"lib/jquery.<%= pkg.name %>.js"
]
# Run unit tests.
#
karma:
dev:
configFile: "test/conf/karma-dev.js"
ci:
configFile: "test/conf/karma-ci.js"
# Remove old build.
#
clean:
dist:
src: "dist/"
# Copy the images and the index to the dist location.
#
copy:
docs:
files: [
{ expand: true, cwd: "docs", src: ["**/*", "!technical/**"], dest: "dist/docs", dot: true }
{ expand: true, cwd: "node_modules/baijs", src: "css/**/*", dest: "dist/docs" }
{ expand: true, cwd: "node_modules/baijs", src: "js/**/*", dest: "dist/docs" }
{ expand: true, cwd: "lib", src: "**/*", dest: "dist/docs/js" }
]
examples:
files: [
{ expand: true, cwd: "examples", src: "**/*", dest: "dist/examples" }
{ expand: true, cwd: "lib", src: "jquery.<%= pkg.name %>*", dest: "dist/examples/simple" }
{ expand: true, cwd: "lib", src: "<%= pkg.name %>*", dest: "dist/examples/nojquery" }
]
# Generate technical documentation from code.
#
yuidoc:
compile:
name: '<%= pkg.name %>'
description: '<%= pkg.description %>'
version: '<%= pkg.version %>'
url: '<%= pkg.homepage %>'
options:
paths: 'lib/'
themedir: 'docs/technical/theme',
outdir: 'docs/technical/generated'
# Minify the javascript.
#
uglify:
dist:
options:
banner: "<%= banner %>"
beautify: false
files: [
{ src: "lib/jquery.<%= pkg.name %>.js", dest: "lib/jquery.<%= pkg.name %>.min.js" }
{ src: "lib/<%= pkg.name %>.js", dest: "lib/<%= pkg.name %>.min.js" }
]
# Set paths and version.
#
processhtml:
options:
process: true
strip: true
environment: "dist"
data:
version: "<%= pkg.version %>"
html:
files: [
{ expand: true, src: "dist/docs/index.html" }
{ expand: true, src: "dist/examples/**/*.html" }
]
# Make a zipfile from the dist and examples.
#
compress:
docs:
options:
archive: "dist/<%= pkg.name %>-<%= pkg.version %>-docs.zip"
expand: true
cwd: "dist/docs"
src: "**/*"
dest: "."
examples :
options :
archive: "dist/<%= pkg.name %>-<%= pkg.version %>.zip"
expand : true
cwd: "dist/examples"
src: "**/*"
dest: "."
# Deploy plugin to baijs.com
#
"ftp-deploy":
docs:
auth:
host: "ftp.baijs.nl"
port: 21
authKey: "<%= pkg.name %>"
src: "dist/docs"
dest: "/"
examples:
auth:
host: "ftp.baijs.nl"
port: 21
authKey: "<%= pkg.name %>"
src: "dist/"
dest: "/"
exclusions: [
"docs"
"<%= pkg.name %>-<%= pkg.version %>-docs.zip"
]
grunt.registerTask(
"common"
[
"jshint"
"copy:docs"
"yuidoc"
"uglify:dist"
"copy:examples"
"processhtml"
"compress:docs"
"compress:examples"
]
)
grunt.registerTask(
"default"
[
"clean:dist"
"karma:dev"
"common"
]
)
grunt.registerTask(
"ci"
[
"clean:dist"
"karma:ci"
"common"
]
)
grunt.registerTask(
"ftp"
[
"default"
"ftp-deploy:docs"
"ftp-deploy:examples"
]
)
================================================
FILE: MIT-LICENSE.txt
================================================
Copyright 2013 Maarten Baijs
http://www.baijs.com
Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
"Software"), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:
The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
================================================
FILE: README.md
================================================
[tinycolorpicker](http://baijs.com/tinycolorpicker) [![Build Status][travis-image]][travis-url] [![Coverage Status][coveralls-image]][coveralls-url] [![NPM version][npm-image]][npm-url]
==================================================
** HELP MAINTAINER NEEDED!! **
Support
----------------------------
- Browser support differs between the jQuery plugin and the plain Javascript microlib. Specifically, the plain Javascript microlib does not support legacy browsers such as IE6-8. Use the jQuery plugin release if support for those browsers is required.
What you need to build your own version of tinycolorpicker
--------------------------------------
In order to build tinycolorpicker, you need to have Node.js/npm, and git 1.7 or later installed.
How to build your own tinycolorpicker
----------------------------
First, clone a copy of the main tinycolorpicker git repo by running:
```bash
git clone git://github.com/wieringen/tinycolorpicker.git
```
Install the grunt-cli package so that you will have the correct version of grunt available from any project that needs it. This should be done as a global install:
```bash
npm install -g grunt-cli
```
Enter the tinycolorpicker directory and install the Node dependencies, this time *without* specifying a global install:
```bash
cd tinycolorpicker && npm install
```
Make sure you have `grunt` installed by testing:
```bash
grunt -version
```
Then, to get a complete, minified (w/ Uglify.js), linted (w/ JSHint) version of tinycolorpicker, type the following:
```bash
grunt
```
The built version of tinycolorpicker will be put in the `dist/` subdirectory, along with the minified copy and associated map file.
Questions?
----------
If you have any questions, please feel free to email [me](mailto:wieringen@gmail.com).
[travis-image]: https://travis-ci.org/wieringen/tinycolorpicker.svg?branch=master
[travis-url]: https://travis-ci.org/wieringen/tinycolorpicker
[coveralls-image]: https://img.shields.io/coveralls/wieringen/tinycolorpicker/master.svg
[coveralls-url]: https://coveralls.io/r/wieringen/tinycolorpicker?branch=master
[npm-image]: https://badge.fury.io/js/tinycolorpicker.png
[npm-url]: http://badge.fury.io/js/tinycolorpicker
================================================
FILE: bower.json
================================================
{
"name": "tinycolorpicker",
"version": "0.9.5",
"description": "A lightweight cross browser jQuery based colorpicker.",
"main": "lib/jquery.tinycolorpicker.js",
"ignore": [
"**/.*",
"bower.json",
"Gruntfile.coffee",
"package.json",
"README.md"
],
"resolutions": {
"jquery": "~1.5.0"
},
"devDependencies": {
"baijs": "latest",
"chai": "~1.8.1",
"coveralls": "^2.11.2",
"grunt": "~0.4.1",
"grunt-contrib-clean": "~0.5.0",
"grunt-contrib-compress": "~0.5.2",
"grunt-contrib-copy": "~0.4.1",
"grunt-contrib-jshint": "~0.8.0",
"grunt-contrib-uglify": "~0.2.7",
"grunt-contrib-yuidoc": "^0.6.0",
"grunt-ftp-deploy": "~0.1.1",
"grunt-karma": "0.8.0",
"grunt-processhtml": "^0.3.6",
"grunt-text-replace": "~0.3.9",
"iectrl": "0.0.3",
"karma": "~0.12.0",
"karma-chai": "^0.1.0",
"karma-chai-jquery": "^1.0.0",
"karma-chai-sinon": "~0.1.0",
"karma-chrome-launcher": "~0.1.1",
"karma-coverage": "~0.1.3",
"karma-firefox-launcher": "~0.1.2",
"karma-html2js-preprocessor": "~0.1.0",
"karma-htmlfile-reporter": "~0.1.0",
"karma-ie-launcher": "~0.1.1",
"karma-ievms": "0.0.4",
"karma-jquery": "^0.1.0",
"karma-junit-reporter": "~0.2.1",
"karma-mocha": "~0.1.1",
"karma-phantomjs-launcher": "~0.1.1",
"karma-script-launcher": "~0.1.0",
"mocha": "~1.15.1",
"sinon": "~1.7.3",
"sinon-chai": "~2.4.0"
}
}
================================================
FILE: docs/css/tinycolorpicker.css
================================================
/* COLORPICKER 1 EXAMPLE */
#colorPicker1
{
width: 30px;
height: 30px;
position: relative;
clear: both;
margin: 0 auto 20px;
}
#colorPicker1 .track {
background: #EFEFEF url(../images/text-color.png) no-repeat 50% 50%;
height: 150px;
width: 150px;
padding: 10px;
position: absolute;
cursor: crosshair;
float: left;
left: -71px;
top: -71px;
display: none;
border: 1px solid #ccc;
z-index: 10;
-webkit-border-radius: 150px;
-moz-border-radius: 150px;
border-radius: 150px;
}
#colorPicker1 .color {
width: 25px;
height: 25px;
padding: 1px;
border: 1px solid #ccc;
display: block;
position: relative;
z-index: 11;
background-color: #EFEFEF;
-webkit-border-radius: 27px;
-moz-border-radius: 27px;
border-radius: 27px;
cursor: pointer;
}
#colorPicker1 .colorInner {
width: 25px;
height: 25px;
-webkit-border-radius: 27px;
-moz-border-radius: 27px;
border-radius: 27px;
}
#colorPicker1 .dropdown {
list-style: none;
display: none;
width: 27px;
position: absolute;
top: 28px;
border: 1px solid #ccc;
left: 0;
z-index: 1000;
}
#colorPicker1 .dropdown li{
height: 25px;
cursor: pointer;
}
/* COLORPICKER 2 EXAMPLE */
#colorPicker2
{
width: 87px;
height: 30px;
position: relative;
clear: both;
margin: 0 auto 20px;
}
#colorPicker2 .track {
background: #EFEFEF url(../images/firefox.png) no-repeat 50% 50%;
height: 150px;
width: 150px;
padding: 10px;
position: absolute;
cursor: crosshair;
float: left;
left: 75px;
top: -71px;
display: none;
border: 1px solid #ccc;
z-index: 10;
-webkit-border-radius: 150px;
-moz-border-radius: 150px;
border-radius: 150px;
}
#colorPicker2 .color {
width: 75px;
height: 25px;
line-height: 25px;
text-decoration : none;
padding: 1px;
border: 1px solid #ccc;
display: block;
position: relative;
z-index: 11;
color: #666;
background-color: #EFEFEF;
-webkit-border-radius: 27px;
-moz-border-radius: 27px;
border-radius: 27px;
cursor: pointer;
padding: 0 0 0 10px;
}
#colorPicker2 .colorInner {
width: 25px;
height: 25px;
float: right;
-webkit-border-radius: 27px;
-moz-border-radius: 27px;
border-radius: 27px;
border-left: 3px solid #ccc;
}
#colorPicker2 .dropdown {
list-style: none;
display: none;
width: 27px;
position: absolute;
top: 26px;
border: 1px solid #ccc;
right: 0;
z-index: 1000;
}
#colorPicker2 .dropdown li{
height: 25px;
cursor: pointer;
}
/* COLORPICKER 3 EXAMPLE */
#colorPicker3
{
width: 30px;
height: 30px;
position: relative;
clear: both;
margin: 0 auto 20px;
}
#colorPicker3 .track {
background: #EFEFEF url(../images/text-color.png) no-repeat 50% 50%;
height: 150px;
width: 150px;
padding: 10px;
position: absolute;
cursor: crosshair;
float: left;
left: -71px;
top: -71px;
display: none;
border: 1px solid #ccc;
z-index: 10;
-webkit-border-radius: 150px;
-moz-border-radius: 150px;
border-radius: 150px;
}
#colorPicker3 .color {
width: 25px;
height: 25px;
padding: 1px;
border: 1px solid #ccc;
display: block;
position: relative;
z-index: 11;
background-color: #EFEFEF;
-webkit-border-radius: 27px;
-moz-border-radius: 27px;
border-radius: 27px;
cursor: pointer;
}
#colorPicker3 .colorInner {
width: 25px;
height: 25px;
-webkit-border-radius: 27px;
-moz-border-radius: 27px;
border-radius: 27px;
}
#colorPicker3 .dropdown {
list-style: none;
display: none;
width: 27px;
position: absolute;
top: 28px;
border: 1px solid #ccc;
left: 0;
z-index: 1000;
}
#colorPicker3 .dropdown li{
height: 25px;
cursor: pointer;
}
================================================
FILE: docs/index.html
================================================
<!doctype html>
<html lang="en">
<head>
<title>Tiny Colorpicker: A lightweight cross browser color picker.</title>
<meta charset="utf-8">
<meta name="robots" content="all" />
<meta name="description" content="Tiny Colorpicker is a lightweight jQuery based content slider." />
<meta name="keywords" content="lightweight, jQuery, colorpicker, colors, javascript, web 2.0, User Interface" />
<meta name="author" content="Maarten baijs" />
<meta name="copyright" content="" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, target-densitydpi=device-dpi" />
<link href='https://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css'>
<!-- build:[href] css/ -->
<link rel="stylesheet" href="../node_modules/baijs/css/website.css" type="text/css" media="screen"/>
<!-- /build -->
<link rel="stylesheet" href="css/tinycolorpicker.css" type="text/css" media="screen"/>
<!--[if lte IE 8]>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6/html5shiv.min.js"></script>
<![endif]-->
<!-- build:[href] css/ -->
<!--[if lte IE 7]>
<link rel="stylesheet" href="../node_modules/baijs/css/website_ie.css" type="text/css" media="screen"/>
<![endif]-->
<!-- /build -->
<!--[if lte IE 5]>
<script type="text/javascript"> function handleError() { return true; } window.onerror = handleError; </script>
<![endif]-->
<script type="text/javascript" src="//code.jquery.com/jquery-latest.min.js"></script>
<!-- build:[src] js/ -->
<script type="text/javascript" src="../lib/jquery.tinycolorpicker.js"></script>
<!-- /build -->
<!-- build:[src] js/ -->
<script type="text/javascript" src="../node_modules/baijs/js/prettify.js"></script>
<script type="text/javascript" src="../node_modules/baijs/js/website.js"></script>
<!-- /build -->
<script type="text/javascript">window.google_analytics_uacct = "UA-4459599-4";</script>
</head>
<body>
<!-- OPEN WRAPPER -->
<div id="wrapper">
<header id="header">
<h1>Tiny Colorpicker</h1>
<span class="slogan"> A lightweight cross browser color picker.</span>
<section class="download">
<a href="tinycolorpicker-<%= version %>.zip" class="btn">Download v<%= version %></a>
<p>The latest source is available on <a href="https://github.com/wieringen/tinycolorpicker">GitHub</a>.</p>
</section>
</header>
<nav id="menu-primary" class="menu">
<ul>
<li><a href="/">Home</a></li>
<li><a href="../tinycarousel">Tiny Carousel</a></li>
<li><a href="../tinyscrollbar">Tiny Scrollbar</a></li>
<li><a href="../tinycircleslider">Tiny Circleslider</a></li>
<li><a href="../tinycolorpicker" class="active">Tiny Colorpicker</a></li>
</ul>
<select>
<option value="" selected="selected">Go to..</option>
<option value="/">Home</option>
<option value="../tinycarousel">Tiny Carousel</option>
<option value="../tinyscrollbar">Tiny Scrollbar</option>
<option value="../tinycircleslider">Tiny Circleslider</option>
<option value="../tinycolorpicker">Tiny Colorpicker</option>
<option value="../model-train-speedometer">Model Train Speedometer</option>
</select>
</nav>
<article id="col-main">
<section class="block">
<!-- google_ad_section_start -->
<h2>What is it?</h2>
<p>Tiny Colorpicker is a crossbrowser lib that creates a color picker (form) input. Its a easy way to add color pickers to your forms or user interface.</p>
<p>It comes in 2 flavours as a <strong>vanilla Javascript microlib</strong> and as a <strong>jQuery plugin</strong>.</p>
<p>Browser support differs between the jQuery plugin and the plain Javascript microlib. Specifically, the plain Javascript microlib does not support legacy browsers such as IE6-8. Use the jQuery plugin release if support for those browsers is required.</p>
<!-- google_ad_section_end -->
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_facebook"></a>
<a class="addthis_button_twitter"></a>
<a class="addthis_button_delicious"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=xa-4ce416993f847623"></script>
<!-- AddThis Button END -->
</section>
<section class="block">
<h2>Features</h2>
<ul class="list">
<li><strong>IOS, Android and Windows Phone support.</strong></li>
<li><strong>Available as a jQuery plugin and as a vanilla Javascript microlib.</strong></li>
<li>AMD, Node, requirejs and commonjs support.</li>
<li>Easy customizable</li>
<li>Can be used inside forms or outside</li>
<li>Lightweight</li>
<li><a href="https://github.com/wieringen/tinycolorpicker">Source is on GitHub</a></li>
</ul>
</section>
<section class="block">
<h2>Examples</h2>
<p>The examples below are all for the jQuery Plugin. You can find some more (advanced and simple) <a href="examples">examples here</a>. You can also find a example for the plain javascript library there.</p>
<p>The example below is the most basic version. The colors are just a image that is taken from the css and drawn to a canvas. So you are completely free in how your picker looks and how its styled.</p>
<div id="colorPicker1">
<a class="color"><div class="colorInner"></div></a>
<div class="track"></div>
<ul class="dropdown"><li></li></ul>
<input type="hidden" class="colorInput"/>
</div>
<script type="text/javascript">
$(document).ready(function()
{
$("#colorPicker1").tinycolorpicker();
});
</script>
<pre class="prettyprint"><code>
$(document).ready(function()
{
$("#colorpicker1").tinycolorpicker();
});
</code></pre>
<p>The example below is to make clear that it can pick colors from any image in any shape or form you want. The image is taken from stylesheet.</p>
<div id="colorPicker2">
<a class="color"><div class="colorInner"></div>Color :</a>
<div class="track"></div>
<ul class="dropdown"><li></li></ul>
<input type="hidden" class="colorInput"/>
</div>
<script type="text/javascript">
$(document).ready(function()
{
$("#colorPicker2").tinycolorpicker();
});
</script>
<pre class="prettyprint"><code>
$(document).ready(function()
{
$("#colorpicker2").tinycolorpicker();
});
</code></pre>
<p>The example below is to show how to use the setColor method.</p>
<div id="colorPicker3">
<a class="color"><div class="colorInner"></div></a>
<div class="track"></div>
<ul class="dropdown"><li></li></ul>
<input type="hidden" class="colorInput"/>
</div>
<script type="text/javascript">
$(document).ready(function()
{
$("#colorPicker3").tinycolorpicker();
var picker = $('#colorPicker3').data("plugin_tinycolorpicker");
picker.setColor("#FF45CC");
});
</script>
<pre class="prettyprint"><code>
$(document).ready(function()
{
$("#colorPicker3").tinycolorpicker();
var picker = $('#colorPicker3').data("plugin_tinycolorpicker");
picker.setColor("#FF45CC");
});
</code></pre>
</section>
<section class="block">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Responsive -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-6364750078473156"
data-ad-slot="7734741654"
data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</section>
<section class="block">
<!-- build:include ../../docs/technical/generated/classes/tinycolorpicker.html -->
<p>The generated API docs will be included here.</p>
<!-- /build -->
</section>
<section class="block">
<h2>Usage</h2>
<pre class="prettyprint"><code>
$(document).ready(function()
{
// Initialize a colorpicker like this.
//
var $box = $('#box');
$box.tinycolorpicker();
// Try this to get access to the actual colorpicker instance.
//
var box = $box.data("plugin_tinycolorpicker");
// Now you have access to all the methods and properties.
//
// box.setColor("#cccccc");
// console.log(box.colorRGB);
//
// etc..
// You can bind to the change event like this.
//
$box.bind("change", function()
{
console.log("do something when a new color is set");
});
});
</code></pre>
</section>
</article>
<aside id="col-right">
<section class="block">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Responsive2 -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-6364750078473156"
data-ad-slot="6807908455"
data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</section>
<section class="block">
<h2>Other projects</h2>
<nav id="menu-secondary" class="menu">
<ul class="block-menu">
<li><a href="../model-train-speedometer">Model Train Speedometer</a></li>
</ul>
</nav>
</section>
<section class="block">
<h2>License</h2>
<p>Tinycolorpicker is a free script its licensed under the MIT license. However a donation for my labor of love is greatly appreciated :) </p>
<p><form action="https://www.paypal.com/cgi-bin/webscr" method="post" class="beer">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="encrypted" value="-----BEGIN PKCS7-----MIIHJwYJKoZIhvcNAQcEoIIHGDCCBxQCAQExggEwMIIBLAIBADCBlDCBjjELMAkGA1UEBhMCVVMxCzAJBgNVBAgTAkNBMRYwFAYDVQQHEw1Nb3VudGFpbiBWaWV3MRQwEgYDVQQKEwtQYXlQYWwgSW5jLjETMBEGA1UECxQKbGl2ZV9jZXJ0czERMA8GA1UEAxQIbGl2ZV9hcGkxHDAaBgkqhkiG9w0BCQEWDXJlQHBheXBhbC5jb20CAQAwDQYJKoZIhvcNAQEBBQAEgYAvFgegsbgmGiH/9butmjnruVpGsnuYVgz8MrozUsUD+7EUBHPaceqXAfpXPb2FtTtK29XehZGgdllxOjk9ZQkYPGiz292Y/93kWPzcLuEcWNI9qzyZxCXZ/j2GaqbtCtFJjR7lHtLkV/4Jq56HzQo0Vhe5R1zFzhnuu4bVOsEqwDELMAkGBSsOAwIaBQAwgaQGCSqGSIb3DQEHATAUBggqhkiG9w0DBwQIolVnmbzrwZqAgYAf6pPPAbwWo9EATl2HLz+zJi8rpWEGxRJewGSzRkqO60Yl4/IBceSvgRf7M74OgZCLX9kkp9fCnW9KbigVYlZm/ACD5fYMJqV4QF+7DlsOc6ybPjKcbTXK2Cozl2I1msE42cVZiB+FzVw73Cr4XXL1Zk8RaRo1zN04lX0LfAqdJKCCA4cwggODMIIC7KADAgECAgEAMA0GCSqGSIb3DQEBBQUAMIGOMQswCQYDVQQGEwJVUzELMAkGA1UECBMCQ0ExFjAUBgNVBAcTDU1vdW50YWluIFZpZXcxFDASBgNVBAoTC1BheVBhbCBJbmMuMRMwEQYDVQQLFApsaXZlX2NlcnRzMREwDwYDVQQDFAhsaXZlX2FwaTEcMBoGCSqGSIb3DQEJARYNcmVAcGF5cGFsLmNvbTAeFw0wNDAyMTMxMDEzMTVaFw0zNTAyMTMxMDEzMTVaMIGOMQswCQYDVQQGEwJVUzELMAkGA1UECBMCQ0ExFjAUBgNVBAcTDU1vdW50YWluIFZpZXcxFDASBgNVBAoTC1BheVBhbCBJbmMuMRMwEQYDVQQLFApsaXZlX2NlcnRzMREwDwYDVQQDFAhsaXZlX2FwaTEcMBoGCSqGSIb3DQEJARYNcmVAcGF5cGFsLmNvbTCBnzANBgkqhkiG9w0BAQEFAAOBjQAwgYkCgYEAwUdO3fxEzEtcnI7ZKZL412XvZPugoni7i7D7prCe0AtaHTc97CYgm7NsAtJyxNLixmhLV8pyIEaiHXWAh8fPKW+R017+EmXrr9EaquPmsVvTywAAE1PMNOKqo2kl4Gxiz9zZqIajOm1fZGWcGS0f5JQ2kBqNbvbg2/Za+GJ/qwUCAwEAAaOB7jCB6zAdBgNVHQ4EFgQUlp98u8ZvF71ZP1LXChvsENZklGswgbsGA1UdIwSBszCBsIAUlp98u8ZvF71ZP1LXChvsENZklGuhgZSkgZEwgY4xCzAJBgNVBAYTAlVTMQswCQYDVQQIEwJDQTEWMBQGA1UEBxMNTW91bnRhaW4gVmlldzEUMBIGA1UEChMLUGF5UGFsIEluYy4xEzARBgNVBAsUCmxpdmVfY2VydHMxETAPBgNVBAMUCGxpdmVfYXBpMRwwGgYJKoZIhvcNAQkBFg1yZUBwYXlwYWwuY29tggEAMAwGA1UdEwQFMAMBAf8wDQYJKoZIhvcNAQEFBQADgYEAgV86VpqAWuXvX6Oro4qJ1tYVIT5DgWpE692Ag422H7yRIr/9j/iKG4Thia/Oflx4TdL+IFJBAyPK9v6zZNZtBgPBynXb048hsP16l2vi0k5Q2JKiPDsEfBhGI+HnxLXEaUWAcVfCsQFvd2A1sxRr67ip5y2wwBelUecP3AjJ+YcxggGaMIIBlgIBATCBlDCBjjELMAkGA1UEBhMCVVMxCzAJBgNVBAgTAkNBMRYwFAYDVQQHEw1Nb3VudGFpbiBWaWV3MRQwEgYDVQQKEwtQYXlQYWwgSW5jLjETMBEGA1UECxQKbGl2ZV9jZXJ0czERMA8GA1UEAxQIbGl2ZV9hcGkxHDAaBgkqhkiG9w0BCQEWDXJlQHBheXBhbC5jb20CAQAwCQYFKw4DAhoFAKBdMBgGCSqGSIb3DQEJAzELBgkqhkiG9w0BBwEwHAYJKoZIhvcNAQkFMQ8XDTEwMTAyMzE2NDM0NFowIwYJKoZIhvcNAQkEMRYEFEbIQ/5eGHe4caTb2EdvFcakbx+sMA0GCSqGSIb3DQEBAQUABIGAJR1+WRNY2r2XY4Od/z9/TmA+Vy/oR3tmlJlGtel6/neG+iQnFkgmUKF3rRraclOW2HrPSSCdMVMKpsK+qlGkisWofwJAV5WTx/OgM9zt7yERV1TcvK0jyEjmogBpN23jPWLB9OYMmJruSpIS3wime11zYT8JFDZqO1VugP3XgUQ=-----END PKCS7-----">
<input type="image" src="https://www.paypal.com/en_US/i/btn/btn_donate_LG.gif" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" src="https://www.paypal.com/nl_NL/i/scr/pixel.gif" width="1" height="1" />
</form></p>
</section>
<section class="block">
<h2>Support</h2>
<p> For a small fee I can help you implement the script in your project. Missing any features? I can build them for you <span id="mcon"></span></p>
</section>
</aside>
<footer id="footer">© <a href="/">Maarten Baijs</a> 2009-2014</footer>
</div>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-4459599-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>
================================================
FILE: docs/technical/theme/layouts/main.handlebars
================================================
{{>layout_content}}
================================================
FILE: docs/technical/theme/partials/attrs.handlebars
================================================
<div id="attr_{{name}}" class="attr item{{#if access}} {{access}}{{/if}}{{#if deprecated}} deprecated{{/if}}{{#if extended_from}} inherited{{/if}}">
<a name="config_{{name}}"></a> {{! For backwards compatibility }}
<h3 class="name"><code>{{name}}</code></h3>
<span class="type">{{#crossLink type}}{{/crossLink}}</span>
{{#if deprecated}}
<span class="flag deprecated"{{#if deprecationMessage}} title="{{deprecationMessage}}"{{/if}}>deprecated</span>
{{/if}}
{{#if access}}
<span class="flag {{access}}">{{access}}</span>
{{/if}}
{{#if final}}
<span class="flag final">final</span>
{{/if}}
{{#if static}}
<span class="flag static">static</span>
{{/if}}
{{#if optional}}
<span class="flag optional">optional</span>
{{/if}}
{{#if required}}
<span class="flag required">required</span>
{{/if}}
{{#if readonly}}
<span class="flag readonly">readonly</span>
{{/if}}
<div class="meta">
{{#if overwritten_from}}
<p>Inherited from
<a href="{{crossLinkRaw overwritten_from/class}}#attr_{{overwritten_from/name}}">
{{overwritten_from/class}}
</a>
{{#if foundAt}}
but overwritten in
{{/if}}
{{else}}
{{#if extended_from}}
<p>Inherited from
<a href="{{crossLinkRaw extended_from}}#attr_{{name}}">{{extended_from}}</a>:
{{else}}
{{#providedBy}}
<p>Provided by the <a href="../modules/{{.}}.html">{{.}}</a> module.</p>
{{/providedBy}}
<p>
{{#if foundAt}}
Defined in
{{/if}}
{{/if}}
{{/if}}
{{#if foundAt}}
<a href="{{foundAt}}">`{{{file}}}:{{{line}}}`</a>
{{/if}}
</p>
{{#if deprecationMessage}}
<p>Deprecated: {{deprecationMessage}}</p>
{{/if}}
{{#if since}}
<p>Available since {{since}}</p>
{{/if}}
</div>
<div class="description">
{{{attrDescription}}}
</div>
{{#if default}}
<p><strong>Default:</strong> {{default}}</p>
{{/if}}
{{#if emit}}
<div class="emits box">
<h4>Fires event <code>{{name}}Change</code></h4>
<p>
Fires when the value for the configuration attribute `{{{name}}}` is
changed. You can listen for the event using the `on` method if you
wish to be notified before the attribute's value has changed, or
using the `after` method if you wish to be notified after the
attribute's value has changed.
</p>
<div class="params">
<h4>Parameters:</h4>
<ul class="params-list">
<li class="param">
<code class="param-name">e</code>
<span class="type">{{#crossLink "EventFacade"}}{{/crossLink}}</span>
<div class="param-description">
An Event Facade object with the following
attribute-specific properties added:
</div>
<ul class="params-list">
<li class="param">
<code class="param-name">prevVal</code>
<span class="type">Any</span>
<div class="param-description">The value of the attribute, prior to it being set.</div>
</li>
<li class="param">
<code class="param-name">newVal</code>
<span class="type">Any</span>
<div class="param-description">The value the attribute is to be set to.</div>
</li>
<li class="param">
<code class="param-name">attrName</code>
<span class="type">{{#crossLink "String"}}{{/crossLink}}</span>
<div class="param-description">The name of the attribute being set.</div>
</li>
<li class="param">
<code class="param-name">subAttrName</code>
<span class="type">{{#crossLink "String"}}{{/crossLink}}</span>
<div class="param-description">If setting a property within the attribute's value, the name of the sub-attribute property being set.</div>
</li>
</ul>
</li>
</ul>
</div>
</div>
{{/if}}
{{#example}}
<div class="example">
<h4>Example:</h4>
<div class="example-content">
{{{.}}}
</div>
</div>
{{/example}}
</div>
================================================
FILE: docs/technical/theme/partials/classes.handlebars
================================================
{{#is_constructor}}
<h2>Constructor</h2>
<table class="constructor">
{{>method}}
</table>
{{/is_constructor}}
{{#if properties}}
<h2>Properties</h2>
<table>
{{#properties}}
{{>props}}
{{/properties}}
</table>
{{/if}}
{{#if attrs}}
<h2>Attributes</h2>
<table>
{{#attrs}}
{{>attrs}}
{{/attrs}}
</table>
{{/if}}
{{#if methods}}
<h2>Methods</h2>
<table>
{{#methods}}
{{>method}}
{{/methods}}
</table>
{{/if}}
{{#if events}}
<h2>Events</h2>
<table>
{{#events}}
{{>events}}
{{/events}}
</table>
{{/if}}
================================================
FILE: docs/technical/theme/partials/events.handlebars
================================================
<tr class="events item{{#if access}} {{access}}{{/if}}{{#if deprecated}} deprecated{{/if}}{{#if extended_from}} inherited{{/if}}">
<td style="width: 40%"><strong class="name">{{name}}</strong>
{{#if type}}
<span class="type">{{#crossLink type}}{{/crossLink}}</span>
{{/if}}
</td>
<td>
<div class="description">
{{{eventDescription}}}
</div>
{{#if params}}
<div class="params">
<h4>Event Payload:</h4>
<ul class="params-list">
{{#params}}
<li class="param">
{{#if optional}}
<code class="param-name optional">[{{name}}{{#if optdefault}}={{optdefault}}{{/if}}]</code>
<span class="type">{{#crossLink type}}{{/crossLink}}</span>
<span class="flag optional" title="This parameter is optional.">optional</span>
{{else}}
<code class="param-name">{{name}}</code>
<span class="type">{{#crossLink type}}{{/crossLink}}</span>
{{/if}}
{{#if multiple}}
<span class="flag multiple" title="This parameter may occur one or more times.">Multiple</span>
{{/if}}
<div class="param-description">
{{{description}}}
</div>
{{#if props}}
<ul class="params-list">
{{#props}}
<li class="param">
{{#if optional}}
<code class="param-name optional">[{{name}}{{#if optdefault}}={{optdefault}}{{/if}}]</code>
<span class="type">{{#crossLink type}}{{/crossLink}}</span>
<span class="flag optional" title="This parameter is optional.">optional</span>
{{else}}
<code class="param-name">{{name}}</code>
<span class="type">{{#crossLink type}}{{/crossLink}}</span>
{{/if}}
<div class="param-description">
{{{description}}}
</div>
{{#if props}}
<ul class="params-list">
{{#props}}
<li class="param">
<code class="param-name">{{name}}</code>
<span class="type">{{#crossLink type}}{{/crossLink}}</span>
<div class="param-description">
{{{description}}}
</div>
</li>
{{/props}}
</ul>
{{/if}}
</li>
{{/props}}
</ul>
{{/if}}
</li>
{{/params}}
</ul>
</div>
{{/if}}
{{#example}}
<div class="example">
<h4>Example:</h4>
<div class="example-content">
{{{.}}}
</div>
</div>
{{/example}}
</td>
</tr>
================================================
FILE: docs/technical/theme/partials/files.handlebars
================================================
<h1 class="file-heading">File: {{fileName}}</h1>
<div class="file">
<pre class="code prettyprint linenums">
{{fileData}}
</pre>
</div>
================================================
FILE: docs/technical/theme/partials/index.handlebars
================================================
<div class="index-content">
<p>
Browse to a module or class using the sidebar to view its API documentation.
</p>
<h2>Keyboard Shortcuts</h2>
<ul>
<li><p>Press <kbd>s</kbd> to focus the API search box.</p></li>
<li><p>Use <kbd>Up</kbd> and <kbd>Down</kbd> to select classes, modules, and search results.</p></li>
<li class="mac-only"><p>With the API search box or sidebar focused, use <kbd><span class="cmd">⌘</span>-Left</kbd> or <kbd><span class="cmd">⌘</span>-Right</kbd> to switch sidebar tabs.</p></li>
<li class="pc-only"><p>With the API search box or sidebar focused, use <kbd>Ctrl+Left</kbd> and <kbd>Ctrl+Right</kbd> to switch sidebar tabs.</p></li>
</ul>
</div>
================================================
FILE: docs/technical/theme/partials/method.handlebars
================================================
<tr class="method item{{#if access}} {{access}}{{/if}}{{#if deprecated}} deprecated{{/if}}{{#if overwritten_from}} inherited{{/if}}{{#if extended_from}} inherited{{/if}}">
<td>
<strong>{{name}}
{{#if params}}
(
{{#params}}
{{#if optional}}
<span class="optional">{{name}}{{#if optdefault}}={{optdefault}}{{/if}}</span>
{{else}}
<span>{{name}}</span>
{{/if}}
{{/params}}
)</span>
{{else}}
()
{{/if}}
</strong>
<div class="description">
{{{methodDescription}}}
</div>
{{#if params}}
<ul class="params-list list">
{{#params}}
<li class="param">
{{#if optional}}
<strong class="param-name optional">{{name}}{{#if optdefault}} = {{optdefault}}{{/if}}</strong>
<span class="type">{{#crossLink type}}{{/crossLink}}</span>
<span class="flag optional" title="This parameter is optional.">optional</span>
{{else}}
<span class="param-name">{{name}}</span>
<span class="type">{{#crossLink type}}{{/crossLink}}</span>
{{/if}}
{{#if multiple}}
<span class="flag multiple" title="This argument may occur one or more times.">multiple</span>
{{/if}}
<div class="param-description">
{{{description}}}
</div>
{{#if props}}
<ul class="params-list list">
{{#props}}
<li class="param">
{{#if optional}}
<strong class="param-name optional">{{name}}{{#if optdefault}} = {{optdefault}}{{/if}}</strong>
<span class="type">{{#crossLink type}}{{/crossLink}}</span>
<span class="flag optional" title="This parameter is optional.">optional</span>
{{else}}
<span class="param-name">{{name}}</span>
<span class="type">{{#crossLink type}}{{/crossLink}}</span>
{{/if}}
<div class="param-description">
{{{description}}}
</div>
{{#if props}}
<ul class="params-list list">
{{#props}}
<li class="param">
{{#if optional}}
<strong class="param-name optional">{{name}}{{#if optdefault}} = {{optdefault}}{{/if}}</strong>
<span class="type">{{#crossLink type}}{{/crossLink}}</span>
<span class="flag optional" title="This parameter is optional.">optional</span>
{{else}}
<strong class="param-name">{{name}}</strong>
<span class="type">{{#crossLink type}}{{/crossLink}}</span>
{{/if}}
<div class="param-description">
{{{description}}}
</div>
</li>
{{/props}}
</ul>
{{/if}}
</li>
{{/props}}
</ul>
{{/if}}
</li>
{{/params}}
</ul>
{{/if}}
</td>
</tr>
================================================
FILE: docs/technical/theme/partials/module.handlebars
================================================
<h1>{{name}} Module</h1>
<div class="box clearfix meta">
{{#extra}}
{{#selleck}}
<a class="button link-docs" href="/yui/docs/{{name}}">User Guide & Examples</a>
{{/selleck}}
{{/extra}}
{{#if requires}}
<div class="uses">
Requires
<ul class="inline commas">
{{#requires}}
<li>{{#crossLinkModule .}}{{/crossLinkModule}}</li>
{{/requires}}
</ul>
</div>
{{/if}}
{{#if foundAt}}
<div class="foundat">
Defined in: <a href="{{foundAt}}">`{{{file}}}:{{{line}}}`</a>
</div>
{{/if}}
{{#if since}}
<p>Available since {{since}}</p>
{{/if}}
</div>
{{#if deprecated}}
<div class="box deprecated">
<p>
{{#if deprecationMessage}}
<strong>Deprecated:</strong> {{deprecationMessage}}
{{else}}
This module is deprecated.
{{/if}}
</p>
</div>
{{/if}}
<div class="box intro">
{{{moduleDescription}}}
</div>
{{#example}}
<div class="example">
<h4>Example:</h4>
<div class="example-content">
{{{.}}}
</div>
</div>
{{/example}}
<div class="yui3-g">
<div class="yui3-u-1-2">
{{#if moduleClasses}}
<p>This module provides the following classes:</p>
<ul class="module-classes">
{{#moduleClasses}}
<li class="module-class">
<a href="{{../projectRoot}}classes/{{name}}.html">
{{displayName}}
</a>
</li>
{{/moduleClasses}}
</ul>
{{/if}}
</div>
<div class="yui3-u-1-2">
{{#if subModules}}
<p>This module is a rollup of the following modules:</p>
<ul class="module-submodules">
{{#subModules}}
<li class="module-submodule">
<a href="{{../projectRoot}}modules/{{name}}.html">
{{displayName}}
</a>
<div class="module-submodule-description">
{{{description}}}
</div>
</li>
{{/subModules}}
</ul>
{{/if}}
</div>
</div>
================================================
FILE: docs/technical/theme/partials/options.handlebars
================================================
<div id="api-options">
Show:
<label for="api-show-inherited">
<input type="checkbox" id="api-show-inherited">
Inherited
</label>
<label for="api-show-protected">
<input type="checkbox" id="api-show-protected">
Protected
</label>
<label for="api-show-private">
<input type="checkbox" id="api-show-private">
Private
</label>
<label for="api-show-deprecated">
<input type="checkbox" id="api-show-deprecated">
Deprecated
</label>
</div>
================================================
FILE: docs/technical/theme/partials/props.handlebars
================================================
<tr class="property item{{#if access}} {{access}}{{/if}}{{#if deprecated}} deprecated{{/if}}{{#if extended_from}} inherited{{/if}}">
<td style="width: 25%"><strong>{{name}}</strong></td>
<td style="width: 15%">
<span class="type">{{#crossLink type}}{{/crossLink}}</span>
{{#if deprecated}}
<span class="flag deprecated"{{#if deprecationMessage}} title="{{deprecationMessage}}"{{/if}}>deprecated</span>
{{/if}}
{{#if access}}
<span class="flag {{access}}">{{access}}</span>
{{/if}}
{{#if final}}
<span class="flag final">final</span>
{{/if}}
{{#if static}}
<span class="flag static">static</span>
{{/if}}
</td>
<td>
<div class="description">
{{{propertyDescription}}}
</div>
{{#if default}}
<p class="default"><strong>Default:</strong> <span class="default-value">{{default}}</span></p>
{{/if}}
{{#example}}
<div class="example">
<h4>Example:</h4>
<div class="example-content">
{{{.}}}
</div>
</div>
{{/example}}
{{#if subprops}}
<h4>Sub-properties:</h4>
<ul class="params-list">
{{#subprops}}
<li class="param">
{{#if optional}}
<code class="param-name optional">[{{name}}{{#if optdefault}}={{optdefault}}{{/if}}]</code>
<span class="type">{{#crossLink type}}{{/crossLink}}</span>
<span class="flag optional" title="This property is optional.">optional</span>
{{else}}
<code class="param-name">{{name}}</code>
<span class="type">{{#crossLink type}}{{/crossLink}}</span>
{{/if}}
<div class="param-description">
{{{description}}}
</div>
{{#if subprops}}
<ul class="params-list">
{{#subprops}}
<li class="param">
{{#if optional}}
<code class="param-name optional">[{{name}}{{#if optdefault}}={{optdefault}}{{/if}}]</code>
<span class="type">{{#crossLink type}}{{/crossLink}}</span>
<span class="flag optional" title="This property is optional.">optional</span>
{{else}}
<code class="param-name">{{name}}</code>
<span class="type">{{#crossLink type}}{{/crossLink}}</span>
{{/if}}
<div class="param-description">
{{{description}}}
</div>
</li>
{{/subprops}}
</ul>
{{/if}}
</li>
{{/subprops}}
</ul>
{{/if}}
</td>
</tr>
================================================
FILE: docs/technical/theme/partials/sidebar.handlebars
================================================
<div id="api-list">
<div id="api-tabview" class="tabview">
<ul class="tabs">
<li><a href="#api-classes">Classes</a></li>
<li><a href="#api-modules">Modules</a></li>
</ul>
<div id="api-tabview-filter">
<input type="search" id="api-filter" placeholder="Type to filter APIs">
</div>
<div id="api-tabview-panel">
<ul id="api-classes" class="apis classes">
{{#classes}}
<li><a class="type" href="{{../projectRoot}}classes/{{name}}.html">{{displayName}}</a></li>
{{/classes}}
</ul>
<ul id="api-modules" class="apis modules">
{{#allModules}}
<li><a class="module" href="{{../projectRoot}}modules/{{name}}.html">{{displayName}}</a></li>
{{/allModules}}
</ul>
</div>
</div>
</div>
================================================
FILE: docs/technical/theme/theme.json
================================================
{
}
================================================
FILE: examples/nojquery/index.html
================================================
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tiny Colorpicker: A lightweight cross browser color picker.</title>
<link rel="stylesheet" href="tinycolorpicker.css" type="text/css" media="screen"/>
<!-- build:js tinycolorpicker.js -->
<script type="text/javascript" src="../../lib/tinycolorpicker.js"></script>
<!-- /build -->
<script type="text/javascript">
window.onload = function()
{
// The plain javascript api is very similar to the jquery version with some exceptions.
// There is no chaining like in the jquery api. So when you create a instance it
// will return all methods and properties.
//
var $picker = document.getElementById("colorPicker")
, picker = tinycolorpicker($picker)
;
}
</script>
</head>
<body>
<div id="colorPicker">
<a class="color"><div class="colorInner"></div></a>
<div class="track"></div>
<ul class="dropdown"><li></li></ul>
<input type="hidden" class="colorInput"/>
</div>
</body>
</html>
================================================
FILE: examples/nojquery/tinycolorpicker.css
================================================
/* COLORPICKER 1 EXAMPLE */
#colorPicker
{
width: 30px;
height: 30px;
position: relative;
clear: both;
margin: 80px auto 20px;
}
#colorPicker .track {
background: #EFEFEF url(images/text-color.png) no-repeat 50% 50%;
height: 150px;
width: 150px;
padding: 10px;
position: absolute;
cursor: crosshair;
float: left;
left: -71px;
top: -71px;
display: none;
border: 1px solid #ccc;
z-index: 10;
-webkit-border-radius: 150px;
-moz-border-radius: 150px;
border-radius: 150px;
}
#colorPicker .color {
width: 25px;
height: 25px;
padding: 1px;
border: 1px solid #ccc;
display: block;
position: relative;
z-index: 11;
background-color: #EFEFEF;
-webkit-border-radius: 27px;
-moz-border-radius: 27px;
border-radius: 27px;
cursor: pointer;
}
#colorPicker .colorInner {
width: 25px;
height: 25px;
-webkit-border-radius: 27px;
-moz-border-radius: 27px;
border-radius: 27px;
}
#colorPicker .dropdown {
list-style: none;
display: none;
width: 27px;
position: absolute;
top: 28px;
border: 1px solid #ccc;
left: 0;
z-index: 1000;
}
#colorPicker .dropdown li{
height: 25px;
cursor: pointer;
}
================================================
FILE: examples/simple/index.html
================================================
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tiny Colorpicker: A lightweight cross browser color picker.</title>
<link rel="stylesheet" href="tinycolorpicker.css" type="text/css" media="screen"/>
<script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>
<!-- build:js jquery.tinycolorpicker.js -->
<script type="text/javascript" src="../../lib/jquery.tinycolorpicker.js"></script>
<!-- /build -->
<script type="text/javascript">
$(document).ready(function()
{
var $box = $('#colorPicker');
$box.tinycolorpicker();
});
</script>
</head>
<body>
<div id="colorPicker">
<a class="color"><div class="colorInner"></div></a>
<div class="track"></div>
<ul class="dropdown"><li></li></ul>
<input type="hidden" class="colorInput"/>
</div>
</body>
</html>
================================================
FILE: examples/simple/tinycolorpicker.css
================================================
/* COLORPICKER 1 EXAMPLE */
#colorPicker
{
width: 30px;
height: 30px;
position: relative;
clear: both;
margin: 80px auto 20px;
}
#colorPicker .track {
background: #EFEFEF url(images/text-color.png) no-repeat 50% 50%;
height: 150px;
width: 150px;
padding: 10px;
position: absolute;
cursor: crosshair;
float: left;
left: -71px;
top: -71px;
display: none;
border: 1px solid #ccc;
z-index: 10;
-webkit-border-radius: 150px;
-moz-border-radius: 150px;
border-radius: 150px;
}
#colorPicker .color {
width: 25px;
height: 25px;
padding: 1px;
border: 1px solid #ccc;
display: block;
position: relative;
z-index: 11;
background-color: #EFEFEF;
-webkit-border-radius: 27px;
-moz-border-radius: 27px;
border-radius: 27px;
cursor: pointer;
}
#colorPicker .colorInner {
width: 25px;
height: 25px;
-webkit-border-radius: 27px;
-moz-border-radius: 27px;
border-radius: 27px;
}
#colorPicker .dropdown {
list-style: none;
display: none;
width: 27px;
position: absolute;
top: 28px;
border: 1px solid #ccc;
left: 0;
z-index: 1000;
}
#colorPicker .dropdown li{
height: 25px;
cursor: pointer;
}
================================================
FILE: lib/jquery.tinycolorpicker.js
================================================
;(function(factory) {
if(typeof define === 'function' && define.amd) {
define(['jquery'], factory);
}
else if(typeof exports === 'object') {
module.exports = factory(require("jquery"));
}
else {
factory(jQuery);
}
}
(function($) {
var pluginName = "tinycolorpicker"
, defaults = {
colors : ["#ffffff", "#A7194B","#FE2712","#FB9902","#FABC02","#FEFE33","#D0EA2B","#66B032","#0391CE","#0247FE","#3D01A5","#8601AF"]
, backgroundUrl : null
}
;
function Plugin($container, options) {
/**
* The options of the colorpicker extended with the defaults.
*
* @property options
* @type Object
*/
this.options = $.extend({}, defaults, options);
/**
* @property _defaults
* @type Object
* @private
* @default defaults
*/
this._defaults = defaults;
/**
* @property _name
* @type String
* @private
* @final
* @default 'tinycolorpicker'
*/
this._name = pluginName;
var self = this
, $track = $container.find(".track")
, $color = $container.find(".color")
, $canvas = null
, $colorInput = $container.find(".colorInput")
, $dropdown = $container.find(".dropdown")
, $dropdownItem = $dropdown.find("li").remove()
, context = null
, mouseIsDown = false
, hasCanvas = !!document.createElement("canvas").getContext
, touchEvents = "ontouchstart" in document.documentElement
;
/**
* The current active color in hex.
*
* @property colorHex
* @type String
* @default ""
*/
this.colorHex = "";
/**
* The current active color in rgb.
*
* @property colorRGB
* @type String
* @default ""
*/
this.colorRGB = "";
/**
* @method _initialize
* @private
*/
function _initialize() {
if(hasCanvas) {
$canvas = $("<canvas></canvas>");
$track.append($canvas);
context = $canvas[0].getContext( "2d" );
_setImage();
}
else {
$.each(self.options.colors, function(index, color) {
var $clone = $dropdownItem.clone();
$clone.css("backgroundColor", color);
$clone.attr("data-color", color);
$dropdown.append($clone);
});
}
_setEvents();
return self;
}
/**
* @method _setImage
* @private
*/
function _setImage() {
var colorPicker = new Image()
, backgroundUrl = $track.css("background-image").replace(/"/g, "").replace(/url\(|\)$/ig, "")
;
colorPicker.crossOrigin = "Anonymous";
$track.css("background-image", "none");
$(colorPicker).load(function() {
$canvas.attr("width", this.width);
$canvas.attr("height", this.height);
context.drawImage(colorPicker, 0, 0, this.width, this.height);
});
colorPicker.src = self.options.backgroundUrl || backgroundUrl;
}
/**
* @method _setEvents
* @private
*/
function _setEvents() {
var eventType = touchEvents ? "touchstart" : "mousedown";
if(hasCanvas) {
$color.bind(eventType, function(event) {
event.preventDefault();
event.stopPropagation();
$track.toggle();
$(document).bind("mousedown.colorpicker", function(event) {
$(document).unbind(".colorpicker");
self.close();
});
});
if(!touchEvents) {
$canvas.mousedown(function(event) {
mouseIsDown = true;
_getColorCanvas(event);
$(document).bind("mouseup.colorpicker", function(event) {
$(document).unbind(".colorpicker");
self.close();
return false;
});
return false;
});
$canvas.mousemove(_getColorCanvas);
}
else {
$canvas.bind("touchstart", function(event) {
mouseIsDown = true;
_getColorCanvas(event.originalEvent.touches[0]);
return false;
});
$canvas.bind("touchmove", function(event) {
_getColorCanvas(event.originalEvent.touches[0]);
return false;
});
$canvas.bind("touchend", function(event) {
self.close();
return false;
});
}
}
else {
$color.bind("mousedown", function(event) {
event.preventDefault();
event.stopPropagation();
$dropdown.toggle();
});
$dropdown.delegate("li", "mousedown", function(event) {
event.preventDefault();
event.stopImmediatePropagation();
var color = $(this).attr("data-color");
self.setColor(color);
$dropdown.hide();
});
}
}
/**
* @method _getColorCanvas
* @private
*/
function _getColorCanvas(event) {
if(mouseIsDown) {
var $target = $(event.target)
, offset = $target.offset()
, colorData = context.getImageData(event.pageX - offset.left, event.pageY - offset.top, 1, 1).data
;
self.setColor("rgb(" + colorData[0] + "," + colorData[1] + "," + colorData[2] + ")");
/**
* The change event will trigger when a new color is set.
*
* @event change
*/
$container.trigger("change", [self.colorHex, self.colorRGB]);
}
}
/**
* Set the color to a given hex or rgb color.
*
* @method setColor
* @chainable
*/
this.setColor = function(color) {
if(color.indexOf("#") >= 0) {
self.colorHex = color;
self.colorRGB = self.hexToRgb(self.colorHex);
}
else {
self.colorRGB = color;
self.colorHex = self.rgbToHex(self.colorRGB);
}
$color.find(".colorInner").css("backgroundColor", self.colorHex);
$colorInput.val(self.colorHex);
};
/**
* Close the picker
*
* @method close
* @chainable
*/
this.close = function() {
mouseIsDown = false;
$track.hide();
};
/**
* Convert hex to rgb
*
* @method hexToRgb
* @chainable
*/
this.hexToRgb = function(hex) {
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return "rgb(" + parseInt(result[1], 16) + "," + parseInt(result[2], 16) + "," + parseInt(result[3], 16) + ")";
};
/**
* Convert rgb to hex
*
* @method rgbToHex
* @chainable
*/
this.rgbToHex = function(rgb) {
var result = rgb.match(/\d+/g);
function hex(x) {
var digits = new Array("0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "A", "B", "C", "D", "E", "F");
return isNaN(x) ? "00" : digits[(x - x % 16 ) / 16] + digits[x % 16];
}
return "#" + hex(result[0]) + hex(result[1]) + hex(result[2]);
};
return _initialize();
}
/**
* @class tinycolorpicker
* @constructor
* @param {Object} options
@param {Array} [options.colors=[]] fallback colors for old browsers (ie8-).
@param {String} [options.backgroundUrl=''] It will look for a css image on the track div. If not found it will look if there's a url in this property.
*/
$.fn[pluginName] = function(options) {
return this.each(function() {
if(!$.data(this, "plugin_" + pluginName)) {
$.data(this, "plugin_" + pluginName, new Plugin($(this), options));
}
});
};
}));
================================================
FILE: lib/tinycolorpicker.js
================================================
;(function(window, undefined) {
"use strict";
function extend() {
for(var i=1; i < arguments.length; i++) {
for(var key in arguments[i]) {
if(arguments[i].hasOwnProperty(key)) {
arguments[0][key] = arguments[i][key];
}
}
}
return arguments[0];
}
var pluginName = "tinycolorpicker"
, defaults = {
backgroundUrl : null
}
;
function Plugin($container, options) {
/**
* The options of the colorpicker extended with the defaults.
*
* @property options
* @type Object
*/
this.options = extend({}, defaults, options);
/**
* @property _defaults
* @type Object
* @private
* @default defaults
*/
this._defaults = defaults;
/**
* @property _name
* @type String
* @private
* @final
* @default 'tinycolorpicker'
*/
this._name = pluginName;
var self = this
, $track = $container.querySelectorAll(".track")[0]
, $color = $container.querySelectorAll(".color")[0]
, $colorInner = $container.querySelectorAll(".colorInner")[0]
, $canvas = null
, $colorInput = $container.querySelectorAll(".colorInput")[0]
, context = null
, mouseIsDown = false
, hasCanvas = !!document.createElement("canvas").getContext
, touchEvents = "ontouchstart" in document.documentElement
, changeEvent = document.createEvent("HTMLEvents")
;
changeEvent.initEvent("change", true, true);
/**
* The current active color in hex.
*
* @property colorHex
* @type String
* @default ""
*/
this.colorHex = "";
/**
* The current active color in rgb.
*
* @property colorRGB
* @type String
* @default ""
*/
this.colorRGB = "";
/**
* @method _initialize
* @private
*/
function _initialize() {
if(hasCanvas) {
$canvas = document.createElement("canvas");
$track.appendChild($canvas);
context = $canvas.getContext("2d");
_setImage();
}
_setEvents();
return self;
}
/**
* @method _setImage
* @private
*/
function _setImage() {
var colorPicker = new Image()
, style = $track.currentStyle || window.getComputedStyle($track, false)
, backgroundUrl = style.backgroundImage.replace(/"/g, "").replace(/url\(|\)$/ig, "")
;
colorPicker.crossOrigin = "Anonymous";
$track.style.backgroundImage = "none";
colorPicker.onload = function() {
$canvas.width = this.width;
$canvas.height = this.height;
context.drawImage(colorPicker, 0, 0, this.width, this.height);
};
colorPicker.src = self.options.backgroundUrl || backgroundUrl;
}
/**
* @method _setEvents
* @private
*/
function _setEvents() {
var eventType = touchEvents ? "touchstart" : "mousedown";
if(hasCanvas) {
$color["on" + eventType] = function(event) {
event.preventDefault();
event.stopPropagation();
$track.style.display = 'block';
document.onmousedown = function(event) {
document.onmousedown = null;
self.close();
};
};
if(!touchEvents) {
$canvas.onmousedown = function(event) {
event.preventDefault();
event.stopPropagation();
mouseIsDown = true;
_getColorCanvas(event);
document.onmouseup = function(event) {
document.onmouseup = null;
self.close();
return false;
};
};
$canvas.onmousemove = _getColorCanvas;
}
else {
$canvas.ontouchstart = function(event) {
mouseIsDown = true;
_getColorCanvas(event.touches[0]);
return false;
};
$canvas.ontouchmove = function(event) {
_getColorCanvas(event.touches[0]);
return false;
};
$canvas.ontouchend = function(event) {
self.close();
return false;
};
}
}
}
/**
* @method _getColorCanvas
* @private
*/
function _getColorCanvas(event) {
if(mouseIsDown) {
var offset = event.target.getBoundingClientRect()
, colorData = context.getImageData(event.clientX - offset.left, event.clientY - offset.top, 1, 1).data
;
self.setColor("rgb(" + colorData[0] + "," + colorData[1] + "," + colorData[2] + ")");
$container.dispatchEvent(changeEvent, [self.colorHex, self.colorRGB]);
}
}
/**
* Set the color to a given hex or rgb color.
*
* @method setColor
* @chainable
*/
this.setColor = function(color) {
if(color.indexOf("#") >= 0) {
self.colorHex = color;
self.colorRGB = self.hexToRgb(self.colorHex);
}
else {
self.colorRGB = color;
self.colorHex = self.rgbToHex(self.colorRGB);
}
$colorInner.style.backgroundColor = self.colorHex;
$colorInput.value = self.colorHex;
};
/**
* Close the picker
*
* @method close
* @chainable
*/
this.close = function() {
mouseIsDown = false;
$track.style.display = 'none';
};
/**
* Cobert hex to rgb
*
* @method hexToRgb
* @chainable
*/
this.hexToRgb = function(hex) {
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return "rgb(" + parseInt(result[1], 16) + "," + parseInt(result[2], 16) + "," + parseInt(result[3], 16) + ")";
};
/**
* Cobert rgb to hex
*
* @method rgbToHex
* @chainable
*/
this.rgbToHex = function(rgb) {
var result = rgb.match(/\d+/g);
function hex(x) {
var digits = new Array("0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "A", "B", "C", "D", "E", "F");
return isNaN(x) ? "00" : digits[(x - x % 16 ) / 16] + digits[x % 16];
}
return "#" + hex(result[0]) + hex(result[1]) + hex(result[2]);
};
return _initialize();
}
/**
* @class window.tinycolorpicker
* @constructor
* @param {Object} $container
* @param {Object} options
@param {String} [options.backgroundUrl=''] It will look for a css image on the track div. If not found it will look if there's a url in this property.
*/
var tinycolorpicker = function($container, options) {
return new Plugin($container, options);
};
if(typeof define == 'function' && define.amd) {
define(function(){ return tinycolorpicker; });
}
else if(typeof module === 'object' && module.exports) {
module.exports = tinycolorpicker;
}
else {
window.tinycolorpicker = tinycolorpicker;
}
})(window);
================================================
FILE: package.json
================================================
{
"name": "tinycolorpicker",
"version": "0.9.5",
"description": "A lightweight cross browser jQuery based colorpicker.",
"homepage": "http://www.baijs.com/tinycolorpicker",
"main": "lib/jquery.tinycolorpicker.js",
"repository": {
"type": "git",
"url": "https://github.com/wieringen/tinycolorpicker.git"
},
"keywords": [
"UI",
"jQuery",
"Mobile",
"colorpicker",
"javascript"
],
"author": {
"name": "Maarten Baijs",
"email": "wieringen@gmail.com"
},
"licenses": [
{
"type": "MIT",
"url": "https://github.com/wieringen/tinycolorpicker/blob/master/MIT-LICENSE.txt"
}
],
"bugs": {
"url": "https://github.com/wieringen/tinycolorpicker/issues"
},
"devDependencies": {
"baijs": "latest",
"chai": "~1.8.1",
"coveralls": "^2.11.2",
"grunt": "~0.4.1",
"grunt-contrib-clean": "~0.5.0",
"grunt-contrib-compress": "~0.5.2",
"grunt-contrib-copy": "~0.4.1",
"grunt-contrib-jshint": "~0.8.0",
"grunt-contrib-uglify": "~0.2.7",
"grunt-contrib-yuidoc": "^0.6.0",
"grunt-ftp-deploy": "~0.1.1",
"grunt-karma": "0.8.0",
"grunt-processhtml": "^0.3.6",
"grunt-text-replace": "~0.3.9",
"iectrl": "0.0.3",
"karma": "~0.12.0",
"karma-chai": "^0.1.0",
"karma-chai-jquery": "^1.0.0",
"karma-chai-sinon": "~0.1.0",
"karma-chrome-launcher": "~0.1.1",
"karma-coverage": "~0.1.3",
"karma-firefox-launcher": "~0.1.2",
"karma-html2js-preprocessor": "~0.1.0",
"karma-htmlfile-reporter": "~0.1.0",
"karma-ie-launcher": "~0.1.1",
"karma-ievms": "0.0.4",
"karma-jquery": "^0.1.0",
"karma-junit-reporter": "~0.2.1",
"karma-mocha": "~0.1.1",
"karma-phantomjs-launcher": "~0.1.1",
"karma-script-launcher": "~0.1.0",
"mocha": "~1.15.1",
"sinon": "~1.7.3",
"sinon-chai": "~2.4.0"
}
}
================================================
FILE: test/conf/karma-all.js
================================================
var allConfig = require('./karma-common.js');
module.exports = function (config) {
allConfig.browsers = [
'Firefox',
'Chrome',
'IE9 - Win7',
'IE10 - Win7',
'IE11 - Win7'
];
allConfig.logLevel = config.LOG_INFO;
config.set(allConfig);
};
================================================
FILE: test/conf/karma-ci.js
================================================
var ciConfig = require('./karma-common.js');
module.exports = function (config) {
ciConfig.browsers = [
'Firefox',
'Chrome',
//'IE9 - Win7',
//'IE10 - Win7',
//'IE11 - Win7'
];
if (process.env.TRAVIS) {
ciConfig.customLaunchers = {
Chrome_travis_ci: {
base: 'Chrome',
flags: ['--no-sandbox']
}
};
ciConfig.browsers = ['Firefox', 'Chrome_travis_ci'];
}
ciConfig.singleRun = true;
ciConfig.reporters.push('junit');
ciConfig.junitReporter = {
outputFile: 'dist/reports/test-report.xml'
};
//ciConfig.coverageReporter.type = 'cobertura';
ciConfig.logLevel = config.LOG_INFO;
config.set(ciConfig);
};
================================================
FILE: test/conf/karma-common.js
================================================
module.exports = {
// base path, that will be used to resolve files and exclude
basePath: '../../',
frameworks: [
'mocha',
'chai-sinon',
'jquery-1.8.3'
],
client: {
mocha: {
ui: 'bdd'
}
},
// list of files / patterns to load in the browser
files: [
'lib/tinycolorpicker.js',
'lib/jquery.tinycolorpicker.js',
'test/unit/tinycolorpicker.spec.js',
'test/unit/jquery.tinycolorpicker.spec.js',
{
pattern: 'test/fixtures/**/*.html',
included: true
}
],
// list of files to exclude
exclude: [],
preprocessors: {
'lib/*.js': ['coverage'],
'test/fixtures/**/*.html': ['html2js']
},
// use dots reporter, as travis terminal does not support escaping sequences
// possible values: 'dots', 'progress', 'junit'
// CLI --reporters progress
reporters: [
'dots',
'html',
'coverage'
],
coverageReporter: {
type: 'lcov',
dir: 'dist/reports/coverage/'
},
htmlReporter: {
outputFile: 'dist/reports/test-report.html'
},
// web server port
// CLI --port 9876
port: 9876,
// cli runner port
// CLI --runner-port 9100
runnerPort: 9100,
// enable / disable colors in the output (reporters and logs)
// CLI --colors --no-colors
colors: true,
// level of logging
// possible values: LOG_DISABLE || LOG_ERROR || LOG_WARN || LOG_INFO || LOG_DEBUG
// CLI --log-level debug
// logLevel: config.LOG_ERROR,
// enable / disable watching file and executing tests whenever any file changes
// CLI --auto-watch --no-auto-watch
autoWatch: true,
// Start these browsers, currently available:
// - Chrome
// - ChromeCanary
// - Firefox
// - Opera
// - Safari (only Mac)
// - PhantomJS
// - IE (only Windows)
// CLI --browsers Chrome,Firefox,Safari
browsers: [
'Firefox',
'Chrome'
],
// If browser does not capture in given timeout [ms], kill it
// CLI --capture-timeout 5000
captureTimeout: 15000,
// Auto run tests on start (when browsers are captured) and exit
// CLI --single-run --no-single-run
singleRun: false,
// report which specs are slower than 500ms
// CLI --report-slower-than 500
reportSlowerThan: 500,
//proxies: {}
plugins: [
'karma-mocha',
'karma-jquery',
'karma-chai-sinon',
'karma-ie-launcher',
'karma-chrome-launcher',
'karma-firefox-launcher',
'karma-phantomjs-launcher',
'karma-html2js-preprocessor',
'karma-coverage',
'karma-junit-reporter',
'karma-htmlfile-reporter',
'karma-ievms'
]
};
================================================
FILE: test/conf/karma-debug.js
================================================
var debugConfig = require('./karma-common.js');
module.exports = function (config) {
debugConfig.browsers = [
'Chrome'
];
debugConfig.logLevel = config.LOG_DEBUG;
config.set(debugConfig);
};
================================================
FILE: test/conf/karma-dev.js
================================================
var devConfig = require('./karma-common.js');
module.exports = function (config) {
devConfig.browsers = [
'Chrome'
];
devConfig.singleRun = true;
devConfig.logLevel = config.LOG_INFO;
config.set(devConfig);
};
================================================
FILE: test/fixtures/tinycolorpicker-css.html
================================================
<style>
#colorPicker
{
width: 30px;
height: 30px;
position: relative;
clear: both;
margin: 80px auto 20px;
}
#colorPicker .track {
background: #EFEFEF url(../text-color.png) no-repeat 50% 50%;
height: 150px;
width: 150px;
padding: 10px;
position: absolute;
cursor: crosshair;
float: left;
left: -71px;
top: -71px;
display: none;
border: 1px solid #ccc;
z-index: 10;
-webkit-border-radius: 150px;
-moz-border-radius: 150px;
border-radius: 150px;
}
#colorPicker .color {
width: 25px;
height: 25px;
padding: 1px;
border: 1px solid #ccc;
display: block;
position: relative;
z-index: 11;
background-color: #EFEFEF;
-webkit-border-radius: 27px;
-moz-border-radius: 27px;
border-radius: 27px;
cursor: pointer;
}
#colorPicker .colorInner {
width: 25px;
height: 25px;
-webkit-border-radius: 27px;
-moz-border-radius: 27px;
border-radius: 27px;
}
#colorPicker .dropdown {
list-style: none;
display: none;
width: 27px;
position: absolute;
top: 28px;
border: 1px solid #ccc;
left: 0;
z-index: 1000;
}
#colorPicker .dropdown li{
height: 25px;
cursor: pointer;
}
</style>
================================================
FILE: test/fixtures/tinycolorpicker.html
================================================
<div id="colorPicker">
<a class="color"><div class="colorInner"></div></a>
<div class="track"></div>
<ul class="dropdown"><li></li></ul>
<input type="hidden" class="colorInput"/>
</div>
================================================
FILE: test/unit/jquery.tinycolorpicker.spec.js
================================================
describe('A single Tinycolorpicker', function() {
before(function () {
document.head.innerHTML = __html__['test/fixtures/tinycolorpicker-css.html'];
});
beforeEach(function () {
document.body.innerHTML = __html__['test/fixtures/tinycolorpicker.html'];
});
afterEach(function () {
document.body.innerHTML = '';
});
it('should have a chainable constructor', function() {
$('#colorPicker').tinycolorpicker().addClass('testing');
expect($('#colorPicker').hasClass('testing')).to.equal(true);
});
it('should have a accessible instance', function() {
var instance = $('#colorPicker').tinycolorpicker().data('plugin_tinycolorpicker');
expect(instance).to.be.a('object');
expect(instance._name).to.equal('tinycolorpicker');
});
it('should be able to be set to a specific hex color.', function() {
var instance = $('#colorPicker').tinycolorpicker().data('plugin_tinycolorpicker');
instance.setColor('#FF0000');
expect(instance.colorHex).to.equal('#FF0000');
expect(instance.colorRGB).to.equal('rgb(255,0,0)');
});
it('should be able to be set to a specific rgb color.', function() {
var instance = $('#colorPicker').tinycolorpicker().data('plugin_tinycolorpicker');
instance.setColor('rgb(255,0,0)');
expect(instance.colorHex).to.equal('#FF0000');
expect(instance.colorRGB).to.equal('rgb(255,0,0)');
});
it('should be able to convert a hex color to rgb color.', function() {
var instance = $('#colorPicker').tinycolorpicker().data('plugin_tinycolorpicker');
expect(instance.hexToRgb('#FF0000')).to.equal('rgb(255,0,0)');
});
it('should be able to convert a rgb color to hex color.', function() {
var instance = $('#colorPicker').tinycolorpicker().data('plugin_tinycolorpicker');
expect(instance.rgbToHex('rgb(255,0,0)')).to.equal('#FF0000');
});
});
================================================
FILE: test/unit/tinycolorpicker.spec.js
================================================
describe('A single Tinycolorpicker', function() {
before(function () {
document.head.innerHTML = __html__['test/fixtures/tinycolorpicker-css.html'];
});
beforeEach(function () {
document.body.innerHTML = __html__['test/fixtures/tinycolorpicker.html'];
});
afterEach(function () {
document.body.innerHTML = '';
});
it('should have a accessible instance', function() {
var instance = tinycolorpicker(document.getElementById("colorPicker"));
expect(instance).to.be.a('object');
expect(instance._name).to.equal('tinycolorpicker');
});
it('should be able to be set to a specific hex color.', function() {
var instance = tinycolorpicker(document.getElementById("colorPicker"));
instance.setColor('#FF0000');
expect(instance.colorHex).to.equal('#FF0000');
expect(instance.colorRGB).to.equal('rgb(255,0,0)');
});
it('should be able to be set to a specific rgb color.', function() {
var instance = tinycolorpicker(document.getElementById("colorPicker"));
instance.setColor('rgb(255,0,0)');
expect(instance.colorHex).to.equal('#FF0000');
expect(instance.colorRGB).to.equal('rgb(255,0,0)');
});
it('should be able to convert a hex color to rgb color.', function() {
var instance = tinycolorpicker(document.getElementById("colorPicker"));
expect(instance.hexToRgb('#FF0000')).to.equal('rgb(255,0,0)');
});
it('should be able to convert a rgb color to hex color.', function() {
var instance = tinycolorpicker(document.getElementById("colorPicker"));
expect(instance.rgbToHex('rgb(255,0,0)')).to.equal('#FF0000');
});
});
================================================
FILE: tinycolorpicker.jquery.json
================================================
{
"name": "tinycolorpicker",
"title": "Tiny Colorpicker",
"version": "0.9.5",
"description": "A lightweight cross browser jQuery based colorpicker.",
"homepage": "http://www.baijs.com/tinycolorpicker",
"repository": {
"type": "git",
"url": "https://github.com/wieringen/tinycolorpicker.git"
},
"keywords": [
"UI",
"jQuery",
"Mobile",
"colors",
"colorpicker",
"javascript"
],
"author": {
"name": "Maarten Baijs",
"email": "wieringen@gmail.com"
},
"licenses": [
{
"type": "MIT",
"url": "https://github.com/wieringen/tinycolorpicker/blob/master/MIT-LICENSE.txt"
}
],
"bugs": "https://github.com/wieringen/tinycolorpicker/issues",
"download": "http://baijs.com/tinycolorpicker/",
"demo" : "http://baijs.com/tinycolorpicker/",
"docs" : "http://baijs.com/tinycolorpicker/",
"dependencies": {
"jquery": ">=1.5"
}
}
gitextract_yb7_sm4l/ ├── .gitignore ├── .jshintrc ├── .travis.yml ├── Gruntfile.coffee ├── MIT-LICENSE.txt ├── README.md ├── bower.json ├── docs/ │ ├── css/ │ │ └── tinycolorpicker.css │ ├── index.html │ └── technical/ │ └── theme/ │ ├── layouts/ │ │ └── main.handlebars │ ├── partials/ │ │ ├── attrs.handlebars │ │ ├── classes.handlebars │ │ ├── events.handlebars │ │ ├── files.handlebars │ │ ├── index.handlebars │ │ ├── method.handlebars │ │ ├── module.handlebars │ │ ├── options.handlebars │ │ ├── props.handlebars │ │ └── sidebar.handlebars │ └── theme.json ├── examples/ │ ├── nojquery/ │ │ ├── index.html │ │ └── tinycolorpicker.css │ └── simple/ │ ├── index.html │ └── tinycolorpicker.css ├── lib/ │ ├── jquery.tinycolorpicker.js │ └── tinycolorpicker.js ├── package.json ├── test/ │ ├── conf/ │ │ ├── karma-all.js │ │ ├── karma-ci.js │ │ ├── karma-common.js │ │ ├── karma-debug.js │ │ └── karma-dev.js │ ├── fixtures/ │ │ ├── tinycolorpicker-css.html │ │ └── tinycolorpicker.html │ └── unit/ │ ├── jquery.tinycolorpicker.spec.js │ └── tinycolorpicker.spec.js └── tinycolorpicker.jquery.json
SYMBOL INDEX (3 symbols across 2 files)
FILE: lib/jquery.tinycolorpicker.js
function Plugin (line 20) | function Plugin($container, options) {
FILE: lib/tinycolorpicker.js
function extend (line 4) | function extend() {
function Plugin (line 21) | function Plugin($container, options) {
Condensed preview — 38 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (95K chars).
[
{
"path": ".gitignore",
"chars": 103,
"preview": ".DS_Store\n.ftppass\ndist/\ndocs/technical/generated/\nnode_modules/\n*.sublime-project\n*.sublime-workspace\n"
},
{
"path": ".jshintrc",
"chars": 48,
"preview": "{\n \"laxcomma\" : true\n, \"laxbreak\" : false\n}"
},
{
"path": ".travis.yml",
"chars": 685,
"preview": "language: node_js\nnode_js:\n - 0.10\nbefore_script:\n - export CHROME_BIN=chromium-browser\n - export DISPLAY=:99.0\n - s"
},
{
"path": "Gruntfile.coffee",
"chars": 5659,
"preview": "module.exports = ( grunt ) ->\n\n grunt.loadNpmTasks \"grunt-contrib-clean\"\n grunt.loadNpmTasks \"grunt-contrib-compre"
},
{
"path": "MIT-LICENSE.txt",
"chars": 1074,
"preview": "Copyright 2013 Maarten Baijs\nhttp://www.baijs.com\n\nPermission is hereby granted, free of charge, to any person obtaining"
},
{
"path": "README.md",
"chars": 2221,
"preview": "[tinycolorpicker](http://baijs.com/tinycolorpicker) [![Build Status][travis-image]][travis-url] [![Coverage Status][cove"
},
{
"path": "bower.json",
"chars": 1477,
"preview": "{\n \"name\": \"tinycolorpicker\",\n \"version\": \"0.9.5\",\n \"description\": \"A lightweight cross browser jQuery based colorpic"
},
{
"path": "docs/css/tinycolorpicker.css",
"chars": 4515,
"preview": "/* COLORPICKER 1 EXAMPLE */\n#colorPicker1\n{\n width: 30px;\n height: 30px;\n position: relative;\n"
},
{
"path": "docs/index.html",
"chars": 15558,
"preview": "<!doctype html>\n<html lang=\"en\">\n <head>\n <title>Tiny Colorpicker: A lightweight cross browser color picker.</"
},
{
"path": "docs/technical/theme/layouts/main.handlebars",
"chars": 20,
"preview": "{{>layout_content}}\n"
},
{
"path": "docs/technical/theme/partials/attrs.handlebars",
"chars": 5117,
"preview": "<div id=\"attr_{{name}}\" class=\"attr item{{#if access}} {{access}}{{/if}}{{#if deprecated}} deprecated{{/if}}{{#if extend"
},
{
"path": "docs/technical/theme/partials/classes.handlebars",
"chars": 681,
"preview": "{{#is_constructor}}\n <h2>Constructor</h2>\n <table class=\"constructor\">\n {{>method}}\n </table>\n{{/is_cons"
},
{
"path": "docs/technical/theme/partials/events.handlebars",
"chars": 3879,
"preview": "<tr class=\"events item{{#if access}} {{access}}{{/if}}{{#if deprecated}} deprecated{{/if}}{{#if extended_from}} inherite"
},
{
"path": "docs/technical/theme/partials/files.handlebars",
"chars": 144,
"preview": "<h1 class=\"file-heading\">File: {{fileName}}</h1>\n\n<div class=\"file\">\n <pre class=\"code prettyprint linenums\">\n{{fileD"
},
{
"path": "docs/technical/theme/partials/index.handlebars",
"chars": 750,
"preview": "<div class=\"index-content\">\n <p>\n Browse to a module or class using the sidebar to view its API documentation."
},
{
"path": "docs/technical/theme/partials/method.handlebars",
"chars": 4220,
"preview": "<tr class=\"method item{{#if access}} {{access}}{{/if}}{{#if deprecated}} deprecated{{/if}}{{#if overwritten_from}} inher"
},
{
"path": "docs/technical/theme/partials/module.handlebars",
"chars": 2340,
"preview": "<h1>{{name}} Module</h1>\n<div class=\"box clearfix meta\">\n {{#extra}}\n {{#selleck}}\n <a class=\"butto"
},
{
"path": "docs/technical/theme/partials/options.handlebars",
"chars": 613,
"preview": " <div id=\"api-options\">\n Show:\n <label for=\"api-show-inherited\">\n <input type=\"checkbox\" id="
},
{
"path": "docs/technical/theme/partials/props.handlebars",
"chars": 3268,
"preview": "<tr class=\"property item{{#if access}} {{access}}{{/if}}{{#if deprecated}} deprecated{{/if}}{{#if extended_from}} inheri"
},
{
"path": "docs/technical/theme/partials/sidebar.handlebars",
"chars": 895,
"preview": "<div id=\"api-list\">\n <div id=\"api-tabview\" class=\"tabview\">\n <ul class=\"tabs\">\n <li><a href=\"#api-c"
},
{
"path": "docs/technical/theme/theme.json",
"chars": 9,
"preview": "{\n \n}\n"
},
{
"path": "examples/nojquery/index.html",
"chars": 1356,
"preview": "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">\r\n<html xml"
},
{
"path": "examples/nojquery/tinycolorpicker.css",
"chars": 1514,
"preview": "/* COLORPICKER 1 EXAMPLE */\r\n#colorPicker\r\n{\r\n width: 30px;\r\n height: 30px;\r\n position: relati"
},
{
"path": "examples/simple/index.html",
"chars": 1118,
"preview": "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">\r\n<html xml"
},
{
"path": "examples/simple/tinycolorpicker.css",
"chars": 1514,
"preview": "/* COLORPICKER 1 EXAMPLE */\r\n#colorPicker\r\n{\r\n width: 30px;\r\n height: 30px;\r\n position: relati"
},
{
"path": "lib/jquery.tinycolorpicker.js",
"chars": 9040,
"preview": ";(function(factory) {\n if(typeof define === 'function' && define.amd) {\n define(['jquery'], factory);\n }\n "
},
{
"path": "lib/tinycolorpicker.js",
"chars": 8230,
"preview": ";(function(window, undefined) {\n \"use strict\";\n\n function extend() {\n for(var i=1; i < arguments.length; i+"
},
{
"path": "package.json",
"chars": 1870,
"preview": "{\n \"name\": \"tinycolorpicker\",\n \"version\": \"0.9.5\",\n \"description\": \"A lightweight cross browser jQuery based colorpic"
},
{
"path": "test/conf/karma-all.js",
"chars": 293,
"preview": "var allConfig = require('./karma-common.js');\n\nmodule.exports = function (config) {\n allConfig.browsers = [\n '"
},
{
"path": "test/conf/karma-ci.js",
"chars": 771,
"preview": "var ciConfig = require('./karma-common.js');\n\nmodule.exports = function (config) {\n ciConfig.browsers = [\n 'Fi"
},
{
"path": "test/conf/karma-common.js",
"chars": 2782,
"preview": "module.exports = {\n // base path, that will be used to resolve files and exclude\n basePath: '../../',\n\n framewo"
},
{
"path": "test/conf/karma-debug.js",
"chars": 215,
"preview": "var debugConfig = require('./karma-common.js');\n\nmodule.exports = function (config) {\n debugConfig.browsers = [\n "
},
{
"path": "test/conf/karma-dev.js",
"chars": 236,
"preview": "var devConfig = require('./karma-common.js');\n\nmodule.exports = function (config) {\n devConfig.browsers = [\n 'Ch"
},
{
"path": "test/fixtures/tinycolorpicker-css.html",
"chars": 1432,
"preview": "<style>\n#colorPicker\n{\n width: 30px;\n height: 30px;\n position: relative;\n clear: both;\n "
},
{
"path": "test/fixtures/tinycolorpicker.html",
"chars": 225,
"preview": " <div id=\"colorPicker\">\n <a class=\"color\"><div class=\"colorInner\"></div></a>\n <div class=\"track\"></div>"
},
{
"path": "test/unit/jquery.tinycolorpicker.spec.js",
"chars": 1989,
"preview": "describe('A single Tinycolorpicker', function() {\n before(function () {\n document.head.innerHTML = __html__['t"
},
{
"path": "test/unit/tinycolorpicker.spec.js",
"chars": 1730,
"preview": "describe('A single Tinycolorpicker', function() {\n before(function () {\n document.head.innerHTML = __html__['t"
},
{
"path": "tinycolorpicker.jquery.json",
"chars": 910,
"preview": "{\n \"name\": \"tinycolorpicker\",\n \"title\": \"Tiny Colorpicker\",\n \"version\": \"0.9.5\",\n \"description\": \"A lightweight cros"
}
]
About this extraction
This page contains the full source code of the wieringen/tinycolorpicker GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 38 files (86.4 KB), approximately 23.2k tokens, and a symbol index with 3 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.