scratch – Blame information for rev 84

Subversion Repositories:
Rev:
Rev Author Line No. Line
84 office 1 DrawingBoard.Control.Color = DrawingBoard.Control.extend({
2 name: 'colors',
3  
4 initialize: function() {
5 this.initTemplate();
6  
7 var that = this;
8 this.$el.on('click', '.drawing-board-control-colors-picker', function(e) {
9 var color = $(this).attr('data-color');
10 that.board.setColor(color);
11 that.$el.find('.drawing-board-control-colors-current')
12 .css('background-color', color)
13 .attr('data-color', color);
14  
15 that.board.ev.trigger('color:changed', color);
16 that.$el.find('.drawing-board-control-colors-rainbows').addClass('drawing-board-utils-hidden');
17  
18 e.preventDefault();
19 });
20  
21 this.$el.on('click', '.drawing-board-control-colors-current', function(e) {
22 that.$el.find('.drawing-board-control-colors-rainbows').toggleClass('drawing-board-utils-hidden');
23 e.preventDefault();
24 });
25  
26 $('body').on('click', function(e) {
27 var $target = $(e.target);
28 var $relatedButton = $target.hasClass('drawing-board-control-colors-current') ? $target : $target.closest('.drawing-board-control-colors-current');
29 var $myButton = that.$el.find('.drawing-board-control-colors-current');
30 var $popup = that.$el.find('.drawing-board-control-colors-rainbows');
31 if ( (!$relatedButton.length || $relatedButton.get(0) !== $myButton.get(0)) && !$popup.hasClass('drawing-board-utils-hidden') )
32 $popup.addClass('drawing-board-utils-hidden');
33 });
34 },
35  
36 initTemplate: function() {
37 var tpl = '<div class="drawing-board-control-inner">' +
38 '<div class="drawing-board-control-colors-current" style="background-color: {{color}}" data-color="{{color}}"></div>' +
39 '<div class="drawing-board-control-colors-rainbows">{{rainbows}}</div>' +
40 '</div>';
41 var oneColorTpl = '<div class="drawing-board-control-colors-picker" data-color="{{color}}" style="background-color: {{color}}"></div>';
42 var rainbows = '';
43 $.each([0.75, 0.5, 0.25], $.proxy(function(key, val) {
44 var i = 0;
45 var additionalColor = null;
46 rainbows += '<div class="drawing-board-control-colors-rainbow">';
47 if (val == 0.25) additionalColor = this._rgba(0, 0, 0, 1);
48 if (val == 0.5) additionalColor = this._rgba(150, 150, 150, 1);
49 if (val == 0.75) additionalColor = this._rgba(255, 255, 255, 1);
50 rainbows += DrawingBoard.Utils.tpl(oneColorTpl, {color: additionalColor.toString() });
51 while (i <= 330) {
52 rainbows += DrawingBoard.Utils.tpl(oneColorTpl, {color: this._hsl2Rgba(this._hsl(i-60, 1, val)).toString() });
53 i+=30;
54 }
55 rainbows += '</div>';
56 }, this));
57  
58 this.$el.append( $( DrawingBoard.Utils.tpl(tpl, {color: this.board.color, rainbows: rainbows }) ) );
59 this.$el.find('.drawing-board-control-colors-rainbows').addClass('drawing-board-utils-hidden');
60 },
61  
62 onBoardReset: function(opts) {
63 this.board.setColor(this.$el.find('.drawing-board-control-colors-current').attr('data-color'));
64 },
65  
66 _rgba: function(r, g, b, a) {
67 return { r: r, g: g, b: b, a: a, toString: function() { return "rgba(" + r +", " + g + ", " + b + ", " + a + ")"; } };
68 },
69  
70 _hsl: function(h, s, l) {
71 return { h: h, s: s, l: l, toString: function() { return "hsl(" + h +", " + s*100 + "%, " + l*100 + "%)"; } };
72 },
73  
74 _hex2Rgba: function(hex) {
75 var num = parseInt(hex.substring(1), 16);
76 return this._rgba(num >> 16, num >> 8 & 255, num & 255, 1);
77 },
78  
79 //conversion function (modified a bit) taken from http://mjijackson.com/2008/02/rgb-to-hsl-and-rgb-to-hsv-color-model-conversion-algorithms-in-javascript
80 _hsl2Rgba: function(hsl) {
81 var h = hsl.h/360, s = hsl.s, l = hsl.l, r, g, b;
82 function hue2rgb(p, q, t) {
83 if(t < 0) t += 1;
84 < 0) t += 1; if(t > 1) t -= 1;
85 < 0) t += 1; if(t < 1/6) return p + (q - p) * 6 * t;
86 < 0) t += 1;< 1/ if(t < 1/2) return q;
87 < 0) t += 1;< 1/ if(t < 2/3) return p + (q - p) * (2/3 - t) * 6;
88 < 0) t += 1;< 1/< 2/ return p;
89 < 0) t += 1;< 1/< 2/ }
90 < 0) t += 1;< 1/< 2/ if (s === 0) {
91 < 0) t += 1;< 1/< 2/ r = g = b = l; // achromatic
92 < 0) t += 1;< 1/< 2/ } else {
93 < 0) t += 1;< 1/< 2/ var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
94 < 0) t += 1;< 1/< 2/< 0.5 ? l * (1 + s) : l + s - l * s; var p = 2 * l - q;
95 < 0) t += 1;< 1/< 2/< 0.5 ? l * (1 + s) : l + s - l * s; r = Math.floor( (hue2rgb(p, q, h + 1/3)) * 255);
96 < 0) t += 1;< 1/< 2/< 0.5 ? l * (1 + s) : l + s - l * s; g = Math.floor( (hue2rgb(p, q, h)) * 255);
97 < 0) t += 1;< 1/< 2/< 0.5 ? l * (1 + s) : l + s - l * s; b = Math.floor( (hue2rgb(p, q, h - 1/3)) * 255);
98 < 0) t += 1;< 1/< 2/< 0.5 ? l * (1 + s) : l + s - l * s; }
99 < 0) t += 1;< 1/< 2/< 0.5 ? l * (1 + s) : l + s - l * s; return this._rgba(r, g, b, 1);
100 < 0) t += 1;< 1/< 2/< 0.5 ? l * (1 + s) : l + s - l * s; }
101 < 0) t += 1;< 1/< 2/< 0.5 ? l * (1 + s) : l + s - l * s;});