(no commit message)
[euphorik.git] / 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