js/pageMinichat.js

   1 // coding: utf-8
   2
   3 function PageMinichat(client, formateur, util)
   4 {
   5    this.nom = "minichat"
   6
   7    this.client = client
   8    this.formateur = formateur
   9    this.util = util
  10
  11    this.regexMessageTagMatch = /\{.*?\}>/g
  12    this.regexMessageTagReplace =  /^(.*?\{.*?\}>)*/
  13
  14    this.messages = new Messages(this.client, this.formateur, this.util)
  15 }
  16
  17 PageMinichat.prototype.contenu = function()
  18 {
  19    return '\
  20 <div id="smiles"></div>\
  21 <form method="post" action="">\
  22    <p>\
  23       <input class="captcha" name="captcha" type="text" size="12"></input>\
  24       <input class="pseudo" name="pseudo" type="text" size="12" maxlength="50" value="&lt;nick&gt;"></input>\
  25       <input class="message" name="message" type="text" size="80" maxlength="500" value=""></input>\
  26       <button class="return"></button>\
  27    </p>\
  28 </form>\
  29 <div id="messages"></div>\
  30 <div id="pages"></div>'
  31 }
  32
  33 PageMinichat.prototype.charger = function()
  34 {
  35    thisPage = this
  36
  37    jQuery("form input.pseudo").val(this.client.pseudo)
  38
  39    this.messages.rafraichirMessages(true)
  40
  41    this.util.setCaretToEnd(jQuery("form input.message")[0])
  42
  43    jQuery("#messages").hover(
  44       function(){},
  45       function(event)
  46       {
  47          jQuery("#messages .message").removeClass("cache")
  48          thisPage.messages.messageOver = null
  49       }
  50    )
  51
  52    // affichage des smiles
  53    jQuery("#smiles").html(this.formateur.getSmilesHTML()).children().each(
  54       function(i)
  55       {
  56          var opacityBase = jQuery(this).css("opacity")
  57          jQuery(this).click(
  58             function(event)
  59             {
  60                thisPage.util.replaceSelection(jQuery("form input.message")[0], thisPage.formateur.smiles[jQuery(this).attr("class")][0].source.replace(/\\/g, ""))
  61             }
  62          )
  63          .hover(
  64             function()
  65             {
  66                jQuery(this).animate(
  67                   {
  68                      opacity: 1
  69                   }, 200
  70                )
  71             },
  72             function()
  73             {
  74                jQuery(this).animate(
  75                   {
  76                      opacity: opacityBase
  77                   }, 200
  78                )
  79             }
  80          )
  81       }
  82    )
  83
  84    /// événements
  85    jQuery("form button.return").click(
  86       function()
  87       {
  88          // captcha anti bot
  89          if (jQuery("form input.captcha").val() != "") return
  90
  91          thisPage.messages.allerSurLaPage(1)
  92
  93          thisPage.envoyerMessage(
  94             jQuery("form input.pseudo").val(),
  95             jQuery("form input.message").val()
  96          )
  97
  98          jQuery("form input.message")[0].focus()
  99       }
 100    )
 101    // interdiction de submiter le formulaire
 102    jQuery("form").submit(function(){return false})
 103
 104    jQuery("input.pseudo").click(
 105       function()
 106       {
 107          var input = jQuery("input.pseudo")[0]
 108          if (input.value == conf.pseudoDefaut)
 109             input.value = ""
 110       }
 111    )
 112 }
 113
 114 PageMinichat.prototype.decharger = function()
 115 {
 116    if (this.attenteCourante != null)
 117       this.attenteCourante.abort()
 118 }
 119
 120 PageMinichat.prototype.getXMLMessage = function(pseudo, message, repondA)
 121 {
 122    var XMLDocument = this.util.creerDocumentXMLAction()
 123    XMLDocument.documentElement.setAttribute("name", "message")
 124
 125    var nodeCookie = XMLDocument.createElement("cookie")
 126    nodeCookie.appendChild(XMLDocument.createTextNode(this.client.cookie))
 127    XMLDocument.documentElement.appendChild(nodeCookie)
 128
 129    var nodePseudo = XMLDocument.createElement("pseudo")
 130    nodePseudo.appendChild(XMLDocument.createTextNode(pseudo))
 131    XMLDocument.documentElement.appendChild(nodePseudo)
 132
 133    var nodeContenu = XMLDocument.createElement("contenu")
 134    nodeContenu.appendChild(XMLDocument.createTextNode(message))
 135    XMLDocument.documentElement.appendChild(nodeContenu)
 136
 137    if (repondA.length > 0)
 138    {
 139       var nodeReponses = XMLDocument.createElement("reponses")
 140       XMLDocument.documentElement.appendChild(nodeReponses)
 141       for (var i = 0; i < repondA.length; i++)
 142       {
 143          var nodeReponse = XMLDocument.createElement("reponse")
 144          nodeReponse.setAttribute("id", repondA[i])
 145          nodeReponses.appendChild(nodeReponse)
 146       }
 147    }
 148
 149    return XMLDocument
 150 }
 151
 152 PageMinichat.prototype.envoyerMessage = function(pseudo, message)
 153 {
 154    // (un pseudo vide est autorisé)
 155    pseudo = this.formateur.filtrerInputPseudo(pseudo)
 156
 157    // extraction des id des messages (en base 36 évidemment) auquels le user répond
 158    var repondA = []
 159    var tags = message.match(this.regexMessageTagMatch)
 160    if (tags != null)
 161    {
 162       for(var i = 0; i < tags.length; i++)
 163          repondA.push(/\{(.*?)\}>/.exec(tags[i])[1])
 164       message = message.replace(this.regexMessageTagReplace, "")
 165
 166       // met à jour la classe des messages auquel repond celui ci (c'est un peu de la triche)
 167       for (var i = 0; i < repondA.length; i++)
 168       {
 169          jQuery("#messages div#" + repondA[i]).addClass("repondu")
 170          for (var m = 0; m < this.messages.messages.length; m++)
 171             this.messages.messages[m].clientARepondu = true
 172       }
 173    }
 174
 175    message = message.trim()
 176    if (message == "")
 177    {
 178       this.util.messageDialogue("Le message est vide")
 179       return
 180    }
 181
 182    if (!this.client.identifie())
 183       if (!this.client.enregistrement())
 184       {
 185          this.util.messageDialogue("login impossible")
 186          return
 187       }
 188
 189    //this.util.log(this.util.xmlVersAction(this.getXMLmessage(pseudo, message, repondA)).action)
 190    //alert(this.util.xmlVersAction(this.getXMLMessage(pseudo, message, repondA)).action)
 191    /* Obsolète
 192    jQuery.post("request",  this.util.xmlVersAction(this.getXMLMessage(pseudo, message, repondA)),
 193       function(data, textStatus)
 194       {
 195          // TODO : traiter les erreurs
 196          //alert(data)
 197          jQuery("form input.message").val("")
 198       }
 199    )*/
 200
 201    jQuery.ajax(
 202       {
 203          url : "request",
 204          type: "POST",
 205          data : this.util.xmlVersAction(this.getXMLMessage(pseudo, message, repondA)),
 206          dataType : "xml",
 207          success : function(data, textStatus)
 208          {
 209             if(jQuery("statut", data.documentElement).text() == "ok")
 210                jQuery("form input.message").val("")
 211          }
 212       }
 213    )
 214 }
 215
 216 ///////////////////////////////////////////////////////////////////////////////////////////////////
 217
 218 function Reponse(id, pseudo, login)
 219 {
 220    this.id = id
 221    this.pseudo = pseudo
 222    this.login = login
 223
 224    if (this.pseudo == undefined)
 225       this.pseudo = ""
 226
 227    if (this.login == undefined)
 228       this.login = ""
 229 }
 230
 231 ///////////////////////////////////////////////////////////////////////////////////////////////////
 232
 233 /**
 234   * Représente un message.
 235   * @param id (string)
 236   * @param date (string)
 237   * @param pseudo
 238   * @param contenu
 239   */
 240 function Message(id, date, pseudo, contenu)
 241 {
 242    this.id = id
 243    this.date = date
 244    this.pseudo = pseudo
 245    this.contenu = contenu
 246
 247    this.appartientAuClient = false
 248    this.clientARepondu = false
 249    this.estUneReponse = false
 250
 251    this.systeme = false // est-ce un message 'système' ?
 252
 253    this.repondA = {} // un ensemble de reponse (voir Reponse) indexé par l'id du message de la reponses
 254 }
 255
 256 /**
 257   *
 258   */
 259 Message.prototype.setRepondA = function(element)
 260 {
 261    this.repondA = {}
 262
 263    var thisMessage = this
 264
 265    jQuery("id", element).each (
 266       function()
 267       {
 268          var reponse = new Reponse(jQuery(this).attr("id"), jQuery(this).attr("pseudo"), jQuery(this).attr("login"))
 269          thisMessage.repondA[reponse.id] = reponse
 270       }
 271    )
 272 }
 273
 274 /**
 275   * @return les id des messages qui ont été mis en evidence sous la forme d'un objet
 276   */
 277 Message.prototype.afficherConversation = function(messages)
 278 {
 279    // les messages faisant partie de la conversation
 280    var messagesEnEvidence = {}
 281
 282    messagesEnEvidence[this.id] = true
 283
 284    // recherche les réponses (O(n))
 285    for (var i = 0; i < messages.messages.length; i++)
 286       if (messages.messages[i].repondA.hasOwnProperty(this.id))
 287          messagesEnEvidence[messages.messages[i].id] = true
 288
 289    var f = function(tabIds)
 290    {
 291       for(var id in tabIds)
 292       {
 293          var message = messages.messagesParId[id]
 294          if (message != undefined)
 295          {
 296             messagesEnEvidence[id] = true
 297             f (message.repondA)
 298          }
 299       }
 300    }
 301    f(this.repondA)
 302
 303    return messagesEnEvidence
 304 }
 305
 306 ///////////////////////////////////////////////////////////////////////////////////////////////////
 307
 308 /**
 309   * Représente une conversation.
 310   */
 311 function Conversation()
 312 {
 313    this.messages = new Array()
 314    this.messagesParId = new Object()
 315
 316    this.idDernierMesssage = null // la racine de la conversation (string), null = conversation principale
 317
 318    this.page = 1 // par défaut on se trouve sur la première page
 319 }
 320
 321 Conversation.prototype.ajouterMessage = function(message)
 322 {
 323    this.messages.push(message)
 324    this.messagesParId[message.id] = message
 325    if (this.messages.length > this.nbMessageMax)
 326       delete this.messagesParId[this.messages.shift().id]
 327 }
 328
 329 Conversation.prototype.viderMessages = function()
 330 {
 331    this.messages = new Array()
 332    jQuery("#messages").empty()
 333 }
 334
 335 /**
 336   * Après l'ajout d'un ou plusieurs message cette méthode est appelée afin
 337   * d'afficher les messages non-affichés.
 338   */
 339 Conversation.prototype.flush = function()
 340 {
 341    var thisMessages = this
 342
 343    var idDernierMessageAffiche = jQuery("#messages div:first").attr("id")
 344    if (idDernierMessageAffiche == undefined) idDernierMessageAffiche = "0"
 345
 346    var XHTML = ""
 347    for (var i = this.messages.length - 1; i >= 0; i--)
 348       if (parseInt(this.messages[i].id, 36) > parseInt(idDernierMessageAffiche, 36))
 349       {
 350          var message = this.messages[i]
 351          var XHTMLrepondA = ""
 352          for (var id in message.repondA)
 353             XHTMLrepondA += this.formateur.traitementComplet(message.repondA[id].pseudo) + "> "
 354          XHTMLrepondA = "<div class=\"repondA\">" + XHTMLrepondA + "</div>"
 355
 356          XHTML +=
 357             "<div id=\"" + message.id + "\" class=\"" + (parseInt(message.id, 36) % 2 == 0 ? "messagePair" : "messageImpair") + " message" +
 358                (this.messages[i].appartientAuClient ? " proprietaire" : "")  + (this.messages[i].clientARepondu ? " repondu" : "") + (this.messages[i].estUneReponse ? " reponse" : "") + (this.messages[i].systeme ? " systeme" : "") +
 359             "\" >" +
 360                "[<div class=\"date\">" + message.date + "</div>]" +
 361                "<div class=\"pseudo\">" + this.formateur.traitementComplet(message.pseudo) + "</div>:" +
 362                XHTMLrepondA +
 363                "<div class=\"contenu\">" + (message.systeme ? this.formateur.remplacerBalisesHTML(message.contenu) : this.formateur.traitementComplet(message.contenu, message.pseudo))+ "</div>" +
 364             "</div>"
 365       }
 366    jQuery("#messages").prepend(XHTML)
 367
 368    if (myLightbox != null)
 369       myLightbox.updateImageList()
 370
 371    var nbMessagesAffiche = jQuery("#messages .message").size()
 372    if (nbMessagesAffiche > this.nbMessageMax)
 373       jQuery("#messages .message").slice(this.nbMessageMax, nbMessagesAffiche).empty();
 374
 375    jQuery("#messages .message").filter(function(){return parseInt(jQuery(this).attr("id"), 36) > parseInt(idDernierMessageAffiche, 36)}).each(
 376       function()
 377       {
 378          jQuery(this).click(
 379             function(event)
 380             {
 381                if (jQuery(event.target).is("a")) return
 382
 383                var valCourant = jQuery("input.message").val()
 384                if (valCourant == undefined) valCourant = ""
 385                var tag = jQuery(".pseudo", this).text()  + "{" + jQuery(this).attr("id") + "}" + ">"
 386                if (valCourant.indexOf(tag, 0) == -1)
 387                   jQuery("input.message").val(tag + " " + valCourant)
 388                thisMessages.util.setCaretToEnd(jQuery("form input.message")[0])
 389             }
 390          )
 391          // Q : pourquoi pas un .hover ?
 392          // R : simplement pour éviter que lorsqu'un message arrive cela n'affecte la conversation actuellement mise en évidence
 393          .mousemove(
 394             function(e)
 395             {
 396                if (this !== thisMessages.messageOver)
 397                {
 398                   thisMessages.afficherConversation(this)
 399                   thisMessages.messageOver = this
 400                }
 401             }
 402          )
 403       }
 404    )
 405 }
 406
 407 ///////////////////////////////////////////////////////////////////////////////////////////////////
 408
 409 /**
 410   * Représente l'ensemble des messages affichés.
 411   */
 412 function Messages(client, formateur, util)
 413 {
 414    this.client = client
 415    this.formateur = formateur
 416    this.util = util
 417
 418    this.conversations = new Array() // les conversations, la première représente la conversation principale
 419    this.conversations[0] = new Conversation()
 420
 421    this.idDernierMesssage = null // l'id du dernier message connu
 422
 423    // l'objet XMLHttpRequest représentant la connexion d'attente
 424    this.attenteCourante = null
 425
 426    var messageOver = null // element
 427 }
 428
 429 /**
 430   * Crée un document XML contenant le message demandant un rafraichissement.
 431   */
 432 Messages.prototype.getXMLrafraichirMessages = function()
 433 {
 434    var XMLDocument = this.util.creerDocumentXMLAction()
 435    XMLDocument.documentElement.setAttribute("name", "refreshMessages")
 436
 437    //alert(this.util.serializer.serializeToString(XMLDocument))
 438
 439    if (this.client.identifie())
 440    {
 441       var nodeCookie= XMLDocument.createElement("cookie")
 442       nodeCookie.appendChild(XMLDocument.createTextNode(this.client.cookie))
 443       XMLDocument.documentElement.appendChild(nodeCookie)
 444    }
 445
 446    if (this.idDernierMesssage != null)
 447    {
 448       var nodeDernierMessageId = XMLDocument.createElement("dernierMessageId")
 449       nodeDernierMessageId.appendChild(XMLDocument.createTextNode(this.idDernierMesssage))
 450       XMLDocument.documentElement.appendChild(nodeDernierMessageId)
 451    }
 452
 453    var nodeNombreMessage = XMLDocument.createElement("nombreMessage")
 454    nodeNombreMessage.appendChild(XMLDocument.createTextNode(conf.nbMessageAffiche))
 455    XMLDocument.documentElement.appendChild(nodeNombreMessage)
 456
 457    var nodePage = XMLDocument.createElement("page")
 458    nodePage.appendChild(XMLDocument.createTextNode(this.conversation[0].page))
 459    XMLDocument.documentElement.appendChild(nodePage)
 460
 461    // les conversations
 462    for (var i = 1; i < this.conversations.length; i++)
 463    {
 464       var nodeConversation = XMLDocument.createElement("conversation")
 465       XMLDocument.documentElement.appendChild(nodeConversation)
 466
 467       var nodeRacine = XMLDocument.createElement("racine")
 468       nodeRacine.appendChild(XMLDocument.createTextNode(this.conversation.racine))
 469       nodeConversation.appendChild(nodeRacine)
 470
 471       var nodePageConv = XMLDocument.createElement("page")
 472       nodePageConv.appendChild(XMLDocument.createTextNode(this.conversation.page))
 473       nodeConversation.appendChild(nodePageConv)
 474    }
 475
 476    return XMLDocument;
 477 }
 478
 479 /**
 480   * Création d'un nouveau message.
 481   * Les message sont données dans l'ordre de leur id.
 482   * @param element un element xml représentant le message
 483   * @param numConversation le numéro de la conversation, 0 = principale
 484   */
 485 Messages.prototype.ajouterMessage = function(element, numConversation)
 486 {
 487    // pas d'utilisation de jquery pour des raisons de performance
 488    this.idDernierMesssage = element.getAttribute("id")
 489
 490    var message = new Message(
 491       this.idDernierMesssage,
 492       jQuery("date", element).text(),
 493       jQuery("pseudo", element).text(),
 494       jQuery("contenu", element).text()
 495    )
 496
 497    message.appartientAuClient = jQuery("proprietaire", element).text() == "true"
 498    message.clientARepondu = jQuery("repondu", element).text() == "true"
 499    message.estUneReponse = jQuery("reponse", element).text() == "true"
 500    message.systeme = jQuery("systeme", element).text() == "true"
 501    message.setRepondA(jQuery("repondA", element))
 502
 503    if (this.conversations[numConversation] == null)
 504       this.conversations[numConversation] = new Conversation()
 505    this.conversations[numConversation].ajouterMessage(message)
 506 }
 507
 508 /**
 509   * Demande à toutes les conversations de se flusher (afficher les messages non-affichés).
 510   */
 511 Messages.prototype.flush = function()
 512 {
 513    for (var i = 0; i < this.conversations.length; i++)
 514       this.conversations[i].flush().
 515 }
 516
 517 /**
 518   * Etablit une liste des messages à mettre en evidence et des messages à cacher.
 519   * Puis applique un plan diabolique.
 520   * @param element un message de la liste des messages
 521   */
 522 Messages.prototype.afficherConversation = function(element)
 523 {
 524    // cherche le message selectionné
 525    var id = jQuery(element).attr("id")
 526    var message = this.messagesParId[id]
 527    if (message == undefined) return
 528
 529    mess = message.afficherConversation(this)
 530
 531    // FIXME : cet appel est très lent
 532    jQuery("#messages .message").each(
 533       function()
 534       {
 535          var jq = jQuery(this)
 536          if (!mess.hasOwnProperty(jq.attr("id")))
 537             jq.addClass("cache")
 538          else
 539             jq.removeClass("cache")
 540       }
 541    )
 542 }
 543
 544 Messages.prototype.viderMessages = function()
 545 {
 546    this.idDernierMesssage = null
 547
 548    for (var i = 0; i < this.conversations.length; i++)
 549       this.conversations[i].viderMessages()
 550 }
 551
 552 /**
 553   * Met à jour les messages de manière continue.
 554   * (AJAX-Comet-style proof)
 555   * @param vider vide tous les messages avant d'afficher les nouveaux
 556   */
 557 Messages.prototype.rafraichirMessages = function(vider)
 558 {
 559    if (this.attenteCourante != null)
 560       this.attenteCourante.abort()
 561
 562    if (vider == undefined)
 563       vider = false
 564
 565    if (vider)
 566    {
 567       this.idDernierMesssage = null
 568       this.messages = new Array()
 569    }
 570
 571    var thisMessages = this // caisupair javacrypte
 572
 573    //this.util.log(this.util.serializer.serializeToString(this.getXMLrafraichirMessages()))
 574    //alert(this.util.xmlVersAction(this.getXMLrafraichirMessages()).action)
 575    this.attenteCourante = jQuery.ajax({
 576          type: "POST",
 577          url: "request",
 578          dataType: "xml",
 579          data: this.util.xmlVersAction(this.getXMLrafraichirMessages()),
 580          success:
 581             function(data)
 582             {
 583                //thisMessages.util.log(thisMessages.util.serializer.serializeToString(data))
 584
 585                if (vider)
 586                   thisMessages.viderMessages()
 587
 588                //thisMessages.MAJPages(parseInt(jQuery("nbPage", data.documentElement).text()))
 589
 590                // ajoute chaque message reçu à sa conversation respective
 591                jQuery("conversation", data.documentElement).each(
 592                   function(i)
 593                   {
 594                      jQuery("message", this).each(
 595                         function(j)
 596                         {
 597                            thisMessages.ajouterMessage(this, numConv)
 598                         }
 599                      )
 600                   }
 601                )
 602
 603                // demande à toutes les conversations d'afficher les messages non-affichés
 604                thisMessages.flush()
 605
 606                // rappel de la fonction dans 100 ms
 607                setTimeout(function(){ thisMessages.rafraichirMessages() }, 100);
 608             },
 609          error:
 610             function(XMLHttpRequest, textStatus, errorThrown)
 611             {
 612                setTimeout(function(){ thisMessages.rafraichirMessages() }, 1000);
 613             }
 614       }
 615    )
 616 }
 617
 618 /* Osbolète
 619 Messages.prototype.MAJPages = function(nbPage)
 620 {
 621    //alert(nbPage)
 622
 623    var thisMessages = this
 624
 625    var nbPageActuel = jQuery("#pages span").size()
 626
 627    for(var p = nbPageActuel + 1; p <= nbPage && p <= 3; p++)
 628    {
 629       jQuery("#pages").append("<span " + (this.page == p ? "class=\"pageCourante\"" : "" ) + ">" + p + "</span>").click(
 630          function(event)
 631          {
 632             var target = jQuery(event.target)
 633
 634             if(!target.is("span"))
 635                return
 636
 637             thisMessages.allerSurLaPage(parseInt(jQuery(event.target).text()))
 638          }
 639       )
 640    }
 641 }*/
 642
 643 /* Obsolète
 644 Messages.prototype.allerSurLaPage = function(page)
 645 {
 646    if (page == this.page)
 647       return
 648    this.page = page
 649
 650    var thisMessages = this
 651
 652    //jQuery("#pages span").removeClass("pageCourante")
 653    jQuery("#pages span").each(
 654       function(i)
 655       {
 656          if (jQuery(this).text() == thisMessages.page)
 657             jQuery(this).addClass("pageCourante")
 658          else
 659             jQuery(this).removeClass("pageCourante")
 660       }
 661    )
 662
 663    this.rafraichirMessages(true)
 664 }*/
 665