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 l'ensemble des messages affichés.
 310   */
 311 function Messages(client, formateur, util)
 312 {
 313    this.client = client
 314    this.formateur = formateur
 315    this.util = util
 316
 317    this.nbMessageMax = conf.nbMessageAffiche // Le nombre de message affiché par page
 318    this.idDernierMesssage = null // l'id du dernier message connu
 319    this.page = 1 // par défaut on se trouve sur la première page
 320
 321    this.messages = new Array()
 322    this.messagesParId = new Object()
 323
 324    // l'objet XMLHttpRequest représentant la connexion d'attente
 325    this.attenteCourante = null
 326
 327    var messageOver = null // element
 328 }
 329
 330 /**
 331   * Crée un document XML contenant le message demandant un rafraichissement.
 332   */
 333 Messages.prototype.getXMLrafraichirMessages = function()
 334 {
 335    var XMLDocument = this.util.creerDocumentXMLAction()
 336    XMLDocument.documentElement.setAttribute("name", "refreshMessages")
 337
 338    //alert(this.util.serializer.serializeToString(XMLDocument))
 339
 340    if (this.client.identifie())
 341    {
 342       var nodeCookie= XMLDocument.createElement("cookie")
 343       nodeCookie.appendChild(XMLDocument.createTextNode(this.client.cookie))
 344       XMLDocument.documentElement.appendChild(nodeCookie)
 345    }
 346
 347    if (this.idDernierMesssage != null)
 348    {
 349       var nodeDernierMessageId = XMLDocument.createElement("dernierMessageId")
 350       nodeDernierMessageId.appendChild(XMLDocument.createTextNode(this.idDernierMesssage))
 351       XMLDocument.documentElement.appendChild(nodeDernierMessageId)
 352    }
 353
 354    var nodeNombreMessage = XMLDocument.createElement("nombreMessage")
 355    nodeNombreMessage.appendChild(XMLDocument.createTextNode(this.nbMessageMax))
 356    XMLDocument.documentElement.appendChild(nodeNombreMessage)
 357
 358    var nodePage = XMLDocument.createElement("page")
 359    nodePage.appendChild(XMLDocument.createTextNode(this.page))
 360    XMLDocument.documentElement.appendChild(nodePage)
 361
 362    return XMLDocument;
 363 }
 364
 365 /**
 366   * Création d'un nouveau message.
 367   * Les message sont données dans l'ordre de leur id.
 368   * Met directement à jour l'affichage.
 369   * @param element un element xml représentant le message
 370   * @param autoFlush si oui alors le message est directement ajouté à la vue
 371   */
 372 Messages.prototype.ajouterMessage = function(element, autoFlush)
 373 {
 374    if (autoFlush == undefined) autoFlush = true // valeur par défaut
 375
 376    // pas d'utilisation de jquery pour des raisons de performance
 377    this.idDernierMesssage = element.getAttribute("id")
 378
 379    var message = new Message(
 380       this.idDernierMesssage,
 381       jQuery("date", element).text(),
 382       jQuery("pseudo", element).text(),
 383       jQuery("contenu", element).text()
 384    )
 385
 386    message.appartientAuClient = jQuery("proprietaire", element).text() == "true"
 387    message.clientARepondu = jQuery("repondu", element).text() == "true"
 388    message.estUneReponse = jQuery("reponse", element).text() == "true"
 389    message.systeme = jQuery("systeme", element).text() == "true"
 390    message.setRepondA(jQuery("repondA", element))
 391
 392    this.messages.push(message)
 393    this.messagesParId[message.id] = message
 394    if (this.messages.length > this.nbMessageMax)
 395       delete this.messagesParId[this.messages.shift().id]
 396
 397    if (autoFlush)
 398       this.flush()
 399 }
 400
 401 Messages.prototype.flush = function()
 402 {
 403    var thisMessages = this
 404
 405    var idDernierMessageAffiche = jQuery("#messages div:first").attr("id")
 406    if (idDernierMessageAffiche == undefined) idDernierMessageAffiche = "0"
 407
 408    var XHTML = ""
 409    for (var i = this.messages.length - 1; i >= 0; i--)
 410       if (parseInt(this.messages[i].id, 36) > parseInt(idDernierMessageAffiche, 36))
 411       {
 412          var message = this.messages[i]
 413          var XHTMLrepondA = ""
 414          for (var id in message.repondA)
 415             XHTMLrepondA += this.formateur.traitementComplet(message.repondA[id].pseudo) + "> "
 416          XHTMLrepondA = "<div class=\"repondA\">" + XHTMLrepondA + "</div>"
 417
 418          XHTML +=
 419             "<div id=\"" + message.id + "\" class=\"" + (parseInt(message.id, 36) % 2 == 0 ? "messagePair" : "messageImpair") + " message" +
 420                (this.messages[i].appartientAuClient ? " proprietaire" : "")  + (this.messages[i].clientARepondu ? " repondu" : "") + (this.messages[i].estUneReponse ? " reponse" : "") + (this.messages[i].systeme ? " systeme" : "") +
 421             "\" >" +
 422                "[<div class=\"date\">" + message.date + "</div>]" +
 423                "<div class=\"pseudo\">" + this.formateur.traitementComplet(message.pseudo) + "</div>:" +
 424                XHTMLrepondA +
 425                "<div class=\"contenu\">" + (message.systeme ? this.formateur.remplacerBalisesHTML(message.contenu) : this.formateur.traitementComplet(message.contenu, message.pseudo))+ "</div>" +
 426             "</div>"
 427       }
 428    jQuery("#messages").prepend(XHTML)
 429
 430    if (myLightbox != null)
 431       myLightbox.updateImageList()
 432
 433    var nbMessagesAffiche = jQuery("#messages .message").size()
 434    if (nbMessagesAffiche > this.nbMessageMax)
 435       jQuery("#messages .message").slice(this.nbMessageMax, nbMessagesAffiche).empty();
 436
 437    jQuery("#messages .message").filter(function(){return parseInt(jQuery(this).attr("id"), 36) > parseInt(idDernierMessageAffiche, 36)}).each(
 438       function()
 439       {
 440          jQuery(this).click(
 441             function(event)
 442             {
 443                if (jQuery(event.target).is("a")) return
 444
 445                var valCourant = jQuery("input.message").val()
 446                if (valCourant == undefined) valCourant = ""
 447                var tag = jQuery(".pseudo", this).text()  + "{" + jQuery(this).attr("id") + "}" + ">"
 448                if (valCourant.indexOf(tag, 0) == -1)
 449                   jQuery("input.message").val(tag + " " + valCourant)
 450                thisMessages.util.setCaretToEnd(jQuery("form input.message")[0])
 451             }
 452          )
 453          // Q : pourquoi pas un .hover ?
 454          // R : simplement pour éviter que lorsqu'un message arrive cela n'affecte la conversation actuellement mise en évidence
 455          .mousemove(
 456             function(e)
 457             {
 458                if (this !== thisMessages.messageOver)
 459                {
 460                   thisMessages.afficherConversation(this)
 461                   thisMessages.messageOver = this
 462                }
 463             }
 464          )
 465       }
 466    )
 467 }
 468
 469 /**
 470   * Etablit une liste des messages à mettre en evidence et des messages à cacher.
 471   * Puis applique un plan diabolique.
 472   * @param element un message de la liste des messages
 473   */
 474 Messages.prototype.afficherConversation = function(element)
 475 {
 476    // cherche le message selectionné
 477    var id = jQuery(element).attr("id")
 478    var message = this.messagesParId[id]
 479    if (message == undefined) return
 480
 481    mess = message.afficherConversation(this)
 482
 483    // FIXME : cet appel est très lent
 484    jQuery("#messages .message").each(
 485       function()
 486       {
 487          var jq = jQuery(this)
 488          if (!mess.hasOwnProperty(jq.attr("id")))
 489             jq.addClass("cache")
 490          else
 491             jq.removeClass("cache")
 492       }
 493    )
 494 }
 495
 496 Messages.prototype.viderMessages = function()
 497 {
 498    this.idDernierMesssage = null
 499    this.messages = new Array()
 500    jQuery("#messages").empty()
 501 }
 502
 503 /**
 504   * Met à jour les messages de manière continue.
 505   * (AJAX-Comet-style proof)
 506   * @param vider vide tous les messages avant d'afficher les nouveaux
 507   */
 508 Messages.prototype.rafraichirMessages = function(vider)
 509 {
 510    if (this.attenteCourante != null)
 511       this.attenteCourante.abort()
 512
 513    if (vider == undefined)
 514       vider = false
 515
 516    if (vider)
 517    {
 518       this.idDernierMesssage = null
 519       this.messages = new Array()
 520    }
 521
 522    var thisMessages = this // caisupair javacrypte
 523
 524    //this.util.log(this.util.serializer.serializeToString(this.getXMLrafraichirMessages()))
 525    //alert(this.util.xmlVersAction(this.getXMLrafraichirMessages()).action)
 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