libraries/RGraph.modaldialog.js

   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     ModalDialog = {}
  16     ModalDialog.dialog     = null;
  17     ModalDialog.background = null;
  18     ModalDialog.offset     = 50;
  19     ModalDialog.events     = [];
  20
  21     /**
  22     * Shows the dialog with the supplied DIV acting as the contents
  23     *
  24     * @param string id    The ID of the DIV to use as the dialogs contents
  25     * @param int    width The width of the dialog
  26     */
  27     ModalDialog.Show = function (id, width)
  28     {
  29         ModalDialog.id    = id;
  30         ModalDialog.width = width;
  31
  32         ModalDialog.ShowBackground();
  33         ModalDialog.ShowDialog();
  34
  35         // Install the event handlers
  36         window.onresize = ModalDialog.Resize;
  37
  38
  39         // Call them initially
  40         ModalDialog.Resize();
  41
  42         ModalDialog.FireCustomEvent('onmodaldialog');
  43     }
  44
  45
  46     /**
  47     * Shows the background semi-transparent darkened DIV
  48     */
  49     ModalDialog.ShowBackground = function ()
  50     {
  51         // Create the background if neccessary
  52         ModalDialog.background = document.createElement('DIV');
  53         ModalDialog.background.className      = 'ModalDialog_background';
  54         ModalDialog.background.style.position = 'fixed';
  55         ModalDialog.background.style.top      = 0;
  56         ModalDialog.background.style.left     = 0;
  57         ModalDialog.background.style.width    = (screen.width + 100) + 'px';
  58         ModalDialog.background.style.height   = (screen.height + 100) + 'px';
  59         ModalDialog.background.style.backgroundColor = 'rgb(204,204,204)';
  60         ModalDialog.background.style.opacity = 0;
  61         ModalDialog.background.style.zIndex = 3276;
  62         ModalDialog.background.style.filter = "Alpha(opacity=50)";
  63
  64         document.body.appendChild(ModalDialog.background);
  65
  66         ModalDialog.background.style.visibility = 'visible';
  67     }
  68
  69
  70     /**
  71     * Shows the dialog itself
  72     */
  73     ModalDialog.ShowDialog = function ()
  74     {
  75         // Create the DIV if necessary
  76         if (!ModalDialog.dialog) {
  77             ModalDialog.dialog = document.createElement('DIV');
  78
  79             ModalDialog.dialog.id                    = 'ModalDialog_dialog';
  80             ModalDialog.dialog.className             = 'ModalDialog_dialog';
  81
  82             var borderRadius = '15px';
  83
  84             ModalDialog.dialog.style.borderRadius       = borderRadius;
  85             ModalDialog.dialog.style.MozBorderRadius    = borderRadius;
  86             ModalDialog.dialog.style.WebkitBorderRadius = borderRadius;
  87
  88             ModalDialog.dialog.style.boxShadow    = '3px 3px 3px rgba(96,96,96,0.5)';
  89             ModalDialog.dialog.style.MozBoxShadow = '3px 3px 3px rgba(96,96,96,0.5)';
  90             ModalDialog.dialog.style.WebkitBoxShadow    = 'rgba(96,96,96,0.5) 3px 3px 3px';
  91
  92             ModalDialog.dialog.style.position        = 'fixed';
  93             ModalDialog.dialog.style.backgroundColor = 'white';
  94             ModalDialog.dialog.style.width           = parseInt(ModalDialog.width) + 'px';
  95             ModalDialog.dialog.style.border          = '2px solid #999';
  96             ModalDialog.dialog.style.zIndex          = 32767;
  97             ModalDialog.dialog.style.padding         = '5px';
  98             ModalDialog.dialog.style.paddingTop      = '25px';
  99             ModalDialog.dialog.style.opacity       = 0;
 100
 101             if (document.all) {
 102                 ModalDialog.dialog.style.zIndex = 32767;
 103             }
 104
 105
 106
 107             // Accomodate various browsers
 108             if (navigator.userAgent.indexOf('Opera') != -1) {
 109                 ModalDialog.dialog.style.paddingTop = '25px';
 110
 111             } else if (navigator.userAgent.indexOf('MSIE') != -1) {
 112                 ModalDialog.dialog.style.paddingTop = '25px';
 113
 114             } else if (navigator.userAgent.indexOf('Safari') != -1) {
 115                 ModalDialog.dialog.style.paddingTop = '25px';
 116             }
 117
 118             document.body.appendChild(ModalDialog.dialog);
 119
 120
 121             // Now create the grey bar at the top of the dialog
 122             var bar = document.createElement('DIV');
 123                 bar.className = 'ModalDialog_topbar';
 124                 bar.style.top = 0;
 125                 bar.style.left = 0;
 126                 bar.style.width = '100%';//(ModalDialog.dialog.offsetWidth - 4) + 'px';
 127                 bar.style.height = '20px';
 128                 bar.style.backgroundColor = '#bbb';
 129                 bar.style.borderBottom = '2px solid #999';
 130                 //bar.style.zIndex    = 50000;
 131                 bar.style.position = 'absolute';
 132                 var borderRadius = '11px';
 133                 bar.style.WebkitBorderTopLeftRadius = borderRadius;
 134                 bar.style.WebkitBorderTopRightRadius = borderRadius;
 135                 bar.style.MozBorderRadiusTopleft = borderRadius;
 136                 bar.style.MozBorderRadiusTopright = borderRadius;
 137                 bar.style.borderTopRightRadius = borderRadius;
 138                 bar.style.borderTopLeftRadius = borderRadius;
 139             ModalDialog.dialog.appendChild(bar);
 140
 141             // Add the content div
 142             var content = document.createElement('DIV');
 143                 //content.style.paddingTop = '20px';
 144                 content.style.width = '100%';
 145                 content.style.height = '100%';
 146             ModalDialog.dialog.appendChild(content);
 147
 148         content.innerHTML = document.getElementById(ModalDialog.id).innerHTML;
 149
 150             // Now reposition the dialog in the center
 151             ModalDialog.dialog.style.left = (document.body.offsetWidth / 2) - (ModalDialog.dialog.offsetWidth / 2) + 'px';
 152             ModalDialog.dialog.style.top  = '30%';
 153         }
 154
 155         // Show the dialog
 156         ModalDialog.dialog.style.visibility = 'visible';
 157
 158         // A simple fade-in effect
 159         setTimeout('ModalDialog.dialog.style.opacity = 0.2', 50);
 160         setTimeout('ModalDialog.dialog.style.opacity = 0.4', 100);
 161         setTimeout('ModalDialog.dialog.style.opacity = 0.6', 150);
 162         setTimeout('ModalDialog.dialog.style.opacity = 0.8', 200);
 163         setTimeout('ModalDialog.dialog.style.opacity = 1', 250);
 164
 165         setTimeout('ModalDialog.background.style.opacity = 0.1', 50);
 166         setTimeout('ModalDialog.background.style.opacity = 0.2', 100);
 167         setTimeout('ModalDialog.background.style.opacity = 0.3', 150);
 168         setTimeout('ModalDialog.background.style.opacity = 0.4', 200);
 169         setTimeout('ModalDialog.background.style.opacity = 0.5', 250);
 170     }
 171
 172
 173     /**
 174     * Hides everything
 175     */
 176     ModalDialog.Close = function ()
 177     {
 178         if (ModalDialog.dialog) {
 179             ModalDialog.dialog.style.visibility = 'hidden';
 180             ModalDialog.dialog.style.opacity = 0;
 181         }
 182
 183         if (ModalDialog.background) {
 184             ModalDialog.background.style.visibility = 'hidden';
 185             ModalDialog.background.style.opacity = 0;
 186         }
 187     }
 188
 189     // An alias
 190     ModalDialog.Hide = ModalDialog.Close
 191
 192
 193     /**
 194     * Accommodate the window being resized
 195     */
 196     ModalDialog.Resize = function ()
 197     {
 198         if (ModalDialog.dialog) {
 199             ModalDialog.dialog.style.left = (document.body.offsetWidth / 2) - (ModalDialog.dialog.offsetWidth / 2) + 'px';
 200         }
 201
 202         ModalDialog.background.style.width  = '2500px';
 203         ModalDialog.background.style.height = '2500px';
 204     }
 205
 206
 207     /**
 208     * Returns the page height
 209     *
 210     * @return int The page height
 211     */
 212     ModalDialog.AddCustomEventListener = function (name, func)
 213     {
 214         if (typeof(ModalDialog.events) == 'undefined') {
 215             ModalDialog.events = [];
 216         }
 217
 218         ModalDialog.events.push([name, func]);
 219     }
 220
 221
 222     /**
 223     * Used to fire the ModalDialog custom event
 224     *
 225     * @param object obj   The graph object that fires the event
 226     * @param string event The name of the event to fire
 227     */
 228     ModalDialog.FireCustomEvent = function (name)
 229     {
 230         for (var i=0; i<ModalDialog.events.length; ++i) {
 231             if (typeof(ModalDialog.events[i][0]) == 'string' && ModalDialog.events[i][0] == name && typeof(ModalDialog.events[i][1]) == 'function') {
 232                 ModalDialog.events[i][1]();
 233             }
 234         }
 235     }
 236
 237
 238     /**
 239     * Returns true if the browser is IE8
 240     */
 241     ModalDialog.isIE8 = function ()
 242     {
 243         return document.all && (navigatot.userAgent.indexOf('MSIE 8') > 0);
 244     }