ADD affichage d'une barre de progression (waitbar) lors de communication entre le client et le serveur (sauf dans le cas d'une communication COMET (comet.js), à améliorer par la suite) #4
</erl>
<div id="info" style="display:none" ><div id="icone"></div><div class="fermer" ></div><div class="message" ></div><div class="boutons"></div></div>
+ <div id="waitbar" style="display:none" ><div class="image"></div></div>
<ul id="menu">
<li class="minichat">chat</li><li class="admin" style="display:none">admin</li><li class="profile"></li><li class="register">register</li><li class="logout">logout</li><li class="about">about</li>
</ul>
// Regroupe la partie communication JSON client -> serveur de euphorik.\r
// Voir : http://dev.euphorik.ch/wiki/euk/Protocole\r
\r
-/**\r
- * @param funError un fonction executé lors d'un réponse 'error' de la part du serveur, peut être redéfinit pour une requête.\r
+/**
+ * Les fonctions debutReq et finReq servent, par exemple, à afficher à l'utilisateur
+ * qu'une communication est en cours.\r
+ * @param funError un fonction executée lors d'un réponse 'error' de la part du serveur, peut être redéfinit pour une requête.
+ * @param funDebutReq fonction appelée au début d'une requête (facultatif)
+ * @param funFinReq fonction appelée à la fin d'une requête (facultatif)\r
+ */\r
+euphorik.Communication = function(funError, funDebutReq, funFinReq) {\r
+ this.funError = funError;
+ this.funDebutReq = funDebutReq;
+ this.funFinReq = funFinReq;\r
+};
+
+/**
+ * Charge un fichier depuis une url et retourne son contenu.
+ */
+euphorik.Communication.prototype.load = function(url) {
+ if (this.funDebutReq) {
+ this.funDebutReq();
+ }
+ var contenu = "";
+ $.ajax({async: false, url: url, success : function(page) { contenu += page; }});
+ if (this.funFinReq) {
+ this.funFinReq();
+ }
+ return contenu;
+}\r
+
+/**
+ * Effectue une requête JSON auprès du serveur.
+ * @param action une chaine spécifiant l'action, par exemple "put_message"
+ * @param json les données à envoyer associé à l'action, par exemple {"cookie" : "LKJDLAKSJBFLKASN", "nick" : "Paul", "content" : "Bonjour", "answer_to" : [] }
+ * @param funOk la fonction exécuté après réception des données du serveur
+ * @param funError la fonction exécuté si une erreur arrive (facultatif)
+ * @param asynchrone true pour une communication asychrone (facultatif, truepar défaut)
+ * @param paramsSupp un objet contenant des paramètres supplémentaire pour la fonction ajax de jQuery (facultatif)
*/\r
-euphorik.Communication = function(funError) {\r
- this.funError = funError;\r
-};\r
-\r
euphorik.Communication.prototype.requete = function(action, json, funOk, funError, asynchrone, paramsSupp) {\r
var thisCommunication = this;\r
if (asynchrone === undefined) {\r
var mess = this.getBase(action);\r
objectEach(json, function(nom, val) {\r
mess[nom] = val;\r
- });\r
+ });
+
+ if (this.funDebutReq) {
+ this.funDebutReq();
+ }\r
\r
paramsAjax = {\r
async: asynchrone,\r
dataType: "json",\r
data: { action : JSON.stringify(mess) },\r
success:\r
- function(data) {\r
+ function(data) {
+ if (thisCommunication.funFinReq) {
+ thisCommunication.funFinReq();
+ }\r
if (data.reply === "error") {\r
if (funError) {\r
funError(data);\r
} else if (funOk) {\r
funOk(data);\r
}\r
+ },
+ error:
+ function(data) {
+ if (thisCommunication.funFinReq) {
+ thisCommunication.funFinReq();
+ }
}\r
};\r
- \r
+ \r
if (paramsSupp) {\r
objectEach(paramsSupp, function(nom, val) {\r
paramsAjax[nom] = val;\r
var fragment = new Fragment();
var formateur = new euphorik.Formateur();
var util = new euphorik.Util(formateur);
- var communication = new euphorik.Communication(function(data) { util.messageDialogue(data.error_message); });
+ var communication = new euphorik.Communication(
+ function(data) { util.messageDialogue(data.error_message); },
+ function() { console.log("show"); $("#waitbar").show(); },
+ function() { console.log("hide"); $("#waitbar").hide(); }
+ );
var client = new euphorik.Client(util, communication);
- var pages = new euphorik.Pages(fragment);
+ var pages = new euphorik.Pages(fragment, communication);
// connexion vers le serveur (utilise un cookie qui traine)
client.connexionCookie();
$("#footer .conditions").click(function(){ pages.afficherPage("conditions_utilisation"); });
pages.ajouterPage(new euphorik.PageMinichat(client, formateur, util, communication), true);
- pages.ajouterPage(new euphorik.PageAdmin(client, formateur, util));
+ pages.ajouterPage(new euphorik.PageAdmin(client, formateur, util, communication));
pages.ajouterPage(new euphorik.PageProfile(client, formateur, util));
pages.ajouterPage(new euphorik.PageRegister(client, formateur, util));
- pages.ajouterPage(new euphorik.PageAbout(client, formateur, util));
+ pages.ajouterPage(new euphorik.PageAbout(client, formateur, util, communication));
pages.ajouterPage("conditions_utilisation");
pages.afficherPage();
// You should have received a copy of the GNU General Public License\r
// along with Euphorik. If not, see <http://www.gnu.org/licenses/>.\r
\r
-euphorik.PageAbout = function(client, formateur, util) {\r
+euphorik.PageAbout = function(client, formateur, util, communication) {\r
this.nom = "about";\r
\r
this.client = client;\r
this.formateur = formateur;\r
- this.util = util;\r
+ this.util = util;
+ this.communication = communication;\r
};\r
\r
euphorik.PageAbout.prototype.contenu = function() {\r
- var contenu = "";\r
- $.ajax({async: false, url: "pages/about.html", success : function(page) { contenu += page; }});\r
- \r
+ var contenu = this.communication.load("pages/about.html"); \r
var email = this.util.rot13("znvygb:tert.oheev@tznvy.pbz");\r
return contenu.replace("{EMAIL}", "<a href=\"" + email+ "\">" + email + "</a>").replace("{EMAIL_LIEN}", email);\r
};\r
/*jslint laxbreak:true */
-euphorik.PageAdmin = function(client, formateur, util) {
+euphorik.PageAdmin = function(client, formateur, util, communication) {
this.nom = "admin";
this.client = client;
this.formateur = formateur;
this.util = util;
+ this.communication = communication;
this.comet = new Comet("admin", euphorik.conf.versionProtocole);
var thisPage = this;
// la liste des trolls proposés par les ekMasters
- this.trolls = new euphorik.Trolls(this.client, this.util, this.formateur);
+ this.trolls = new euphorik.Trolls(this.client, this.util, this.formateur, this.communication);
this.waitEvent();
return;
}
- var dataToSend = {
- "header" : { "action" : "put_troll", "version" : euphorik.conf.versionProtocole },
- "cookie" : this.client.cookie,
- "content" : content
- };
-
- jQuery.ajax({
- type: "POST",
- url: "request",
- dataType: "json",
- data: this.util.jsonVersAction(dataToSend),
- success:
- function(data){
- if (data.reply === "ok") {
- $("#page form#nouveauTroll input.troll").val("");
- } else if (data.reply === "error") {
- thisPageAdmin.util.messageDialogue(data.error_message);
- }
- }
- });
+ this.communication.requete(
+ "put_troll",
+ {"cookie" : this.client.cookie, "content" : content},
+ function(data) {
+ $("#page form#nouveauTroll input.troll").val("");
+ }
+ );
};
/**
}
var thisPageAdmin = this;
-
- var dataToSend = {
- "header" : { "action" : "list_banned_ips", "version" : euphorik.conf.versionProtocole },
- "cookie" : this.client.cookie
- };
-
- jQuery.ajax({
- type: "POST",
- url: "request",
- dataType: "json",
- data: this.util.jsonVersAction(dataToSend),
- success:
- function(data) {
- if (data.reply === "list_banned_ips") {
- var XHTML = "";
- data.list.each(function(i, ip) {
- XHTML += '<div class="ban"><span class="ip">' + ip.ip + '</span>|' +
- '<span class="temps">' +
- ip.remaining_time +
- '</span>|';
- ip.users.each(function(j, user) {
- XHTML += (j > 0 ? ", " : "") +
- '<span class="pseudo">' + thisPageAdmin.formateur.traitementComplet(user.nick) + '</span>' +
- (user.login === "" ? "" : '<span class="login">(' + thisPageAdmin.formateur.traitementComplet(user.login) + ')</span>');
- });
- XHTML += '<span class="deban">débannir</span></div>';
- });
-
- if (data.list.length === 0) {
- XHTML += '<p>Aucune IP bannie</p>';
- }
-
- $("#ips").html(XHTML);
-
- $(".ban").each(function() {
- var ip = $(".ip", this).html();
- $(".deban", this).click(
- function() {
- thisPageAdmin.util.messageDialogue("Êtes-vous sur de vouloir débannir l'IP ''" + ip + "'' ?", euphorik.Util.messageType.question,
- {"Oui" : function() {
- thisPageAdmin.deban(ip);
- },
- "Non" : function(){}
- }
- );
+
+ this.communication.requete(
+ "list_banned_ips",
+ {"cookie" : this.client.cookie},
+ function(data) {
+ var XHTML = "";
+ data.list.each(function(i, ip) {
+ XHTML += '<div class="ban"><span class="ip">' + ip.ip + '</span>|' +
+ '<span class="temps">' +
+ ip.remaining_time +
+ '</span>|';
+ ip.users.each(function(j, user) {
+ XHTML += (j > 0 ? ", " : "") +
+ '<span class="pseudo">' + thisPageAdmin.formateur.traitementComplet(user.nick) + '</span>' +
+ (user.login === "" ? "" : '<span class="login">(' + thisPageAdmin.formateur.traitementComplet(user.login) + ')</span>');
+ });
+ XHTML += '<span class="deban">débannir</span></div>';
+ });
+
+ if (data.list.length === 0) {
+ XHTML += '<p>Aucune IP bannie</p>';
+ }
+
+ $("#ips").html(XHTML);
+
+ $(".ban").each(function() {
+ var ip = $(".ip", this).html();
+ $(".deban", this).click(
+ function() {
+ thisPageAdmin.util.messageDialogue("Êtes-vous sur de vouloir débannir l'IP ''" + ip + "'' ?", euphorik.Util.messageType.question,
+ {"Oui" : function() {
+ thisPageAdmin.deban(ip);
+ },
+ "Non" : function(){}
}
);
- });
- } else if (data.reply === "error") {
- thisPageAdmin.util.messageDialogue(data.error_message);
- }
+ }
+ );
+ });
- // rafraichissement toutes les minutes (je sais c'est mal)
- // le problème est le rafraichissement des temps restant de bannissement qui doit être fait du coté client
- thisPageAdmin.timeoutIDmajIPs = setTimeout(function(){ thisPageAdmin.majIPs(); }, 60 * 1000);
- }
- });
+ // rafraichissement toutes les minutes (je sais c'est mal)
+ // le problème est le rafraichissement des temps restant de bannissement qui doit être fait du coté client
+ thisPageAdmin.timeoutIDmajIPs = setTimeout(function(){ thisPageAdmin.majIPs(); }, 60 * 1000);
+ }
+ );
};
/**
*/
euphorik.PageAdmin.prototype.deban = function(ip) {
var thisPageAdmin = this;
-
- var dataToSend = {
- "header" : { "action" : "unban", "version" : euphorik.conf.versionProtocole },
- "cookie" : this.client.cookie,
- "ip" : ip
- };
-
- jQuery.ajax({
- type: "POST",
- url: "request",
- dataType: "json",
- data: this.util.jsonVersAction(dataToSend),
- success:
- function(data){
- if(data.reply === "error") {
- thisPageAdmin.util.messageDialogue(data.error_message);
- }
- }
- });
+
+ this.communication.requete(
+ "unban",
+ {"cookie" : this.client.cookie, "ip" : ip}
+ );
};
/**
///////////////////////////////////////////////////////////////////////////////////////////////////
-euphorik.Trolls = function(client, util, formateur) {
+euphorik.Trolls = function(client, util, formateur, communication) {
this.client = client;
this.util = util;
this.formateur = formateur;
+ this.communication = communication;
this.dernierTroll = 0;
this.trolls = {};
};
euphorik.Trolls.prototype.modifier = function(id, content) {
- var thisTrolls = this;
-
- var dataToSend = {
- "header" : { "action" : "mod_troll", "version" : euphorik.conf.versionProtocole },
- "cookie" : this.client.cookie,
- "troll_id" : id,
- "content" : content
- };
-
- jQuery.ajax({
- type: "POST",
- url: "request",
- dataType: "json",
- data: this.util.jsonVersAction(dataToSend),
- success:
- function(data) {
- if (data.reply === "error") {
- thisTrolls.util.messageDialogue(data.error_message);
- }
- }
- });
+ this.communication.requete(
+ "mod_troll",
+ {"cookie" : this.client.cookie, "troll_id" : id, "content" : content}
+ );
};
/**
* Supprime un troll en fonction de son id.
*/
euphorik.Trolls.prototype.supprimer = function(id) {
- var thisTrolls = this;
-
- var dataToSend = {
- "header" : { "action" : "del_troll", "version" : euphorik.conf.versionProtocole },
- "cookie" : this.client.cookie,
- "troll_id" : id
- };
-
- jQuery.ajax({
- type: "POST",
- url: "request",
- dataType: "json",
- data: this.util.jsonVersAction(dataToSend),
- success:
- function(data) {
- if (data.reply === "error") {
- thisTrolls.util.messageDialogue(data.error_message);
- }
- }
- });
+ this.communication.requete(
+ "del_troll",
+ {"cookie" : this.client.cookie, "troll_id" : id}
+ );
};
/**
* Correspond à une page html statique se nommant "<nom>.html" et se trouvant dans "/pages/".
*/
-euphorik.PageStatique = function(nom) {
+euphorik.PageStatique = function(nom, communication) {
this.nom = nom;
+ this.communication = communication;
};
euphorik.PageStatique.prototype.contenu = function() {
- var contenu = "";
- $.ajax({async: false, url: "pages/" + this.nom + ".html", success : function(page) { contenu += page; }});
- return contenu;
+ return this.communication.load("pages/" + this.nom + ".html");
};
euphorik.PageStatique.prototype.charger = function() {
/**\r
* Gestion des pages.\r
*/\r
-euphorik.Pages = function(fragment) {\r
- this.fragment = fragment;\r
+euphorik.Pages = function(fragment, communication) {\r
+ this.fragment = fragment;
+ this.communication = communication;\r
this.pageCourante = undefined;\r
this.pageDefaut = undefined;\r
this.pages = {};\r
*/\r
euphorik.Pages.prototype.ajouterPage = function(page, defaut) {\r
if (typeof page === "string") {\r
- page = new euphorik.PageStatique(page);\r
+ page = new euphorik.PageStatique(page, this.communication);\r
}\r
\r
page.pages = this; // la magie des langages dynamiques : le foutoire\r
* Utilisé pour l'envoie de données avec la méthode ajax de jQuery.\r
* Obsolète : à virer\r
*/\r
-euphorik.Util.prototype.jsonVersAction = function(json) {\r
+/*euphorik.Util.prototype.jsonVersAction = function(json) {\r
return { action : JSON.stringify(json) };\r
-};\r
+};*/\r
\r
/**\r
* Retourne un hash md5 d'une chaine, dépend de md5.js.\r
\r
\r
% Point d'entrée pour les requêtes AJAX sur http://www.euphorik.ch/request.\r
-out(A) ->\r
+out(A) -> \r
IP = case inet:peername(A#arg.clisock) of\r
{ok, {Adresse, _Port}} -> Adresse;\r
_ -> inconnue\r
margin: 0px;
}
+/***** Une barre de progression s'affichant lors des communications entre le client et le serveur *****/
+#waitbar {
+ text-align: center;
+ height: 16px;
+ width:100%;
+ position: fixed;
+ left: 0px;
+ top: 0px;
+ z-index: 500;
+}
+#waitbar .image {
+ background-image: url(../../img/waitbar.gif);
+ margin-top: 3px;
+ margin-right: 3px;
+ float: right;
+ height: 13px;
+ width: 105px;
+}
+
/***** Textile *****/
em.leger {
font-style: italic
projects / euphorik.git / commitdiff
