Demo update / Readme update

- demo for sending data on every switch
 - demo for re-appending color picker for relative positioning
 - update of documentation
pull/67/head
peterd 8 years ago
parent 0bfa3f10b2
commit 81321faa74

@ -2,33 +2,69 @@
# tinyColorPicker and colors # tinyColorPicker and colors
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)
<img src="development/screen-shot-all.jpg" /> <img src="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/)
## Usage ## Usage
```javascript ```javascript
<script type="text/javascript" src="jqColorPicker.min.js"></script> <script type="text/javascript" src="jqColorPicker.min.js"></script>
<script type="text/javascript"> <script type="text/javascript">
$('.color').colorPicker(); // that's it $('.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.
```javascript
<script type="text/javascript" src="colors.js"></script>
<script type="text/javascript" src="jqColorPicker.js"></script>
<script type="text/javascript">
$('.color').colorPicker();
</script> </script>
``` ```
## AMD / CommonJS wrapper ## AMD / CommonJS wrapper
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 (<div class="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
@ -105,7 +155,7 @@ this.$UI.find('.cp-alpha').toggle(!$elm.hasClass('no-alpha'));
## colors.js ## colors.js
This section only shows the options for color.js. They are picked up automatically if set in $('.color').colorPicker This section only shows the options for color.js. They are picked up automatically if set in ```$('.color').colorPicker({/* options */});```
```javascript ```javascript
Colors({ // all options have a default value... Colors({ // all options have a default value...

@ -24,12 +24,12 @@
<p>This is a demo that describes tinyColorPicker custumization 'Skinned dev-tools like with RGB sliders' in a more understandable way.</p> <p>This is a demo that describes tinyColorPicker custumization 'Skinned dev-tools like with RGB sliders' in a more understandable way.</p>
<a name="demo" id="demo" class="a-inline"></a> <a name="demo" id="demo" class="a-inline"></a>
<h2>Skinned dev-tools like, with RGB sliders</h2> <h2>Skinned dev-tools like, with RGB sliders</h2>
<div class="input-toggles"> <div class="input-toggles wrapper">
<input class="color" value="#B6BD79" /> <input class="color" value="#B6BD79" />
<input class="color no-alpha" value="rgb(162, 63, 3)" /> <input class="color no-alpha" value="rgb(162, 63, 3)" />
<input class="color no-sliders" value="hsl(32, 95%, 23%)" /> <input class="color no-sliders" value="hsl(32, 95%, 23%)" />
</div> </div>
<div class="div-toggles"> <div class="div-toggles wrapper">
<div class="trigger" value="#556B2F"><div><div></div></div></div> <div class="trigger" value="#556B2F"><div><div></div></div></div>
<div class="trigger" value="rgb(100, 86, 70)"><div><div></div></div></div> <div class="trigger" value="rgb(100, 86, 70)"><div><div></div></div></div>
<div class="trigger" value="hsla(167, 29%, 68%, 0.8)"><div><div></div></div></div> <div class="trigger" value="hsla(167, 29%, 68%, 0.8)"><div><div></div></div></div>

@ -69,7 +69,7 @@ $(function(){
$window = $(window), $window = $(window),
gap = this.color.options.gap; // this.color.options stores all options gap = this.color.options.gap; // this.color.options stores all options
// _$UI.appendTo('#content-wrapper'); // demonstration only // _$UI.appendTo($elm.closest('.wrapper').eq(0)); // demonstration only
return { // this demo is a copy of the internal usage (to show how it works); return { // this demo is a copy of the internal usage (to show how it works);
'left': (_$UI._left = position.left) - 'left': (_$UI._left = position.left) -
@ -85,6 +85,8 @@ $(function(){
renderCallback: function($elm, toggled) { renderCallback: function($elm, toggled) {
var colors = this.color.colors; // the whole color object var colors = this.color.colors; // the whole color object
var rgb = colors.RND.rgb; // the RGB color in 0-255 var rgb = colors.RND.rgb; // the RGB color in 0-255
var oldValue = '';
var currentValue = '';
// the following 6 lines are not necessary if you don't have the trigger icons with the arrows... // the following 6 lines are not necessary if you don't have the trigger icons with the arrows...
// if (toggled === true) { // just showing (only on show) // if (toggled === true) { // just showing (only on show)
@ -99,6 +101,23 @@ $(function(){
// $elm.css({'color': 'transparent'}); // $elm.css({'color': 'transparent'});
// } // }
// following section (13 lines) show how to get values on every switch to an other
// input field and on close...
/*
if (toggled === true) { // this happens on open (first time or when switching to another one)
if (this.$oldElement && this.$oldElement[0] !== $elm[0]) { // previously closed while opening this one
currentValue = this.color.toString(); // store current value
oldValue = this.$oldElement.val(); // actual value of previous element
oldValue = this.color.setColor(oldValue); // set color to that old value
console.log(this.color.toString()); // show color of previously opened in rgba mode
this.color.setColor(currentValue); // set it back to normal
}
this.$oldElement = $elm; // store for next switch...
} else if (toggled === false) { // this happens on close (only)
console.log(this.color.toString()); // show color model of just closed
this.$oldElement = null; // delete $oldElement as there is no other swich possible
}
*/
if (toggled === true) { // on show colorPicker if (toggled === true) { // on show colorPicker
this.$alpha.toggle(!$elm.hasClass('no-alpha')); this.$alpha.toggle(!$elm.hasClass('no-alpha'));
this.$sliders.toggle(!$elm.hasClass('no-sliders')); this.$sliders.toggle(!$elm.hasClass('no-sliders'));

Loading…
Cancel
Save