X-Git-Url: http://git.euphorik.ch/?p=euphorik.git;a=blobdiff_plain;f=js%2Feuphorik.js;h=eb9741ba78d805d36b576076e62844f5511f4285;hp=b2024ad1ae0be4c8b9ba1f14f0e81b3d97bcaf89;hb=f39b28682e1e41cd487a2268320552b687640adf;hpb=b7547c3be18fe564cf3e06f2a589c7cc1d78ec33 diff --git a/js/euphorik.js b/js/euphorik.js index b2024ad..eb9741b 100755 --- a/js/euphorik.js +++ b/js/euphorik.js @@ -29,8 +29,9 @@ * Normalement 'const' à la place de 'var' mais non supporté par IE7. */ var conf = { + versionProtocole : 3, // version du protcole nickDefaut : "", - nbMessageAffiche : 40, // (par page) + nbMessageAffiche : 10, // (par page) pseudoDefaut : "", tempsAffichageMessageDialogue : 4000, // en ms tempsKick : 15, // en minute @@ -42,6 +43,7 @@ var conf = { "cool" : [/8\)/g, /8-\)/g], "eheheh" : [/:P/g, /:-P/g], "lol" : [/\[-lol\]/g], + "petrus" : [/:F/g], "spliff" : [/\[-spliff\]/g], "oh" : [/:o/g, /:O/g], "heink" : [/\[-heink\]/g], @@ -140,13 +142,57 @@ Util.prototype.messageDialogue = function(message, type, boutons, formate) this.timeoutMessageDialogue = setTimeout(fermer, conf.tempsAffichageMessageDialogue) } +var positionTypeX = {gauche: 0, gaucheRecouvrement: 1, centre: 2, droiteRecouvrement: 3, droite: 4} +var positionTypeY = {haut: 0, hautRecouvrement: 1, centre: 2, basRecouvrement: 3, bas: 4} + +/** + * Afficher une boite flottante (élément) par rapport à une cible. + * La boite est affichée de manière à ne pas dépasser de la fenêtre. + * @boite l'élément à afficher + * @cible l'élément sur lequel est affiché la boite + * @positionX de type positionTypeX + * @positionY de type positionTypeY + */ +Util.prototype.afficherBoite = function(boite, cible, positionX, positionY) +{ + var positionCible = cible.offset() + var positionBoite = + { + left : positionX == positionTypeX.gauche ? positionCible.left - boite.width() : + (positionX == positionTypeX.gaucheRecouvrement ? positionCible.left - boite.width() + cible.width() : + (positionX == positionTypeX.droitelsRecouvrement ? positionCible.left : + (positionX == positionTypeX.droite ? positionCible.left + cible.width() : + positionCible.left + cible.width() / 2 - boite.width() / 2 ))), // centre + top : positionY == positionTypeY.haut ? positionCible.top - boite.height() : + (positionY == positionTypeY.hautRecouvrement ? positionCible.top - boite.height() + cible.height() : + (positionY == positionTypeY.basRecouvrement ? positionCible.top : + (positionY == positionTypeY.bas ? positionCible.top + cible.height() : + positionCible.top + cible.height() / 2 - boite.height() / 2 ))) // centre + } + + // calcul les décalages en x et en y pour éviter que la boite ne sorte de la fenêtre, tient compte de la position des barres de défilement + var marge = 10 + positionBoite.left = positionBoite.left < marge + window.pageXOffset ? marge + window.pageXOffset : + (boite.width() - $(window).width() + (positionBoite.left - window.pageXOffset) + marge > 0 ? $(window).width() - boite.width() - marge + window.pageXOffset : positionBoite.left) + positionBoite.top = positionBoite.top < marge + window.pageYOffset ? marge + window.pageYOffset : + (boite.height() - $(window).height() + (positionBoite.top - window.pageYOffset) + marge > 0 ? $(window).height() - boite.height() - marge + window.pageYOffset : positionBoite.top) + + boite.css("top", positionBoite.top).css("left", positionBoite.left).show() +} + +var positionBulleType = {haut : 0, droite : 1, bas : 2, gauche : 3} + /** * Affiche un info bulle lorsque le curseur survole l'élément donné. - * FIXME : le width de element ne tient pas compte du padding !? + * @param message le message à afficher + * @param element l'élément DOM sur lesquel afficher la bulle + * @param la position de la bulle, voir positionBulleType. Par défaut à 0 (haut) */ -Util.prototype.infoBulle = function(message, element) +Util.prototype.infoBulle = function(message, element, position) { var thisUtil = this + if (position == undefined) + position = positionBulleType.haut var cacherBulle = function() { @@ -155,13 +201,16 @@ Util.prototype.infoBulle = function(message, element) } element.hover( - function(e) + function() { if (!thisUtil.bulleActive) return var m = $("#messageBulle") var f = $("#flecheBulle") + f.removeClass().addClass(position == positionBulleType.haut ? "flecheBulleHaut" : + (position == positionBulleType.droite ? "flecheBulleDroite" : + (position == positionBulleType.bas ? "flecheBulleBas" : "flecheBulleGauche" ))) // remplie le paragraphe de la bulle avec le message $("p", m).html(message) @@ -171,12 +220,20 @@ Util.prototype.infoBulle = function(message, element) m.css("top", 0).css("left", 0) var positionFleche = { - left : element.offset().left + element.width() / 2 - f.width() / 2, - top : element.offset().top - f.height() + left : position == positionBulleType.haut || position == positionBulleType.bas ? + element.offset().left + element.outerWidth() / 2 - f.width() / 2 : + (position == positionBulleType.gauche ? element.offset().left - f.width() : element.offset().left + element.outerWidth()), + top : position == positionBulleType.gauche || position == positionBulleType.droite ? + element.offset().top + element.outerHeight() / 2 - f.height() / 2 : + (position == positionBulleType.haut ? element.offset().top - f.height() : element.offset().top + element.outerHeight()) } var positionMessage = { - left : element.offset().left + element.width() / 2 - m.width() / 2, - top : element.offset().top - f.height() - m.height() + left : position == positionBulleType.haut || position == positionBulleType.bas ? + element.offset().left + element.width() / 2 - m.width() / 2 : + (position == positionBulleType.gauche ? element.offset().left - f.width() - m.width() : element.offset().left + f.width() + element.outerWidth()), + top : position == positionBulleType.gauche || position == positionBulleType.droite ? + element.offset().top + element.outerHeight() / 2 - m.height() / 2 : + (position == positionBulleType.haut ? element.offset().top - f.height() - m.height() : element.offset().top + f.height() + element.outerHeight()) } var depassementDroit = (positionMessage.left + m.width()) - $("body").width() if (depassementDroit > 0) @@ -339,8 +396,12 @@ Pages.prototype.afficherPage = function(nomPage, forcerChargement) if (typeof page == "string") $.ajax({async: false, url: "pages/" + page + ".html", success : function(page) { contenu += page }}) else + { contenu += this.pageCourante.contenu() - $("#page").html(contenu).removeClass().addClass(this.pageCourante.nom) + } + $("#page").html(contenu).removeClass().addClass(this.pageCourante.nom + + (this.pageCourante.classes != undefined ? " " + this.pageCourante.classes() : "") // l'objet peut fournire des classes css supplémentaires sous la forme d'un string + ) if (this.pageCourante.charger) this.pageCourante.charger() @@ -420,7 +481,7 @@ Formateur.prototype.traiterSmiles = function(M) { for (var sNom in this.smiles) { - ss = this.smiles[sNom] + var ss = this.smiles[sNom] for (var i = 0; i < ss.length; i++) M = M.replace(ss[i], "\""") } @@ -434,7 +495,7 @@ Formateur.prototype.remplacerBalisesHTML = function(M) Formateur.prototype.traiterURL = function(M, pseudo) { - thisFormateur = this + var thisFormateur = this var traitementUrl = function(url) { @@ -505,7 +566,7 @@ Formateur.prototype.getShort = function(url) */ Formateur.prototype.traiterPourFenetreLightBox = function(M, urlCourante) { - thisFormateur = this + var thisFormateur = this var traitementUrl = function(url) { return "[" + thisFormateur.getShort(url)[0] + (urlCourante == url ? "*" : "") + "]" @@ -551,6 +612,7 @@ Client.prototype.resetDonneesPersonnelles = function() this.password = "" this.email = "" this.css = $("link#cssPrincipale").attr("href") + this.chatOrder = "reverse" this.nickFormat = "nick" this.viewTimes = true this.viewTooltips = true @@ -558,11 +620,13 @@ Client.prototype.resetDonneesPersonnelles = function() this.pagePrincipale = 1 this.ekMaster = false + this.ostentatiousMaster = "light" // les conversations, une conversation est un objet possédant les attributs suivants : - // - racine (entier) + // - root (entier) // - page (entier) - this.conversations = new Array() + // - reduit (bool) + this.conversations = [] } Client.prototype.setCss = function(css) @@ -624,9 +688,8 @@ Client.prototype.ajouterConversation = function(racine) for (var i = 0; i < this.conversations.length; i++) if (this.conversations[i].root == racine) return false - - this.conversations.push({root : racine, page : 1}) + this.conversations.push({root : racine, page : 1, reduit : false}) if (this.autoflush) this.flush(true) return true @@ -647,7 +710,7 @@ Client.prototype.supprimerConversation = function(num) Client.prototype.getJSONLogin = function(login, password) { return { - "action" : "authentification", + "header" : { "action" : "authentification", "version" : conf.versionProtocole }, "login" : login, "password" : password } @@ -656,7 +719,7 @@ Client.prototype.getJSONLogin = function(login, password) Client.prototype.getJSONLoginCookie = function() { return { - "action" : "authentification", + "header" : { "action" : "authentification", "version" : conf.versionProtocole }, "cookie" : this.cookie } } @@ -667,7 +730,7 @@ Client.prototype.getJSONLoginCookie = function() */ Client.prototype.getJSONEnregistrement = function(login, password) { - var mess = { "action" : "register" } + var mess = { "header" : { "action" : "register", "version" : conf.versionProtocole }} if (login != undefined && password != undefined) { @@ -682,25 +745,26 @@ Client.prototype.getJSONConversations = function() { var conversations = new Array() for (var i = 0; i < this.conversations.length; i++) - conversations.push({ "root" : this.conversations[i].root, "page" : this.conversations[i].page}) + conversations.push({root : this.conversations[i].root, minimized : this.conversations[i].reduit}) return conversations } Client.prototype.getJSONProfile = function() { return { - "action" : "set_profile", + "header" : { "action" : "set_profile", "version" : conf.versionProtocole }, "cookie" : this.cookie, "login" : this.login, "password" : this.password, "nick" : this.pseudo, "email" : this.email, "css" : this.css, + "chat_order" : this.chatOrder, "nick_format" : this.nickFormat, "view_times" : this.viewTimes, "view_tooltips" : this.viewTooltips, - "main_page" : this.pagePrincipale < 1 ? 1 : this.pagePrincipale, - "conversations" : this.getJSONConversations() + "conversations" : this.getJSONConversations(), + "ostentatious_master" : this.ostentatiousMaster } } @@ -751,6 +815,7 @@ Client.prototype.setStatut = function(statut) this.statut = statut this.majMenu() + this.majLogo() } /** @@ -790,10 +855,12 @@ Client.prototype.enregistrement = function(login, password) } } +/** + * Connexion. Réalisé de manière synchrone. + */ Client.prototype.connexion = function(messageJson) { - ;; dumpObj(messageJson) - thisClient = this + var thisClient = this jQuery.ajax( { async: false, @@ -804,9 +871,12 @@ Client.prototype.connexion = function(messageJson) success: function(data) { - ;; dumpObj(data) if (data["reply"] == "error") + { thisClient.util.messageDialogue(data["error_message"]) + // suppression du cookie actuel, cas où le cookie du client ne permet pas une authentification + thisClient.delCookie() + } else thisClient.chargerDonnees(data) } @@ -841,18 +911,23 @@ Client.prototype.chargerDonnees = function(data) this.pseudo = data["nick"] this.email = data["email"] this.setCss(data["css"]) + this.chatOrder = data["chat_order"] this.nickFormat = data["nick_format"] this.viewTimes = data["view_times"] this.viewTooltips = data["view_tooltips"] + this.ostentatiousMaster = data["ostentatious_master"] // la page de la conversation principale - this.pagePrincipale = data["main_page"] == undefined ? 1 : data["main_page"] + this.pagePrincipale = 1 // les conversations this.conversations = data["conversations"] + for (var i = 0; i < this.conversations.length; i++) + this.conversations[i] = {root : this.conversations[i].root, page : 1, reduit : this.conversations[i].minimized} this.majBulle() this.majCssSelectionee() + //this.majLogo() } } @@ -871,8 +946,6 @@ Client.prototype.flush = function(async) var thisClient = this var ok = true - - ;; dumpObj(this.getJSONProfile()) jQuery.ajax( { async: async, @@ -883,7 +956,6 @@ Client.prototype.flush = function(async) success: function(data) { - ;; dumpObj(data) if (data["reply"] == "error") { thisClient.util.messageDialogue(data["error_message"]) @@ -902,7 +974,7 @@ Client.prototype.flush = function(async) Client.prototype.majMenu = function() { - displayType = "block" + var displayType = "block" $("#menu .admin").css("display", this.ekMaster ? displayType : "none") @@ -942,13 +1014,25 @@ Client.prototype.majCssSelectionee = function() { // extraction du numéro de la css courante var numCssCourante = this.css.match(/^.*?\/(\d)\/.*$/) - if (numCssCourante[1] != undefined) + if (numCssCourante != null && numCssCourante[1] != undefined) { $("#menuCss option").removeAttr("selected") $("#menuCss option[value=" + numCssCourante[1]+ "]").attr("selected", "selected") } } +/** + * Change la "class" du logo en fonction du statut de ekMaster. + */ +Client.prototype.majLogo = function() +{ + if (this.ekMaster) + $("#logo").addClass("ekMaster") + else + $("#logo").removeClass("ekMaster") +} + + Client.prototype.slap = function(userId, raison) { var thisClient = this @@ -959,7 +1043,7 @@ Client.prototype.slap = function(userId, raison) dataType: "json", data: this.util.jsonVersAction( { - "action" : "slap", + "header" : { "action" : "slap", "version" : conf.versionProtocole }, "cookie" : thisClient.cookie, "user_id" : userId, "reason" : raison @@ -987,7 +1071,7 @@ Client.prototype.ban = function(userId, raison, minutes) dataType: "json", data: this.util.jsonVersAction( { - "action" : "ban", + "header" : { "action" : "ban", "version" : conf.versionProtocole }, "cookie" : thisClient.cookie, "duration" : minutes, "user_id" : userId, @@ -1013,7 +1097,7 @@ Client.prototype.kick = function(userId, raison) * classe permettant de gérer les événements (push serveur). * l'information envoyé est sous la forme : * { - * "action" : "wait_event" + * "header" : {"action" : "wait_event", "version" : }, * "page" : * [..] * } @@ -1067,28 +1151,23 @@ PageEvent.prototype.waitEvent = function(funSend, funsReceive) // TODO : ya pas mieux ? var dataToSend = { - "action" : "wait_event", + "header" : { "action" : "wait_event", "version" : conf.versionProtocole }, "page" : this.page } var poulpe = funSend() - for (v in poulpe) + for (var v in poulpe) dataToSend[v] = poulpe[v] - ;; dumpObj(dataToSend) - this.attenteCourante = jQuery.ajax({ type: "POST", url: "request", - dataType: "json", - timeout: 300000, // timeout de 5min. Gros HACK pas beau. FIXME problème décrit ici : http://groups.google.com/group/jquery-en/browse_thread/thread/8724e64af3333a76 - // Obsolète (voir TODO) - //timeout: 300000, // timeout de 5min. Gros HACK pas beau. FIXME problème décrit ici : http://groups.google.com/group/jquery-en/browse_thread/thread/8724e64af3333a76 + dataType: "json", + // TODO : doit disparaitre + timeout: 180000, // timeout de 3min. Gros HACK pas beau. FIXME problème décrit ici : http://groups.google.com/group/jquery-en/browse_thread/thread/8724e64af3333a76 data: this.util.jsonVersAction(dataToSend), success: function(data) - { - ;; dumpObj(data) - + { funsReceive[data["reply"]](data) // rappel de la fonction dans 100 ms @@ -1114,24 +1193,14 @@ PageEvent.prototype.waitEvent2 = function(funSend, funsReceive) } /////////////////////////////////////////////////////////////////////////////////////////////////// - -function initialiserListeStyles(client) -{ - $("#menuCss").change( - function() - { - client.setCss("css/" + $("option:selected", this).attr("value") + "/euphorik.css") - } - ) -} -// charge dynamiquement le script de debug +// charge dynamiquement le script de debug (obsolète) ;; jQuery.ajax({async : false, url : "js/debug.js", dataType : "script"}) // le main $(document).ready( function() - { + { var formateur = new Formateur() var util = new Util(formateur) var client = new Client(util) @@ -1140,7 +1209,7 @@ $(document).ready( // connexion vers le serveur (utilise un cookie qui traine) client.connexionCookie() - initialiserListeStyles(client) + $("#menuCss").change(function(){ client.setCss("styles/" + $("option:selected", this).attr("value") + "/euphorik.css")}) // FIXME : ne fonctionne pas sous opera // voir : http://dev.jquery.com/ticket/2892#preview