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    jQuery.post("request",  this.util.xmlVersAction(this.getXMLMessage(pseudo, message, repondA)),
 192       function(data, textStatus)
 193       {
 194          // TODO : traiter les erreurs
 195          //alert(data)
 196          jQuery("form input.message").val("")
 197       }
 198    )
 199 }
 200
 201 ///////////////////////////////////////////////////////////////////////////////////////////////////
 202
 203 function Reponse(id, pseudo, login)
 204 {
 205    this.id = id
 206    this.pseudo = pseudo
 207    this.login = login
 208
 209    if (this.pseudo == undefined)
 210       this.pseudo = ""
 211
 212    if (this.login == undefined)
 213       this.login = ""
 214 }
 215
 216 ///////////////////////////////////////////////////////////////////////////////////////////////////
 217
 218 /**
 219   * Représente un message.
 220   * @param id (string)
 221   * @param date (string)
 222   * @param pseudo
 223   * @param contenu
 224   */
 225 function Message(id, date, pseudo, contenu)
 226 {
 227    this.id = id
 228    this.date = date
 229    this.pseudo = pseudo
 230    this.contenu = contenu
 231
 232    this.appartientAuClient = false
 233    this.clientARepondu = false
 234    this.estUneReponse = false
 235
 236    this.systeme = false // est-ce un message 'système' ?
 237
 238    this.repondA = {} // un ensemble de reponse (voir Reponse) indexé par l'id du message de la reponses
 239 }
 240
 241 /**
 242   *
 243   */
 244 Message.prototype.setRepondA = function(element)
 245 {
 246    this.repondA = {}
 247
 248    var thisMessage = this
 249
 250    jQuery("id", element).each (
 251       function()
 252       {
 253          var reponse = new Reponse(jQuery(this).attr("id"), jQuery(this).attr("pseudo"), jQuery(this).attr("login"))
 254          thisMessage.repondA[reponse.id] = reponse
 255       }
 256    )
 257 }
 258
 259 /**
 260   * @return les id des messages qui ont été mis en evidence sous la forme d'un objet
 261   */
 262 Message.prototype.afficherConversation = function(messages)
 263 {
 264    // les messages faisant partie de la conversation
 265    var messagesEnEvidence = {}
 266
 267    messagesEnEvidence[this.id] = true
 268
 269    // recherche les réponses (O(n))
 270    for (var i = 0; i < messages.messages.length; i++)
 271       if (messages.messages[i].repondA.hasOwnProperty(this.id))
 272          messagesEnEvidence[messages.messages[i].id] = true
 273
 274    var f = function(tabIds)
 275    {
 276       for(var id in tabIds)
 277       {
 278          var message = messages.messagesParId[id]
 279          if (message != undefined)
 280          {
 281             messagesEnEvidence[id] = true
 282             f (message.repondA)
 283          }
 284       }
 285    }
 286    f(this.repondA)
 287
 288    return messagesEnEvidence
 289 }
 290
 291 ///////////////////////////////////////////////////////////////////////////////////////////////////
 292
 293 /**
 294   * Représente l'ensemble des messages affichés.
 295   */
 296 function Messages(client, formateur, util)
 297 {
 298    this.client = client
 299    this.formateur = formateur
 300    this.util = util
 301
 302    this.nbMessageMax = conf.nbMessageAffiche // Le nombre de message affiché par page
 303    this.idDernierMesssage = null // l'id du dernier message connu
 304    this.page = 1 // par défaut on se trouve sur la première page
 305
 306    this.messages = new Array()
 307    this.messagesParId = new Object()
 308
 309    // l'objet XMLHttpRequest représentant la connexion d'attente
 310    this.attenteCourante = null
 311
 312    var messageOver = null // element
 313 }
 314
 315 /**
 316   * Crée un document XML contenant le message demandant un rafraichissement.
 317   */
 318 Messages.prototype.getXMLrafraichirMessages = function()
 319 {
 320    var XMLDocument = this.util.creerDocumentXMLAction()
 321    XMLDocument.documentElement.setAttribute("name", "refreshMessages")
 322
 323    //alert(this.util.serializer.serializeToString(XMLDocument))
 324
 325    if (this.client.identifie())
 326    {
 327       var nodeCookie= XMLDocument.createElement("cookie")
 328       nodeCookie.appendChild(XMLDocument.createTextNode(this.client.cookie))
 329       XMLDocument.documentElement.appendChild(nodeCookie)
 330    }
 331
 332    if (this.idDernierMesssage != null)
 333    {
 334       var nodeDernierMessageId = XMLDocument.createElement("dernierMessageId")
 335       nodeDernierMessageId.appendChild(XMLDocument.createTextNode(this.idDernierMesssage))
 336       XMLDocument.documentElement.appendChild(nodeDernierMessageId)
 337    }
 338
 339    var nodeNombreMessage = XMLDocument.createElement("nombreMessage")
 340    nodeNombreMessage.appendChild(XMLDocument.createTextNode(this.nbMessageMax))
 341    XMLDocument.documentElement.appendChild(nodeNombreMessage)
 342
 343    var nodePage = XMLDocument.createElement("page")
 344    nodePage.appendChild(XMLDocument.createTextNode(this.page))
 345    XMLDocument.documentElement.appendChild(nodePage)
 346
 347    return XMLDocument;
 348 }
 349
 350 /**
 351   * Création d'un nouveau message.
 352   * Les message sont données dans l'ordre de leur id.
 353   * Met directement à jour l'affichage.
 354   * @param element un element xml représentant le message
 355   * @param autoFlush si oui alors le message est directement ajouté à la vue
 356   */
 357 Messages.prototype.ajouterMessage = function(element, autoFlush)
 358 {
 359    if (autoFlush == undefined) autoFlush = true // valeur par défaut
 360
 361    // pas d'utilisation de jquery pour des raisons de performance
 362    this.idDernierMesssage = element.getAttribute("id")
 363
 364    var message = new Message(
 365       this.idDernierMesssage,
 366       jQuery("date", element).text(),
 367       jQuery("pseudo", element).text(),
 368       jQuery("contenu", element).text()
 369    )
 370
 371    message.appartientAuClient = jQuery("proprietaire", element).text() == "true"
 372    message.clientARepondu = jQuery("repondu", element).text() == "true"
 373    message.estUneReponse = jQuery("reponse", element).text() == "true"
 374    message.systeme = jQuery("systeme", element).text() == "true"
 375    message.setRepondA(jQuery("repondA", element))
 376
 377    this.messages.push(message)
 378    this.messagesParId[message.id] = message
 379    if (this.messages.length > this.nbMessageMax)
 380       delete this.messagesParId[this.messages.shift().id]
 381
 382    if (autoFlush)
 383       this.flush()
 384 }
 385
 386 Messages.prototype.flush = function()
 387 {
 388    var thisMessages = this
 389
 390    var idDernierMessageAffiche = jQuery("#messages div:first").attr("id")
 391    if (idDernierMessageAffiche == undefined) idDernierMessageAffiche = "0"
 392
 393    var XHTML = ""
 394    for (var i = this.messages.length - 1; i >= 0; i--)
 395       if (parseInt(this.messages[i].id, 36) > parseInt(idDernierMessageAffiche, 36))
 396       {
 397          var message = this.messages[i]
 398          var XHTMLrepondA = ""
 399          for (var id in message.repondA)
 400             XHTMLrepondA += this.formateur.traitementComplet(message.repondA[id].pseudo) + "> "
 401          XHTMLrepondA = "<div class=\"repondA\">" + XHTMLrepondA + "</div>"
 402
 403          XHTML +=
 404             "<div id=\"" + message.id + "\" class=\"" + (parseInt(message.id, 36) % 2 == 0 ? "messagePair" : "messageImpair") + " message" +
 405                (this.messages[i].appartientAuClient ? " proprietaire" : "")  + (this.messages[i].clientARepondu ? " repondu" : "") + (this.messages[i].estUneReponse ? " reponse" : "") + (this.messages[i].systeme ? " systeme" : "") +
 406             "\" >" +
 407                "[<div class=\"date\">" + message.date + "</div>]" +
 408                "<div class=\"pseudo\">" + this.formateur.traitementComplet(message.pseudo) + "</div>:" +
 409                XHTMLrepondA +
 410                "<div class=\"contenu\">" + (message.systeme ? this.formateur.remplacerBalisesHTML(message.contenu) : this.formateur.traitementComplet(message.contenu, message.pseudo))+ "</div>" +
 411             "</div>"
 412       }
 413    jQuery("#messages").prepend(XHTML)
 414
 415    if (myLightbox != null)
 416       myLightbox.updateImageList()
 417
 418    var nbMessagesAffiche = jQuery("#messages .message").size()
 419    if (nbMessagesAffiche > this.nbMessageMax)
 420       jQuery("#messages .message").slice(this.nbMessageMax, nbMessagesAffiche).empty();
 421
 422    jQuery("#messages .message").filter(function(){return parseInt(jQuery(this).attr("id"), 36) > parseInt(idDernierMessageAffiche, 36)}).each(
 423       function()
 424       {
 425          jQuery(this).click(
 426             function(event)
 427             {
 428                if (jQuery(event.target).is("a")) return
 429
 430                var valCourant = jQuery("input.message").val()
 431                if (valCourant == undefined) valCourant = ""
 432                var tag = jQuery(".pseudo", this).text()  + "{" + jQuery(this).attr("id") + "}" + ">"
 433                if (valCourant.indexOf(tag, 0) == -1)
 434                   jQuery("input.message").val(tag + " " + valCourant)
 435                thisMessages.util.setCaretToEnd(jQuery("form input.message")[0])
 436             }
 437          )
 438          // Q : pourquoi pas un .hover ?
 439          // R : simplement pour éviter que lorsqu'un message arrive cela n'affecte la conversation actuellement mise en évidence
 440          .mousemove(
 441             function(e)
 442             {
 443                if (this !== thisMessages.messageOver)
 444                {
 445                   thisMessages.afficherConversation(this)
 446                   thisMessages.messageOver = this
 447                }
 448             }
 449          )
 450       }
 451    )
 452 }
 453
 454 /**
 455   * Etablit une liste des messages à mettre en evidence et des messages à cacher.
 456   * Puis applique un plan diabolique.
 457   * @param element un message de la liste des messages
 458   */
 459 Messages.prototype.afficherConversation = function(element)
 460 {
 461    // cherche le message selectionné
 462    var id = jQuery(element).attr("id")
 463    var message = this.messagesParId[id]
 464    if (message == undefined) return
 465
 466    mess = message.afficherConversation(this)
 467
 468    // FIXME : cet appel est très lent
 469    jQuery("#messages .message").each(
 470       function()
 471       {
 472          var jq = jQuery(this)
 473          if (!mess.hasOwnProperty(jq.attr("id")))
 474             jq.addClass("cache")
 475          else
 476             jq.removeClass("cache")
 477       }
 478    )
 479 }
 480
 481 Messages.prototype.viderMessages = function()
 482 {
 483    this.idDernierMesssage = null
 484    this.messages = new Array()
 485    jQuery("#messages").empty()
 486 }
 487
 488 /**
 489   * Met à jour les messages de manière continue.
 490   * (AJAX-Comet-style proof)
 491   * @param vider vide tous les messages avant d'afficher les nouveaux
 492   */
 493 Messages.prototype.rafraichirMessages = function(vider)
 494 {
 495    if (this.attenteCourante != null)
 496       this.attenteCourante.abort()
 497
 498    if (vider == undefined)
 499       vider = false
 500
 501    if (vider)
 502    {
 503       this.idDernierMesssage = null
 504       this.messages = new Array()
 505    }
 506
 507    var thisMessages = this // caisupair javacrypte
 508
 509    //this.util.log(this.util.serializer.serializeToString(this.getXMLrafraichirMessages()))
 510    this.attenteCourante = jQuery.ajax({
 511          type: "POST",
 512          url: "request",
 513          dataType: "xml",
 514          data: this.util.xmlVersAction(this.getXMLrafraichirMessages()),
 515          success:
 516             function(data)
 517             {
 518                //thisMessages.util.log(thisMessages.util.serializer.serializeToString(data))
 519
 520                if (vider)
 521                   thisMessages.viderMessages()
 522
 523                thisMessages.MAJPages(parseInt(jQuery("nbPage", data.documentElement).text()))
 524
 525                reponse = jQuery("message", data.documentElement).each(
 526                   function(i)
 527                   {
 528                      thisMessages.ajouterMessage(this, false)
 529                   }
 530                )
 531                thisMessages.flush()
 532                setTimeout(function(){ thisMessages.rafraichirMessages() }, 100);
 533             },
 534          error:
 535             function(XMLHttpRequest, textStatus, errorThrown)
 536             {
 537                setTimeout(function(){ thisMessages.rafraichirMessages() }, 1000);
 538             }
 539       }
 540    )
 541 }
 542
 543 Messages.prototype.MAJPages = function(nbPage)
 544 {
 545    //alert(nbPage)
 546
 547    var thisMessages = this
 548
 549    var nbPageActuel = jQuery("#pages span").size()
 550
 551    for(var p = nbPageActuel + 1; p <= nbPage && p <= 3; p++)
 552    {
 553       jQuery("#pages").append("<span " + (this.page == p ? "class=\"pageCourante\"" : "" ) + ">" + p + "</span>").click(
 554          function(event)
 555          {
 556             var target = jQuery(event.target)
 557
 558             if(!target.is("span"))
 559                return
 560
 561             thisMessages.allerSurLaPage(parseInt(jQuery(event.target).text()))
 562          }
 563       )
 564    }
 565 }
 566
 567 Messages.prototype.allerSurLaPage = function(page)
 568 {
 569    if (page == this.page)
 570       return
 571    this.page = page
 572
 573    var thisMessages = this
 574
 575    //jQuery("#pages span").removeClass("pageCourante")
 576    jQuery("#pages span").each(
 577       function(i)
 578       {
 579          if (jQuery(this).text() == thisMessages.page)
 580             jQuery(this).addClass("pageCourante")
 581          else
 582             jQuery(this).removeClass("pageCourante")
 583       }
 584    )
 585
 586    this.rafraichirMessages(true)
 587 }
 588