source: Dev/trunk/RGraph/libraries/RGraph.common.context.js @ 218

Last change on this file since 218 was 77, checked in by fpvanagthoven, 14 years ago

RGraph
File size: 23.5 KB
RevLine 
[77]1    /**
2    * o------------------------------------------------------------------------------o
3    * | This file is part of the RGraph package - you can learn more at:             |
4    * |                                                                              |
5    * |                          http://www.rgraph.net                               |
6    * |                                                                              |
7    * | This package is licensed under the RGraph license. For all kinds of business |
8    * | purposes there is a small one-time licensing fee to pay and for non          |
9    * | commercial  purposes it is free to use. You can read the full license here:  |
10    * |                                                                              |
11    * |                      http://www.rgraph.net/LICENSE.txt                       |
12    * o------------------------------------------------------------------------------o
13    */
14
15    if (typeof(RGraph) == 'undefined') RGraph = {isRGraph:true,type:'common'};
16
17
18    /**
19    * This gunction shows a context menu containing the parameters
20    * provided to it
21    *
22    * @param object canvas    The canvas object
23    * @param array  menuitems The context menu menuitems
24    * @param object e         The event object
25    */
26    RGraph.Contextmenu = function (canvas, menuitems, e)
27    {
28        e = RGraph.FixEventObject(e);
29
30        /**
31        * Fire the custom RGraph event onbeforecontextmenu
32        */
33        RGraph.FireCustomEvent(canvas.__object__, 'onbeforecontextmenu');
34
35        /**
36        * Hide any existing menu
37        */
38        if (RGraph.Registry.Get('chart.contextmenu')) {
39            RGraph.HideContext();
40        }
41       
42        // Hide any zoomed canvas
43        RGraph.HideZoomedCanvas();
44
45        /**
46        * Hide the palette if necessary
47        */
48        RGraph.HidePalette();
49       
50        /**
51        * This is here to ensure annotating is OFF
52        */
53        canvas.__object__.Set('chart.mousedown', false);
54
55        var x      = e.pageX;
56        var y      = e.pageY;
57        var div    = document.createElement('div');
58        var bg     = document.createElement('div');
59
60        div.className             = 'RGraph_contextmenu';
61        div.__canvas__            = canvas; /* Store a reference to the canvas on the contextmenu object */
62        div.style.position        = 'absolute';
63        div.style.left            = 0;
64        div.style.top             = 0;
65        div.style.border          = '1px solid black';
66        div.style.backgroundColor = 'white';
67        div.style.boxShadow       = '3px 3px 3px rgba(96,96,96,0.5)';
68        div.style.MozBoxShadow    = '3px 3px 3px rgba(96,96,96,0.5)';
69        div.style.WebkitBoxShadow = '3px 3px 3px rgba(96,96,96,0.5)';
70        div.style.filter          = 'progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=135)';
71        div.style.opacity         = 0;
72
73        bg.className             = 'RGraph_contextmenu_background';
74        bg.style.position        = 'absolute';
75        bg.style.backgroundColor = '#ccc';
76        bg.style.borderRight     = '1px solid #aaa';
77        bg.style.top             = 0;
78        bg.style.left            = 0;
79        bg.style.width           = '18px';
80        bg.style.height          = '100%';
81        bg.style.opacity         = 0;
82
83
84        div = document.body.appendChild(div);
85        bg  = div.appendChild(bg);
86
87
88        /**
89        * Now add the context menu items
90        */
91        for (i=0; i<menuitems.length; ++i) {
92           
93            var menuitem = document.createElement('div');
94           
95            menuitem.__canvas__      = canvas;
96            menuitem.__contextmenu__ = div;
97            menuitem.className       = 'RGraph_contextmenu_item';
98           
99            if (menuitems[i]) {
100                menuitem.style.padding = '2px 5px 2px 23px';
101                menuitem.style.fontFamily = 'Arial';
102                menuitem.style.fontSize = '10pt';
103                menuitem.style.fontWeight = 'normal';
104                menuitem.innerHTML = menuitems[i][0];
105
106                if (RGraph.is_array(menuitems[i][1])) {
107                    menuitem.style.backgroundImage = 'url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAQUlEQVQImY3NoQ2AMABE0ZewABMyGQ6mqWODzlAclBSFO8HZl8uf0FFxCHtwYkt4Y6ChYE44cGH9/fyae2p2LAleW9oVTQuVf6gAAAAASUVORK5CYII=)';
108                    menuitem.style.backgroundRepeat = 'no-repeat';
109                    menuitem.style.backgroundPosition = '97% center';
110                }
111
112                // Add the mouseover event
113                if (menuitems[i][1]) {
114                    if (menuitem.addEventListener) {
115                        menuitem.addEventListener("mouseover", function (e) {RGraph.HideContextSubmenu(); e.target.style.backgroundColor = 'rgba(0,0,0,0.2)'; e.target.style.cursor = 'pointer';}, false);
116                        menuitem.addEventListener("mouseout", function (e) {e.target.style.backgroundColor = 'inherit'; e.target.style.cursor = 'default';}, false);
117                    } else  {
118                        menuitem.attachEvent("onmouseover", function () {RGraph.HideContextSubmenu();event.srcElement.style.backgroundColor = '#eee';event.srcElement.style.cursor = 'pointer';}
119                    , false);
120                        menuitem.attachEvent("onmouseout", function () {event.srcElement.style.backgroundColor = 'inherit'; event.srcElement.style.cursor = 'default';}, false);
121                    }
122                } else {
123                    if (menuitem.addEventListener) {
124                        menuitem.addEventListener("mouseover", function (e) {e.target.style.cursor = 'default';}, false);
125                        menuitem.addEventListener("mouseout", function (e) {e.target.style.cursor = 'default';}, false);
126                    } else  {
127                        menuitem.attachEvent("onmouseover", function () {event.srcElement.style.cursor = 'default'}, false);
128                        menuitem.attachEvent("onmouseout", function () {event.srcElement.style.cursor = 'default';}, false);
129                    }
130                }
131
132            } else {
133                menuitem.style.borderBottom = '1px solid #ddd';
134                menuitem.style.marginLeft = '25px';
135            }
136
137            div.appendChild(menuitem);
138
139            /**
140            * Install the event handler that calls the menuitem
141            */
142            if (menuitems[i] && menuitems[i][1] && typeof(menuitems[i][1]) == 'function') {
143                if (document.all  && 0) { // MSIE bit no longer necessary
144                    menuitem.attachEvent('onclick', menuitems[i][1]);
145                    menuitem.attachEvent('onclick', function () {RGraph.HideContext();});
146                } else {
147                    menuitem.addEventListener('click', menuitems[i][1], false);
148                }
149           
150            // Submenu
151            } else if (menuitems[i] && menuitems[i][1] && RGraph.is_array(menuitems[i][1])) {
152                (function ()
153                {
154                    var tmp = menuitems[i][1]; // This is here because of "references vs primitives" and how they're passed around in Javascript
155                    menuitem.addEventListener('mouseover', function (e) {RGraph.Contextmenu_submenu(canvas.__object__, tmp, e.target);}, false);
156                })();
157            }
158        }
159
160        /**
161        * Now all the menu items have been added, set the shadow width
162        * Shadow now handled by CSS3?
163        */
164        div.style.width = (div.offsetWidth + 10) + 'px';
165        div.style.height = (div.offsetHeight - 2) + 'px';
166
167        /**
168        * Set the background (the left bar) width if it's MSIE
169        */
170        //if (document.all) {
171        //    bg.style.height = (div.offsetHeight - 2) + 'px';
172        //}
173
174        // Show the menu to the left or the right (normal) of the cursor?
175        if (x + div.offsetWidth > document.body.offsetWidth) {
176            x -= div.offsetWidth;
177        }
178       
179        // Reposition the menu (now we have the real offsetWidth)
180        div.style.left = x + 'px';
181        div.style.top = y + 'px';
182
183        /**
184        * Do a little fade in effect
185        */
186        setTimeout("if (obj = RGraph.Registry.Get('chart.contextmenu')) obj.style.opacity = 0.2", 50);
187        setTimeout("if (obj = RGraph.Registry.Get('chart.contextmenu')) obj.style.opacity = 0.4", 100);
188        setTimeout("if (obj = RGraph.Registry.Get('chart.contextmenu')) obj.style.opacity = 0.6", 150);
189        setTimeout("if (obj = RGraph.Registry.Get('chart.contextmenu')) obj.style.opacity = 0.8", 200);
190        setTimeout("if (obj = RGraph.Registry.Get('chart.contextmenu')) obj.style.opacity = 1", 250);
191
192        // The fade in effect on the left gray bar
193        setTimeout("if (obj = RGraph.Registry.Get('chart.contextmenu.bg')) obj.style.opacity = 0.2", 50);
194        setTimeout("if (obj = RGraph.Registry.Get('chart.contextmenu.bg')) obj.style.opacity = 0.4", 100);
195        setTimeout("if (obj = RGraph.Registry.Get('chart.contextmenu.bg')) obj.style.opacity = 0.6", 150);
196        setTimeout("if (obj = RGraph.Registry.Get('chart.contextmenu.bg')) obj.style.opacity = 0.8", 200);
197        setTimeout("if (obj = RGraph.Registry.Get('chart.contextmenu.bg')) obj.style.opacity = 1", 250);
198
199        // Store the context menu in the registry
200        RGraph.Registry.Set('chart.contextmenu', div);
201        RGraph.Registry.Set('chart.contextmenu.bg', bg);
202        RGraph.Registry.Get('chart.contextmenu').oncontextmenu = function () {return false;};
203        RGraph.Registry.Get('chart.contextmenu.bg').oncontextmenu = function () {return false;};
204
205        /**
206        * Install the event handlers that hide the context menu
207        */
208        canvas.addEventListener('click', function () {RGraph.HideContext();}, false);
209
210        window.onclick = function (e)
211        {
212            RGraph.HideContext();
213           
214            // Removed on 3/7/10 - stops a bug in conjunction with annotating which presents itself on the Rscatter
215            //RGraph.Redraw();
216           
217            // Fire the onclick event again
218            if (e.target.onclick && e.button == 0) {
219                e.target.onclick(e);
220            }
221        }
222
223        window.onresize = function () {RGraph.HideContext();}
224       
225        /**
226        * Add the __shape__ object to the context menu
227        */
228       
229        /**
230        * Set the shape coords from the .getShape()  method
231        */
232        if (typeof(canvas.__object__.getShape) == 'function') {
233            RGraph.Registry.Get('chart.contextmenu').__shape__ = canvas.__object__.getShape(e);
234        }
235
236
237        e.stopPropagation();
238
239        /**
240        * Fire the (RGraph) oncontextmenu event
241        */
242        RGraph.FireCustomEvent(canvas.__object__, 'oncontextmenu');
243
244        return false;
245    }
246
247
248    /**
249    * Hides the context menu if it's currently visible
250    */
251    RGraph.HideContext = function ()
252    {
253        var cm   = RGraph.Registry.Get('chart.contextmenu');
254        var cmbg = RGraph.Registry.Get('chart.contextmenu.bg');
255       
256        //Hide any submenu currently being displayed
257        RGraph.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            RGraph.Registry.Set('chart.contextmenu', null);
266           
267            cmbg.style.visibility = 'hidden';
268            cmbg.style.display = 'none';
269            RGraph.Registry.Set('chart.contextmenu.bg', null);
270        }
271    }
272
273
274    /**
275    * Hides the context menus SUBMENU if it's currently visible
276    */
277    RGraph.HideContextSubmenu = function ()
278    {
279        var sub  = RGraph.Registry.Get('chart.contextmenu.submenu');
280
281        if (sub) {
282            sub.style.visibility = 'none';
283            sub.style.display    = 'none';
284            RGraph.Registry.Set('chart.contextmenu.submenu', null);
285        }
286    }
287
288
289    /**
290    * Shows the context menu after making a few checks - not opera (doesn't support oncontextmenu,
291    * not safari (tempermentality), not chrome (hmmm)
292    */
293    RGraph.ShowContext = function (obj)
294    {
295        RGraph.HidePalette();
296
297        if (obj.Get('chart.contextmenu') && obj.Get('chart.contextmenu').length) {
298
299            var isOpera      = navigator.userAgent.indexOf('Opera') >= 0;
300            var isSafari     = navigator.userAgent.indexOf('Safari') >= 0;
301            var isChrome     = navigator.userAgent.indexOf('Chrome') >= 0;
302            var isMacFirefox = navigator.userAgent.indexOf('Firefox') > 0 && navigator.userAgent.indexOf('Mac') > 0;
303            var isIE9        = navigator.userAgent.indexOf('MSIE 9') >= 0;
304
305            if (((!isOpera && !isSafari) || isChrome) && !isMacFirefox) {
306
307                obj.canvas.oncontextmenu = function (e)
308                {
309                     e = RGraph.FixEventObject(e);
310
311                    if (e.ctrlKey) return true;
312
313                    RGraph.Contextmenu(obj.canvas, obj.Get('chart.contextmenu'), e);
314
315                    return false;
316                }
317
318            // Accomodate Opera and Safari - use double click event
319            } else {
320
321                obj.canvas.addEventListener('dblclick', function (e)
322                {
323                    if (e.ctrlKey) return true;
324
325                    if (!RGraph.Registry.Get('chart.contextmenu')) {
326                        RGraph.Contextmenu(obj.canvas, obj.Get('chart.contextmenu'), e);
327                    }
328                }, false);
329            }
330        }
331    }
332
333
334    /**
335    * This draws a submenu should it be necessary
336    *
337    * @param object obj  The graph object
338    * @param object menu The context menu
339    */
340    RGraph.Contextmenu_submenu = function (obj, menuitems, parentMenuItem)
341    {
342        RGraph.HideContextSubmenu();
343
344        var canvas  = obj.canvas;
345        var context = obj.context;
346        var menu    = parentMenuItem.parentNode;
347
348        var subMenu = document.createElement('DIV');
349        subMenu.style.position = 'absolute';
350        subMenu.style.width = '100px';
351        subMenu.style.top = menu.offsetTop + parentMenuItem.offsetTop + 'px';
352        subMenu.style.left            = (menu.offsetLeft + menu.offsetWidth - (RGraph.isIE8() ? 9 : 0)) + 'px';
353        subMenu.style.backgroundColor = 'white';
354        subMenu.style.border          = '1px solid black';
355        subMenu.className             = 'RGraph_contextmenu';
356        subMenu.__contextmenu__       = menu;
357        subMenu.style.boxShadow       = '3px 3px 3px rgba(96,96,96,0.5)';
358        subMenu.style.MozBoxShadow    = '3px 3px 3px rgba(96,96,96,0.5)';
359        subMenu.style.WebkitBoxShadow = '3px 3px 3px rgba(96,96,96,0.5)';
360        subMenu.style.filter          = 'progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=135)';
361        document.body.appendChild(subMenu);
362       
363        for (var i=0; i<menuitems.length; ++i) {
364                   
365            var menuitem = document.createElement('DIV');
366           
367            menuitem.__canvas__      = canvas;
368            menuitem.__contextmenu__ = menu;
369            menuitem.className       = 'RGraph_contextmenu_item';
370           
371            if (menuitems[i]) {
372                menuitem.style.padding = '2px 5px 2px 23px';
373                menuitem.style.fontFamily = 'Arial';
374                menuitem.style.fontSize = '10pt';
375                menuitem.style.fontWeight = 'normal';
376                menuitem.innerHTML = menuitems[i][0];
377       
378                if (menuitems[i][1]) {
379                    if (menuitem.addEventListener) {
380                        menuitem.addEventListener("mouseover", function (e) {e.target.style.backgroundColor = 'rgba(0,0,0,0.2)'; e.target.style.cursor = 'pointer';}, false);
381                        menuitem.addEventListener("mouseout", function (e) {e.target.style.backgroundColor = 'inherit'; e.target.style.cursor = 'default';}, false);
382                    } else  {
383                        menuitem.attachEvent("onmouseover", function () {event.srcElement.style.backgroundColor = 'rgba(0,0,0,0.2)'; event.srcElement.style.cursor = 'pointer'}, false);
384                        menuitem.attachEvent("onmouseout", function () {event.srcElement.style.backgroundColor = 'inherit'; event.srcElement.style.cursor = 'default';}, false);
385                    }
386                } else {
387                    if (menuitem.addEventListener) {
388                        menuitem.addEventListener("mouseover", function (e) {e.target.style.cursor = 'default';}, false);
389                        menuitem.addEventListener("mouseout", function (e) {e.target.style.cursor = 'default';}, false);
390                    } else  {
391                        menuitem.attachEvent("onmouseover", function () {event.srcElement.style.cursor = 'default'}, false);
392                        menuitem.attachEvent("onmouseout", function () {event.srcElement.style.cursor = 'default';}, false);
393                    }
394                }
395            } else {
396                menuitem.style.borderBottom = '1px solid #ddd';
397                menuitem.style.marginLeft = '25px';
398            }
399           
400            subMenu.appendChild(menuitem);
401       
402            if (menuitems[i] && menuitems[i][1]) {
403                if (document.all) {
404                    menuitem.attachEvent('onclick', menuitems[i][1]);
405                } else {
406                    menuitem.addEventListener('click', menuitems[i][1], false);
407                }
408            }
409        }
410
411
412        var bg                   = document.createElement('DIV');
413        bg.className             = 'RGraph_contextmenu_background';
414        bg.style.position        = 'absolute';
415        bg.style.backgroundColor = '#ccc';
416        bg.style.borderRight     = '1px solid #aaa';
417        bg.style.top             = 0;
418        bg.style.left            = 0;
419        bg.style.width           = '18px';
420        bg.style.height          = '100%';
421
422        bg  = subMenu.appendChild(bg);
423
424        RGraph.Registry.Set('chart.contextmenu.submenu', subMenu);
425    }
426
427
428    /**
429    * A function designed to be used in conjunction with thed context menu
430    * to allow people to get image versions of canvases.
431    *
432    * @param      canvas Optionally you can pass in the canvas, which will be used
433    */
434    RGraph.showPNG = function ()
435    {
436        if (RGraph.isIE8()) {
437            alert('[RGRAPH PNG] Sorry, showing a PNG is not supported on MSIE8.');
438            return;
439        }
440
441        if (arguments[0] && arguments[0].id) {
442            var canvas = arguments[0];
443            var event  = arguments[1];
444       
445        } else if (RGraph.Registry.Get('chart.contextmenu')) {
446            var canvas = RGraph.Registry.Get('chart.contextmenu').__canvas__;
447       
448        } else {
449            alert('[RGRAPH SHOWPNG] Could not find canvas!');
450        }
451
452        var obj = canvas.__object__;
453
454        /**
455        * Create the gray background DIV to cover the page
456        */
457        var bg = document.createElement('DIV');
458            bg.id = '__rgraph_image_bg__';
459            bg.style.position = 'fixed';
460            bg.style.top = '-10px';
461            bg.style.left = '-10px';
462            bg.style.width = '5000px';
463            bg.style.height = '5000px';
464            bg.style.backgroundColor = 'rgb(204,204,204)';
465            bg.style.opacity = 0;
466        document.body.appendChild(bg);
467       
468       
469        /**
470        * Create the div that the graph sits in
471        */
472        var div = document.createElement('DIV');
473            div.style.backgroundColor = 'white';
474            div.style.opacity = 0;
475            div.style.border = '1px solid black';
476            div.style.position = 'fixed';
477            div.style.top = '20%';
478            div.style.width = canvas.width + 'px';
479            div.style.height = canvas.height + 35 + 'px';
480            div.style.left = (document.body.clientWidth / 2) - (canvas.width / 2) + 'px';
481            div.style.padding = '5px';
482
483            div.style.borderRadius = '10px';
484            div.style.MozBorderRadius = '10px';
485            div.style.WebkitBorderRadius = '10px';
486
487            div.style.boxShadow    = '0 0 15px rgba(96,96,96,0.5)';
488            div.style.MozBoxShadow = '0 0 15px rgba(96,96,96,0.5)';
489            div.style.WebkitBoxShadow = 'rgba(96,96,96,0.5) 0 0 15px';
490
491            div.__canvas__ = canvas;
492            div.__object__ = obj;
493            div.id = '__rgraph_image_div__';
494        document.body.appendChild(div);
495
496       
497        /**
498        * Add the HTML text inputs
499        */
500        div.innerHTML += '<div style="position: absolute; margin-left: 10px; top: ' + canvas.height + 'px; width: ' + (canvas.width - 50) + 'px; height: 25px"><span style="display: inline; display: inline-block; width: 65px; text-align: right">URL:</span><textarea style="float: right; overflow: hidden; height: 15px; width: ' + (canvas.width - obj.gutterLeft - obj.gutterRight - 80) + 'px" onclick="this.select()" readonly="readonly" id="__rgraph_dataurl__">' + canvas.toDataURL() + '</textarea></div>';
501        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>'
502
503       
504       
505        /**
506        * Create the image rendition of the graph
507        */
508        var img = document.createElement('IMG');
509        RGraph.Registry.Set('chart.png', img);
510        img.__canvas__ = canvas;
511        img.__object__ = obj;
512        img.id = '__rgraph_image_img__';
513        img.className = 'RGraph_png';
514
515        img.src = canvas.toDataURL();
516
517        div.appendChild(img);
518       
519        setTimeout(function () {document.getElementById("__rgraph_dataurl__").select();}, 50);
520       
521        window.addEventListener('resize', function (e){var img = RGraph.Registry.Get('chart.png');img.style.left = (document.body.clientWidth / 2) - (img.width / 2) + 'px';}, false);
522       
523        bg.onclick = function (e)
524        {
525            var div = document.getElementById("__rgraph_image_div__");
526            var bg = document.getElementById("__rgraph_image_bg__");
527
528            if (div) {
529                div.style.opacity = 0;
530
531                div.parentNode.removeChild(div);
532
533                div.id = '';
534                div.style.display = 'none';
535                div = null;
536            }
537
538            if (bg) {
539                bg.style.opacity = 0;
540
541                bg.id = '';
542                bg.style.display = 'none';
543                bg = null;
544            }
545        }
546       
547        window.addEventListener('resize', function (e) {bg.onclick(e);}, false)
548       
549        /**
550        * This sets the image as a global variable, circumventing repeated calls to document.getElementById()
551        */
552        __rgraph_image_bg__  = bg;
553        __rgraph_image_div__ = div;
554
555
556        setTimeout('__rgraph_image_div__.style.opacity = 0.2', 50);
557        setTimeout('__rgraph_image_div__.style.opacity = 0.4', 100);
558        setTimeout('__rgraph_image_div__.style.opacity = 0.6', 150);
559        setTimeout('__rgraph_image_div__.style.opacity = 0.8', 200);
560        setTimeout('__rgraph_image_div__.style.opacity = 1', 250);
561
562        setTimeout('__rgraph_image_bg__.style.opacity = 0.1', 50);
563        setTimeout('__rgraph_image_bg__.style.opacity = 0.2', 100);
564        setTimeout('__rgraph_image_bg__.style.opacity = 0.3', 150);
565        setTimeout('__rgraph_image_bg__.style.opacity = 0.4', 200);
566        setTimeout('__rgraph_image_bg__.style.opacity = 0.5', 250);
567
568
569       
570        img.onclick = function (e)
571        {
572            if (e.stopPropagation) e.stopPropagation();
573            else event.cancelBubble = true;
574        }
575       
576        if (event && event.stopPropagation) {
577            event.stopPropagation();
578        }
579    }
Note: See TracBrowser for help on using the repository browser.