5 * Cet objet regroupe des fonctions utilitaires (helpers) permettant notamment de :
6 * - afficher une boite de message
7 * - afficher une bulle d'aide lié à un élément
8 * - manipuler le curseur et réaliser des sélections sur des zones de saisie (<input>)
10 cl7
.Util = function () {
11 $("#info .fermer").click(function() {
12 $("#info").slideUp(50);
15 $("body").append('<div id="flecheBulle"></div>').append('<div id="messageBulle"><p></p></div>');
17 this.bulleActive
= true;
20 cl7
.Util
.messageType
= {informatif: 0, question: 1, erreur: 2};
23 * Affiche une boite de dialogue avec un message à l'intérieur.
24 * @param message le message (string)
25 * @param type voir 'messageType'. par défaut messageType.informatif
26 * @param les boutons sous la forme d'un objet ou les clefs sont les labels des boutons
27 * et les valeurs les fonctions executées lorsqu'un bouton est activé.
28 * @param formate faut-il formaté le message ? true par défaut
30 cl7
.Util
.prototype.messageDialogue = function(message
, type
, boutons
, formate
) {
33 type
= type
|| cl7
.Util
.messageType
.informatif
;
34 formate
= formate
|| true;
36 if (this.timeoutMessageDialogue
) {
37 clearTimeout(this.timeoutMessageDialogue
);
40 var fermer = function() { $("#info").slideUp(100); };
43 $("#info .message").html(message
);
46 case cl7
.Util
.messageType
.informatif : $("#info #icone").attr("class", "information"); break;
47 case cl7
.Util
.messageType
.question : $("#info #icone").attr("class", "interrogation"); break;
48 case cl7
.Util
.messageType
.erreur : $("#info #icone").attr("class", "exclamation"); break;
51 $("#info .boutons").html("");
52 objectEach(boutons
, function(nom
, bouton
) {
53 $("#info .boutons").append("<div>" + nom
+ "</div>").find("div:last").click(bouton
).click(fermer
);
56 $("#info").slideDown(200);
57 this.timeoutMessageDialogue
= setTimeout(fermer
, 3000);
60 cl7
.Util
.positionTypeX
= {gauche: 0, gaucheRecouvrement: 1, centre: 2, droiteRecouvrement: 3, droite: 4};
61 cl7
.Util
.positionTypeY
= {haut: 0, hautRecouvrement: 1, centre: 2, basRecouvrement: 3, bas: 4};
64 * Afficher une boite flottante (élément) par rapport à une cible.
65 * La boite est affichée de manière à ne pas dépasser de la fenêtre.
66 * @boite l'élément à afficher
67 * @cible l'élément sur lequel est affiché la boite
68 * @positionX de type positionTypeX
69 * @positionY de type positionTypeY
71 cl7
.Util
.prototype.afficherBoite = function(boite
, cible
, positionX
, positionY
) {
72 var positionCible
= cible
.offset();
74 left : positionX
=== cl7
.Util
.positionTypeX
.gauche
? positionCible
.left
- boite
.width() :
75 (positionX
=== cl7
.Util
.positionTypeX
.gaucheRecouvrement
? positionCible
.left
- boite
.width() + cible
.width() :
76 (positionX
=== cl7
.Util
.positionTypeX
.droitelsRecouvrement
? positionCible
.left :
77 (positionX
=== cl7
.Util
.positionTypeX
.droite
? positionCible
.left
+ cible
.width() :
78 positionCible
.left
+ cible
.width() / 2 - boite
.width() / 2 ))), // centre
79 top : positionY
=== cl7
.Util
.positionTypeY
.haut
? positionCible
.top
- boite
.height() :
80 (positionY
=== cl7
.Util
.positionTypeY
.hautRecouvrement
? positionCible
.top
- boite
.height() + cible
.height() :
81 (positionY
=== cl7
.Util
.positionTypeY
.basRecouvrement
? positionCible
.top :
82 (positionY
=== cl7
.Util
.positionTypeY
.bas
? positionCible
.top
+ cible
.height() :
83 positionCible
.top
+ cible
.height() / 2 - boite
.height() / 2 ))) // centre
86 // 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
88 positionBoite
.left
= positionBoite
.left
< marge
+ window
.pageXOffset
? marge
+ window
.pageXOffset :
89 (boite
.width() - $(window
).width() + (positionBoite
.left
- window
.pageXOffset
) + marge
> 0 ? $(window
).width() - boite
.width() - marge
+ window
.pageXOffset : positionBoite
.left
);
90 positionBoite
.top
= positionBoite
.top
< marge
+ window
.pageYOffset
? marge
+ window
.pageYOffset :
91 (boite
.height() - $(window
).height() + (positionBoite
.top
- window
.pageYOffset
) + marge
> 0 ? $(window
).height() - boite
.height() - marge
+ window
.pageYOffset : positionBoite
.top
);
93 boite
.css("top", positionBoite
.top
).css("left", positionBoite
.left
).show();
96 cl7
.Util
.positionBulleType
= {haut : 0, droite : 1, bas : 2, gauche : 3};
99 * Affiche un info bulle lorsque le curseur survole l'élément donné.
100 * @param message le message à afficher
101 * @param element l'élément DOM sur lesquel afficher la bulle
102 * @param la position de la bulle, voir positionBulleType. Par défaut à 0 (haut)
104 cl7
.Util
.prototype.infoBulle = function(message
, element
, position
) {
106 var cacherBulle = function() {
107 $("#flecheBulle").hide();
108 $("#messageBulle").hide();
111 position
= position
|| cl7
.Util
.positionBulleType
.haut
;
115 if (!thisUtil
.bulleActive
) {
119 var m
= $("#messageBulle");
120 var f
= $("#flecheBulle");
121 f
.removeClass().addClass(position
=== cl7
.Util
.positionBulleType
.haut
? "flecheBulleHaut" :
122 (position
=== cl7
.Util
.positionBulleType
.droite
? "flecheBulleDroite" :
123 (position
=== cl7
.Util
.positionBulleType
.bas
? "flecheBulleBas" : "flecheBulleGauche" )));
125 // remplie le paragraphe de la bulle avec le message
126 $("p", m
).html(message
);
128 // réinitialise la position, évite le cas ou la boite est collé à droite et remplie avec un texte la faisant dépassé
129 // dans ce cas la hauteur n'est pas calculé correctement
130 m
.css("top", 0).css("left", 0);
132 var positionFleche
= {
133 left : position
=== cl7
.Util
.positionBulleType
.haut
|| position
=== cl7
.Util
.positionBulleType
.bas
?
134 element
.offset().left
+ element
.outerWidth() / 2 - f
.width() / 2 :
135 (position
=== cl7
.Util
.positionBulleType
.gauche
? element
.offset().left
- f
.width() : element
.offset().left
+ element
.outerWidth()),
136 top : position
=== cl7
.Util
.positionBulleType
.gauche
|| position
=== cl7
.Util
.positionBulleType
.droite
?
137 element
.offset().top
+ element
.outerHeight() / 2 - f
.height() / 2 :
138 (position
=== cl7
.Util
.positionBulleType
.haut
? element
.offset().top
- f
.height() : element
.offset().top
+ element
.outerHeight())
140 var positionMessage
= {
141 left : position
=== cl7
.Util
.positionBulleType
.haut
|| position
=== cl7
.Util
.positionBulleType
.bas
?
142 element
.offset().left
+ element
.width() / 2 - m
.width() / 2 :
143 (position
=== cl7
.Util
.positionBulleType
.gauche
? element
.offset().left
- f
.width() - m
.width() : element
.offset().left
+ f
.width() + element
.outerWidth()),
144 top : position
=== cl7
.Util
.positionBulleType
.gauche
|| position
=== cl7
.Util
.positionBulleType
.droite
?
145 element
.offset().top
+ element
.outerHeight() / 2 - m
.height() / 2 :
146 (position
=== cl7
.Util
.positionBulleType
.haut
? element
.offset().top
- f
.height() - m
.height() : element
.offset().top
+ f
.height() + element
.outerHeight())
148 var depassementDroit
= (positionMessage
.left
+ m
.width()) - $("body").width();
149 if (depassementDroit
> 0) {
150 positionMessage
.left
-= depassementDroit
;
151 } else if (positionMessage
.left
< 0) {
152 positionMessage
.left
= 0;
155 m
.css("top", positionMessage
.top
).css("left", positionMessage
.left
).show();
156 f
.css("top", positionFleche
.top
).css("left", positionFleche
.left
).show();
159 ).click(cacherBulle
);
163 * Rot13 d'une chaine, voir : http://fr.wikipedia.org/wiki/ROT13
165 cl7
.Util
.prototype.rot13 = function(chaine
) {
166 var ACode
= 'A'.charCodeAt(0);
167 var aCode
= 'a'.charCodeAt(0);
168 var MCode
= 'M'.charCodeAt(0);
169 var mCode
= 'm'.charCodeAt(0);
170 var ZCode
= 'Z'.charCodeAt(0);
171 var zCode
= 'z'.charCodeAt(0);
173 var f = function(ch
, pos
) {
174 if (pos
=== ch
.length
) {
178 var c
= ch
.charCodeAt(pos
);
179 return String
.fromCharCode(
181 (c
>= ACode
&& c
<= MCode
|| c
>= aCode
&& c
<= mCode
? 13 :
182 (c
> MCode
&& c
<= ZCode
|| c
> mCode
&& c
<= zCode
? -13 : 0))