MOD conception devient doc
[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 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