/************************************
****************************************
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, width, height, leftOffset, topOffset, opacity)
{
//hide any previosly shown popups
hideAllWarningPopups();
//prepare the popup
currentPopup = document.createElement("div");
currentPopup.id = "currentPopup";
currentPopup.innerHTML = bodyContent;
currentPopup.className = "messagePopBox";
currentPopup.style.position = "absolute";
currentPopup.style.width = width;
currentPopup.style.height = height;
document.body.insertBefore(currentPopup, null);
//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 = height;
if (height == null)
{
heightMeasured = measureHeight(currentPopup);
}
if (leftOffset.indexOf("center") != -1)
{
leftOffset = getCenteredLeftOffSetForElement(width) + 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");
}
//show the popup
currentPopup.style.left = leftOffset;
currentPopup.style.top = topOffset;
currentPopup.style.display = "block";
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()
{
//hide the messagebox
if (currentPopup != null)
{
currentPopup.parentNode.removeChild(currentPopup); //currentPopup.removeNode() is tempting, but it is IE only
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 arrayPageSize = getPageSize();
var overlayWidth = arrayPageSize[0];
var overlayHeight = arrayPageSize[1];
var bodyElem = document.getElementsByTagName("body").item(0);
transparentOverlay = document.createElement("div");
transparentOverlay.setAttribute('id','overlay');
transparentOverlay.style.display = 'block';
transparentOverlay.style.width = overlayWidth + 'px';
transparentOverlay.style.height = overlayHeight + 'px';
bodyElem.appendChild(transparentOverlay);
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)
{
document.getElementsByTagName("body").item(0).removeChild(transparentOverlay);
transparentOverlay = null;
}
}
//--------------------------------------------------------------------
//Library function for determining page size (so transparent overlay can cover entire screen area)
//
// getPageSize()
// Returns array with page width, height and window width, height
// Core code from - quirksmode.com
// Edit for Firefox by pHaez
//
function getPageSize(){
var xScroll, yScroll;
if (window.innerHeight && window.scrollMaxY) {
xScroll = window.innerWidth + window.scrollMaxX;
yScroll = window.innerHeight + window.scrollMaxY;
} else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
xScroll = document.body.scrollWidth;
yScroll = document.body.scrollHeight;
} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
xScroll = document.body.offsetWidth;
yScroll = document.body.offsetHeight;
}
var windowWidth, windowHeight;
// console.log(self.innerWidth);
// console.log(document.documentElement.clientWidth);
if (self.innerHeight) { // all except Explorer
if(document.documentElement.clientWidth){
windowWidth = document.documentElement.clientWidth;
} else {
windowWidth = self.innerWidth;
}
windowHeight = self.innerHeight;
} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
windowWidth = document.documentElement.clientWidth;
windowHeight = document.documentElement.clientHeight;
} else if (document.body) { // other Explorers
windowWidth = document.body.clientWidth;
windowHeight = document.body.clientHeight;
}
// for small pages with total height less then height of the viewport
if(yScroll < windowHeight){
pageHeight = windowHeight;
} else {
pageHeight = yScroll;
}
// console.log("xScroll " + xScroll)
// console.log("windowWidth " + windowWidth)
// for small pages with total width less then width of the viewport
if(xScroll < windowWidth){
pageWidth = xScroll;
} else {
pageWidth = windowWidth;
}
// console.log("pageWidth " + pageWidth)
arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight)
return arrayPageSize;
}
//------------------------------------------------------------
//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;
}
function measureHeight(elementToMeasure)
{
var height = 0;
if (elementToMeasure.offsetHeight)
{
height = elementToMeasure.offsetHeight;
}
return height;
}
/*
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 = 0;
if (window.document.body.scrollTop)
{
vertScrolledPixels = window.document.body.scrollTop;
}
else if (window.scrollY)
{
vertScrolledPixels = window.scrollY;
}
return getMiddleTopOffSetForElement(popElementHeight) + vertScrolledPixels;
}
/*
Gets the top offset necessary for centering the element vertically
*/
function getMiddleTopOffSetForElement(popElementHeight)
{
var windowHeight = null;
if (window.document.body.clientHeight)
{
//IE
windowHeight = window.document.body.clientHeight;
}
else if (window.innerHeight)
{
//Mozilla
windowHeight = window.innerHeight;
}
else
{
windowHeight = 593; //default is 768 minus 175 px tool and task bars
}
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 = null;
if (window.document.body.clientWidth)
{
//IE
windowWidth = window.document.body.clientWidth;
}
else if (window.innerWidth)
{
//Mozilla
windowWidth = window.innerWidth;
}
else
{
windowWidth = 1008; //default is 1024 minus 16 px scrollbar
}
return Math.floor((windowWidth / 2) - (popElementWidth / 2));
}
function showIframeWithOverlay(url)
{
showPopupContentFromIframe('iframeBorder', url, '700', '484', 'center', '150', 0.5);
}