ADD possibilité d'inverser le sens du chat

[euphorik.git] / js / pageMinichat.js

diff --git a/js/pageMinichat.js b/js/pageMinichat.js
index 244467a..bd869f0 100755 (executable)
--- a/js/pageMinichat.js
+++ b/js/pageMinichat.js
@@ -35,9 +35,7 @@ function PageMinichat(client, formateur, util)
 PageMinichat.prototype.contenu = function()
 {
    // le fait que tout soit collé est fait exprès, permet d'éviter d'avoir des espaces supplémentaires entre les spans'
-   return '\
-<div id="trollCourant">Troll de la semaine : <span class="troll"></span></div>\
-<form method="post" action="" id ="posterMessage">\
+   var formulaireXHTML = '<form method="post" action="" id ="posterMessage">\
 <p>\
 <input class="captcha" name="captcha" type="text" size="8" maxlength="8"></input>\
 <input class="pseudo" name="pseudo" type="text" maxlength="50" value="' + encodeURI(conf.nickDefaut) + '"></input>\
@@ -46,8 +44,21 @@ PageMinichat.prototype.contenu = function()
 <button class="smiles"></button>\
 <button class="return"></button>\
 </p>\
-</form>\
-<div id="conversations"></div>'
+</form>'
+   var trollXHTML = '<div id="trollCourant">Troll de la semaine : <span class="troll"></span></div>'
+   //var titreXHTML = '<tr id="titres"></tr>'
+   //var messagesXHTML = '<tr id="messages"></tr>'
+   var conversationXHTML = '<table id="conversations"><tr></tr></table>'
+    
+   if (this.client.chatOrder == "reverse")
+      return trollXHTML + formulaireXHTML + conversationXHTML
+   else
+      return trollXHTML + conversationXHTML + formulaireXHTML
+}
+
+PageMinichat.prototype.classes = function()
+{
+   return this.client.chatOrder == "reverse" ? "orderReverse" : "orderChrono"
 }
 
 PageMinichat.prototype.charger = function()
@@ -249,7 +260,8 @@ PageMinichat.prototype.envoyerMessage = function(pseudo, message)
                      if (mess != undefined)
                         mess.clientARepondu = true
                   }
-                  $("#conversations div#" + thisPageMinichat.conversations.messagesRepond[messId].getId()).addClass("repondu")
+                  // TODO : ca sert à qque chose ?
+                  //$("#conversations div#" + thisPageMinichat.conversations.messagesRepond[messId].getId()).addClass("repondu")
                }
                
                $("form input.message").val("")
@@ -454,23 +466,31 @@ function Conversation(conversations, num)
    
    this.nbMessageMax = conf.nbMessageAffiche // Le nombre de message affiché par page
 
-   $("#conversations").append(
-      '<div id="' + this.getId() + '" class="conversation">' +
-      '<div class="messages"></div>' +
-      '<div class="titre">' +
-         '<div class="barre">' +
-             (num == 0 ? '' : '<div class="fermer"></div><div class="lien"></div><div class="reduire"></div>') +
-             '<span class="next">&lt;</span><span class="numPage">1</span><span class="prev">&gt;</span>' +
-             '</div>' +
+   var messagesXHTML = '<div class="messages"></div>'
+   var messageRacineXHTML = '<div class="messageRacine"></div>'
+   var reverse = this.client.chatOrder == "reverse"
+    
+   var XHTML = 
+      '<td class="conversation" id="' + this.getId() + '">' +
+         (reverse ? messagesXHTML : "") +
+         '<div class="titre">' +
+            (reverse ? messageRacineXHTML : "") +
+            '<div class="nav">' +
+               (num == 0 ? '' : '<div class="fermer"></div><div class="lien"></div><div class="reduire"></div>') +
+               '<span class="next">&lt;</span><span class="numPage">1</span><span class="prev">&gt;</span>' +
+            '</div>' +
+            (reverse ? "" : messageRacineXHTML) +
          '</div>' +
-      '</div>'
-   )
+         (reverse ? "" : messagesXHTML) +
+      '</td>'
+    
+   $("#conversations tr").append(XHTML)
    
-   this.util.infoBulle("Aller à la première page", $("#conversations #" + this.getId() + " .numPage"))
+   this.util.infoBulle("Aller à la première page", $("#" + this.getId() + " .numPage"))
    if (num != 0)
    {
-      this.util.infoBulle("Créer un lien vers la conversation", $("#conversations #" + this.getId() + " .lien"))
-      this.util.infoBulle("Fermer la conversation", $("#conversations #" + this.getId() + " .fermer"))   
+      this.util.infoBulle("Créer un lien vers la conversation", $("#" + this.getId() + " .lien"))
+      this.util.infoBulle("Fermer la conversation", $("#" + this.getId() + " .fermer"))   
    }
 }
 
@@ -496,7 +516,7 @@ Conversation.prototype.majRacine = function()
       this.messagesParId[this.racine.id] = this.racine
       var element = $(this.racine.XHTML(true, this.getId()))
       this.attacherEventsSurMessage(element)
-      $("#" + this.getId() + " .titre").prepend(element)
+      $("#" + this.getId() + " .titre .messageRacine").append(element)
    }
 }
 
@@ -513,11 +533,11 @@ Conversation.prototype.colorerEntetes = function()
    for (var i = 0; i < this.messages.length; i++)
    {
       if (this.messages[i].appartientAuClient)
-         messagesProprietaire += ".messages #" + this.messages[i].getId(this.getId()) + ","
+         messagesProprietaire += "#" + this.messages[i].getId(this.getId()) + ","
       else if (this.messages[i].clientARepondu)
-         messagesRepondu += ".messages #" + this.messages[i].getId(this.getId()) + ","
+         messagesRepondu += "#" + this.messages[i].getId(this.getId()) + ","
       else if (this.messages[i].estUneReponse)
-         messagesReponse += ".messages #" + this.messages[i].getId(this.getId()) + ","
+         messagesReponse += "#" + this.messages[i].getId(this.getId()) + ","
    }
    $(messagesReponse).addClass("reponse")
    $(messagesRepondu).addClass("repondu")
@@ -539,9 +559,9 @@ Conversation.prototype.decolorerEntetes = function()
   */
 Conversation.prototype.setPage = function(pageCourante, dernierePage)
 {
-   $("#conversations #" + this.getId() + " .numPage").text(pageCourante)
-   $("#conversations #" + this.getId() + " .next").css("display", pageCourante == 1 ? "none" : "inline")
-   $("#conversations #" + this.getId() + " .prev").css("display", dernierePage ? "none" : "inline")
+   $("#" + this.getId() + " .numPage").text(pageCourante)
+   $("#" + this.getId() + " .next").css("display", pageCourante == 1 ? "none" : "inline")
+   $("#" + this.getId() + " .prev").css("display", dernierePage ? "none" : "inline")
 }
 
 /**
@@ -551,7 +571,7 @@ Conversation.prototype.eventLien = function(fun)
 {
    var thisConversation = this
    
-   $("#conversations #" + this.getId() + " .titre .lien").click(
+   $("#" + this.getId() + " .titre .lien").click(
       function()
       {
          fun(thisConversation.num)
@@ -566,7 +586,7 @@ Conversation.prototype.eventFermer = function(fun)
 {
    var thisConversation = this
    
-   $("#conversations #" + this.getId() + " .titre .fermer").click(
+   $("#" + this.getId() + " .titre .fermer").click(
       function()
       {
          fun(thisConversation.num)
@@ -583,13 +603,13 @@ Conversation.prototype.setFunPage = function(funNext, funPrev, funReset)
 {
    var thisConversation = this
    
-   $("#conversations #" + this.getId() + " .next").click(
+   $("#" + this.getId() + " .next").click(
       function() { funNext(thisConversation.num) }
    )
-   $("#conversations #" + this.getId() + " .prev").click(
+   $("#" + this.getId() + " .prev").click(
       function() { funPrev(thisConversation.num) }
    )
-   $("#conversations #" + this.getId() + " .numPage").click(
+   $("#" + this.getId() + " .numPage").click(
       function() { funReset(thisConversation.num) }
    )
 }
@@ -618,7 +638,7 @@ Conversation.prototype.viderMessages = function()
    this.messages = []
    this.messagesParId = {}
    this.idDernierMessageAffiche = 0
-   $("#conversations #" + this.getId() + " .message").remove()
+   $("#" + this.getId() + " .messages .message").remove()
 }
 
 Conversation.prototype.idMessageFromString = function(idString)
@@ -634,10 +654,11 @@ Conversation.prototype.idMessageFromString = function(idString)
 Conversation.prototype.flush = function()
 {
    var thisConversation = this
+   var reverse = this.client.chatOrder == "reverse"
 
    // est-ce que le prochain message est pair ? (permet d'alterner le style des messages)
    var messagePair = (this.idDernierMessageAffiche == 0 ? true :
-      ($("#" + this.getId() + " .messages div:first").attr("class").search("messagePair") == -1)
+      ($("#" + this.getId() + " .messages div:" + (reverse ? "first" : "last")).attr("class").search("messagePair") == -1)
    )
       
    // construction de l'XHTML des messages
@@ -648,17 +669,25 @@ Conversation.prototype.flush = function()
          XHTML += this.messages[i].XHTML(messagePair, this.getId())
          messagePair = !messagePair
       }
-   
+      
    var DOM = $(XHTML)
-    
+       
    // pour chaque nouveau message au niveau du document on crée ses événements
    DOM.each(function() { thisConversation.attacherEventsSurMessage(this) })
-   DOM.prependTo("#" + this.getId() + " .messages")
+   if (reverse)
+      DOM.prependTo("#" + this.getId() + " .messages")
+   else
+      DOM.appendTo("#" + this.getId() + " .messages")
    
    // enlève les messages exedentaires
-   var nbMessagesAffiche = $("#" + this.getId() + " .message").size()   
+   var nbMessagesAffiche = $("#" + this.getId() + " .messages .message").size()   
    if (nbMessagesAffiche > this.nbMessageMax)
-      $("#conversations #" + this.getId() + " .messages .message").slice(this.nbMessageMax, nbMessagesAffiche).remove()
+   {
+      if (reverse)
+         $("#" + this.getId() + " .messages .message").slice(this.nbMessageMax, nbMessagesAffiche).remove()
+      else
+         $("#" + this.getId() + " .messages .message").slice(0, nbMessagesAffiche - this.nbMessageMax).remove()
+   }
    
    if (this.messages.length > 0)
       this.idDernierMessageAffiche = this.messages[this.messages.length-1].id
@@ -793,7 +822,7 @@ Conversation.prototype.afficherConversation = function(id)
    var mess = message.getConversation(this)
    
    // FIXME : cet appel est très lent
-   $("#conversations #" + this.getId() + " .messages .message").each(
+   $("#" + this.getId() + " .messages .message").each(
       function()
       {
          var jq = $(this)
@@ -827,7 +856,7 @@ Conversation.prototype.afficherConversation = function(id)
   */
 Conversation.prototype.supprimer = function()
 {
-   $("#conversations #" + this.getId()).remove()
+   $("#" + this.getId()).remove()
 }
 
 ///////////////////////////////////////////////////////////////////////////////////////////////////
@@ -883,7 +912,7 @@ Conversations.prototype.enleverMessagesRepond = function()
     
    // on réinitialise pour être sur que tout est bien enlevé
    this.messagesRepond = {}
-   $("#conversations div.message").removeClass("repondEnEvidence")
+   $("#conversations .message").removeClass("repondEnEvidence")
    $("form#posterMessage #repondA .messages").empty()
 }
 
@@ -1142,11 +1171,13 @@ Conversations.prototype.supprimerConversation = function(num)
   */
 Conversations.prototype.ajusterLargeurConversations = function()
 {
+   // TODO : trouver mieux !
    var largeurPourcent = (100 / this.conversations.length)   
+   // obsolète !?
    // le "- 0.01" evite que IE se chie dessus lamentablement et affiche les conversations les unes au dessus des autres
-   if($.browser["msie"])
-      largeurPourcent -= 0.05
-   $("#conversations .conversation").css("width", largeurPourcent + "%")
+   //if($.browser["msie"])
+   //    largeurPourcent -= 0.05
+   $("#conversations td").css("width", largeurPourcent + "%")
 }
 
 /**