// netaffiliation netBox v0.5b
// Last Mod : Ven 8 fev. 08
// Compatibility Check : ie6, ie7, Firefox 2
// author: mathieu
// requirement : prototype.js, scriptaculous.js, neta_dom.js
// v0.5b => Ajout paramétrage de boîte modale sans structure (sans l'habillage)
// Améliroation à prévoir :
// Détecter le type du contenu : image (jpg,gif,png...), flash, code html (balises) ou PAGE html (....).
// En fonction du type de contenu, apporter une présentation différente.
/***********************************************************/
/************************ EXECUTION ************************/
/***********************************************************/
var modal_liste = new Array();
$(document).ready(modal_set_action);
/** Surveillance du resize de la page pour recalculer les positions/dimensions de l'overlay et du contenu **/
$(window).bind('resize', function() { if(typeof(modal_class) != 'undefined') modal_class.modifiePosition(); });
/***********************************************************/
/************************ FONCTIONS ************************/
/***********************************************************/
function modal_set_action() {
try {
modal_class = new modal();
/** Parcours du tableau et ajout des propriétés de clic **/
jQuery.each(modal_liste, function(){
var myBind = this;
$("#"+this.id).unbind('click'); // Au cas ou on a chargé deux fois le tableau on ne remet pas une deuxieme fois l'event click !
$("#"+this.id).bind('click', function(e) { if(typeof(modal_class) != 'undefined') modal_class.start(myBind, e); });
$("#"+this.id).css('cursor', 'pointer');
});
}
catch(ex) { alert(ex); }
}
function modal_set_param(id, width, height, url, modal, onload, callback, classOverlay, classContenu, loader, structure) {
/* Paramétrages */
this.id = id;
this.width = width;
this.height = height;
this.url = url;
this.modal = (modal) ? true : false;
this.onload = onload;
this.callback = callback;
this.classOverlay = (typeof(classOverlay) != 'undefined') ? classOverlay : '';
this.classContenu = (typeof(classContenu) != 'undefined') ? classContenu : '';
this.loader = (typeof(loader) != 'undefined') ? loader : '';
this.structure = (typeof(structure) != 'undefined') ? false : true;
}
/** Fonction de création du tableau d'element et de ses propriétés **/
function modal() {
this.param = null;
/* Propriétés paramétrables */
this.prop = new Object();
this.prop.imageClosePosition = new Array(20, 18); /* Position de la croix de fermeture */
this.prop.imageCornerDim = new Array(29, 28); // Dimensions en pixel(0=>width, 1=>height) des images servant de contour à la boîte modal
this.prop.opacite = 0.65; // opacite de la div overlay
this.prop.duration = 250; // Durée utilisés dans les transition opacités en ms
this.prop.minTopMargin = 20; // marge minimum (en px) entre le haut de la page et la div de contenue
this.prop.divOverlayClass = 'modalOverlay_defaut';
this.prop.divContenuClass = 'modalContenu_defaut';
this.prop.loader = 'http://img.netaffiliation.com/v/images/ajax-loader.gif';
this.prop.imageModalClose = 'http://img.netaffiliation.com/v/images/modal-close.png';
this.prop.imgLoaderId = 'modalImgLoader';
this.prop.divOverlayId = 'modalOverlay'; // id de la div grise englobante (overlay)
this.prop.divContenuId = 'modalContenu'; // id de la div qui contiendra le code
this.prop.divContenuChargeId = 'modalContenuCharge'; // id de la div qui contiendra le code html chargé en ajax
this.prop.decal = null; // id de la div du menu de module
this.prop.isIE6 = (jQuery.browser.msie && navigator.userAgent.lastIndexOf("MSIE 6") > 0);
this.prop.xhr = null;
this.prop.close = null;
this.preload();
}
/*******************************************************/
/************************ CLASS ************************/
/*******************************************************/
modal.prototype = {
/** Associée à la fonction onclick **/
start: function(param, e) {
this.param = param;
this.prop.close = false;
// On test voir si on a déjà une modal ouverte, si oui on la kick et on stop l'execution
if($('#'+this.prop.divContenuId).length > 0) { this.ferme(); return false; }
// Masquage des select et flash dans le cas de ie6
if(this.prop.isIE6) this.IE6_HideElements();
/* Création de la div overlay et ajout au DOM */
var div_overlay = $("#"+this.prop.divOverlayId);
if(div_overlay.length == 0) {
var div_overlay = $('');
div_overlay.appendTo('body'); // var bodyElement = document.getElementsByTagName('body').item(0); // ATTENTION Compatibilité ie6
}
/* Si div overlay est déjà créée on ne fait que la mettre en display:block */
else { div_overlay.css('display', 'block'); }
/* On doit redéfinir la class ici car elle peut dépendre de chaques élements */
var classOverlay = (this.param.classOverlay.lenght > 0) ? this.param.classOverlay : this.prop.divOverlayClass;
div_overlay.addClass(classOverlay);
var myBind = this;
/* Ajout des propriétés de modalités */
if(this.param.modal === false) {
div_overlay.bind('click', function() { if(typeof(modal_class) != 'undefined') myBind.ferme(); return; });
div_overlay.css('cursor', 'pointer');
}
/** Apparition progressive de l'overlay puis lancement de l'affichage du contenu **/
div_overlay.fadeTo(this.prop.duration, this.prop.opacite, function() { myBind.chargeContenu(); });
div_overlay = null; param = null; classOverlay = null;
delete(div_overlay); delete(param); delete(classOverlay);
},
chargeContenu: function() {
/* Création de la div de contenu et ajout dans la balise parente */
var div_contenu = $('');
/* Ajout de la structure permettant l'arrondissement des angles */
div_contenu.html(this.struct(this.param.structure));
var classContenu = (this.param.classContenu.length > 0) ? this.param.classContenu : this.prop.divContenuClass;
div_contenu.addClass(classContenu);
/* On calcul les dimensions en fonction des images de coins */
/* Le contenu est en display:none pour éviter un premier affichage sans les tailles qui pourrait donc être désagréable avant la fin des calculs */
div_contenu.css({
'diplay': 'none',
'width':(this.param.width+(this.prop.imageCornerDim[0]*2))+'px',
'height':(this.param.height+(this.prop.imageCornerDim[1]*2))+'px'
});
var myBind = this;
if(this.param.modal === false) {
var div_close = $('');
div_close.css({
'top':this.prop.imageClosePosition[1]+'px',
'right':this.prop.imageClosePosition[0]+'px'
});
div_close.html('
');
div_close.bind('click', function() { myBind.ferme(); });
div_contenu.prepend(div_close);
div_close = null; delete(div_close);
}
/* On va devoir ajouter le contenu dans le DOM avant de pouvoir calculer toutes les dimensions pour le design de la boite */
if(this.prop.close) { this.ferme(); return; }
div_contenu.appendTo('body');
/* On ajoutes les dimensions de chaques elements qui sont calculé en fonction du contenu et des images de coins */
$('#bModalHM, #bModalBM').css({ 'width':this.param.width+'px' });
$('#bModalMilieu, #bModalMG, #bModalMD').css({ 'height':this.param.height+'px' });
var div_contenu_charge = $('#'+myBind.prop.divContenuChargeId);
div_contenu_charge.css({
'left':this.prop.imageCornerDim[0]+'px',
'width':this.param.width+'px',
'height':this.param.height+'px'
});
this.modifiePosition();
/* Ajout de l'image de loading */
srcLoader = (this.param.loader.length > 0) ? this.param.loader : this.prop.loader;
var imgLoader = $(document.createElement('img')).attr({ 'id':this.prop.imgLoaderId, 'src':srcLoader });
imgLoader.css({
'top':(this.param.height/2)-(parseInt(imgLoader[0].height)/2)+'px',
'left':(this.param.width/2)-(parseInt(imgLoader[0].width)/2)+'px'
});
var asynchrone = (this.param.onload.length > 0) ? false : true; // Si on souhaite évaluer du code à la fin du chargement on met en mode synchrone afin d'etre sur que le contenu est charge
r = (this.prop.isIE6) ? '123456789' : Math.random(); // AFAIRE finir ie6
this.prop.xhr = $.ajax({
async: asynchrone,
type: 'post',
url: this.param.url,
data: 'r='+r,
dataType: 'html',
cache: false,
beforeSend: function() { div_contenu_charge.append(imgLoader); return; },
success: function(htmlResp) { $('#'+myBind.prop.divContenuChargeId).html(htmlResp); return; },
error: function() { myBind.ferme(); return; }
});
eval(this.param.onload);
div_contenu = null; imgLoader = null; div_contenu_charge = null;
delete(div_contenu); delete(imgLoader); delete(div_contenu_charge);
},
/** Supression **/
ferme: function() {
this.prop.close = true;
/* Execption à catcher ! */
/* Dans le cas ou la fenêtre de contenu n'est pas dans le dom on ferme tout */
try { $('#'+this.prop.divContenuId).remove(); } catch(ex) { alert(ex); }
// On kill la requete Ajax si elle tourne toujours
if(this.prop.xhr != null) { this.prop.xhr.abort(); this.prop.xhr = null; }
var myBind = this;
/** Disparition progressive de l'overlay puis lancement de l'affichage du contenu **/
$('#'+myBind.prop.divOverlayId).fadeOut(this.duration, function() {
if(myBind.param.callback.length > 0) eval(myBind.param.callback);
$('#'+myBind.prop.divOverlayId).css('opacity', 0);
if(myBind.prop.isIE6) myBind.IE6_ShowElements();
return;
});
return false;
},
modifiePosition: function() {
var div_contenu = $('#'+this.prop.divContenuId);
if(div_contenu.length > 0) {
var viewportDimension = {'width':$(window).width(), 'height':$(window).height()}; // Dimensions du viewport
var pageDimensions = this.scrollCompatibilite(); // Dimensions du viewport+scroll
/** Calcul du positionnement de la div de contenu **/
/* NB: Le positionnement de cette div se fait TOUJOURS en fonction de la taille de la page */
// Si présence d'une div sur le côté que l'on souhaite sortir de l'alignement
var decalage = (this.param.decal != null) ? $('#'+this.param.decal).width() : 0;
if((div_contenu_left = (((viewportDimension.width-decalage)/2)-(div_contenu.width()/2))) < 0) div_contenu_left = 0;
if((div_contenu_top = ((viewportDimension.height/2)+$(window).scrollTop()-(div_contenu.height()))) < this.prop.minTopMargin) { div_contenu_top = this.prop.minTopMargin; }
div_contenu.css({ 'left':div_contenu_left+'px', 'top':div_contenu_top+'px' });
/** Calcul des nouvelles dimensions de l'overlay **/
/** SEULEMENT SI LA POSITION FIXED N'EST PAS PRISES EN COMPTE */
/* ATTENTION : Il faut bien couvrir l'ensemble de la page */
var div_overlay = $('#'+this.prop.divOverlayId);
if(div_overlay.length > 0 && div_overlay.css('position') == 'absolute') {
if(viewportDimension.width > pageDimensions.scrollWidth) var div_overlay_width = viewportDimension.width;
else var div_overlay_width = pageDimensions.scrollWidth;
if(viewportDimension.height > pageDimensions.scrollHeight) {
var div_overlay_height = viewportDimension.height;
}
else var div_overlay_height = pageDimensions.scrollHeight;
div_overlay.css({ 'width':div_overlay_width+'px', 'height':div_overlay_height+'px' });
div_overlay.css({
'width':document.documentElement.clientWidth+'px',
'height':document.documentElement.clientHeight+'px'
});
if(pageDimensions.scrollWidth > 0) var div_overlay_width = pageDimensions.scrollWidth+'px';
else var div_overlay_width = '100%';
if(pageDimensions.scrollHeight > 0) var div_overlay_height = pageDimensions.scrollHeight+'px';
else var div_overlay_height = '100%';
div_overlay.css({ 'width':div_overlay_width, 'height':div_overlay_height });
}
div_overlay = null;
delete(div_overlay);
}
div_contenu = null;
delete(div_contenu);
},
struct: function(complete) {
if(complete) return '';
else return '';
},
IE6_HideElements: function() {
var obj = $('select, object, embed');
jQuery.each(obj, function() {
if($(this).attr('visibility') === 'hidden') { $(this).attr('default_hidden', 'true'); }
$(this).css('visibility', 'hidden');
});
return;
},
IE6_ShowElements: function() {
var obj = $('select[default_hidden!=true], object[default_hidden!=true], embed[default_hidden!=true]');
jQuery.each(obj,function() {
$(this).css('visibility', 'visible');
});
return;
},
preload: function() {
$(''+this.struct(true)+'
').appendTo('body');
$('#'+this.prop.divContenuId).remove();
jQuery('![]()
').attr('src', this.prop.loader);
},
/** Permet la compatibilité entre navigateur pour les calcules des zones de scroll **/
scrollCompatibilite: function() {
if(document.documentElement && document.documentElement.scrollHeight) return document.documentElement;
else if (document.body) return document.body;
else { exit(); }
}
}