Browse Source

Demo update / Readme update

 - demo for sending data on every switch
 - demo for re-appending color picker for relative positioning
 - update of documentation
tags/1.1.1
peterd 3 years ago
parent
commit
81321faa74
3 changed files with 99 additions and 30 deletions
  1. 77
    27
      README.md
  2. 2
    2
      demo/index.html
  3. 20
    1
      demo/index.js

+ 77
- 27
README.md View File

@@ -2,33 +2,69 @@
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
 <img src="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/)
16 15
 
17 16
 ## Usage
18 17
 
19 18
 ```javascript
20 19
 <script type="text/javascript" src="jqColorPicker.min.js"></script>
21 20
 <script type="text/javascript">
22
-    $('.color').colorPicker(); // that's it
23
-    // $().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.
26
+```javascript
27
+<script type="text/javascript" src="colors.js"></script>
28
+<script type="text/javascript" src="jqColorPicker.js"></script>
29
+<script type="text/javascript">
30
+    $('.color').colorPicker();
24 31
 </script>
25 32
 ```
26 33
 
27 34
 ## AMD / CommonJS wrapper
28
-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
+            return factory(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
@@ -36,24 +72,35 @@ bower install tinyColorPicker
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
@@ -105,7 +155,7 @@ this.$UI.find('.cp-alpha').toggle(!$elm.hasClass('no-alpha'));
105 155
 
106 156
 ## colors.js
107 157
 
108
-This section only shows the options for color.js. They are picked up automatically if set in $('.color').colorPicker
158
+This section only shows the options for color.js. They are picked up automatically if set in ```$('.color').colorPicker({/* options */});```
109 159
 
110 160
 ```javascript
111 161
 Colors({ // all options have a default value...

+ 2
- 2
demo/index.html View File

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

+ 20
- 1
demo/index.js View File

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

Loading…
Cancel
Save