mirror of
https://github.com/salesagility/SuiteCRM.git
synced 2024-11-22 07:52:36 +00:00
292 lines
11 KiB
JavaScript
292 lines
11 KiB
JavaScript
// version: 2015-11-02
|
|
/**
|
|
* o--------------------------------------------------------------------------------o
|
|
* | This file is part of the RGraph package - you can learn more at: |
|
|
* | |
|
|
* | http://www.rgraph.net |
|
|
* | |
|
|
* | RGraph is dual licensed under the Open Source GPL (General Public License) |
|
|
* | v2.0 license and a commercial license which means that you're not bound by |
|
|
* | the terms of the GPL. The commercial license is just £99 (GBP) and you can |
|
|
* | read about it here: |
|
|
* | http://www.rgraph.net/license |
|
|
* o--------------------------------------------------------------------------------o
|
|
*/
|
|
|
|
ModalDialog =
|
|
{
|
|
dialog: null,
|
|
background: null,
|
|
offset: 50,
|
|
events: [],
|
|
|
|
|
|
|
|
|
|
/**
|
|
* Shows the dialog with the supplied DIV acting as the contents
|
|
*
|
|
* @param string id The ID of the DIV to use as the dialogs contents
|
|
* @param int width The width of the dialog
|
|
*/
|
|
Show: function (id, width)
|
|
{
|
|
ModalDialog.id = id;
|
|
ModalDialog.width = width;
|
|
|
|
ModalDialog.ShowBackground();
|
|
ModalDialog.ShowDialog();
|
|
|
|
// Install the event handlers
|
|
window.onresize = ModalDialog.Resize;
|
|
|
|
|
|
// Call them initially
|
|
ModalDialog.Resize();
|
|
|
|
if (typeof(ModalDialog.onmodaldialog) == 'function') {
|
|
ModalDialog.onmodaldialog();
|
|
}
|
|
ModalDialog.FireCustomEvent('onmodaldialog');
|
|
},
|
|
|
|
|
|
|
|
|
|
/**
|
|
* Shows the background semi-transparent darkened DIV
|
|
*/
|
|
ShowBackground: function ()
|
|
{
|
|
// Create the background if neccessary
|
|
ModalDialog.background = document.createElement('DIV');
|
|
ModalDialog.background.className = 'ModalDialog_background';
|
|
ModalDialog.background.style.position = 'fixed';
|
|
ModalDialog.background.style.top = 0;
|
|
ModalDialog.background.style.left = 0;
|
|
ModalDialog.background.style.width = (screen.width + 100) + 'px';
|
|
ModalDialog.background.style.height = (screen.height + 100) + 'px';
|
|
ModalDialog.background.style.backgroundColor = 'rgb(204,204,204)';
|
|
ModalDialog.background.style.opacity = 0;
|
|
ModalDialog.background.style.zIndex = 3276;
|
|
ModalDialog.background.style.filter = "Alpha(opacity=50)";
|
|
|
|
document.body.appendChild(ModalDialog.background);
|
|
|
|
ModalDialog.background.style.visibility = 'visible';
|
|
},
|
|
|
|
|
|
|
|
|
|
/**
|
|
* Shows the dialog itself
|
|
*/
|
|
ShowDialog: function ()
|
|
{
|
|
// Create the DIV if necessary
|
|
// Jan 2012- Changed so that the dialog is ALWAYS (re)created
|
|
if (!ModalDialog.dialog || true) {
|
|
ModalDialog.dialog = document.createElement('DIV');
|
|
|
|
ModalDialog.dialog.id = 'ModalDialog_dialog';
|
|
ModalDialog.dialog.className = 'ModalDialog_dialog';
|
|
|
|
var borderRadius = '15px';
|
|
|
|
ModalDialog.dialog.style.borderRadius = borderRadius;
|
|
ModalDialog.dialog.style.MozBorderRadius = borderRadius;
|
|
ModalDialog.dialog.style.WebkitBorderRadius = borderRadius;
|
|
|
|
ModalDialog.dialog.style.boxShadow = '3px 3px 3px rgba(96,96,96,0.5)';
|
|
ModalDialog.dialog.style.MozBoxShadow = '3px 3px 3px rgba(96,96,96,0.5)';
|
|
ModalDialog.dialog.style.WebkitBoxShadow = 'rgba(96,96,96,0.5) 3px 3px 3px';
|
|
|
|
ModalDialog.dialog.style.position = 'fixed';
|
|
ModalDialog.dialog.style.backgroundColor = 'white';
|
|
ModalDialog.dialog.style.width = parseInt(ModalDialog.width) + 'px';
|
|
ModalDialog.dialog.style.border = '2px solid #999';
|
|
ModalDialog.dialog.style.zIndex = 32767;
|
|
ModalDialog.dialog.style.padding = '5px';
|
|
ModalDialog.dialog.style.paddingTop = '25px';
|
|
ModalDialog.dialog.style.opacity = 0;
|
|
|
|
if (document.all) {
|
|
ModalDialog.dialog.style.zIndex = 32767;
|
|
}
|
|
|
|
|
|
|
|
// Accomodate various browsers
|
|
if (navigator.userAgent.indexOf('Opera') != -1) {
|
|
ModalDialog.dialog.style.paddingTop = '25px';
|
|
|
|
} else if (navigator.userAgent.indexOf('MSIE') != -1) {
|
|
ModalDialog.dialog.style.paddingTop = '25px';
|
|
|
|
} else if (navigator.userAgent.indexOf('Safari') != -1) {
|
|
ModalDialog.dialog.style.paddingTop = '25px';
|
|
}
|
|
|
|
document.body.appendChild(ModalDialog.dialog);
|
|
|
|
|
|
// Now create the grey bar at the top of the dialog
|
|
var bar = document.createElement('DIV');
|
|
bar.className = 'ModalDialog_topbar';
|
|
bar.style.top = 0;
|
|
bar.style.left = 0;
|
|
bar.style.width = '100%';//(ModalDialog.dialog.offsetWidth - 4) + 'px';
|
|
bar.style.height = '20px';
|
|
bar.style.backgroundColor = '#bbb';
|
|
bar.style.borderBottom = '2px solid #999';
|
|
//bar.style.zIndex = 50000;
|
|
bar.style.position = 'absolute';
|
|
var borderRadius = '11px';
|
|
bar.style.WebkitBorderTopLeftRadius = borderRadius;
|
|
bar.style.WebkitBorderTopRightRadius = borderRadius;
|
|
bar.style.MozBorderRadiusTopleft = borderRadius;
|
|
bar.style.MozBorderRadiusTopright = borderRadius;
|
|
bar.style.borderTopRightRadius = borderRadius;
|
|
bar.style.borderTopLeftRadius = borderRadius;
|
|
ModalDialog.dialog.appendChild(bar);
|
|
|
|
// Add the content div
|
|
var content = document.createElement('DIV');
|
|
//content.style.paddingTop = '20px';
|
|
content.style.width = '100%';
|
|
content.style.height = '100%';
|
|
ModalDialog.dialog.appendChild(content);
|
|
|
|
if (ModalDialog.id.toLowerCase().substring(0, 7) == 'string:') {
|
|
content.innerHTML = ModalDialog.id.substring(7);
|
|
} else {
|
|
content.innerHTML = document.getElementById(ModalDialog.id).innerHTML;
|
|
}
|
|
|
|
// Now reposition the dialog in the center
|
|
ModalDialog.dialog.style.left = (document.body.offsetWidth / 2) - (ModalDialog.dialog.offsetWidth / 2) + 'px';
|
|
ModalDialog.dialog.style.top = '30%';
|
|
}
|
|
|
|
// Show the dialog
|
|
ModalDialog.dialog.style.visibility = 'visible';
|
|
|
|
// A simple fade-in effect
|
|
setTimeout('ModalDialog.dialog.style.opacity = 0.2', 50);
|
|
setTimeout('ModalDialog.dialog.style.opacity = 0.4', 100);
|
|
setTimeout('ModalDialog.dialog.style.opacity = 0.6', 150);
|
|
setTimeout('ModalDialog.dialog.style.opacity = 0.8', 200);
|
|
setTimeout('ModalDialog.dialog.style.opacity = 1', 250);
|
|
|
|
setTimeout('ModalDialog.background.style.opacity = 0.1', 50);
|
|
setTimeout('ModalDialog.background.style.opacity = 0.2', 100);
|
|
setTimeout('ModalDialog.background.style.opacity = 0.3', 150);
|
|
setTimeout('ModalDialog.background.style.opacity = 0.4', 200);
|
|
setTimeout('ModalDialog.background.style.opacity = 0.5', 250);
|
|
},
|
|
|
|
|
|
|
|
|
|
/**
|
|
* Hides everything
|
|
*/
|
|
Close: function ()
|
|
{
|
|
if (ModalDialog.dialog) {
|
|
// February 2012 - now remove the dialog node from the DOM
|
|
if (document.getElementById(ModalDialog.dialog.id)) {
|
|
document.body.removeChild(ModalDialog.dialog);
|
|
}
|
|
|
|
ModalDialog.dialog.style.visibility = 'hidden';
|
|
ModalDialog.dialog.style.opacity = 0;
|
|
}
|
|
|
|
if (ModalDialog.background) {
|
|
ModalDialog.background.style.visibility = 'hidden';
|
|
ModalDialog.background.style.opacity = 0;
|
|
|
|
// February 2012 - now remove the dialog node from the DOM
|
|
if (document.getElementById(ModalDialog.background.id)) {
|
|
document.body.removeChild(ModalDialog.background);
|
|
}
|
|
}
|
|
},
|
|
|
|
|
|
|
|
|
|
/**
|
|
* Accommodate the window being resized
|
|
*/
|
|
Resize: function ()
|
|
{
|
|
if (ModalDialog.dialog) {
|
|
ModalDialog.dialog.style.left = (document.body.offsetWidth / 2) - (ModalDialog.dialog.offsetWidth / 2) + 'px';
|
|
}
|
|
|
|
ModalDialog.background.style.width = '2500px';
|
|
ModalDialog.background.style.height = '2500px';
|
|
},
|
|
|
|
|
|
|
|
|
|
/**
|
|
* Returns the page height
|
|
*
|
|
* @return int The page height
|
|
*/
|
|
AddCustomEventListener: function (name, func)
|
|
{
|
|
if (typeof(ModalDialog.events) == 'undefined') {
|
|
ModalDialog.events = [];
|
|
}
|
|
|
|
ModalDialog.events.push([name, func]);
|
|
},
|
|
|
|
|
|
|
|
|
|
/**
|
|
* Used to fire the ModalDialog custom event
|
|
*
|
|
* @param object obj The graph object that fires the event
|
|
* @param string event The name of the event to fire
|
|
*/
|
|
FireCustomEvent: function (name)
|
|
{
|
|
for (var i=0; i<ModalDialog.events.length; ++i) {
|
|
if (typeof(ModalDialog.events[i][0]) == 'string' && ModalDialog.events[i][0] == name && typeof(ModalDialog.events[i][1]) == 'function') {
|
|
ModalDialog.events[i][1]();
|
|
}
|
|
}
|
|
},
|
|
|
|
|
|
|
|
|
|
/**
|
|
* Returns true if the browser is IE8
|
|
*/
|
|
isIE8: function ()
|
|
{
|
|
return document.all && (navigator.userAgent.indexOf('MSIE 8') > 0);
|
|
}
|
|
};
|
|
|
|
|
|
|
|
|
|
// An alias
|
|
ModalDialog.Hide = ModalDialog.Close;
|
|
|
|
// Lowercase all of the function names
|
|
for (i in ModalDialog) {
|
|
if (typeof ModalDialog[i] === 'function') {
|
|
ModalDialog[i.toLowerCase()] = ModalDialog[i]
|
|
}
|
|
} |