/*
* nyroModal - jQuery Plugin
* http://nyromodal.nyrodev.com
*
* Copyright (c) 2008 Cedric Nirousset (nyrodev.com)
* Licensed under the MIT license
*
* $Date: 2009-05-14 (Thu, 14 May 2009) $
* $version: 1.5.0
*/
jQuery(function($) {
// -------------------------------------------------------
// Private Variables
// -------------------------------------------------------
var userAgent = navigator.userAgent.toLowerCase();
//var browserVersion = (userAgent.match( /.+(?:rv|it|ra|ie)[\/: ]([\d.]+)/ ) || [0,'0'])[1];
var browserVersion = (userAgent.match(/.+(?:rv|webkit|khtml|opera|msie)[\/: ]([\d.]+)/ ) || [0,'0'])[1];
var isIE6 = (/msie/.test(userAgent) && !/opera/.test(userAgent) && parseInt(browserVersion) < 7 && !window.XMLHttpRequest);
var body = $('body');
var currentSettings;
var shouldResize = false;
var gallery = {};
// To know if the fix for the Issue 10 should be applied (or has been applied)
var fixFF = false;
// Used for retrieve the content from an hidden div
var contentElt;
var contentEltLast;
// Contains info about nyroModal state and all div references
var modal = {
started: false,
ready: false,
dataReady: false,
anim: false,
animContent: false,
loadingShown: false,
transition: false,
resizing: false,
closing: false,
error: false,
blocker: null,
blockerVars: null,
full: null,
bg: null,
loading: null,
tmp: null,
content: null,
wrapper: null,
contentWrapper: null,
scripts: new Array(),
scriptsShown: new Array()
};
// Indicate of the height or the width was resized, to reinit the currentsettings related to null
var resized = {
width: false,
height: false,
windowResizing: false
};
var initSettingsSize = {
width: null,
height: null,
windowResizing: true
};
var windowResizeTimeout;
// -------------------------------------------------------
// Public function
// -------------------------------------------------------
// jQuery extension function. A paramater object could be used to overwrite the default settings
$.fn.nyroModal = function(settings) {
if (!this)
return false;
return this.each(function() {
var me = $(this);
if (this.nodeName.toLowerCase() == 'form') {
me
.unbind('submit.nyroModal')
.bind('submit.nyroModal', function(e) {
if (me.data('nyroModalprocessing'))
return true;
if (this.enctype == 'multipart/form-data') {
processModal($.extend(settings, {
from: this
}));
return true;
}
e.preventDefault();
processModal($.extend(settings, {
from: this
}));
return false;
});
} else {
me
.unbind('click.nyroModal')
.bind('click.nyroModal', function(e) {
e.preventDefault();
processModal($.extend(settings, {
from: this
}));
return false;
});
}
});
};
// jQuery extension function to call manually the modal. A paramater object could be used to overwrite the default settings
$.fn.nyroModalManual = function(settings) {
if (!this.length)
processModal(settings);
return this.each(function(){
processModal($.extend(settings, {
from: this
}));
});
};
$.nyroModalManual = function(settings) {
processModal(settings);
};
// Update the current settings
// object settings
// string deep1 first key where overwrite the settings
// string deep2 second key where overwrite the settings
$.nyroModalSettings = function(settings, deep1, deep2) {
setCurrentSettings(settings, deep1, deep2);
if (!deep1 && modal.started) {
if (modal.bg && settings.bgColor)
currentSettings.updateBgColor(modal, currentSettings, function(){});
if (modal.contentWrapper && settings.title)
setTitle();
if (!modal.error && (settings.windowResizing || (!modal.resizing && (('width' in settings && settings.width == currentSettings.width) || ('height' in settings && settings.height == currentSettings.height))))) {
modal.resizing = true;
if (modal.contentWrapper)
calculateSize(true);
if (modal.contentWrapper && modal.contentWrapper.is(':visible') && !modal.animContent) {
if (fixFF)
modal.content.css({position: ''});
currentSettings.resize(modal, currentSettings, function() {
currentSettings.windowResizing = false;
modal.resizing = false;
if (fixFF)
modal.content.css({position: 'fixed'});
if ($.isFunction(currentSettings.endResize))
currentSettings.endResize(modal, currentSettings);
});
}
}
}
};
// Remove the modal function
$.nyroModalRemove = function() {
removeModal();
};
// Go to the next image for a gallery
// return false if nothing was done
$.nyroModalNext = function() {
var link = getGalleryLink(1);
if (link)
return link.nyroModalManual(getCurrentSettingsNew());
return false;
};
// Go to the previous image for a gallery
// return false if nothing was done
$.nyroModalPrev = function() {
var link = getGalleryLink(-1);
if (link)
return link.nyroModalManual(getCurrentSettingsNew());
return false;
};
// -------------------------------------------------------
// Default Settings
// -------------------------------------------------------
$.fn.nyroModal.settings = {
debug: false, // Show the debug in the background
blocker: false, // Element which will be blocked by the modal
modal: false, // Esc key or click backgrdound enabling or not
type: '', // nyroModal type (form, formData, iframe, image, etc...)
from: '', // Dom object where the call come from
hash: '', // Eventual hash in the url
processHandler: null, // Handler just before the real process
selIndicator: 'nyroModalSel', // Value added when a form or Ajax is sent with a filter content
formIndicator: 'nyroModal', // Value added when a form is sent
content: null, // Raw content if type content is used
bgColor: '#000000', // Background color
ajax: {}, // Ajax option (url, data, type, success will be overwritten for a form, url and success only for an ajax call)
swf: { // Swf player options if swf type is used.
wmode: 'transparent'
},
width: null, // default Width If null, will be calculate automatically
height: null, // default Height If null, will be calculate automatically
minWidth: 160, // Minimum width
minHeight: 160, // Minimum height
resizable: true, // Indicate if the content is resizable. Will be set to false for swf
autoSizable: true, // Indicate if the content is auto sizable. If not, the min size will be used
padding: 20, // padding for the max modal size
regexImg: '[^\.]\.(jpg|jpeg|png|tiff|gif|bmp)\s*$', // Regex to find images
addImageDivTitle: true, // Indicate if the div title should be inserted
defaultImgAlt: 'Image', // Default alt attribute for the images
setWidthImgTitle: true, // Set the width to the image title
ltr: true, // Left to Right by default. Put to false for Hebrew or Right to Left language
gallery: null, // Gallery name if provided
galleryLinks: 'PrevNext', // Use .nyroModalPrev and .nyroModalNext to set the navigation link
galleryCounts: galleryCounts, // Callback to show the gallery count
zIndexStart: 100,
css: { // Default CSS option for the nyroModal Div. Some will be overwritten or updated when using IE6
bg: {
position: 'absolute',
overflow: 'hidden',
top: 0,
left: 0,
height: '100%',
width: '100%'
},
wrapper: {
position: 'absolute',
top: '50%',
left: '50%'
},
wrapper2: {
},
content: {
overflow: 'auto'
},
loading: {
position: 'absolute',
top: '50%',
left: '50%',
marginTop: '-50px',
marginLeft: '-50px'
}
},
wrap: { // Wrapper div used to style the modal regarding the content type
div: '',
ajax: '',
form: '',
formData: '',
image: '',
swf: '',
iframe: '',
iframeForm: '',
manual: ''
},
closeButton: '', //Close', // Adding automaticly as the first child of #nyroModalWrapper
title: null, // Modal title
titleFromIframe: true, // When using iframe in the same domain, try to get the title from it
openSelector: '.popup', // selector for open a new modal. will be used to parse automaticly at page loading
closeSelector: '#theImage,#closeWindowButton', // selector to close the modal
contentLoading: 'Cancel', // Loading div content
errorClass: 'error', // CSS Error class added to the loading div in case of error
contentError: 'The requested content cannot be loaded. Please try again later. Close', // Content placed in the loading div in case of error
handleError: null, // Callback in case of error
showBackground: showBackground, // Show background animation function
hideBackground: hideBackground, // Hide background animation function
endFillContent: null, // Will be called after filling and wraping the content, before parsing closeSelector and openSelector and showing the content
showContent: showContent, // Show content animation function
endShowContent: null, // Will be called once the content is shown
beforeHideContent: null, // Will be called just before the modal closing
hideContent: hideContent, // Hide content animation function
showTransition: showTransition, // Show the transition animation (a modal is already shown and a new one is requested)
hideTransition: hideTransition, // Hide the transition animation to show the content
showLoading: showLoading, // show loading animation function
hideLoading: hideLoading, // hide loading animation function
resize: resize, // Resize animation function
endResize: null, // Will be called one the content is resized
updateBgColor: updateBgColor, // Change background color animation function
endRemove: null // Will be called once the modal is totally gone
};
// -------------------------------------------------------
// Private function
// -------------------------------------------------------
// Main function
function processModal(settings) {
if (modal.loadingShown || modal.transition || modal.anim)
return;
modal.started = true;
setDefaultCurrentSettings(settings);
if (!modal.full)
modal.blockerVars = modal.blocker = null;
modal.error = false;
modal.closing = false;
modal.dataReady = false;
modal.scripts = new Array();
modal.scriptsShown = new Array();
currentSettings.type = fileType();
if ($.isFunction(currentSettings.processHandler))
currentSettings.processHandler(currentSettings);
from = currentSettings.from;
url = currentSettings.url;
initSettingsSize.width = currentSettings.width;
initSettingsSize.height = currentSettings.height;
if (currentSettings.type == 'swf') {
// Swf is transforming as a raw content
setCurrentSettings({overflow: 'hidden'}, 'css', 'content');
currentSettings.content = '';
}
if (from) {
var jFrom = $(from);
if (currentSettings.type == 'form') {
var data = $(from).serializeArray();
data.push({name: currentSettings.formIndicator, value: 1});
if (currentSettings.selector)
data.push({name: currentSettings.selIndicator, value: currentSettings.selector.substring(1)});
$.ajax($.extend({}, currentSettings.ajax, {
url: url,
data: data,
type: jFrom.attr('method') ? jFrom.attr('method') : 'get',
success: ajaxLoaded,
error: loadingError
}));
debug('Form Ajax Load: '+jFrom.attr('action'));
showModal();
} else if (currentSettings.type == 'formData') {
// Form with data. We're using a hidden iframe
initModal();
jFrom.attr('target', 'nyroModalIframe');
jFrom.attr('action', url);
jFrom.prepend('');
if (currentSettings.selector)
jFrom.prepend('');
modal.tmp.html('');
$('iframe', modal.tmp)
.css({
width: currentSettings.width,
height: currentSettings.height
})
.error(loadingError)
.load(formDataLoaded);
debug('Form Data Load: '+jFrom.attr('action'));
showModal();
showContentOrLoading();
} else if (currentSettings.type == 'image') {
debug('Image Load: '+url);
var title = jFrom.attr('title') || currentSettings.defaultImgAlt;
initModal();
modal.tmp.html('').find('img').attr('alt', title);
modal.tmp.css({lineHeight: 0});
$('img', modal.tmp)
.error(loadingError)
.load(function() {
debug('Image Loaded: '+this.src);
$(this).unbind('load');
var w = modal.tmp.width();
var h = modal.tmp.height();
modal.tmp.css({lineHeight: ''});
resized.width = w;
resized.height = h;
setCurrentSettings({
width: w,
height: h,
imgWidth: w,
imgHeight: h
});
initSettingsSize.width = w;
initSettingsSize.height = h;
setCurrentSettings({overflow: 'hidden'}, 'css', 'content');
modal.dataReady = true;
if (modal.loadingShown || modal.transition)
showContentOrLoading();
})
.attr('src', url);
showModal();
} else if (currentSettings.type == 'iframeForm') {
initModal();
modal.tmp.html('');
debug('Iframe Form Load: '+url);
$('iframe', modal.tmp).eq(0)
.css({
width: '100%',
height: $.support.boxModel? '99%' : '100%'
})
.load(function(e) {
if (currentSettings.titleFromIframe && url.indexOf(window.location.hostname) > -1)
$.nyroModalSettings({title: $('iframe', modal.full).contents().find('title').text()});
});
modal.dataReady = true;
showModal();
} else if (currentSettings.type == 'iframe') {
initModal();
modal.tmp.html('');
debug('Iframe Load: '+url);
$('iframe', modal.tmp).eq(0)
.css({
width: '100%',
height: $.support.boxModel? '99%' : '100%'
})
.load(function(e) {
if (currentSettings.titleFromIframe && url.indexOf(window.location.hostname) > -1)
$.nyroModalSettings({title: $('iframe', modal.full).contents().find('title').text()});
});
modal.dataReady = true;
showModal();
} else if (currentSettings.type) {
// Could be every other kind of type or a dom selector
debug('Content: '+currentSettings.type);
initModal();
modal.tmp.html(currentSettings.content);
var w = modal.tmp.width();
var h = modal.tmp.height();
var div = $(currentSettings.type);
if (div.length) {
setCurrentSettings({type: 'div'});
w = div.width();
h = div.height();
if (contentElt)
contentEltLast = contentElt;
contentElt = div;
modal.tmp.append(div.contents());
}
initSettingsSize.width = w;
initSettingsSize.height = h;
setCurrentSettings({
width: w,
height: h
});
if (modal.tmp.html())
modal.dataReady = true;
else
loadingError();
if (!modal.ready)
showModal();
else
endHideContent();
} else {
debug('Ajax Load: '+url);
setCurrentSettings({type: 'ajax'});
var data = currentSettings.ajax.data || {};
if (currentSettings.selector) {
if (typeof data == "string") {
data+= '&'+currentSettings.selIndicator+'='+currentSettings.selector.substring(1);
} else {
data[currentSettings.selIndicator] = currentSettings.selector.substring(1);
}
}
$.ajax($.extend(true, currentSettings.ajax, {
url: url,
success: ajaxLoaded,
error: loadingError,
data: data
}));
showModal();
}
} else if (currentSettings.content) {
// Raw content not from a DOM element
debug('Content: '+currentSettings.type);
setCurrentSettings({type: 'manual'});
initModal();
modal.tmp.html($('').html(currentSettings.content).contents());
if (modal.tmp.html())
modal.dataReady = true;
else
loadingError();
showModal();
} else {
// What should we show here? nothing happen
}
}
// Update the current settings
// object settings
// string deep1 first key where overwrite the settings
// string deep2 second key where overwrite the settings
function setDefaultCurrentSettings(settings) {
debug('setDefaultCurrentSettings');
currentSettings = $.extend(true, {}, $.fn.nyroModal.settings, settings);
currentSettings.selector = '';
currentSettings.borderW = 0;
currentSettings.borderH = 0;
currentSettings.resizable = true;
setMargin();
}
function setCurrentSettings(settings, deep1, deep2) {
if (modal.started) {
if (deep1 && deep2) {
$.extend(true, currentSettings[deep1][deep2], settings);
} else if (deep1) {
$.extend(true, currentSettings[deep1], settings);
} else {
if (modal.animContent) {
if ('width' in settings) {
if (!modal.resizing) {
settings.setWidth = settings.width;
shouldResize = true;
}
delete settings['width'];
}
if ('height' in settings) {
if (!modal.resizing) {
settings.setHeight = settings.height;
shouldResize = true;
}
delete settings['height'];
}
}
$.extend(true, currentSettings, settings);
}
} else {
if (deep1 && deep2) {
$.extend(true, $.fn.nyroModal.settings[deep1][deep2], settings);
} else if (deep1) {
$.extend(true, $.fn.nyroModal.settings[deep1], settings);
} else {
$.extend(true, $.fn.nyroModal.settings, settings);
}
}
}
// Set the margin for postionning the element. Useful for IE6
function setMarginScroll() {
if (isIE6 && !modal.blocker) {
if (document.documentElement) {
currentSettings.marginScrollLeft = document.documentElement.scrollLeft;
currentSettings.marginScrollTop = document.documentElement.scrollTop;
} else {
currentSettings.marginScrollLeft = document.body.scrollLeft;
currentSettings.marginScrollTop = document.body.scrollTop;
}
} else {
currentSettings.marginScrollLeft = 0;
currentSettings.marginScrollTop = 0;
}
}
// Set the margin for the content
function setMargin() {
debug('setMargin');
setMarginScroll();
currentSettings.marginLeft = -(currentSettings.width+currentSettings.borderW)/2;
currentSettings.marginTop = -(currentSettings.height+currentSettings.borderH)/2;
if (!modal.blocker) {
currentSettings.marginLeft+= currentSettings.marginScrollLeft;
currentSettings.marginTop+= currentSettings.marginScrollTop;
}
debug('top: ' +currentSettings.marginTop);
debug('left: '+currentSettings.marginLeft);
/* currentSettings.marginLeft = -200; */
/* currentSettings.marginTop = -200; */
debug('width: ' +currentSettings.width);
debug('height: '+currentSettings.height);
}
// Set the margin for the current loading
function setMarginLoading() {
debug('setMarginLoading');
setMarginScroll();
var outer = getOuter(modal.loading);
currentSettings.marginTopLoading = -(modal.loading.height() + outer.h.border + outer.h.padding)/2;
currentSettings.marginLeftLoading = -(modal.loading.width() + outer.w.border + outer.w.padding)/2;
if (!modal.blocker) {
currentSettings.marginLefttLoading+= currentSettings.marginScrollLeft;
currentSettings.marginTopLoading+= currentSettings.marginScrollTop;
}
}
// Set the modal Title
function setTitle() {
var title = $('h1#nyroModalTitle', modal.contentWrapper);
if (title.length)
title.text(currentSettings.title);
else
modal.contentWrapper.prepend('