Subversion Repositories Integrator Subversion

Rev

Details | Last modification | View Log | RSS feed

Rev Author Line No. Line
1 espaco 1
/* =========================================================
2
 * bootstrap-colorpicker.js
3
 * http://www.eyecon.ro/bootstrap-colorpicker
4
 * =========================================================
5
 * Copyright 2012 Stefan Petre
6
 *
7
 * Licensed under the Apache License, Version 2.0 (the "License");
8
 * you may not use this file except in compliance with the License.
9
 * You may obtain a copy of the License at
10
 *
11
 * http://www.apache.org/licenses/LICENSE-2.0
12
 *
13
 * Unless required by applicable law or agreed to in writing, software
14
 * distributed under the License is distributed on an "AS IS" BASIS,
15
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
16
 * See the License for the specific language governing permissions and
17
 * limitations under the License.
18
 * ========================================================= */
19
 
20
!function( $ ) {
21
 
22
        // Color object
23
 
24
        var Color = function(val) {
25
                this.value = {
26
                        h: 1,
27
                        s: 1,
28
                        b: 1,
29
                        a: 1
30
                };
31
                this.setColor(val);
32
        };
33
 
34
        Color.prototype = {
35
                constructor: Color,
36
 
37
                //parse a string to HSB
38
                setColor: function(val){
39
                        val = val.toLowerCase();
40
                        var that = this;
41
                        $.each( CPGlobal.stringParsers, function( i, parser ) {
42
                                var match = parser.re.exec( val ),
43
                                        values = match && parser.parse( match ),
44
                                        space = parser.space||'rgba';
45
                                if ( values ) {
46
                                        if (space === 'hsla') {
47
                                                that.value = CPGlobal.RGBtoHSB.apply(null, CPGlobal.HSLtoRGB.apply(null, values));
48
                                        } else {
49
                                                that.value = CPGlobal.RGBtoHSB.apply(null, values);
50
                                        }
51
                                        return false;
52
                                }
53
                        });
54
                },
55
 
56
                setHue: function(h) {
57
                        this.value.h = 1- h;
58
                },
59
 
60
                setSaturation: function(s) {
61
                        this.value.s = s;
62
                },
63
 
64
                setLightness: function(b) {
65
                        this.value.b = 1- b;
66
                },
67
 
68
                setAlpha: function(a) {
69
                        this.value.a = parseInt((1 - a)*100, 10)/100;
70
                },
71
 
72
                // HSBtoRGB from RaphaelJS
73
                // https://github.com/DmitryBaranovskiy/raphael/
74
                toRGB: function(h, s, b, a) {
75
                        if (!h) {
76
                                h = this.value.h;
77
                                s = this.value.s;
78
                                b = this.value.b;
79
                        }
80
                        h *= 360;
81
                        var R, G, B, X, C;
82
                        h = (h % 360) / 60;
83
                        C = b * s;
84
                        X = C * (1 - Math.abs(h % 2 - 1));
85
                        R = G = B = b - C;
86
 
87
                        h = ~~h;
88
                        R += [C, X, 0, 0, X, C][h];
89
                        G += [X, C, C, X, 0, 0][h];
90
                        B += [0, 0, X, C, C, X][h];
91
                        return {
92
                                r: Math.round(R*255),
93
                                g: Math.round(G*255),
94
                                b: Math.round(B*255),
95
                                a: a||this.value.a
96
                        };
97
                },
98
 
99
                toHex: function(h, s, b, a){
100
                        var rgb = this.toRGB(h, s, b, a);
101
                        return '#'+((1 << 24) | (parseInt(rgb.r) << 16) | (parseInt(rgb.g) << 8) | parseInt(rgb.b)).toString(16).substr(1);
102
                },
103
 
104
                toHSL: function(h, s, b, a){
105
                        if (!h) {
106
                                h = this.value.h;
107
                                s = this.value.s;
108
                                b = this.value.b;
109
                        }
110
                        var H = h,
111
                                L = (2 - s) * b,
112
                                S = s * b;
113
                        if (L > 0 && L <= 1) {
114
                                S /= L;
115
                        } else {
116
                                S /= 2 - L;
117
                        }
118
                        L /= 2;
119
                        if (S > 1) {
120
                                S = 1;
121
                        }
122
                        return {
123
                                h: H,
124
                                s: S,
125
                                l: L,
126
                                a: a||this.value.a
127
                        };
128
                }
129
        };
130
 
131
        // Picker object
132
 
133
        var Colorpicker = function(element, options){
134
                this.element = $(element);
135
                var format = options.format||this.element.data('color-format')||'hex';
136
                this.format = CPGlobal.translateFormats[format];
137
                this.isInput = this.element.is('input');
138
                this.component = this.element.is('.color') ? this.element.find('.input-group-btn') : false; // modified by keenthemes for Bootstrap 3.0 support
139
 
140
                this.picker = $(CPGlobal.template)
141
                                                        .appendTo('body')
142
                                                        .on('mousedown', $.proxy(this.mousedown, this));
143
 
144
                if (this.isInput) {
145
                        this.element.on({
146
                                'focus': $.proxy(this.show, this),
147
                                'keyup': $.proxy(this.update, this)
148
                        });
149
                } else if (this.component){
150
                        this.component.on({
151
                                'click': $.proxy(this.show, this)
152
                        });
153
                } else {
154
                        this.element.on({
155
                                'click': $.proxy(this.show, this)
156
                        });
157
                }
158
                if (format === 'rgba' || format === 'hsla') {
159
                        this.picker.addClass('alpha');
160
                        this.alpha = this.picker.find('.colorpicker-alpha')[0].style;
161
                }
162
 
163
                if (this.component){
164
                        this.picker.find('.colorpicker-color').hide();
165
                        this.preview = this.element.find('i')[0].style;
166
                } else {
167
                        this.preview = this.picker.find('div:last')[0].style;
168
                }
169
 
170
                this.base = this.picker.find('div:first')[0].style;
171
                this.update();
172
        };
173
 
174
        Colorpicker.prototype = {
175
                constructor: Colorpicker,
176
 
177
                show: function(e) {
178
                        this.picker.show();
179
                        this.height = this.component ? this.component.outerHeight() : this.element.outerHeight();
180
                        this.place();
181
                        $(window).on('resize', $.proxy(this.place, this));
182
                        if (!this.isInput) {
183
                                if (e) {
184
                                        e.stopPropagation();
185
                                        e.preventDefault();
186
                                }
187
                        }
188
                        $(document).on({
189
                                'mousedown': $.proxy(this.hide, this)
190
                        });
191
                        this.element.trigger({
192
                                type: 'show',
193
                                color: this.color
194
                        });
195
                },
196
 
197
                update: function(){
198
                        this.color = new Color(this.isInput ? this.element.prop('value') : this.element.data('color'));
199
                        this.picker.find('i')
200
                                .eq(0).css({left: this.color.value.s*100, top: 100 - this.color.value.b*100}).end()
201
                                .eq(1).css('top', 100 * (1 - this.color.value.h)).end()
202
                                .eq(2).css('top', 100 * (1 - this.color.value.a));
203
                        this.previewColor();
204
                },
205
 
206
                setValue: function(newColor) {
207
                        this.color = new Color(newColor);
208
                        this.picker.find('i')
209
                                .eq(0).css({left: this.color.value.s*100, top: 100 - this.color.value.b*100}).end()
210
                                .eq(1).css('top', 100 * (1 - this.color.value.h)).end()
211
                                .eq(2).css('top', 100 * (1 - this.color.value.a));
212
                        this.previewColor();
213
                        this.element.trigger({
214
                                type: 'changeColor',
215
                                color: this.color
216
                        });
217
                },
218
 
219
                hide: function(){
220
                        this.picker.hide();
221
                        $(window).off('resize', this.place);
222
                        if (!this.isInput) {
223
                                $(document).off({
224
                                        'mousedown': this.hide
225
                                });
226
                                if (this.component){
227
                                        this.element.find('input').prop('value', this.format.call(this));
228
                                }
229
                                this.element.data('color', this.format.call(this));
230
                        } else {
231
                                this.element.prop('value', this.format.call(this));
232
                        }
233
                        this.element.trigger({
234
                                type: 'hide',
235
                                color: this.color
236
                        });
237
                },
238
 
239
                place: function(){
240
                        var offset = this.component ? this.component.offset() : this.element.offset();
241
                        this.picker.css({
242
                                top: offset.top + this.height,
243
                                left: offset.left
244
                        });
245
                },
246
 
247
                //preview color change
248
                previewColor: function(){
249
                        try {
250
                                this.preview.backgroundColor = this.format.call(this);
251
                        } catch(e) {
252
                                this.preview.backgroundColor = this.color.toHex();
253
                        }
254
                        //set the color for brightness/saturation slider
255
                        this.base.backgroundColor = this.color.toHex(this.color.value.h, 1, 1, 1);
256
                        //set te color for alpha slider
257
                        if (this.alpha) {
258
                                this.alpha.backgroundColor = this.color.toHex();
259
                        }
260
                },
261
 
262
                pointer: null,
263
 
264
                slider: null,
265
 
266
                mousedown: function(e){
267
                        e.stopPropagation();
268
                        e.preventDefault();
269
 
270
                        var target = $(e.target);
271
 
272
                        //detect the slider and set the limits and callbacks
273
                        var zone = target.closest('div');
274
                        if (!zone.is('.colorpicker')) {
275
                                if (zone.is('.colorpicker-saturation')) {
276
                                        this.slider = $.extend({}, CPGlobal.sliders.saturation);
277
                                }
278
                                else if (zone.is('.colorpicker-hue')) {
279
                                        this.slider = $.extend({}, CPGlobal.sliders.hue);
280
                                }
281
                                else if (zone.is('.colorpicker-alpha')) {
282
                                        this.slider = $.extend({}, CPGlobal.sliders.alpha);
283
                                } else {
284
                                        return false;
285
                                }
286
                                var offset = zone.offset();
287
                                //reference to knob's style
288
                                this.slider.knob = zone.find('i')[0].style;
289
                                this.slider.left = e.pageX - offset.left;
290
                                this.slider.top = e.pageY - offset.top;
291
                                this.pointer = {
292
                                        left: e.pageX,
293
                                        top: e.pageY
294
                                };
295
                                //trigger mousemove to move the knob to the current position
296
                                $(document).on({
297
                                        mousemove: $.proxy(this.mousemove, this),
298
                                        mouseup: $.proxy(this.mouseup, this)
299
                                }).trigger('mousemove');
300
                        }
301
                        return false;
302
                },
303
 
304
                mousemove: function(e){
305
                        e.stopPropagation();
306
                        e.preventDefault();
307
                        var left = Math.max(
308
                                0,
309
                                Math.min(
310
                                        this.slider.maxLeft,
311
                                        this.slider.left + ((e.pageX||this.pointer.left) - this.pointer.left)
312
                                )
313
                        );
314
                        var top = Math.max(
315
                                0,
316
                                Math.min(
317
                                        this.slider.maxTop,
318
                                        this.slider.top + ((e.pageY||this.pointer.top) - this.pointer.top)
319
                                )
320
                        );
321
                        this.slider.knob.left = left + 'px';
322
                        this.slider.knob.top = top + 'px';
323
                        if (this.slider.callLeft) {
324
                                this.color[this.slider.callLeft].call(this.color, left/100);
325
                        }
326
                        if (this.slider.callTop) {
327
                                this.color[this.slider.callTop].call(this.color, top/100);
328
                        }
329
                        this.previewColor();
330
                        this.element.trigger({
331
                                type: 'changeColor',
332
                                color: this.color
333
                        });
334
                        return false;
335
                },
336
 
337
                mouseup: function(e){
338
                        e.stopPropagation();
339
                        e.preventDefault();
340
                        $(document).off({
341
                                mousemove: this.mousemove,
342
                                mouseup: this.mouseup
343
                        });
344
                        return false;
345
                }
346
        }
347
 
348
        $.fn.colorpicker = function ( option, val ) {
349
                return this.each(function () {
350
                        var $this = $(this),
351
                                data = $this.data('colorpicker'),
352
                                options = typeof option === 'object' && option;
353
                        if (!data) {
354
                                $this.data('colorpicker', (data = new Colorpicker(this, $.extend({}, $.fn.colorpicker.defaults,options))));
355
                        }
356
                        if (typeof option === 'string') data[option](val);
357
                });
358
        };
359
 
360
        $.fn.colorpicker.defaults = {
361
        };
362
 
363
        $.fn.colorpicker.Constructor = Colorpicker;
364
 
365
        var CPGlobal = {
366
 
367
                // translate a format from Color object to a string
368
                translateFormats: {
369
                        'rgb': function(){
370
                                var rgb = this.color.toRGB();
371
                                return 'rgb('+rgb.r+','+rgb.g+','+rgb.b+')';
372
                        },
373
 
374
                        'rgba': function(){
375
                                var rgb = this.color.toRGB();
376
                                return 'rgba('+rgb.r+','+rgb.g+','+rgb.b+','+rgb.a+')';
377
                        },
378
 
379
                        'hsl': function(){
380
                                var hsl = this.color.toHSL();
381
                                return 'hsl('+Math.round(hsl.h*360)+','+Math.round(hsl.s*100)+'%,'+Math.round(hsl.l*100)+'%)';
382
                        },
383
 
384
                        'hsla': function(){
385
                                var hsl = this.color.toHSL();
386
                                return 'hsla('+Math.round(hsl.h*360)+','+Math.round(hsl.s*100)+'%,'+Math.round(hsl.l*100)+'%,'+hsl.a+')';
387
                        },
388
 
389
                        'hex': function(){
390
                                return  this.color.toHex();
391
                        }
392
                },
393
 
394
                sliders: {
395
                        saturation: {
396
                                maxLeft: 100,
397
                                maxTop: 100,
398
                                callLeft: 'setSaturation',
399
                                callTop: 'setLightness'
400
                        },
401
 
402
                        hue: {
403
                                maxLeft: 0,
404
                                maxTop: 100,
405
                                callLeft: false,
406
                                callTop: 'setHue'
407
                        },
408
 
409
                        alpha: {
410
                                maxLeft: 0,
411
                                maxTop: 100,
412
                                callLeft: false,
413
                                callTop: 'setAlpha'
414
                        }
415
                },
416
 
417
                // HSBtoRGB from RaphaelJS
418
                // https://github.com/DmitryBaranovskiy/raphael/
419
                RGBtoHSB: function (r, g, b, a){
420
                        r /= 255;
421
                        g /= 255;
422
                        b /= 255;
423
 
424
                        var H, S, V, C;
425
                        V = Math.max(r, g, b);
426
                        C = V - Math.min(r, g, b);
427
                        H = (C === 0 ? null :
428
                                V == r ? (g - b) / C :
429
                                V == g ? (b - r) / C + 2 :
430
                                        (r - g) / C + 4
431
                                );
432
                        H = ((H + 360) % 6) * 60 / 360;
433
                        S = C === 0 ? 0 : C / V;
434
                        return {h: H||1, s: S, b: V, a: a||1};
435
                },
436
 
437
                HueToRGB: function (p, q, h) {
438
                        if (h < 0)
439
                                h += 1;
440
                        else if (h > 1)
441
                                h -= 1;
442
 
443
                        if ((h * 6) < 1)
444
                                return p + (q - p) * h * 6;
445
                        else if ((h * 2) < 1)
446
                                return q;
447
                        else if ((h * 3) < 2)
448
                                return p + (q - p) * ((2 / 3) - h) * 6;
449
                        else
450
                                return p;
451
                },
452
 
453
                HSLtoRGB: function (h, s, l, a)
454
                {
455
                        if (s < 0) {
456
                                s = 0;
457
                        }
458
                        var q;
459
                        if (l <= 0.5) {
460
                                q = l * (1 + s);
461
                        } else {
462
                                q = l + s - (l * s);
463
                        }
464
 
465
                        var p = 2 * l - q;
466
 
467
                        var tr = h + (1 / 3);
468
                        var tg = h;
469
                        var tb = h - (1 / 3);
470
 
471
                        var r = Math.round(CPGlobal.HueToRGB(p, q, tr) * 255);
472
                        var g = Math.round(CPGlobal.HueToRGB(p, q, tg) * 255);
473
                        var b = Math.round(CPGlobal.HueToRGB(p, q, tb) * 255);
474
                        return [r, g, b, a||1];
475
                },
476
 
477
                // a set of RE's that can match strings and generate color tuples.
478
                // from John Resig color plugin
479
                // https://github.com/jquery/jquery-color/
480
                stringParsers: [
481
                        {
482
                                re: /rgba?\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*(?:,\s*(\d+(?:\.\d+)?)\s*)?\)/,
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
                                parse: function( execResult ) {
494
                                        return [
495
                                                2.55 * execResult[1],
496
                                                2.55 * execResult[2],
497
                                                2.55 * execResult[3],
498
                                                execResult[ 4 ]
499
                                        ];
500
                                }
501
                        }, {
502
                                re: /#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/,
503
                                parse: function( execResult ) {
504
                                        return [
505
                                                parseInt( execResult[ 1 ], 16 ),
506
                                                parseInt( execResult[ 2 ], 16 ),
507
                                                parseInt( execResult[ 3 ], 16 )
508
                                        ];
509
                                }
510
                        }, {
511
                                re: /#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/,
512
                                parse: function( execResult ) {
513
                                        return [
514
                                                parseInt( execResult[ 1 ] + execResult[ 1 ], 16 ),
515
                                                parseInt( execResult[ 2 ] + execResult[ 2 ], 16 ),
516
                                                parseInt( execResult[ 3 ] + execResult[ 3 ], 16 )
517
                                        ];
518
                                }
519
                        }, {
520
                                re: /hsla?\(\s*(\d+(?:\.\d+)?)\s*,\s*(\d+(?:\.\d+)?)\%\s*,\s*(\d+(?:\.\d+)?)\%\s*(?:,\s*(\d+(?:\.\d+)?)\s*)?\)/,
521
                                space: 'hsla',
522
                                parse: function( execResult ) {
523
                                        return [
524
                                                execResult[1]/360,
525
                                                execResult[2] / 100,
526
                                                execResult[3] / 100,
527
                                                execResult[4]
528
                                        ];
529
                                }
530
                        }
531
                ],
532
                template: '<div class="colorpicker dropdown-menu">'+
533
                                                        '<div class="colorpicker-saturation"><i><b></b></i></div>'+
534
                                                        '<div class="colorpicker-hue"><i></i></div>'+
535
                                                        '<div class="colorpicker-alpha"><i></i></div>'+
536
                                                        '<div class="colorpicker-color"><div /></div>'+
537
                                                '</div>'
538
        };
539
 
540
}( window.jQuery )