ADD possibilité d'afficher une bulle d'aide sur un coté determiné d'une boite

diff --git a/css/1/euphorik.css b/css/1/euphorik.css
index fa02cc0..25b51cf 100755 (executable)
--- a/css/1/euphorik.css
+++ b/css/1/euphorik.css
@@ -178,10 +178,27 @@ div#info .boutons div:hover {
 #flecheBulle {
        position: absolute;
        z-index: 50;
+       display: none
+}
+.flecheBulleHaut {
+       background-image: url(../../img/css1/fleche_bulle_haut.png);
        width: 15px;
        height: 8px;
-       background-image: url(../../img/css1/fleche_bulle.png);
-       display: none
+}
+.flecheBulleDroite {
+       background-image: url(../../img/css1/fleche_bulle_droite.png);
+       width: 8px;
+       height: 15px;
+}
+.flecheBulleBas {
+       background-image: url(../../img/css1/fleche_bulle_bas.png);
+       width: 15px;
+       height: 8px;
+}
+.flecheBulleGauche {
+       background-image: url(../../img/css1/fleche_bulle_gauche.png);
+       width: 8px;
+       height: 15px;
 }
 #messageBulle {
        position: absolute;

diff --git a/css/2/euphorik.css b/css/2/euphorik.css
index 22a533f..4ba9352 100755 (executable)
--- a/css/2/euphorik.css
+++ b/css/2/euphorik.css
@@ -172,10 +172,27 @@ div#info .boutons div:hover {
 #flecheBulle {
        position: absolute;
        z-index: 50;
+       display: none
+}
+.flecheBulleHaut {
+       background-image: url(../../img/css2/fleche_bulle_haut.png);
        width: 15px;
        height: 8px;
-       background-image: url(../../img/css2/fleche_bulle.png);
-       display: none
+}
+.flecheBulleDroite {
+       background-image: url(../../img/css2/fleche_bulle_droite.png);
+       width: 8px;
+       height: 15px;
+}
+.flecheBulleBas {
+       background-image: url(../../img/css2/fleche_bulle_bas.png);
+       width: 15px;
+       height: 8px;
+}
+.flecheBulleGauche {
+       background-image: url(../../img/css2/fleche_bulle_gauche.png);
+       width: 8px;
+       height: 15px;
 }
 #messageBulle {
        position: absolute;

diff --git a/img/css1/fleche_bulle.png b/img/css1/fleche_bulle.png
deleted file mode 100644 (file)
index 0676a33..0000000
Binary files a/img/css1/fleche_bulle.png and /dev/null differ

diff --git a/img/css1/fleche_bulle_bas.png b/img/css1/fleche_bulle_bas.png
new file mode 100644 (file)
index 0000000..81e3af8
Binary files /dev/null and b/img/css1/fleche_bulle_bas.png differ

diff --git a/img/css1/fleche_bulle_droite.png b/img/css1/fleche_bulle_droite.png
new file mode 100644 (file)
index 0000000..9e58ac0
Binary files /dev/null and b/img/css1/fleche_bulle_droite.png differ

diff --git a/img/css1/fleche_bulle_gauche.png b/img/css1/fleche_bulle_gauche.png
new file mode 100644 (file)
index 0000000..85763ee
Binary files /dev/null and b/img/css1/fleche_bulle_gauche.png differ

diff --git a/img/css1/fleche_bulle_haut.png b/img/css1/fleche_bulle_haut.png
new file mode 100644 (file)
index 0000000..0676a33
Binary files /dev/null and b/img/css1/fleche_bulle_haut.png differ

diff --git a/img/css2/fleche_bulle.png b/img/css2/fleche_bulle.png
deleted file mode 100644 (file)
index 627fed0..0000000
Binary files a/img/css2/fleche_bulle.png and /dev/null differ

diff --git a/img/css2/fleche_bulle_bas.png b/img/css2/fleche_bulle_bas.png
new file mode 100644 (file)
index 0000000..998c91d
Binary files /dev/null and b/img/css2/fleche_bulle_bas.png differ

diff --git a/img/css2/fleche_bulle_droite.png b/img/css2/fleche_bulle_droite.png
new file mode 100644 (file)
index 0000000..0d4f144
Binary files /dev/null and b/img/css2/fleche_bulle_droite.png differ

diff --git a/img/css2/fleche_bulle_gauche.png b/img/css2/fleche_bulle_gauche.png
new file mode 100644 (file)
index 0000000..a94bee8
Binary files /dev/null and b/img/css2/fleche_bulle_gauche.png differ

diff --git a/img/css2/fleche_bulle_haut.png b/img/css2/fleche_bulle_haut.png
new file mode 100644 (file)
index 0000000..627fed0
Binary files /dev/null and b/img/css2/fleche_bulle_haut.png differ

diff --git a/js/euphorik.js b/js/euphorik.js
index b72f2d7..de64738 100755 (executable)
--- a/js/euphorik.js
+++ b/js/euphorik.js
@@ -31,7 +31,7 @@
 var conf = {
    versionProtocole : 3, // version du protcole
    nickDefaut : "<nick>",
-   nbMessageAffiche : 40, // (par page)
+   nbMessageAffiche : 10, // (par page)
    pseudoDefaut : "<nick>",
    tempsAffichageMessageDialogue : 4000, // en ms
    tempsKick : 15, // en minute
@@ -180,13 +180,19 @@ Util.prototype.afficherBoite = function(boite, cible, positionX, positionY)
     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()
       {   
@@ -202,6 +208,9 @@ Util.prototype.infoBulle = function(message, element)
                   
          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)
@@ -211,12 +220,20 @@ Util.prototype.infoBulle = function(message, element)
          m.css("top", 0).css("left", 0)
          
          var positionFleche = {
-            left : element.offset().left + element.innerWidth() / 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)
@@ -549,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 ? "*" : "") + "]"
@@ -957,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")
 
@@ -1176,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)
@@ -1202,7 +1209,7 @@ $(document).ready(
       // connexion vers le serveur (utilise un cookie qui traine)
       client.connexionCookie()
       
-      initialiserListeStyles(client)
+      $("#menuCss").change(function(){ client.setCss("css/" + $("option:selected", this).attr("value") + "/euphorik.css")})
 
       // FIXME : ne fonctionne pas sous opera
       // voir : http://dev.jquery.com/ticket/2892#preview

diff --git a/js/pageMinichat.js b/js/pageMinichat.js
index bd869f0..31c7e31 100755 (executable)
--- a/js/pageMinichat.js
+++ b/js/pageMinichat.js
@@ -94,7 +94,7 @@ PageMinichat.prototype.charger = function()
    
    this.util.infoBulle("Ouvrir la conversation liée au troll de la semaine", $("#trollCourant .troll")) 
    
-    this.util.infoBulle("Cliquer sur les messages pour les enlevers de la liste",
+   this.util.infoBulle("Cliquer sur les messages pour les enlevers de la liste",
       $("form#posterMessage #repondA").hover(
          function() { thisPage.util.afficherBoite($(".messages", this), $(this), positionTypeX.centre, positionTypeY.bas) },
          function() { $(".messages", this).hide() }
@@ -104,7 +104,8 @@ PageMinichat.prototype.charger = function()
             if ($(e.target).is(".nb"))
                thisPage.conversations.enleverMessagesRepond()             
          }     
-      )
+      ),
+      positionBulleType.droite
    )
 
    // <smiles>
@@ -486,7 +487,7 @@ function Conversation(conversations, num)
     
    $("#conversations tr").append(XHTML)
    
-   this.util.infoBulle("Aller à la première page", $("#" + this.getId() + " .numPage"))
+   this.util.infoBulle("Aller à la première page", $("#" + this.getId() + " .numPage"), positionBulleType.haut)
    if (num != 0)
    {
       this.util.infoBulle("Créer un lien vers la conversation", $("#" + this.getId() + " .lien"))
@@ -516,8 +517,10 @@ Conversation.prototype.majRacine = function()
       this.messagesParId[this.racine.id] = this.racine
       var element = $(this.racine.XHTML(true, this.getId()))
       this.attacherEventsSurMessage(element)
-      $("#" + this.getId() + " .titre .messageRacine").append(element)
+      $("#" + this.getId() + " .titre .messageRacine").html(element)
    }
+   else // si le message fait déjà parti de la conversation on n'affiche pas la racine
+      $("#" + this.getId() + " .titre .messageRacine").empty()
 }
 
 Conversation.prototype.enleverMiseEnEvidence = function()

diff --git a/nbproject/private/private.xml b/nbproject/private/private.xml
index c91a7ac..2dd3bff 100644 (file)
--- a/nbproject/private/private.xml
+++ b/nbproject/private/private.xml
@@ -8,8 +8,8 @@
         <file>
             <url>js/pageMinichat.js</url>
             <line>245</line>
-            <line>921</line>
-            <line>1170</line>
+            <line>923</line>
+            <line>1172</line>
         </file>
     </editor-bookmarks>
 </project-private>