FrameBeurk File
Fmbk/Module/Zenpa/_js/patronPage.js.php
//FrameBeurk V0.65 Copyright ToolOscope 2016. Licence CeCILL-C.
// Javascript associé au Patron Zenpa
// Variable globale qui contient le jeton du défiment en cours (pour éviter 2 défilement en même temps
var JETON_DEFILEMENT = '';
<?php
// tissage des fonctions javascript associées au Patron
$CONFIG['Module']['Beurk']['Fonctions']['InitAffichageAjax'] = 'zenpa_initMessagesChargement'; // initialise l'affichage lors de l'envoi d'une requete Ajax
$CONFIG['Module']['Beurk']['Fonctions']['AfficheChargement'] = 'zenpa_afficheChargement'; // affiche un message de chargement en cours
$CONFIG['Module']['Beurk']['Fonctions']['RetourAjax'] = 'zenpa_traitementAjaxRetour'; // traitement ajax au retour d'une requete
$CONFIG['Module']['Rhum']['Fonctions']['RetourAjax'] = 'zenpa_traitementAjaxRetour'; // idem
$CONFIG['Module']['Kom1']['Fonctions']['ApresBasculeAffichage'] = 'zenpa_synchroniseColonnes'; // après bascule de l'affichage d'une div, resynchro des colonnes
$CONFIG['Module']['Beurk']['Fonctions']['ApresCacheDiv'] = 'zenpa_synchroniseColonnes'; // après fermeture d'une div, idem
// rem: ces variables de configuration dépendent du Patron qui peut changer à chaque transaction.
// elles ne sont pas sauvées en session (car non chargées par le bootstrap).
?>
// affiche les infos passées en JS. fonction appelée par zenpa_initAffichageApresChargement(...)
function zenpa_afficheMessages() {
for(clef in MESSAGES)
if (document.getElementById('message' + clef))
document.getElementById('message' + clef).innerHTML = MESSAGES[clef]; // affiche les messages Maj, Vue, le nombre de résultats de la recherche, la duree d'éxécution de la transaction...
}
//initialise les messages à l'écran. fonction appelée par beurk_ajaxAllerGET(...) et ajaxAllerPOST(...)
function zenpa_initMessagesChargement() {
for(clef in MESSAGES)
if (document.getElementById('message' + clef) && document.getElementById('message' + clef).hasAttribute("data-chargement")) {
data_chargement = document.getElementById('message' + clef).getAttribute("data-chargement");
if (data_chargement == 'Init')
document.getElementById('message' + clef).innerHTML = (MESSAGES[clef] != '') ? ' ' : ''; // si un message présent, on laisse un espace pour ne pas changer la hauteur de la fenêtre
if (data_chargement == 'Load')
document.getElementById('message' + clef).innerHTML = '<?php echo Beurk_traduit('Chargement en cours', 'Beurk'); ?>';
}
}
//affiche le message de chargement en cours
function zenpa_afficheChargement(nomDiv) {
if (nomDiv == DIV_VUE_PAGE)
zenpa_repositionneColonnes(); // remonte les 2 divs à leurs positions d'origine
if (document.getElementById(nomDiv))
document.getElementById(nomDiv).innerHTML = '<p class="chargement"><?php echo Beurk_traduit('Chargement en cours', 'Beurk'); ?>...</p>'; //A traduire !!!
}
//traitement à faire à chaque retour Ajax
function zenpa_traitementAjaxRetour(xmldoc, nomDivAModifier) {
//extraction des messages de traitement
str_message = beurk_texteNoeudXml(xmldoc, 'messages');
eval('MESSAGES = {' + str_message + '}'); // instancie le tableau MESSAGES en variable globale qui sera utilisée dans zenpa_initAffichageApresChargement
//extraction des paramètres et initialisation de la page
elementAScroller = beurk_texteNoeudXml(xmldoc, 'elementAScroller');
formAAfficher = beurk_texteNoeudXml(xmldoc, 'formAAfficher');
champASurligner = beurk_texteNoeudXml(xmldoc, 'champASurligner');
beurk_afficheDiv(nomDivAModifier); // vraie div dont le code HTML a été remplacé par celui reçu en ajax
zenpa_initAffichageApresChargement(elementAScroller, formAAfficher, champASurligner, document.getElementById(nomDivAModifier));
//extraction du nouveau jeton Ajax (JetonAjax déclaré en variable globale par trailer.php)
JETON_AJAX = beurk_texteNoeudXml(xmldoc, 'JetonAjax');
}
// éxécuté au chargement de la page ou de la div par Ajax
function zenpa_initAffichageApresChargement(elementAScroller, formAAfficher, champASurligner, divModifiee) {
zenpa_afficheMessages(); // fonction à définir dans un autre module
// force l'affichage de la div qui contient le form
// remarque sur le format attendu : nom_du_form = 'form' + nom_de_la_div
if (formAAfficher.length > 4) {
divAAfficher = formAAfficher.substr(4, formAAfficher.length - 4);
if (divAAfficher != '' && document.getElementById(divAAfficher))
beurk_afficheDiv(divAAfficher); // div dont le nom a été déduit du form en erreur
}
// met le focus sur le champ du form en erreur
if (formAAfficher != '' && champASurligner != '' && document.forms[formAAfficher] && document.forms[formAAfficher].elements[champASurligner])
document.forms[formAAfficher].elements[champASurligner].focus();
// fait défiler la fenêtre jusqu'à l'élément souhaité (sauf s'il y a un # dans l'URL : l'ancre reste prioritaire)
if (elementAScroller != '' && document.location.href.indexOf('#') == -1 && document.getElementById(elementAScroller))
//document.getElementById(elementAScroller).scrollIntoView();
zenpa_declencheDefilement(document.getElementById(elementAScroller));
// amelioration des liens
if (divModifiee === document || (divModifiee && divModifiee.nodeName && (divModifiee.nodeName.toLowerCase() === 'div')))
beurk_ameliorationBalises(divModifiee);
zenpa_synchroniseColonnes();
}
// sur défilement de la fenêtre, appelle la fonction de synchro des divs
window.onscroll = function (e) {
zenpa_synchroniseColonnes();
}
// retourne la position de la div sur la page [X,Y]
function zenpa_posDiv(div) {
var Ydiv = div.offsetTop;
var Xdiv = div.offsetLeft;
tmpDiv = div;
while (tmpDiv = tmpDiv.offsetParent) {
Ydiv += tmpDiv.offsetTop;
Xdiv += tmpDiv.offsetLeft;
}
return [Xdiv, Ydiv];
}
// retourne la position de la div sur la page [X,Y]
function zenpa_yDiv(nomDiv) {
var div = document.getElementById(nomDiv);
if(div) {
return zenpa_posDiv(div)[1];
} else
return 0;
}
// cette fonction ajuste la position verticale de la div la plus petite (en hauteur) pour qu'elle soit visible à l'écran
function zenpa_synchroniseColonnes(jetonEnCours) {
if (typeof jetonEnCours == 'undefined')
jetonEnCours = '';
if (jetonEnCours != JETON_DEFILEMENT) // pas de synchronisation si un défilement est en cours
return true;
var nomDiv1 = "gauche";
var nomDiv2 = "droite";
var div1 = document.getElementById(nomDiv1); // div à synchroniser
var div2 = document.getElementById(nomDiv2);
var DYdiv1 = div1.offsetHeight; // récupération hauteurs et largeur
var DXdiv1 = div1.offsetWidth;
var DYdiv2 = div2.offsetHeight;
var DXdiv2 = div2.offsetWidth;
// marges hautes
if (div1.hasAttribute("div-MargeTop")) {
var margeTopIniDiv1 = div1.getAttribute("div-MargeTop"); // récupération marge haute initiale
} else {
var margeTopIniDiv1 = parseInt(window.getComputedStyle(div1).marginTop.replace("px", ""));
div1.setAttribute("div-MargeTop", margeTopIniDiv1); // stockage marge haute initiale
}
if (div2.hasAttribute("div-MargeTop")) {
var margeTopIniDiv2 = div2.getAttribute("div-MargeTop"); // récupération marge haute initiale
} else {
var margeTopIniDiv2 = parseInt(window.getComputedStyle(div2).marginTop.replace("px", ""));
div2.setAttribute("div-MargeTop", margeTopIniDiv2); // stockage marge haute initiale
}
// choix de la div à déplacer : la plus petite
if (DYdiv2 == DYdiv1) {
return true;
} else if (DYdiv2 > DYdiv1) {
divAAjuster = document.getElementById(nomDiv1);
divReference = document.getElementById(nomDiv2);
DYdiv = DYdiv1;
DYref = DYdiv2;
DXdiv = DXdiv1;
DXref = DXdiv2;
M1div = margeTopIniDiv1;
M1ref = margeTopIniDiv2;
} else {
divAAjuster = document.getElementById(nomDiv2);
divReference = document.getElementById(nomDiv1);
DYdiv = DYdiv2;
DYref = DYdiv1;
DXdiv = DXdiv2;
DXref = DXdiv1;
M1div = margeTopIniDiv2;
M1ref = margeTopIniDiv1;
}
var margeCourante = parseInt(window.getComputedStyle(divAAjuster).marginTop.replace("px", ""));
var margeCouranteRef = parseInt(window.getComputedStyle(divReference).marginTop.replace("px", ""));
var defilement = 0;
// récupération positions verticales (et horizontales)
var posDiv = zenpa_posDiv(divAAjuster)
var X1div = posDiv[0];
var Y1div = posDiv[1];
posDiv = zenpa_posDiv(divReference)
var X1ref = posDiv[0];
var Y1ref = posDiv[1];
var Y2div = Y1div + DYdiv;
var Y2ref = Y1ref + DYref;
// cas où les 2 divs sont l'une au dessus de l'autre (responsive design)
if (X1ref < (X1div + DXdiv) && X1div < (X1ref + DXref)) {
div1.style.marginTop = margeTopIniDiv1 + "px"; // on force à la marge initiale
div2.style.marginTop = margeTopIniDiv2 + "px";
return true;
}
//récupération de la position de l'écran sur le document
if (document.documentElement && document.documentElement.scrollTop) {
Y1ecran = document.documentElement.scrollTop;
} else if (document.body && document.body.scrollTop) {
Y1ecran = document.body.scrollTop;
} else if (window.pageYOffset) {
Y1ecran = window.pageYOffset;
} else {
return false;
}
// récupération de la hauteur de l'écran
if (window.innerWidth) {
DYecran = window.innerHeight;
} else if (document.documentElement && document.documentElement.clientHeight) {
DYecran = document.documentElement.clientHeight;
} else {
return false;
}
var Y2ecran = Y1ecran + DYecran;
var cas = '?';
// cas '1' : la div de référence commence en dessous du haut de l'écran
if (Y1ecran < Y1ref - M1ref && margeCouranteRef > M1ref) {
cas = '1';
//alert(cas);
margeCouranteRef = Math.max(margeCouranteRef + Y1ecran - Y1ref, M1ref); // calcul nouvelle marge haute (au moins la marge initiale)
divReference.style.marginTop = margeCouranteRef + "px";
}
// cas 2 : haut de la div visible
if (Y1ecran < Y1div && margeCourante > M1div) {
cas = '2';
margeCourante = Math.max(margeCourante + Y1ecran - Y1div, M1div); // on remonte la div...
divAAjuster.style.marginTop = margeCourante + "px";
// cas 3 : haut de la div plus haut que le début de l'écran et le bas de la div est visible
} else if (Y1ecran > Y1div && Y2ecran > Y2div) {
cas = '3';
defilement = Math.min(Y2ecran - Y2div, Y1ecran - Y1div, Y2ref - Y2div); // on descend la div...
margeCourante = Math.max(margeCourante + defilement, M1div);
divAAjuster.style.marginTop = margeCourante + "px";
}
if (jetonEnCours == '') // re-synchronisation, sauf si défilement en cours
zenpa_resynchroniseColonnes();
/* zenpa_debug(Y1ecran + ' ' + Y1div + ' ' + Y1ref + ' ' + M1div + ' ' + M1ref, true);
zenpa_debug( Y2ecran + ' ' + Y2div + ' ' + Y2ref);
zenpa_debug( cas + ' : ' + margeCourante + ' ' + margeCouranteRef); */
}
// cette fonction remet la position verticale des divs à synchroniser (en hauteur) à leur valeurs initiales
// (à appeler lorsque l'une des 2 colonnes est rechargée complètement ...ou presque)
function zenpa_repositionneColonnes() {
var nomDiv1 = "gauche";
var nomDiv2 = "droite";
var div1 = document.getElementById(nomDiv1); // div à synchroniser
var div2 = document.getElementById(nomDiv2);
if (div1 && div1.hasAttribute("div-MargeTop"))
div1.style.marginTop = div1.getAttribute("div-MargeTop") + "px";
if (div2 && div2.hasAttribute("div-MargeTop"))
div2.style.marginTop = div2.getAttribute("div-MargeTop") + "px";
}
// cette fonction remet une des 2 marges à zéro (cas où les 2 divs sont descendues)
function zenpa_resynchroniseColonnes() {
var nomDiv1 = "gauche";
var nomDiv2 = "droite";
var div1 = document.getElementById(nomDiv1); // div à synchroniser
var div2 = document.getElementById(nomDiv2);
if (div1 && div1.hasAttribute("div-MargeTop")) // marges initiales
var margeTopIniDiv1 = div1.getAttribute("div-MargeTop");
else
return false;
if (div2 && div2.hasAttribute("div-MargeTop"))
var margeTopIniDiv2 = div2.getAttribute("div-MargeTop");
else
return false;
var margeTopCourDiv1 = parseInt(window.getComputedStyle(div1).marginTop.replace("px", "")); // marges courantes
var margeTopCourDiv2 = parseInt(window.getComputedStyle(div2).marginTop.replace("px", ""));
var DeltaDiv1 = margeTopCourDiv1 - margeTopIniDiv1; // écarts avec les marges courantes
var DeltaDiv2 = margeTopCourDiv2 - margeTopIniDiv2;
if (minDelta = Math.min(DeltaDiv1, DeltaDiv2)) { // si les 2 sont supérieures à zéro, on recale les divs et l'écran
div1.style.marginTop = (margeTopCourDiv1 - minDelta) + "px";
div2.style.marginTop = (margeTopCourDiv2 - minDelta) + "px";
window.scrollBy(0, - minDelta);
}
}
// défilement doux jusqu'à la div en argument
function zenpa_declencheDefilement(divAffichee) {
//zenpa_debug('zenpa_declencheDefilement : ' + divAffichee.id, true);
// récupération hauteur
var DYdiv = divAffichee.offsetHeight;
// récupération position verticale
var Y1div = divAffichee.offsetTop;
tmpDiv = divAffichee;
while (tmpDiv = tmpDiv.offsetParent) {
Y1div += tmpDiv.offsetTop;
}
Y2div = Y1div + DYdiv;
//récupération de la position de l'écran sur le document
if (document.documentElement && document.documentElement.scrollTop) {
Y1ecran = document.documentElement.scrollTop;
} else if (document.body && document.body.scrollTop) {
Y1ecran = document.body.scrollTop;
} else if (window.pageYOffset) {
Y1ecran = window.pageYOffset;
} else {
Y1ecran = 0;
}
// récupération de la hauteur de l'écran
if (window.innerWidth) {
DYecran = window.innerHeight;
} else if (document.documentElement && document.documentElement.clientHeight) {
DYecran = document.documentElement.clientHeight;
} else {
return false;
}
var Y2ecran = Y1ecran + DYecran;
// 1er cas : div entièrement à l'écran
if (Y1div >= Y1ecran && Y2div <= Y2ecran) {
return true;
// 2ème cas : écran trop bas
} else if (Y1ecran > Y1div) {
Y1ecranCible = Y1div - 10; // on remonte l'écran jusqu'à 10 pixels au dessus du haut de la div
// 3ème cas : écran trop haut
} else if (Y2ecran < Y2div) {
Y1ecranCible = Y1ecran + Y2div - Y2ecran + 10; // on remonte la div jusqu'à 10 pixels au dessus du bas de l'écran
if (Y1ecranCible > Y1div) {
Y1ecranCible = Y1div - 10; // mais on ne remonte pas la div plus haut que le début de l'écran
}
}
JETON_DEFILEMENT = beurk_jeton(); // c'est la dernière fonction de défilement qui prend la main
// déclenche le défilement (de l'écran)
DYdefilement = Y1ecranCible - Y1ecran;
zenpa_defilement(DYdefilement, JETON_DEFILEMENT);
}
function zenpa_defilement(DYdefilement, jetonEnCours) {
if (jetonEnCours != JETON_DEFILEMENT) // si le jeton a changé, on arrête.
return true;
if (DYdefilement < 0)
pas = Math.max(DYdefilement, -40); //défile 40 pixel
else
pas = Math.min(DYdefilement, 40);
//zenpa_debug(DYdefilement + ' ' + pas);
window.scrollBy(0, pas);
DYdefilement = DYdefilement - pas;
if (DYdefilement != 0)
setTimeout(function() {zenpa_defilement(DYdefilement, jetonEnCours);}, 20); // toutes les 20 ms
else {
JETON_DEFILEMENT = '';
zenpa_resynchroniseColonnes();
}
}
// debugging
function zenpa_debug(chaine, init) {
if (init == true)
document.getElementById('debug').innerHTML = '';
document.getElementById('debug').innerHTML = document.getElementById('debug').innerHTML + chaine + '<br />';
}
