bootstrap-colorpick-rails 0.0.0 → 0.0.1
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/app/assets/images/alpha-horizontal.png +0 -0
- data/app/assets/images/alpha.png +0 -0
- data/app/assets/images/hue-horizontal.png +0 -0
- data/app/assets/images/hue.png +0 -0
- data/app/assets/images/saturation.png +0 -0
- data/app/assets/javascripts/bootstrap-colorpicker.js +1114 -538
- data/app/assets/stylesheets/bootstrap-colorpicker.scss +221 -0
- data/lib/bootstrap-colorpicker-rails/version.rb +1 -1
- metadata +4 -2
- data/app/assets/stylesheets/bootstrap-colorpicker.css.scss +0 -127
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: b99cc5283673aaabcadb3cf4f4e54b8900daa46fc6c96c742b2f38133f07b3b7
|
4
|
+
data.tar.gz: 4a1cd1f1dfcc62ed0fc24be88bc528b7de73c9abba0c8e98a8dc3eae1226484e
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 8ee3ced168f1037a95cfc56dcfda80b4b37e4ce1df8c8999067d029b99f088fa826aa448f2d1f29ad2b249f9922b46513b35141efb0484c6f55ac84b093e9806
|
7
|
+
data.tar.gz: c5557ed8feb592c9e86d13c5a22051fad87c9713c965c748c27da469b64631b73111569d90b5bf7b243e47be3000be822df3064e0c8e9acd5fe45dfa397a8a96
|
Binary file
|
data/app/assets/images/alpha.png
CHANGED
Binary file
|
Binary file
|
data/app/assets/images/hue.png
CHANGED
Binary file
|
Binary file
|
@@ -1,540 +1,1116 @@
|
|
1
|
-
|
2
|
-
*
|
3
|
-
*
|
4
|
-
* =========================================================
|
5
|
-
* Copyright 2012 Stefan Petre
|
1
|
+
/*!
|
2
|
+
* Bootstrap Colorpicker v2.3.6
|
3
|
+
* https://itsjavi.com/bootstrap-colorpicker/
|
6
4
|
*
|
7
|
-
*
|
8
|
-
*
|
9
|
-
*
|
5
|
+
* Originally written by (c) 2012 Stefan Petre
|
6
|
+
* Licensed under the Apache License v2.0
|
7
|
+
* http://www.apache.org/licenses/LICENSE-2.0.txt
|
10
8
|
*
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
|
59
|
-
|
60
|
-
|
61
|
-
|
62
|
-
|
63
|
-
|
64
|
-
|
65
|
-
|
66
|
-
|
67
|
-
|
68
|
-
|
69
|
-
|
70
|
-
|
71
|
-
|
72
|
-
|
73
|
-
|
74
|
-
|
75
|
-
|
76
|
-
|
77
|
-
|
78
|
-
|
79
|
-
|
80
|
-
|
81
|
-
|
82
|
-
|
83
|
-
|
84
|
-
|
85
|
-
|
86
|
-
|
87
|
-
|
88
|
-
|
89
|
-
|
90
|
-
|
91
|
-
|
92
|
-
|
93
|
-
|
94
|
-
|
95
|
-
|
96
|
-
|
97
|
-
|
98
|
-
|
99
|
-
|
100
|
-
|
101
|
-
|
102
|
-
|
103
|
-
|
104
|
-
|
105
|
-
|
106
|
-
|
107
|
-
|
108
|
-
|
109
|
-
|
110
|
-
|
111
|
-
|
112
|
-
|
113
|
-
|
114
|
-
|
115
|
-
|
116
|
-
|
117
|
-
|
118
|
-
|
119
|
-
|
120
|
-
|
121
|
-
|
122
|
-
|
123
|
-
|
124
|
-
|
125
|
-
|
126
|
-
|
127
|
-
|
128
|
-
|
129
|
-
|
130
|
-
|
131
|
-
|
132
|
-
|
133
|
-
|
134
|
-
|
135
|
-
|
136
|
-
|
137
|
-
|
138
|
-
|
139
|
-
|
140
|
-
|
141
|
-
|
142
|
-
|
143
|
-
|
144
|
-
|
145
|
-
|
146
|
-
|
147
|
-
|
148
|
-
|
149
|
-
|
150
|
-
|
151
|
-
|
152
|
-
|
153
|
-
|
154
|
-
|
155
|
-
|
156
|
-
|
157
|
-
|
158
|
-
|
159
|
-
|
160
|
-
|
161
|
-
|
162
|
-
|
163
|
-
|
164
|
-
|
165
|
-
|
166
|
-
|
167
|
-
|
168
|
-
|
169
|
-
|
170
|
-
|
171
|
-
|
172
|
-
|
173
|
-
|
174
|
-
|
175
|
-
|
176
|
-
|
177
|
-
|
178
|
-
|
179
|
-
|
180
|
-
|
181
|
-
|
182
|
-
|
183
|
-
|
184
|
-
|
185
|
-
|
186
|
-
|
187
|
-
|
188
|
-
|
189
|
-
|
190
|
-
|
191
|
-
|
192
|
-
|
193
|
-
|
194
|
-
|
195
|
-
|
196
|
-
|
197
|
-
|
198
|
-
|
199
|
-
|
200
|
-
|
201
|
-
|
202
|
-
|
203
|
-
|
204
|
-
|
205
|
-
|
206
|
-
|
207
|
-
|
208
|
-
|
209
|
-
|
210
|
-
|
211
|
-
|
212
|
-
|
213
|
-
|
214
|
-
|
215
|
-
|
216
|
-
|
217
|
-
|
218
|
-
|
219
|
-
|
220
|
-
|
221
|
-
|
222
|
-
|
223
|
-
|
224
|
-
|
225
|
-
|
226
|
-
|
227
|
-
|
228
|
-
|
229
|
-
|
230
|
-
|
231
|
-
|
232
|
-
|
233
|
-
|
234
|
-
|
235
|
-
|
236
|
-
|
237
|
-
|
238
|
-
|
239
|
-
|
240
|
-
|
241
|
-
|
242
|
-
|
243
|
-
|
244
|
-
|
245
|
-
|
246
|
-
|
247
|
-
|
248
|
-
|
249
|
-
|
250
|
-
|
251
|
-
|
252
|
-
|
253
|
-
|
254
|
-
|
255
|
-
|
256
|
-
|
257
|
-
|
258
|
-
|
259
|
-
|
260
|
-
|
261
|
-
|
262
|
-
|
263
|
-
|
264
|
-
|
265
|
-
|
266
|
-
|
267
|
-
|
268
|
-
|
269
|
-
|
270
|
-
|
271
|
-
|
272
|
-
|
273
|
-
|
274
|
-
|
275
|
-
|
276
|
-
|
277
|
-
|
278
|
-
|
279
|
-
|
280
|
-
|
281
|
-
|
282
|
-
|
283
|
-
|
284
|
-
|
285
|
-
|
286
|
-
|
287
|
-
|
288
|
-
|
289
|
-
|
290
|
-
|
291
|
-
|
292
|
-
|
293
|
-
|
294
|
-
|
295
|
-
|
296
|
-
|
297
|
-
|
298
|
-
|
299
|
-
|
300
|
-
|
301
|
-
|
302
|
-
|
303
|
-
|
304
|
-
|
305
|
-
|
306
|
-
|
307
|
-
|
308
|
-
|
309
|
-
|
310
|
-
|
311
|
-
|
312
|
-
|
313
|
-
|
314
|
-
|
315
|
-
|
316
|
-
|
317
|
-
|
318
|
-
|
319
|
-
|
320
|
-
|
321
|
-
|
322
|
-
|
323
|
-
|
324
|
-
|
325
|
-
|
326
|
-
|
327
|
-
|
328
|
-
|
329
|
-
|
330
|
-
|
331
|
-
|
332
|
-
|
333
|
-
|
334
|
-
|
335
|
-
|
336
|
-
|
337
|
-
|
338
|
-
|
339
|
-
|
340
|
-
|
341
|
-
|
342
|
-
|
343
|
-
|
344
|
-
|
345
|
-
|
346
|
-
|
347
|
-
|
348
|
-
|
349
|
-
|
350
|
-
|
351
|
-
|
352
|
-
|
353
|
-
|
354
|
-
|
355
|
-
|
356
|
-
|
357
|
-
|
358
|
-
|
359
|
-
|
360
|
-
|
361
|
-
|
362
|
-
|
363
|
-
|
364
|
-
|
365
|
-
|
366
|
-
|
367
|
-
|
368
|
-
|
369
|
-
|
370
|
-
|
371
|
-
|
372
|
-
|
373
|
-
|
374
|
-
|
375
|
-
|
376
|
-
|
377
|
-
|
378
|
-
|
379
|
-
|
380
|
-
|
381
|
-
|
382
|
-
|
383
|
-
|
384
|
-
|
385
|
-
|
386
|
-
|
387
|
-
|
388
|
-
|
389
|
-
|
390
|
-
|
391
|
-
|
392
|
-
|
393
|
-
|
394
|
-
|
395
|
-
|
396
|
-
|
397
|
-
|
398
|
-
|
399
|
-
|
400
|
-
|
401
|
-
|
402
|
-
|
403
|
-
|
404
|
-
|
405
|
-
|
406
|
-
|
407
|
-
|
408
|
-
|
409
|
-
|
410
|
-
|
411
|
-
|
412
|
-
|
413
|
-
|
414
|
-
|
415
|
-
|
416
|
-
|
417
|
-
|
418
|
-
|
419
|
-
|
420
|
-
|
421
|
-
|
422
|
-
|
423
|
-
|
424
|
-
|
425
|
-
|
426
|
-
|
427
|
-
|
428
|
-
|
429
|
-
|
430
|
-
|
431
|
-
|
432
|
-
|
433
|
-
|
434
|
-
|
435
|
-
|
436
|
-
|
437
|
-
|
438
|
-
|
439
|
-
|
440
|
-
|
441
|
-
|
442
|
-
|
443
|
-
|
444
|
-
|
445
|
-
|
446
|
-
|
447
|
-
|
448
|
-
|
449
|
-
|
450
|
-
|
451
|
-
|
452
|
-
|
453
|
-
|
454
|
-
|
455
|
-
|
456
|
-
|
457
|
-
|
458
|
-
|
459
|
-
|
460
|
-
|
461
|
-
|
462
|
-
|
463
|
-
|
464
|
-
|
465
|
-
|
466
|
-
|
467
|
-
|
468
|
-
|
469
|
-
|
470
|
-
|
471
|
-
|
472
|
-
|
473
|
-
|
474
|
-
|
475
|
-
|
476
|
-
|
477
|
-
|
478
|
-
|
479
|
-
|
480
|
-
|
481
|
-
|
482
|
-
|
483
|
-
|
484
|
-
|
485
|
-
|
486
|
-
|
487
|
-
|
488
|
-
|
489
|
-
|
490
|
-
|
491
|
-
|
492
|
-
|
493
|
-
|
494
|
-
|
495
|
-
|
496
|
-
|
497
|
-
|
498
|
-
|
499
|
-
|
500
|
-
|
501
|
-
|
502
|
-
|
503
|
-
|
504
|
-
|
505
|
-
|
506
|
-
|
507
|
-
|
508
|
-
|
509
|
-
|
510
|
-
|
511
|
-
|
512
|
-
|
513
|
-
|
514
|
-
|
515
|
-
|
516
|
-
|
517
|
-
|
518
|
-
|
519
|
-
|
520
|
-
|
521
|
-
|
522
|
-
|
523
|
-
|
524
|
-
|
525
|
-
|
526
|
-
|
527
|
-
|
528
|
-
|
529
|
-
|
530
|
-
|
531
|
-
|
532
|
-
|
533
|
-
|
534
|
-
|
535
|
-
|
536
|
-
|
537
|
-
|
538
|
-
|
539
|
-
|
540
|
-
|
9
|
+
*/
|
10
|
+
|
11
|
+
(function(factory) {
|
12
|
+
"use strict";
|
13
|
+
if (typeof exports === 'object') {
|
14
|
+
module.exports = factory(window.jQuery);
|
15
|
+
} else if (typeof define === 'function' && define.amd) {
|
16
|
+
define(['jquery'], factory);
|
17
|
+
} else if (window.jQuery && !window.jQuery.fn.colorpicker) {
|
18
|
+
factory(window.jQuery);
|
19
|
+
}
|
20
|
+
}(function($) {
|
21
|
+
'use strict';
|
22
|
+
|
23
|
+
/**
|
24
|
+
* Color manipulation helper class
|
25
|
+
*
|
26
|
+
* @param {Object|String} val
|
27
|
+
* @param {Object} predefinedColors
|
28
|
+
* @constructor
|
29
|
+
*/
|
30
|
+
var Color = function(val, predefinedColors) {
|
31
|
+
this.value = {
|
32
|
+
h: 0,
|
33
|
+
s: 0,
|
34
|
+
b: 0,
|
35
|
+
a: 1
|
36
|
+
};
|
37
|
+
this.origFormat = null; // original string format
|
38
|
+
if (predefinedColors) {
|
39
|
+
$.extend(this.colors, predefinedColors);
|
40
|
+
}
|
41
|
+
if (val) {
|
42
|
+
if (val.toLowerCase !== undefined) {
|
43
|
+
// cast to string
|
44
|
+
val = val + '';
|
45
|
+
this.setColor(val);
|
46
|
+
} else if (val.h !== undefined) {
|
47
|
+
this.value = val;
|
48
|
+
}
|
49
|
+
}
|
50
|
+
};
|
51
|
+
|
52
|
+
Color.prototype = {
|
53
|
+
constructor: Color,
|
54
|
+
// 140 predefined colors from the HTML Colors spec
|
55
|
+
colors: {
|
56
|
+
"aliceblue": "#f0f8ff",
|
57
|
+
"antiquewhite": "#faebd7",
|
58
|
+
"aqua": "#00ffff",
|
59
|
+
"aquamarine": "#7fffd4",
|
60
|
+
"azure": "#f0ffff",
|
61
|
+
"beige": "#f5f5dc",
|
62
|
+
"bisque": "#ffe4c4",
|
63
|
+
"black": "#000000",
|
64
|
+
"blanchedalmond": "#ffebcd",
|
65
|
+
"blue": "#0000ff",
|
66
|
+
"blueviolet": "#8a2be2",
|
67
|
+
"brown": "#a52a2a",
|
68
|
+
"burlywood": "#deb887",
|
69
|
+
"cadetblue": "#5f9ea0",
|
70
|
+
"chartreuse": "#7fff00",
|
71
|
+
"chocolate": "#d2691e",
|
72
|
+
"coral": "#ff7f50",
|
73
|
+
"cornflowerblue": "#6495ed",
|
74
|
+
"cornsilk": "#fff8dc",
|
75
|
+
"crimson": "#dc143c",
|
76
|
+
"cyan": "#00ffff",
|
77
|
+
"darkblue": "#00008b",
|
78
|
+
"darkcyan": "#008b8b",
|
79
|
+
"darkgoldenrod": "#b8860b",
|
80
|
+
"darkgray": "#a9a9a9",
|
81
|
+
"darkgreen": "#006400",
|
82
|
+
"darkkhaki": "#bdb76b",
|
83
|
+
"darkmagenta": "#8b008b",
|
84
|
+
"darkolivegreen": "#556b2f",
|
85
|
+
"darkorange": "#ff8c00",
|
86
|
+
"darkorchid": "#9932cc",
|
87
|
+
"darkred": "#8b0000",
|
88
|
+
"darksalmon": "#e9967a",
|
89
|
+
"darkseagreen": "#8fbc8f",
|
90
|
+
"darkslateblue": "#483d8b",
|
91
|
+
"darkslategray": "#2f4f4f",
|
92
|
+
"darkturquoise": "#00ced1",
|
93
|
+
"darkviolet": "#9400d3",
|
94
|
+
"deeppink": "#ff1493",
|
95
|
+
"deepskyblue": "#00bfff",
|
96
|
+
"dimgray": "#696969",
|
97
|
+
"dodgerblue": "#1e90ff",
|
98
|
+
"firebrick": "#b22222",
|
99
|
+
"floralwhite": "#fffaf0",
|
100
|
+
"forestgreen": "#228b22",
|
101
|
+
"fuchsia": "#ff00ff",
|
102
|
+
"gainsboro": "#dcdcdc",
|
103
|
+
"ghostwhite": "#f8f8ff",
|
104
|
+
"gold": "#ffd700",
|
105
|
+
"goldenrod": "#daa520",
|
106
|
+
"gray": "#808080",
|
107
|
+
"green": "#008000",
|
108
|
+
"greenyellow": "#adff2f",
|
109
|
+
"honeydew": "#f0fff0",
|
110
|
+
"hotpink": "#ff69b4",
|
111
|
+
"indianred": "#cd5c5c",
|
112
|
+
"indigo": "#4b0082",
|
113
|
+
"ivory": "#fffff0",
|
114
|
+
"khaki": "#f0e68c",
|
115
|
+
"lavender": "#e6e6fa",
|
116
|
+
"lavenderblush": "#fff0f5",
|
117
|
+
"lawngreen": "#7cfc00",
|
118
|
+
"lemonchiffon": "#fffacd",
|
119
|
+
"lightblue": "#add8e6",
|
120
|
+
"lightcoral": "#f08080",
|
121
|
+
"lightcyan": "#e0ffff",
|
122
|
+
"lightgoldenrodyellow": "#fafad2",
|
123
|
+
"lightgrey": "#d3d3d3",
|
124
|
+
"lightgreen": "#90ee90",
|
125
|
+
"lightpink": "#ffb6c1",
|
126
|
+
"lightsalmon": "#ffa07a",
|
127
|
+
"lightseagreen": "#20b2aa",
|
128
|
+
"lightskyblue": "#87cefa",
|
129
|
+
"lightslategray": "#778899",
|
130
|
+
"lightsteelblue": "#b0c4de",
|
131
|
+
"lightyellow": "#ffffe0",
|
132
|
+
"lime": "#00ff00",
|
133
|
+
"limegreen": "#32cd32",
|
134
|
+
"linen": "#faf0e6",
|
135
|
+
"magenta": "#ff00ff",
|
136
|
+
"maroon": "#800000",
|
137
|
+
"mediumaquamarine": "#66cdaa",
|
138
|
+
"mediumblue": "#0000cd",
|
139
|
+
"mediumorchid": "#ba55d3",
|
140
|
+
"mediumpurple": "#9370d8",
|
141
|
+
"mediumseagreen": "#3cb371",
|
142
|
+
"mediumslateblue": "#7b68ee",
|
143
|
+
"mediumspringgreen": "#00fa9a",
|
144
|
+
"mediumturquoise": "#48d1cc",
|
145
|
+
"mediumvioletred": "#c71585",
|
146
|
+
"midnightblue": "#191970",
|
147
|
+
"mintcream": "#f5fffa",
|
148
|
+
"mistyrose": "#ffe4e1",
|
149
|
+
"moccasin": "#ffe4b5",
|
150
|
+
"navajowhite": "#ffdead",
|
151
|
+
"navy": "#000080",
|
152
|
+
"oldlace": "#fdf5e6",
|
153
|
+
"olive": "#808000",
|
154
|
+
"olivedrab": "#6b8e23",
|
155
|
+
"orange": "#ffa500",
|
156
|
+
"orangered": "#ff4500",
|
157
|
+
"orchid": "#da70d6",
|
158
|
+
"palegoldenrod": "#eee8aa",
|
159
|
+
"palegreen": "#98fb98",
|
160
|
+
"paleturquoise": "#afeeee",
|
161
|
+
"palevioletred": "#d87093",
|
162
|
+
"papayawhip": "#ffefd5",
|
163
|
+
"peachpuff": "#ffdab9",
|
164
|
+
"peru": "#cd853f",
|
165
|
+
"pink": "#ffc0cb",
|
166
|
+
"plum": "#dda0dd",
|
167
|
+
"powderblue": "#b0e0e6",
|
168
|
+
"purple": "#800080",
|
169
|
+
"red": "#ff0000",
|
170
|
+
"rosybrown": "#bc8f8f",
|
171
|
+
"royalblue": "#4169e1",
|
172
|
+
"saddlebrown": "#8b4513",
|
173
|
+
"salmon": "#fa8072",
|
174
|
+
"sandybrown": "#f4a460",
|
175
|
+
"seagreen": "#2e8b57",
|
176
|
+
"seashell": "#fff5ee",
|
177
|
+
"sienna": "#a0522d",
|
178
|
+
"silver": "#c0c0c0",
|
179
|
+
"skyblue": "#87ceeb",
|
180
|
+
"slateblue": "#6a5acd",
|
181
|
+
"slategray": "#708090",
|
182
|
+
"snow": "#fffafa",
|
183
|
+
"springgreen": "#00ff7f",
|
184
|
+
"steelblue": "#4682b4",
|
185
|
+
"tan": "#d2b48c",
|
186
|
+
"teal": "#008080",
|
187
|
+
"thistle": "#d8bfd8",
|
188
|
+
"tomato": "#ff6347",
|
189
|
+
"turquoise": "#40e0d0",
|
190
|
+
"violet": "#ee82ee",
|
191
|
+
"wheat": "#f5deb3",
|
192
|
+
"white": "#ffffff",
|
193
|
+
"whitesmoke": "#f5f5f5",
|
194
|
+
"yellow": "#ffff00",
|
195
|
+
"yellowgreen": "#9acd32",
|
196
|
+
"transparent": "transparent"
|
197
|
+
},
|
198
|
+
_sanitizeNumber: function(val) {
|
199
|
+
if (typeof val === 'number') {
|
200
|
+
return val;
|
201
|
+
}
|
202
|
+
if (isNaN(val) || (val === null) || (val === '') || (val === undefined)) {
|
203
|
+
return 1;
|
204
|
+
}
|
205
|
+
if (val === '') {
|
206
|
+
return 0;
|
207
|
+
}
|
208
|
+
if (val.toLowerCase !== undefined) {
|
209
|
+
if (val.match(/^\./)) {
|
210
|
+
val = "0" + val;
|
211
|
+
}
|
212
|
+
return Math.ceil(parseFloat(val) * 100) / 100;
|
213
|
+
}
|
214
|
+
return 1;
|
215
|
+
},
|
216
|
+
isTransparent: function(strVal) {
|
217
|
+
if (!strVal) {
|
218
|
+
return false;
|
219
|
+
}
|
220
|
+
strVal = strVal.toLowerCase().trim();
|
221
|
+
return (strVal === 'transparent') || (strVal.match(/#?00000000/)) || (strVal.match(/(rgba|hsla)\(0,0,0,0?\.?0\)/));
|
222
|
+
},
|
223
|
+
rgbaIsTransparent: function(rgba) {
|
224
|
+
return ((rgba.r === 0) && (rgba.g === 0) && (rgba.b === 0) && (rgba.a === 0));
|
225
|
+
},
|
226
|
+
//parse a string to HSB
|
227
|
+
setColor: function(strVal) {
|
228
|
+
strVal = strVal.toLowerCase().trim();
|
229
|
+
if (strVal) {
|
230
|
+
if (this.isTransparent(strVal)) {
|
231
|
+
this.value = {
|
232
|
+
h: 0,
|
233
|
+
s: 0,
|
234
|
+
b: 0,
|
235
|
+
a: 0
|
236
|
+
};
|
237
|
+
} else {
|
238
|
+
this.value = this.stringToHSB(strVal) || {
|
239
|
+
h: 0,
|
240
|
+
s: 0,
|
241
|
+
b: 0,
|
242
|
+
a: 1
|
243
|
+
}; // if parser fails, defaults to black
|
244
|
+
}
|
245
|
+
}
|
246
|
+
},
|
247
|
+
stringToHSB: function(strVal) {
|
248
|
+
strVal = strVal.toLowerCase();
|
249
|
+
var alias;
|
250
|
+
if (typeof this.colors[strVal] !== 'undefined') {
|
251
|
+
strVal = this.colors[strVal];
|
252
|
+
alias = 'alias';
|
253
|
+
}
|
254
|
+
var that = this,
|
255
|
+
result = false;
|
256
|
+
$.each(this.stringParsers, function(i, parser) {
|
257
|
+
var match = parser.re.exec(strVal),
|
258
|
+
values = match && parser.parse.apply(that, [match]),
|
259
|
+
format = alias || parser.format || 'rgba';
|
260
|
+
if (values) {
|
261
|
+
if (format.match(/hsla?/)) {
|
262
|
+
result = that.RGBtoHSB.apply(that, that.HSLtoRGB.apply(that, values));
|
263
|
+
} else {
|
264
|
+
result = that.RGBtoHSB.apply(that, values);
|
265
|
+
}
|
266
|
+
that.origFormat = format;
|
267
|
+
return false;
|
268
|
+
}
|
269
|
+
return true;
|
270
|
+
});
|
271
|
+
return result;
|
272
|
+
},
|
273
|
+
setHue: function(h) {
|
274
|
+
this.value.h = 1 - h;
|
275
|
+
},
|
276
|
+
setSaturation: function(s) {
|
277
|
+
this.value.s = s;
|
278
|
+
},
|
279
|
+
setBrightness: function(b) {
|
280
|
+
this.value.b = 1 - b;
|
281
|
+
},
|
282
|
+
setAlpha: function(a) {
|
283
|
+
this.value.a = Math.round((parseInt((1 - a) * 100, 10) / 100) * 100) / 100;
|
284
|
+
},
|
285
|
+
toRGB: function(h, s, b, a) {
|
286
|
+
if (!h) {
|
287
|
+
h = this.value.h;
|
288
|
+
s = this.value.s;
|
289
|
+
b = this.value.b;
|
290
|
+
}
|
291
|
+
h *= 360;
|
292
|
+
var R, G, B, X, C;
|
293
|
+
h = (h % 360) / 60;
|
294
|
+
C = b * s;
|
295
|
+
X = C * (1 - Math.abs(h % 2 - 1));
|
296
|
+
R = G = B = b - C;
|
297
|
+
|
298
|
+
h = ~~h;
|
299
|
+
R += [C, X, 0, 0, X, C][h];
|
300
|
+
G += [X, C, C, X, 0, 0][h];
|
301
|
+
B += [0, 0, X, C, C, X][h];
|
302
|
+
return {
|
303
|
+
r: Math.round(R * 255),
|
304
|
+
g: Math.round(G * 255),
|
305
|
+
b: Math.round(B * 255),
|
306
|
+
a: a || this.value.a
|
307
|
+
};
|
308
|
+
},
|
309
|
+
toHex: function(h, s, b, a) {
|
310
|
+
var rgb = this.toRGB(h, s, b, a);
|
311
|
+
if (this.rgbaIsTransparent(rgb)) {
|
312
|
+
return 'transparent';
|
313
|
+
}
|
314
|
+
return '#' + ((1 << 24) | (parseInt(rgb.r) << 16) | (parseInt(rgb.g) << 8) | parseInt(rgb.b)).toString(16).substr(1);
|
315
|
+
},
|
316
|
+
toHSL: function(h, s, b, a) {
|
317
|
+
h = h || this.value.h;
|
318
|
+
s = s || this.value.s;
|
319
|
+
b = b || this.value.b;
|
320
|
+
a = a || this.value.a;
|
321
|
+
|
322
|
+
var H = h,
|
323
|
+
L = (2 - s) * b,
|
324
|
+
S = s * b;
|
325
|
+
if (L > 0 && L <= 1) {
|
326
|
+
S /= L;
|
327
|
+
} else {
|
328
|
+
S /= 2 - L;
|
329
|
+
}
|
330
|
+
L /= 2;
|
331
|
+
if (S > 1) {
|
332
|
+
S = 1;
|
333
|
+
}
|
334
|
+
return {
|
335
|
+
h: isNaN(H) ? 0 : H,
|
336
|
+
s: isNaN(S) ? 0 : S,
|
337
|
+
l: isNaN(L) ? 0 : L,
|
338
|
+
a: isNaN(a) ? 0 : a
|
339
|
+
};
|
340
|
+
},
|
341
|
+
toAlias: function(r, g, b, a) {
|
342
|
+
var rgb = this.toHex(r, g, b, a);
|
343
|
+
for (var alias in this.colors) {
|
344
|
+
if (this.colors[alias] === rgb) {
|
345
|
+
return alias;
|
346
|
+
}
|
347
|
+
}
|
348
|
+
return false;
|
349
|
+
},
|
350
|
+
RGBtoHSB: function(r, g, b, a) {
|
351
|
+
r /= 255;
|
352
|
+
g /= 255;
|
353
|
+
b /= 255;
|
354
|
+
|
355
|
+
var H, S, V, C;
|
356
|
+
V = Math.max(r, g, b);
|
357
|
+
C = V - Math.min(r, g, b);
|
358
|
+
H = (C === 0 ? null :
|
359
|
+
V === r ? (g - b) / C :
|
360
|
+
V === g ? (b - r) / C + 2 :
|
361
|
+
(r - g) / C + 4
|
362
|
+
);
|
363
|
+
H = ((H + 360) % 6) * 60 / 360;
|
364
|
+
S = C === 0 ? 0 : C / V;
|
365
|
+
return {
|
366
|
+
h: this._sanitizeNumber(H),
|
367
|
+
s: S,
|
368
|
+
b: V,
|
369
|
+
a: this._sanitizeNumber(a)
|
370
|
+
};
|
371
|
+
},
|
372
|
+
HueToRGB: function(p, q, h) {
|
373
|
+
if (h < 0) {
|
374
|
+
h += 1;
|
375
|
+
} else if (h > 1) {
|
376
|
+
h -= 1;
|
377
|
+
}
|
378
|
+
if ((h * 6) < 1) {
|
379
|
+
return p + (q - p) * h * 6;
|
380
|
+
} else if ((h * 2) < 1) {
|
381
|
+
return q;
|
382
|
+
} else if ((h * 3) < 2) {
|
383
|
+
return p + (q - p) * ((2 / 3) - h) * 6;
|
384
|
+
} else {
|
385
|
+
return p;
|
386
|
+
}
|
387
|
+
},
|
388
|
+
HSLtoRGB: function(h, s, l, a) {
|
389
|
+
if (s < 0) {
|
390
|
+
s = 0;
|
391
|
+
}
|
392
|
+
var q;
|
393
|
+
if (l <= 0.5) {
|
394
|
+
q = l * (1 + s);
|
395
|
+
} else {
|
396
|
+
q = l + s - (l * s);
|
397
|
+
}
|
398
|
+
|
399
|
+
var p = 2 * l - q;
|
400
|
+
|
401
|
+
var tr = h + (1 / 3);
|
402
|
+
var tg = h;
|
403
|
+
var tb = h - (1 / 3);
|
404
|
+
|
405
|
+
var r = Math.round(this.HueToRGB(p, q, tr) * 255);
|
406
|
+
var g = Math.round(this.HueToRGB(p, q, tg) * 255);
|
407
|
+
var b = Math.round(this.HueToRGB(p, q, tb) * 255);
|
408
|
+
return [r, g, b, this._sanitizeNumber(a)];
|
409
|
+
},
|
410
|
+
toString: function(format) {
|
411
|
+
format = format || 'rgba';
|
412
|
+
var c = false;
|
413
|
+
switch (format) {
|
414
|
+
case 'rgb':
|
415
|
+
{
|
416
|
+
c = this.toRGB();
|
417
|
+
if (this.rgbaIsTransparent(c)) {
|
418
|
+
return 'transparent';
|
419
|
+
}
|
420
|
+
return 'rgb(' + c.r + ',' + c.g + ',' + c.b + ')';
|
421
|
+
}
|
422
|
+
break;
|
423
|
+
case 'rgba':
|
424
|
+
{
|
425
|
+
c = this.toRGB();
|
426
|
+
return 'rgba(' + c.r + ',' + c.g + ',' + c.b + ',' + c.a + ')';
|
427
|
+
}
|
428
|
+
break;
|
429
|
+
case 'hsl':
|
430
|
+
{
|
431
|
+
c = this.toHSL();
|
432
|
+
return 'hsl(' + Math.round(c.h * 360) + ',' + Math.round(c.s * 100) + '%,' + Math.round(c.l * 100) + '%)';
|
433
|
+
}
|
434
|
+
break;
|
435
|
+
case 'hsla':
|
436
|
+
{
|
437
|
+
c = this.toHSL();
|
438
|
+
return 'hsla(' + Math.round(c.h * 360) + ',' + Math.round(c.s * 100) + '%,' + Math.round(c.l * 100) + '%,' + c.a + ')';
|
439
|
+
}
|
440
|
+
break;
|
441
|
+
case 'hex':
|
442
|
+
{
|
443
|
+
return this.toHex();
|
444
|
+
}
|
445
|
+
break;
|
446
|
+
case 'alias':
|
447
|
+
return this.toAlias() || this.toHex();
|
448
|
+
default:
|
449
|
+
{
|
450
|
+
return c;
|
451
|
+
}
|
452
|
+
break;
|
453
|
+
}
|
454
|
+
},
|
455
|
+
// a set of RE's that can match strings and generate color tuples.
|
456
|
+
// from John Resig color plugin
|
457
|
+
// https://github.com/jquery/jquery-color/
|
458
|
+
stringParsers: [{
|
459
|
+
re: /rgb\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*?\)/,
|
460
|
+
format: 'rgb',
|
461
|
+
parse: function(execResult) {
|
462
|
+
return [
|
463
|
+
execResult[1],
|
464
|
+
execResult[2],
|
465
|
+
execResult[3],
|
466
|
+
1
|
467
|
+
];
|
468
|
+
}
|
469
|
+
}, {
|
470
|
+
re: /rgb\(\s*(\d*(?:\.\d+)?)\%\s*,\s*(\d*(?:\.\d+)?)\%\s*,\s*(\d*(?:\.\d+)?)\%\s*?\)/,
|
471
|
+
format: 'rgb',
|
472
|
+
parse: function(execResult) {
|
473
|
+
return [
|
474
|
+
2.55 * execResult[1],
|
475
|
+
2.55 * execResult[2],
|
476
|
+
2.55 * execResult[3],
|
477
|
+
1
|
478
|
+
];
|
479
|
+
}
|
480
|
+
}, {
|
481
|
+
re: /rgba\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*(?:,\s*(\d*(?:\.\d+)?)\s*)?\)/,
|
482
|
+
format: 'rgba',
|
483
|
+
parse: function(execResult) {
|
484
|
+
return [
|
485
|
+
execResult[1],
|
486
|
+
execResult[2],
|
487
|
+
execResult[3],
|
488
|
+
execResult[4]
|
489
|
+
];
|
490
|
+
}
|
491
|
+
}, {
|
492
|
+
re: /rgba\(\s*(\d*(?:\.\d+)?)\%\s*,\s*(\d*(?:\.\d+)?)\%\s*,\s*(\d*(?:\.\d+)?)\%\s*(?:,\s*(\d*(?:\.\d+)?)\s*)?\)/,
|
493
|
+
format: 'rgba',
|
494
|
+
parse: function(execResult) {
|
495
|
+
return [
|
496
|
+
2.55 * execResult[1],
|
497
|
+
2.55 * execResult[2],
|
498
|
+
2.55 * execResult[3],
|
499
|
+
execResult[4]
|
500
|
+
];
|
501
|
+
}
|
502
|
+
}, {
|
503
|
+
re: /hsl\(\s*(\d*(?:\.\d+)?)\s*,\s*(\d*(?:\.\d+)?)\%\s*,\s*(\d*(?:\.\d+)?)\%\s*?\)/,
|
504
|
+
format: 'hsl',
|
505
|
+
parse: function(execResult) {
|
506
|
+
return [
|
507
|
+
execResult[1] / 360,
|
508
|
+
execResult[2] / 100,
|
509
|
+
execResult[3] / 100,
|
510
|
+
execResult[4]
|
511
|
+
];
|
512
|
+
}
|
513
|
+
}, {
|
514
|
+
re: /hsla\(\s*(\d*(?:\.\d+)?)\s*,\s*(\d*(?:\.\d+)?)\%\s*,\s*(\d*(?:\.\d+)?)\%\s*(?:,\s*(\d*(?:\.\d+)?)\s*)?\)/,
|
515
|
+
format: 'hsla',
|
516
|
+
parse: function(execResult) {
|
517
|
+
return [
|
518
|
+
execResult[1] / 360,
|
519
|
+
execResult[2] / 100,
|
520
|
+
execResult[3] / 100,
|
521
|
+
execResult[4]
|
522
|
+
];
|
523
|
+
}
|
524
|
+
}, {
|
525
|
+
re: /#?([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/,
|
526
|
+
format: 'hex',
|
527
|
+
parse: function(execResult) {
|
528
|
+
return [
|
529
|
+
parseInt(execResult[1], 16),
|
530
|
+
parseInt(execResult[2], 16),
|
531
|
+
parseInt(execResult[3], 16),
|
532
|
+
1
|
533
|
+
];
|
534
|
+
}
|
535
|
+
}, {
|
536
|
+
re: /#?([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/,
|
537
|
+
format: 'hex',
|
538
|
+
parse: function(execResult) {
|
539
|
+
return [
|
540
|
+
parseInt(execResult[1] + execResult[1], 16),
|
541
|
+
parseInt(execResult[2] + execResult[2], 16),
|
542
|
+
parseInt(execResult[3] + execResult[3], 16),
|
543
|
+
1
|
544
|
+
];
|
545
|
+
}
|
546
|
+
}],
|
547
|
+
colorNameToHex: function(name) {
|
548
|
+
if (typeof this.colors[name.toLowerCase()] !== 'undefined') {
|
549
|
+
return this.colors[name.toLowerCase()];
|
550
|
+
}
|
551
|
+
return false;
|
552
|
+
}
|
553
|
+
};
|
554
|
+
|
555
|
+
/*
|
556
|
+
* Default plugin options
|
557
|
+
*/
|
558
|
+
var defaults = {
|
559
|
+
horizontal: false, // horizontal mode layout ?
|
560
|
+
inline: false, //forces to show the colorpicker as an inline element
|
561
|
+
color: false, //forces a color
|
562
|
+
format: false, //forces a format
|
563
|
+
input: 'input', // children input selector
|
564
|
+
container: false, // container selector
|
565
|
+
component: '.add-on, .input-group-addon', // children component selector
|
566
|
+
sliders: {
|
567
|
+
saturation: {
|
568
|
+
maxLeft: 100,
|
569
|
+
maxTop: 100,
|
570
|
+
callLeft: 'setSaturation',
|
571
|
+
callTop: 'setBrightness'
|
572
|
+
},
|
573
|
+
hue: {
|
574
|
+
maxLeft: 0,
|
575
|
+
maxTop: 100,
|
576
|
+
callLeft: false,
|
577
|
+
callTop: 'setHue'
|
578
|
+
},
|
579
|
+
alpha: {
|
580
|
+
maxLeft: 0,
|
581
|
+
maxTop: 100,
|
582
|
+
callLeft: false,
|
583
|
+
callTop: 'setAlpha'
|
584
|
+
}
|
585
|
+
},
|
586
|
+
slidersHorz: {
|
587
|
+
saturation: {
|
588
|
+
maxLeft: 100,
|
589
|
+
maxTop: 100,
|
590
|
+
callLeft: 'setSaturation',
|
591
|
+
callTop: 'setBrightness'
|
592
|
+
},
|
593
|
+
hue: {
|
594
|
+
maxLeft: 100,
|
595
|
+
maxTop: 0,
|
596
|
+
callLeft: 'setHue',
|
597
|
+
callTop: false
|
598
|
+
},
|
599
|
+
alpha: {
|
600
|
+
maxLeft: 100,
|
601
|
+
maxTop: 0,
|
602
|
+
callLeft: 'setAlpha',
|
603
|
+
callTop: false
|
604
|
+
}
|
605
|
+
},
|
606
|
+
template: '<div class="colorpicker dropdown-menu">' +
|
607
|
+
'<div class="colorpicker-saturation"><i><b></b></i></div>' +
|
608
|
+
'<div class="colorpicker-hue"><i></i></div>' +
|
609
|
+
'<div class="colorpicker-alpha"><i></i></div>' +
|
610
|
+
'<div class="colorpicker-color"><div /></div>' +
|
611
|
+
'<div class="colorpicker-selectors"></div>' +
|
612
|
+
'</div>',
|
613
|
+
align: 'right',
|
614
|
+
customClass: null,
|
615
|
+
colorSelectors: null
|
616
|
+
};
|
617
|
+
|
618
|
+
/**
|
619
|
+
* Colorpicker component class
|
620
|
+
*
|
621
|
+
* @param {Object|String} element
|
622
|
+
* @param {Object} options
|
623
|
+
* @constructor
|
624
|
+
*/
|
625
|
+
var Colorpicker = function(element, options) {
|
626
|
+
this.element = $(element).addClass('colorpicker-element');
|
627
|
+
this.options = $.extend(true, {}, defaults, this.element.data(), options);
|
628
|
+
this.component = this.options.component;
|
629
|
+
this.component = (this.component !== false) ? this.element.find(this.component) : false;
|
630
|
+
if (this.component && (this.component.length === 0)) {
|
631
|
+
this.component = false;
|
632
|
+
}
|
633
|
+
this.container = (this.options.container === true) ? this.element : this.options.container;
|
634
|
+
this.container = (this.container !== false) ? $(this.container) : false;
|
635
|
+
|
636
|
+
// Is the element an input? Should we search inside for any input?
|
637
|
+
this.input = this.element.is('input') ? this.element : (this.options.input ?
|
638
|
+
this.element.find(this.options.input) : false);
|
639
|
+
if (this.input && (this.input.length === 0)) {
|
640
|
+
this.input = false;
|
641
|
+
}
|
642
|
+
// Set HSB color
|
643
|
+
this.color = new Color(this.options.color !== false ? this.options.color : this.getValue(), this.options.colorSelectors);
|
644
|
+
this.format = this.options.format !== false ? this.options.format : this.color.origFormat;
|
645
|
+
|
646
|
+
if (this.options.color !== false) {
|
647
|
+
this.updateInput(this.color);
|
648
|
+
this.updateData(this.color);
|
649
|
+
}
|
650
|
+
|
651
|
+
// Setup picker
|
652
|
+
this.picker = $(this.options.template);
|
653
|
+
if (this.options.customClass) {
|
654
|
+
this.picker.addClass(this.options.customClass);
|
655
|
+
}
|
656
|
+
if (this.options.inline) {
|
657
|
+
this.picker.addClass('colorpicker-inline colorpicker-visible');
|
658
|
+
} else {
|
659
|
+
this.picker.addClass('colorpicker-hidden');
|
660
|
+
}
|
661
|
+
if (this.options.horizontal) {
|
662
|
+
this.picker.addClass('colorpicker-horizontal');
|
663
|
+
}
|
664
|
+
if (this.format === 'rgba' || this.format === 'hsla' || this.options.format === false) {
|
665
|
+
this.picker.addClass('colorpicker-with-alpha');
|
666
|
+
}
|
667
|
+
if (this.options.align === 'right') {
|
668
|
+
this.picker.addClass('colorpicker-right');
|
669
|
+
}
|
670
|
+
if (this.options.inline === true) {
|
671
|
+
this.picker.addClass('colorpicker-no-arrow');
|
672
|
+
}
|
673
|
+
if (this.options.colorSelectors) {
|
674
|
+
var colorpicker = this;
|
675
|
+
$.each(this.options.colorSelectors, function(name, color) {
|
676
|
+
var $btn = $('<i />').css('background-color', color).data('class', name);
|
677
|
+
$btn.click(function() {
|
678
|
+
colorpicker.setValue($(this).css('background-color'));
|
679
|
+
});
|
680
|
+
colorpicker.picker.find('.colorpicker-selectors').append($btn);
|
681
|
+
});
|
682
|
+
this.picker.find('.colorpicker-selectors').show();
|
683
|
+
}
|
684
|
+
this.picker.on('mousedown.colorpicker touchstart.colorpicker', $.proxy(this.mousedown, this));
|
685
|
+
this.picker.appendTo(this.container ? this.container : $('body'));
|
686
|
+
|
687
|
+
// Bind events
|
688
|
+
if (this.input !== false) {
|
689
|
+
this.input.on({
|
690
|
+
'keyup.colorpicker': $.proxy(this.keyup, this)
|
691
|
+
});
|
692
|
+
this.input.on({
|
693
|
+
'change.colorpicker': $.proxy(this.change, this)
|
694
|
+
});
|
695
|
+
if (this.component === false) {
|
696
|
+
this.element.on({
|
697
|
+
'focus.colorpicker': $.proxy(this.show, this)
|
698
|
+
});
|
699
|
+
}
|
700
|
+
if (this.options.inline === false) {
|
701
|
+
this.element.on({
|
702
|
+
'focusout.colorpicker': $.proxy(this.hide, this)
|
703
|
+
});
|
704
|
+
}
|
705
|
+
}
|
706
|
+
|
707
|
+
if (this.component !== false) {
|
708
|
+
this.component.on({
|
709
|
+
'click.colorpicker': $.proxy(this.show, this)
|
710
|
+
});
|
711
|
+
}
|
712
|
+
|
713
|
+
if ((this.input === false) && (this.component === false)) {
|
714
|
+
this.element.on({
|
715
|
+
'click.colorpicker': $.proxy(this.show, this)
|
716
|
+
});
|
717
|
+
}
|
718
|
+
|
719
|
+
// for HTML5 input[type='color']
|
720
|
+
if ((this.input !== false) && (this.component !== false) && (this.input.attr('type') === 'color')) {
|
721
|
+
|
722
|
+
this.input.on({
|
723
|
+
'click.colorpicker': $.proxy(this.show, this),
|
724
|
+
'focus.colorpicker': $.proxy(this.show, this)
|
725
|
+
});
|
726
|
+
}
|
727
|
+
this.update();
|
728
|
+
|
729
|
+
$($.proxy(function() {
|
730
|
+
this.element.trigger('create');
|
731
|
+
}, this));
|
732
|
+
};
|
733
|
+
|
734
|
+
Colorpicker.Color = Color;
|
735
|
+
|
736
|
+
Colorpicker.prototype = {
|
737
|
+
constructor: Colorpicker,
|
738
|
+
destroy: function() {
|
739
|
+
this.picker.remove();
|
740
|
+
this.element.removeData('colorpicker', 'color').off('.colorpicker');
|
741
|
+
if (this.input !== false) {
|
742
|
+
this.input.off('.colorpicker');
|
743
|
+
}
|
744
|
+
if (this.component !== false) {
|
745
|
+
this.component.off('.colorpicker');
|
746
|
+
}
|
747
|
+
this.element.removeClass('colorpicker-element');
|
748
|
+
this.element.trigger({
|
749
|
+
type: 'destroy'
|
750
|
+
});
|
751
|
+
},
|
752
|
+
reposition: function() {
|
753
|
+
if (this.options.inline !== false || this.options.container) {
|
754
|
+
return false;
|
755
|
+
}
|
756
|
+
var type = this.container && this.container[0] !== document.body ? 'position' : 'offset';
|
757
|
+
var element = this.component || this.element;
|
758
|
+
var offset = element[type]();
|
759
|
+
if (this.options.align === 'right') {
|
760
|
+
offset.left -= this.picker.outerWidth() - element.outerWidth();
|
761
|
+
}
|
762
|
+
this.picker.css({
|
763
|
+
top: offset.top + element.outerHeight(),
|
764
|
+
left: offset.left
|
765
|
+
});
|
766
|
+
},
|
767
|
+
show: function(e) {
|
768
|
+
if (this.isDisabled()) {
|
769
|
+
return false;
|
770
|
+
}
|
771
|
+
this.picker.addClass('colorpicker-visible').removeClass('colorpicker-hidden');
|
772
|
+
this.reposition();
|
773
|
+
$(window).on('resize.colorpicker', $.proxy(this.reposition, this));
|
774
|
+
if (e && (!this.hasInput() || this.input.attr('type') === 'color')) {
|
775
|
+
if (e.stopPropagation && e.preventDefault) {
|
776
|
+
e.stopPropagation();
|
777
|
+
e.preventDefault();
|
778
|
+
}
|
779
|
+
}
|
780
|
+
if ((this.component || !this.input) && (this.options.inline === false)) {
|
781
|
+
$(window.document).on({
|
782
|
+
'mousedown.colorpicker': $.proxy(this.hide, this)
|
783
|
+
});
|
784
|
+
}
|
785
|
+
this.element.trigger({
|
786
|
+
type: 'showPicker',
|
787
|
+
color: this.color
|
788
|
+
});
|
789
|
+
},
|
790
|
+
hide: function() {
|
791
|
+
this.picker.addClass('colorpicker-hidden').removeClass('colorpicker-visible');
|
792
|
+
$(window).off('resize.colorpicker', this.reposition);
|
793
|
+
$(document).off({
|
794
|
+
'mousedown.colorpicker': this.hide
|
795
|
+
});
|
796
|
+
this.update();
|
797
|
+
this.element.trigger({
|
798
|
+
type: 'hidePicker',
|
799
|
+
color: this.color
|
800
|
+
});
|
801
|
+
},
|
802
|
+
updateData: function(val) {
|
803
|
+
val = val || this.color.toString(this.format);
|
804
|
+
this.element.data('color', val);
|
805
|
+
return val;
|
806
|
+
},
|
807
|
+
updateInput: function(val) {
|
808
|
+
val = val || this.color.toString(this.format);
|
809
|
+
if (this.input !== false) {
|
810
|
+
if (this.options.colorSelectors) {
|
811
|
+
var color = new Color(val, this.options.colorSelectors);
|
812
|
+
var alias = color.toAlias();
|
813
|
+
if (typeof this.options.colorSelectors[alias] !== 'undefined') {
|
814
|
+
val = alias;
|
815
|
+
}
|
816
|
+
}
|
817
|
+
this.input.prop('value', val);
|
818
|
+
}
|
819
|
+
return val;
|
820
|
+
},
|
821
|
+
updatePicker: function(val) {
|
822
|
+
if (val !== undefined) {
|
823
|
+
this.color = new Color(val, this.options.colorSelectors);
|
824
|
+
}
|
825
|
+
var sl = (this.options.horizontal === false) ? this.options.sliders : this.options.slidersHorz;
|
826
|
+
var icns = this.picker.find('i');
|
827
|
+
if (icns.length === 0) {
|
828
|
+
return;
|
829
|
+
}
|
830
|
+
if (this.options.horizontal === false) {
|
831
|
+
sl = this.options.sliders;
|
832
|
+
icns.eq(1).css('top', sl.hue.maxTop * (1 - this.color.value.h)).end()
|
833
|
+
.eq(2).css('top', sl.alpha.maxTop * (1 - this.color.value.a));
|
834
|
+
} else {
|
835
|
+
sl = this.options.slidersHorz;
|
836
|
+
icns.eq(1).css('left', sl.hue.maxLeft * (1 - this.color.value.h)).end()
|
837
|
+
.eq(2).css('left', sl.alpha.maxLeft * (1 - this.color.value.a));
|
838
|
+
}
|
839
|
+
icns.eq(0).css({
|
840
|
+
'top': sl.saturation.maxTop - this.color.value.b * sl.saturation.maxTop,
|
841
|
+
'left': this.color.value.s * sl.saturation.maxLeft
|
842
|
+
});
|
843
|
+
this.picker.find('.colorpicker-saturation').css('backgroundColor', this.color.toHex(this.color.value.h, 1, 1, 1));
|
844
|
+
this.picker.find('.colorpicker-alpha').css('backgroundColor', this.color.toHex());
|
845
|
+
this.picker.find('.colorpicker-color, .colorpicker-color div').css('backgroundColor', this.color.toString(this.format));
|
846
|
+
return val;
|
847
|
+
},
|
848
|
+
updateComponent: function(val) {
|
849
|
+
val = val || this.color.toString(this.format);
|
850
|
+
if (this.component !== false) {
|
851
|
+
var icn = this.component.find('i').eq(0);
|
852
|
+
if (icn.length > 0) {
|
853
|
+
icn.css({
|
854
|
+
'backgroundColor': val
|
855
|
+
});
|
856
|
+
} else {
|
857
|
+
this.component.css({
|
858
|
+
'backgroundColor': val
|
859
|
+
});
|
860
|
+
}
|
861
|
+
}
|
862
|
+
return val;
|
863
|
+
},
|
864
|
+
update: function(force) {
|
865
|
+
var val;
|
866
|
+
if ((this.getValue(false) !== false) || (force === true)) {
|
867
|
+
// Update input/data only if the current value is not empty
|
868
|
+
val = this.updateComponent();
|
869
|
+
this.updateInput(val);
|
870
|
+
this.updateData(val);
|
871
|
+
this.updatePicker(); // only update picker if value is not empty
|
872
|
+
}
|
873
|
+
return val;
|
874
|
+
|
875
|
+
},
|
876
|
+
setValue: function(val) { // set color manually
|
877
|
+
this.color = new Color(val, this.options.colorSelectors);
|
878
|
+
this.update(true);
|
879
|
+
this.element.trigger({
|
880
|
+
type: 'changeColor',
|
881
|
+
color: this.color,
|
882
|
+
value: val
|
883
|
+
});
|
884
|
+
},
|
885
|
+
getValue: function(defaultValue) {
|
886
|
+
defaultValue = (defaultValue === undefined) ? '#000000' : defaultValue;
|
887
|
+
var val;
|
888
|
+
if (this.hasInput()) {
|
889
|
+
val = this.input.val();
|
890
|
+
} else {
|
891
|
+
val = this.element.data('color');
|
892
|
+
}
|
893
|
+
if ((val === undefined) || (val === '') || (val === null)) {
|
894
|
+
// if not defined or empty, return default
|
895
|
+
val = defaultValue;
|
896
|
+
}
|
897
|
+
return val;
|
898
|
+
},
|
899
|
+
hasInput: function() {
|
900
|
+
return (this.input !== false);
|
901
|
+
},
|
902
|
+
isDisabled: function() {
|
903
|
+
if (this.hasInput()) {
|
904
|
+
return (this.input.prop('disabled') === true);
|
905
|
+
}
|
906
|
+
return false;
|
907
|
+
},
|
908
|
+
disable: function() {
|
909
|
+
if (this.hasInput()) {
|
910
|
+
this.input.prop('disabled', true);
|
911
|
+
this.element.trigger({
|
912
|
+
type: 'disable',
|
913
|
+
color: this.color,
|
914
|
+
value: this.getValue()
|
915
|
+
});
|
916
|
+
return true;
|
917
|
+
}
|
918
|
+
return false;
|
919
|
+
},
|
920
|
+
enable: function() {
|
921
|
+
if (this.hasInput()) {
|
922
|
+
this.input.prop('disabled', false);
|
923
|
+
this.element.trigger({
|
924
|
+
type: 'enable',
|
925
|
+
color: this.color,
|
926
|
+
value: this.getValue()
|
927
|
+
});
|
928
|
+
return true;
|
929
|
+
}
|
930
|
+
return false;
|
931
|
+
},
|
932
|
+
currentSlider: null,
|
933
|
+
mousePointer: {
|
934
|
+
left: 0,
|
935
|
+
top: 0
|
936
|
+
},
|
937
|
+
mousedown: function(e) {
|
938
|
+
if (!e.pageX && !e.pageY && e.originalEvent && e.originalEvent.touches) {
|
939
|
+
e.pageX = e.originalEvent.touches[0].pageX;
|
940
|
+
e.pageY = e.originalEvent.touches[0].pageY;
|
941
|
+
}
|
942
|
+
e.stopPropagation();
|
943
|
+
e.preventDefault();
|
944
|
+
|
945
|
+
var target = $(e.target);
|
946
|
+
|
947
|
+
//detect the slider and set the limits and callbacks
|
948
|
+
var zone = target.closest('div');
|
949
|
+
var sl = this.options.horizontal ? this.options.slidersHorz : this.options.sliders;
|
950
|
+
if (!zone.is('.colorpicker')) {
|
951
|
+
if (zone.is('.colorpicker-saturation')) {
|
952
|
+
this.currentSlider = $.extend({}, sl.saturation);
|
953
|
+
} else if (zone.is('.colorpicker-hue')) {
|
954
|
+
this.currentSlider = $.extend({}, sl.hue);
|
955
|
+
} else if (zone.is('.colorpicker-alpha')) {
|
956
|
+
this.currentSlider = $.extend({}, sl.alpha);
|
957
|
+
} else {
|
958
|
+
return false;
|
959
|
+
}
|
960
|
+
var offset = zone.offset();
|
961
|
+
//reference to guide's style
|
962
|
+
this.currentSlider.guide = zone.find('i')[0].style;
|
963
|
+
this.currentSlider.left = e.pageX - offset.left;
|
964
|
+
this.currentSlider.top = e.pageY - offset.top;
|
965
|
+
this.mousePointer = {
|
966
|
+
left: e.pageX,
|
967
|
+
top: e.pageY
|
968
|
+
};
|
969
|
+
//trigger mousemove to move the guide to the current position
|
970
|
+
$(document).on({
|
971
|
+
'mousemove.colorpicker': $.proxy(this.mousemove, this),
|
972
|
+
'touchmove.colorpicker': $.proxy(this.mousemove, this),
|
973
|
+
'mouseup.colorpicker': $.proxy(this.mouseup, this),
|
974
|
+
'touchend.colorpicker': $.proxy(this.mouseup, this)
|
975
|
+
}).trigger('mousemove');
|
976
|
+
}
|
977
|
+
return false;
|
978
|
+
},
|
979
|
+
mousemove: function(e) {
|
980
|
+
if (!e.pageX && !e.pageY && e.originalEvent && e.originalEvent.touches) {
|
981
|
+
e.pageX = e.originalEvent.touches[0].pageX;
|
982
|
+
e.pageY = e.originalEvent.touches[0].pageY;
|
983
|
+
}
|
984
|
+
e.stopPropagation();
|
985
|
+
e.preventDefault();
|
986
|
+
var left = Math.max(
|
987
|
+
0,
|
988
|
+
Math.min(
|
989
|
+
this.currentSlider.maxLeft,
|
990
|
+
this.currentSlider.left + ((e.pageX || this.mousePointer.left) - this.mousePointer.left)
|
991
|
+
)
|
992
|
+
);
|
993
|
+
var top = Math.max(
|
994
|
+
0,
|
995
|
+
Math.min(
|
996
|
+
this.currentSlider.maxTop,
|
997
|
+
this.currentSlider.top + ((e.pageY || this.mousePointer.top) - this.mousePointer.top)
|
998
|
+
)
|
999
|
+
);
|
1000
|
+
this.currentSlider.guide.left = left + 'px';
|
1001
|
+
this.currentSlider.guide.top = top + 'px';
|
1002
|
+
if (this.currentSlider.callLeft) {
|
1003
|
+
this.color[this.currentSlider.callLeft].call(this.color, left / this.currentSlider.maxLeft);
|
1004
|
+
}
|
1005
|
+
if (this.currentSlider.callTop) {
|
1006
|
+
this.color[this.currentSlider.callTop].call(this.color, top / this.currentSlider.maxTop);
|
1007
|
+
}
|
1008
|
+
// Change format dynamically
|
1009
|
+
// Only occurs if user choose the dynamic format by
|
1010
|
+
// setting option format to false
|
1011
|
+
if (this.currentSlider.callTop === 'setAlpha' && this.options.format === false) {
|
1012
|
+
|
1013
|
+
// Converting from hex / rgb to rgba
|
1014
|
+
if (this.color.value.a !== 1) {
|
1015
|
+
this.format = 'rgba';
|
1016
|
+
this.color.origFormat = 'rgba';
|
1017
|
+
}
|
1018
|
+
|
1019
|
+
// Converting from rgba to hex
|
1020
|
+
else {
|
1021
|
+
this.format = 'hex';
|
1022
|
+
this.color.origFormat = 'hex';
|
1023
|
+
}
|
1024
|
+
}
|
1025
|
+
this.update(true);
|
1026
|
+
|
1027
|
+
this.element.trigger({
|
1028
|
+
type: 'changeColor',
|
1029
|
+
color: this.color
|
1030
|
+
});
|
1031
|
+
return false;
|
1032
|
+
},
|
1033
|
+
mouseup: function(e) {
|
1034
|
+
e.stopPropagation();
|
1035
|
+
e.preventDefault();
|
1036
|
+
$(document).off({
|
1037
|
+
'mousemove.colorpicker': this.mousemove,
|
1038
|
+
'touchmove.colorpicker': this.mousemove,
|
1039
|
+
'mouseup.colorpicker': this.mouseup,
|
1040
|
+
'touchend.colorpicker': this.mouseup
|
1041
|
+
});
|
1042
|
+
return false;
|
1043
|
+
},
|
1044
|
+
change: function(e) {
|
1045
|
+
this.keyup(e);
|
1046
|
+
},
|
1047
|
+
keyup: function(e) {
|
1048
|
+
if ((e.keyCode === 38)) {
|
1049
|
+
if (this.color.value.a < 1) {
|
1050
|
+
this.color.value.a = Math.round((this.color.value.a + 0.01) * 100) / 100;
|
1051
|
+
}
|
1052
|
+
this.update(true);
|
1053
|
+
} else if ((e.keyCode === 40)) {
|
1054
|
+
if (this.color.value.a > 0) {
|
1055
|
+
this.color.value.a = Math.round((this.color.value.a - 0.01) * 100) / 100;
|
1056
|
+
}
|
1057
|
+
this.update(true);
|
1058
|
+
} else {
|
1059
|
+
this.color = new Color(this.input.val(), this.options.colorSelectors);
|
1060
|
+
// Change format dynamically
|
1061
|
+
// Only occurs if user choose the dynamic format by
|
1062
|
+
// setting option format to false
|
1063
|
+
if (this.color.origFormat && this.options.format === false) {
|
1064
|
+
this.format = this.color.origFormat;
|
1065
|
+
}
|
1066
|
+
if (this.getValue(false) !== false) {
|
1067
|
+
this.updateData();
|
1068
|
+
this.updateComponent();
|
1069
|
+
this.updatePicker();
|
1070
|
+
}
|
1071
|
+
}
|
1072
|
+
this.element.trigger({
|
1073
|
+
type: 'changeColor',
|
1074
|
+
color: this.color,
|
1075
|
+
value: this.input.val()
|
1076
|
+
});
|
1077
|
+
}
|
1078
|
+
};
|
1079
|
+
|
1080
|
+
$.colorpicker = Colorpicker;
|
1081
|
+
|
1082
|
+
$.fn.colorpicker = function(option) {
|
1083
|
+
var apiArgs = Array.prototype.slice.call(arguments, 1),
|
1084
|
+
isSingleElement = (this.length === 1),
|
1085
|
+
returnValue = null;
|
1086
|
+
|
1087
|
+
var $jq = this.each(function() {
|
1088
|
+
var $this = $(this),
|
1089
|
+
inst = $this.data('colorpicker'),
|
1090
|
+
options = ((typeof option === 'object') ? option : {});
|
1091
|
+
|
1092
|
+
if (!inst) {
|
1093
|
+
inst = new Colorpicker(this, options);
|
1094
|
+
$this.data('colorpicker', inst);
|
1095
|
+
}
|
1096
|
+
|
1097
|
+
if (typeof option === 'string') {
|
1098
|
+
if ($.isFunction(inst[option])) {
|
1099
|
+
returnValue = inst[option].apply(inst, apiArgs);
|
1100
|
+
} else { // its a property ?
|
1101
|
+
if (apiArgs.length) {
|
1102
|
+
// set property
|
1103
|
+
inst[option] = apiArgs[0];
|
1104
|
+
}
|
1105
|
+
returnValue = inst[option];
|
1106
|
+
}
|
1107
|
+
} else {
|
1108
|
+
returnValue = $this;
|
1109
|
+
}
|
1110
|
+
});
|
1111
|
+
return isSingleElement ? returnValue : $jq;
|
1112
|
+
};
|
1113
|
+
|
1114
|
+
$.fn.colorpicker.constructor = Colorpicker;
|
1115
|
+
|
1116
|
+
}));
|