Looking for mobile first, tiny foot print, fast, scaleable, flexible, pluggable and a rich color model...<br>
Looking for mobile first, tiny foot print, fast, scaleable, flexible, pluggable and a rich color model...<br>
This small (4.9KB gZip, 10.8KB minified, no HTML, images or css needed) HSB colorpicker is based on a subset of [colors.js](https://github.com/PitPik/colorPicker/blob/master/colors.js) from it's big brother [colorPicker](https://github.com/PitPik/colorPicker/) for a precise and rich color model, supports all modern features like touch and MS pointer, GPU accelerated rendering, battery friendly requestAnimationFrame and provides a lot of hooks for developers to write plugins.
This small (5.07KB gZip, 11.39KB minified, no extra HTML, images or css needed) HSB colorpicker is based on a subset of [colors.js](https://github.com/PitPik/colorPicker/blob/master/colors.js) from it's big brother [colorPicker](https://github.com/PitPik/colorPicker/) for a precise and rich color model, supports all modern features like touch and MS pointer, GPU accelerated rendering, battery friendly requestAnimationFrame and provides a lot of hooks for developers to write plugins or extend the UI.
tinyColorPicker now supports AMD / CommonJS and bower.
##Demo
##Demo
See **demo** at [dematte.at/tinyColorPicker](http://dematte.at/tinyColorPicker)
See **demo** at [dematte.at/tinyColorPicker](http://dematte.at/tinyColorPicker)
<imgsrc="development/screen-shot-all.jpg"/>
<imgsrc="development/screen-shot-all.jpg"/>
All the WCAG 2.0 calculations for readability are also based on opacity levels of all layers.<br>
Supports WCAG 2.0 calculations for readability based on opacity levels of multiple layers.<br>
Supported color spaces are: rgb, hsv(b), hsl, HEX
Supported color spaces are: rgb, hsv(b), hsl, HEX.<br>
CMYK, CMY, Lab and XYZ and more standards are supported if using [colors.js](https://github.com/PitPik/colorPicker/blob/master/colors.js) from [github.com/PitPik/colorPicker](https://github.com/PitPik/colorPicker/)
$('.color').colorPicker(/* optinal options */); // that's it
// $().colorPicker.destroy(); // for singlePageApps
</script>
```
```jqColorPicker.min.js``` holds all necessary data such as HTML, CSS and images in one file to run tinyColorPicker. So, it is not needed to include anything else than this single file.<br>
If you need to debug things for development, you can also use ```colors.js```, the color calculation module, and ```jqColorPicker.js```, the UI and interaction module seperately.
tinyColorPicker now supports AMD and CommonJS import (thanks to [Munawwar](https://github.com/Munawwar)).
tinyColorPicker now supports AMD and CommonJS import (thanks to [Munawwar](https://github.com/Munawwar)) in both, the minified version and the single fies (```colors.js``` and ```jqColorPicker.js```).
```javascript
// example for requirejs configuration
requirejs.config({
baseUrl: 'scripts',
paths: {
jquery: 'lib/jquery-2.2.1.min'
},
shim: {
'colorPicker': {
deps: [ 'jquery' ],
exports: 'jQuery.fn.colorPicker'
}
}
});
## bower support
// then use tinyColorPicker in your module...
tinyColorPicker can be received by bower:
(function (root, factory) {
if (typeof define === 'function' && define.amd) {
define(['jquery', 'jqColorPicker'], function (jQuery) {
return factory(root, jQuery);
});
} else {
factory(root, root.jQuery);
}
}(this, function(window, $){
$('.color').colorPicker(options);
}));
```
## Bower support
tinyColorPicker can be received via bower:
```javascript
```javascript
bower install tinyColorPicker
bower install tinyColorPicker
@ -36,24 +72,35 @@ bower install tinyColorPicker
## jqColorPicker.js
## jqColorPicker.js
colorPicker uses an instance of Colors and passes the options to it, so some values are the same...
```jqColorPicker.js``` is a jQuery plugin including the UI, CSS and images and uses an instance of Colors (from ```colors.js```) for all the color calculations. It passes the options to that instance, so some values might be the same when inspecting...
```javascript
```javascript
$('.color').colorPicker({
$('.color').colorPicker({
color: ..., // see Colors...
color: ..., // see Colors below...
customBG: '#FFF' // see Colors...
customBG: '#FFF' // see Colors below...
animationSpeed: 150, // toggle animation speed
animationSpeed: 150, // toggle animation speed
GPU: true, // use transform: translate3d
GPU: true, // use transform: translate3d or regular rendereing (top, left)
doRender: true | 'selector', // manipulate color and bgColor of input field (on certain elements if selector)
doRender: true | 'selector', // render color and bgColor of input field (on certain elements if selector)
opacity: true, // enable / disable alpha slider
opacity: true, // enable / disable alpha slider
renderCallback: function($elm, toggled) {}, // this === instance; $elm: the input field;toggle === true -> just appeared; false -> opposite; else -> is rendering on pointer move
buildCallback: function($elm) {
// toggled true/false can for example be used to check if the $elm has a certain className and then hide alpha,...
// 'this': colorPicker instance; // will be the same as in positionCallback() and renderCallback();
buildCallback: function($elm) {}, // this === instance; $elm: the UI
// $elm: the UI (<divclass="cp-color-picker"></div>)
positionCallback: function($elm) {return {top: y, left: x}}, // this === instance; $elm: the trigger element;
},
css: '', // replaces existing css
renderCallback: function($elm, toggled) {
cssAddon: '', // adds css to existing
// 'this': current colorPicker instance; // instance has all kinds of information about colorPicker such as $UI including dimensions etc...
// $elm: the input field or other element that just toggled the colorPicker;
// toggle -> 'true': just appeared; 'false': just closed; 'undefined': is rendering
},
positionCallback: function($elm) {
// 'this': current colorPicker instance;
// $elm: the input field or other element that just toggled the colorPicker;
// optionally...
return {top: y, left: x}; // positions colorPicker before appearing
},
css: '', // String: replaces existing css
cssAddon: '', // String: adds css to existing
margin: '', // positioning margin (can also be set in cssAddon)
margin: '', // positioning margin (can also be set in cssAddon)
scrollResize: true // toggle for reposition colorPicker on window.resize/scroll
scrollResize: true // toggle for repositioning colorPicker on window.resize/scroll
gap: 4 // gap to right and bottom edge of view port if repositioned to fit
gap: 4 // gap to right and bottom edge of view port if repositioned to fit
dark: '#222' // default font color if background is light
dark: '#222' // default font color if background is light
light: '#DDD' // default font color if background is dark
light: '#DDD' // default font color if background is dark
@ -62,6 +109,8 @@ $('.color').colorPicker({
forceAlpha: // force printing alpha channel (undefined = auto; false = never print alpha)
forceAlpha: // force printing alpha channel (undefined = auto; false = never print alpha)
});
});
```
```
See the following section or the demos on how the callbacks work and what you can do with them...
#### Some tips
#### Some tips
The positionCallback can be used to optionally position the colorPicker different from its default; in case you want it to also show above or to the left of the input field etc.
The positionCallback can be used to optionally position the colorPicker different from its default; in case you want it to also show above or to the left of the input field etc.
@ -70,23 +119,24 @@ If you return an object (```{left: x, top: y}``` to position the colorPicker) th
```javascript
```javascript
positionCallback: function($elm) {
positionCallback: function($elm) {
var _$UI = this.$UI, // this is the instance; this.$UI is the colorPicker DOMElement
var $UI = this.$UI, // this is the instance; this.$UI is the colorPicker DOMElement
position = $elm.offset(), // $elm is the current trigger that opened the UI
position = $elm.offset(), // $elm is the current trigger that opened the UI
gap = this.color.options.gap, // this.color.options stores all options
gap = this.color.options.gap, // this.color.options stores all options
top = 0,
top = 0,
left = 0;
left = 0;
// do here your calculations with top and left and...
// $UI.appendTo('#somwhereElse');
// do here your calculations with top and left and then...
return { // the object will be used as in $('.something').css({...});
return { // the object will be used as in $('.something').css({...});
left: left,
left: left,
top: top
top: top
}
}
}
}
```
```
This callback is also good if you need to append your colorPicker to a different element then document.body. This way you can calculate the coordinates relative to the appended container...
This callback is also good if you need to append your colorPicker to a different container than document.body. This way you can then calculate the coordinates relative to the appended container...
The renderCallback can be used as openCallback and closeCallback:
The renderCallback can be used as openCallback and closeCallback:
```javascript
```javascript
renderCallback: function($elm, toggled) {
renderCallback: function($elm, toggled) {
if (toggled === true) { // simple, lightweight check
if (toggled === true) { // simple, lightweight check