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 ///////////////////////////////////////////////////////////////////////////////////////////////////
 330
 331 /**
 332   * Représente l'ensemble des messages affichés.
 333   */
 334 function Messages(client, formateur, util)
 335 {
 336    this.client = client
 337    this.formateur = formateur
 338    this.util = util
 339
 340    this.conversations = new Array() // les conversations, la première représente la conversation principale
 341    this.conversations[0] = new Conversation()
 342
 343    this.idDernierMesssage = null // l'id du dernier message connu
 344
 345    // l'objet XMLHttpRequest représentant la connexion d'attente
 346    this.attenteCourante = null
 347
 348    var messageOver = null // element
 349 }
 350
 351 /**
 352   * Crée un document XML contenant le message demandant un rafraichissement.
 353   */
 354 Messages.prototype.getXMLrafraichirMessages = function()
 355 {
 356    var XMLDocument = this.util.creerDocumentXMLAction()
 357    XMLDocument.documentElement.setAttribute("name", "refreshMessages")
 358
 359    //alert(this.util.serializer.serializeToString(XMLDocument))
 360
 361    if (this.client.identifie())
 362    {
 363       var nodeCookie= XMLDocument.createElement("cookie")
 364       nodeCookie.appendChild(XMLDocument.createTextNode(this.client.cookie))
 365       XMLDocument.documentElement.appendChild(nodeCookie)
 366    }
 367
 368    if (this.idDernierMesssage != null)
 369    {
 370       var nodeDernierMessageId = XMLDocument.createElement("dernierMessageId")
 371       nodeDernierMessageId.appendChild(XMLDocument.createTextNode(this.idDernierMesssage))
 372       XMLDocument.documentElement.appendChild(nodeDernierMessageId)
 373    }
 374
 375    var nodeNombreMessage = XMLDocument.createElement("nombreMessage")
 376    nodeNombreMessage.appendChild(XMLDocument.createTextNode(conf.nbMessageAffiche))
 377    XMLDocument.documentElement.appendChild(nodeNombreMessage)
 378
 379    var nodePage = XMLDocument.createElement("page")
 380    nodePage.appendChild(XMLDocument.createTextNode(this.conversation[0].page))
 381    XMLDocument.documentElement.appendChild(nodePage)
 382
 383    // les conversations
 384    for (var i = 1; i < this.conversations.length; i++)
 385    {
 386       var nodeConversation = XMLDocument.createElement("conversation")
 387       XMLDocument.documentElement.appendChild(nodeConversation)
 388
 389       var nodeRacine = XMLDocument.createElement("racine")
 390       nodeRacine.appendChild(XMLDocument.createTextNode(this.conversation.racine))
 391       nodeConversation.appendChild(nodeRacine)
 392
 393       var nodePageConv = XMLDocument.createElement("page")
 394       nodePageConv.appendChild(XMLDocument.createTextNode(this.conversation.page))
 395       nodeConversation.appendChild(nodePageConv)
 396    }
 397
 398    return XMLDocument;
 399 }
 400
 401 /**
 402   * Création d'un nouveau message.
 403   * Les message sont données dans l'ordre de leur id.
 404   * Met directement à jour l'affichage.
 405   * @param element un element xml représentant le message
 406   * @param numConversation le numéro de la conversation, 0 = principale
 407   * @param autoFlush si oui alors le message est directement ajouté à la vue
 408   */
 409 Messages.prototype.ajouterMessage = function(element, numConversation, autoFlush)
 410 {
 411    if (autoFlush == undefined) autoFlush = true // valeur par défaut
 412
 413    // pas d'utilisation de jquery pour des raisons de performance
 414    this.idDernierMesssage = element.getAttribute("id")
 415
 416    var message = new Message(
 417       this.idDernierMesssage,
 418       jQuery("date", element).text(),
 419       jQuery("pseudo", element).text(),
 420       jQuery("contenu", element).text()
 421    )
 422
 423    message.appartientAuClient = jQuery("proprietaire", element).text() == "true"
 424    message.clientARepondu = jQuery("repondu", element).text() == "true"
 425    message.estUneReponse = jQuery("reponse", element).text() == "true"
 426    message.systeme = jQuery("systeme", element).text() == "true"
 427    message.setRepondA(jQuery("repondA", element))
 428
 429    if (this.conversations[numConversation] == null)
 430       this.conversations[numConversation] = new Conversation()
 431
 432    this.conversations[numConversation].ajouterMessage(message)
 433
 434    if (autoFlush)
 435       this.flush()
 436 }
 437
 438
 439 // <<< TODO <<<<<<<<<<<<<<<<<<<<<<<<<<<<<
 440
 441
 442 Messages.prototype.flush = function()
 443 {
 444    var thisMessages = this
 445
 446    var idDernierMessageAffiche = jQuery("#messages div:first").attr("id")
 447    if (idDernierMessageAffiche == undefined) idDernierMessageAffiche = "0"
 448
 449    var XHTML = ""
 450    for (var i = this.messages.length - 1; i >= 0; i--)
 451       if (parseInt(this.messages[i].id, 36) > parseInt(idDernierMessageAffiche, 36))
 452       {
 453          var message = this.messages[i]
 454          var XHTMLrepondA = ""
 455          for (var id in message.repondA)
 456             XHTMLrepondA += this.formateur.traitementComplet(message.repondA[id].pseudo) + "> "
 457          XHTMLrepondA = "<div class=\"repondA\">" + XHTMLrepondA + "</div>"
 458
 459          XHTML +=
 460             "<div id=\"" + message.id + "\" class=\"" + (parseInt(message.id, 36) % 2 == 0 ? "messagePair" : "messageImpair") + " message" +
 461                (this.messages[i].appartientAuClient ? " proprietaire" : "")  + (this.messages[i].clientARepondu ? " repondu" : "") + (this.messages[i].estUneReponse ? " reponse" : "") + (this.messages[i].systeme ? " systeme" : "") +
 462             "\" >" +
 463                "[<div class=\"date\">" + message.date + "</div>]" +
 464                "<div class=\"pseudo\">" + this.formateur.traitementComplet(message.pseudo) + "</div>:" +
 465                XHTMLrepondA +
 466                "<div class=\"contenu\">" + (message.systeme ? this.formateur.remplacerBalisesHTML(message.contenu) : this.formateur.traitementComplet(message.contenu, message.pseudo))+ "</div>" +
 467             "</div>"
 468       }
 469    jQuery("#messages").prepend(XHTML)
 470
 471    if (myLightbox != null)
 472       myLightbox.updateImageList()
 473
 474    var nbMessagesAffiche = jQuery("#messages .message").size()
 475    if (nbMessagesAffiche > this.nbMessageMax)
 476       jQuery("#messages .message").slice(this.nbMessageMax, nbMessagesAffiche).empty();
 477
 478    jQuery("#messages .message").filter(function(){return parseInt(jQuery(this).attr("id"), 36) > parseInt(idDernierMessageAffiche, 36)}).each(
 479       function()
 480       {
 481          jQuery(this).click(
 482             function(event)
 483             {
 484                if (jQuery(event.target).is("a")) return
 485
 486                var valCourant = jQuery("input.message").val()
 487                if (valCourant == undefined) valCourant = ""
 488                var tag = jQuery(".pseudo", this).text()  + "{" + jQuery(this).attr("id") + "}" + ">"
 489                if (valCourant.indexOf(tag, 0) == -1)
 490                   jQuery("input.message").val(tag + " " + valCourant)
 491                thisMessages.util.setCaretToEnd(jQuery("form input.message")[0])
 492             }
 493          )
 494          // Q : pourquoi pas un .hover ?
 495          // R : simplement pour éviter que lorsqu'un message arrive cela n'affecte la conversation actuellement mise en évidence
 496          .mousemove(
 497             function(e)
 498             {
 499                if (this !== thisMessages.messageOver)
 500                {
 501                   thisMessages.afficherConversation(this)
 502                   thisMessages.messageOver = this
 503                }
 504             }
 505          )
 506       }
 507    )
 508 }
 509
 510 /**
 511   * Etablit une liste des messages à mettre en evidence et des messages à cacher.
 512   * Puis applique un plan diabolique.
 513   * @param element un message de la liste des messages
 514   */
 515 Messages.prototype.afficherConversation = function(element)
 516 {
 517    // cherche le message selectionné
 518    var id = jQuery(element).attr("id")
 519    var message = this.messagesParId[id]
 520    if (message == undefined) return
 521
 522    mess = message.afficherConversation(this)
 523
 524    // FIXME : cet appel est très lent
 525    jQuery("#messages .message").each(
 526       function()
 527       {
 528          var jq = jQuery(this)
 529          if (!mess.hasOwnProperty(jq.attr("id")))
 530             jq.addClass("cache")
 531          else
 532             jq.removeClass("cache")
 533       }
 534    )
 535 }
 536
 537 Messages.prototype.viderMessages = function()
 538 {
 539    this.idDernierMesssage = null
 540    this.messages = new Array()
 541    jQuery("#messages").empty()
 542 }
 543
 544 /**
 545   * Met à jour les messages de manière continue.
 546   * (AJAX-Comet-style proof)
 547   * @param vider vide tous les messages avant d'afficher les nouveaux
 548   */
 549 Messages.prototype.rafraichirMessages = function(vider)
 550 {
 551    if (this.attenteCourante != null)
 552       this.attenteCourante.abort()
 553
 554    if (vider == undefined)
 555       vider = false
 556
 557    if (vider)
 558    {
 559       this.idDernierMesssage = null
 560       this.messages = new Array()
 561    }
 562
 563    var thisMessages = this // caisupair javacrypte
 564
 565    //this.util.log(this.util.serializer.serializeToString(this.getXMLrafraichirMessages()))
 566    //alert(this.util.xmlVersAction(this.getXMLrafraichirMessages()).action)
 567    this.attenteCourante = jQuery.ajax({
 568          type: "POST",
 569          url: "request",
 570          dataType: "xml",
 571          data: this.util.xmlVersAction(this.getXMLrafraichirMessages()),
 572          success:
 573             function(data)
 574             {
 575                //thisMessages.util.log(thisMessages.util.serializer.serializeToString(data))
 576
 577                if (vider)
 578                   thisMessages.viderMessages()
 579
 580                thisMessages.MAJPages(parseInt(jQuery("nbPage", data.documentElement).text()))
 581
 582                reponse = jQuery("message", data.documentElement).each(
 583                   function(i)
 584                   {
 585                      thisMessages.ajouterMessage(this, false)
 586                   }
 587                )
 588                thisMessages.flush()
 589                setTimeout(function(){ thisMessages.rafraichirMessages() }, 100);
 590             },
 591          error:
 592             function(XMLHttpRequest, textStatus, errorThrown)
 593             {
 594                setTimeout(function(){ thisMessages.rafraichirMessages() }, 1000);
 595             }
 596       }
 597    )
 598 }
 599
 600 Messages.prototype.MAJPages = function(nbPage)
 601 {
 602    //alert(nbPage)
 603
 604    var thisMessages = this
 605
 606    var nbPageActuel = jQuery("#pages span").size()
 607
 608    for(var p = nbPageActuel + 1; p <= nbPage && p <= 3; p++)
 609    {
 610       jQuery("#pages").append("<span " + (this.page == p ? "class=\"pageCourante\"" : "" ) + ">" + p + "</span>").click(
 611          function(event)
 612          {
 613             var target = jQuery(event.target)
 614
 615             if(!target.is("span"))
 616                return
 617
 618             thisMessages.allerSurLaPage(parseInt(jQuery(event.target).text()))
 619          }
 620       )
 621    }
 622 }
 623
 624 Messages.prototype.allerSurLaPage = function(page)
 625 {
 626    if (page == this.page)
 627       return
 628    this.page = page
 629
 630    var thisMessages = this
 631
 632    //jQuery("#pages span").removeClass("pageCourante")
 633    jQuery("#pages span").each(
 634       function(i)
 635       {
 636          if (jQuery(this).text() == thisMessages.page)
 637             jQuery(this).addClass("pageCourante")
 638          else
 639             jQuery(this).removeClass("pageCourante")
 640       }
 641    )
 642
 643    this.rafraichirMessages(true)
 644 }
 645