(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 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