raphael-rails 1.5.2

Sign up to get free protection for your applications and to get access to all the features.
data/Gemfile ADDED
@@ -0,0 +1,4 @@
1
+ source "http://rubygems.org"
2
+
3
+ # Specify your gem's dependencies in raphael-rails.gemspec
4
+ gemspec
@@ -0,0 +1,3 @@
1
+ # Raphaël
2
+
3
+ Cross-browser vector graphics the easy way. Visit the library website for more information: [http://raphaeljs.com](http://raphaeljs.com/)
@@ -0,0 +1,2 @@
1
+ require 'bundler'
2
+ Bundler::GemHelper.install_tasks
@@ -0,0 +1,6 @@
1
+ module Raphael
2
+ module Rails
3
+ class Engine < ::Rails::Engine
4
+ end
5
+ end
6
+ end
@@ -0,0 +1,5 @@
1
+ module Raphael
2
+ module Rails
3
+ VERSION = "1.5.2"
4
+ end
5
+ end
@@ -0,0 +1,21 @@
1
+ The MIT License
2
+
3
+ Copyright (c) 2008-2010 Dmitry Baranovskiy
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in
13
+ all copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21
+ THE SOFTWARE.
@@ -0,0 +1,259 @@
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
+
9
+ /*
10
+ * Usage
11
+ * var cp = Raphael.colorpicker(x, y, size, "#fff"); // #fff is optional init color
12
+ * cp.color(); // returns "#fff"
13
+ * cp.color("#fc0"); // sets new color
14
+ * cp.onchange = function (color) {
15
+ * // do something with the color when user change it
16
+ * }
17
+ * cp.remove(); // removes widget
18
+ */
19
+ (function (Raphael) {
20
+ Raphael.colorpicker = function (x, y, size, initcolor, element) {
21
+ return new ColorPicker(x, y, size, initcolor, element);
22
+ };
23
+ Raphael.fn.colorPickerIcon = function (x, y, r) {
24
+ var segments = pi * r * 2 / Math.min(r / 8, 4);
25
+ var a = pi / 2 - pi * 2 / segments * 1.5,
26
+ 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();
27
+ for (var i = 0; i < segments; i++) {
28
+ this.path(path).attr({
29
+ stroke: "none",
30
+ fill: "hsb(" + (segments - i) * (255 / segments) + ", 255, 255)",
31
+ rotation: [90 + (360 / segments) * i, x, y]
32
+ });
33
+ }
34
+ return this.circle(x, y, r).attr({
35
+ fill: "r#fff-#fff",
36
+ "fill-opacity": 0,
37
+ "stroke-width": Math.round(r * .03),
38
+ stroke: "#fff"
39
+ });
40
+ };
41
+ var pi = Math.PI;
42
+ function angle(x, y) {
43
+ return (x < 0) * 180 + Math.atan(-y / -x) * 180 / pi;
44
+ }
45
+ var doc = document, win = window,
46
+ addEvent = (function () {
47
+ if (doc.addEventListener) {
48
+ return function (obj, type, fn, element) {
49
+ var f = function (e) {
50
+ return fn.call(element, e);
51
+ };
52
+ obj.addEventListener(type, f, false);
53
+ return function () {
54
+ obj.removeEventListener(type, f, false);
55
+ return true;
56
+ };
57
+ };
58
+ } else if (doc.attachEvent) {
59
+ return function (obj, type, fn, element) {
60
+ var f = function (e) {
61
+ return fn.call(element, e || win.event);
62
+ };
63
+ obj.attachEvent("on" + type, f);
64
+ var detacher = function () {
65
+ obj.detachEvent("on" + type, f);
66
+ return true;
67
+ };
68
+ return detacher;
69
+ };
70
+ }
71
+ })(),
72
+ ColorPicker = function (x, y, size, initcolor, element) {
73
+ size = size || 200;
74
+ var w3 = 3 * size / 200,
75
+ w1 = size / 200,
76
+ fi = 1.6180339887,
77
+ size20 = size / 20,
78
+ size2 = size / 2,
79
+ padding = 2 * size / 200,
80
+ height = size + size20 * 2 + padding * 3,
81
+ t = this,
82
+ H = 1, S = 1, B = 1, s = size - (size20 * 4),
83
+ r = element ? Raphael(element, size, height) : Raphael(x, y, size, height),
84
+ xy = s / 6 + size20 * 2 + padding,
85
+ wh = s * 2 / 3 - padding * 2;
86
+ w1 < 1 && (w1 = 1);
87
+ w3 < 1 && (w3 = 1);
88
+
89
+
90
+ r.colorPickerIcon(size2, size2, size2 - padding);
91
+
92
+ t.cursor = r.set();
93
+ t.cursor.push(r.circle(size2, size2, size20 / 2).attr({
94
+ stroke: "#000",
95
+ opacity: .5,
96
+ "stroke-width": w3
97
+ }));
98
+ t.cursor.push(t.cursor[0].clone().attr({
99
+ stroke: "#fff",
100
+ opacity: 1,
101
+ "stroke-width": w1
102
+ }));
103
+ t.disc = r.circle(size2, size2, size2 - padding).attr({
104
+ fill: "#000",
105
+ "fill-opacity": 0,
106
+ stroke: "none",
107
+ cursor: "crosshair"
108
+ });
109
+ var style = t.disc.node.style;
110
+ style.unselectable = "on";
111
+ style.MozUserSelect = "none";
112
+ style.WebkitUserSelect= "none";
113
+
114
+ // brightness drawing
115
+ var h = size20 * 2 + 2;
116
+ t.brect = r.rect(padding + h / fi / 2, size + padding * 2, size - padding * 2 - h / fi, h - padding * 2).attr({
117
+ stroke: "#fff",
118
+ fill: "180-#fff-#000"
119
+ });
120
+ t.cursorb = r.set();
121
+ t.cursorb.push(r.rect(size - padding - h / fi, size + padding, ~~(h / fi), h, w3).attr({
122
+ stroke: "#000",
123
+ opacity: .5,
124
+ "stroke-width": w3
125
+ }));
126
+ t.cursorb.push(t.cursorb[0].clone().attr({
127
+ stroke: "#fff",
128
+ opacity: 1,
129
+ "stroke-width": w1
130
+ }));
131
+ t.btop = t.brect.clone().attr({
132
+ stroke: "#000",
133
+ fill: "#000",
134
+ opacity: 0
135
+ });
136
+ style = t.btop.node.style;
137
+ style.unselectable = "on";
138
+ style.MozUserSelect = "none";
139
+ style.WebkitUserSelect= "none";
140
+
141
+ t.bwidth = ~~(h / fi) / 2;
142
+ t.minx = padding + t.bwidth;
143
+ t.maxx = size - h / fi - padding + t.bwidth;
144
+
145
+ t.H = t.S = t.B = 1;
146
+ t.padding = padding;
147
+ t.raphael = r;
148
+ t.size2 = size2;
149
+ t.size20 = size20;
150
+ t.x = x;
151
+ t.y = y;
152
+
153
+ // events
154
+ t.hson = addEvent(t.disc.node, "mousedown", function (e) {
155
+ var scrollY = doc.documentElement.scrollTop || doc.body.scrollTop,
156
+ scrollX = doc.documentElement.scrollLeft || doc.body.scrollLeft;
157
+ this.hsOnTheMove = true;
158
+ this.setHS(e.clientX + scrollX - this.x, e.clientY + scrollY - this.y);
159
+ this.docmove = addEvent(doc, "mousemove", this.docOnMove, this);
160
+ this.docup = addEvent(doc, "mouseup", this.docOnUp, this);
161
+ }, t);
162
+ t.bon = addEvent(t.btop.node, "mousedown", function (e) {
163
+ var scrollX = doc.documentElement.scrollLeft || doc.body.scrollLeft;
164
+ this.bOnTheMove = true;
165
+ this.setB(e.clientX + scrollX - this.x);
166
+ this.docmove = addEvent(doc, "mousemove", this.docOnMove, this);
167
+ this.docup = addEvent(doc, "mouseup", this.docOnUp, this);
168
+ }, t);
169
+ t.winunload = addEvent(win, "unload", function () {
170
+ this.hson();
171
+ this.bon();
172
+ this.docmove && this.docmove();
173
+ this.docup && this.docup();
174
+ this.winunload();
175
+ }, t);
176
+
177
+ t.color(initcolor || "#fff");
178
+ this.onchanged && this.onchanged(this.color());
179
+ };
180
+ ColorPicker.prototype.setB = function (x) {
181
+ x < this.minx && (x = this.minx);
182
+ x > this.maxx && (x = this.maxx);
183
+ this.cursorb.attr({x: x - this.bwidth});
184
+ this.B = (x - this.minx) / (this.maxx - this.minx);
185
+ this.onchange && this.onchange(this.color());
186
+ };
187
+ ColorPicker.prototype.setHS = function (x, y) {
188
+ var X = x - this.size2,
189
+ Y = y - this.size2,
190
+ R = this.size2 - this.size20 / 2 - this.padding,
191
+ d = angle(X, Y),
192
+ rd = d * pi / 180;
193
+ isNaN(d) && (d = 0);
194
+ if (X * X + Y * Y > R * R) {
195
+ x = R * Math.cos(rd) + this.size2;
196
+ y = R * Math.sin(rd) + this.size2;
197
+ }
198
+ this.cursor.attr({cx: x, cy: y});
199
+ this.H = (1 - d / 360) % 1;
200
+ this.S = Math.min((X * X + Y * Y) / R / R, 1);
201
+ this.brect.attr({fill: "180-hsb(" + [this.H, this.S] + ",1)-#000"});
202
+ this.onchange && this.onchange(this.color());
203
+ };
204
+ ColorPicker.prototype.docOnMove = function (e) {
205
+ var scrollY = doc.documentElement.scrollTop || doc.body.scrollTop,
206
+ scrollX = doc.documentElement.scrollLeft || doc.body.scrollLeft;
207
+ if (this.hsOnTheMove) {
208
+ this.setHS(e.clientX + scrollX - this.x, e.clientY + scrollY - this.y);
209
+ }
210
+ if (this.bOnTheMove) {
211
+ this.setB(e.clientX + scrollX - this.x);
212
+ }
213
+ e.preventDefault && e.preventDefault();
214
+ e.returnValue = false;
215
+ return false;
216
+ };
217
+ ColorPicker.prototype.docOnUp = function (e) {
218
+ this.hsOnTheMove = this.bOnTheMove = false;
219
+ this.docmove();
220
+ delete this.docmove;
221
+ this.docup();
222
+ delete this.docup;
223
+ this.onchanged && this.onchanged(this.color());
224
+ e.preventDefault && e.preventDefault();
225
+ e.stopPropagation && e.stopPropagation();
226
+ e.returnValue = false;
227
+ return false;
228
+ };
229
+ ColorPicker.prototype.remove = function () {
230
+ this.raphael.remove();
231
+ this.color = function () {
232
+ return false;
233
+ };
234
+ };
235
+ ColorPicker.prototype.color = function (color) {
236
+ if (color) {
237
+ color = Raphael.getRGB(color);
238
+ var hex = color.hex;
239
+ color = Raphael.rgb2hsb(color.r, color.g, color.b);
240
+ d = color.h * 360;
241
+ this.H = color.h;
242
+ this.S = color.s;
243
+ this.B = color.b;
244
+
245
+ this.cursorb.attr({x: this.B * (this.maxx - this.minx) + this.minx - this.bwidth});
246
+ this.brect.attr({fill: "180-hsb(" + [this.H, this.S] + ",1)-#000"});
247
+
248
+ var d = (1 - this.H) * 360,
249
+ rd = d * pi / 180,
250
+ R = (this.size2 - this.size20 / 2 - this.padding) * this.S,
251
+ x = Math.cos(rd) * R + this.size2,
252
+ y = Math.sin(rd) * R + this.size2;
253
+ this.cursor.attr({cx: x, cy: y});
254
+ return this;
255
+ } else {
256
+ return Raphael.hsb2rgb(this.H, this.S, this.B).hex;
257
+ }
258
+ };
259
+ })(window.Raphael);
@@ -0,0 +1,212 @@
1
+ (function (Raphael) {
2
+ Raphael.colorwheel = function (x, y, size, initcolor, element) {
3
+ return new ColorWheel(x, y, size, initcolor, element);
4
+ };
5
+ var pi = Math.PI;
6
+ function angle(x, y) {
7
+ return (x < 0) * 180 + Math.atan(-y / -x) * 180 / pi;
8
+ }
9
+ var doc = document, win = window;
10
+ var addEvent = (function () {
11
+ if (doc.addEventListener) {
12
+ return function (obj, type, fn, element) {
13
+ var f = function (e) {
14
+ return fn.call(element, e);
15
+ };
16
+ obj.addEventListener(type, f, false);
17
+ return function () {
18
+ obj.removeEventListener(type, f, false);
19
+ return true;
20
+ };
21
+ };
22
+ } else if (doc.attachEvent) {
23
+ return function (obj, type, fn, element) {
24
+ var f = function (e) {
25
+ return fn.call(element, e || win.event);
26
+ };
27
+ obj.attachEvent("on" + type, f);
28
+ var detacher = function () {
29
+ obj.detachEvent("on" + type, f);
30
+ return true;
31
+ };
32
+ return detacher;
33
+ };
34
+ }
35
+ })();
36
+ var ColorWheel = function (x, y, size, initcolor, element) {
37
+ size = size || 200;
38
+ var w3 = 3 * size / 200,
39
+ w1 = size / 200,
40
+ fi = 1.6180339887,
41
+ segments = pi * size / 5,
42
+ size20 = size / 20,
43
+ size2 = size / 2,
44
+ padding = 2 * size / 200,
45
+ t = this;
46
+
47
+ var H = 1, S = 1, B = 1, s = size - (size20 * 4);
48
+ var r = element ? Raphael(element, size, size) : Raphael(x, y, size, size),
49
+ xy = s / 6 + size20 * 2 + padding,
50
+ wh = s * 2 / 3 - padding * 2;
51
+ w1 < 1 && (w1 = 1);
52
+ w3 < 1 && (w3 = 1);
53
+
54
+
55
+ // ring drawing
56
+ var a = pi / 2 - pi * 2 / segments * 1.3,
57
+ R = size2 - padding,
58
+ R2 = size2 - padding - size20 * 2,
59
+ path = ["M", size2, padding, "A", R, R, 0, 0, 1, R * Math.cos(a) + R + padding, R - R * Math.sin(a) + padding, "L", R2 * Math.cos(a) + R + padding, R - R2 * Math.sin(a) + padding, "A", R2, R2, 0, 0, 0, size2, padding + size20 * 2, "z"].join();
60
+ for (var i = 0; i < segments; i++) {
61
+ r.path(path).attr({
62
+ stroke: "none",
63
+ fill: "hsb(" + i * (255 / segments) + ", 255, 200)",
64
+ rotation: [(360 / segments) * i, size2, size2]
65
+ });
66
+ }
67
+ r.path(["M", size2, padding, "A", R, R, 0, 1, 1, size2 - 1, padding, "l1,0", "M", size2, padding + size20 * 2, "A", R2, R2, 0, 1, 1, size2 - 1, padding + size20 * 2, "l1,0"]).attr({
68
+ "stroke-width": w3,
69
+ stroke: "#fff"
70
+ });
71
+ t.cursorhsb = r.set();
72
+ var h = size20 * 2 + 2;
73
+ t.cursorhsb.push(r.rect(size2 - h / fi / 2, padding - 1, h / fi, h, 3 * size / 200).attr({
74
+ stroke: "#000",
75
+ opacity: .5,
76
+ "stroke-width": w3
77
+ }));
78
+ t.cursorhsb.push(t.cursorhsb[0].clone().attr({
79
+ stroke: "#fff",
80
+ opacity: 1,
81
+ "stroke-width": w1
82
+ }));
83
+ t.ring = r.path(["M", size2, padding, "A", R, R, 0, 1, 1, size2 - 1, padding, "l1,0M", size2, padding + size20 * 2, "A", R2, R2, 0, 1, 1, size2 - 1, padding + size20 * 2, "l1,0"]).attr({
84
+ fill: "#000",
85
+ opacity: 0,
86
+ stroke: "none"
87
+ });
88
+
89
+ // rect drawing
90
+ t.main = r.rect(xy, xy, wh, wh).attr({
91
+ stroke: "none",
92
+ fill: "#f00",
93
+ opacity: 1
94
+ });
95
+ t.main.clone().attr({
96
+ stroke: "none",
97
+ fill: "0-#fff-#fff",
98
+ opacity: 0
99
+ });
100
+ t.square = r.rect(xy - 1, xy - 1, wh + 2, wh + 2).attr({
101
+ r: 2,
102
+ stroke: "#fff",
103
+ "stroke-width": w3,
104
+ fill: "90-#000-#000",
105
+ opacity: 0,
106
+ cursor: "crosshair"
107
+ });
108
+ t.cursor = r.set();
109
+ t.cursor.push(r.circle(size2, size2, size20 / 2).attr({
110
+ stroke: "#000",
111
+ opacity: .5,
112
+ "stroke-width": w3
113
+ }));
114
+ t.cursor.push(t.cursor[0].clone().attr({
115
+ stroke: "#fff",
116
+ opacity: 1,
117
+ "stroke-width": w1
118
+ }));
119
+ t.H = t.S = t.B = 1;
120
+ t.raphael = r;
121
+ t.size2 = size2;
122
+ t.wh = wh;
123
+ t.x = x;
124
+ t.xy = xy;
125
+ t.y = y;
126
+
127
+ // events
128
+ t.hsbon = addEvent(t.ring.node, "mousedown", function (e) {
129
+ this.hsbOnTheMove = true;
130
+ this.setH(e.clientX - this.x - this.size2, e.clientY - this.y - this.size2);
131
+ this.docmove = addEvent(doc, "mousemove", this.docOnMove, this);
132
+ this.docup = addEvent(doc, "mouseup", this.docOnUp, this);
133
+ }, t);
134
+ t.clron = addEvent(t.square.node, "mousedown", function (e) {
135
+ this.clrOnTheMove = true;
136
+ this.setSB(e.clientX - this.x, e.clientY - this.y);
137
+ this.docmove = addEvent(doc, "mousemove", this.docOnMove, this);
138
+ this.docup = addEvent(doc, "mouseup", this.docOnUp, this);
139
+ }, t);
140
+ t.winunload = addEvent(win, "unload", function () {
141
+ this.hsbon();
142
+ this.clron();
143
+ this.docmove && this.docmove();
144
+ this.docup && this.docup();
145
+ this.winunload();
146
+ }, t);
147
+
148
+ t.color(initcolor || "#f00");
149
+ this.onchanged && this.onchanged(this.color());
150
+ };
151
+ ColorWheel.prototype.setH = function (x, y) {
152
+ var d = angle(x, y),
153
+ rd = d * pi / 180;
154
+ this.cursorhsb.rotate(d + 90, this.size2, this.size2);
155
+ this.H = (d + 90) / 360;
156
+ this.main.attr({fill: "hsb(" + this.H + ",1,1)"});
157
+ this.onchange && this.onchange(this.color());
158
+ };
159
+ ColorWheel.prototype.setSB = function (x, y) {
160
+ x < this.size2 - this.wh / 2 && (x = this.size2 - this.wh / 2);
161
+ x > this.size2 + this.wh / 2 && (x = this.size2 + this.wh / 2);
162
+ y < this.size2 - this.wh / 2 && (y = this.size2 - this.wh / 2);
163
+ y > this.size2 + this.wh / 2 && (y = this.size2 + this.wh / 2);
164
+ this.cursor.attr({cx: x, cy: y});
165
+ this.B = 1 - (y - this.xy) / this.wh;
166
+ this.S = (x - this.xy) / this.wh;
167
+ this.onchange && this.onchange(this.color());
168
+ };
169
+ ColorWheel.prototype.docOnMove = function (e) {
170
+ if (this.hsbOnTheMove) {
171
+ this.setH(e.clientX - this.x - this.size2, e.clientY - this.y - this.size2);
172
+ }
173
+ if (this.clrOnTheMove) {
174
+ this.setSB(e.clientX - this.x, e.clientY - this.y);
175
+ }
176
+ e.preventDefault && e.preventDefault();
177
+ e.returnValue = false;
178
+ return false;
179
+ };
180
+ ColorWheel.prototype.docOnUp = function (e) {
181
+ this.hsbOnTheMove = this.clrOnTheMove = false;
182
+ this.docmove();
183
+ delete this.docmove;
184
+ this.docup();
185
+ delete this.docup;
186
+ this.onchanged && this.onchanged(this.color());
187
+ };
188
+ ColorWheel.prototype.remove = function () {
189
+ this.raphael.remove();
190
+ this.color = function () {
191
+ return false;
192
+ };
193
+ };
194
+ ColorWheel.prototype.color = function (color) {
195
+ if (color) {
196
+ color = Raphael.getRGB(color);
197
+ color = Raphael.rgb2hsb(color.r, color.g, color.b);
198
+ var d = color.h * 360;
199
+ this.H = color.h;
200
+ this.S = color.s;
201
+ this.B = color.b;
202
+ this.cursorhsb.rotate(d, this.size2, this.size2);
203
+ this.main.attr({fill: "hsb(" + this.H + ",1,1)"});
204
+ var x = this.S * this.wh + this.xy,
205
+ y = (1 - this.B) * this.wh + this.xy;
206
+ this.cursor.attr({cx: x, cy: y});
207
+ return this;
208
+ } else {
209
+ return Raphael.hsb2rgb(this.H, this.S, this.B).hex;
210
+ }
211
+ };
212
+ })(window.Raphael);