Browse Source

AMD / CommonJS / bower

tags/1.0.1
peterd 3 years ago
parent
commit
10ee8931e0
9 changed files with 366 additions and 351 deletions
  1. 5
    12
      README.md
  2. 4
    2
      bower.json
  3. 12
    2
      colors.js
  4. 0
    0
      development/colors-amd-wrapper.js
  5. 0
    0
      development/jqColorPicker-amd-wrapper.js
  6. 341
    331
      jqColorPicker.js
  7. 1
    1
      jqColorPicker.js.map
  8. 2
    2
      jqColorPicker.min.js
  9. 1
    1
      package.json

+ 5
- 12
README.md View File

@@ -24,21 +24,14 @@ Supported color spaces are: rgb, hsv(b), hsl, HEX
24 24
 </script>
25 25
 ```
26 26
 
27
-## AMD wrapper
28
-tinyColorPicker now supports AMD (thanks to [Munawwar](https://github.com/Munawwar)). Both files colors.js and jqColorPicker.js return their constructors so that it is easy to wrap them inside colors-amd-wrapper.js and jqColorPicker-amd-wrapper.js. So, if you want to use require.js or other module loaders just follow the instructions inside those 2 files. (Maybe someone of you wants to write a grunt task to automate this ;o)
27
+## AMD / CommonJS wrapper
28
+tinyColorPicker now supports AMD and CommonJS import (thanks to [Munawwar](https://github.com/Munawwar)).
29 29
 
30
-If you don't want to use AMD but would like to store the constructor `Colors` on a different name space you can change this in color.js where you find:
31
-```javascript
32
-window.Colors = (function...
33
-// change this to what you want
34
-window.myNameSpace.ColorTool = (function...
35
-```
36
-If you do so you also need to change this reference in jqColorPicker.js at the very end:
30
+## bower support
31
+tinyColorPicker can be received by bower:
37 32
 
38 33
 ```javascript
39
-})(window, jQuery, Colors);
40
-// changes to
41
-})(window, jQuery, myNameSpace.ColorTool);
34
+bower install tinyColorPicker
42 35
 ```
43 36
 
44 37
 ##jqColorPicker.js

+ 4
- 2
bower.json View File

@@ -3,7 +3,7 @@
3 3
   "description": "Tiny jQuery color picker for mobile and desktop with alpha channel",
4 4
   "main": "jqColorPicker.min.js",
5 5
   "authors": [
6
-    "peterd <peter@dematte.at>"
6
+    "Peter Dematté <peter@dematte.at>"
7 7
   ],
8 8
   "license": "MIT",
9 9
   "keywords": [
@@ -18,7 +18,9 @@
18 18
   ],
19 19
   "homepage": "https://github.com/PitPik/tinyColorPicker",
20 20
   "moduleType": [
21
-    "globals"
21
+    "amd",
22
+    "globals",
23
+    "node"
22 24
   ],
23 25
   "ignore": [
24 26
     "**/.*",

+ 12
- 2
colors.js View File

@@ -1,4 +1,14 @@
1
-window.Colors = (function(window, undefined){
1
+(function (root, factory) {
2
+	if (typeof exports === 'object') {
3
+		module.exports = factory(root);
4
+	} else if (typeof define === 'function' && define.amd) {
5
+		define([], function () {
6
+			return factory(root);
7
+		});
8
+	} else {
9
+		root.Colors = factory(root);
10
+	}
11
+}(this, function(window, undefined) {
2 12
 	"use strict"
3 13
 
4 14
 	var _valueRanges = {
@@ -417,4 +427,4 @@ window.Colors = (function(window, undefined){
417 427
 	}
418 428
 
419 429
 	return Colors;
420
-})(window);
430
+}));

colors-amd-wrapper.js → development/colors-amd-wrapper.js View File


jqColorPicker-amd-wrapper.js → development/jqColorPicker-amd-wrapper.js View File


+ 341
- 331
jqColorPicker.js View File

@@ -1,331 +1,341 @@
1
-(function(window, $, Colors, undefined){
2
-	'use strict';
3
-
4
-	var $document = $(document),
5
-		_instance = $(),
6
-		_colorPicker,
7
-		_color,
8
-		_options,
9
-
10
-		_$trigger,
11
-		_$UI, _$xy_slider, _$xy_cursor, _$z_cursor , _$alpha , _$alpha_cursor,
12
-
13
-		_pointermove = 'touchmove.a mousemove.a pointermove.a',
14
-		_pointerdown = 'touchstart.a mousedown.a pointerdown.a',
15
-		_pointerup = 'touchend.a mouseup.a pointerup.a',
16
-		_GPU = false,
17
-		_round = Math.round,
18
-		_animate = window.requestAnimationFrame ||
19
-			window.webkitRequestAnimationFrame || function(cb){cb()},
20
-		_html = '<div class="cp-color-picker"><div class="cp-z-slider"><div c' +
21
-			'lass="cp-z-cursor"></div></div><div class="cp-xy-slider"><div cl' +
22
-			'ass="cp-white"></div><div class="cp-xy-cursor"></div></div><div ' +
23
-			'class="cp-alpha"><div class="cp-alpha-cursor"></div></div></div>',
24
-			// 'grunt-contrib-uglify' puts all this back to one single string...
25
-		_css = '.cp-color-picker{position:absolute;overflow:hidden;padding:6p' +
26
-			'x 6px 0;background-color:#444;color:#bbb;font-family:Arial,Helve' +
27
-			'tica,sans-serif;font-size:12px;font-weight:400;cursor:default;bo' +
28
-			'rder-radius:5px}.cp-color-picker>div{position:relative;overflow:' +
29
-			'hidden}.cp-xy-slider{float:left;height:128px;width:128px;margin-' +
30
-			'bottom:6px;background:linear-gradient(to right,#FFF,rgba(255,255' +
31
-			',255,0))}.cp-white{height:100%;width:100%;background:linear-grad' +
32
-			'ient(rgba(0,0,0,0),#000)}.cp-xy-cursor{position:absolute;top:0;w' +
33
-			'idth:10px;height:10px;margin:-5px;border:1px solid #fff;border-r' +
34
-			'adius:100%;box-sizing:border-box}.cp-z-slider{float:right;margin' +
35
-			'-left:6px;height:128px;width:20px;background:linear-gradient(red' +
36
-			' 0,#f0f 17%,#00f 33%,#0ff 50%,#0f0 67%,#ff0 83%,red 100%)}.cp-z-' +
37
-			'cursor{position:absolute;margin-top:-4px;width:100%;border:4px s' +
38
-			'olid #fff;border-color:transparent #fff;box-sizing:border-box}.c' +
39
-			'p-alpha{clear:both;width:100%;height:16px;margin:6px 0;backgroun' +
40
-			'd:linear-gradient(to right,#444,rgba(0,0,0,0))}.cp-alpha-cursor{' +
41
-			'position:absolute;margin-left:-4px;height:100%;border:4px solid ' +
42
-			'#fff;border-color:#fff transparent;box-sizing:border-box}',
43
-
44
-		ColorPicker = function(options) {
45
-			_color = this.color = new Colors(options);
46
-			_options = _color.options;
47
-			_colorPicker = this;
48
-		};
49
-
50
-	ColorPicker.prototype = {
51
-		render: preRender,
52
-		toggle: toggle
53
-	};
54
-
55
-	function extractValue(elm) {
56
-		return elm.value || elm.getAttribute('value') ||
57
-			$(elm).css('background-color') || '#fff';
58
-	}
59
-
60
-	function resolveEventType(event) {
61
-		event = event.originalEvent && event.originalEvent.touches ?
62
- 			event.originalEvent.touches[0] : event;
63
-
64
-		return event.originalEvent ? event.originalEvent : event;
65
-	}
66
-
67
-	function findElement($elm) {
68
-		return $($elm.find(_options.doRender)[0] || $elm[0]);
69
-	}
70
-
71
-	function toggle(event) {
72
-		var $this = $(this),
73
-			position = $this.offset(),
74
-			$window = $(window),
75
-			gap = _options.gap;
76
-
77
-		if (event) {
78
-			_$trigger = findElement($this);
79
-			_$trigger._colorMode = _$trigger.data('colorMode');
80
-
81
-			_colorPicker.$trigger = $this;
82
-
83
-			(_$UI || build()).css({
84
-				// 'width': _$UI[0]._width,
85
-				'left': (_$UI[0]._left = position.left) -
86
-					((_$UI[0]._left = _$UI[0]._left + _$UI[0]._width -
87
-					($window.scrollLeft() + $window.width())) + gap > 0 ?
88
-					_$UI[0]._left + gap : 0),
89
-				'top': (_$UI[0]._top = position.top + $this.outerHeight()) -
90
-					((_$UI[0]._top = _$UI[0]._top + _$UI[0]._height -
91
-					($window.scrollTop() + $window.height())) + gap > 0 ?
92
-					_$UI[0]._top + gap : 0)
93
-			}).show(_options.animationSpeed, function() {
94
-				if (event === true) {
95
-					return;
96
-				}
97
-				_$alpha._width = _$alpha.width();
98
-				_$xy_slider._width = _$xy_slider.width();
99
-				_$xy_slider._height = _$xy_slider.height();
100
-				_color.setColor(extractValue(_$trigger[0]));
101
-
102
-				preRender(true);
103
-			});
104
-		} else {
105
-			$(_$UI).hide(_options.animationSpeed, function() {
106
-				preRender(false);
107
-				_colorPicker.$trigger = null;
108
-			});
109
-		}
110
-	}
111
-
112
-	function build() {
113
-		$('head').append('<style type="text/css">' +
114
-			(_options.css || _css) + (_options.cssAddon || '') + '</style>');
115
-
116
-		return _colorPicker.$UI = _$UI =
117
-			$(_html).css({'margin': _options.margin})
118
-			.appendTo('body')
119
-			.show(0, function() {
120
-				var $this = $(this);
121
-
122
-				_GPU = _options.GPU && $this.css('perspective') !== undefined;
123
-				_$xy_slider = $('.cp-xy-slider', this);
124
-				_$xy_cursor = $('.cp-xy-cursor', this);
125
-				_$z_cursor = $('.cp-z-cursor', this);
126
-				_$alpha = $('.cp-alpha', this).toggle(!!_options.opacity);
127
-				_$alpha_cursor = $('.cp-alpha-cursor', this);
128
-				_options.buildCallback.call(_colorPicker, $this);
129
-				$this.prepend('<div>').children().eq(0).css('width',
130
-					$this.children().eq(0).width() // stabilizer
131
-				);
132
-				this._width = this.offsetWidth;
133
-				this._height = this.offsetHeight;
134
-			}).hide()
135
-			.on(_pointerdown,
136
-				'.cp-xy-slider,.cp-z-slider,.cp-alpha', pointerdown);
137
-	}
138
-
139
-	function pointerdown(e) {
140
-		var action = this.className
141
-				.replace(/cp-(.*?)(?:\s*|$)/, '$1').replace('-', '_');
142
-
143
-		if ((e.button || e.which) > 1) return;
144
-
145
-		e.preventDefault && e.preventDefault();
146
-		e.returnValue = false;
147
-
148
-		_$trigger._offset = $(this).offset();
149
-
150
-		(action = action === 'xy_slider' ? xy_slider :
151
-			action === 'z_slider' ? z_slider : alpha)(e);
152
-		preRender();
153
-
154
-		$document.on(_pointerup, function(e) {
155
-			$document.off('.a');
156
-		}).on(_pointermove, function(e) {
157
-			action(e);
158
-			preRender();
159
-		});
160
-	}
161
-
162
-	function xy_slider(event) {
163
-		var e = resolveEventType(event),
164
-			x = e.pageX - _$trigger._offset.left,
165
-			y = e.pageY - _$trigger._offset.top;
166
-
167
-		_color.setColor({
168
-			s: x / _$xy_slider._width * 100,
169
-			v: 100 - (y / _$xy_slider._height * 100)
170
-		}, 'hsv');
171
-	}
172
-
173
-	function z_slider(event) {
174
-		var z = resolveEventType(event).pageY - _$trigger._offset.top;
175
-
176
-		_color.setColor({h: 360 - (z / _$xy_slider._height * 360)}, 'hsv');
177
-	}
178
-
179
-	function alpha(event) {
180
-		var x = resolveEventType(event).pageX - _$trigger._offset.left,
181
-			alpha = x / _$alpha._width;
182
-
183
-		_color.setColor({}, 'rgb', alpha);
184
-	}
185
-
186
-	function preRender(toggled) {
187
-		var colors = _color.colors,
188
-			hueRGB = colors.hueRGB,
189
-			RGB = colors.RND.rgb,
190
-			HSL = colors.RND.hsl,
191
-			dark = '#222',
192
-			light = '#ddd',
193
-			colorMode = _$trigger._colorMode,
194
-			isAlpha = colors.alpha !== 1,
195
-			alpha = _round(colors.alpha * 100) / 100,
196
-			RGBInnerText = RGB.r + ', ' + RGB.g + ', ' + RGB.b,
197
-			text = (colorMode === 'HEX' && !isAlpha ? '#' + colors.HEX :
198
-				colorMode === 'rgb' || (colorMode === 'HEX' && isAlpha) ?
199
-				(!isAlpha ? 'rgb(' + RGBInnerText + ')' :
200
-					'rgba(' + RGBInnerText + ', ' + alpha + ')') :
201
-				('hsl' + (isAlpha ? 'a(' : '(') + HSL.h + ', ' + HSL.s + '%, ' +
202
-					HSL.l + '%' + (isAlpha ? ', ' + alpha : '') + ')')),
203
-			HUEContrast = colors.HUELuminance > 0.22 ? dark : light,
204
-			alphaContrast = colors.rgbaMixBlack.luminance > 0.22 ? dark : light,
205
-			h = (1 - colors.hsv.h) * _$xy_slider._height,
206
-			s = colors.hsv.s * _$xy_slider._width,
207
-			v = (1 - colors.hsv.v) * _$xy_slider._height,
208
-			a = alpha * _$alpha._width,
209
-			translate3d = _GPU ? 'translate3d' : '',
210
-			triggerValue = _$trigger[0].value,
211
-			hasNoValue = _$trigger[0].hasAttribute('value') && // question this
212
-				triggerValue === '' && toggled !== undefined;
213
-
214
-		_$xy_slider._css = {
215
-			backgroundColor: 'rgb(' +
216
-				hueRGB.r + ',' + hueRGB.g + ',' + hueRGB.b + ')'};
217
-		_$xy_cursor._css = {
218
-			transform: translate3d + '(' + s + 'px, ' + v + 'px, 0)',
219
-			left: !_GPU ? s : '',
220
-			top: !_GPU ? v : '',
221
-			borderColor : colors.RGBLuminance > 0.22 ? dark : light
222
-		};
223
-		_$z_cursor._css = {
224
-			transform: translate3d + '(0, ' + h + 'px, 0)',
225
-			top: !_GPU ? h : '',
226
-			borderColor : 'transparent ' + HUEContrast
227
-		};
228
-		_$alpha._css = {backgroundColor: 'rgb(' + RGBInnerText + ')'};
229
-		_$alpha_cursor._css = {
230
-			transform: translate3d + '(' + a + 'px, 0, 0)',
231
-			left: !_GPU ? a : '',
232
-			borderColor : alphaContrast + ' transparent'
233
-		};
234
-		_$trigger._css = {
235
-			backgroundColor : hasNoValue ? '' : text,
236
-			color: hasNoValue ? '' :
237
-				colors.rgbaMixBGMixCustom.luminance > 0.22 ? dark : light
238
-		};
239
-		_$trigger.text = hasNoValue ? '' : triggerValue !== text ? text : '';
240
-
241
-		toggled !== undefined ? render(toggled) : _animate(render);
242
-	}
243
-
244
-	// As _animate() is actually requestAnimationFrame(), render() gets called
245
-	// decoupled from any pointer action (whenever the browser decides to do
246
-	// so) as an event. preRender() is coupled to toggle() and all pointermove
247
-	// actions; that's where all the calculations happen. render() can now be
248
-	// called without extra calculations which results in faster rendering.
249
-	function render(toggled) {
250
-		_$xy_slider.css(_$xy_slider._css);
251
-		_$xy_cursor.css(_$xy_cursor._css);
252
-		_$z_cursor.css(_$z_cursor._css);
253
-		_$alpha.css(_$alpha._css);
254
-		_$alpha_cursor.css(_$alpha_cursor._css);
255
-
256
-		_options.doRender && _$trigger.css(_$trigger._css);
257
-		_$trigger.text && _$trigger.val(_$trigger.text);
258
-
259
-		_options.renderCallback.call(
260
-			_colorPicker,
261
-			_$trigger,
262
-			typeof toggled === 'boolean' ? toggled : undefined
263
-		);
264
-	}
265
-
266
-	$.fn.colorPicker = function(options) {
267
-		var noop = function(){};
268
-
269
-		options = $.extend({
270
-			animationSpeed: 150,
271
-			GPU: true,
272
-			doRender: true,
273
-			customBG: '#FFF',
274
-			opacity: true,
275
-			renderCallback: noop,
276
-			buildCallback: noop,
277
-			body: document.body,
278
-			scrollResize: true,
279
-			gap: 4
280
-			// css: '',
281
-			// cssAddon: '',
282
-			// margin: '',
283
-			// preventFocus: false
284
-		}, options);
285
-
286
-		!_colorPicker && options.scrollResize && $(window)
287
-		.on('resize.a scroll.a', function() {
288
-			if (_colorPicker.$trigger) {
289
-				_colorPicker.toggle.call(_colorPicker.$trigger[0], true);
290
-			}
291
-		});
292
-		_instance = _instance.add(this);
293
-		this.colorPicker = _instance.colorPicker =
294
-			_colorPicker || new ColorPicker(options);
295
-
296
-		$(options.body).off('.a').on(_pointerdown, function(e) {
297
-			!_instance.add(_$UI).find(e.target)
298
-				.add(_instance.filter(e.target))[0] && toggle();
299
-		});
300
-
301
-		return this.on('focusin.a click.a', toggle)
302
-		.on('change.a', function() {
303
-			_color.setColor(this.value || '#FFF');
304
-			_instance.colorPicker.render(true);
305
-		})
306
-		.each(function() {
307
-			var value = extractValue(this),
308
-				mode = value.split('('),
309
-				$elm = findElement($(this));
310
-
311
-			$elm.data('colorMode', mode[1] ? mode[0].substr(0, 3) : 'HEX')
312
-				.attr('readonly', _options.preventFocus);
313
-			options.doRender &&
314
-			$elm.css({'background-color': value,
315
-				'color': function() {
316
-					return _color.setColor(value)
317
-						.rgbaMixBGMixCustom.luminance > 0.22 ? '#222' : '#ddd'
318
-				}
319
-			});
320
-		});
321
-	};
322
-
323
-	$.fn.colorPicker.destroy = function() {
324
-		_instance.add(_options.body).off('.a'); // saver
325
-		_colorPicker.toggle(false);
326
-		_instance = $();
327
-	};
328
-
329
-	return $;
330
-
331
-})(window, jQuery, Colors);
1
+(function (root, factory) {
2
+    if (typeof exports === 'object') {
3
+        module.exports = factory(root, require('jquery'), require('colors'));
4
+    } else if (typeof define === 'function' && define.amd) {
5
+        define(['jquery', 'colors'], function (jQuery, Colors) {
6
+            return factory(root, jQuery, Colors);
7
+        });
8
+    } else {
9
+        factory(root, root.jQuery, root.Colors);
10
+    }
11
+}(this, function(window, $, Colors, undefined){
12
+    'use strict';
13
+
14
+    var $document = $(document),
15
+        _instance = $(),
16
+        _colorPicker,
17
+        _color,
18
+        _options,
19
+
20
+        _$trigger,
21
+        _$UI, _$xy_slider, _$xy_cursor, _$z_cursor , _$alpha , _$alpha_cursor,
22
+
23
+        _pointermove = 'touchmove.a mousemove.a pointermove.a',
24
+        _pointerdown = 'touchstart.a mousedown.a pointerdown.a',
25
+        _pointerup = 'touchend.a mouseup.a pointerup.a',
26
+        _GPU = false,
27
+        _round = Math.round,
28
+        _animate = window.requestAnimationFrame ||
29
+            window.webkitRequestAnimationFrame || function(cb){cb()},
30
+        _html = '<div class="cp-color-picker"><div class="cp-z-slider"><div c' +
31
+            'lass="cp-z-cursor"></div></div><div class="cp-xy-slider"><div cl' +
32
+            'ass="cp-white"></div><div class="cp-xy-cursor"></div></div><div ' +
33
+            'class="cp-alpha"><div class="cp-alpha-cursor"></div></div></div>',
34
+            // 'grunt-contrib-uglify' puts all this back to one single string...
35
+        _css = '.cp-color-picker{position:absolute;overflow:hidden;padding:6p' +
36
+            'x 6px 0;background-color:#444;color:#bbb;font-family:Arial,Helve' +
37
+            'tica,sans-serif;font-size:12px;font-weight:400;cursor:default;bo' +
38
+            'rder-radius:5px}.cp-color-picker>div{position:relative;overflow:' +
39
+            'hidden}.cp-xy-slider{float:left;height:128px;width:128px;margin-' +
40
+            'bottom:6px;background:linear-gradient(to right,#FFF,rgba(255,255' +
41
+            ',255,0))}.cp-white{height:100%;width:100%;background:linear-grad' +
42
+            'ient(rgba(0,0,0,0),#000)}.cp-xy-cursor{position:absolute;top:0;w' +
43
+            'idth:10px;height:10px;margin:-5px;border:1px solid #fff;border-r' +
44
+            'adius:100%;box-sizing:border-box}.cp-z-slider{float:right;margin' +
45
+            '-left:6px;height:128px;width:20px;background:linear-gradient(red' +
46
+            ' 0,#f0f 17%,#00f 33%,#0ff 50%,#0f0 67%,#ff0 83%,red 100%)}.cp-z-' +
47
+            'cursor{position:absolute;margin-top:-4px;width:100%;border:4px s' +
48
+            'olid #fff;border-color:transparent #fff;box-sizing:border-box}.c' +
49
+            'p-alpha{clear:both;width:100%;height:16px;margin:6px 0;backgroun' +
50
+            'd:linear-gradient(to right,#444,rgba(0,0,0,0))}.cp-alpha-cursor{' +
51
+            'position:absolute;margin-left:-4px;height:100%;border:4px solid ' +
52
+            '#fff;border-color:#fff transparent;box-sizing:border-box}',
53
+
54
+        ColorPicker = function(options) {
55
+            _color = this.color = new Colors(options);
56
+            _options = _color.options;
57
+            _colorPicker = this;
58
+        };
59
+
60
+    ColorPicker.prototype = {
61
+        render: preRender,
62
+        toggle: toggle
63
+    };
64
+
65
+    function extractValue(elm) {
66
+        return elm.value || elm.getAttribute('value') ||
67
+            $(elm).css('background-color') || '#fff';
68
+    }
69
+
70
+    function resolveEventType(event) {
71
+        event = event.originalEvent && event.originalEvent.touches ?
72
+            event.originalEvent.touches[0] : event;
73
+
74
+        return event.originalEvent ? event.originalEvent : event;
75
+    }
76
+
77
+    function findElement($elm) {
78
+        return $($elm.find(_options.doRender)[0] || $elm[0]);
79
+    }
80
+
81
+    function toggle(event) {
82
+        var $this = $(this),
83
+            position = $this.offset(),
84
+            $window = $(window),
85
+            gap = _options.gap;
86
+
87
+        if (event) {
88
+            _$trigger = findElement($this);
89
+            _$trigger._colorMode = _$trigger.data('colorMode');
90
+
91
+            _colorPicker.$trigger = $this;
92
+
93
+            (_$UI || build()).css({
94
+                // 'width': _$UI[0]._width,
95
+                'left': (_$UI[0]._left = position.left) -
96
+                    ((_$UI[0]._left = _$UI[0]._left + _$UI[0]._width -
97
+                    ($window.scrollLeft() + $window.width())) + gap > 0 ?
98
+                    _$UI[0]._left + gap : 0),
99
+                'top': (_$UI[0]._top = position.top + $this.outerHeight()) -
100
+                    ((_$UI[0]._top = _$UI[0]._top + _$UI[0]._height -
101
+                    ($window.scrollTop() + $window.height())) + gap > 0 ?
102
+                    _$UI[0]._top + gap : 0)
103
+            }).show(_options.animationSpeed, function() {
104
+                if (event === true) {
105
+                    return;
106
+                }
107
+                _$alpha._width = _$alpha.width();
108
+                _$xy_slider._width = _$xy_slider.width();
109
+                _$xy_slider._height = _$xy_slider.height();
110
+                _color.setColor(extractValue(_$trigger[0]));
111
+
112
+                preRender(true);
113
+            });
114
+        } else {
115
+            $(_$UI).hide(_options.animationSpeed, function() {
116
+                preRender(false);
117
+                _colorPicker.$trigger = null;
118
+            });
119
+        }
120
+    }
121
+
122
+    function build() {
123
+        $('head').append('<style type="text/css">' +
124
+            (_options.css || _css) + (_options.cssAddon || '') + '</style>');
125
+
126
+        return _colorPicker.$UI = _$UI =
127
+            $(_html).css({'margin': _options.margin})
128
+            .appendTo('body')
129
+            .show(0, function() {
130
+                var $this = $(this);
131
+
132
+                _GPU = _options.GPU && $this.css('perspective') !== undefined;
133
+                _$xy_slider = $('.cp-xy-slider', this);
134
+                _$xy_cursor = $('.cp-xy-cursor', this);
135
+                _$z_cursor = $('.cp-z-cursor', this);
136
+                _$alpha = $('.cp-alpha', this).toggle(!!_options.opacity);
137
+                _$alpha_cursor = $('.cp-alpha-cursor', this);
138
+                _options.buildCallback.call(_colorPicker, $this);
139
+                $this.prepend('<div>').children().eq(0).css('width',
140
+                    $this.children().eq(0).width() // stabilizer
141
+                );
142
+                this._width = this.offsetWidth;
143
+                this._height = this.offsetHeight;
144
+            }).hide()
145
+            .on(_pointerdown,
146
+                '.cp-xy-slider,.cp-z-slider,.cp-alpha', pointerdown);
147
+    }
148
+
149
+    function pointerdown(e) {
150
+        var action = this.className
151
+                .replace(/cp-(.*?)(?:\s*|$)/, '$1').replace('-', '_');
152
+
153
+        if ((e.button || e.which) > 1) return;
154
+
155
+        e.preventDefault && e.preventDefault();
156
+        e.returnValue = false;
157
+
158
+        _$trigger._offset = $(this).offset();
159
+
160
+        (action = action === 'xy_slider' ? xy_slider :
161
+            action === 'z_slider' ? z_slider : alpha)(e);
162
+        preRender();
163
+
164
+        $document.on(_pointerup, function(e) {
165
+            $document.off('.a');
166
+        }).on(_pointermove, function(e) {
167
+            action(e);
168
+            preRender();
169
+        });
170
+    }
171
+
172
+    function xy_slider(event) {
173
+        var e = resolveEventType(event),
174
+            x = e.pageX - _$trigger._offset.left,
175
+            y = e.pageY - _$trigger._offset.top;
176
+
177
+        _color.setColor({
178
+            s: x / _$xy_slider._width * 100,
179
+            v: 100 - (y / _$xy_slider._height * 100)
180
+        }, 'hsv');
181
+    }
182
+
183
+    function z_slider(event) {
184
+        var z = resolveEventType(event).pageY - _$trigger._offset.top;
185
+
186
+        _color.setColor({h: 360 - (z / _$xy_slider._height * 360)}, 'hsv');
187
+    }
188
+
189
+    function alpha(event) {
190
+        var x = resolveEventType(event).pageX - _$trigger._offset.left,
191
+            alpha = x / _$alpha._width;
192
+
193
+        _color.setColor({}, 'rgb', alpha);
194
+    }
195
+
196
+    function preRender(toggled) {
197
+        var colors = _color.colors,
198
+            hueRGB = colors.hueRGB,
199
+            RGB = colors.RND.rgb,
200
+            HSL = colors.RND.hsl,
201
+            dark = '#222',
202
+            light = '#ddd',
203
+            colorMode = _$trigger._colorMode,
204
+            isAlpha = colors.alpha !== 1,
205
+            alpha = _round(colors.alpha * 100) / 100,
206
+            RGBInnerText = RGB.r + ', ' + RGB.g + ', ' + RGB.b,
207
+            text = (colorMode === 'HEX' && !isAlpha ? '#' + colors.HEX :
208
+                colorMode === 'rgb' || (colorMode === 'HEX' && isAlpha) ?
209
+                (!isAlpha ? 'rgb(' + RGBInnerText + ')' :
210
+                    'rgba(' + RGBInnerText + ', ' + alpha + ')') :
211
+                ('hsl' + (isAlpha ? 'a(' : '(') + HSL.h + ', ' + HSL.s + '%, ' +
212
+                    HSL.l + '%' + (isAlpha ? ', ' + alpha : '') + ')')),
213
+            HUEContrast = colors.HUELuminance > 0.22 ? dark : light,
214
+            alphaContrast = colors.rgbaMixBlack.luminance > 0.22 ? dark : light,
215
+            h = (1 - colors.hsv.h) * _$xy_slider._height,
216
+            s = colors.hsv.s * _$xy_slider._width,
217
+            v = (1 - colors.hsv.v) * _$xy_slider._height,
218
+            a = alpha * _$alpha._width,
219
+            translate3d = _GPU ? 'translate3d' : '',
220
+            triggerValue = _$trigger[0].value,
221
+            hasNoValue = _$trigger[0].hasAttribute('value') && // question this
222
+                triggerValue === '' && toggled !== undefined;
223
+
224
+        _$xy_slider._css = {
225
+            backgroundColor: 'rgb(' +
226
+                hueRGB.r + ',' + hueRGB.g + ',' + hueRGB.b + ')'};
227
+        _$xy_cursor._css = {
228
+            transform: translate3d + '(' + s + 'px, ' + v + 'px, 0)',
229
+            left: !_GPU ? s : '',
230
+            top: !_GPU ? v : '',
231
+            borderColor : colors.RGBLuminance > 0.22 ? dark : light
232
+        };
233
+        _$z_cursor._css = {
234
+            transform: translate3d + '(0, ' + h + 'px, 0)',
235
+            top: !_GPU ? h : '',
236
+            borderColor : 'transparent ' + HUEContrast
237
+        };
238
+        _$alpha._css = {backgroundColor: 'rgb(' + RGBInnerText + ')'};
239
+        _$alpha_cursor._css = {
240
+            transform: translate3d + '(' + a + 'px, 0, 0)',
241
+            left: !_GPU ? a : '',
242
+            borderColor : alphaContrast + ' transparent'
243
+        };
244
+        _$trigger._css = {
245
+            backgroundColor : hasNoValue ? '' : text,
246
+            color: hasNoValue ? '' :
247
+                colors.rgbaMixBGMixCustom.luminance > 0.22 ? dark : light
248
+        };
249
+        _$trigger.text = hasNoValue ? '' : triggerValue !== text ? text : '';
250
+
251
+        toggled !== undefined ? render(toggled) : _animate(render);
252
+    }
253
+
254
+    // As _animate() is actually requestAnimationFrame(), render() gets called
255
+    // decoupled from any pointer action (whenever the browser decides to do
256
+    // so) as an event. preRender() is coupled to toggle() and all pointermove
257
+    // actions; that's where all the calculations happen. render() can now be
258
+    // called without extra calculations which results in faster rendering.
259
+    function render(toggled) {
260
+        _$xy_slider.css(_$xy_slider._css);
261
+        _$xy_cursor.css(_$xy_cursor._css);
262
+        _$z_cursor.css(_$z_cursor._css);
263
+        _$alpha.css(_$alpha._css);
264
+        _$alpha_cursor.css(_$alpha_cursor._css);
265
+
266
+        _options.doRender && _$trigger.css(_$trigger._css);
267
+        _$trigger.text && _$trigger.val(_$trigger.text);
268
+
269
+        _options.renderCallback.call(
270
+            _colorPicker,
271
+            _$trigger,
272
+            typeof toggled === 'boolean' ? toggled : undefined
273
+        );
274
+    }
275
+
276
+    $.fn.colorPicker = function(options) {
277
+        var noop = function(){};
278
+
279
+        options = $.extend({
280
+            animationSpeed: 150,
281
+            GPU: true,
282
+            doRender: true,
283
+            customBG: '#FFF',
284
+            opacity: true,
285
+            renderCallback: noop,
286
+            buildCallback: noop,
287
+            body: document.body,
288
+            scrollResize: true,
289
+            gap: 4
290
+            // css: '',
291
+            // cssAddon: '',
292
+            // margin: '',
293
+            // preventFocus: false
294
+        }, options);
295
+
296
+        !_colorPicker && options.scrollResize && $(window)
297
+        .on('resize.a scroll.a', function() {
298
+            if (_colorPicker.$trigger) {
299
+                _colorPicker.toggle.call(_colorPicker.$trigger[0], true);
300
+            }
301
+        });
302
+        _instance = _instance.add(this);
303
+        this.colorPicker = _instance.colorPicker =
304
+            _colorPicker || new ColorPicker(options);
305
+
306
+        $(options.body).off('.a').on(_pointerdown, function(e) {
307
+            !_instance.add(_$UI).find(e.target)
308
+                .add(_instance.filter(e.target))[0] && toggle();
309
+        });
310
+
311
+        return this.on('focusin.a click.a', toggle)
312
+        .on('change.a', function() {
313
+            _color.setColor(this.value || '#FFF');
314
+            _instance.colorPicker.render(true);
315
+        })
316
+        .each(function() {
317
+            var value = extractValue(this),
318
+                mode = value.split('('),
319
+                $elm = findElement($(this));
320
+
321
+            $elm.data('colorMode', mode[1] ? mode[0].substr(0, 3) : 'HEX')
322
+                .attr('readonly', _options.preventFocus);
323
+            options.doRender &&
324
+            $elm.css({'background-color': value,
325
+                'color': function() {
326
+                    return _color.setColor(value)
327
+                        .rgbaMixBGMixCustom.luminance > 0.22 ? '#222' : '#ddd'
328
+                }
329
+            });
330
+        });
331
+    };
332
+
333
+    $.fn.colorPicker.destroy = function() {
334
+        _instance.add(_options.body).off('.a'); // saver
335
+        _colorPicker.toggle(false);
336
+        _instance = $();
337
+    };
338
+
339
+    return $;
340
+
341
+}));

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


+ 2
- 2
jqColorPicker.min.js
File diff suppressed because it is too large
View File


+ 1
- 1
package.json View File

@@ -1,6 +1,6 @@
1 1
 {
2 2
   "name": "tinyColorPicker",
3
-  "version": "1.0.0",
3
+  "version": "1.0.1",
4 4
   "repository": {
5 5
     "type": "git",
6 6
     "url": "http://github.com/PitPik/tinyColorPicker.git"

Loading…
Cancel
Save