diff --git a/README.md b/README.md index 7630456..a2a9cca 100644 --- a/README.md +++ b/README.md @@ -2,33 +2,69 @@ # tinyColorPicker and colors Looking for mobile first, tiny foot print, fast, scaleable, flexible, pluggable and a rich color model...
-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. - -tinyColorPicker now supports AMD / CommonJS and bower. +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. ##Demo See **demo** at [dematte.at/tinyColorPicker](http://dematte.at/tinyColorPicker) -All the WCAG 2.0 calculations for readability are also based on opacity levels of all layers.
-Supported color spaces are: rgb, hsv(b), hsl, HEX +Supports WCAG 2.0 calculations for readability based on opacity levels of multiple layers.
+Supported color spaces are: rgb, hsv(b), hsl, HEX.
+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 ```javascript +``` +```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.
+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 + + + ``` ## 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 -tinyColorPicker can be received by bower: +// then use tinyColorPicker in your module... +(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 bower install tinyColorPicker @@ -36,24 +72,35 @@ bower install tinyColorPicker ## 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 $('.color').colorPicker({ - color: ..., // see Colors... - customBG: '#FFF' // see Colors... + color: ..., // see Colors below... + customBG: '#FFF' // see Colors below... animationSpeed: 150, // toggle animation speed - GPU: true, // use transform: translate3d - doRender: true | 'selector', // manipulate color and bgColor of input field (on certain elements if selector) + GPU: true, // use transform: translate3d or regular rendereing (top, left) + doRender: true | 'selector', // render color and bgColor of input field (on certain elements if selector) 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 - // toggled true/false can for example be used to check if the $elm has a certain className and then hide alpha,... - buildCallback: function($elm) {}, // this === instance; $elm: the UI - positionCallback: function($elm) {return {top: y, left: x}}, // this === instance; $elm: the trigger element; - css: '', // replaces existing css - cssAddon: '', // adds css to existing + buildCallback: function($elm) { + // 'this': colorPicker instance; // will be the same as in positionCallback() and renderCallback(); + // $elm: the UI (
) + }, + renderCallback: function($elm, toggled) { + // '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) - 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 dark: '#222' // default font color if background is light 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) }); ``` +See the following section or the demos on how the callbacks work and what you can do with them... + #### 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. @@ -70,23 +119,24 @@ If you return an object (```{left: x, top: y}``` to position the colorPicker) th ```javascript 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 gap = this.color.options.gap, // this.color.options stores all options top = 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({...}); left: left, 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 renderCallback: function($elm, toggled) { if (toggled === true) { // simple, lightweight check @@ -105,7 +155,7 @@ this.$UI.find('.cp-alpha').toggle(!$elm.hasClass('no-alpha')); ## 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 Colors({ // all options have a default value... diff --git a/demo/index.html b/demo/index.html index 41e62d1..1013373 100644 --- a/demo/index.html +++ b/demo/index.html @@ -24,12 +24,12 @@

This is a demo that describes tinyColorPicker custumization 'Skinned dev-tools like with RGB sliders' in a more understandable way.

Skinned dev-tools like, with RGB sliders

-
+
-
+
diff --git a/demo/index.js b/demo/index.js index 2bd8333..89a1b64 100644 --- a/demo/index.js +++ b/demo/index.js @@ -69,7 +69,7 @@ $(function(){ $window = $(window), 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); 'left': (_$UI._left = position.left) - @@ -85,6 +85,8 @@ $(function(){ renderCallback: function($elm, toggled) { var colors = this.color.colors; // the whole color object 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... // if (toggled === true) { // just showing (only on show) @@ -99,6 +101,23 @@ $(function(){ // $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 this.$alpha.toggle(!$elm.hasClass('no-alpha')); this.$sliders.toggle(!$elm.hasClass('no-sliders'));