/***** MODIFIED - DO NOT REUSE *****/
/************************************
****************************************
Pop-Up library v1.0
Subsero A/S (subsero.dk)
****************************************
**************************************/
/*
:::::::::::::::
::: Purpose :::
:::::::::::::::
Alerting the user of errors with modal or non-modal pop-ups have previously been done using the javascript "alert" function (these where always modal).
With the introduction of improved browsersupport for javascript/dhtml, it is now possible to create nicer looking pop-ups for the user, which blends better with the design of the site.
This library was created to avoid repeating the plumbing code needed for the pop-up basics.
In addition to the raw pop-up function, the developer is also offered a number of convenient overloads.
::::::::::::::::::::::::::
::: Usage instructions :::
::::::::::::::::::::::::::
Copy these files to your solution:
css/popup_subserolib.css
javascript/popup_subserolib.js
Add the following includes to the section of your HTML
form elements contained in a form element are hidden.
Form elements () is not a problem in IE 7.0+ and Firefox 1.?, so the hideTroublesomeFormElements call should be excluded in these browsers
Since this is a mix of different libraries, and custom code, the function names and overall structuring could do with a bit more cleaning up (as always) - but it is not critical.
:::::::::::::::
::: History :::
:::::::::::::::
v1.0 (Torben Rohde, 2/1-2008)
--------------------------------
Initial version
*/
//--------------------------------------------------------------------
//Convenient overloads for showPopup
function showPopupContentFromDiv(contentElementId, width, height, leftOffset, topOffset, opacity)
{
showPopup
(
document.getElementById(contentElementId).innerHTML,
width, height, leftOffset, topOffset, opacity
);
}
function showPopupContentFromIframe(iframeBorderElementId, iframeUrl, width, height, leftOffset, topOffset, opacity)
{
var iframeHtml =
"";
var iframeBorderHtml = "#IFRAME#"; //default value if no iframeBorderElementId is null or an invalid id,
if (document.getElementById(iframeBorderElementId))
{
iframeBorderHtml = document.getElementById(iframeBorderElementId).innerHTML
}
showPopup
(
iframeBorderHtml.replace("#IFRAME#", iframeHtml),
width, height, leftOffset, topOffset, opacity
);
}
//--------------------------------------------------------------------
//Core functions for showing pop-up with transparent overlay on "background page"
var currentPopup = null;
var hiddenFormElements = null;
function showPopup(bodyContent, popupWidth, popupHeight, leftOffset, topOffset, opacity)
{
var cssWidth = popupWidth + "px";
var cssHeight = popupHeight + "px";
//hide any previosly shown popups
hideAllWarningPopups();
selectedFunction = "";
//prepare the popup
currentPopup = $(document.createElement("div"));
currentPopup.id = "currentPopup";
currentPopup.innerHTML = bodyContent;
//currentPopup.style.width = popupWidth;
//currentPopup.style.height = popupHeight;
currentPopup.addClassName("messagePopBox");
currentPopup.setStyle( {position:"absolute", width:cssWidth });
document.body.appendChild(currentPopup);
//calculate offsets
//height can be null, which means the height should be measured by looking at the actual content of the pop-up
var heightMeasured = popupHeight;
if (popupHeight == null)
{
heightMeasured = $(currentPopup).getHeight();
}
if (leftOffset.indexOf("center") != -1)
{
leftOffset = getCenteredLeftOffSetForElement(popupWidth) + getOffSetPixels(leftOffset, "center");
}
if (topOffset.indexOf("middle_scrolled") != -1)
{
topOffset = getScrolledMiddleTopOffSetForElement(heightMeasured) - getOffSetPixels(topOffset, "middle_scrolled");
}
else if (topOffset.indexOf("middle") != -1)
{
topOffset = getMiddleTopOffSetForElement(heightMeasured) + getOffSetPixels(topOffset, "middle");
}
//make sure popup stays in window
if (leftOffset < 0)
{ leftOffset = 0; }
if (topOffset < 0)
{ topOffset = 0; }
//show the popup
var cssLeftOffset = leftOffset + "px";
var cssTopOffset = topOffset + "px";
currentPopup.setStyle( {display:"block", left:cssLeftOffset, top:cssTopOffset });
hiddenFormElements = hideTroublesomeFormElements();
if (opacity != null)
{
showTransparentOverlay(opacity);
}
}
/*
Hides all form elements and returns an array with references to the hidden elements
*/
function hideTroublesomeFormElements()
{
//hide all form elements (they are always on top, so they will ruin the popup)
//get all forms
var allForms = document.getElementsByTagName("form");
var hideIndex = -1;
var formElements = null;
for (i = 0; i < allForms.length; i++)
{
for (j = 0; j < allForms[i].length; j++)
{
if (allForms[i][j].tagName == "SELECT")
{
if (formElements == null)
{
hideIndex = 0;
formElements = new Array(0);
}
else
{
hideIndex = formElements.length;
}
allForms[i][j].style.visibility = "hidden";
formElements[hideIndex] = allForms[i][j];
}
}
}
return formElements;
}
function showTroublesomeFormElements(hiddenElements)
{
//show all the hidden form elements again
//only the once that was removed when showing the popup (otherwise we risk showing popups that where not meant to be shown
if (hiddenElements != null)
{
for (k = 0; k < hiddenElements.length; k++)
{
hiddenElements[k].style.visibility = "visible";
}
hiddenElements = null;
}
}
function hideAllWarningPopups()
{
selectedFunction = "";
//hide the messagebox
if (currentPopup != null)
{
$(currentPopup).remove();
currentPopup = null;
}
showTroublesomeFormElements(hiddenFormElements);
HideTransparentOverlay();
}
//--------------------------------------------------------------------
//Library function for showing transparent overlay
transparentOverlay = null;
//opacity: A number from 0 to 1 (lower number means the background will show through more, higher number means background is less visible)
function showTransparentOverlay(opacity)
{
var theBody = $(document.body);
var overlayWidth = theBody.getWidth();
var overlayHeight = theBody.getHeight();
transparentOverlay = document.createElement("div");
transparentOverlay.setAttribute('id','overlay');
transparentOverlay.style.display = 'block';
transparentOverlay.style.width = overlayWidth + 'px';
transparentOverlay.style.height = overlayHeight + 'px';
theBody.insert(transparentOverlay, { position: top } );
var isIERegExp = new RegExp("MSIE");
var opacityFilterRegExp = new RegExp("alpha\([^\)]*\)", "gi");
if(isIERegExp.test(navigator.userAgent))
{
transparentOverlay.style.filter = transparentOverlay.style.filter.replace(opacityFilterRegExp,'') + 'alpha(opacity=' + (opacity * 100) + ')';
}
else
{
transparentOverlay.style.opacity = opacity;
}
}
function HideTransparentOverlay()
{
if (transparentOverlay != null)
{
$(transparentOverlay).remove();
transparentOverlay = null;
}
}
//------------------------------------------------------------
//Library function for centering the pop-ups
/*
Gets the offset pixel count from the special-format parameter string
Examples:
getOffSetPixels("middle_scrolled-320", "middle_scrolled") returns -320
getOffSetPixels("middle_scrolled200", "middle_scrolled") returns 200
getOffSetPixels("center150", "center") returns 150
getOffSetPixels("center", "center") returns 0
*/
function getOffSetPixels(orgOffsetParmValue, replacementKeyword)
{
var offSet = orgOffsetParmValue.replace(replacementKeyword, "");
if (offSet == "")
{
offSet = 0;
}
else
{
offSet = parseInt(offSet);
}
return offSet;
}
/*
Gets the top offset necessary for centering the element vertically
The function adjust for the current scroll position in the document, so the element can be shown in the place where the user is currently viewing
*/
function getScrolledMiddleTopOffSetForElement(popElementHeight)
{
var vertScrolledPixels = document.viewport.getScrollOffsets().top;
return getMiddleTopOffSetForElement(popElementHeight) + vertScrolledPixels;
}
/*
Gets the top offset necessary for centering the element vertically
*/
function getMiddleTopOffSetForElement(popElementHeight)
{
var windowHeight = document.viewport.getHeight();
var calculatedOffset = Math.floor((windowHeight / 2) - (popElementHeight / 2));
return calculatedOffset;
}
/*
Gets the left offset necessary for centering the element horizontally
*/
function getCenteredLeftOffSetForElement(popElementWidth)
{
var windowWidth = $(document.body).getWidth();
return Math.floor((windowWidth / 2) - (popElementWidth / 2));
}