Browse Source

Initial commit

tags/1.0.1
peterd 4 years ago
commit
2cf7ba8f3d
15 changed files with 1283 additions and 0 deletions
  1. 28
    0
      Gruntfile.js
  2. 21
    0
      LICENSE.md
  3. 183
    0
      README.md
  4. 418
    0
      colors.js
  5. 67
    0
      development/colorPicker.css
  6. 45
    0
      development/compatibility.css
  7. BIN
      development/fmog.png
  8. BIN
      development/screen-shot-all.jpg
  9. 25
    0
      development/ui.html
  10. 29
    0
      index.css
  11. 206
    0
      index.html
  12. 244
    0
      jqColorPicker.js
  13. 1
    0
      jqColorPicker.js.map
  14. 4
    0
      jqColorPicker.min.js
  15. 12
    0
      package.json

+ 28
- 0
Gruntfile.js View File

@@ -0,0 +1,28 @@
1
+module.exports = function(grunt) {
2
+
3
+	// Project configuration.
4
+	grunt.initConfig({
5
+		pkg: grunt.file.readJSON('package.json'),
6
+		uglify: {
7
+			options: {
8
+				banner: '/*! <%= pkg.name %> - v<%= pkg.version %> <%= grunt.template.today("yyyy-mm-dd") %> */\n',
9
+				sourceMap: true,
10
+				// sourceMapIncludeSources: true,
11
+				sourceMapName: 'jqColorPicker.js.map',
12
+				report: 'gzip'
13
+			},
14
+			my_target: {
15
+				files: [{
16
+					'jqColorPicker.min.js': ['colors.js', 'jqColorPicker.js']
17
+				}]
18
+			}
19
+		}
20
+	});
21
+
22
+	// Load the plugin that provides the "uglify" task.
23
+	grunt.loadNpmTasks('grunt-contrib-uglify');
24
+
25
+	// Default task(s).
26
+	grunt.registerTask('default', ['uglify']);
27
+
28
+};

+ 21
- 0
LICENSE.md View File

@@ -0,0 +1,21 @@
1
+The MIT License (MIT)
2
+
3
+Copyright (c) 2014 Peter Dematté
4
+
5
+Permission is hereby granted, free of charge, to any person obtaining a copy
6
+of this software and associated documentation files (the "Software"), to deal
7
+in the Software without restriction, including without limitation the rights
8
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+copies of the Software, and to permit persons to whom the Software is
10
+furnished to do so, subject to the following conditions:
11
+
12
+The above copyright notice and this permission notice shall be included in
13
+all copies or substantial portions of the Software.
14
+
15
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21
+THE SOFTWARE.

+ 183
- 0
README.md View File

@@ -0,0 +1,183 @@
1
+
2
+# tinyColorPicker and colors
3
+
4
+Looking for mobile first, tiny foot print, fast, scaleable, flexible and pluggable...<br>
5
+This 4.4KB small HSB color picker is based on a subset of [https://github.com/PitPik/colorPicker/blob/master/colors.js](colors.js) from it's big brother [https://github.com/PitPik/colorPicker/](colorPicker), 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
+##Demo
8
+See **demo** at [dematte.at/tinyColorPicker](http://dematte.at/tinyColorPicker)
9
+
10
+<img src="development/screen-shot-all.jpg" />
11
+
12
+All the WCAG 2.0 calculations for readability are also based on opacity levels of all layers<br>
13
+Supported color spaces are: (* also displayed as colors in realtime)<br>
14
+rgb, hsv(b), hsl, HEX
15
+
16
+##colors.js
17
+
18
+```javascript
19
+Colors({ // all options have a default value...
20
+    color: 'rgba(204, 82, 37, 0.8)', // initial color (#RGB, RGB, #RRGGBB, RRGGBB, rgb(r, g, b), ...)
21
+    grey: {r: 0.298954, g: 0.586434, b: 0.114612}, // CIE-XYZ 1931
22
+    luminance: {r: 0.2126, g: 0.7152, b: 0.0722}, // W3C 2.0
23
+    valueRanges: {rgb: {r: [0, 255], g: [0, 255], b: [0, 255]}, hsv:...}, // skip ranges if no conversion required
24
+    customBG: '#808080' // the solid bgColor behind the chosen bgColor (saved color)
25
+    convertCallback: function(colors, type){}, // callback function after color convertion for further calculations...
26
+});
27
+```
28
+##jqColorPicker.js
29
+
30
+colorPicker uses an instance of Colors and passes the options to it, so some values are the same...
31
+
32
+```javascript
33
+var myColorPicker = new ColorPicker({
34
+    color: ..., // see Colors...
35
+    customBG: '#FFF' // see Colors...
36
+    animationSpeed: 150, // toggle animation speed
37
+    GPU: true, // use transform: translate3d
38
+    doRender: true, // manipulate color ans bgColor of input field
39
+    opacity: true, // enable / disable alpha slider
40
+    renderCallback: function($elm, toggled) {}, // this === instance
41
+    buidCallback: function($elm, toggled) {}, // this === instance
42
+    css: '', // replaces existing css
43
+    cssAddon: '', // adds cdd to existing
44
+    margin: '', // positioning margin
45
+    preventFocus: false // prevent default on focus of input fields
46
+});
47
+```
48
+
49
+##The color model, the methods and more
50
+
51
+After initializing Color or ColorPicker you'll get a clean but rhich model of the instance:
52
+
53
+```javascript
54
+myColors: {
55
+    colors: { all kinds of color values...  see later},
56
+    options: { all the options you set or that are set as default... },
57
+    __proto__: { // all methods Color uses
58
+        setColor: function(newCol, type, alpha) {},
59
+        setCustomBackground: function(col) {},
60
+        saveAsBackground: function() {},
61
+    }
62
+}
63
+```
64
+
65
+```javascript
66
+myColorPicker: {
67
+    color: { // instance of Color inside colorPicker
68
+        colors: { all kinds of color values... see later},
69
+        options: { all the options you set or that are set as default... },
70
+        __proto__: { all methods Color uses ... see above}
71
+    },
72
+    __proto__: { // all methods ColorPicker uses
73
+        render: function() {},
74
+    }
75
+}
76
+```
77
+
78
+
79
+The color model
80
+
81
+```javascript
82
+HEX: // current color as HEX (upper case, 6 digits)
83
+rgb: // current RGB color as normalized values (0 - 1)
84
+    r: // red
85
+    g: // green
86
+    b: // blue
87
+hsv: // current color values in normalized HSV (HSB) model
88
+    h: // hue
89
+    s: // saturation
90
+    v: // value (brightness)
91
+hsl: // current color values in normalized HSL model
92
+    h: // hue
93
+    s: // saturation
94
+    l: // lightness
95
+RND: // all above colors in their defined ranges
96
+    rgb: // current RGB color, rounded between 0 and 255
97
+        r: // red (0 - 255)
98
+        g: // green (0 - 255)
99
+        b: // blue (0 - 255)
100
+    hsv: // see above
101
+        h: // hue (0 - 360 degrees)
102
+        s: // saturation (0 - 100 %)
103
+        v: // value (brightness) (0 - 100 %)
104
+    hsl: // see above
105
+        h: // hue (0 - 360 degrees)
106
+        s: // saturation (0 - 100 %)
107
+        l: // lightness (0 - 100 %)
108
+background: // saved (background) color (saveAsBackground(){})
109
+    rgb: // color in RGB model
110
+        r: // red
111
+        g: // green
112
+        b: // blue
113
+    RGB: // RGB color, rounded between 0 and 255
114
+        r: // red (0 - 255)
115
+        g: // green (0 - 255)
116
+        b: // blue (0 - 255)
117
+    alpha: // alpha or opacity value (0 - 1)
118
+    equivalentGrey: // r = g = b = (0 - 255)
119
+    rgbaMixBlack: // saved (background) color mixed with solid black color
120
+        r: // red
121
+        g: // green
122
+        b: // blue
123
+        a: // resulting alpha or opacity value (0 - 1)
124
+        luminance: // luminance of resulting mix (0 - 1)
125
+    rgbaMixCustom: // saved (background) color mixed with custom (solid) color
126
+        r: // red
127
+        g: // green
128
+        b: // blue
129
+        a: // resulting alpha or opacity value (0 - 1)
130
+        luminance: // luminance of resulting mix (0 - 1)
131
+    rgbaMixWhite: // saved (background) color mixed with solid white color
132
+        r: // red
133
+        g: // green
134
+        b: // blue
135
+        a: // resulting alpha or opacity value (0 - 1)
136
+        luminance: // luminance of resulting mix (0 - 1)
137
+alpha: // alpha or opacity value (0 - 1) of current color
138
+equivalentGrey: // r = g = b = (0 - 1)
139
+HUELuminance: // luminance of hue (in full brightnes and saturation) (0 - 1)
140
+RGBLuminance: // luminance of the current color
141
+hueRGB: // rounded integer value of current color in rgb model with full saturation and brightness
142
+    r: // red (0 - 255)
143
+    g: // green (0 - 255)
144
+    b: // blue (0 - 255)
145
+saveColor: // '' or 'web smart' or 'web save', if so.
146
+webSave: // closest web-save color
147
+    r: // red (0 - 255)
148
+    g: // green (0 - 255)
149
+    b: // blue (0 - 255)
150
+webSmart: // closest web-smart color
151
+    r: // red (0 - 255)
152
+    g: // green (0 - 255)
153
+    b: // blue (0 - 255)
154
+rgbaMixBG: // color mix result: current color above saved (background) color
155
+    r: // red (0 - 1)
156
+    g: // green (0 - 1)
157
+    b: // blue (0 - 1)
158
+    a: // resulting alpha or opacity value (0 - 1)
159
+    luminance: // luminance of resulting mix (0 - 1)
160
+rgbaMixBGMixCustom: // color mix result: current color above saved (background) color above solid custom color
161
+    r: // red (0 - 1)
162
+    g: // green (0 - 1)
163
+    b: // blue (0 - 1)
164
+    a: // resulting alpha or opacity value (0 - 1)
165
+    luminance: // luminance of resulting mix (0 - 1)
166
+    luminanceDelta: // luminance difference between current color and resulting saved-custom mix (0 - 1)
167
+    hueDelta: // hue difference between current color and resulting saved-custom mix (0 - 1)
168
+    WCAG2Ratio: // readability vale (1 - 21, 1:1 to 21:1)
169
+rgbaMixBlack: // color mix result: current color above solid black
170
+    r: // red (0 - 1)
171
+    g: // green (0 - 1)
172
+    b: // blue (0 - 1)
173
+    a: // resulting alpha or opacity value (0 - 1)
174
+    luminance: // luminance of resulting mix (0 - 1)
175
+    WCAG2Ratio: // readability vale (1 - 21, 1:1 to 21:1)
176
+rgbaMixWhite: // color mix result: current color above solid white
177
+    r: // red (0 - 1)
178
+    g: // green (0 - 1)
179
+    b: // blue (0 - 1)
180
+    a: // resulting alpha or opacity value (0 - 1)
181
+    luminance: // luminance of resulting mix (0 - 1)
182
+    WCAG2Ratio: // readability vale (1 - 21, 1:1 to 21:1)
183
+```

+ 418
- 0
colors.js View File

@@ -0,0 +1,418 @@
1
+;(function(window, undefined){
2
+	"use strict"
3
+
4
+	var _valueRanges = {
5
+			rgb:   {r: [0, 255], g: [0, 255], b: [0, 255]},
6
+			hsv:   {h: [0, 360], s: [0, 100], v: [0, 100]},
7
+			hsl:   {h: [0, 360], s: [0, 100], l: [0, 100]},
8
+			alpha: {alpha: [0, 1]},
9
+			HEX:   {HEX: [0, 16777215]} // maybe we don't need this
10
+		},
11
+
12
+		_instance = {},
13
+		_colors = {},
14
+
15
+		grey = {r: 0.298954, g: 0.586434, b: 0.114612}, // CIE-XYZ 1931
16
+		luminance = {r: 0.2126, g: 0.7152, b: 0.0722}, // W3C 2.0
17
+
18
+		Colors = window.Colors = function(options) {
19
+			this.colors = {RND: {}};
20
+			this.options = {
21
+				color: 'rgba(204, 82, 37, 0.8)', // init value(s)...
22
+				grey: grey,
23
+				luminance: luminance,
24
+				valueRanges: _valueRanges
25
+				// customBG: '#808080'
26
+				// convertCallback: undefined,
27
+				// allMixDetails: false
28
+			};
29
+			initInstance(this, options || {});
30
+		},
31
+		initInstance = function(THIS, options) {
32
+			var importColor,
33
+				_options = THIS.options,
34
+				customBG;
35
+
36
+			focusInstance(THIS);
37
+			for (var option in options) {
38
+				if (options[option] !== undefined) _options[option] = options[option];
39
+			}
40
+			customBG = _options.customBG;
41
+			_options.customBG = (typeof customBG === 'string') ? ColorConverter.txt2color(customBG).rgb : customBG;
42
+			_colors = setColor(THIS.colors, _options.color, undefined, true); // THIS.colors = _colors = 
43
+		},
44
+		focusInstance = function(THIS) {
45
+			if (_instance !== THIS) {
46
+				_instance = THIS;
47
+				_colors = THIS.colors;
48
+			}
49
+		};
50
+
51
+	Colors.prototype.setColor = function(newCol, type, alpha) {
52
+		focusInstance(this);
53
+		if (newCol) {
54
+			return setColor(this.colors, newCol, type, undefined, alpha);
55
+		} else {
56
+			if (alpha !== undefined) {
57
+				this.colors.alpha = alpha;
58
+			}
59
+			return convertColors(type);
60
+		}
61
+	};
62
+
63
+	Colors.prototype.setCustomBackground = function(col) { // wild gues,... check again...
64
+		focusInstance(this); // needed???
65
+		this.options.customBG = (typeof col === 'string') ? ColorConverter.txt2color(col).rgb : col;
66
+		// return setColor(this.colors, this.options.customBG, 'rgb', true); // !!!!RGB
67
+		return setColor(this.colors, undefined, 'rgb'); // just recalculate existing
68
+	};
69
+
70
+	Colors.prototype.saveAsBackground = function() { // alpha
71
+		focusInstance(this); // needed???
72
+		// return setColor(this.colors, this.colors.RND.rgb, 'rgb', true);
73
+		return setColor(this.colors, undefined, 'rgb', true);
74
+	};
75
+
76
+	// ------------------------------------------------------ //
77
+	// ---------- Color calculation related stuff  ---------- //
78
+	// -------------------------------------------------------//
79
+
80
+	function setColor(colors, color, type, save, alpha) { // color only full range
81
+		if (typeof color === 'string') {
82
+			var color = ColorConverter.txt2color(color); // new object
83
+			type = color.type;
84
+			_colors[type] = color[type];
85
+			alpha = alpha !== undefined ? alpha : color.alpha;
86
+		} else if (color) {
87
+			for (var n in color) {
88
+				colors[type][n] = limitValue(color[n] / _valueRanges[type][n][1], 0 , 1);
89
+			}
90
+		}
91
+		if (alpha !== undefined) {
92
+			colors.alpha = +alpha;
93
+		}
94
+		return convertColors(type, save ? colors : undefined);
95
+	}
96
+
97
+	function saveAsBackground(RGB, rgb, alpha) {
98
+		var grey = _instance.options.grey,
99
+			color = {};
100
+
101
+		color.RGB = {r: RGB.r, g: RGB.g, b: RGB.b};
102
+		color.rgb = {r: rgb.r, g: rgb.g, b: rgb.b};
103
+		color.alpha = alpha;
104
+		// color.RGBLuminance = getLuminance(RGB);
105
+		color.equivalentGrey = Math.round(grey.r * RGB.r + grey.g * RGB.g + grey.b * RGB.b);
106
+
107
+		color.rgbaMixBlack = mixColors(rgb, {r: 0, g: 0, b: 0}, alpha, 1);
108
+		color.rgbaMixWhite = mixColors(rgb, {r: 1, g: 1, b: 1}, alpha, 1);
109
+		color.rgbaMixBlack.luminance = getLuminance(color.rgbaMixBlack, true);
110
+		color.rgbaMixWhite.luminance = getLuminance(color.rgbaMixWhite, true);
111
+
112
+		if (_instance.options.customBG) {
113
+			color.rgbaMixCustom = mixColors(rgb, _instance.options.customBG, alpha, 1);
114
+			color.rgbaMixCustom.luminance = getLuminance(color.rgbaMixCustom, true);
115
+			_instance.options.customBG.luminance = getLuminance(_instance.options.customBG, true);
116
+		}
117
+
118
+		return color;
119
+	}
120
+
121
+	function convertColors(type, colorObj) {
122
+		// console.time('convertColors');
123
+		var colors = colorObj || _colors,
124
+			convert = ColorConverter,
125
+			options = _instance.options,
126
+			ranges = _valueRanges,
127
+			RND = colors.RND,
128
+			// type = colorType, // || _mode.type,
129
+			modes, mode = '', from = '', // value = '',
130
+			exceptions = {hsl: 'hsv', rgb: type},
131
+			RGB = RND.rgb, SAVE, SMART;
132
+
133
+		if (type !== 'alpha') {
134
+			for (var typ in ranges) {
135
+				if (!ranges[typ][typ]) { // no alpha|HEX
136
+					if (type !== typ) {
137
+						from = exceptions[typ] || 'rgb';
138
+						colors[typ] = convert[from + '2' + typ](colors[from]);
139
+					}
140
+
141
+					if (!RND[typ]) RND[typ] = {};
142
+					modes = colors[typ];
143
+					for(mode in modes) {
144
+						RND[typ][mode] = Math.round(modes[mode] * ranges[typ][mode][1]);
145
+					}
146
+				}
147
+			}
148
+
149
+			RGB = RND.rgb;
150
+			colors.HEX = convert.RGB2HEX(RGB);
151
+			colors.equivalentGrey =
152
+				options.grey.r * colors.rgb.r +
153
+				options.grey.g * colors.rgb.g +
154
+				options.grey.b * colors.rgb.b;
155
+			colors.webSave = SAVE = getClosestWebColor(RGB, 51);
156
+			// colors.webSave.HEX = convert.RGB2HEX(colors.webSave);
157
+			colors.webSmart = SMART = getClosestWebColor(RGB, 17);
158
+			// colors.webSmart.HEX = convert.RGB2HEX(colors.webSmart);
159
+			colors.saveColor =
160
+				RGB.r === SAVE.r && RGB.g === SAVE.g && RGB.b === SAVE.b  ? 'web save' :
161
+				RGB.r === SMART.r && RGB.g === SMART.g && RGB.b === SMART.b  ? 'web smart' : '';
162
+			colors.hueRGB = ColorConverter.hue2RGB(colors.hsv.h);
163
+
164
+			if (colorObj) {
165
+				colors.background = saveAsBackground(RGB, colors.rgb, colors.alpha);
166
+			}
167
+		} // else RGB = RND.rgb;
168
+
169
+		var rgb = colors.rgb, // for better minification...
170
+			alpha = colors.alpha,
171
+			luminance = 'luminance',
172
+			background = colors.background,
173
+			rgbaMixBlack, rgbaMixWhite, rgbaMixCustom, 
174
+			rgbaMixBG, rgbaMixBGMixBlack, rgbaMixBGMixWhite, rgbaMixBGMixCustom;
175
+
176
+		rgbaMixBlack = mixColors(rgb, {r: 0, g: 0, b: 0}, alpha, 1);
177
+		rgbaMixBlack[luminance] = getLuminance(rgbaMixBlack, true);
178
+		colors.rgbaMixBlack = rgbaMixBlack;
179
+
180
+		rgbaMixWhite = mixColors(rgb, {r: 1, g: 1, b: 1}, alpha, 1);
181
+		rgbaMixWhite[luminance] = getLuminance(rgbaMixWhite, true);
182
+		colors.rgbaMixWhite = rgbaMixWhite;
183
+
184
+		if (options.customBG) {
185
+			rgbaMixBGMixCustom = mixColors(rgb, background.rgbaMixCustom, alpha, 1);
186
+			rgbaMixBGMixCustom[luminance] = getLuminance(rgbaMixBGMixCustom, true);
187
+			rgbaMixBGMixCustom.WCAG2Ratio = getWCAG2Ratio(rgbaMixBGMixCustom[luminance],
188
+				background.rgbaMixCustom[luminance]);
189
+			colors.rgbaMixBGMixCustom = rgbaMixBGMixCustom;
190
+			/* ------ */
191
+			rgbaMixBGMixCustom.luminanceDelta = Math.abs(
192
+				rgbaMixBGMixCustom[luminance] - background.rgbaMixCustom[luminance]);
193
+			rgbaMixBGMixCustom.hueDelta = getHueDelta(background.rgbaMixCustom, rgbaMixBGMixCustom, true);
194
+			/* ------ */
195
+		}
196
+
197
+		colors.RGBLuminance = getLuminance(RGB);
198
+		colors.HUELuminance = getLuminance(colors.hueRGB);
199
+
200
+		// renderVars.readyToRender = true;
201
+		if (options.convertCallback) {
202
+			options.convertCallback(colors, type); //, convert); //, _mode);
203
+		}
204
+
205
+		// console.timeEnd('convertColors')
206
+		// if (colorObj)
207
+		return colors;
208
+	}
209
+
210
+
211
+	// ------------------------------------------------------ //
212
+	// ------------------ color conversion ------------------ //
213
+	// -------------------------------------------------------//
214
+
215
+	var ColorConverter = {
216
+		txt2color: function(txt) {
217
+			var color = {},
218
+				parts = txt.replace(/(?:#|\)|%)/g, '').split('('),
219
+				values = (parts[1] || '').split(/,\s*/),
220
+				type = parts[1] ? parts[0].substr(0, 3) : 'rgb',
221
+				m = '';
222
+
223
+			color.type = type;
224
+			color[type] = {};
225
+			if (parts[1]) {
226
+				for (var n = 3; n--; ) {
227
+					m = type[n] || type.charAt(n); // IE7
228
+					color[type][m] = +values[n] / _valueRanges[type][m][1];
229
+				}
230
+			} else {
231
+				color.rgb = ColorConverter.HEX2rgb(parts[0]);
232
+			}
233
+			// color.color = color[type];
234
+			color.alpha = values[3] ? +values[3] : 1;
235
+
236
+			return color;
237
+		},
238
+
239
+		RGB2HEX: function(RGB) {
240
+			return (
241
+				(RGB.r < 16 ? '0' : '') + RGB.r.toString(16) +
242
+				(RGB.g < 16 ? '0' : '') + RGB.g.toString(16) +
243
+				(RGB.b < 16 ? '0' : '') + RGB.b.toString(16)
244
+			).toUpperCase();
245
+		},
246
+
247
+		HEX2rgb: function(HEX) {
248
+			HEX = HEX.split(''); // IE7
249
+			return {
250
+				r: parseInt(HEX[0] + HEX[HEX[3] ? 1 : 0], 16) / 255,
251
+				g: parseInt(HEX[HEX[3] ? 2 : 1] + (HEX[3] || HEX[1]), 16) / 255,
252
+				b: parseInt((HEX[4] || HEX[2]) + (HEX[5] || HEX[2]), 16) / 255
253
+			};
254
+		},
255
+
256
+		hue2RGB: function(hue) {
257
+			var h = hue * 6,
258
+				mod = ~~h % 6, // Math.floor(h) -> faster in most browsers
259
+				i = h === 6 ? 0 : (h - mod);
260
+
261
+			return {
262
+				r: Math.round([1, 1 - i, 0, 0, i, 1][mod] * 255),
263
+				g: Math.round([i, 1, 1, 1 - i, 0, 0][mod] * 255),
264
+				b: Math.round([0, 0, i, 1, 1, 1 - i][mod] * 255)
265
+			};
266
+		},
267
+
268
+		// ------------------------ HSV ------------------------ //
269
+
270
+		rgb2hsv: function(rgb) { // faster
271
+			var r = rgb.r,
272
+				g = rgb.g,
273
+				b = rgb.b,
274
+				k = 0, chroma, min, s;
275
+
276
+			if (g < b) {
277
+				g = b + (b = g, 0);
278
+				k = -1;
279
+			}
280
+			min = b;
281
+			if (r < g) {
282
+				r = g + (g = r, 0);
283
+				k = -2 / 6 - k;
284
+				min = Math.min(g, b); // g < b ? g : b; ???
285
+			}
286
+			chroma = r - min;
287
+			s = r ? (chroma / r) : 0;
288
+			return {
289
+				h: s < 1e-15 ? ((_colors && _colors.hsl && _colors.hsl.h) || 0) :
290
+					chroma ? Math.abs(k + (g - b) / (6 * chroma)) : 0,
291
+				s: r ? (chroma / r) : ((_colors && _colors.hsv && _colors.hsv.s) || 0), // ??_colors.hsv.s || 0
292
+				v: r
293
+			};
294
+		},
295
+
296
+		hsv2rgb: function(hsv) {
297
+			var h = hsv.h * 6,
298
+				s = hsv.s,
299
+				v = hsv.v,
300
+				i = ~~h, // Math.floor(h) -> faster in most browsers
301
+				f = h - i,
302
+				p = v * (1 - s),
303
+				q = v * (1 - f * s),
304
+				t = v * (1 - (1 - f) * s),
305
+				mod = i % 6;
306
+
307
+			return {
308
+				r: [v, q, p, p, t, v][mod],
309
+				g: [t, v, v, q, p, p][mod],
310
+				b: [p, p, t, v, v, q][mod]
311
+			};
312
+		},
313
+
314
+		// ------------------------ HSL ------------------------ //
315
+
316
+		hsv2hsl: function(hsv) {
317
+			var l = (2 - hsv.s) * hsv.v,
318
+				s = hsv.s * hsv.v;
319
+
320
+			s = !hsv.s ? 0 : l < 1 ? (l ? s / l : 0) : s / (2 - l);
321
+
322
+			return {
323
+				h: hsv.h,
324
+				s: !hsv.v && !s ? ((_colors && _colors.hsl && _colors.hsl.s) || 0) : s, // ???
325
+				l: l / 2
326
+			};
327
+		},
328
+
329
+		rgb2hsl: function(rgb, dependent) { // not used in Color
330
+			var hsv = ColorConverter.rgb2hsv(rgb);
331
+
332
+			return ColorConverter.hsv2hsl(dependent ? hsv : (_colors.hsv = hsv));
333
+		},
334
+
335
+		hsl2rgb: function(hsl) {
336
+			var h = hsl.h * 6,
337
+				s = hsl.s,
338
+				l = hsl.l,
339
+				v = l < 0.5 ? l * (1 + s) : (l + s) - (s * l),
340
+				m = l + l - v,
341
+				sv = v ? ((v - m) / v) : 0,
342
+				sextant = ~~h, // Math.floor(h) -> faster in most browsers
343
+				fract = h - sextant,
344
+				vsf = v * sv * fract,
345
+				t = m + vsf,
346
+				q = v - vsf,
347
+				mod = sextant % 6;
348
+
349
+			return {
350
+				r: [v, q, m, m, t, v][mod],
351
+				g: [t, v, v, q, m, m][mod],
352
+				b: [m, m, t, v, v, q][mod]
353
+			};
354
+		}
355
+	};
356
+
357
+	// ------------------------------------------------------ //
358
+	// ------------------ helper functions ------------------ //
359
+	// -------------------------------------------------------//
360
+
361
+	function getClosestWebColor(RGB, val) {
362
+		var out = {},
363
+			tmp = 0,
364
+			half = val / 2;
365
+
366
+		for (var n in RGB) {
367
+			tmp = RGB[n] % val; // 51 = 'web save', 17 = 'web smart'
368
+			out[n] = RGB[n] + (tmp > half ? val - tmp : -tmp);
369
+		}
370
+		return out;
371
+	}
372
+
373
+	function getHueDelta(rgb1, rgb2, nominal) {
374
+		return (Math.max(rgb1.r - rgb2.r, rgb2.r - rgb1.r) +
375
+				Math.max(rgb1.g - rgb2.g, rgb2.g - rgb1.g) +
376
+				Math.max(rgb1.b - rgb2.b, rgb2.b - rgb1.b)) * (nominal ? 255 : 1) / 765;
377
+	}
378
+
379
+	function getLuminance(rgb, normalized) {
380
+		var div = normalized ? 1 : 255,
381
+			RGB = [rgb.r / div, rgb.g / div, rgb.b / div],
382
+			luminance = _instance.options.luminance;
383
+
384
+		for (var i = RGB.length; i--; ) {
385
+			RGB[i] = RGB[i] <= 0.03928 ? RGB[i] / 12.92 : Math.pow(((RGB[i] + 0.055) / 1.055), 2.4);
386
+		}
387
+		return ((luminance.r * RGB[0]) + (luminance.g * RGB[1]) + (luminance.b * RGB[2]));
388
+	}
389
+
390
+	function mixColors(topColor, bottomColor, topAlpha, bottomAlpha) {
391
+		var newColor = {},
392
+			alphaTop = (topAlpha !== undefined ? topAlpha : 1),
393
+			alphaBottom = (bottomAlpha !== undefined ? bottomAlpha : 1),
394
+			alpha = alphaTop + alphaBottom * (1 - alphaTop); // 1 - (1 - alphaTop) * (1 - alphaBottom);
395
+
396
+		for(var n in topColor) {
397
+			newColor[n] = (topColor[n] * alphaTop + bottomColor[n] * alphaBottom * (1 - alphaTop)) / alpha;
398
+		}
399
+		newColor.a = alpha;
400
+		return newColor;
401
+	}
402
+
403
+	function getWCAG2Ratio(lum1, lum2) {
404
+		var ratio = 1;
405
+
406
+		if (lum1 >= lum2) {
407
+			ratio = (lum1 + 0.05) / (lum2 + 0.05);
408
+		} else {
409
+			ratio = (lum2 + 0.05) / (lum1 + 0.05);
410
+		}
411
+		return Math.round(ratio * 100) / 100;
412
+	}
413
+
414
+	function limitValue(value, min, max) {
415
+		// return Math.max(min, Math.min(max, value)); // faster??
416
+		return (value > max ? max : value < min ? min : value);
417
+	}
418
+})(window);

+ 67
- 0
development/colorPicker.css View File

@@ -0,0 +1,67 @@
1
+.cp-color-picker {
2
+	position: absolute;
3
+	overflow: hidden;
4
+	padding: 6px 6px 0;
5
+	background-color: #444;
6
+	color: #bbb;
7
+	font-family: Arial, Helvetica, sans-serif;
8
+	font-size: 12px;
9
+	font-weight: normal;
10
+	cursor: default;
11
+	border-radius: 5px;
12
+}
13
+.cp-color-picker > div {
14
+	position: relative;
15
+	overflow: hidden;
16
+}
17
+.cp-xy-slider {
18
+	float: left;
19
+	height: 128px;
20
+	width: 128px;
21
+	margin-bottom: 6px;
22
+	background: linear-gradient(to right, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
23
+}
24
+.cp-white {
25
+	height: 100%;
26
+	width: 100%;
27
+	background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%);
28
+}
29
+.cp-xy-cursor {
30
+	position: absolute;
31
+	width: 10px;
32
+	height: 10px;
33
+	margin: -5px;
34
+	border: 1px solid white;
35
+	border-radius: 100%;
36
+	box-sizing: border-box;
37
+}
38
+.cp-z-slider {
39
+	float: right;
40
+	margin-left: 6px;
41
+	height: 128px;
42
+	width: 20px;
43
+	background: linear-gradient(to bottom, #ff0000 0%,#ff00ff 17%,#0000ff 33%,#00ffff 50%,#00ff00 67%,#ffff00 83%,#ff0000 100%);
44
+}
45
+.cp-z-cursor {
46
+	position: absolute;
47
+	margin-top: -4px;
48
+	width: 100%;
49
+	border: 4px solid white;
50
+	border-color: transparent white;
51
+	box-sizing: border-box;
52
+}
53
+.cp-alpha {
54
+	clear: left;
55
+	width: 100%;
56
+	height: 16px;
57
+	margin: 6px 0;
58
+	background: linear-gradient(to right, rgba(68,68,68,1) 0%,rgba(0,0,0,0) 100%);
59
+}
60
+.cp-alpha-cursor {
61
+	position: absolute;
62
+	margin-left: -4px;
63
+	height: 100%;
64
+	border: 4px solid white;
65
+	border-color: white transparent;
66
+	box-sizing: border-box;
67
+}

+ 45
- 0
development/compatibility.css View File

@@ -0,0 +1,45 @@
1
+.cp-xy-slider {
2
+	/* IE9 SVG, needs conditional override of 'filter' to 'none' */
3
+	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMCIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
4
+	background: -moz-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); /* FF3.6+ */
5
+	background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
6
+	background: -webkit-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
7
+	background: -o-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
8
+	background: -ms-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* IE10+ */
9
+	background: linear-gradient(to right, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* W3C */
10
+	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-8 */
11
+}
12
+
13
+.cp-white {
14
+	/* IE9 SVG, needs conditional override of 'filter' to 'none' */
15
+	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
16
+	background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%); /* FF3.6+ */
17
+	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,1))); /* Chrome,Safari4+ */
18
+	background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* Chrome10+,Safari5.1+ */
19
+	background: -o-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* Opera 11.10+ */
20
+	background: -ms-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* IE10+ */
21
+	background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* W3C */
22
+	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=0 ); /* IE6-8 */
23
+}
24
+.cp-z-slider {
25
+	background: url(rainbow.png); /* Old browsers */
26
+	/* IE9 SVG, needs conditional override of 'filter' to 'none' */
27
+	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmMDAwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjE3JSIgc3RvcC1jb2xvcj0iI2ZmMDBmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjMzJSIgc3RvcC1jb2xvcj0iIzAwMDBmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzAwZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjY3JSIgc3RvcC1jb2xvcj0iIzAwZmYwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjgzJSIgc3RvcC1jb2xvcj0iI2ZmZmYwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZjAwMDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
28
+	background: -moz-linear-gradient(top,  rgba(255,0,0,1) 0%, rgba(255,0,255,1) 17%, rgba(0,0,255,1) 33%, rgba(0,255,255,1) 50%, rgba(0,255,0,1) 67%, rgba(255,255,0,1) 83%, rgba(255,0,0,1) 100%); /* FF3.6+ */
29
+	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,0,0,1)), color-stop(17%,rgba(255,0,255,1)), color-stop(33%,rgba(0,0,255,1)), color-stop(50%,rgba(0,255,255,1)), color-stop(67%,rgba(0,255,0,1)), color-stop(83%,rgba(255,255,0,1)), color-stop(100%,rgba(255,0,0,1))); /* Chrome,Safari4+ */
30
+	background: -webkit-linear-gradient(top,  rgba(255,0,0,1) 0%,rgba(255,0,255,1) 17%,rgba(0,0,255,1) 33%,rgba(0,255,255,1) 50%,rgba(0,255,0,1) 67%,rgba(255,255,0,1) 83%,rgba(255,0,0,1) 100%); /* Chrome10+,Safari5.1+ */
31
+	background: -o-linear-gradient(top,  rgba(255,0,0,1) 0%,rgba(255,0,255,1) 17%,rgba(0,0,255,1) 33%,rgba(0,255,255,1) 50%,rgba(0,255,0,1) 67%,rgba(255,255,0,1) 83%,rgba(255,0,0,1) 100%); /* Opera 11.10+ */
32
+	background: -ms-linear-gradient(top,  rgba(255,0,0,1) 0%,rgba(255,0,255,1) 17%,rgba(0,0,255,1) 33%,rgba(0,255,255,1) 50%,rgba(0,255,0,1) 67%,rgba(255,255,0,1) 83%,rgba(255,0,0,1) 100%); /* IE10+ */
33
+	background: linear-gradient(to bottom,  rgba(255,0,0,1) 0%,rgba(255,0,255,1) 17%,rgba(0,0,255,1) 33%,rgba(0,255,255,1) 50%,rgba(0,255,0,1) 67%,rgba(255,255,0,1) 83%,rgba(255,0,0,1) 100%); /* W3C */
34
+}
35
+.cp-alpha {
36
+	/* IE9 SVG, needs conditional override of 'filter' to 'none' */
37
+	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzQ0NDQ0NCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMCIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
38
+	background: -moz-linear-gradient(left,  rgba(68,68,68,1) 0%, rgba(0,0,0,0) 100%); /* FF3.6+ */
39
+	background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(68,68,68,1)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
40
+	background: -webkit-linear-gradient(left,  rgba(68,68,68,1) 0%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
41
+	background: -o-linear-gradient(left,  rgba(68,68,68,1) 0%,rgba(0,0,0,0) 100%); /* Opera 11.10+ */
42
+	background: -ms-linear-gradient(left,  rgba(68,68,68,1) 0%,rgba(0,0,0,0) 100%); /* IE10+ */
43
+	background: linear-gradient(to right,  rgba(68,68,68,1) 0%,rgba(0,0,0,0) 100%); /* W3C */
44
+	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#444444', endColorstr='#00000000',GradientType=1 ); /* IE6-8 */
45
+}

BIN
development/fmog.png View File


BIN
development/screen-shot-all.jpg View File


+ 25
- 0
development/ui.html View File

@@ -0,0 +1,25 @@
1
+<!DOCTYPE html>
2
+<html>
3
+<head>
4
+	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
5
+	<link rel="stylesheet" type="text/css" href="../index.css">
6
+	<link rel="stylesheet" type="text/css" href="colorPicker.css">
7
+	<link rel="stylesheet" type="text/css" href="compatibility.css">
8
+	<title>UI dev</title>
9
+</head>
10
+<body>
11
+<h1>Tiny jQuery colorPicker UI</h1>
12
+<div class="cp-color-picker">
13
+	<div class="cp-z-slider">
14
+		<div class="cp-z-cursor"></div>	
15
+	</div>
16
+	<div class="cp-xy-slider">
17
+		<div class="cp-white"></div>
18
+		<div class="cp-xy-cursor"></div>
19
+	</div>
20
+	<div class="cp-alpha">
21
+		<div class="cp-alpha-cursor"></div>	
22
+	</div>
23
+</div>
24
+</body>
25
+</html>

+ 29
- 0
index.css
File diff suppressed because it is too large
View File


+ 206
- 0
index.html View File

@@ -0,0 +1,206 @@
1
+<!DOCTYPE html>
2
+<html>
3
+<head>
4
+	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
5
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
6
+	<link rel="stylesheet" type="text/css" href="index.css">
7
+	<!-- <link rel="stylesheet" type="text/css" href="development/colorPicker.css"> -->
8
+	<link rel="stylesheet" type="text/css" href="development/compatibility.css">
9
+	<title>tiny jQuery colorPicker</title>
10
+</head>
11
+<body>
12
+<h1>Tiny jQuery colorPicker</h1>
13
+<p>Looking for mobile first, tiny foot print, fast, scaleable, flexible and pluggable...<br>
14
+This <strong>4.4KB</strong> small HSB color picker is based on a subset of <a href="https://github.com/PitPik/colorPicker/blob/master/colors.js">colors.js</a> from it's big brother <a href="http://dematte.at/colorPicker/">colorPicker</a>, 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 (See demo plugins below in <a href="#demo">Demo</a>).</p>
15
+<a name="demo" id="demo"></a>
16
+<h2>Demo</h2>
17
+On all inputs with calssName 'color': <pre>$('input.color').colorPicker();</pre>
18
+<p>Switch between plugins:
19
+	<select id="pluginSelect">
20
+		<option value="desktop">Desktop (no plugin)</option>
21
+		<option value="mobile">Mobile</option>
22
+		<option value="input">Input fields</option>
23
+		<option value="noalpha">Default without alpha</option>
24
+	</select>
25
+	(see index.js for more details...)
26
+</p>
27
+<p>
28
+	<input class="color" value="#B6BD79" />
29
+	<input class="color" value="rgb(162, 63, 3)" />
30
+	<input class="color" value="hsl(32, 95%, 23%)" />
31
+</p>
32
+<h2>Features</h2>
33
+<p>Tiny jQuery colorPicker only loads if triggered to show. It uses battery saving technologies and super fast rendering for best performance on desktop and mobile browsers.<br>
34
+This colorPicker is very flexible to modify and customize and there is an easy way to write plugins to extend functionality, look and feel...<br>
35
+As Tiny jQuery colorPicker uses <a href="https://github.com/PitPik/colorPicker/blob/master/colors.js">colors.js</a> from it's big brother <a href="http://dematte.at/colorPicker/">colorPicker</a>, it provides a clean and rich color model and API that enables flexible extending for programmers. (See <a href="https://github.com/PitPik/colorPicker">colorPicker on GitHub</a> for more details)</p>
36
+<p>The following snipped shows how easy it is to make plugins: use for mobile</p>
37
+<pre style="display: block; overflow: auto;">
38
+window.myColorPicker = $('input.color').colorPicker({
39
+    buidCallback: function($elm) {
40
+        $elm.prepend('&lt;div class="cp-disp">&lt;/div>');
41
+    },
42
+    cssAddon:
43
+        '.cp-disp{padding:10px; margin-bottom:6px; font-size:19px; height:20px; line-height:20px}' +
44
+        '.cp-xy-slider{width:200px; height:200px;}' +
45
+        '.cp-xy-cursor{width:16px; height:16px; border-width:2px; margin:-8px}' +
46
+        '.cp-z-slider{height:200px; width:40px;}' +
47
+        '.cp-z-cursor{border-width:8px; margin-top:-8px;}' +
48
+        '.cp-alpha{height:40px;}' +
49
+        '.cp-alpha-cursor{border-width: 8px; margin-left:-8px;}',
50
+
51
+    renderCallback: function($elm, toggled) {
52
+        var colors = this.color.colors,
53
+            rgb = colors.RND.rgb;
54
+
55
+        $('.cp-disp').css({
56
+            backgroundColor: '#' + colors.HEX,
57
+            color: colors.RGBLuminance > 0.22 ? '#222' : '#ddd'
58
+        }).text('rgba(' + rgb.r + ', ' + rgb.g + ', ' + rgb.b +
59
+            ', ' + (Math.round(colors.alpha * 100) / 100) + ')');
60
+    }
61
+});
62
+</pre>
63
+<h2>API and usage</h2>
64
+<p>Will follow... See <a href="https://github.com/PitPik/tinyColorPicker">tinyColorPicke on GitHub</a> for now.</p>
65
+<!-- <script type="text/javascript" src="jquery-1.11.2.js"></script> -->
66
+<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
67
+<!-- <script type="text/javascript" src="colors.js"></script> -->
68
+<!-- <script type="text/javascript" src="jqColorPicker.js"></script> -->
69
+<script type="text/javascript" src="jqColorPicker.min.js"></script>
70
+<script type="text/javascript">
71
+	(function(window, undefined){
72
+		'use strict';
73
+
74
+		var plugin = {},
75
+			pluginSelect = document.getElementById('pluginSelect'),
76
+			getQueryVariable = function(variable) {
77
+				var query = window.location.search.substring(1),
78
+					vars = query.split('&'),
79
+					pair, i;
80
+
81
+				for (i = vars.length; i--; ) {
82
+					pair = vars[i].split('=');
83
+					if(pair[0] === variable){
84
+						return pair[1].replace(/^\s*|\s*$/, '');
85
+					}
86
+				}
87
+				return(false);
88
+			},
89
+			type = getQueryVariable('type'),
90
+			selector = document.getElementById('pluginSelect');
91
+
92
+		// plugin for mobile use (bigger and value/color display on top)
93
+		plugin.mobile = {
94
+			customBG: '#222',
95
+			margin: '4px -2px',
96
+
97
+			// demo on how to make plugins... mobile support plugin
98
+			buidCallback: function($elm) {
99
+				$elm.prepend('<div class="cp-disp"></div>');
100
+			},
101
+			cssAddon: // could also be in a css file instead
102
+				'.cp-disp{padding:10px; margin-bottom:6px; font-size:19px; height:20px; line-height:20px}' +
103
+				'.cp-xy-slider{width:200px; height:200px;}' +
104
+				'.cp-xy-cursor{width:16px; height:16px; border-width:2px; margin:-8px}' +
105
+				'.cp-z-slider{height:200px; width:40px;}' +
106
+				'.cp-z-cursor{border-width:8px; margin-top:-8px;}' +
107
+				'.cp-alpha{height:40px;}' +
108
+				'.cp-alpha-cursor{border-width: 8px; margin-left:-8px;}',
109
+
110
+			renderCallback: function($elm, toggled) {
111
+				var colors = this.color.colors,
112
+					rgb = colors.RND.rgb;
113
+
114
+				$('.cp-disp').css({
115
+					backgroundColor: '#' + colors.HEX,
116
+					color: colors.RGBLuminance > 0.22 ? '#222' : '#ddd'
117
+				}).text('rgba(' + rgb.r + ', ' + rgb.g + ', ' + rgb.b +
118
+					', ' + (Math.round(colors.alpha * 100) / 100) + ')');
119
+			}
120
+		};
121
+
122
+		// shows input fields for rgb and hsv; changeable
123
+		plugin.input = {
124
+			customBG: '#222',
125
+			margin: '4px -2px',
126
+
127
+			buidCallback: function($elm) {
128
+				var colorInstance = this.color,
129
+					colorPicker = this;
130
+
131
+				$elm.prepend('<div class="cp-panel">' +
132
+					'R <input type="text" class="cp-r" /><br>' +
133
+					'G <input type="text" class="cp-g" /><br>' +
134
+					'B <input type="text" class="cp-b" /><hr>' +
135
+					'H <input type="text" class="cp-h" /><br>' +
136
+					'S <input type="text" class="cp-s" /><br>' +
137
+					'B <input type="text" class="cp-v" />' +
138
+				'</div>').on('change', 'input', function(e) {
139
+					var value = this.value,
140
+						className = this.className,
141
+						type = className.split('-')[1],
142
+						color = {};
143
+
144
+					color[type] = value;
145
+					colorInstance.setColor(color, /(?:r|g|b)/.test(type) ? 'rgb' : 'hsv');
146
+					colorPicker.render();
147
+					this.blur();
148
+				});
149
+			},
150
+
151
+			cssAddon: // could also be in a css file instead
152
+				'.cp-panel {float:right; padding:0 1px 0 8px; margin-top:-1px;}' +
153
+				'.cp-panel, .cp-panel input {color:#bbb; font-family:monospace,' +
154
+					'"Courier New",Courier,mono; font-size:12px; font-weight:bold;}' +
155
+				'.cp-panel input {width:25px; height:12px; padding:2px 3px 1px;' +
156
+					'text-align:right; line-height:12px; background:transparent;' +
157
+					'border:1px solid; border-color:#222 #666 #666 #222;}' +
158
+				'.cp-panel hr {margin:0 -2px 2px; height:1px; border:0;' +
159
+					'background:#666; border-top:1px solid #222;}',
160
+
161
+			renderCallback: function($elm, toggled) {
162
+				var $panel = $('.cp-panel'),
163
+					colors = this.color.colors,
164
+					rgb = colors.RND.rgb,
165
+					hsv = colors.RND.hsv;
166
+
167
+				$('.cp-r', $panel).val(rgb.r);
168
+				$('.cp-g', $panel).val(rgb.g);
169
+				$('.cp-b', $panel).val(rgb.b);
170
+				$('.cp-h', $panel).val(hsv.h);
171
+				$('.cp-s', $panel).val(hsv.s);
172
+				$('.cp-v', $panel).val(hsv.v);
173
+			}
174
+		};
175
+
176
+		// the default; no extra stuff
177
+		plugin.desktop = {
178
+			customBG: '#222',
179
+			margin: '4px -2px'
180
+		};
181
+
182
+		// the default without alpha chanel though
183
+		plugin.noalpha = {
184
+			customBG: '#222',
185
+			margin: '4px -2px',
186
+			opacity: false
187
+		};
188
+
189
+
190
+
191
+		pluginSelect.value = type;
192
+		pluginSelect.onchange = function(e) {
193
+			location = window.location;
194
+
195
+			window.location = location.origin + location.pathname +
196
+				'?type=' + this.value + '#demo';
197
+		}
198
+
199
+		window.myColorPicker = $('input.color').colorPicker(
200
+			plugin[type] || plugin.desktop
201
+		);
202
+	})(window);
203
+</script>
204
+<a href="https://github.com/PitPik/tinyColorPicker"><img style="position: absolute; top: 0; right: 0; border: 0;" src="development/fmog.png" alt="Fork me on GitHub"></a>
205
+</body>
206
+</html>

+ 244
- 0
jqColorPicker.js View File

@@ -0,0 +1,244 @@
1
+;(function($, Colors, undefined){
2
+	'use strict';
3
+
4
+	var $document = $(document),
5
+		_colorPicker,
6
+		_color,
7
+		_options,
8
+		_cache = {},
9
+		_$UI,
10
+		_pointermove = 'touchmove mousemove pointermove',
11
+		_pointerup = 'touchend mouseup pointerup',
12
+		_GPU = false,
13
+		_animate = window.requestAnimationFrame ||
14
+			window.webkitRequestAnimationFrame || function(cb){cb()},
15
+		_html = '<div class="cp-color-picker"><div class="cp-z-slider"><div c' +
16
+			'lass="cp-z-cursor"></div></div><div class="cp-xy-slider"><div cl' +
17
+			'ass="cp-white"></div><div class="cp-xy-cursor"></div></div><div ' +
18
+			'class="cp-alpha"><div class="cp-alpha-cursor"></div></div></div>',
19
+			// 'grunt-contrib-uglify' puts all this back to one single string...
20
+		_css = '.cp-color-picker{position:absolute;overflow:hidden;padding:6p' +
21
+			'x 6px 0;background-color:#444;color:#bbb;font-family:Arial,Helve' +
22
+			'tica,sans-serif;font-size:12px;font-weight:400;cursor:default;bo' +
23
+			'rder-radius:5px}.cp-color-picker>div{position:relative;overflow:' +
24
+			'hidden}.cp-xy-slider{float:left;height:128px;width:128px;margin-' +
25
+			'bottom:6px;background:linear-gradient(to right,rgba(255,255,255,' +
26
+			'1)0,rgba(255,255,255,0)100%)}.cp-white{height:100%;width:100%;ba' +
27
+			'ckground:linear-gradient(to bottom,rgba(0,0,0,0)0,rgba(0,0,0,1)1' +
28
+			'00%)}.cp-xy-cursor{position:absolute;top:0;width:10px;height:10p' +
29
+			'x;margin:-5px;border:1px solid #fff;border-radius:100%;box-sizin' +
30
+			'g:border-box}.cp-z-slider{float:right;margin-left:6px;height:128' +
31
+			'px;width:20px;background:linear-gradient(to bottom,red 0,#f0f 17' +
32
+			'%,#00f 33%,#0ff 50%,#0f0 67%,#ff0 83%,red 100%)}.cp-z-cursor{pos' +
33
+			'ition:absolute;margin-top:-4px;width:100%;border:4px solid #fff;' +
34
+			'border-color:transparent #fff;box-sizing:border-box}.cp-alpha{cl' +
35
+			'ear:left;width:100%;height:16px;margin:6px 0;background:linear-g' +
36
+			'radient(to right,rgba(68,68,68,1)0,rgba(0,0,0,0)100%)}.cp-alpha-' +
37
+			'cursor{position:absolute;margin-left:-4px;height:100%;border:4px' +
38
+			' solid #fff;border-color:#fff transparent;box-sizing:border-box}',
39
+
40
+		ColorPicker = function(options) {
41
+			_color = this.color = new Colors(options);
42
+			_options = _color.options;
43
+		};
44
+
45
+	ColorPicker.prototype.render = render;
46
+
47
+	function extractValue(elm) {
48
+		return elm.value || $(elm).css('background-color') || '#fff';
49
+	}
50
+
51
+	function resolveEventType(event) {
52
+		return event.originalEvent.touches ?
53
+			event.originalEvent.touches[0] : event;
54
+	}
55
+
56
+	function toggle(event) {
57
+		var $this = $(this),
58
+			position;
59
+
60
+		if (event) {
61
+			position = $this.offset();
62
+			_cache.$element = $this;
63
+			_options.preventFocus && event.preventDefault();
64
+
65
+			(_$UI || build()).css({
66
+				'left': position.left, // check for space...
67
+				'top': position.top + $this.outerHeight(true)
68
+			}).show(_options.animationSpeed, function() {
69
+				_cache.alphaWidth = $('.cp-alpha', _$UI).width();
70
+				_cache.sliderWidth = $('.cp-xy-slider', _$UI).width();
71
+				_color.setColor(extractValue($this[0]));
72
+				_animate(function(){render(true)});
73
+			});
74
+		} else {
75
+			$(_$UI).hide(_options.animationSpeed, function() {
76
+				_cache.$element.blur();
77
+			});
78
+		}
79
+	};
80
+
81
+	function build() {
82
+		// CSS
83
+		$('head').append('<style type="text/css">' +
84
+			(_options.css || _css) + (_options.cssAddon || '') + '</style>');
85
+		// HTML
86
+		return _$UI = $(_html).css({'margin': _options.margin}).
87
+			find('.cp-alpha').toggle(!!_options.opacity).
88
+			parent(). // back to $(_html)
89
+			show(0, function() {
90
+				_GPU = _options.GPU && $(this).css('transform') === '';
91
+				_options.buidCallback.call(_colorPicker, $(this));
92
+			}).hide().
93
+			on('touchstart mousedown pointerdown',
94
+				'.cp-xy-slider,.cp-z-slider,.cp-alpha', pointerdown).
95
+			appendTo(document.body);
96
+	}
97
+
98
+	function pointerdown(e) {
99
+		var action = this.className.replace('cp-', '').replace('-', '_');
100
+
101
+		e.preventDefault();
102
+
103
+		_cache.elementOrigin = $(this).offset();
104
+		(action = action === 'xy_slider' ? xy_slider :
105
+			action === 'z_slider' ? z_slider : alpha)(e);
106
+
107
+		$document.on(_pointerup, pointerup).on(_pointermove, action);
108
+	}
109
+
110
+	function pointerup(e) {
111
+		$document.off(_pointermove).off(_pointerup);
112
+	}
113
+
114
+	function xy_slider(event) {
115
+		var e = resolveEventType(event),
116
+			x = e.pageX - _cache.elementOrigin.left,
117
+			y = e.pageY - _cache.elementOrigin.top;
118
+
119
+		_color.setColor({
120
+			s: x / _cache.sliderWidth * 100,
121
+			v: 100 - (y / _cache.sliderWidth * 100)
122
+		}, 'hsv');
123
+		_animate(render);
124
+	}
125
+
126
+	function z_slider(event) {
127
+		var z = resolveEventType(event).pageY - _cache.elementOrigin.top,
128
+			hsv = _color.colors.hsv;
129
+
130
+		_color.setColor({h: 360 - (z / _cache.sliderWidth * 360)}, 'hsv');
131
+		_animate(render);
132
+	}
133
+
134
+	function alpha(event) {
135
+		var x = resolveEventType(event).pageX - _cache.elementOrigin.left,
136
+			alpha = x / _cache.alphaWidth;
137
+
138
+		_color.setColor({}, 'rgb', alpha > 1 ? 1 : alpha < 0 ? 0 : alpha);
139
+		_animate(render);
140
+	}
141
+
142
+	function render(toggled) {
143
+		var colors = _color.colors,
144
+			hueRGB = colors.hueRGB,
145
+			RGB = colors.RND.rgb,
146
+			HSL = colors.RND.hsl,
147
+			dark = '#222',
148
+			light = '#ddd',
149
+			colorMode = _cache.$element.data('colorMode'),
150
+			isAlpha = colors.alpha !== 1,
151
+			alpha = Math.round(colors.alpha * 100) / 100,
152
+			RGBInnerText = RGB.r + ', ' + RGB.g + ', ' + RGB.b,
153
+			RGBAText = 'rgba(' + RGBInnerText + ', ' + alpha + ')',
154
+			text = (colorMode === 'HEX' && !isAlpha ? '#' + colors.HEX :
155
+				colorMode === 'rgb' || (colorMode === 'HEX' && isAlpha) ?
156
+				(!isAlpha ? 'rgb(' + RGBInnerText + ')' : RGBAText) :
157
+				('hsl' + (isAlpha ? 'a(' : '(') + HSL.h + ', ' + HSL.s + '%, ' +
158
+					HSL.l + '%' + (isAlpha ? ', ' + alpha : '') + ')')),
159
+			HUEContrast = colors.HUELuminance > 0.22 ? dark : light,
160
+			alphaContrast = colors.rgbaMixBlack.luminance > 0.22 ? dark : light,
161
+			h = (1 - colors.hsv.h) * _cache.sliderWidth,
162
+			s = colors.hsv.s * _cache.sliderWidth,
163
+			v = (1 - colors.hsv.v) * _cache.sliderWidth,
164
+			a = alpha * _cache.alphaWidth,
165
+			t3d = _GPU ? 'translate3d' : '';
166
+
167
+		$('.cp-xy-slider').css({
168
+			backgroundColor: 'rgb(' +
169
+				hueRGB.r + ',' + hueRGB.g + ',' + hueRGB.b + ')'});
170
+		$('.cp-xy-cursor').css({
171
+			transform: t3d + '(' + s + 'px, ' + v + 'px, 0)',
172
+			left: !_GPU ? s : '',
173
+			top: !_GPU ? v : '',
174
+			borderColor : colors.RGBLuminance > 0.22 ? dark : light
175
+		});
176
+		$('.cp-z-cursor').css({
177
+			transform: t3d + '(0, ' + h + 'px, 0)',
178
+			top: !_GPU ? h : '',
179
+			borderLeftColor : HUEContrast,
180
+			borderRightColor : HUEContrast
181
+		});
182
+		$('.cp-alpha').css({backgroundColor: 'rgb(' + RGBInnerText + ')'});
183
+		$('.cp-alpha-cursor').css({
184
+			transform: t3d + '(' + a + 'px, 0, 0)',
185
+			left: !_GPU ? a : '',
186
+			borderTopColor : alphaContrast,
187
+			borderBottomColor : alphaContrast
188
+		});
189
+		_options.doRender && _cache.$element.css({
190
+			backgroundColor : RGBAText,
191
+			color: colors.rgbaMixBGMixCustom.luminance > 0.22 ? dark : light
192
+		});
193
+		_cache.$element.val(text);
194
+
195
+		_options.renderCallback.call(
196
+			_colorPicker, _cache.$element, toggled === true);
197
+	}
198
+
199
+	// export as plugin to jQuery
200
+	$.fn.colorPicker = function(options) {
201
+		var $that = this,
202
+			noop = function(){};
203
+
204
+ 		options = $.extend({
205
+			animationSpeed: 150,
206
+			GPU: true,
207
+			doRender: true,
208
+			customBG: '#FFF',
209
+			opacity: true,
210
+			renderCallback: noop,
211
+			buidCallback: noop
212
+			// css: '',
213
+			// cssAddon: '',
214
+			// margin: '',
215
+			// preventFocus: false
216
+		}, options);
217
+ 
218
+		if (!_colorPicker) { // we only want one single instance...
219
+			_colorPicker = new ColorPicker(options);
220
+
221
+			$document.on('touchstart mousedown pointerdown', function(e) {
222
+				if ($.inArray(e.target, $that) === -1 &&
223
+				!$(e.target).closest(_$UI).length) {
224
+					toggle();
225
+				}
226
+			}).on('focus', this.selector, toggle);
227
+		}
228
+
229
+		this.colorPicker = _colorPicker;
230
+
231
+		return this.each(function() {
232
+			var value = extractValue(this),
233
+				mode = value.split('(');
234
+			// save initial color mode and set color and bgColor
235
+			$(this).data('colorMode', mode[1] ? mode[0].substr(0, 3) : 'HEX');
236
+			options.doRender && $(this).css({'background-color': value,
237
+				'color': function() {
238
+					return _color.setColor(value).
239
+						rgbaMixBGMixCustom.luminance > 0.22 ? '#222' : '#ddd'
240
+				}
241
+			});
242
+		});
243
+	};
244
+})(window.jQuery, Colors);

+ 1
- 0
jqColorPicker.js.map
File diff suppressed because it is too large
View File


+ 4
- 0
jqColorPicker.min.js View File

@@ -0,0 +1,4 @@
1
+/*! tiny colorPicker - v1.0.0 2015-02-02 */
2
+!function(a,b){"use strict";function c(a,c,d,f,g){if("string"==typeof c){var c=t.txt2color(c);d=c.type,n[d]=c[d],g=g!==b?g:c.alpha}else if(c)for(var h in c)a[d][h]=k(c[h]/l[d][h][1],0,1);return g!==b&&(a.alpha=+g),e(d,f?a:b)}function d(a,b,c){var d=m.options.grey,e={};return e.RGB={r:a.r,g:a.g,b:a.b},e.rgb={r:b.r,g:b.g,b:b.b},e.alpha=c,e.equivalentGrey=Math.round(d.r*a.r+d.g*a.g+d.b*a.b),e.rgbaMixBlack=i(b,{r:0,g:0,b:0},c,1),e.rgbaMixWhite=i(b,{r:1,g:1,b:1},c,1),e.rgbaMixBlack.luminance=h(e.rgbaMixBlack,!0),e.rgbaMixWhite.luminance=h(e.rgbaMixWhite,!0),m.options.customBG&&(e.rgbaMixCustom=i(b,m.options.customBG,c,1),e.rgbaMixCustom.luminance=h(e.rgbaMixCustom,!0),m.options.customBG.luminance=h(m.options.customBG,!0)),e}function e(a,b){var c,e,k,o=b||n,p=t,q=m.options,r=l,s=o.RND,u="",v="",w={hsl:"hsv",rgb:a},x=s.rgb;if("alpha"!==a){for(var y in r)if(!r[y][y]){a!==y&&(v=w[y]||"rgb",o[y]=p[v+"2"+y](o[v])),s[y]||(s[y]={}),c=o[y];for(u in c)s[y][u]=Math.round(c[u]*r[y][u][1])}x=s.rgb,o.HEX=p.RGB2HEX(x),o.equivalentGrey=q.grey.r*o.rgb.r+q.grey.g*o.rgb.g+q.grey.b*o.rgb.b,o.webSave=e=f(x,51),o.webSmart=k=f(x,17),o.saveColor=x.r===e.r&&x.g===e.g&&x.b===e.b?"web save":x.r===k.r&&x.g===k.g&&x.b===k.b?"web smart":"",o.hueRGB=t.hue2RGB(o.hsv.h),b&&(o.background=d(x,o.rgb,o.alpha))}var z,A,B,C=o.rgb,D=o.alpha,E="luminance",F=o.background;return z=i(C,{r:0,g:0,b:0},D,1),z[E]=h(z,!0),o.rgbaMixBlack=z,A=i(C,{r:1,g:1,b:1},D,1),A[E]=h(A,!0),o.rgbaMixWhite=A,q.customBG&&(B=i(C,F.rgbaMixCustom,D,1),B[E]=h(B,!0),B.WCAG2Ratio=j(B[E],F.rgbaMixCustom[E]),o.rgbaMixBGMixCustom=B,B.luminanceDelta=Math.abs(B[E]-F.rgbaMixCustom[E]),B.hueDelta=g(F.rgbaMixCustom,B,!0)),o.RGBLuminance=h(x),o.HUELuminance=h(o.hueRGB),q.convertCallback&&q.convertCallback(o,a),o}function f(a,b){var c={},d=0,e=b/2;for(var f in a)d=a[f]%b,c[f]=a[f]+(d>e?b-d:-d);return c}function g(a,b,c){return(Math.max(a.r-b.r,b.r-a.r)+Math.max(a.g-b.g,b.g-a.g)+Math.max(a.b-b.b,b.b-a.b))*(c?255:1)/765}function h(a,b){for(var c=b?1:255,d=[a.r/c,a.g/c,a.b/c],e=m.options.luminance,f=d.length;f--;)d[f]=d[f]<=.03928?d[f]/12.92:Math.pow((d[f]+.055)/1.055,2.4);return e.r*d[0]+e.g*d[1]+e.b*d[2]}function i(a,c,d,e){var f={},g=d!==b?d:1,h=e!==b?e:1,i=g+h*(1-g);for(var j in a)f[j]=(a[j]*g+c[j]*h*(1-g))/i;return f.a=i,f}function j(a,b){var c=1;return c=a>=b?(a+.05)/(b+.05):(b+.05)/(a+.05),Math.round(100*c)/100}function k(a,b,c){return a>c?c:b>a?b:a}var l={rgb:{r:[0,255],g:[0,255],b:[0,255]},hsv:{h:[0,360],s:[0,100],v:[0,100]},hsl:{h:[0,360],s:[0,100],l:[0,100]},alpha:{alpha:[0,1]},HEX:{HEX:[0,16777215]}},m={},n={},o={r:.298954,g:.586434,b:.114612},p={r:.2126,g:.7152,b:.0722},q=a.Colors=function(a){this.colors={RND:{}},this.options={color:"rgba(204, 82, 37, 0.8)",grey:o,luminance:p,valueRanges:l},r(this,a||{})},r=function(a,d){var e,f=a.options;s(a);for(var g in d)d[g]!==b&&(f[g]=d[g]);e=f.customBG,f.customBG="string"==typeof e?t.txt2color(e).rgb:e,n=c(a.colors,f.color,b,!0)},s=function(a){m!==a&&(m=a,n=a.colors)};q.prototype.setColor=function(a,d,f){return s(this),a?c(this.colors,a,d,b,f):(f!==b&&(this.colors.alpha=f),e(d))},q.prototype.setCustomBackground=function(a){return s(this),this.options.customBG="string"==typeof a?t.txt2color(a).rgb:a,c(this.colors,b,"rgb")},q.prototype.saveAsBackground=function(){return s(this),c(this.colors,b,"rgb",!0)};var t={txt2color:function(a){var b={},c=a.replace(/(?:#|\)|%)/g,"").split("("),d=(c[1]||"").split(/,\s*/),e=c[1]?c[0].substr(0,3):"rgb",f="";if(b.type=e,b[e]={},c[1])for(var g=3;g--;)f=e[g]||e.charAt(g),b[e][f]=+d[g]/l[e][f][1];else b.rgb=t.HEX2rgb(c[0]);return b.alpha=d[3]?+d[3]:1,b},RGB2HEX:function(a){return((a.r<16?"0":"")+a.r.toString(16)+(a.g<16?"0":"")+a.g.toString(16)+(a.b<16?"0":"")+a.b.toString(16)).toUpperCase()},HEX2rgb:function(a){return a=a.split(""),{r:parseInt(a[0]+a[a[3]?1:0],16)/255,g:parseInt(a[a[3]?2:1]+(a[3]||a[1]),16)/255,b:parseInt((a[4]||a[2])+(a[5]||a[2]),16)/255}},hue2RGB:function(a){var b=6*a,c=~~b%6,d=6===b?0:b-c;return{r:Math.round(255*[1,1-d,0,0,d,1][c]),g:Math.round(255*[d,1,1,1-d,0,0][c]),b:Math.round(255*[0,0,d,1,1,1-d][c])}},rgb2hsv:function(a){var b,c,d,e=a.r,f=a.g,g=a.b,h=0;return g>f&&(f=g+(g=f,0),h=-1),c=g,f>e&&(e=f+(f=e,0),h=-2/6-h,c=Math.min(f,g)),b=e-c,d=e?b/e:0,{h:1e-15>d?n&&n.hsl&&n.hsl.h||0:b?Math.abs(h+(f-g)/(6*b)):0,s:e?b/e:n&&n.hsv&&n.hsv.s||0,v:e}},hsv2rgb:function(a){var b=6*a.h,c=a.s,d=a.v,e=~~b,f=b-e,g=d*(1-c),h=d*(1-f*c),i=d*(1-(1-f)*c),j=e%6;return{r:[d,h,g,g,i,d][j],g:[i,d,d,h,g,g][j],b:[g,g,i,d,d,h][j]}},hsv2hsl:function(a){var b=(2-a.s)*a.v,c=a.s*a.v;return c=a.s?1>b?b?c/b:0:c/(2-b):0,{h:a.h,s:a.v||c?c:n&&n.hsl&&n.hsl.s||0,l:b/2}},rgb2hsl:function(a,b){var c=t.rgb2hsv(a);return t.hsv2hsl(b?c:n.hsv=c)},hsl2rgb:function(a){var b=6*a.h,c=a.s,d=a.l,e=.5>d?d*(1+c):d+c-c*d,f=d+d-e,g=e?(e-f)/e:0,h=~~b,i=b-h,j=e*g*i,k=f+j,l=e-j,m=h%6;return{r:[e,l,f,f,k,e][m],g:[k,e,e,l,f,f][m],b:[f,f,k,e,e,l][m]}}}}(window);
3
+!function(a,b){"use strict";function c(b){return b.value||a(b).css("background-color")||"#fff"}function d(a){return a.originalEvent.touches?a.originalEvent.touches[0]:a}function e(b){var d,e=a(this);b?(d=e.offset(),r.$element=e,o.preventFocus&&b.preventDefault(),(p||f()).css({left:d.left,top:d.top+e.outerHeight(!0)}).show(o.animationSpeed,function(){r.alphaWidth=a(".cp-alpha",p).width(),r.sliderWidth=a(".cp-xy-slider",p).width(),n.setColor(c(e[0])),v(function(){l(!0)})})):a(p).hide(o.animationSpeed,function(){r.$element.blur()})}function f(){return a("head").append('<style type="text/css">'+(o.css||x)+(o.cssAddon||"")+"</style>"),p=a(w).css({margin:o.margin}).find(".cp-alpha").toggle(!!o.opacity).parent().show(0,function(){u=o.GPU&&""===a(this).css("transform"),o.buidCallback.call(m,a(this))}).hide().on("touchstart mousedown pointerdown",".cp-xy-slider,.cp-z-slider,.cp-alpha",g).appendTo(document.body)}function g(b){var c=this.className.replace("cp-","").replace("-","_");b.preventDefault(),r.elementOrigin=a(this).offset(),(c="xy_slider"===c?i:"z_slider"===c?j:k)(b),q.on(t,h).on(s,c)}function h(){q.off(s).off(t)}function i(a){var b=d(a),c=b.pageX-r.elementOrigin.left,e=b.pageY-r.elementOrigin.top;n.setColor({s:c/r.sliderWidth*100,v:100-e/r.sliderWidth*100},"hsv"),v(l)}function j(a){{var b=d(a).pageY-r.elementOrigin.top;n.colors.hsv}n.setColor({h:360-b/r.sliderWidth*360},"hsv"),v(l)}function k(a){var b=d(a).pageX-r.elementOrigin.left,c=b/r.alphaWidth;n.setColor({},"rgb",c>1?1:0>c?0:c),v(l)}function l(b){var c=n.colors,d=c.hueRGB,e=c.RND.rgb,f=c.RND.hsl,g="#222",h="#ddd",i=r.$element.data("colorMode"),j=1!==c.alpha,k=Math.round(100*c.alpha)/100,l=e.r+", "+e.g+", "+e.b,p="rgba("+l+", "+k+")",q="HEX"!==i||j?"rgb"===i||"HEX"===i&&j?j?p:"rgb("+l+")":"hsl"+(j?"a(":"(")+f.h+", "+f.s+"%, "+f.l+"%"+(j?", "+k:"")+")":"#"+c.HEX,s=c.HUELuminance>.22?g:h,t=c.rgbaMixBlack.luminance>.22?g:h,v=(1-c.hsv.h)*r.sliderWidth,w=c.hsv.s*r.sliderWidth,x=(1-c.hsv.v)*r.sliderWidth,y=k*r.alphaWidth,z=u?"translate3d":"";a(".cp-xy-slider").css({backgroundColor:"rgb("+d.r+","+d.g+","+d.b+")"}),a(".cp-xy-cursor").css({transform:z+"("+w+"px, "+x+"px, 0)",left:u?"":w,top:u?"":x,borderColor:c.RGBLuminance>.22?g:h}),a(".cp-z-cursor").css({transform:z+"(0, "+v+"px, 0)",top:u?"":v,borderLeftColor:s,borderRightColor:s}),a(".cp-alpha").css({backgroundColor:"rgb("+l+")"}),a(".cp-alpha-cursor").css({transform:z+"("+y+"px, 0, 0)",left:u?"":y,borderTopColor:t,borderBottomColor:t}),o.doRender&&r.$element.css({backgroundColor:p,color:c.rgbaMixBGMixCustom.luminance>.22?g:h}),r.$element.val(q),o.renderCallback.call(m,r.$element,b===!0)}var m,n,o,p,q=a(document),r={},s="touchmove mousemove pointermove",t="touchend mouseup pointerup",u=!1,v=window.requestAnimationFrame||window.webkitRequestAnimationFrame||function(a){a()},w='<div class="cp-color-picker"><div class="cp-z-slider"><div class="cp-z-cursor"></div></div><div class="cp-xy-slider"><div class="cp-white"></div><div class="cp-xy-cursor"></div></div><div class="cp-alpha"><div class="cp-alpha-cursor"></div></div></div>',x=".cp-color-picker{position:absolute;overflow:hidden;padding:6px 6px 0;background-color:#444;color:#bbb;font-family:Arial,Helvetica,sans-serif;font-size:12px;font-weight:400;cursor:default;border-radius:5px}.cp-color-picker>div{position:relative;overflow:hidden}.cp-xy-slider{float:left;height:128px;width:128px;margin-bottom:6px;background:linear-gradient(to right,rgba(255,255,255,1)0,rgba(255,255,255,0)100%)}.cp-white{height:100%;width:100%;background:linear-gradient(to bottom,rgba(0,0,0,0)0,rgba(0,0,0,1)100%)}.cp-xy-cursor{position:absolute;top:0;width:10px;height:10px;margin:-5px;border:1px solid #fff;border-radius:100%;box-sizing:border-box}.cp-z-slider{float:right;margin-left:6px;height:128px;width:20px;background:linear-gradient(to bottom,red 0,#f0f 17%,#00f 33%,#0ff 50%,#0f0 67%,#ff0 83%,red 100%)}.cp-z-cursor{position:absolute;margin-top:-4px;width:100%;border:4px solid #fff;border-color:transparent #fff;box-sizing:border-box}.cp-alpha{clear:left;width:100%;height:16px;margin:6px 0;background:linear-gradient(to right,rgba(68,68,68,1)0,rgba(0,0,0,0)100%)}.cp-alpha-cursor{position:absolute;margin-left:-4px;height:100%;border:4px solid #fff;border-color:#fff transparent;box-sizing:border-box}",y=function(a){n=this.color=new b(a),o=n.options};y.prototype.render=l,a.fn.colorPicker=function(b){var d=this,f=function(){};return b=a.extend({animationSpeed:150,GPU:!0,doRender:!0,customBG:"#FFF",opacity:!0,renderCallback:f,buidCallback:f},b),m||(m=new y(b),q.on("touchstart mousedown pointerdown",function(b){-1!==a.inArray(b.target,d)||a(b.target).closest(p).length||e()}).on("focus",this.selector,e)),this.colorPicker=m,this.each(function(){var d=c(this),e=d.split("(");a(this).data("colorMode",e[1]?e[0].substr(0,3):"HEX"),b.doRender&&a(this).css({"background-color":d,color:function(){return n.setColor(d).rgbaMixBGMixCustom.luminance>.22?"#222":"#ddd"}})})}}(window.jQuery,Colors);
4
+//# sourceMappingURL=jqColorPicker.js.map

+ 12
- 0
package.json View File

@@ -0,0 +1,12 @@
1
+{
2
+  "name": "tiny colorPicker",
3
+  "version": "1.0.0",
4
+  "repository": {
5
+    "type": "git",
6
+    "url": "http://github.com/PitPik/tinyColorPicker.git"
7
+  },
8
+  "devDependencies": {
9
+    "grunt": "^0.4.5",
10
+    "grunt-contrib-uglify": "^0.5.1"
11
+  }
12
+}

Loading…
Cancel
Save