/****************************************************************************
* DHTML modal dialog box
* Created: August, 26th, 2006
* @class Purpose of class: Display a modal dialog box on the screen.
*****************************************************************************/
/**
* @constructor
*/
ModalMessage = function() {
this.url=''; // url of modal message
this.htmlOfModalMessage=''; // html of modal message
this.divs_transparentDiv; // Transparent div covering page content
this.divs_content; // Modal message div.
this.divs_shadow;
this.iframe; // Iframe used in ie
this.width=200;
this.height=400;
this.cssClassOfMessageBox=false; // Alternative css class of message box - in case you want a different appearance on one of them
this.shadowVisible=true;
this.shadowOffset=5; // X and Y offset of shadow(pixels from content box)
this.popupMsg=false; // gets set to true if a pop-up message is shown. Is used to resize the dialog
this.title="";
this.closeFunction="";
this.closeTitle="";
this.fast=false;
this.draggable=true;
this.resizable=false;
this.noPopupMsg=false;
this.completionCallback=null;
}
ModalMessage.prototype = {
/**
* Set source of the modal dialog box
*/
setSource : function(urlOfSource) {
this.url = urlOfSource;
}
,
/**
* Setting static HTML content for the modal dialog box.
* @param String newHtmlContent = Static HTML content of box
*/
setHtmlContent : function(newHtmlContent) {
this.htmlOfModalMessage = newHtmlContent;
if(this.divs_content) {
this.__resizeDivs(true,0);
}
}
,
/**
* Set the size of the modal dialog box
* @param int width = width of box
* @param int height = height of box
*/
setSize : function(width,height) {
this.width = width;
this.height = height;
}
,
/**
* Assign the message box to a new css class.(in case you wants a different appearance on one of them)
* @param String newCssClass = Name of new css class (Pass false if you want to change back to default)
*/
setCssClassMessageBox : function(newCssClass) {
this.cssClassOfMessageBox = newCssClass;
if(this.divs_content) {
if(this.cssClassOfMessageBox)
this.divs_content.className=this.cssClassOfMessageBox;
else
this.divs_content.className='modalDialog_contentDiv';
}
}
,
/**
* Specify the size of shadow
* @param Int newShadowOffset = Offset of shadow div(in pixels from message box - x and y)
*/
setShadowOffset : function(newShadowOffset) {
this.shadowOffset = newShadowOffset
}
,
/**
* Display the modal dialog box
*/
display : function() {
this.__createDivs();
// Redisplaying divs
if(this.fast) {
$("modalDialog_transparentDivs").display='block';
} else {
fadeIn("modalDialog_transparentDivs",0,0.5);
}
if(this.shadowVisible) {
this.divs_shadow.style.display='block';
}
if(runningInIE()) {
this.iframe.style.display='block';
}
this.__resizeDivs(true,0);
window.refToThisModalBoxObj = this;
this.__insertContent(); // Calling method which inserts content into the message div.
}
,
/**
* Display the modal dialog box
*/
setShadowVisible : function(visible) {
this.shadowVisible = visible;
this.redrawShadow();
}
,
/**
* Close the modal dialog box
*/
close : function() {
//document.documentElement.style.overflow = ''; // Setting the CSS overflow attribute of the tag back to default.
/* Hiding divs */
if(runningInIE() || this.fast) {
secureRemove(this.divs_transparentDiv);
} else {
fadeOut("modalDialog_transparentDivs",0.5,0);
setTimeout("secureRemove('modalDialog_transparentDivs')",600);
}
secureRemove(this.divs_content);
secureRemove(this.divs_shadow);
secureRemove(this.iframe);
secureRemove("popup_msg_div");
secureRemove("dialogWrapperDiv");
Event.stopObserving(document,"keypress",keypressListener);
}
,
/**
* Create the divs for the modal dialog box
* @private
*/
__createDivs : function() {
// Creating transparent div
this.divs_transparentDiv = Builder.node("div",{
className: 'modalDialog_transparentDivs',
id : 'modalDialog_transparentDivs',
style : "left:0px;top:0px"
});
document.body.appendChild(this.divs_transparentDiv);
// Creating content div
this.divs_content = Builder.node("div",{
className: 'modalDialog_contentDiv',
id : 'modalBox_contentDiv',
style : 'zIndex:900;'
});
if(runningInIE()) {
this.iframe = Builder.node('iframe', {
src : 'about:blank',
frameborder: '0',
style : 'zIndex:800;position:absolute'
});
document.body.appendChild(this.iframe);
}
document.body.appendChild(this.divs_content);
if(this.shadowVisible) {
// Creating shadow div
this.divs_shadow = Builder.node('div', {
className: 'modalDialog_contentDiv_shadow',
style : 'zIndex:850;'
});
document.body.appendChild(this.divs_shadow);
window.refToModMessage = this;
Event.observe(window,'scroll',function(e){ window.refToModMessage.__repositionTransparentDiv() });
Event.observe(window,'resize',function(e){ window.refToModMessage.__repositionTransparentDiv() });
}
}
,
/**
* Redraws the shadow div, useful after the shape or position of the main div has changed.
*/
redrawShadow : function() {
if(this.shadowVisible) {
// Creating temporary width variables since the actual width of the content div could be larger than this.width and this.height(i.e. padding and border)
var tmpWidth = this.divs_content.offsetWidth;
var tmpHeight = this.divs_content.offsetHeight;
this.divs_shadow.style.left = (this.divs_content.style.left.replace('px','')/1 + this.shadowOffset) + 'px';
this.divs_shadow.style.top = (this.divs_content.style.top.replace('px','')/1 + this.shadowOffset) + 'px';
this.divs_shadow.style.height = tmpHeight + 'px';
this.divs_shadow.style.width = tmpWidth + 'px';
if(runningInIE()){
this.iframe.style.left = this.divs_content.style.left;
this.iframe.style.top = this.divs_content.style.top;
this.iframe.style.width = this.divs_content.style.width;
this.iframe.style.height = this.divs_content.style.height;
}
this.divs_shadow.style.display='block';
} else if(this.divs_shadow) {
this.divs_shadow.style.display='none';
if(runningInIE()){
this.iframe.style.display='none';
}
}
}
,
/**
* Resize the message divs
* @private
*/
__resizeDivs : function(doCenter,widthOffset) {
var topOffset = Math.max(document.body.scrollTop,document.documentElement.scrollTop);
if(this.cssClassOfMessageBox)
this.divs_content.className=this.cssClassOfMessageBox;
else
this.divs_content.className='modalDialog_contentDiv';
if(!this.divs_transparentDiv) {
return;
}
// Preserve scroll position
var st = Math.max(document.body.scrollTop,document.documentElement.scrollTop);
var sl = Math.max(document.body.scrollLeft,document.documentElement.scrollLeft);
window.scrollTo(sl,st);
setTimeout('window.scrollTo(' + sl + ',' + st + ');',10);
this.__repositionTransparentDiv();
// Setting width and height of content div
this.divs_content.style.width = (this.width-widthOffset) + 'px';
this.divs_content.style.height= this.height + 'px';
// centering dialog
if(doCenter) {
var tmpWidth = this.divs_content.offsetWidth;
var tmpHeight = this.divs_content.offsetHeight;
var bodyWidth = document.viewport.getWidth();
var bodyHeight = document.viewport.getHeight();
this.divs_content.style.left = Math.ceil((bodyWidth - tmpWidth) / 2) + 'px';
this.divs_content.style.top = (Math.ceil((bodyHeight - tmpHeight) / 2) + topOffset) + 'px';
}
this.redrawShadow();
}
,
/**
* Insert content into the content div
* @private
*/
__repositionTransparentDiv : function() {
this.divs_transparentDiv.style.top = Math.max(document.body.scrollTop,document.documentElement.scrollTop) + 'px';
this.divs_transparentDiv.style.left = Math.max(document.body.scrollLeft,document.documentElement.scrollLeft) + 'px';
this.divs_transparentDiv.style.width = document.viewport.getWidth() + 'px';
this.divs_transparentDiv.style.height = document.viewport.getHeight() + 'px';
}
,
/**
* Insert content into the content div
* @private
*/
__insertContent : function() {
if(this.url){ // url specified - load content dynamically
ajax_loadContent("modalBox_contentDiv",this.url);
} else { // no url set, put static content inside the message box
this.divs_content.innerHTML = this.wrapTitleAndContent(this.htmlOfModalMessage);
setTimeout("modalDialog.checkWrapperSize()",50);
}
}
,
relativeResize : function(widthDelta,heightDelta,doCenter) {
this.setSize($("modalBox_contentDiv").getWidth()+widthDelta,$("modalBox_contentDiv").getHeight()+heightDelta);
if($("modalDialog_title")!=null) {
$("dialogWrapperDiv").style.width=$("dialogWrapperDiv").getWidth()+widthDelta+"px";
$("dialogWrapperDiv").style.height=$("dialogWrapperDiv").getHeight()+heightDelta+"px";
}
if($("modalDialog_title_content")!=null) {
$("modalDialog_title_content").style.width=$("modalDialog_title_content").getWidth()+widthDelta+"px";
$("modalDialog_title_content").style.height=$("modalDialog_title_content").getHeight()+heightDelta+"px";
}
if(typeof doCenter == "undefined") {
doCenter=false;
}
modalDialog.__resizeDivs(doCenter,4);
}
,
setTitle : function(newTitle) {
this.title=newTitle;
}
,
setCloseFunction : function(newCloseFunction) {
this.closeFunction=newCloseFunction;
}
,
setCloseTitle : function(newCloseTitle) {
this.closeTitle=newCloseTitle;
}
,
wrapTitleAndContent : function(dialogContent) {
if(this.title!="") {
if(this.closeFunction=="") {
var theCloseFunction="modalDialog.close()";
} else {
var theCloseFunction=this.closeFunction;
}
if(this.closeTitle=="") {
var theCloseTitle="Cancel";
} else {
var theCloseTitle=this.closeTitle;
}
var result=""+
"
"+
"
"+
"
"+
"
"+this.title+""+
"
";
if(!this.noPopupMsg) {
result+="";
}
result+=dialogContent+"
";
}
result=""+result;
if(this.resizable) {
result+="
";
}
result+="
"+
"
"+
"
"+
""+
"