rgraph-rails 1.0.7 → 1.0.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/README.md +3 -3
- data/lib/rgraph-rails/version.rb +1 -1
- data/license.txt +4 -16
- data/vendor/assets/javascripts/RGraph.bar.js +3734 -241
- data/vendor/assets/javascripts/RGraph.bipolar.js +2005 -115
- data/vendor/assets/javascripts/RGraph.common.annotate.js +395 -35
- data/vendor/assets/javascripts/RGraph.common.context.js +595 -30
- data/vendor/assets/javascripts/RGraph.common.core.js +5282 -405
- data/vendor/assets/javascripts/RGraph.common.csv.js +276 -19
- data/vendor/assets/javascripts/RGraph.common.deprecated.js +450 -35
- data/vendor/assets/javascripts/RGraph.common.dynamic.js +1395 -86
- data/vendor/assets/javascripts/RGraph.common.effects.js +1545 -90
- data/vendor/assets/javascripts/RGraph.common.key.js +753 -54
- data/vendor/assets/javascripts/RGraph.common.resizing.js +563 -37
- data/vendor/assets/javascripts/RGraph.common.sheets.js +352 -29
- data/vendor/assets/javascripts/RGraph.common.tooltips.js +450 -32
- data/vendor/assets/javascripts/RGraph.common.zoom.js +219 -14
- data/vendor/assets/javascripts/RGraph.drawing.background.js +570 -35
- data/vendor/assets/javascripts/RGraph.drawing.circle.js +544 -35
- data/vendor/assets/javascripts/RGraph.drawing.image.js +755 -52
- data/vendor/assets/javascripts/RGraph.drawing.marker1.js +645 -41
- data/vendor/assets/javascripts/RGraph.drawing.marker2.js +633 -37
- data/vendor/assets/javascripts/RGraph.drawing.marker3.js +514 -36
- data/vendor/assets/javascripts/RGraph.drawing.poly.js +559 -39
- data/vendor/assets/javascripts/RGraph.drawing.rect.js +548 -35
- data/vendor/assets/javascripts/RGraph.drawing.text.js +664 -36
- data/vendor/assets/javascripts/RGraph.drawing.xaxis.js +812 -50
- data/vendor/assets/javascripts/RGraph.drawing.yaxis.js +856 -51
- data/vendor/assets/javascripts/RGraph.fuel.js +964 -58
- data/vendor/assets/javascripts/RGraph.funnel.js +984 -55
- data/vendor/assets/javascripts/RGraph.gantt.js +1354 -77
- data/vendor/assets/javascripts/RGraph.gauge.js +1421 -87
- data/vendor/assets/javascripts/RGraph.hbar.js +2562 -146
- data/vendor/assets/javascripts/RGraph.hprogress.js +1401 -80
- data/vendor/assets/javascripts/RGraph.line.js +4226 -244
- data/vendor/assets/javascripts/RGraph.meter.js +1280 -74
- data/vendor/assets/javascripts/RGraph.modaldialog.js +301 -19
- data/vendor/assets/javascripts/RGraph.odo.js +1264 -71
- data/vendor/assets/javascripts/RGraph.pie.js +2288 -137
- data/vendor/assets/javascripts/RGraph.radar.js +1847 -110
- data/vendor/assets/javascripts/RGraph.rose.js +1977 -108
- data/vendor/assets/javascripts/RGraph.rscatter.js +1432 -80
- data/vendor/assets/javascripts/RGraph.scatter.js +3036 -168
- data/vendor/assets/javascripts/RGraph.semicircularprogress.js +1120 -60
- data/vendor/assets/javascripts/RGraph.svg.bar.js +1067 -0
- data/vendor/assets/javascripts/RGraph.svg.common.ajax.js +247 -0
- data/vendor/assets/javascripts/RGraph.svg.common.core.js +3363 -0
- data/vendor/assets/javascripts/RGraph.svg.common.csv.js +277 -0
- data/vendor/assets/javascripts/RGraph.svg.common.fx.js +1304 -0
- data/vendor/assets/javascripts/RGraph.svg.common.sheets.js +353 -0
- data/vendor/assets/javascripts/RGraph.svg.common.tooltips.js +233 -0
- data/vendor/assets/javascripts/RGraph.svg.hbar.js +1141 -0
- data/vendor/assets/javascripts/RGraph.svg.line.js +1486 -0
- data/vendor/assets/javascripts/RGraph.svg.pie.js +781 -0
- data/vendor/assets/javascripts/RGraph.svg.radar.js +1326 -0
- data/vendor/assets/javascripts/RGraph.svg.semicircularprogress.js +817 -0
- data/vendor/assets/javascripts/RGraph.thermometer.js +1135 -62
- data/vendor/assets/javascripts/RGraph.vprogress.js +1470 -83
- data/vendor/assets/javascripts/RGraph.waterfall.js +1347 -80
- metadata +15 -3
@@ -1,36 +1,396 @@
|
|
1
|
+
// version: 2017-01-02
|
2
|
+
/**
|
3
|
+
* o--------------------------------------------------------------------------------o
|
4
|
+
* | This file is part of the RGraph package - you can learn more at: |
|
5
|
+
* | |
|
6
|
+
* | http://www.rgraph.net |
|
7
|
+
* | |
|
8
|
+
* | RGraph is licensed under the Open Source MIT license. That means that it's |
|
9
|
+
* | totally free to use! |
|
10
|
+
* o--------------------------------------------------------------------------------o
|
11
|
+
*/
|
1
12
|
|
2
|
-
RGraph=window.RGraph||{isRGraph:true};
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
RG
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
{
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
e.
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
context.
|
35
|
-
|
36
|
-
|
13
|
+
RGraph = window.RGraph || {isRGraph: true};
|
14
|
+
|
15
|
+
// Module pattern
|
16
|
+
(function (win, doc, undefined)
|
17
|
+
{
|
18
|
+
var RG = RGraph,
|
19
|
+
ua = navigator.userAgent,
|
20
|
+
ma = Math;
|
21
|
+
|
22
|
+
|
23
|
+
|
24
|
+
|
25
|
+
/**
|
26
|
+
* This installs some event handlers
|
27
|
+
*
|
28
|
+
* Checking the RGraph.Annotate flag means the annotate code only runs once
|
29
|
+
*/
|
30
|
+
RG.annotating_canvas_onmousedown = function (e)
|
31
|
+
{
|
32
|
+
if (e.button === 0) {
|
33
|
+
|
34
|
+
e.target.__object__.Set('chart.mousedown', true);
|
35
|
+
|
36
|
+
// Get the object from the canvas. Annotating must be enabled on the
|
37
|
+
// last object defined
|
38
|
+
var obj = e.target.__object__,
|
39
|
+
prop = obj.properties
|
40
|
+
|
41
|
+
// This starts the annotating "path" and set the color
|
42
|
+
obj.context.beginPath();
|
43
|
+
|
44
|
+
obj.context.strokeStyle = obj.Get('chart.annotate.color');
|
45
|
+
obj.context.lineWidth = obj.Get('chart.annotate.linewidth');
|
46
|
+
|
47
|
+
var mouseXY = RG.getMouseXY(e),
|
48
|
+
mouseX = mouseXY[0],
|
49
|
+
mouseY = mouseXY[1]
|
50
|
+
|
51
|
+
// Allow for the Bar chart 3D
|
52
|
+
if (obj.type === 'bar' && prop['chart.variant'] === '3d') {
|
53
|
+
var adjustment = prop['chart.variant.threed.angle'] * mouseXY[0];
|
54
|
+
mouseY -= adjustment;
|
55
|
+
}
|
56
|
+
|
57
|
+
// Clear the annotation recording
|
58
|
+
RG.Registry.Set('annotate.actions', [obj.Get('chart.annotate.color')]);
|
59
|
+
|
60
|
+
// This sets the initial X/Y position
|
61
|
+
obj.context.moveTo(mouseX, mouseY);
|
62
|
+
RG.Registry.Set('annotate.last.coordinates', [mouseX,mouseY]);
|
63
|
+
|
64
|
+
RG.Registry.Set('started.annotating', false);
|
65
|
+
RG.Registry.Set('chart.annotating', obj);
|
66
|
+
|
67
|
+
// Fire the onannotatebegin event.
|
68
|
+
RG.FireCustomEvent(obj, 'onannotatebegin');
|
69
|
+
}
|
70
|
+
|
71
|
+
return false;
|
72
|
+
};
|
73
|
+
|
74
|
+
|
75
|
+
|
76
|
+
|
77
|
+
/**
|
78
|
+
* This cancels annotating for ALL canvases
|
79
|
+
*/
|
80
|
+
RG.annotating_window_onmouseup = function (e)
|
81
|
+
{
|
82
|
+
var obj = RG.Registry.Get('chart.annotating');
|
83
|
+
var win = window;
|
84
|
+
|
85
|
+
if (e.button != 0 || !obj) {
|
86
|
+
return;
|
87
|
+
}
|
88
|
+
|
89
|
+
// This cancels annotating on ALL canvas tags on the page
|
90
|
+
var tags = doc.getElementsByTagName('canvas');
|
91
|
+
|
92
|
+
for (var i=0; i<tags.length; ++i) {
|
93
|
+
if (tags[i].__object__) {
|
94
|
+
tags[i].__object__.Set('chart.mousedown', false);
|
95
|
+
}
|
96
|
+
}
|
97
|
+
|
98
|
+
// Store the annotations in browser storage if it's available
|
99
|
+
if (RG.Registry.Get('annotate.actions') && RG.Registry.Get('annotate.actions').length > 0 && win.localStorage) {
|
100
|
+
|
101
|
+
var id = '__rgraph_annotations_' + e.target.id + '__';
|
102
|
+
var annotations = win.localStorage[id] ? win.localStorage[id] + '|' : '';
|
103
|
+
annotations += RG.Registry.Get('annotate.actions');
|
104
|
+
|
105
|
+
// Store the annotations information in HTML5 browser storage here
|
106
|
+
win.localStorage[id] = annotations;
|
107
|
+
}
|
108
|
+
|
109
|
+
// Clear the recorded annotations
|
110
|
+
RG.Registry.Set('annotate.actions', []);
|
111
|
+
|
112
|
+
// Fire the annotate event
|
113
|
+
RG.FireCustomEvent(obj, 'onannotateend');
|
114
|
+
};
|
115
|
+
|
116
|
+
|
117
|
+
|
118
|
+
|
119
|
+
/**
|
120
|
+
* The canvas onmousemove function
|
121
|
+
*/
|
122
|
+
RGraph.annotating_canvas_onmousemove = function (e)
|
123
|
+
{
|
124
|
+
var obj = e.target.__object__;
|
125
|
+
var prop = obj.properties;
|
126
|
+
var mouseXY = RG.getMouseXY(e);
|
127
|
+
var mouseX = mouseXY[0];
|
128
|
+
var mouseY = mouseXY[1];
|
129
|
+
var lastXY = RG.Registry.Get('annotate.last.coordinates');
|
130
|
+
|
131
|
+
if (obj.Get('chart.mousedown')) {
|
132
|
+
|
133
|
+
// Allow for the Bar chart 3D
|
134
|
+
if (obj.type === 'bar' && prop['chart.variant'] === '3d') {
|
135
|
+
var adjustment = prop['chart.variant.threed.angle'] * mouseXY[0];
|
136
|
+
mouseY -= adjustment;
|
137
|
+
}
|
138
|
+
|
139
|
+
obj.context.beginPath();
|
140
|
+
|
141
|
+
if (!lastXY) {
|
142
|
+
obj.context.moveTo(mouseX, mouseY)
|
143
|
+
} else {
|
144
|
+
obj.context.strokeStyle = obj.properties['chart.annotate.color'];
|
145
|
+
obj.context.moveTo(lastXY[0], lastXY[1]);
|
146
|
+
obj.context.lineTo(mouseX, mouseY);
|
147
|
+
}
|
148
|
+
|
149
|
+
RG.Registry.Set('annotate.actions', RG.Registry.Get('annotate.actions') + '|' + mouseX + ',' + mouseY);
|
150
|
+
RG.Registry.Set('annotate.last.coordinates', [mouseX,mouseY]);
|
151
|
+
|
152
|
+
RG.FireCustomEvent(obj, 'onannotate');
|
153
|
+
obj.context.stroke();
|
154
|
+
}
|
155
|
+
};
|
156
|
+
|
157
|
+
|
158
|
+
|
159
|
+
|
160
|
+
/**
|
161
|
+
* Shows the mini palette used for annotations
|
162
|
+
*
|
163
|
+
* @param object e The event object
|
164
|
+
*/
|
165
|
+
RG.ShowPalette =
|
166
|
+
RG.Showpalette = function (e)
|
167
|
+
{
|
168
|
+
var isSafari = navigator.userAgent.indexOf('Safari') ? true : false;
|
169
|
+
|
170
|
+
e = RG.FixEventObject(e);
|
171
|
+
|
172
|
+
var canvas = e.target.parentNode.__canvas__,
|
173
|
+
context = canvas.getContext('2d'),
|
174
|
+
obj = canvas.__object__,
|
175
|
+
div = document.createElement('DIV'),
|
176
|
+
coords = RG.getMouseXY(e)
|
177
|
+
|
178
|
+
div.__object__ = obj; // The graph object
|
179
|
+
div.className = 'RGraph_palette';
|
180
|
+
div.style.position = 'absolute';
|
181
|
+
div.style.backgroundColor = 'white';
|
182
|
+
div.style.border = '1px solid black';
|
183
|
+
div.style.left = 0;
|
184
|
+
div.style.top = 0;
|
185
|
+
div.style.padding = '3px';
|
186
|
+
div.style.paddingLeft = '5px';
|
187
|
+
div.style.opacity = 0;
|
188
|
+
div.style.boxShadow = 'rgba(96,96,96,0.5) 3px 3px 3px';
|
189
|
+
div.style.WebkitBoxShadow = 'rgba(96,96,96,0.5) 3px 3px 3px';
|
190
|
+
div.style.MozBoxShadow = 'rgba(96,96,96,0.5) 3px 3px 3px';
|
191
|
+
|
192
|
+
|
193
|
+
// MUST use named colors that are capitalised
|
194
|
+
var colors = [
|
195
|
+
'Black',
|
196
|
+
'Red',
|
197
|
+
'Yellow',
|
198
|
+
'Green',
|
199
|
+
'Orange',
|
200
|
+
'White',
|
201
|
+
'Magenta',
|
202
|
+
'Pink'
|
203
|
+
];
|
204
|
+
|
205
|
+
// Add the colors to the palette
|
206
|
+
for (var i=0,len=colors.length; i<len; i+=1) {
|
207
|
+
|
208
|
+
var div2 = doc.createElement('DIV');
|
209
|
+
div2.cssClass = 'RGraph_palette_color';
|
210
|
+
div2.style.fontSize = '12pt';
|
211
|
+
div2.style.cursor = 'pointer';
|
212
|
+
div2.style.padding = '1px';
|
213
|
+
div2.style.paddingRight = '10px';
|
214
|
+
div2.style.textAlign = 'left';
|
215
|
+
|
216
|
+
var span = document.createElement('SPAN');
|
217
|
+
span.style.display = 'inline-block';
|
218
|
+
span.style.marginRight = '9px';
|
219
|
+
span.style.width = '17px';
|
220
|
+
span.style.height = '17px';
|
221
|
+
span.style.top = '2px';
|
222
|
+
span.style.position = 'relative';
|
223
|
+
span.style.backgroundColor = colors[i];
|
224
|
+
div2.appendChild(span);
|
225
|
+
|
226
|
+
div2.innerHTML += colors[i];
|
227
|
+
|
228
|
+
|
229
|
+
div2.onmouseover = function ()
|
230
|
+
{
|
231
|
+
this.style.backgroundColor = '#eee';
|
232
|
+
}
|
233
|
+
|
234
|
+
div2.onmouseout = function ()
|
235
|
+
{
|
236
|
+
this.style.backgroundColor = '';
|
237
|
+
}
|
238
|
+
|
239
|
+
div2.onclick = function (e)
|
240
|
+
{
|
241
|
+
var color = this.childNodes[0].style.backgroundColor;
|
242
|
+
|
243
|
+
obj.Set('chart.annotate.color', color);
|
244
|
+
}
|
245
|
+
div.appendChild(div2);
|
246
|
+
}
|
247
|
+
|
248
|
+
|
249
|
+
doc.body.appendChild(div);
|
250
|
+
|
251
|
+
/**
|
252
|
+
* Now the div has been added to the document, move it up and left
|
253
|
+
*/
|
254
|
+
div.style.left = e.pageX + 'px';
|
255
|
+
div.style.top = e.pageY + 'px';
|
256
|
+
|
257
|
+
/**
|
258
|
+
* Chang the position if the cursor is near the right edge of the browser window
|
259
|
+
*/
|
260
|
+
if ((e.pageX + (div.offsetWidth + 5) ) > document.body.offsetWidth) {
|
261
|
+
div.style.left = (e.pageX - div.offsetWidth) + 'px';
|
262
|
+
}
|
263
|
+
|
264
|
+
/**
|
265
|
+
* Store the palette div in the registry
|
266
|
+
*/
|
267
|
+
RGraph.Registry.Set('chart.palette', div);
|
268
|
+
|
269
|
+
setTimeout(function () {div.style.opacity = 0.2;}, 50);
|
270
|
+
setTimeout(function () {div.style.opacity = 0.4;}, 100);
|
271
|
+
setTimeout(function () {div.style.opacity = 0.6;}, 150);
|
272
|
+
setTimeout(function () {div.style.opacity = 0.8;}, 200);
|
273
|
+
setTimeout(function () {div.style.opacity = 1;}, 250);
|
274
|
+
|
275
|
+
RGraph.hideContext();
|
276
|
+
|
277
|
+
window.onclick = function ()
|
278
|
+
{
|
279
|
+
RG.hidePalette();
|
280
|
+
}
|
281
|
+
|
282
|
+
// Should this be here? Yes. This function is being used as an event handler.
|
283
|
+
e.stopPropagation();
|
284
|
+
return false;
|
285
|
+
};
|
286
|
+
|
287
|
+
|
288
|
+
|
289
|
+
|
290
|
+
/**
|
291
|
+
* Clears any annotation data from global storage
|
292
|
+
*
|
293
|
+
* @param object canvas The canvas tag object
|
294
|
+
*/
|
295
|
+
RG.clearAnnotations =
|
296
|
+
RG.ClearAnnotations = function (canvas)
|
297
|
+
{
|
298
|
+
/**
|
299
|
+
* For BC the argument can also be the ID of the canvas
|
300
|
+
*/
|
301
|
+
if (typeof canvas === 'string') {
|
302
|
+
var id = canvas;
|
303
|
+
canvas = doc.getElementById(id);
|
304
|
+
} else {
|
305
|
+
var id = canvas.id
|
306
|
+
}
|
307
|
+
|
308
|
+
var obj = canvas.__object__;
|
309
|
+
|
310
|
+
if (win.localStorage && win.localStorage['__rgraph_annotations_' + id + '__'] && win.localStorage['__rgraph_annotations_' + id + '__'].length) {
|
311
|
+
win.localStorage['__rgraph_annotations_' + id + '__'] = [];
|
312
|
+
|
313
|
+
RGraph.FireCustomEvent(obj, 'onannotateclear');
|
314
|
+
}
|
315
|
+
};
|
316
|
+
|
317
|
+
|
318
|
+
|
319
|
+
|
320
|
+
/**
|
321
|
+
* Replays stored annotations
|
322
|
+
*
|
323
|
+
* @param object obj The graph object
|
324
|
+
*/
|
325
|
+
RG.replayAnnotations =
|
326
|
+
RG.ReplayAnnotations = function (obj)
|
327
|
+
{
|
328
|
+
// Check for support
|
329
|
+
if (!win.localStorage) {
|
330
|
+
return;
|
331
|
+
}
|
332
|
+
|
333
|
+
var context = obj.context;
|
334
|
+
var annotations = win.localStorage['__rgraph_annotations_' + obj.id + '__'];
|
335
|
+
var i, len, move, coords;
|
336
|
+
|
337
|
+
context.beginPath();
|
338
|
+
context.lineWidth = obj.Get('annotate.linewidth');
|
339
|
+
|
340
|
+
if (annotations && annotations.length) {
|
341
|
+
annotations = annotations.split('|');
|
342
|
+
} else {
|
343
|
+
return;
|
344
|
+
}
|
345
|
+
|
346
|
+
|
347
|
+
for (i=0,len=annotations.length; i<len; ++i) {
|
348
|
+
|
349
|
+
// If the element of the array is a color - finish the path,
|
350
|
+
// stroke it and start a new one
|
351
|
+
if (annotations[i].match(/[a-z]+/)) {
|
352
|
+
context.stroke();
|
353
|
+
context.beginPath();
|
354
|
+
|
355
|
+
context.strokeStyle = annotations[i];
|
356
|
+
move = true;
|
357
|
+
continue;
|
358
|
+
}
|
359
|
+
|
360
|
+
coords = annotations[i].split(',');
|
361
|
+
coords[0] = Number(coords[0]);
|
362
|
+
coords[1] = Number(coords[1]);
|
363
|
+
|
364
|
+
if (move) {
|
365
|
+
context.moveTo(coords[0], coords[1]);
|
366
|
+
move = false;
|
367
|
+
} else {
|
368
|
+
context.lineTo(coords[0], coords[1]);
|
369
|
+
}
|
370
|
+
}
|
371
|
+
|
372
|
+
context.stroke();
|
373
|
+
};
|
374
|
+
|
375
|
+
|
376
|
+
|
377
|
+
|
378
|
+
window.addEventListener('load', function (e)
|
379
|
+
{
|
380
|
+
// This delay is necessary to allow the window.onload event listener to run
|
381
|
+
setTimeout(function ()
|
382
|
+
{
|
383
|
+
var tags = doc.getElementsByTagName('canvas');
|
384
|
+
for (var i=0; i<tags.length; ++i) {
|
385
|
+
if (tags[i].__object__ && tags[i].__object__.isRGraph && tags[i].__object__.Get('chart.annotatable')) {
|
386
|
+
RG.replayAnnotations(tags[i].__object__);
|
387
|
+
}
|
388
|
+
}
|
389
|
+
}, 100); // This delay is sufficient to wait before replaying the annotations
|
390
|
+
}, false);
|
391
|
+
|
392
|
+
|
393
|
+
|
394
|
+
|
395
|
+
// End module pattern
|
396
|
+
})(window, document);
|
@@ -1,31 +1,596 @@
|
|
1
|
+
// version: 2017-01-02
|
2
|
+
/**
|
3
|
+
* o--------------------------------------------------------------------------------o
|
4
|
+
* | This file is part of the RGraph package - you can learn more at: |
|
5
|
+
* | |
|
6
|
+
* | http://www.rgraph.net |
|
7
|
+
* | |
|
8
|
+
* | RGraph is licensed under the Open Source MIT license. That means that it's |
|
9
|
+
* | totally free to use! |
|
10
|
+
* o--------------------------------------------------------------------------------o
|
11
|
+
*/
|
1
12
|
|
2
|
-
RGraph=window.RGraph||{isRGraph:true};
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
var
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
13
|
+
RGraph = window.RGraph || {isRGraph: true};
|
14
|
+
|
15
|
+
// Module pattern
|
16
|
+
(function (win, doc, undefined)
|
17
|
+
{
|
18
|
+
var RG = RGraph,
|
19
|
+
ua = navigator.userAgent,
|
20
|
+
ma = Math;
|
21
|
+
|
22
|
+
|
23
|
+
|
24
|
+
/**
|
25
|
+
* This gunction shows a context menu containing the parameters
|
26
|
+
* provided to it
|
27
|
+
*
|
28
|
+
* @param object canvas The canvas object
|
29
|
+
* @param array menuitems The context menu menuitems
|
30
|
+
* @param object e The event object
|
31
|
+
*/
|
32
|
+
RG.contextmenu =
|
33
|
+
RG.Contextmenu = function (obj, menuitems, e)
|
34
|
+
{
|
35
|
+
var canvas = obj.canvas;
|
36
|
+
|
37
|
+
e = RG.FixEventObject(e);
|
38
|
+
|
39
|
+
/**
|
40
|
+
* Fire the custom RGraph event onbeforecontextmenu
|
41
|
+
*/
|
42
|
+
RG.FireCustomEvent(obj, 'onbeforecontextmenu');
|
43
|
+
|
44
|
+
/**
|
45
|
+
* Hide any existing menu
|
46
|
+
*/
|
47
|
+
if (RG.Registry.Get('chart.contextmenu')) {
|
48
|
+
RG.HideContext();
|
49
|
+
}
|
50
|
+
|
51
|
+
// Hide any zoomed canvas
|
52
|
+
RG.HideZoomedCanvas();
|
53
|
+
|
54
|
+
/**
|
55
|
+
* Hide the palette if necessary
|
56
|
+
*/
|
57
|
+
RG.HidePalette();
|
58
|
+
|
59
|
+
/**
|
60
|
+
* This is here to ensure annotating is OFF
|
61
|
+
*/
|
62
|
+
obj.Set('chart.mousedown', false);
|
63
|
+
|
64
|
+
var x = e.pageX;
|
65
|
+
var y = e.pageY;
|
66
|
+
var div = document.createElement('div');
|
67
|
+
var bg = document.createElement('div');
|
68
|
+
|
69
|
+
div.className = 'RGraph_contextmenu';
|
70
|
+
div.__canvas__ = canvas; /* Store a reference to the canvas on the contextmenu object */
|
71
|
+
div.style.position = 'absolute';
|
72
|
+
div.style.left = 0;
|
73
|
+
div.style.top = 0;
|
74
|
+
div.style.border = '1px solid #666';
|
75
|
+
div.style.backgroundColor = 'white';
|
76
|
+
div.style.boxShadow = '1px 1px 3px #ddd';
|
77
|
+
div.style.MozBoxShadow = '1px 1px 3px #ddd';
|
78
|
+
div.style.WebkitBoxShadow = '1px 1px 3px #ddd';
|
79
|
+
div.style.opacity = 0;
|
80
|
+
|
81
|
+
bg.className = 'RGraph_contextmenu_background';
|
82
|
+
bg.style.position = 'absolute';
|
83
|
+
bg.style.backgroundColor = '#ccc';
|
84
|
+
bg.style.borderRight = '1px solid #aaa';
|
85
|
+
bg.style.top = 0;
|
86
|
+
bg.style.left = 0;
|
87
|
+
bg.style.width = '18px';
|
88
|
+
bg.style.height = '100%';
|
89
|
+
bg.style.opacity = 0;
|
90
|
+
|
91
|
+
|
92
|
+
div = document.body.appendChild(div);
|
93
|
+
bg = div.appendChild(bg);
|
94
|
+
|
95
|
+
|
96
|
+
/**
|
97
|
+
* Now add the context menu items
|
98
|
+
*/
|
99
|
+
for (i=0; i<menuitems.length; ++i) {
|
100
|
+
|
101
|
+
var menuitem = document.createElement('div');
|
102
|
+
|
103
|
+
menuitem.__object__ = obj;
|
104
|
+
menuitem.__canvas__ = canvas;
|
105
|
+
menuitem.__contextmenu__ = div;
|
106
|
+
menuitem.className = 'RGraph_contextmenu_item';
|
107
|
+
|
108
|
+
if (menuitems[i]) {
|
109
|
+
menuitem.style.padding = '2px 5px 2px 23px';
|
110
|
+
menuitem.style.fontFamily = 'Arial';
|
111
|
+
menuitem.style.fontSize = '10pt';
|
112
|
+
menuitem.style.textAlign = 'left';
|
113
|
+
menuitem.style.fontWeight = 'normal';
|
114
|
+
menuitem.innerHTML = menuitems[i][0];
|
115
|
+
|
116
|
+
if (RG.is_array(menuitems[i][1])) {
|
117
|
+
menuitem.style.backgroundImage = 'url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAQUlEQVQImY3NoQ2AMABE0ZewABMyGQ6mqWODzlAclBSFO8HZl8uf0FFxCHtwYkt4Y6ChYE44cGH9/fyae2p2LAleW9oVTQuVf6gAAAAASUVORK5CYII=)';
|
118
|
+
menuitem.style.backgroundRepeat = 'no-repeat';
|
119
|
+
menuitem.style.backgroundPosition = '97% center';
|
120
|
+
}
|
121
|
+
|
122
|
+
// Add the mouseover event
|
123
|
+
if (menuitems[i][1]) {
|
124
|
+
if (menuitem.addEventListener) {
|
125
|
+
menuitem.addEventListener("mouseover", function (e) {RG.HideContextSubmenu(); e.target.style.backgroundColor = 'rgba(0,0,0,0.2)'; e.target.style.cursor = 'pointer';}, false);
|
126
|
+
menuitem.addEventListener("mouseout", function (e) {e.target.style.backgroundColor = 'inherit'; e.target.style.cursor = 'default';}, false);
|
127
|
+
} else {
|
128
|
+
menuitem.attachEvent("onmouseover", function () {RG.HideContextSubmenu();event.srcElement.style.backgroundColor = '#eee';event.srcElement.style.cursor = 'pointer';}
|
129
|
+
, false);
|
130
|
+
menuitem.attachEvent("onmouseout", function () {event.srcElement.style.backgroundColor = 'inherit'; event.srcElement.style.cursor = 'default';}, false);
|
131
|
+
}
|
132
|
+
} else {
|
133
|
+
if (menuitem.addEventListener) {
|
134
|
+
menuitem.addEventListener("mouseover", function (e) {e.target.style.cursor = 'default';}, false);
|
135
|
+
menuitem.addEventListener("mouseout", function (e) {e.target.style.cursor = 'default';}, false);
|
136
|
+
} else {
|
137
|
+
menuitem.attachEvent("onmouseover", function () {event.srcElement.style.cursor = 'default'}, false);
|
138
|
+
menuitem.attachEvent("onmouseout", function () {event.srcElement.style.cursor = 'default';}, false);
|
139
|
+
}
|
140
|
+
}
|
141
|
+
|
142
|
+
} else {
|
143
|
+
menuitem.style.borderBottom = '1px solid #ddd';
|
144
|
+
menuitem.style.marginLeft = '25px';
|
145
|
+
}
|
146
|
+
|
147
|
+
div.appendChild(menuitem);
|
148
|
+
|
149
|
+
/**
|
150
|
+
* Install the event handler that calls the menuitem
|
151
|
+
*/
|
152
|
+
if (menuitems[i] && menuitems[i][1] && typeof(menuitems[i][1]) == 'function') {
|
153
|
+
|
154
|
+
menuitem.addEventListener('click', menuitems[i][1], false);
|
155
|
+
|
156
|
+
// Submenu
|
157
|
+
} else if (menuitems[i] && menuitems[i][1] && RG.is_array(menuitems[i][1])) {
|
158
|
+
(function ()
|
159
|
+
{
|
160
|
+
var tmp = menuitems[i][1]; // This is here because of "references vs primitives" and how they're passed around in Javascript
|
161
|
+
|
162
|
+
// TODO This may need attention
|
163
|
+
menuitem.addEventListener('mouseover', function (e) {RG.Contextmenu_submenu(obj, tmp, e.target);}, false);
|
164
|
+
})();
|
165
|
+
}
|
166
|
+
}
|
167
|
+
|
168
|
+
/**
|
169
|
+
* Now all the menu items have been added, set the shadow width
|
170
|
+
* Shadow now handled by CSS3
|
171
|
+
*/
|
172
|
+
div.style.width = (div.offsetWidth + 10) + 'px';
|
173
|
+
div.style.height = (div.offsetHeight - 2) + 'px';
|
174
|
+
|
175
|
+
// Show the menu to the left or the right (normal) of the cursor?
|
176
|
+
if (x + div.offsetWidth > document.body.offsetWidth) {
|
177
|
+
x -= div.offsetWidth;
|
178
|
+
}
|
179
|
+
|
180
|
+
// Reposition the menu (now we have the real offsetWidth)
|
181
|
+
div.style.left = x + 'px';
|
182
|
+
div.style.top = y + 'px';
|
183
|
+
|
184
|
+
/**
|
185
|
+
* Do a little fade in effect
|
186
|
+
*/
|
187
|
+
setTimeout("if (obj = RGraph.Registry.Get('chart.contextmenu')) obj.style.opacity = 0.2", 50);
|
188
|
+
setTimeout("if (obj = RGraph.Registry.Get('chart.contextmenu')) obj.style.opacity = 0.4", 100);
|
189
|
+
setTimeout("if (obj = RGraph.Registry.Get('chart.contextmenu')) obj.style.opacity = 0.6", 150);
|
190
|
+
setTimeout("if (obj = RGraph.Registry.Get('chart.contextmenu')) obj.style.opacity = 0.8", 200);
|
191
|
+
setTimeout("if (obj = RGraph.Registry.Get('chart.contextmenu')) obj.style.opacity = 1", 250);
|
192
|
+
|
193
|
+
// The fade in effect on the left gray bar
|
194
|
+
setTimeout("if (obj = RGraph.Registry.Get('chart.contextmenu.bg')) obj.style.opacity = 0.2", 50);
|
195
|
+
setTimeout("if (obj = RGraph.Registry.Get('chart.contextmenu.bg')) obj.style.opacity = 0.4", 100);
|
196
|
+
setTimeout("if (obj = RGraph.Registry.Get('chart.contextmenu.bg')) obj.style.opacity = 0.6", 150);
|
197
|
+
setTimeout("if (obj = RGraph.Registry.Get('chart.contextmenu.bg')) obj.style.opacity = 0.8", 200);
|
198
|
+
setTimeout("if (obj = RGraph.Registry.Get('chart.contextmenu.bg')) obj.style.opacity = 1", 250);
|
199
|
+
|
200
|
+
// Store the context menu in the registry
|
201
|
+
RG.Registry.Set('chart.contextmenu', div);
|
202
|
+
RG.Registry.Set('chart.contextmenu.bg', bg);
|
203
|
+
RG.Registry.Get('chart.contextmenu').oncontextmenu = function () {return false;};
|
204
|
+
RG.Registry.Get('chart.contextmenu.bg').oncontextmenu = function () {return false;};
|
205
|
+
|
206
|
+
/**
|
207
|
+
* Install the event handlers that hide the context menu
|
208
|
+
*/
|
209
|
+
canvas.addEventListener('click', function () {RG.HideContext();}, false);
|
210
|
+
|
211
|
+
window.addEventListener('click', function ()
|
212
|
+
{
|
213
|
+
RG.HideContext();
|
214
|
+
}, false);
|
215
|
+
|
216
|
+
window.addEventListener('resize', function ()
|
217
|
+
{
|
218
|
+
RG.HideContext();
|
219
|
+
}, false);
|
220
|
+
|
221
|
+
|
222
|
+
/**
|
223
|
+
* Add the __shape__ object to the context menu
|
224
|
+
*/
|
225
|
+
|
226
|
+
/**
|
227
|
+
* Set the shape coords from the .getShape() method
|
228
|
+
*/
|
229
|
+
if (typeof(obj.getShape) == 'function') {
|
230
|
+
RG.Registry.Get('chart.contextmenu').__shape__ = obj.getShape(e);
|
231
|
+
}
|
232
|
+
|
233
|
+
|
234
|
+
e.stopPropagation();
|
235
|
+
|
236
|
+
/**
|
237
|
+
* Fire the (RGraph) oncontextmenu event
|
238
|
+
*/
|
239
|
+
RG.FireCustomEvent(obj, 'oncontextmenu');
|
240
|
+
|
241
|
+
return false;
|
242
|
+
};
|
243
|
+
|
244
|
+
|
245
|
+
|
246
|
+
|
247
|
+
/**
|
248
|
+
* Hides the context menu if it's currently visible
|
249
|
+
*/
|
250
|
+
RG.hideContext =
|
251
|
+
RG.HideContext = function ()
|
252
|
+
{
|
253
|
+
var cm = RG.Registry.Get('chart.contextmenu');
|
254
|
+
var cmbg = RG.Registry.Get('chart.contextmenu.bg');
|
255
|
+
|
256
|
+
//Hide any submenu currently being displayed
|
257
|
+
RG.HideContextSubmenu();
|
258
|
+
|
259
|
+
if (cm) {
|
260
|
+
cm.parentNode.removeChild(cm);
|
261
|
+
cmbg.parentNode.removeChild(cmbg);
|
262
|
+
|
263
|
+
cm.style.visibility = 'hidden';
|
264
|
+
cm.style.display = 'none';
|
265
|
+
RG.Registry.Set('chart.contextmenu', null);
|
266
|
+
|
267
|
+
cmbg.style.visibility = 'hidden';
|
268
|
+
cmbg.style.display = 'none';
|
269
|
+
RG.Registry.Set('chart.contextmenu.bg', null);
|
270
|
+
}
|
271
|
+
};
|
272
|
+
|
273
|
+
|
274
|
+
|
275
|
+
|
276
|
+
/**
|
277
|
+
* Hides the context menus SUBMENU if it's currently visible
|
278
|
+
*/
|
279
|
+
RG.hideContextSubmenu =
|
280
|
+
RG.HideContextSubmenu = function ()
|
281
|
+
{
|
282
|
+
var sub = RG.Registry.Get('chart.contextmenu.submenu');
|
283
|
+
|
284
|
+
if (sub) {
|
285
|
+
sub.style.visibility = 'none';
|
286
|
+
sub.style.display = 'none';
|
287
|
+
RG.Registry.Set('chart.contextmenu.submenu', null);
|
288
|
+
}
|
289
|
+
};
|
290
|
+
|
291
|
+
|
292
|
+
|
293
|
+
|
294
|
+
/**
|
295
|
+
* Shows the context menu after making a few checks - not opera (doesn't support oncontextmenu,
|
296
|
+
* not safari (tempermentality), not chrome (hmmm)
|
297
|
+
*/
|
298
|
+
RG.showContext =
|
299
|
+
RG.ShowContext = function (obj)
|
300
|
+
{
|
301
|
+
RG.HidePalette();
|
302
|
+
|
303
|
+
if (obj.Get('chart.contextmenu') && obj.Get('chart.contextmenu').length) {
|
304
|
+
|
305
|
+
var isOpera = navigator.userAgent.indexOf('Opera') >= 0;
|
306
|
+
var isSafari = navigator.userAgent.indexOf('Safari') >= 0;
|
307
|
+
var isChrome = navigator.userAgent.indexOf('Chrome') >= 0;
|
308
|
+
var isMacFirefox = navigator.userAgent.indexOf('Firefox') > 0 && navigator.userAgent.indexOf('Mac') > 0;
|
309
|
+
var isIE9 = navigator.userAgent.indexOf('MSIE 9') >= 0;
|
310
|
+
|
311
|
+
if (((!isOpera && !isSafari) || isChrome) && !isMacFirefox) {
|
312
|
+
|
313
|
+
obj.canvas.oncontextmenu = function (e)
|
314
|
+
{
|
315
|
+
e = RG.FixEventObject(e);
|
316
|
+
|
317
|
+
if (e.ctrlKey) return true;
|
318
|
+
|
319
|
+
RG.Contextmenu(obj, obj.Get('chart.contextmenu'), e);
|
320
|
+
|
321
|
+
return false;
|
322
|
+
}
|
323
|
+
|
324
|
+
// Accomodate Opera and Safari - use double click event
|
325
|
+
} else {
|
326
|
+
|
327
|
+
obj.canvas.addEventListener('dblclick', function (e)
|
328
|
+
{
|
329
|
+
if (e.ctrlKey) return true;
|
330
|
+
|
331
|
+
if (!RG.Registry.Get('chart.contextmenu')) {
|
332
|
+
RG.Contextmenu(obj, obj.Get('chart.contextmenu'), e);
|
333
|
+
}
|
334
|
+
}, false);
|
335
|
+
}
|
336
|
+
}
|
337
|
+
};
|
338
|
+
|
339
|
+
|
340
|
+
|
341
|
+
|
342
|
+
/**
|
343
|
+
* This draws a submenu should it be necessary
|
344
|
+
*
|
345
|
+
* @param object obj The graph object
|
346
|
+
* @param object menu The context menu
|
347
|
+
*/
|
348
|
+
RG.contextmenu_submenu =
|
349
|
+
RG.Contextmenu_submenu = function (obj, menuitems, parentMenuItem)
|
350
|
+
{
|
351
|
+
RG.HideContextSubmenu();
|
352
|
+
|
353
|
+
var canvas = obj.canvas;
|
354
|
+
var context = obj.context;
|
355
|
+
var menu = parentMenuItem.parentNode;
|
356
|
+
|
357
|
+
var subMenu = document.createElement('DIV');
|
358
|
+
subMenu.style.position = 'absolute';
|
359
|
+
subMenu.style.width = '100px';
|
360
|
+
subMenu.style.top = menu.offsetTop + parentMenuItem.offsetTop + 'px';
|
361
|
+
subMenu.style.left = (menu.offsetLeft + menu.offsetWidth - (RG.ISOLD ? 9 : 0)) + 'px';
|
362
|
+
subMenu.style.backgroundColor = 'white';
|
363
|
+
subMenu.style.border = '1px solid black';
|
364
|
+
subMenu.className = 'RGraph_contextmenu';
|
365
|
+
subMenu.__contextmenu__ = menu;
|
366
|
+
subMenu.style.boxShadow = '3px 3px 3px rgba(96,96,96,0.5)';
|
367
|
+
subMenu.style.MozBoxShadow = '3px 3px 3px rgba(96,96,96,0.5)';
|
368
|
+
subMenu.style.WebkitBoxShadow = '3px 3px 3px rgba(96,96,96,0.5)';
|
369
|
+
subMenu.style.filter = 'progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=135)';
|
370
|
+
document.body.appendChild(subMenu);
|
371
|
+
|
372
|
+
for (var i=0; i<menuitems.length; ++i) {
|
373
|
+
|
374
|
+
var menuitem = document.createElement('DIV');
|
375
|
+
|
376
|
+
menuitem.__canvas__ = canvas;
|
377
|
+
menuitem.__contextmenu__ = menu;
|
378
|
+
menuitem.className = 'RGraph_contextmenu_item';
|
379
|
+
|
380
|
+
if (menuitems[i]) {
|
381
|
+
menuitem.style.padding = '2px 5px 2px 23px';
|
382
|
+
menuitem.style.fontFamily = 'Arial';
|
383
|
+
menuitem.style.fontSize = '10pt';
|
384
|
+
menuitem.style.fontWeight = 'normal';
|
385
|
+
menuitem.style.textAlign = 'left';
|
386
|
+
menuitem.innerHTML = menuitems[i][0];
|
387
|
+
|
388
|
+
if (menuitems[i][1]) {
|
389
|
+
if (menuitem.addEventListener) {
|
390
|
+
menuitem.addEventListener("mouseover", function (e) {e.target.style.backgroundColor = 'rgba(0,0,0,0.2)'; e.target.style.cursor = 'pointer';}, false);
|
391
|
+
menuitem.addEventListener("mouseout", function (e) {e.target.style.backgroundColor = 'inherit'; e.target.style.cursor = 'default';}, false);
|
392
|
+
} else {
|
393
|
+
menuitem.attachEvent("onmouseover", function () {event.srcElement.style.backgroundColor = 'rgba(0,0,0,0.2)'; event.srcElement.style.cursor = 'pointer'}, false);
|
394
|
+
menuitem.attachEvent("onmouseout", function () {event.srcElement.style.backgroundColor = 'inherit'; event.srcElement.style.cursor = 'default';}, false);
|
395
|
+
}
|
396
|
+
} else {
|
397
|
+
if (menuitem.addEventListener) {
|
398
|
+
menuitem.addEventListener("mouseover", function (e) {e.target.style.cursor = 'default';}, false);
|
399
|
+
menuitem.addEventListener("mouseout", function (e) {e.target.style.cursor = 'default';}, false);
|
400
|
+
} else {
|
401
|
+
menuitem.attachEvent("onmouseover", function () {event.srcElement.style.cursor = 'default'}, false);
|
402
|
+
menuitem.attachEvent("onmouseout", function () {event.srcElement.style.cursor = 'default';}, false);
|
403
|
+
}
|
404
|
+
}
|
405
|
+
} else {
|
406
|
+
menuitem.style.borderBottom = '1px solid #ddd';
|
407
|
+
menuitem.style.marginLeft = '25px';
|
408
|
+
}
|
409
|
+
|
410
|
+
subMenu.appendChild(menuitem);
|
411
|
+
|
412
|
+
if (menuitems[i] && menuitems[i][1]) {
|
413
|
+
if (document.all) {
|
414
|
+
menuitem.attachEvent('onclick', menuitems[i][1]);
|
415
|
+
} else {
|
416
|
+
menuitem.addEventListener('click', menuitems[i][1], false);
|
417
|
+
}
|
418
|
+
}
|
419
|
+
}
|
420
|
+
|
421
|
+
|
422
|
+
var bg = document.createElement('DIV');
|
423
|
+
bg.className = 'RGraph_contextmenu_background';
|
424
|
+
bg.style.position = 'absolute';
|
425
|
+
bg.style.backgroundColor = '#ccc';
|
426
|
+
bg.style.borderRight = '1px solid #aaa';
|
427
|
+
bg.style.top = 0;
|
428
|
+
bg.style.left = 0;
|
429
|
+
bg.style.width = '18px';
|
430
|
+
bg.style.height = '100%';
|
431
|
+
|
432
|
+
bg = subMenu.appendChild(bg);
|
433
|
+
|
434
|
+
RG.Registry.Set('chart.contextmenu.submenu', subMenu);
|
435
|
+
};
|
436
|
+
|
437
|
+
|
438
|
+
|
439
|
+
|
440
|
+
/**
|
441
|
+
* A function designed to be used in conjunction with thed context menu
|
442
|
+
* to allow people to get image versions of canvases.
|
443
|
+
*
|
444
|
+
* @param canvas Optionally you can pass in the canvas, which will be used
|
445
|
+
*/
|
446
|
+
RG.showPNG = function ()
|
447
|
+
{
|
448
|
+
if (RG.ISIE8) {
|
449
|
+
alert('[RGRAPH PNG] Sorry, showing a PNG is not supported on MSIE8.');
|
450
|
+
return;
|
451
|
+
}
|
452
|
+
|
453
|
+
if (arguments[0] && arguments[0].id) {
|
454
|
+
var canvas = arguments[0];
|
455
|
+
var event = arguments[1];
|
456
|
+
|
457
|
+
} else if (RG.Registry.Get('chart.contextmenu')) {
|
458
|
+
var canvas = RG.Registry.Get('chart.contextmenu').__canvas__;
|
459
|
+
|
460
|
+
} else {
|
461
|
+
alert('[RGRAPH SHOWPNG] Could not find canvas!');
|
462
|
+
}
|
463
|
+
|
464
|
+
var obj = canvas.__object__;
|
465
|
+
|
466
|
+
/**
|
467
|
+
* Create the gray background DIV to cover the page
|
468
|
+
*/
|
469
|
+
var bg = document.createElement('DIV');
|
470
|
+
bg.id = '__rgraph_image_bg__';
|
471
|
+
bg.style.position = 'fixed';
|
472
|
+
bg.style.top = '-10px';
|
473
|
+
bg.style.left = '-10px';
|
474
|
+
bg.style.width = '5000px';
|
475
|
+
bg.style.height = '5000px';
|
476
|
+
bg.style.backgroundColor = 'rgb(204,204,204)';
|
477
|
+
bg.style.opacity = 0;
|
478
|
+
document.body.appendChild(bg);
|
479
|
+
|
480
|
+
|
481
|
+
/**
|
482
|
+
* Create the div that the graph sits in
|
483
|
+
*/
|
484
|
+
var div = document.createElement('DIV');
|
485
|
+
div.style.backgroundColor = 'white';
|
486
|
+
div.style.opacity = 0;
|
487
|
+
div.style.border = '1px solid black';
|
488
|
+
div.style.position = 'fixed';
|
489
|
+
div.style.top = '20%';
|
490
|
+
div.style.width = canvas.width + 'px';
|
491
|
+
div.style.height = canvas.height + 35 + 'px';
|
492
|
+
div.style.left = (document.body.clientWidth / 2) - (canvas.width / 2) + 'px';
|
493
|
+
div.style.padding = '5px';
|
494
|
+
|
495
|
+
div.style.borderRadius = '10px';
|
496
|
+
div.style.MozBorderRadius = '10px';
|
497
|
+
div.style.WebkitBorderRadius = '10px';
|
498
|
+
|
499
|
+
div.style.boxShadow = '0 0 15px rgba(96,96,96,0.5)';
|
500
|
+
div.style.MozBoxShadow = '0 0 15px rgba(96,96,96,0.5)';
|
501
|
+
div.style.WebkitBoxShadow = 'rgba(96,96,96,0.5) 0 0 15px';
|
502
|
+
|
503
|
+
div.__canvas__ = canvas;
|
504
|
+
div.__object__ = obj;
|
505
|
+
div.id = '__rgraph_image_div__';
|
506
|
+
document.body.appendChild(div);
|
507
|
+
|
508
|
+
|
509
|
+
/**
|
510
|
+
* Add the HTML text inputs
|
511
|
+
*/
|
512
|
+
div.innerHTML += '<div style="position: absolute; margin-left: 10px; top: ' + canvas.height + 'px; width: ' + (canvas.width - 50) + 'px; height: 25px"><span style="font-size: 12pt;display: inline; display: inline-block; width: 65px; text-align: right">URL:</span><textarea style="float: right; overflow: hidden; height: 20px; width: ' + (canvas.width - obj.gutterLeft - obj.gutterRight - 80) + 'px" onclick="this.select()" readonly="readonly" id="__rgraph_dataurl__">' + canvas.toDataURL() + '</textarea></div>';
|
513
|
+
div.innerHTML += '<div style="position: absolute; top: ' + (canvas.height + 25) + 'px; left: ' + (obj.gutterLeft - 65 + (canvas.width / 2)) + 'px; width: ' + (canvas.width - obj.gutterRight) + 'px; font-size: 65%">A link using the URL: <a href="' + canvas.toDataURL() + '">View</a></div>'
|
514
|
+
|
515
|
+
|
516
|
+
|
517
|
+
/**
|
518
|
+
* Create the image rendition of the graph
|
519
|
+
*/
|
520
|
+
var img = document.createElement('IMG');
|
521
|
+
RG.Registry.Set('chart.png', img);
|
522
|
+
img.__canvas__ = canvas;
|
523
|
+
img.__object__ = obj;
|
524
|
+
img.id = '__rgraph_image_img__';
|
525
|
+
img.className = 'RGraph_png';
|
526
|
+
|
527
|
+
img.src = canvas.toDataURL();
|
528
|
+
|
529
|
+
div.appendChild(img);
|
530
|
+
|
531
|
+
setTimeout(function () {document.getElementById("__rgraph_dataurl__").select();}, 50);
|
532
|
+
|
533
|
+
window.addEventListener('resize', function (e){var img = RG.Registry.Get('chart.png');img.style.left = (document.body.clientWidth / 2) - (img.width / 2) + 'px';}, false);
|
534
|
+
|
535
|
+
bg.onclick = function (e)
|
536
|
+
{
|
537
|
+
var div = document.getElementById("__rgraph_image_div__");
|
538
|
+
var bg = document.getElementById("__rgraph_image_bg__");
|
539
|
+
|
540
|
+
if (div) {
|
541
|
+
div.style.opacity = 0;
|
542
|
+
|
543
|
+
div.parentNode.removeChild(div);
|
544
|
+
|
545
|
+
div.id = '';
|
546
|
+
div.style.display = 'none';
|
547
|
+
div = null;
|
548
|
+
}
|
549
|
+
|
550
|
+
if (bg) {
|
551
|
+
bg.style.opacity = 0;
|
552
|
+
|
553
|
+
bg.id = '';
|
554
|
+
bg.style.display = 'none';
|
555
|
+
bg = null;
|
556
|
+
}
|
557
|
+
}
|
558
|
+
|
559
|
+
window.addEventListener('resize', function (e) {bg.onclick(e);}, false)
|
560
|
+
|
561
|
+
/**
|
562
|
+
* This sets the image BG and the DIV as global variables, circumventing repeated calls to document.getElementById()
|
563
|
+
*/
|
564
|
+
RG.showpng_image_bg = bg;
|
565
|
+
RG.showpng_image_div = div;
|
566
|
+
|
567
|
+
setTimeout('RGraph.showpng_image_div.style.opacity = 0.2', 50);
|
568
|
+
setTimeout('RGraph.showpng_image_div.style.opacity = 0.4', 100);
|
569
|
+
setTimeout('RGraph.showpng_image_div.style.opacity = 0.6', 150);
|
570
|
+
setTimeout('RGraph.showpng_image_div.style.opacity = 0.8', 200);
|
571
|
+
setTimeout('RGraph.showpng_image_div.style.opacity = 1', 250);
|
572
|
+
|
573
|
+
setTimeout('RGraph.showpng_image_bg.style.opacity = 0.1', 50);
|
574
|
+
setTimeout('RGraph.showpng_image_bg.style.opacity = 0.2', 100);
|
575
|
+
setTimeout('RGraph.showpng_image_bg.style.opacity = 0.3', 150);
|
576
|
+
setTimeout('RGraph.showpng_image_bg.style.opacity = 0.4', 200);
|
577
|
+
setTimeout('RGraph.showpng_image_bg.style.opacity = 0.5', 250);
|
578
|
+
|
579
|
+
|
580
|
+
|
581
|
+
img.onclick = function (e)
|
582
|
+
{
|
583
|
+
if (e.stopPropagation) e.stopPropagation();
|
584
|
+
else event.cancelBubble = true;
|
585
|
+
}
|
586
|
+
|
587
|
+
if (event && event.stopPropagation) {
|
588
|
+
event.stopPropagation();
|
589
|
+
}
|
590
|
+
};
|
591
|
+
|
592
|
+
|
593
|
+
|
594
|
+
|
595
|
+
// End module pattern
|
596
|
+
})(window, document);
|