Blog Shivato Web Developpement web

[BUG] Colorpicker jQuery + Chrome 5

Au cours du développement d'un projet client, j'ai dû mettre en place un colorpicker.
Mon choix s'est orienté sur le colorpicker jQuery de www.eyecon.ro/colorpicker/ (version du 23.05.2009) qui est plutôt complet.

Au passage de la version 5 de Chrome, le submit des formulaires avec le colorpicker ne fonctionnait plus, au lieu d'envoyer le formulaire Chrome sélectionne le premier input de la couleur hsb qui contient un nombre décimal.

Ce sont les décimaux des couleurs hsb qui posent donc problème, mais vous ne verrez pas de décimaux tout le temps, ça se produit à 2 moments :

• à l'initialisation du colorpicker si on définit une couleur en rgb ou hexa
• quand on change les couleurs rgb ou hexa dans leurs champs input

J'ai testé sur différents navigateurs (Chrome 4, Firefox, Safari, IE et Opera) et bizarrement il n'y a que sur Chrome 5 (Windows et Linux) que le bug apparaît.

Si vous ne voulez pas modifier le code source du colorpicker, voilà une solution possible, il suffit de prendre les valeurs hsb, les arrondir et les remettre à leur place.
Ca sera plus clair avec du code :

$(document).ready(function(){
var divColorpicker=jQuery('#divColorpicker');
//fonction qui arrondi le hsb
var roundHsb=function(hsb){
var h=jQuery('.colorpicker_hsb_h input',divColorpicker);
var s=jQuery('.colorpicker_hsb_s input',divColorpicker);
var b=jQuery('.colorpicker_hsb_b input',divColorpicker);
h.val(Math.round(h.val()));
s.val(Math.round(s.val()));
b.val(Math.round(b.val()));
}
//initialisation du colorpicker
divColorpicker.ColorPicker({
flat:true,
color:'78AD78',
onChange:function(){
//on arrondi à chaque changement de couleur
roundHsb();
}
});
//on arrondi la couleur mise à l'initialisation
roundHsb();
});

Petite astuce bonus :
Si vous voulez passer du colorpicker noir au gris, ouvrez le fichier colorpicker.css et modifier le chemin des images :

/* Remplacer ces chemins */
background: url(../images/colorpicker_background.png);
background: url(../images/colorpicker_select.gif);
background: url(../images/colorpicker_indic.gif) left top;
background: url(../images/colorpicker_hex.png) top;
background-image: url(../images/colorpicker_rgb_r.png);
background-image: url(../images/colorpicker_rgb_g.png);
background-image: url(../images/colorpicker_rgb_b.png);
background-image: url(../images/colorpicker_hsb_h.png);
background-image: url(../images/colorpicker_hsb_s.png);
background-image: url(../images/colorpicker_hsb_b.png);
background: url(../images/colorpicker_submit.png) top;

/* par */
background: url(../images/custom_background.png);
background: url(../images/custom_select.gif);
background: url(../images/custom_indic.gif) left top;
background: url(../images/custom_hex.png) top;
background-image: url(../images/custom_rgb_r.png);
background-image: url(../images/custom_rgb_g.png);
background-image: url(../images/custom_rgb_b.png);
background-image: url(../images/custom_hsb_h.png);
background-image: url(../images/custom_hsb_s.png);
background-image: url(../images/custom_hsb_b.png);
background: url(../images/custom_submit.png) top;

/* sauf celui là, sinon vous n'aurez plus le carré principal des dégradés */
background: url(../images/colorpicker_overlay.png);