/* Popup Utils
* Last Update: April 21, 2008(Alexandru Pasztor)
* Description:
Utilities needed for a popup
* Dependencies:
- Requires: jquery.js, /images/dc_BtnClosePopup.gif image for close button
- Used with: iframe_popup.js
* Modules:
- scroll
get scroll positioning
- viewport
get viewport size
- dc_ ... (dynamically created)
PopupIframe
an IFRAME created dynamically to be displayed as a popup IFRAME
PopupCloseBtn
the close button of the popup IFRAME
WaitPopup
the message displayed while popup is loading
ViewportMask
the viewport mask displayed under the popup layer
Each dc_ module functions separately. The popup dependencies are linked to the popup using the rel attribute, having the name of the IFRAME as value
* TODO: adding support for horizontal resizing
*/
jQuery.extend(
{
// scroll
scroll:
{
top : function()
{
if (self.pageYOffset)
return self.pageYOffset
else if(document.documentElement && document.documentElement.scrollTop)
return document.documentElement.scrollTop
else if(document.body)
return document.body.scrollTop
},
left : function()
{
if (self.pageXOffset)
return self.pageXOffset
else if(document.documentElement && document.documentElement.scrollLeft)
return document.documentElement.scrollLeft
else if(document.body)
return document.body.scrollLeft
}
},
// viewport
viewport:
{
width : function()
{
if(self.innerWidth)
return self.innerWidth
else if(document.documentElement && document.documentElement.clientWidth)
return document.documentElement.clientWidth
else if(document.body)
return document.body.clientWidth
},
height : function()
{
if(self.innerHeight)
return self.innerHeight
else if(document.documentElement && document.documentElement.clientHeight)
return document.documentElement.clientHeight
else if(document.body)
return document.body.clientHeight
}
},
/* IFRAME created dynamically to be displayed as a popup IFRAME
* Settings:
- popupIframeName
the name of the IFRAME; used for the "target" attribute of the trigger links, and also for the popup dependencies, identified using rel="[popupIframeName]"
- popupWidth
the width of the popup IFRAME
- popupHeight
the height of the popup IFRAME
- popupLeft
the left position of the popup, relatively to the wrapper
- popupTop
the top position of the popup, relatively to the wrapper
- popupBackground
background of the IFRAME
- popupDefaultSrc
the default source of the popup
- popupCloseButtonID
the ID of the popup close button. The button is dynamically created
- waitPopupID
the ID of the div displayed as "wait message". The div is dynamically created
- popupMaskID
the ID of the div blocking other content interaction outside the popup. Dynamically created.
- filterAndFormatContent
the function called when the popup IFRAME is loaded, for formatting the content
- popupParentNode
the popup parent node, given as jQuery object. All the elements dynamically created(popup IFRAME, popup close button, wait message, popup mask) will be appended to this node. Default: body element
*/
dc_PopupIframe: function(settings)
{
settings = jQuery.extend({
popupIframeName: 'dc_PopupIframe',
popupWidth: 400,
popupHeight: 300,
popupLeft: 'viewportCenter',
popupTop: 'viewportCenter',
popupBackground: 'transparent',
popupDefaultSrc: '',
popupCloseButtonID: 'dc_PopupCloseButton',
waitPopupID: 'dc_WaitPopup',
popupMaskID: 'dc_ViewportMask',
filterAndFormatContent: function(popupIframeName){}, // function for filtering and formatting content
popupParentNode: jQuery('body')
}
, settings)
// creating and formatting the iframe element. default positioning: viewport center
var posX = (settings.popupLeft == 'viewportCenter')?(Math.round((jQuery(window).width() - settings.popupWidth)/2) + 'px'):settings.popupLeft;
var posY = (settings.popupTop == 'viewportCenter')?(jQuery.scroll.top() + (jQuery.viewport.height() - settings.popupHeight)/2 + 'px'):settings.popupTop;
var dcpi = jQuery('')
.css({
background: settings.popupBackground,
width: settings.popupWidth + 'px',
height: settings.popupHeight + 'px',
overflow: 'hidden',
position: 'absolute',
padding: '0px',
margin: '0px',
zIndex: 3000,
left: posX,
top: posY,
visibility: 'hidden'
})
.appendTo(settings.popupParentNode);
dcpi.extend({
hide: function()
{
jQuery(this).css('visibility', 'hidden')
},
show: function()
{
jQuery(this).css('visibility', 'visible')
}
})
return dcpi;
},
/* The close button of the popup IFRAME
* Settings:
- popupIframeName
the name of the IFRAME; used for the "target" attribute of the trigger links, and also for the popup dependencies, identified using rel="[popupIframeName]"
- popupCloseButtonID
the ID of the popup close button. The button is dynamically created
- waitPopupID
the ID of the div displayed as "wait message". The div is dynamically created
- popupMaskID
the ID of the div blocking other content interaction outside the popup. Dynamically created.
- popupParentNode
the popup parent node, given as jQuery object. All the elements dynamically created(popup IFRAME, popup close button, wait message, popup mask) will be appended to this node. Default: body element
- triggerDynamicClass
the name of the CSS class associated to the trigger when clicked on. Used for manipulating the "selected" state
- triggerSelectionClass
the name of the CSS class associated with the trigger when the popup is opened. Default: "selected".
- disabledElementsClass
the name of the CSS class associated with the elements disabled when the popup is open. Example: select elements. The class is used to hide/show elements.
- whenClicked
function called when the close button is clicked on
*/
dc_PopupCloseBtn: function(settings)
{
settings = jQuery.extend({
popupIframeName: 'dc_PopupIframe',
popupCloseButtonID: 'dc_PopupCloseButton',
waitPopupID: 'dc_PopupWaitMessage',
popupMaskID: 'dc_ViewportMask',
popupParentNode: jQuery('body'),
triggerDynamicClass: 'dc_PopupTrigger',
triggerSelectionClass: 'selected',
disabledElementsClass: 'disabledByPopup',
whenClicked: function()
{
// remove selection class from the trigger
jQuery('.' + dcp.settings.triggerDynamicClass)
.removeClass(dcp.settings.triggerSelectionClass);
// remove popup and popup dependencies
jQuery('iframe[name=' + dcp.settings.popupIframeName + ']')
.add('[rel=' + dcp.settings.popupIframeName + ']')
.remove();
// make elements disabled by popup visible
jQuery('.'+ dcp.settings.disabledElementsClass)
.removeClass(dcp.settings.disabledElementsClass)
.css('visibility', 'visible')
}
},
settings);
var popup = jQuery('iframe[name=' + settings.popupIframeName + ']');
var closeBtn = jQuery('');
closeBtn.css({
width: '14px',
height: '14px',
overflow: 'hidden',
textIndent: '-9999px',
background: 'url(/assets/images/dc_BtnClosePopup.gif) 0px 0px no-repeat',
position: 'absolute',
zIndex: popup.css('zIndex') + 1,
left: parseInt(popup.css('left')) +
popup.width() +
(parseInt(popup.css('border-left-width'))||0) -
20 +
'px',
top: parseInt(popup.css('top')) +
(parseInt(popup.css('border-top-width'))||0) +
(parseInt(popup.css('margin-top'))||0) +
6 +
'px',
display: 'none'
})
.click(function(){
settings.whenClicked.call();
return false;
})
.appendTo(settings.popupParentNode);
return closeBtn
},
/* The popup message displayed while popup is loading
* Settings:
- popupIframeName
the name of the IFRAME; used for the "target" attribute of the trigger links, and also for the popup dependencies, identified using rel="[popupIframeName]"
- waitPopupID
the ID of the div temporary wait popup
- waitMessage
the message displayed inside the temporary popup
- popupParentNode
the popup parent node, given as jQuery object. All the elements dynamically created(popup IFRAME, popup close button, wait message, popup mask) will be appended to this node. Default: body element
*/
dc_WaitPopup: function(settings)
{
settings = jQuery.extend({
popupIframeName: 'dc_PopupIframe',
waitPopupID: 'dc_WaitPopup',
waitMessage: 'Please wait...',
popupParentNode: jQuery('body')
},
settings);
var dcwp = jQuery('')
.css({
background: '#000',
border: '1px solid #9DA106',
color: '#9DA106',
width: '200px',
height: '100px',
position: 'absolute',
zIndex: 4000,
left: Math.round((jQuery(document).width() - 200)/2) + 'px',
top: jQuery.scroll.top() + (jQuery.viewport.height() - 100)/2 + 'px',
textAlign: 'center',
lineHeight: '100px',
visibility: 'hidden'
})
.appendTo(settings.popupParentNode);
dcwp.extend({
hide: function()
{
var wL = jQuery(this);
wL.fadeTo('fast', 0.1, function(){jQuery(this).css('visibility', 'hidden')})
},
show: function()
{
var wL = jQuery(this);
wL.css({
opacity: 0.1,
visibility: ''
})
.fadeTo('fast', 1);
}
});
return dcwp;
},
/* The viewport mask displayed under the popup layer
* Settings:
- popupIframeName
the name of the IFRAME; used for the "target" attribute of the trigger links, and also for the popup dependencies, identified using rel="[popupIframeName]"
popupIframeName: 'dc_PopupIframe',
popupMaskID: 'dc_ViewportMask',
popupParentNode: jQuery('body'),
whenClicked: function(){},
disabledElementsClass: 'disabledByMask'
- popupMaskID
the ID of the div blocking other content interaction outside the popup. Dynamically created.
- popupParentNode
the popup parent node, given as jQuery object. All the elements dynamically created(popup IFRAME, popup close button, wait message, popup mask) will be appended to this node. Default: body element
- filterAndFormatContent
the function called when the popup IFRAME is loaded, for formatting the content
- popupParentNode
the popup parent node, given as jQuery object. All the elements dynamically created(popup IFRAME, popup close button, wait message, popup mask) will be appended to this node. Default: body element
- whenClicked
function called when the popup mask is clicked on
- disabledElementsClass
the name of the CSS class associated with the elements disabled when the popup is open. Example: select elements. The class is used to hide/show elements.
*/
dc_ViewportMask: function(settings)
{
settings = jQuery.extend({
popupIframeName: 'dc_PopupIframe',
popupMaskID: 'dc_ViewportMask',
popupParentNode: jQuery('body'),
whenClicked: function(){},
disabledElementsClass: 'disabledByMask'
},
settings);
var dcvm = jQuery('')
.css({
background: '#000',
position: 'absolute',
zIndex: 1000,
left: '0px',
top: '0px',
width: jQuery(document).width() + 'px',
height: settings.popupParentNode.height() + 'px',
opacity: 0.12,
visibility: 'hidden'
})
.click(function()
{
settings.whenClicked.call();
})
.appendTo(settings.popupParentNode);
dcvm.extend({
hide: function()
{
var vm = jQuery(this);
vm.css('visibility', 'hidden');
jQuery('.' + settings.disabledElementsClass)
.css('visibility', 'visible')
.removeClass(settings.disabledElementsClass);
},
show: function()
{
var vm = jQuery(this);
vm.css('visibility', '');
jQuery('select')
.css('visibility', 'hidden')
.addClass(settings.disabledElementsClass);
}
});
return dcvm;
}
})