Commit | Line | Data |
---|---|---|
fa726f85 CE |
1 | /*! |
2 | * Color Picker 0.1.0 - Raphael plugin | |
3 | * | |
4 | * Copyright (c) 2010 Dmitry Baranovskiy (http://raphaeljs.com) | |
5 | * Based on Color Wheel (http://jweir.github.com/colorwheel) by John Weir (http://famedriver.com) | |
6 | * Licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) license. | |
7 | */ | |
8 | (function (Raphael) { | |
9 | Raphael.colorpicker = function (x, y, size, initcolor, element) { | |
10 | return new ColorPicker(x, y, size, initcolor, element); | |
11 | }; | |
12 | Raphael.fn.colorPickerIcon = function (x, y, r) { | |
13 | var segments = pi * r * 2 / Math.min(r / 8, 4); | |
14 | var a = pi / 2 - pi * 2 / segments * 1.5, | |
15 | path = ["M", x, y - r, "A", r, r, 0, 0, 1, r * Math.cos(a) + x, y - r * Math.sin(a), "L", x, y, "z"].join(); | |
16 | for (var i = 0; i < segments; i++) { | |
17 | this.path(path).attr({ | |
18 | stroke: "none", | |
19 | fill: "hsb(" + (segments - i) * (255 / segments) / 255 + ", 1, 1)", | |
20 | transform: "r" + [90 + (360 / segments) * i, x, y] | |
21 | }); | |
22 | } | |
23 | return this.circle(x, y, r).attr({ | |
24 | fill: "r#fff-#fff", | |
25 | "fill-opacity": 0, | |
26 | "stroke-width": Math.round(r * .03), | |
27 | stroke: "#fff" | |
28 | }); | |
29 | }; | |
30 | var pi = Math.PI; | |
31 | function angle(x, y) { | |
32 | return (x < 0) * 180 + Math.atan(-y / -x) * 180 / pi; | |
33 | } | |
34 | var doc = document, win = window, | |
35 | ColorPicker = function (x, y, size, initcolor, element) { | |
36 | size = size || 200; | |
37 | var w3 = 3 * size / 200, | |
38 | w1 = size / 200, | |
39 | fi = 1.6180339887, | |
40 | size20 = size / 20, | |
41 | size2 = size / 2, | |
42 | padding = 2 * size / 200, | |
43 | height = size + size20 * 2 + padding * 3, | |
44 | t = this, | |
45 | H = 1, S = 1, B = 1, s = size - (size20 * 4), | |
46 | r = element ? Raphael(element, size, height) : Raphael(x, y, size, height), | |
47 | xy = s / 6 + size20 * 2 + padding, | |
48 | wh = s * 2 / 3 - padding * 2; | |
49 | w1 < 1 && (w1 = 1); | |
50 | w3 < 1 && (w3 = 1); | |
51 | ||
52 | ||
53 | r.colorPickerIcon(size2, size2, size2 - padding); | |
54 | ||
55 | t.cursor = r.set(); | |
56 | t.cursor.push(r.circle(size2, size2, size20 / 2).attr({ | |
57 | stroke: "#000", | |
58 | opacity: .5, | |
59 | "stroke-width": w3 | |
60 | })); | |
61 | t.cursor.push(t.cursor[0].clone().attr({ | |
62 | stroke: "#fff", | |
63 | opacity: 1, | |
64 | "stroke-width": w1 | |
65 | })); | |
66 | t.disc = r.circle(size2, size2, size2 - padding).attr({ | |
67 | fill: "#000", | |
68 | "fill-opacity": 0, | |
69 | stroke: "none", | |
70 | cursor: "crosshair" | |
71 | }); | |
72 | var style = t.disc.node.style; | |
73 | style.unselectable = "on"; | |
74 | style.MozUserSelect = "none"; | |
75 | style.WebkitUserSelect= "none"; | |
76 | ||
77 | // brightness drawing | |
78 | var h = size20 * 2 + 2; | |
79 | t.brect = r.rect(padding + h / fi / 2, size + padding * 2, size - padding * 2 - h / fi, h - padding * 2).attr({ | |
80 | stroke: "#fff", | |
81 | fill: "180-#fff-#000" | |
82 | }); | |
83 | t.cursorb = r.set(); | |
84 | t.cursorb.push(r.rect(size - padding - h / fi, size + padding, ~~(h / fi), h, w3).attr({ | |
85 | stroke: "#000", | |
86 | opacity: .5, | |
87 | "stroke-width": w3 | |
88 | })); | |
89 | t.cursorb.push(t.cursorb[0].clone().attr({ | |
90 | stroke: "#fff", | |
91 | opacity: 1, | |
92 | "stroke-width": w1 | |
93 | })); | |
94 | t.btop = t.brect.clone().attr({ | |
95 | stroke: "#000", | |
96 | fill: "#000", | |
97 | opacity: 0 | |
98 | }); | |
99 | style = t.btop.node.style; | |
100 | style.unselectable = "on"; | |
101 | style.MozUserSelect = "none"; | |
102 | style.WebkitUserSelect= "none"; | |
103 | ||
104 | t.bwidth = ~~(h / fi) / 2; | |
105 | t.minx = padding + t.bwidth; | |
106 | t.maxx = size - h / fi - padding + t.bwidth; | |
107 | ||
108 | t.H = t.S = t.B = 1; | |
109 | t.padding = padding; | |
110 | t.raphael = r; | |
111 | t.size2 = size2; | |
112 | t.size20 = size20; | |
113 | t.x = x; | |
114 | t.y = y; | |
115 | ||
116 | // events | |
117 | t.disc.drag(function (dx, dy, x, y) { | |
118 | t.docOnMove(dx, dy, x, y); | |
119 | }, function (x, y) { | |
120 | t.hsOnTheMove = true; | |
121 | t.setHS(x - t.x, y - t.y); | |
122 | }, function () { | |
123 | t.hsOnTheMove = false; | |
124 | }); | |
125 | t.btop.drag(function (dx, dy, x, y) { | |
126 | t.docOnMove(dx, dy, x, y); | |
127 | }, function (x, y) { | |
128 | t.bOnTheMove = true; | |
129 | t.setB(x - t.x); | |
130 | }, function () { | |
131 | t.bOnTheMove = false; | |
132 | }); | |
133 | ||
134 | t.color(initcolor || "#fff"); | |
135 | this.onchanged && this.onchanged(this.color()); | |
136 | }; | |
137 | ColorPicker.prototype.setB = function (x) { | |
138 | x < this.minx && (x = this.minx); | |
139 | x > this.maxx && (x = this.maxx); | |
140 | this.cursorb.attr({x: x - this.bwidth}); | |
141 | this.B = (x - this.minx) / (this.maxx - this.minx); | |
142 | this.onchange && this.onchange(this.color()); | |
143 | }; | |
144 | ColorPicker.prototype.setHS = function (x, y) { | |
145 | var X = x - this.size2, | |
146 | Y = y - this.size2, | |
147 | R = this.size2 - this.size20 / 2 - this.padding, | |
148 | d = angle(X, Y), | |
149 | rd = d * pi / 180; | |
150 | isNaN(d) && (d = 0); | |
151 | if (X * X + Y * Y > R * R) { | |
152 | x = R * Math.cos(rd) + this.size2; | |
153 | y = R * Math.sin(rd) + this.size2; | |
154 | } | |
155 | this.cursor.attr({cx: x, cy: y}); | |
156 | this.H = (1 - d / 360) % 1; | |
157 | this.S = Math.min((X * X + Y * Y) / R / R, 1); | |
158 | this.brect.attr({fill: "180-hsb(" + [this.H, this.S] + ",1)-#000"}); | |
159 | this.onchange && this.onchange(this.color()); | |
160 | }; | |
161 | ColorPicker.prototype.docOnMove = function (dx, dy, x, y) { | |
162 | if (this.hsOnTheMove) { | |
163 | this.setHS(x - this.x, y - this.y); | |
164 | } | |
165 | if (this.bOnTheMove) { | |
166 | this.setB(x - this.x); | |
167 | } | |
168 | }; | |
169 | ColorPicker.prototype.remove = function () { | |
170 | this.raphael.remove(); | |
171 | this.color = function () { | |
172 | return false; | |
173 | }; | |
174 | }; | |
175 | ColorPicker.prototype.color = function (color) { | |
176 | if (color) { | |
177 | color = Raphael.getRGB(color); | |
178 | var hex = color.hex; | |
179 | color = Raphael.rgb2hsb(color.r, color.g, color.b); | |
180 | d = color.h * 360; | |
181 | this.H = color.h; | |
182 | this.S = color.s; | |
183 | this.B = color.b; | |
184 | ||
185 | this.cursorb.attr({x: this.B * (this.maxx - this.minx) + this.minx - this.bwidth}); | |
186 | this.brect.attr({fill: "180-hsb(" + [this.H, this.S] + ",1)-#000"}); | |
187 | ||
188 | var d = (1 - this.H) * 360, | |
189 | rd = d * pi / 180, | |
190 | R = (this.size2 - this.size20 / 2 - this.padding) * this.S, | |
191 | x = Math.cos(rd) * R + this.size2, | |
192 | y = Math.sin(rd) * R + this.size2; | |
193 | this.cursor.attr({cx: x, cy: y}); | |
194 | return this; | |
195 | } else { | |
196 | return Raphael.hsb2rgb(this.H, this.S, this.B).hex; | |
197 | } | |
198 | }; | |
199 | })(window.Raphael); |