/************
before.js : Fichier JS qui doit etre utilisé avant le chargement de la page
Ce fichier contient l:
- L'ajout d'une classe hasJS sur l'élément
- une variable de détection des navigator (extension de l'objet javascript "navigator")
- des fonctions appelées depuis la CSS (pngFix).
*************/
// ajout de classes au chargement + init de variables globales
document.documentElement.className += ' hasJS';
/* object navigator etendu avec quelques booleens pour la detection simplifiee du navigateur
utilisation :
if (navigator.ie) // msie
*/
if (!navigator) {
window.navigator = {};
}
with (window.navigator) {
navigator.ie = document.all && window.print && !window.opera;
navigator.ie6 = navigator.ie && /MSIE [56]/.test(navigator.userAgent);
navigator.quirksMode = navigator.ie && document.compatMode && document.compatMode=="BackCompat";
navigator.opera = window.opera;
}
/* other globals variables */
heightPropertyToUse = navigator.ie6 ? 'height' : 'minHeight';
/* fixPng :
@function : fixe les images de fond png 24 bits sous IE6 (pour la transparent alpha) ainsi que les tags ![]()
@desc : cette fonction est appelée par la CSS pour un élément qui a un PNG24Bits en background,
Un élément ( dans notre cas) est généré et mis en position:absolute avec z-index:-1 et des largeur/hauteur de 32000px, celui-ci contiendra l'image en PNG.afin de gérer les élément extensible.
Cette méthode a été utilisée afin de ne page avoir le bug ou certains contenus se retrouve désactivé (liens) lorsqu'on utilise le filter sur un élément.
L'élément conteneur se verra appliqué un position:relative (si position de base est 'static') et un overflow:hidden afin de bien cacher le le dépassement de l'éménet qui contient l'image.
Si on ne veut pas utiliser l'overflow:hidden ou on veut utiliser la methode 'crop' il est possible de passer des parametres à la fonction (cf @params)
Fonctionne aussi avec les tag ![]()
on le nécessaire est faire pour remplacer l'image, sans la désactiver (cf @additional)
@use : A utiliser dans la CSS, ex :
.myclass{
background:url('skin/nav/backgroundnav.png) no-repeat left top;
filter:expression(pngFix(this));
}
@params : pngFix(element:HTMLElement, noOverflow:boolean, scale:boolean);
- element : element HTML : passer this dans la CSS.
- noOverflow (true) : par defaut on utilise un overflow:hidden, sur le parent conteneur, si cela, gêne,
il suffit de passer la valeur true pour ce parametre, et automatiquement on utilisera un overflow:visible;
- scale (true): par défaut la methode du filter est 'crop', ce qui est le comportement normal d'une image de background.
Mais pour certaines raisons l'image a besoin de prendre tout le block , ex: une image de 1px répétée.
Donc pour cela, la seule manière est d'utiliser la méthode 'scale' du imageAlphaLoader.
@additional : Gère aussi les tag ![]()
qui seront automatiquement transformés en image avec transparence PNG.
En utilisant la méthode de base (appel au filter), l'image est automatiquement gérée.
Mais si on veut faire du cas par cas, il suffit de créer une classe CSS appelée pngFix, qui sera ensuite posée sur les tags ![]()
img.pngFix {filter:expression(pngFix(this));}
@exemples :
- filter:expression(pngFix(this)) //==> mode normal, un layer contenant le png dans le fond, est mis sur l'élément avec comme avantage
de pouvoir utiliser une image très grande, et automatiquement,
le bloc peut etre extensible en largeur + hauteur.
- filter:expression(pngFix(this, null, true)) //==> l'image prend toute la taille du bloc, ce qui est utile par exemple pour simuler un png répété sous les autres navigateurs
- filter:expression(pngFix(this, true)) //==> on ne change que l'overflow par visible, ce qui du coup ne permet plus d'avoir un bloc extensible à 100% en largeur
@TODO :
- Gérer les overflow:auto déclarés par défaut, et caller automatiquement le layer indiquer cela dans une doc, qu'il faut obligatoirement un élément conteneur.
- gérer les options en les mettant obligatoirement entre guillement, comme ça on pourra traiter facilement un dictionnaire de parametres type JSON.
*/
function pngFix(elm, noOverflow, scale) {
elm.style.filter = ' ';
if (!(document.all && window.print && /MSIE [56]/.test(navigator.userAgent))) return;
var exec = (function(elm, noOverflow, scale) {
return function() {
var options = { noOverflow:noOverflow, scale : scale};
elm.style.filter = ' ';
// si l'élément est un tag img, on va en faire creer une balise qui encadrera cette image et ensuite traiter la balise comme si c'etait un élément qui avait une image de fond
if (elm.nodeName=='IMG') {
if (!elm.src.match(/.*\.png$/)) return;
var imgContainer = document.createElement('i');
with(imgContainer.style) {
display = 'inline-block';
}
elm.parentNode.insertBefore(imgContainer, elm)
imgContainer.appendChild(elm);
imgContainer.style.backgroundImage = 'url('+elm.src+')';
elm.style.filter = 'alpha(opacity=0)';
elm = imgContainer;
}
if (elm.currentStyle.backgroundImage == "" || elm.currentStyle.backgroundImage == "url()") return;
var url = elm.currentStyle.backgroundImage.match(/^url\(["'](.*\.png)["']\)$/); //seulement les .png
if (!url || url.length<2) return;
var pngLayer = document.createElement('i'); // on genere un span en position:absolute (layer), qui viendra se placer sous le contenu du div qui avait besoin du style.
with(pngLayer.style) {
if (options.noOverflow) {
width = '100%';
height = elm.offsetHeight + 'px';
} else {
width = '32000px';
height = '32000px';
}
position = 'absolute';
left = 0;
top = 0;
zIndex = -1;
filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod='" + (options.scale ? 'scale' : 'crop') + "', src='"+url[1]+"')";
background = 'none'; //forcing car parfois il peut arriver qu'on ai une CSS qui vienne rajouter des images / couleurs de fond
}
with (elm.style) {
position = elm.currentStyle.position=="static" || elm.currentStyle.position=="" ? 'relative' : "";
if (elm.currentStyle.overflow!='auto') overflow = options.noOverflow ? 'visible' : 'hidden';
backgroundImage = 'none';
}
elm.appendChild(pngLayer);
}
})(elm, noOverflow, scale);
try{
pngFixLoader.useOnload ? pngFixLoader.addFunc(exec) : exec();
} catch(e) {};
}
/* pngFixLoader
@unction : objet pour permet le lancement des modifications des png via pngFix en décalé sur le onload de la page.
cela permet de contourner un bug d'internet explorer qui affiche un message d'erreur si le DOM est modifié pendant le chargement de la page.
*/
var pngFixLoader = {
useOnload : true, // true : active l'execution du fixPng sur le load, et false, execute le fixPng dès qu'il est appelé par la CSS
functions : [], // toutes les fonctions à éxécuter sur le onload de la page
addFunc : function(func) {
pngFixLoader.functions.push(func);
},
launch : function() {
pngFixLoader.useOnload = false; //une fois la page chargée, il faut laisser s'executer automatiquement la fonction pour d'autres actions (ex : ouverture layer)
var counter = 1;
while(pngFixLoader.functions.length>0) {
//setTimeout(pngFixLoader.functions.pop(), 20*counter);
pngFixLoader.functions.pop()();
counter++;
}
},
init : function() {
if (pngFixLoader.useOnload) {
$e.add('domready', function() {
setTimeout(pngFixLoader.launch, 100);
});
}
}
}
/* le code qui suit devra etre utilisé si le fichier est compilé dans un seul et meme fichier
meme fichier. Comme on a 2 fichiers JS, le code d'appel est situé dans after.js
Plus besoin de faire appel à la fonction init, l'appel de la fonction launch suffit
*/
//pngFixLoader.init();
/* btnAlpha
@function : applique la transparence alpha des pngs sur les boutons
@desc : genere un element supplementaire dans le (un ) afin de pouvoir utiliser l'image de droite via le filter.
La fonction pngFix est ensuite appelée pour l'image l'élément ajouté qui contient par la meme occasion l'image de fond PNG du A, le A perd
par la même occasion son image de fond.
@use : A utiliser dans la CSS, ex :
.btnAlpha {
filter:expression(btnAlpha(this));
}
au niveau html le bouton doit être :
texte
au niveau CSS il faut 2 images :
- une callée en haut à gauche pour le
- une callée en haut à droite pour le
@params : btnAlpha(element:HTMLElement);
- element : element HTML : passer this dans la CSS.
*/
function btnAlpha(elm) {
elm.style.filter = ' ';
if (!(document.all && window.print && /MSIE [56]/.test(navigator.userAgent))) return;
var exec = (function(elm) {
return function() {
var url = elm.currentStyle.backgroundImage.match(/^url\(["'](.*\.png)["']\)$/);
if (!url || url.length<2) return;
var rightButton = document.createElement('i');
with(rightButton.style) {
width = elm.currentStyle.paddingRight;
height = elm.offsetHeight + 'px';
backgroundImage = elm.currentStyle.backgroundImage;
}
elm.style.backgroundImage = 'none';
var insideSpan = $n.node(elm, {nodeName:'span'});
insideSpan = elm.removeChild(insideSpan); //on recupere le span
insideSpan.style.display = 'inline-block';
elm.innerHTML = '';
elm.appendChild(insideSpan);
elm.appendChild(rightButton);
pngFix(insideSpan);
pngFix(rightButton);
}
})(elm);
pngFixLoader.useOnload ? pngFixLoader.addFunc(exec) : exec();
}
//function addValid() {
/*
cette fonction doit etre placée en general dans before.js sur ce site. ce qui est actuellement le cas
addValid("champemail", { validation : "required email", email_em : "Cette email n'est pas bon", type_message : aspect};
addValid("champ", { validation : "required"};
*/
function addValid(inputId, validationAttr, attributes) {
attributes.validation = validationAttr;
var inp = document.getElementById(inputId);
if (!inp) return;
for (var i in attributes) {
inp.setAttribute(i,attributes[i]);
}
}
/**
* SWFObject v1.5: Flash Player detection and embed - http://blog.deconcept.com/swfobject/
*
* SWFObject is (c) 2007 Geoff Stearns and is released under the MIT License:
* http://www.opensource.org/licenses/mit-license.php
*
*/
if(typeof deconcept=="undefined"){var deconcept=new Object();}if(typeof deconcept.util=="undefined"){deconcept.util=new Object();}if(typeof deconcept.SWFObjectUtil=="undefined"){deconcept.SWFObjectUtil=new Object();}deconcept.SWFObject=function(_1,id,w,h,_5,c,_7,_8,_9,_a){if(!document.getElementById){return;}this.DETECT_KEY=_a?_a:"detectflash";this.skipDetect=deconcept.util.getRequestParameter(this.DETECT_KEY);this.params=new Object();this.variables=new Object();this.attributes=new Array();if(_1){this.setAttribute("swf",_1);}if(id){this.setAttribute("id",id);}if(w){this.setAttribute("width",w);}if(h){this.setAttribute("height",h);}if(_5){this.setAttribute("version",new deconcept.PlayerVersion(_5.toString().split(".")));}this.installedVer=deconcept.SWFObjectUtil.getPlayerVersion();if(!window.opera&&document.all&&this.installedVer.major>7){deconcept.SWFObject.doPrepUnload=true;}if(c){this.addParam("bgcolor",c);}var q=_7?_7:"high";this.addParam("quality",q);this.setAttribute("useExpressInstall",false);this.setAttribute("doExpressInstall",false);var _c=(_8)?_8:window.location;this.setAttribute("xiRedirectUrl",_c);this.setAttribute("redirectUrl","");if(_9){this.setAttribute("redirectUrl",_9);}};deconcept.SWFObject.prototype={useExpressInstall:function(_d){this.xiSWFPath=!_d?"expressinstall.swf":_d;this.setAttribute("useExpressInstall",true);},setAttribute:function(_e,_f){this.attributes[_e]=_f;},getAttribute:function(_10){return this.attributes[_10];},addParam:function(_11,_12){this.params[_11]=_12;},getParams:function(){return this.params;},addVariable:function(_13,_14){this.variables[_13]=_14;},getVariable:function(_15){return this.variables[_15];},getVariables:function(){return this.variables;},getVariablePairs:function(){var _16=new Array();var key;var _18=this.getVariables();for(key in _18){_16[_16.length]=key+"="+_18[key];}return _16;},getSWFHTML:function(){var _19="";if(navigator.plugins&&navigator.mimeTypes&&navigator.mimeTypes.length){if(this.getAttribute("doExpressInstall")){this.addVariable("MMplayerType","PlugIn");this.setAttribute("swf",this.xiSWFPath);}_19="