/****************************************************************
* *
* ModalPopups *
* ----------- *
* *
* This script offers you a collection of basic modal popups. *
* *
* Requirements: *
* DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" *
* *
* Version 0.1 (initial version) *
* Copyright (c) 2008 Jan Stolk *
* *
* Website: http://www.modalpopups.com *
* E-Mail: stolk_jan@hotmail.com *
* *
* *
* This library is free software; you can redistribute *
* it and/or modify it under the terms of the GNU *
* Lesser General Public License as published by the *
* Free Software Foundation; either version 3 of the *
* License, or (at your option) any later version. *
* *
* This library is distributed in the hope that it will *
* be useful, but WITHOUT ANY WARRANTY; without even the *
* implied warranty of MERCHANTABILITY or FITNESS FOR A *
* PARTICULAR PURPOSE. See the GNU Lesser General Public *
* License for more details. *
* *
* You should have received a copy of the GNU Lesser *
* General Public License along with this library; *
* Inc., 59 Temple Place, Suite 330, Boston, *
* MA 02111-1307 USA *
* *
****************************************************************/
/****************************************************************
* *
* Next release ideas: *
* *
* maxWidth and maxHeight *
* to limit autosize of popup *
* *
* Improve window.onresize *
* change is to addHandler etc... to be able to have more *
* than one window or more than one oneesize active *
* *
****************************************************************/
var ModalPopupsDefaults = {
shadow: true,
shadowSize: 5,
shadowColor: "#CCCCCC",
backgroundColor: "#A19D9A",
borderColor: "#999999",
titleBackColor: "#ffffff",
titleFontColor: "#5D6E85",
popupBackColor: "#94D0E6",
popupFontColor: "#384250",
footerBackColor: "#94D0E6",
footerFontColor: "#5D6E85",
okButtonText: "OK",
yesButtonText: "Yes",
noButtonText: "No",
cancelButtonText: "Cancel",
fontFamily: "Bookman Old Style",
fontSize: "12pt"
}
var ModalPopups = {
Init: function() {
//No init required, yet
},
SetDefaults: function(parameters) {
parameters = parameters || {};
ModalPopupsDefaults.shadow = parameters.shadow != null ? parameters.shadow : ModalPopupsDefaults.shadow;
ModalPopupsDefaults.shadowSize = parameters.shadowSize != null ? parameters.shadowSize : ModalPopupsDefaults.shadowSize;
ModalPopupsDefaults.shadowColor = parameters.shadowColor != null ? parameters.shadowColor : ModalPopupsDefaults.shadowColor;
ModalPopupsDefaults.backgroundColor = parameters.backgroundColor != null ? parameters.backgroundColor : ModalPopupsDefaults.backgroundColor;
ModalPopupsDefaults.borderColor = parameters.borderColor != null ? parameters.borderColor : ModalPopupsDefaults.borderColor;
ModalPopupsDefaults.okButtonText = parameters.okButtonText != null ? parameters.okButtonText : ModalPopupsDefaults.okButtonText;
ModalPopupsDefaults.yesButtonText = parameters.yesButtonText != null ? parameters.yesButtonText : ModalPopupsDefaults.yesButtonText;
ModalPopupsDefaults.noButtonText = parameters.noButtonText != null ? parameters.noButtonText : ModalPopupsDefaults.noButtonText;
ModalPopupsDefaults.cancelButtonText = parameters.cancelButtonText != null ? parameters.cancelButtonText : ModalPopupsDefaults.cancelButtonText;
ModalPopupsDefaults.titleBackColor = parameters.titleBackColor != null ? parameters.titleBackColor : ModalPopupsDefaults.titleBackColor;
ModalPopupsDefaults.titleFontColor = parameters.titleFontColor != null ? parameters.titleFontColor : ModalPopupsDefaults.titleFontColor;
ModalPopupsDefaults.popupBackColor = parameters.popupBackColor != null ? parameters.popupBackColor : ModalPopupsDefaults.popupBackColor;
ModalPopupsDefaults.popupFontColor = parameters.popupFontColor != null ? parameters.popupFontColor : ModalPopupsDefaults.popupFontColor;
ModalPopupsDefaults.footerBackColor = parameters.footerBackColor != null ? parameters.footerBackColor : ModalPopupsDefaults.footerBackColor;
ModalPopupsDefaults.footerFontColor = parameters.footerFontColor != null ? parameters.footerFontColor : ModalPopupsDefaults.footerFontColor;
ModalPopupsDefaults.fontFamily = parameters.fontFamily != null ? parameters.fontFamily : ModalPopupsDefaults.fontFamily;
ModalPopupsDefaults.fontSize = parameters.fontSize != null ? parameters.fontSize : ModalPopupsDefaults.fontSize;
},
Alert: function(id, title, message, parameters) {
//Get parameters
parameters = parameters || {};
if(!title) title = "Alert";
//'Alert' specific parameters
parameters.buttons = "ok";
parameters.okButtonText = parameters.okButtonText != null ? parameters.okButtonText : ModalPopupsDefaults.okButtonText;
//Create layers
var myLayers = ModalPopups._createAllLayers(id, title, message, parameters);
var oPopupBody = myLayers[4];
//'Alert' specific setup of Body
oPopupBody.innerHTML = message;
//Style all layers
ModalPopups._styleAllLayers(id, parameters, myLayers);
},
Confirm: function(id, btn, title, question, parameters) {
//Get parameters
parameters = parameters || {};
if(!title) title = "Confirm";
//'Confirm' specific parameters
//parameters.buttons = "yes,no,cancel";
parameters.buttons = btn;
parameters.yesButtonText = parameters.yesButtonText != null ? parameters.yesButtonText : ModalPopupsDefaults.yesButtonText;
parameters.noButtonText = parameters.noButtonText != null ? parameters.noButtonText : ModalPopupsDefaults.noButtonText;
//Create layers
var myLayers = ModalPopups._createAllLayers(id, title, question, parameters);
var oPopupBody = myLayers[4];
//'Confirm' specific setup of Body
oPopupBody.innerHTML = question;
//Style all layers
ModalPopups._styleAllLayers(id, parameters, myLayers);
},
YesNoCancel: function(id, title, question, parameters) {
//Get parameters
parameters = parameters || {};
if(!title) title = "YesNoCancel";
//'Confirm' specific parameters
parameters.buttons = "yes,no,cancel";
parameters.yesButtonText = parameters.yesButtonText != null ? parameters.yesButtonText : ModalPopupsDefaults.yesButtonText;
parameters.noButtonText = parameters.noButtonText != null ? parameters.noButtonText : ModalPopupsDefaults.noButtonText;
parameters.cancelButtonText = parameters.cancelButtonText != null ? parameters.cancelButtonText : ModalPopupsDefaults.cancelButtonText;
//Create layers
var myLayers = ModalPopups._createAllLayers(id, title, question, parameters);
var oPopupBody = myLayers[4];
//'Confirm' specific setup of Body
oPopupBody.innerHTML = question;
//Style all layers
ModalPopups._styleAllLayers(id, parameters, myLayers);
},
Prompt: function(id, title, question, parameters) {
//Get parameters
parameters = parameters || {};
if(!title) title = "Prompt";
//'Prompt' specific parameters
parameters.buttons = "ok,cancel";
parameters.okButtonText = parameters.okButtonText != null ? parameters.okButtonText : "OK";
parameters.cancelButtonText = parameters.cancelButtonText != null ? parameters.cancelButtonText : "Cancel";
//Create layers
var myLayers = ModalPopups._createAllLayers(id, title, question, parameters);
var oPopupBody = myLayers[4];
var txtStyle = "";
if(parameters.width != null)
txtStyle = "width:95%;";
//'Prompt' specific setup of Body
var txtHtml = question + "
";
txtHtml += "";
oPopupBody.innerHTML = txtHtml;
//Style all layers
ModalPopups._styleAllLayers(id, parameters, myLayers);
//Focus input box
ModalPopupsSupport.findControl(id+"_promptInput").focus();
},
GetPromptInput: function(id) {
var promptValue = ModalPopupsSupport.findControl(id+"_promptInput");
return promptValue;
},
GetPromptResult: function(id) {
var promptValue = ModalPopupsSupport.findControl(id+"_promptInput");
return promptValue;
},
GetCustomControl: function(id) {
return ModalPopupsSupport.findControl(id);
},
Indicator: function(id, title, message, parameters) {
//Get parameters
parameters = parameters || {};
if(!title) title = "Indicator";
//'Indicator' specific parameters
if(parameters.buttons == null)
parameters.buttons = "";
//Create layers
var myLayers = ModalPopups._createAllLayers(id, title, message, parameters);
var oPopupBody = myLayers[4];
//'Indicator' specific setup of Body
oPopupBody.innerHTML = message;
//Style all layers
ModalPopups._styleAllLayers(id, parameters, myLayers);
},
//Custom modal popup. parameters.buttons is a mandatory parameter
Custom: function(id, title, contents, parameters) {
//Get parameters
parameters = parameters || {};
if(!title) title = "Custom";
if(parameters.buttons == null)
{
alert("buttons is a required parameter. ie: buttons: 'yes,no' or buttons: 'ok'.\nPossible buttons are yes, no, ok, cancel");
return;
}
//Create layers
var myLayers = ModalPopups._createAllLayers(id, title, contents, parameters);
var oPopupBody = myLayers[4];
//'Custom' specific setup of Body
oPopupBody.innerHTML = contents;
//Style all layers
ModalPopups._styleAllLayers(id, parameters, myLayers);
},
//Cancel/Close modal popup
Close: function(id) {
window.onresize = null;
window.onscroll = null;
//try
//{
document.body.removeChild(ModalPopupsSupport.findControl(id+"_background"));
document.body.removeChild(ModalPopupsSupport.findControl(id+"_popup"));
document.body.removeChild(ModalPopupsSupport.findControl(id+"_shadow"));
//}
//catch
//{
//}
},
//Cancel/Close modal popup
Cancel: function(id) {
ModalPopups.Close(id);
},
//Support variable to put each layer on top, increases everytime a modal popup is created
_zIndex: 10000,
//Support function to create all layers
_createAllLayers: function(id, title, message, parameters) {
//Create all 6 layers for; BackGround, Popup, Shadow, PopupTitle, PopupBody, PopupFooter
var oBackground = ModalPopupsSupport.makeLayer(id+'_background', true, null); // 0
var oPopup = ModalPopupsSupport.makeLayer(id+'_popup', true, null); // 1
var oShadow = ModalPopupsSupport.makeLayer(id+'_shadow', true, null); // 2
var oPopupTitle = ModalPopupsSupport.makeLayer(id+'_popupTitle', true, oPopup); // 3
var oPopupBody = ModalPopupsSupport.makeLayer(id+'_popupBody', true, oPopup); // 4
var oPopupFooter = ModalPopupsSupport.makeLayer(id+'_popupFooter', true, oPopup); // 5
//Set default values for button related parameters; OK, Yes, No, Cancel
var okButtonText = parameters.okButtonText != null ? parameters.okButtonText : ModalPopupsDefaults.okButtonText;
var yesButtonText = parameters.yesButtonText != null ? parameters.yesButtonText : ModalPopupsDefaults.yesButtonText;
var noButtonText = parameters.noButtonText != null ? parameters.noButtonText : ModalPopupsDefaults.noButtonText;
var cancelButtonText = parameters.cancelButtonText != null ? parameters.cancelButtonText : ModalPopupsDefaults.cancelButtonText;
var onOk = parameters.onOk != null ? parameters.onOk : "ModalPopups.Close(\"" + id + "\");";
var onYes = parameters.onYes != null ? parameters.onYes : "ModalPopups.Close(\"" + id + "\");";
var onNo = parameters.onNo != null ? parameters.onNo : "ModalPopups.Close(\"" + id + "\");";
var onCancel = parameters.onCancel != null ? parameters.onCancel : "ModalPopups.Close(\"" + id + "\");";
//Create popup 'title' layer
oPopupTitle.innerHTML = "
" + title + " |