X-Git-Url: http://git.euphorik.ch/?a=blobdiff_plain;f=js%2FpageMinichat.js;h=ed1a46c177875531e51cb39069f7e3f1e80a5bc0;hb=42445687d95289c3c3f70e1e8d76278107a8b125;hp=ce0bcf0145077123bceb4099ce641b547c5d1b88;hpb=6feaef2a51f7226c41d69f9e86f605718b78aa02;p=euphorik.git diff --git a/js/pageMinichat.js b/js/pageMinichat.js index ce0bcf0..ed1a46c 100755 --- a/js/pageMinichat.js +++ b/js/pageMinichat.js @@ -10,24 +10,22 @@ function PageMinichat(client, formateur, util) this.regexMessageTagMatch = /\{.*?\}>/g this.regexMessageTagReplace = /^(.*?\{.*?\}>)*/ - - this.messages = new Messages(this.client, this.formateur, this.util) } PageMinichat.prototype.contenu = function() { +// \ return '\
\
\ -

\ - \ +

\ + \ \ \ \

\
\ -
\ -
' +
' } PageMinichat.prototype.charger = function() @@ -36,18 +34,12 @@ PageMinichat.prototype.charger = function() jQuery("form input.pseudo").val(this.client.pseudo) - this.messages.rafraichirMessages(true) + // cet appel ne doit pas être fait avant l'appel à 'charger' + this.messages = new Messages(this.client, this.formateur, this.util) + + this.messages.rafraichirMessages(true) this.util.setCaretToEnd(jQuery("form input.message")[0]) - - jQuery("#messages").hover( - function(){}, - function(event) - { - jQuery("#messages .message").removeClass("cache") - thisPage.messages.messageOver = null - } - ) // affichage des smiles jQuery("#smiles").html(this.formateur.getSmilesHTML()).children().each( @@ -86,9 +78,7 @@ PageMinichat.prototype.charger = function() function() { // captcha anti bot - if (jQuery("form input.captcha").val() != "") return - - thisPage.messages.allerSurLaPage(1) + if (jQuery("form input.captcha").val() != "") return thisPage.envoyerMessage( jQuery("form input.pseudo").val(), @@ -166,9 +156,10 @@ PageMinichat.prototype.envoyerMessage = function(pseudo, message) // met à jour la classe des messages auquel repond celui ci (c'est un peu de la triche) for (var i = 0; i < repondA.length; i++) { - jQuery("#messages div#" + repondA[i]).addClass("repondu") - for (var m = 0; m < this.messages.messages.length; m++) - this.messages.messages[m].clientARepondu = true + jQuery("#conversation div#" + repondA[i]).addClass("repondu") + for (var c = 0; c < this.messages.conversations.length; c++) + for (var m = 0; m < this.messages.conversations[c].messages.length; m++) + this.messages.conversations[c].messages[m].clientARepondu = true } } @@ -184,17 +175,20 @@ PageMinichat.prototype.envoyerMessage = function(pseudo, message) { this.util.messageDialogue("login impossible") return - } - - //this.util.log(this.util.xmlVersAction(this.getXMLmessage(pseudo, message, repondA)).action) - //alert(this.util.xmlVersAction(this.getXMLMessage(pseudo, message, repondA)).action) - jQuery.post("request", this.util.xmlVersAction(this.getXMLMessage(pseudo, message, repondA)), - function(data, textStatus) - { - // TODO : traiter les erreurs - //alert(data) - jQuery("form input.message").val("") - } + } + + jQuery.ajax( + { + url : "request", + type: "POST", + data : this.util.xmlVersAction(this.getXMLMessage(pseudo, message, repondA)), + dataType : "xml", + success : function(data, textStatus) + { + if(jQuery("statut", data.documentElement).text() == "ok") + jQuery("form input.message").val("") + } + } ) } @@ -257,9 +251,11 @@ Message.prototype.setRepondA = function(element) } /** - * @return les id des messages qui ont été mis en evidence sous la forme d'un objet + * Renvoie les messages faisant partie d'une conversation. + * @param messages l'ensemble des messages de la conversation + * @return les id des messages qui ont été mis en evidence sous la forme d'un hash (object) {id => bool} */ -Message.prototype.afficherConversation = function(messages) +Message.prototype.getConversation = function(messages) { // les messages faisant partie de la conversation var messagesEnEvidence = {} @@ -291,103 +287,115 @@ Message.prototype.afficherConversation = function(messages) /////////////////////////////////////////////////////////////////////////////////////////////////// /** - * Représente l'ensemble des messages affichés. + * Représente une conversation. + * @param numConv le numéro (appelé id) de la conversation + * @param formateur outil permettant la mise en forme du texte des messages */ -function Messages(client, formateur, util) +function Conversation(num, util, formateur, funFermer) { - this.client = client - this.formateur = formateur - this.util = util + var thisConversation = this - this.nbMessageMax = conf.nbMessageAffiche // Le nombre de message affiché par page - this.idDernierMesssage = null // l'id du dernier message connu - this.page = 1 // par défaut on se trouve sur la première page - + this.num = num // peut changer au cours de la vie de la conversation + this.id = Math.random()*100000000000000000 + this.messageOver = null // le message sur lequel se trouve le curseur + this.util = util + this.formateur = formateur this.messages = new Array() this.messagesParId = new Object() + + jQuery("#conversations").append( + '
\ +
' + + (funFermer == undefined ? '' : '
x
') + + '<1>\ +
\ +
' + ) - // l'objet XMLHttpRequest représentant la connexion d'attente - this.attenteCourante = null + // enlève la mise en évidence pour la conversation + jQuery("#conversations #" + this.getId()).hover( + function(){}, + function(event) + { + jQuery("#conversations .message").removeClass("cache") + thisConversation.messageOver = null + } + ) - var messageOver = null // element + // suppression de la conversation + if (funFermer != undefined) + jQuery("#conversations #" + this.getId() + " .titre .fermer").click( + function() + { + funFermer(thisConversation.num) + } + ) } /** - * Crée un document XML contenant le message demandant un rafraichissement. + * Défini les fonctions (callback) appelées lorsque l'on change de page. + * @pageCourante la page courante + * @dernierePage true si c'est la dernière page sinon false */ -Messages.prototype.getXMLrafraichirMessages = function() +Conversation.prototype.setPage = function(pageCourante, dernierePage) { - var XMLDocument = this.util.creerDocumentXMLAction() - XMLDocument.documentElement.setAttribute("name", "refreshMessages") - - //alert(this.util.serializer.serializeToString(XMLDocument)) - - if (this.client.identifie()) - { - var nodeCookie= XMLDocument.createElement("cookie") - nodeCookie.appendChild(XMLDocument.createTextNode(this.client.cookie)) - XMLDocument.documentElement.appendChild(nodeCookie) - } - - if (this.idDernierMesssage != null) - { - var nodeDernierMessageId = XMLDocument.createElement("dernierMessageId") - nodeDernierMessageId.appendChild(XMLDocument.createTextNode(this.idDernierMesssage)) - XMLDocument.documentElement.appendChild(nodeDernierMessageId) - } - - var nodeNombreMessage = XMLDocument.createElement("nombreMessage") - nodeNombreMessage.appendChild(XMLDocument.createTextNode(this.nbMessageMax)) - XMLDocument.documentElement.appendChild(nodeNombreMessage) - - var nodePage = XMLDocument.createElement("page") - nodePage.appendChild(XMLDocument.createTextNode(this.page)) - XMLDocument.documentElement.appendChild(nodePage) + jQuery("#conversations #" + this.getId() + " .numPage").text(pageCourante) + jQuery("#conversations #" + this.getId() + " .next").css("display", pageCourante == 1 ? "none" : "inline") + jQuery("#conversations #" + this.getId() + " .prev").css("display", dernierePage ? "none" : "inline") +} + +/** + * @funNext appelé lorsque l'on passe à la page suivante (de 2 à 1 par exemple) + * @funPrev appelé lorsque l'on passe à la page précédente (de 1 à 2 par exemple) + * @funReset appelé lorsque l'on souhaite revenir à la page une + */ +Conversation.prototype.setFunPage = function(funNext, funPrev, funReset) +{ + var thisConversation = this - return XMLDocument; + jQuery("#conversations #" + this.getId() + " .next").click( + function() { funNext(thisConversation.num) } + ) + jQuery("#conversations #" + this.getId() + " .prev").click( + function() { funPrev(thisConversation.num) } + ) + jQuery("#conversations #" + this.getId() + " .numPage").click( + function() { funReset(thisConversation.num) } + ) } /** - * Création d'un nouveau message. - * Les message sont données dans l'ordre de leur id. - * Met directement à jour l'affichage. - * @param element un element xml représentant le message - * @param autoFlush si oui alors le message est directement ajouté à la vue + * Retourne l'id de la conversation sous la forme (par exemple) "conv3". */ -Messages.prototype.ajouterMessage = function(element, autoFlush) +Conversation.prototype.getId = function() { - if (autoFlush == undefined) autoFlush = true // valeur par défaut + return "conv" + this.id +} - // pas d'utilisation de jquery pour des raisons de performance - this.idDernierMesssage = element.getAttribute("id") - - var message = new Message( - this.idDernierMesssage, - jQuery("date", element).text(), - jQuery("pseudo", element).text(), - jQuery("contenu", element).text() - ) - - message.appartientAuClient = jQuery("proprietaire", element).text() == "true" - message.clientARepondu = jQuery("repondu", element).text() == "true" - message.estUneReponse = jQuery("reponse", element).text() == "true" - message.systeme = jQuery("systeme", element).text() == "true" - message.setRepondA(jQuery("repondA", element)) - +Conversation.prototype.ajouterMessage = function(message) +{ this.messages.push(message) this.messagesParId[message.id] = message if (this.messages.length > this.nbMessageMax) delete this.messagesParId[this.messages.shift().id] +} - if (autoFlush) - this.flush() +Conversation.prototype.viderMessages = function() +{ + this.messages = new Array() + jQuery("#conversations #" + this.getId() + " .message").remove() } -Messages.prototype.flush = function() +/** + * Après l'ajout d'un ou plusieurs message cette méthode est appelée afin + * d'afficher les messages non-affichés. + * @param funClickExtract fonction (fun(numMess)) appellée lors du clic sur un bouton "extraire" + */ +Conversation.prototype.flush = function(funClickExtract) { - var thisMessages = this + var thisConversation = this - var idDernierMessageAffiche = jQuery("#messages div:first").attr("id") + var idDernierMessageAffiche = jQuery("#conversations #" + this.getId() + " div:first").attr("id") if (idDernierMessageAffiche == undefined) idDernierMessageAffiche = "0" var XHTML = "" @@ -398,52 +406,66 @@ Messages.prototype.flush = function() var XHTMLrepondA = "" for (var id in message.repondA) XHTMLrepondA += this.formateur.traitementComplet(message.repondA[id].pseudo) + "> " - XHTMLrepondA = "
" + XHTMLrepondA + "
" + XHTMLrepondA = "" + XHTMLrepondA + "" XHTML += "
" + - "[
" + message.date + "
]" + - "
" + this.formateur.traitementComplet(message.pseudo) + "
:" + + "\" >" + + "
>
" + + "[" + message.date + "]" + + "" + this.formateur.traitementComplet(message.pseudo) + ":" + XHTMLrepondA + - "
" + (message.systeme ? this.formateur.remplacerBalisesHTML(message.contenu) : this.formateur.traitementComplet(message.contenu, message.pseudo))+ "
" + + "" + (message.systeme ? this.formateur.remplacerBalisesHTML(message.contenu) : this.formateur.traitementComplet(message.contenu, message.pseudo)) + "" + "
" } - jQuery("#messages").prepend(XHTML) - + + jQuery("#conversations #" + this.getId()).prepend(XHTML) + + // mise à jour des images (LightBox) après l'ajout de message if (myLightbox != null) myLightbox.updateImageList() - var nbMessagesAffiche = jQuery("#messages .message").size() + var nbMessagesAffiche = jQuery("#conversations #" + this.getId() + " .message").size() if (nbMessagesAffiche > this.nbMessageMax) - jQuery("#messages .message").slice(this.nbMessageMax, nbMessagesAffiche).empty(); + jQuery("#conversations #" + this.getId() + " .message").slice(this.nbMessageMax, nbMessagesAffiche).empty(); - jQuery("#messages .message").filter(function(){return parseInt(jQuery(this).attr("id"), 36) > parseInt(idDernierMessageAffiche, 36)}).each( + // Ajoute les événements liés à chaque message + jQuery("#conversations #" + this.getId() + " .message").filter(function(){return parseInt(jQuery(this).attr("id"), 36) > parseInt(idDernierMessageAffiche, 36)}).each( function() { jQuery(this).click( function(event) - { - if (jQuery(event.target).is("a")) return + { + if (jQuery(event.target).is("a")) return + + // l'id du message + idMess = jQuery(this).attr("id") + + // extraction d'une conversation + if (jQuery(event.target).is(".extraire")) + { + funClickExtract(idMess) + return + } var valCourant = jQuery("input.message").val() if (valCourant == undefined) valCourant = "" - var tag = jQuery(".pseudo", this).text() + "{" + jQuery(this).attr("id") + "}" + ">" + var tag = jQuery(".pseudo", this).text() + "{" + idMess + "}" + ">" if (valCourant.indexOf(tag, 0) == -1) jQuery("input.message").val(tag + " " + valCourant) - thisMessages.util.setCaretToEnd(jQuery("form input.message")[0]) + thisConversation.util.setCaretToEnd(jQuery("form input.message")[0]) } ) // Q : pourquoi pas un .hover ? - // R : simplement pour éviter que lorsqu'un message arrive cela n'affecte la conversation actuellement mise en évidence + // R : simplement pour éviter que lorsqu'un message arrive cela n'affecte la conversation actuellement mise en évidence (uniquement pour Firefox) .mousemove( function(e) { - if (this !== thisMessages.messageOver) + if (this !== thisConversation.messageOver) { - thisMessages.afficherConversation(this) - thisMessages.messageOver = this + thisConversation.afficherConversation(this) + thisConversation.messageOver = this } } ) @@ -456,17 +478,17 @@ Messages.prototype.flush = function() * Puis applique un plan diabolique. * @param element un message de la liste des messages */ -Messages.prototype.afficherConversation = function(element) +Conversation.prototype.afficherConversation = function(element) { // cherche le message selectionné var id = jQuery(element).attr("id") var message = this.messagesParId[id] if (message == undefined) return - mess = message.afficherConversation(this) - + mess = message.getConversation(this) + // FIXME : cet appel est très lent - jQuery("#messages .message").each( + jQuery("#conversations #" + this.getId() + " .message").each( function() { var jq = jQuery(this) @@ -478,11 +500,207 @@ Messages.prototype.afficherConversation = function(element) ) } +/** + * Supprime une conversation. + */ +Conversation.prototype.supprimer = function() +{ + jQuery("#conversations #" + this.getId()).remove() +} + +/////////////////////////////////////////////////////////////////////////////////////////////////// + +/** + * Représente l'ensemble des messages affichés. + */ +function Messages(client, formateur, util) +{ + this.client = client + this.formateur = formateur + this.util = util + + this.conversations = new Array() // les conversations, la première représente la conversation principale + this.nouvelleConversation(0) + + this.idDernierMessage = null // l'id du dernier message connu + + // l'objet XMLHttpRequest représentant la connexion d'attente + this.attenteCourante = null +} + +/** + * Crée un document XML contenant le message demandant un rafraichissement. + */ +Messages.prototype.getXMLrafraichirMessages = function() +{ + var XMLDocument = this.util.creerDocumentXMLAction() + XMLDocument.documentElement.setAttribute("name", "refreshMessages") + + if (this.client.identifie()) + { + var nodeCookie= XMLDocument.createElement("cookie") + nodeCookie.appendChild(XMLDocument.createTextNode(this.client.cookie)) + XMLDocument.documentElement.appendChild(nodeCookie) + } + + if (this.idDernierMessage != null) + { + var nodeDernierMessageId = XMLDocument.createElement("dernierMessageId") + nodeDernierMessageId.appendChild(XMLDocument.createTextNode(this.idDernierMessage)) + XMLDocument.documentElement.appendChild(nodeDernierMessageId) + } + + var nodeNombreMessage = XMLDocument.createElement("nombreMessage") + nodeNombreMessage.appendChild(XMLDocument.createTextNode(conf.nbMessageAffiche)) + XMLDocument.documentElement.appendChild(nodeNombreMessage) + + return XMLDocument; +} + +/** + * Ajoute un ensemble de messages puis les affiches. + * @param elements un tableau d'éléments représentant les messages, voir protocole.txt + * @param numConversation le numéro de la conversation auquel appartiennent les messages + */ +Messages.prototype.ajouterMessages = function(elements, numConversation) +{ + for (var i = 0; i < elements.length; i++) + this.ajouterMessage(elements[i], numConversation) + this.flush(numConversation) +} + +/** + * Création d'un nouveau message. + * Les message sont données dans l'ordre de leur id. + * @param element un element xml représentant le message + * @param numConversation le numéro de la conversation, 0 = principale + */ +Messages.prototype.ajouterMessage = function(element, numConversation) +{ + var thisMessages = this + + // pas d'utilisation de jquery pour des raisons de performance + var id = element.getAttribute("id") + if (this.idDernierMessage == null || parseInt(id, 36) > parseInt(this.idDernierMessage, 36)) + this.idDernierMessage = id + + var message = new Message( + id, + jQuery("date", element).text(), + jQuery("pseudo", element).text(), + jQuery("contenu", element).text() + ) + + message.appartientAuClient = jQuery("proprietaire", element).text() == "true" + message.clientARepondu = jQuery("repondu", element).text() == "true" + message.estUneReponse = jQuery("reponse", element).text() == "true" + message.systeme = jQuery("systeme", element).text() == "true" + message.setRepondA(jQuery("repondA", element)) + + if (this.conversations[numConversation] == null) + { + this.nouvelleConversation( + numConversation, + function(num) // fermeture de la conversation + { + thisMessages.supprimerConversation(num) + } + ) + } + + this.conversations[numConversation].ajouterMessage(message) +} + +Messages.prototype.nouvelleConversation = function(num, funFermer) +{ + var thisMessages = this + + this.conversations[num] = new Conversation(num, this.util, this.formateur, funFermer) + + this.conversations[num].setFunPage( + function(num) // page suivante + { + thisMessages.client.pageSuivante(num - 1) + thisMessages.rafraichirMessages(true) + }, + function(num) // page précédente + { + thisMessages.client.pagePrecedente(num - 1) + thisMessages.rafraichirMessages(true) + }, + function(num) // retour à la page une + { + if (thisMessages.client.goPremierePage(num - 1)) + thisMessages.rafraichirMessages(true) + } + ) + + this.ajusterLargeurConversations() +} + +/** + * Enlève une conversation. + */ +Messages.prototype.supprimerConversation = function(num) +{ + if (num <= 0 || num >= this.conversations.length) return // la numéro 0 ne peut être supprimé + this.conversations[num].supprimer() + + // décalage TODO : supprimer le dernier élément + for (var i = num; i < this.conversations.length - 1; i++) + { + this.conversations[i] = this.conversations[i+1] + this.conversations[i].num -= 1 + } + this.conversations.pop() + this.ajusterLargeurConversations() + + this.client.supprimerConversation(num-1) + + this.rafraichirMessages(true) +} + +/** + * Ajuste la largeur des conversations en fonction de leur nombre. modifie l'attribut CSS 'width'. + */ +Messages.prototype.ajusterLargeurConversations = function() +{ + jQuery("#conversations .conversation").css("width", 100 / this.conversations.length + "%") +} + +/** + * Demande à toutes les conversations de se flusher (afficher les messages non-affichés). + */ +Messages.prototype.flushAll = function() +{ + for (var i = 0; i < this.conversations.length; i++) + this.flush(i) +} + +/** + * Demande à une conversation de se flusher. + */ +Messages.prototype.flush = function(numConv) +{ + var thisMessages = this + + this.conversations[numConv].flush + ( + // fonction appelée lors de la demande d'extraction d'une conversation + function(idMess) + { + if (thisMessages.client.ajouterConversation(idMess)) + thisMessages.rafraichirMessages(true) + } + ) +} + Messages.prototype.viderMessages = function() { - this.idDernierMesssage = null - this.messages = new Array() - jQuery("#messages").empty() + this.idDernierMessage = null + + for (var i = 0; i < this.conversations.length; i++) + this.conversations[i].viderMessages() } /** @@ -492,21 +710,18 @@ Messages.prototype.viderMessages = function() */ Messages.prototype.rafraichirMessages = function(vider) { + var thisMessages = this // caisupair javacrypte + if (this.attenteCourante != null) this.attenteCourante.abort() - + if (vider == undefined) vider = false if (vider) - { - this.idDernierMesssage = null - this.messages = new Array() - } - - var thisMessages = this // caisupair javacrypte + this.idDernierMessage = null - //this.util.log(this.util.serializer.serializeToString(this.getXMLrafraichirMessages())) + //this.util.xmlVersAction(this.getXMLrafraichirMessages()).action.dump() this.attenteCourante = jQuery.ajax({ type: "POST", url: "request", @@ -515,20 +730,36 @@ Messages.prototype.rafraichirMessages = function(vider) success: function(data) { - //thisMessages.util.log(thisMessages.util.serializer.serializeToString(data)) + //thisMessages.util.serializer.serializeToString(data).dump() if (vider) thisMessages.viderMessages() - thisMessages.MAJPages(parseInt(jQuery("nbPage", data.documentElement).text())) - - reponse = jQuery("message", data.documentElement).each( + // ajoute les messages reçu à leur conversation respective + var numConv = 0 + jQuery("conversation", data.documentElement).each( function(i) - { - thisMessages.ajouterMessage(this, false) + { + var messages = [] + jQuery("message", this).each( + function(j) + { + // thisMessages.ajouterMessage(this, numConv) + messages.push(this) + } + ) + + thisMessages.ajouterMessages(messages, numConv) + + thisMessages.conversations[numConv].setPage( + numConv == 0 ? thisMessages.client.pagePrincipale : thisMessages.client.conversations[numConv - 1].page, + jQuery("autresPages", this).text() != "true" + ) + numConv += 1 } ) - thisMessages.flush() + + // rappel de la fonction dans 100 ms setTimeout(function(){ thisMessages.rafraichirMessages() }, 100); }, error: @@ -539,50 +770,3 @@ Messages.prototype.rafraichirMessages = function(vider) } ) } - -Messages.prototype.MAJPages = function(nbPage) -{ - //alert(nbPage) - - var thisMessages = this - - var nbPageActuel = jQuery("#pages span").size() - - for(var p = nbPageActuel + 1; p <= nbPage && p <= 3; p++) - { - jQuery("#pages").append("" + p + "").click( - function(event) - { - var target = jQuery(event.target) - - if(!target.is("span")) - return - - thisMessages.allerSurLaPage(parseInt(jQuery(event.target).text())) - } - ) - } -} - -Messages.prototype.allerSurLaPage = function(page) -{ - if (page == this.page) - return - this.page = page - - var thisMessages = this - - //jQuery("#pages span").removeClass("pageCourante") - jQuery("#pages span").each( - function(i) - { - if (jQuery(this).text() == thisMessages.page) - jQuery(this).addClass("pageCourante") - else - jQuery(this).removeClass("pageCourante") - } - ) - - this.rafraichirMessages(true) -} -