From: Greg Burri <greg.burri@gmail.com>
Date: Mon, 23 Jun 2008 20:05:54 +0000 (+0000)
Subject: ADD function dans Util permettant de positionner une boite (div), sera utilisé pour... 
X-Git-Tag: 1.1.0~119
X-Git-Url: https://git.euphorik.ch/?a=commitdiff_plain;h=b4fa5488abceb2979d4753af0003b3265f433fda;p=euphorik.git

ADD function dans Util permettant de positionner une boite (div), sera utilisé pour afficher les messages auquels l'utilisateur souhait répondre
---

diff --git a/js/euphorik.js b/js/euphorik.js
index cb7f71a..ee3865c 100755
--- a/js/euphorik.js
+++ b/js/euphorik.js
@@ -140,6 +140,44 @@ 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()
+}
+
 /**
   * Affiche un info bulle lorsque le curseur survole l'élément donné.
   * FIXME : le width de element ne tient pas compte du padding !?
diff --git a/js/pageMinichat.js b/js/pageMinichat.js
index 7ad6c5f..67354cf 100755
--- a/js/pageMinichat.js
+++ b/js/pageMinichat.js
@@ -40,6 +40,7 @@ PageMinichat.prototype.contenu = function()
    <p>\
       <input class="captcha" name="captcha" type="text" size="8" maxlength="8"></input>\
       <input class="pseudo" name="pseudo" type="text" maxlength="50" value="' + encodeURI(conf.nickDefaut) + '"></input>\
+      <div id="repondA">0<div class="messages"></div></div>\
       <input class="message" name="message" type="text" maxlength="500" value=""></input>\
       <button class="smiles"></button>\
       <button class="return"></button>\
@@ -82,7 +83,7 @@ PageMinichat.prototype.charger = function()
    this.util.infoBulle("Ouvrir la conversation liée au troll de la semaine", $("#trollCourant .troll")) 
 
    // <smiles>
-   $("body").append("<div id=\"smiles\"></div>")
+   $("body").append('<div id="smiles"></div>')
    // affichage des smiles
    $("#smiles").append(this.formateur.getSmilesHTML()).children().each(
       function(i)
@@ -100,20 +101,13 @@ PageMinichat.prototype.charger = function()
       }
    )
    $("form button.smiles").hover(
-      function(e)
-      {
-         var position = $(e.target).offset()
-         // le décalage pour ne pas dépasser à droite (10 correspond à la marge pour éviter de coller le bord)
-         var decalage = $("body").width() - $("#smiles").width() - position.left - 10
-         decalage = decalage > 0 ? 0 : decalage
-         
-         $("#smiles").css("top", position.top).css("left", position.left + decalage).show()
-      },
-      function(e){}
+      // affichage de la boite présentant les smiles
+      function(e){ thisPage.util.afficherBoite($("#smiles"), $(e.target), positionTypeX.centre, positionTypeY.basRecouvrement) },
+      function(){}
    )
    $("#smiles").hover(
       function(){},
-      function(e)
+      function()
       {
          $("#smiles").hide()
       }
@@ -219,7 +213,6 @@ PageMinichat.prototype.envoyerMessage = function(pseudo, message)
    
    ;; dumpObj(this.getJSONMessage(pseudo, message))
    jQuery.ajax(
-         
       {
          url : "request", 
          type: "POST",
@@ -418,9 +411,7 @@ Message.prototype.XHTML = function(messagePair)
   * @param formateur outil permettant la mise en forme du texte des messages
   */
 function Conversation(num, util, formateur, client)
-{
-   var thisConversation = this
-   
+{  
    this.num = num // peut changer au cours de la vie de la conversation
    this.id = Math.floor(Math.random() * 1000000).toString(36)
    this.util = util