scratch – Blame information for rev 94
?pathlinks?
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;});>>>> |