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