ajax1.js
jeudi 22 janvier 2009
par olivier ramos
//************************************************************************************************************************

//                                                  Gestionnaire d'événements

//************************************************************************************************************************



// Au chargement de la page.

window.onload=initialisation;



function initialisation() {

setHover();

twAffHeure();



// Toutes les secondes on lance une requête permettant de rafraîchir la page si nécessaire  

 setInterval("rafraichir()",1000);  



// Gestion du bouton "valider".  

document.getElementById("valider").onmouseup=function () { eclairer('valider'); }

document.getElementById("valider").onmousedown=function () { foncer('valider'); }

document.getElementById("valider").onmouseout= function () { retournormal('valider'); }

document.getElementById("valider").onmouseover=function () { eclairer('valider'); }

document.getElementById("valider").onclick=function () { validmessage(document.saisie.pseudo.value,document.saisie.message.value); }



// Gestion du bloc de saisie du pseudo.  

document.getElementById("textpseudo").onkeyup=function () { verifPseudo(document.saisie.pseudo.value); }



// Gestion du bouton "effacer".  

document.getElementById("effacer").onmouseup=function () { eclairer('effacer'); }

document.getElementById("effacer").onmousedown=function () { foncer('effacer'); }

document.getElementById("effacer").onmouseout= function () { retournormal('effacer'); }

document.getElementById("effacer").onmouseover=function () { eclairer('effacer'); }

document.getElementById("effacer").onclick=function () { eff(); }



// Gestion des boutons  "couleurs".  

document.getElementById("couleur1").onclick=function () { change_couleur('#63030a'); }

document.getElementById("couleur2").onclick=function () { change_couleur('#060d85'); }

document.getElementById("couleur3").onclick=function () { change_couleur('#06484b'); }

}



// A la fermeture de la page (onunload pose des problèmes avec Internet Explorer).

window.onbeforeunload=fin;

function fin() {

eff('tout');

}



//************************************************************************************************************************

//                                                                Les fonctions et les moteurs Ajax

//************************************************************************************************************************





// Cette variable indique que la saisie du pseudo et du message est possible (ou pas).

var possible=true;



//***********************************************************************

// Les trois fonctions suivantes permettent de gérer l'apparence des boutons lumineux.

//***********************************************************************



function foncer(nom){

                document.getElementById(nom).style.background="#b6b64c";       

                document.getElementById(nom).style.border="3px solid #2b3030";       

}



function retournormal(nom){

                document.getElementById(nom).style.background="#2b3030";                                                                                                                                 

                document.getElementById(nom).style.color="yellow";

                document.getElementById(nom).style.border="2px solid yellow";

}



function eclairer(nom){

                document.getElementById(nom).style.background="yellow";       

                document.getElementById(nom).style.color="#2b3030";

                document.getElementById(nom).style.border="2px solid #2b3030";       

}



//******************************************************************************

// Les trois fonctions suivantes permettent l'affichage et l'enregistrement de l'heure courante.

//******************************************************************************



// La  première rajoute un zéro pour avoir 2 chiffres pour les heures, les minutes et les secondes.

function twZero(_nbr) {

        return (_nbr < 10) ? '0' + _nbr : _nbr;

}

//On surcharge l'objet Date.

Date.prototype.twHeure=function (){

         var sHeures = twZero(this.getHours());

        var sMinutes = twZero(this.getMinutes());

        var sSecondes = twZero(this.getSeconds());

        var sTemp = "";

         sTemp = sHeures + 'h' + sMinutes + 'min' + sSecondes  + 's' ;

         return sTemp;

}

// Cette fonction utilise un appel récursif et permet l'affichage de l'heure toutes les secondes dans le bloc dont l'identifiant est "heure" .

function twAffHeure() {

        var dDate = new Date();

        document.getElementById("heure").innerHTML = 'Heure<br />' + dDate.twHeure();

        oDelais = setTimeout("twAffHeure()",1000);

}





//********************************************************************************************************************

// La fonction rafraichir est appelée toutes les secondes et permet de rafraîchir s'il y a lieu le tableau des  messages et celui des connectés.

//********************************************************************************************************************



function rafraichir(){

                        appelsqlmessages();

                        appelsqlconnectes();

}



// Rafraîchissement éventuel du tableau des messages.

function appelsqlmessages() {



// On déclare un objet XMLHttpRequest ou ActiveX.

        var xhr_object = null;

        if(window.XMLHttpRequest)

        xhr_object = new XMLHttpRequest();

        else if(window.ActiveXObject) // IE6

        xhr_object = new ActiveXObject("Microsoft.XMLHTTP");

        else {  

                        alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");

                        return;

                }

// Il  s'agit  ici d'un appel Asynchrone. La requête est faite par le fichier requetesql.php et la réponse est:

// 0 s'il n'y aucun nouveau message (dans ce cas on ne fait rien),

// 1 s'il n'y a plus de message ( dans ce cas on repart au début),

// le nouveau tableau des messages si celui a changé (que l'on place dans le bloc dont l'identifiant est "tableaumessages").



        xhr_object.open("GET", "plugins/paramspip/fichiers/dir"+idarticle+"/requetesql.php", true);

        xhr_object.send(null);

       

//        xhr_object.onreadystatechange est nécessaire pour un appel asynchrone avec firefox

        xhr_object.onreadystatechange = function(){

        if(xhr_object.readyState == 4){

                if(xhr_object.status == 200){

                        var reponse=xhr_object.responseText;

                        if (reponse==1) {

                                        //                        document.location="";

                                                        }         

                        else {

                        if (reponse!=0) {

                                                                document.getElementById("tableaumessages").innerHTML =reponse;

                                                        }       

                                }                       

                                                                        }

                                                                        }

}                                                                                         

}



// Rafraîchissement éventuel du tableau des pseudos.

function appelsqlconnectes() {



// On déclare un objet XMLHttpRequest ou ActiveX.

        var xhr_object1 = null;

        if(window.XMLHttpRequest)

        xhr_object1 = new XMLHttpRequest();

        else if(window.ActiveXObject) // IE6

        xhr_object1 = new ActiveXObject("Microsoft.XMLHTTP");

        else {  

           alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");

           return;

                }

               

// Il  s'agit  ici d'un appel Asynchrone. La requête est faite par le fichier requetesql1.php et la réponse est:

// 0 s'il n'y aucun changement dans les pseudos et les personnes (dans ce cas on ne fait rien),

// le nouveau tableau des pseudos si celui a changé (que l'on place dans le bloc dont l'identifiant est "pseudos").



        xhr_object1.open("GET", "plugins/paramspip/fichiers/dir"+idarticle+"/requetesql1.php", true);

        xhr_object1.send(null);

       

//        xhr_object1.onreadystatechange est nécessaire pour un appel asynchrone avec firefox

        xhr_object1.onreadystatechange = function() {  

                if(xhr_object1.readyState == 4){

                        if(xhr_object1.status == 200){

                        var reponse=xhr_object1.responseText;

                        if (reponse!=0) {

                         document.getElementById("pseudos").innerHTML =reponse;       

                                                        }                       

                                                                        }                                                       

                                                                                }

                                                                                                }       

}



//************************************************************************************************************************

// La fonction suivante permet de valider un message non vide, lorsque le pseudo n'est pas déjà pris ou correspond à celui qui poste le message.

//*************************************************************************************************************************



function validmessage(pseu,texte){

if ((texte!='') && (possible==true)) {

// On commence par effacer le message relatif au pseudo.

        document.getElementById('pseudobox').innerHTML='';

// On déclare un objet XMLHttpRequest ou ActiveX

        var xhr_object2 = null;

        if(window.XMLHttpRequest)

        xhr_object2 = new XMLHttpRequest();

        else if(window.ActiveXObject) // IE6

        xhr_object2 = new ActiveXObject("Microsoft.XMLHTTP");

        else {  

                        alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");

                        return;

       }

// On prend l'heure à laquelle on a posté le message.

        var dDate = new Date();

        var heur=dDate.twHeure();



// La fonction escape permet de transformer le texte en symbole passant dans l'url.

// Malheureusement, le symbole + disparait. Pour résoudre ce problème, on utilise la méthode décrite ci-après.

// L'expression régulière reg=new RegExp("([+])", "g")  et la méthode replace(reg,"@#$1#@") permettent de remplacer tous les symboles + par @#+#@ (pourquoi pas?).

// Par passage dans l'url cette expression sera transformée en @# #@. Dans le fichier requetesql2, cette chaîne sera reconnue comme représentant un signe +.



  var reg=new RegExp("([+])", "g");

 

// Il  ne s'agit pas ici d'un appel Asynchrone. La requête est faite par le fichier requetesql1.php qui permet l'insertion du nouveau message.

// En retour, la réponse sera le nouveau tableau des messages (que l'on place dans le bloc dont l'identifiant est "tableaumessages").



        xhr_object2.open("GET", "plugins/paramspip/fichiers/dir"+idarticle+"/requetesql2.php?message="+escape(texte.replace(reg,"@#$1#@"))+"&pseudo="+escape(pseu)+"&heure="+escape(heur),false);

        xhr_object2.send(null);



        if(xhr_object2.readyState == 4){

                        if(xhr_object2.status == 200){

                        var reponse=xhr_object2.responseText;

                        document.getElementById("tableaumessages").innerHTML =reponse;                                                                                                                                         

                        }

                                                                        }

// Le bloc de saisie des messages est réinitialisé.

document.saisie.message.value="";

}

}



//*******************************************************************************************************************************************

// Cette fonction permet d'effacer les messages . Si on appuie sur la touche effacer, on gardera le message permettant d'identifier la personne et son premier pseudo.

// Si on quitte la fenêtre ou l'onglet, l'intégralité des messages sera supprimée et la valeur true sera attribuée à la variable de session fin.

//********************************************************************************************************************************************



function eff(objectif){



// On déclare un objet XMLHttpRequest ou ActiveX.

        var xhr_object34 = null;

        document.getElementById("tableaumessages").innerHTML ="";

        if(window.XMLHttpRequest)

        xhr_object34 = new XMLHttpRequest();

        else if(window.ActiveXObject) // IE6

        xhr_object34 = new ActiveXObject("Microsoft.XMLHTTP");

        else {  

                        alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");

                        return;

                }

// Il  s'agit ici de deux appels synchrones. La requête est faite soit par le fichier requetesql3.php qui permet d'effacer tout ce qui a trait à l'utilisateur

// et ré-affiche le formulaire de connexion, soit par le fichier requetesql4.php qui supprime tous les messages de l'utilisateur mais permet à celui-ci de rester dans le chat.

       

        if (objectif=='tout'){

                                xhr_object34.open("GET", "plugins/paramspip/fichiers/dir"+idarticle+"/requetesql3.php",false);

                                                }

        else {

                                xhr_object34.open("GET", "plugins/paramspip/fichiers/dir"+idarticle+"/requetesql4.php",false);

                }               

        xhr_object34.send(null);                                                                                                          

}



//*************************************************************************************************************

// Cette fonction permet la vérification de la validité du pseudo (entre 2 et 11 lettres et ne correspondant pas à une autre personne).

//*************************************************************************************************************



function verifPseudo(pseudo){



// On vérifie sans ajax si la longueur du pseudo

if(pseudo== ''){

        document.getElementById('pseudobox').innerHTML='<span style="color:#cc0000"><b>'+pseudo+'  </b>Aucun pseudo</span>';

                                possible=false;

}

else if(pseudo.length<2){

                                document.getElementById('pseudobox').innerHTML='<span style="color:#cc0000"><b>'+pseudo+' : </b>trop court</span>';

                                possible=false;

}

else if(pseudo.length>11){

                                document.getElementById('pseudobox').innerHTML='<span style="color:#cc0000"><b>'+pseudo+' : </b>trop long</span>';

                                possible=false;

}

// Ensuite, si la longueur est convenable, on cherche dans la base de données pour voir si le pseudo proposé est déjà inscrit.

else {



// On déclare un objet XMLHttpRequest ou ActiveX.

        var xhr_object6 = null;

        if(window.XMLHttpRequest)

        xhr_object6 = new XMLHttpRequest();

        else if(window.ActiveXObject) // IE6

        xhr_object6 = new ActiveXObject("Microsoft.XMLHTTP");

        else return(false);

       

// Il ne s'agit pas ici d'un appel Asynchrone. La requête est faite par le fichier requetesql6.php.

                                xhr_object6.open("GET","plugins/paramspip/fichiers/dir"+idarticle+"/requetesql6.php?pseudo="+escape(pseudo), false);

                                xhr_object6.send(null);

                               

// Si ce nom figure dans la base, la réponse est 1 et on met la variable possible à false.

// Sinon, la réponse est 0 et la valeur true est affectée à la variable possible (ce qui permettra la validation ultérieure).

// Les indications concernant la validité sont indiquées juste en dessous de la boîte de saisie dans un bloc dont l'identifiant est "pseudobox".

if(xhr_object6.readyState == 4){

        if(xhr_object6.status == 200){

                var texte=xhr_object6.responseText;

                if(texte == 1){

                                                document.getElementById('pseudobox').innerHTML='<span style="color:#cc0000"><b>'+pseudo+' : </b>déjà pris</span>';

                                                possible=false;

                                                }

                if(texte == 2){

                                                document.getElementById('pseudobox').innerHTML='<span style="color:yellow"><b>'+pseudo+' : </b>valide</span>';

                                                possible=true;

                                                }

                                                                }

        }       

        }       

}



//*********************************************************************************************************

// La fonction change_couleur permet de changer la couleur (trois choix possibles).

// Pour les messages, on rappelle leurs contenus dans la bonne couleur avec la fonction coulmessages.  

//**********************************************************************************************************



function change_couleur(couleur){

          document.getElementById("saisie").style.background = couleur;

        document.getElementById("aristotitre").style.background = couleur;

        document.getElementById("nbtoto").style.background = couleur;

        document.getElementById("formeffacer").style.background = couleur;

        document.getElementById("pseudos").style.color = couleur;

        coulmessages(couleur);

}



// On rafraichit le tableau des messages avec la couleur choisie (nécessaire avec firefox).

function coulmessages(couleur) {



// On déclare un objet XMLHttpRequest ou ActiveX.

        var xhr_object7 = null;

        if(window.XMLHttpRequest)

        xhr_object7 = new XMLHttpRequest();

        else if(window.ActiveXObject) // IE6

        xhr_object7 = new ActiveXObject("Microsoft.XMLHTTP");

        else {

                        alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");

                        return;

                }

// Il ne s'agit pas ici d'un appel Asynchrone. La requête est faite par le fichier requetesql7.php et la réponse est le tableau dans la bonne couleur.

        xhr_object7.open("GET", "plugins/paramspip/fichiers/dir"+idarticle+"/requetesql7.php?couleur="+escape(couleur), false);

        xhr_object7.send(null);

// Les messages sont écrits dans le bloc dont l'identifiant est tableaumessages.       

        if(xhr_object7.readyState == 4){

                if(xhr_object7.status == 200){

                        var reponse=xhr_object7.responseText;

                        document.getElementById("tableaumessages").innerHTML =reponse;                                                                                                                                 

                                                                        }

                                                                        }       

}
ajax2.js
jeudi 22 janvier 2009
par olivier ramos
//************************************************************************************************************************

//                                                                                   Gestionnaire d'événements

//************************************************************************************************************************



// Au chargement de la page.

window.onload=initialisation;



function initialisation() {



setHover();



document.getElementById("envoi2").onmouseup=function () { eclairer1('envoi2','bleu'); }

document.getElementById("envoi2").onmousedown=function () { foncer1('envoi2','bleu'); }

document.getElementById("envoi2").onmouseout= function () { retournormal1('envoi2','bleu'); }

document.getElementById("envoi2").onmouseover=function () { eclairer1('envoi2','bleu'); }

document.getElementById("envoi2").onclick=function () {

window.open("plugins/paramspip/fichiers/dir"+idarticle+"/popup.php",'',"toolbar=no, location=no, directories=no, status=no, scrollbars=no, resizable=no,copyhistory=no, menuBar=no, width=580, height=277" );

}



document.getElementById("envoi").onmouseup=function () { eclairer1('envoi','vert'); }

document.getElementById("envoi").onmousedown=function () { foncer1('envoi','vert'); }

document.getElementById("envoi").onmouseout= function () { retournormal1('envoi','vert'); }

document.getElementById("envoi").onmouseover=function () { eclairer1('envoi','vert'); }

document.getElementById("envoi").onclick=function () {

validentree(document.premier.entpseu.value,document.premier.mdpchat.value,document.premier.nomlogo.value)

}



document.getElementById("textpseudo1").onkeyup=function () { verifPseudo1(document.premier.entpseu.value); }



}



// A la fermeture de la page (onunload pose des problèmes avec Internet Explorer).  

window.onbeforeunload=fin;

function fin() {

efflog1();

}



//************************************************************************************************************************

//                                                                Les fonctions et les moteurs Ajax

//************************************************************************************************************************



var possible1=false;

var effacelogo=true;

//************************************************************************************************************************

// La fonction suivante permet de valider une entrée (pseudo et logo), lorsque le pseudo n'est pas déjà pris et que le mot de passe est correct.

//*************************************************************************************************************************

       

function validentree(pseud,mdp,nlog){



effacelogo=false;



if (possible1==false){

document.location='index.php';

}

else if (document.premier.mot_de_passe.value==mdp){



// On déclare un objet XMLHttpRequest ou ActiveX.

        var xhr_object5 = null;



        if(window.XMLHttpRequest)

        xhr_object5 = new XMLHttpRequest();

        else if(window.ActiveXObject) // IE6

        xhr_object5 = new ActiveXObject("Microsoft.XMLHTTP");

        else { // XMLHttpRequest non supporté par le navigateur

           alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");

           return;

        }

// Il ne s'agit pas ici d'un appel Asynchrone. La requête est faite par le fichier requetesql5.php et permet l'insertion dans la base du pseudo et du nom du logo.

// Il n'y a aucune réponse à traiter.                       

        xhr_object5.open("GET", "plugins/paramspip/fichiers/dir"+idarticle+"/requetesql5.php?pseudo="+escape(pseud)+"&nomlogo="+escape(nlog),false);

        xhr_object5.send(null);                                                 

}

}



// Les explications sont les mêmes que celles données à la ligne 256 du fichier ajax1.js.

function verifPseudo1(pseudo)

{

        if(pseudo== ''){

                document.getElementById('pseudobox1').innerHTML='<span style="color:#cc0000"><b>'+pseudo+'  </b>Aucun pseudo</span>';

                possible1=false;

        }

        else if(pseudo.length<2){

                document.getElementById('pseudobox1').innerHTML='<span style="color:#cc0000"><b>'+pseudo+' : </b>trop court</span>';

                possible1=false;

                }

        else if(pseudo.length>11){

                document.getElementById('pseudobox1').innerHTML='<span style="color:#cc0000"><b>'+pseudo+' : </b>trop long</span>';

                possible1=false;

                }

        else {



        var xhr_object6 = null;

        if(window.XMLHttpRequest)

        xhr_object6 = new XMLHttpRequest();

        else if(window.ActiveXObject) // IE6

        xhr_object6 = new ActiveXObject("Microsoft.XMLHTTP");

        else return(false);



        xhr_object6.open("GET","plugins/paramspip/fichiers/dir"+idarticle+"/requetesql6.php?pseudo="+escape(pseudo), false);

        xhr_object6.send(null);



        if(xhr_object6.readyState == 4){

        var texte=xhr_object6.responseText;

        if(texte == 1){

        document.getElementById('pseudobox1').innerHTML='<span style="color:#cc0000"><b>'+pseudo+' : </b>déjà pris</span>';

        possible1=false;       

        }

        if(texte == 2) {

        document.getElementById('pseudobox1').innerHTML='<span style="color:yellow"><b>'+pseudo+' : </b>valide</span>';

        possible1=true;

        }

}

}

}



//***********************************************************************

// Les trois fonctions suivantes permettent de gérer l'apparence des boutons lumineux.

//***********************************************************************



function foncer1(nom,couleur){

        if (couleur=='bleu'){

                document.getElementById(nom).style.background="#0d104a";       

                document.getElementById(nom).style.border="3px inset yellow";

        }       

        if (couleur=='vert'){

                document.getElementById(nom).style.background="#0c2628";       

                document.getElementById(nom).style.border="3px inset yellow";

        }                               

}



function retournormal1(nom,couleur){

        if (couleur=='bleu'){

                document.getElementById(nom).style.background="#0d104a";                                                                                                                                 

                document.getElementById(nom).style.color="yellow";

                document.getElementById(nom).style.border="5px outset yellow";

        }

        if (couleur=='vert'){

                document.getElementById(nom).style.background="#0c2628";                                                                                                                                 

                document.getElementById(nom).style.color="yellow";

                document.getElementById(nom).style.border="5px outset yellow";

        }       

}



function eclairer1(nom,couleur){

        if (couleur=='bleu'){

                document.getElementById(nom).style.background="#060d85";       

                document.getElementById(nom).style.color="yellow";

                document.getElementById(nom).style.border="5px outset yellow";

        }

        if (couleur=='vert'){

                document.getElementById(nom).style.background="#06484b";       

                document.getElementById(nom).style.color="yellow";

                document.getElementById(nom).style.border="5px outset yellow";

        }                       

}







function efflog1(){

if (effacelogo==true){



// On déclare un objet XMLHttpRequest ou ActiveX.

        var xhr_object0 = null;

       

        if(window.XMLHttpRequest)

        xhr_object0 = new XMLHttpRequest();

        else if(window.ActiveXObject) // IE6

        xhr_object0 = new ActiveXObject("Microsoft.XMLHTTP");

        else {  

                        alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");

                        return;

                }

// Il  s'agit ici d'un appel synchrone qui permet de lancer un script php qui efface le logo choisi.

       

        xhr_object0.open("GET", "plugins/paramspip/fichiers/dir"+idarticle+"/requete.php",false);

        xhr_object0.send(null);                

}

}
ajax3.js
jeudi 22 janvier 2009
par olivier ramos
//************************************************************************************************************************
//                                                  Gestionnaire d'événements
//************************************************************************************************************************

// Au chargement de la page.
window.onload=initialisation;

function initialisation() {

// Gestion du bouton "valider".  
document.getElementById("envoi3").onmouseup=function () { eclairer('envoi3'); }
document.getElementById("envoi3").onmousedown=function () { foncer('envoi3'); }
document.getElementById("envoi3").onmouseout= function () { retournormal('envoi3'); }
document.getElementById("envoi3").onmouseover=function () { eclairer('envoi3'); }
document.getElementById("envoi3").onclick=function () { fin(); }

}

function foncer(nom){
                document.getElementById(nom).style.background="#0d104a";       
                document.getElementById(nom).style.border="3px inset yellow";
                               
}


function retournormal(nom){
                document.getElementById(nom).style.background="#0d104a";                                                                                                                                 
                document.getElementById(nom).style.color="yellow";
                document.getElementById(nom).style.border="5px outset yellow";
}

function eclairer(nom){
                document.getElementById(nom).style.background="#060d85";       
                document.getElementById(nom).style.color="yellow";
                document.getElementById(nom).style.border="5px outset yellow";       
}

function fin(){
window.parent.opener.location.reload();
self.close();
}