You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+77-27Lines changed: 77 additions & 27 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -2,58 +2,105 @@
2
2
# tinyColorPicker and colors
3
3
4
4
Looking for mobile first, tiny foot print, fast, scaleable, flexible, pluggable and a rich color model...<br>
5
-
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.
6
-
7
-
tinyColorPicker now supports AMD / CommonJS and bower.
5
+
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.
8
6
9
7
##Demo
10
8
See **demo** at [dematte.at/tinyColorPicker](http://dematte.at/tinyColorPicker)
11
9
12
10
<imgsrc="development/screen-shot-all.jpg" />
13
11
14
-
All the WCAG 2.0 calculations for readability are also based on opacity levels of all layers.<br>
15
-
Supported color spaces are: rgb, hsv(b), hsl, HEX
12
+
Supports WCAG 2.0 calculations for readability based on opacity levels of multiple layers.<br>
13
+
Supported color spaces are: rgb, hsv(b), hsl, HEX.<br>
14
+
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/)
// $().colorPicker.destroy(); // for singlePageApps
21
+
$('.color').colorPicker(/* optinal options */); // that's it
22
+
</script>
23
+
```
24
+
```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>
25
+
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)).
35
+
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```).
36
+
37
+
```javascript
38
+
// example for requirejs configuration
39
+
requirejs.config({
40
+
baseUrl:'scripts',
41
+
paths: {
42
+
jquery:'lib/jquery-2.2.1.min'
43
+
},
44
+
shim: {
45
+
'colorPicker': {
46
+
deps: [ 'jquery' ],
47
+
exports:'jQuery.fn.colorPicker'
48
+
}
49
+
}
50
+
});
29
51
30
-
## bower support
31
-
tinyColorPicker can be received by bower:
52
+
// then use tinyColorPicker in your module...
53
+
(function (root, factory) {
54
+
if (typeof define ==='function'&&define.amd) {
55
+
define(['jquery', 'jqColorPicker'], function (jQuery) {
56
+
returnfactory(root, jQuery);
57
+
});
58
+
} else {
59
+
factory(root, root.jQuery);
60
+
}
61
+
}(this, function(window, $){
62
+
$('.color').colorPicker(options);
63
+
}));
64
+
```
65
+
66
+
## Bower support
67
+
tinyColorPicker can be received via bower:
32
68
33
69
```javascript
34
70
bower install tinyColorPicker
35
71
```
36
72
37
73
## jqColorPicker.js
38
74
39
-
colorPicker uses an instance of Colors and passes the options to it, so some values are the same...
75
+
```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...
40
76
41
77
```javascript
42
78
$('.color').colorPicker({
43
-
color:..., // see Colors...
44
-
customBG:'#FFF'// see Colors...
79
+
color:..., // see Colors below...
80
+
customBG:'#FFF'// see Colors below...
45
81
animationSpeed:150, // toggle animation speed
46
-
GPU:true, // use transform: translate3d
47
-
doRender:true|'selector', //manipulate color and bgColor of input field (on certain elements if selector)
82
+
GPU:true, // use transform: translate3d or regular rendereing (top, left)
83
+
doRender:true|'selector', //render color and bgColor of input field (on certain elements if selector)
48
84
opacity:true, // enable / disable alpha slider
49
-
renderCallback:function($elm, toggled) {}, // this === instance; $elm: the input field;toggle === true -> just appeared; false -> opposite; else -> is rendering on pointer move
50
-
// toggled true/false can for example be used to check if the $elm has a certain className and then hide alpha,...
51
-
buildCallback:function($elm) {}, // this === instance; $elm: the UI
52
-
positionCallback:function($elm) {return {top: y, left: x}}, // this === instance; $elm: the trigger element;
53
-
css:'', // replaces existing css
54
-
cssAddon:'', // adds css to existing
85
+
buildCallback:function($elm) {
86
+
// 'this': colorPicker instance; // will be the same as in positionCallback() and renderCallback();
87
+
// $elm: the UI (<div class="cp-color-picker"></div>)
88
+
},
89
+
renderCallback:function($elm, toggled) {
90
+
// 'this': current colorPicker instance; // instance has all kinds of information about colorPicker such as $UI including dimensions etc...
91
+
// $elm: the input field or other element that just toggled the colorPicker;
92
+
// toggle -> 'true': just appeared; 'false': just closed; 'undefined': is rendering
93
+
},
94
+
positionCallback:function($elm) {
95
+
// 'this': current colorPicker instance;
96
+
// $elm: the input field or other element that just toggled the colorPicker;
97
+
// optionally...
98
+
return {top: y, left: x}; // positions colorPicker before appearing
99
+
},
100
+
css:'', // String: replaces existing css
101
+
cssAddon:'', // String: adds css to existing
55
102
margin:'', // positioning margin (can also be set in cssAddon)
56
-
scrollResize:true// toggle for reposition colorPicker on window.resize/scroll
103
+
scrollResize:true// toggle for repositioning colorPicker on window.resize/scroll
57
104
gap:4// gap to right and bottom edge of view port if repositioned to fit
58
105
dark:'#222'// default font color if background is light
59
106
light:'#DDD'// default font color if background is dark
@@ -62,6 +109,8 @@ $('.color').colorPicker({
62
109
forceAlpha:// force printing alpha channel (undefined = auto; false = never print alpha)
63
110
});
64
111
```
112
+
See the following section or the demos on how the callbacks work and what you can do with them...
113
+
65
114
#### Some tips
66
115
67
116
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
70
119
71
120
```javascript
72
121
positionCallback:function($elm) {
73
-
var_$UI=this.$UI, // this is the instance; this.$UI is the colorPicker DOMElement
122
+
var$UI=this.$UI, // this is the instance; this.$UI is the colorPicker DOMElement
74
123
position =$elm.offset(), // $elm is the current trigger that opened the UI
75
124
gap =this.color.options.gap, // this.color.options stores all options
76
125
top =0,
77
126
left =0;
78
127
79
-
// do here your calculations with top and left and...
128
+
// $UI.appendTo('#somwhereElse');
129
+
// do here your calculations with top and left and then...
80
130
return { // the object will be used as in $('.something').css({...});
81
131
left: left,
82
132
top: top
83
133
}
84
134
}
85
135
```
86
-
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...
136
+
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...
87
137
88
-
The renderCallback can be used as openCallback and closeCallback:
89
138
139
+
The renderCallback can be used as openCallback and closeCallback:
90
140
```javascript
91
141
renderCallback:function($elm, toggled) {
92
142
if (toggled ===true) { // simple, lightweight check
0 commit comments