Créez un sélecteur de couleur en jQuery

Pour faire évoluer markItUp! dans sa version 2.0 (sortie officielle décembre 2039), j'ai voulu remplacer la très archaïque palette de couleurs que proposait la version 1.1 par une palette digne de ce nom.

Plutôt content du résultat final, je me suis dit qu'il serait intéressant de proposer cette palette dans un plugin jQuery indépendant. Ce n'est pas que ce plugin soit d'un grand intérêt - il doit en existe de bien meilleurs - mais il peut en découler un tutoriel que j'espère intéressant. Le voici.

Voir la démo

Ce que je veux

Ne pouvant demander à mes utilisateurs de connaitre par cœur la table des couleurs web hexadécimales, je veux proposer un moyen simple de sélectionner une valeur de couleur tout en laissant aux plus spécialistes la possibilité de taper directement cette valeur. Je proposerai donc l'affichage d'une palette de couleurs dites websafe lorsque le curseur de l'utilisateur entrera dans le champ de saisi. Un clic sur une couleur remplira automatiquement ce champ.

La logique

Le plugin est constitué de deux fichiers, le plugin lui-même jquery.mycolorpicker.js et sa feuille de style nommée jquery.mycolorpicker.css. Voici la version intégrale du code agrémentée de quelques commentaires succins. Une explication plus en détail fera suite.

jquery.mycolorpicker.js

/**
 * Créez un sélecteur de couleur en jQuery
 * par Jay Salvat - http://blog.jaysalvat.com/
 */
(function($) {
   $.fn.myColorPicker = function() {
      return this.each(function(){
         var $$ = $(this);   
         var x  = $$.offset().left;
         var y  = $$.offset().top + $$.outerHeight(true);
         
         // Lorsque le curseur entre dans le champ de saisi
         $$.focus(function() {
            buildColorPicker();
         });

         // Fonction de création de la palette
         function buildColorPicker() {
            // On supprime d'éventuelles autres palettes déjà ouvertes
            removeColorPicker();

            // On construit le Html de la palette
            var values  = ['00', '33', '66', '99', 'CC', 'FF']; 
            var content = '';
            content += '<div id="myColorPicker">';
            content += '<ul>';
            for(r = 0; r < 6; r++) { 
               for(g = 0; g < 6; g++) { 
                  for(b = 0; b < 6; b++) { 
                     color = '#' + values[r] + values[g] + values[b]; 
                     content += '<li><a rel="'+ color +'" style="background:'+ color +'" ¬
                                 … title="'+ color +'"></a></li>'; 
                   } 
               } 
            }
            content += '</ul>'; 
            content += '<a class="close">Fermer</a>'; 
            content += '</div>'; 

            // On la place dans la page aux coordonnées du textfield
            $(content).css({ 
               position:'absolute', 
               left:x, 
               top:y,
               backgroundColor:$$.val()  
            }).appendTo('body');
			
            // Au survol d'une couleur, on change le fond de la palette
            $('#myColorPicker a').hover(function() {				
                $('#myColorPicker').css('backgroundColor', $(this).attr('rel') );
            }, function() {
                $('#myColorPicker').css('backgroundColor', $$.val() );		
            });

            // Lorsqu'une couleur est cliqué, on affiche la valeur dans le textfield
            $('#myColorPicker a').not('.close').click(function() {
               $$.val( $(this).attr('rel') );
               removeColorPicker();
               return false;
            });

            // Au survol d'une couleur, on change le fond
            $('#myColorPicker a').mouseover(function() {
               $('#myColorPicker').css('backgroundColor', $(this).attr('rel') );
            });

            // On supprime la palette si le lien "Fermer" est cliqué
            $('#myColorPicker a.close').click(function() {
               removeColorPicker();
               return false;
            });   
         }

         // Fonction de suppression de la palette
         function removeColorPicker() {
            $('#myColorPicker').remove();
         }   
      });
   };
})(jQuery);

Dissection du code

Je reviens sur les points les plus intéressants.

(function($) {
   $.fn.myColorPicker = function() {

        // ...

   };
})(jQuery);

Un plugin jQuery se commence ainsi. Je passe rapidement sur cette partie, ce n'est pas le premier plugin jQuery développé sur ce blog. Plus d'informations dans cet article.

return this.each(function(){
    var $$ = $(this);   
    var x  = $$.offset().left;
    var y  = $$.offset().top + $$.outerHeight(true);

    //...
});

Le plugin sera appliqué à chaque élément précisé lors de son appel, théoriquement ici des textfields. Pour plus de simplicité j'ai pour usage de garder l'élément courant $(this) dans une variable $$. J'en profite pour garder les coordonnées top et left du textfield pour positionner la palette plus tard.

$$.focus(function() {
    buildColorPicker();
});

J'écoute l'événement focus sur le champ de saisi courant $$. Ainsi dès que l'utilisateur entrera dans le champ de saisi la fonction buildColorPicker() se lancera.

function buildColorPicker() {

    // ...

    var values  = ['00', '33', '66', '99', 'CC', 'FF']; 
    var content = '';
    content += '<div id="myColorPicker">';
    content += '<ul>';
    for(r = 0; r < 6; r++) { 
        for(g = 0; g < 6; g++) { 
            for(b = 0; b < 6; b++) { 
                color = '#' + values[r] + values[g] + values[b]; 
                content += '<li><a rel="'+ color +'" style="background:'+ color +'" ¬
                            … title="'+ color +'"></a></li>'; 
            } 
        } 
    }
    content += '</ul>'; 
    content += '<a class="close">Fermer</a>'; 
    content += '</div>'; 

    // ...

}

La fonction buildColorPicker construit la palette de couleurs. 3 boucles imbriquées (une pour le rouge, une pour le vert, une pour le bleu) empilent les liens avec les informations de couleur dans une variable content. Les liens générés ressemblent à ça :

<li><a rel="#FF9900" style="background:#FF9900" title="#FF9900"></a></li>

Le tout est rangé dans une liste non-ordonnée ul et li ancrée dans un div nommé #myColorPicker qui me servira à identifier la palette. Je n'ai pas oublié d'ajouté un lien pour fermer plus tard la palette.

$(content).css({ 
    position:'absolute', 
    left:x, 
    top:y,
    backgroundColor:$$.val()   
}).appendTo('body');

Un élément est créé à partir du code HTML contenu dans la variable content et greffé au body, puis placé aux coordonnées x et y du champ de saisi précédemment stockés. Si le champ contient déjà une valeur, on l'applique à la palette pour qu'elle soit prévisualisée.

$('#myColorPicker a').hover(function() {				
    $('#myColorPicker').css('backgroundColor', $(this).attr('rel') );
, function() {
    $('#myColorPicker').css('backgroundColor', $$.val() );		
});

Maintenant que tout est en place, on ajoute les différents comportements. Pour que l'utilisateur puisse se faire une meilleure opinion de la couleur à choisir, on change le backgroundColor de la palette entière lorsqu'une couleur est survolée. On remet comme c'était lorsqu'elle ne l'est plus.

$('#myColorPicker a').not('.close').click(function() {
    $$.val( $(this).attr('rel') );
    removeColorPicker();
    return false;
});

Lorsqu'un lien autre que le bouton Fermer (.close) est cliqué, la valeur de l'attribut rel est récupérée par $(this).attr('rel')) est appliquée dans le champ de saisi. Enfin, on supprime la palette de la page grâce à la fonction removeColorPicker() à venir.

$('#myColorPicker a.close').click(function() {
    removeColorPicker();
    return false;
}); 

Le lien .close appellera aussi la fonction removeColorPicker() qui détruira la palette :

function removeColorPicker() {
    $('#myColorPicker').remove();
}  

L'esthétique

Jusqu'à présent, la liste de liens affichée par le plugin est loin de ressembler à une palette de couleur. Nous y remédions grâce à la feuille de style ci-dessous.

jquery.mycolorpicker.css

#myColorPicker {
    background-color:#000;
    border:1px solid #000;
    margin:-1px;
    width:390px;
}
#myColorPicker ul {
    width:360px;
    margin-right:30px;
}
#myColorPicker * {
    margin:0; padding:0;
}
#myColorPicker a {
    cursor:pointer;
    display:block;
    width:10px; height:10px;
}
#myColorPicker li {
    float:left;
    list-style:none;
}
#myColorPicker a.close {
    background:transparent url(images/close.png) center center;
    position:absolute;
    text-indent:-5000px;
    top:-10px; right:-10px;
    width:20px; height:20px;
}

On peut aussi s'amuser à améliorer le champ de saisi avec un petit icône.

.myColorPicker {
    background:transparent url(images/palette.png) no-repeat 99% center;
    padding-right:20px;
}

Et voici les images utilisées.

Images utilisées

Usage

Comme pour tout plugin jQuery, la librairie doit être incluse, puis le plugin en question et sa feuille de style.

<link rel="stylesheet" type="text/css" href="jquery.mycolorpicker.css" /> 

<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript" src="jquery.mycolorpicker.js"></script> 

Il suffit ensuite d'appliquer notre nouveau plugin aux éléments de la page voulus. Dans l'exemple suivant, on l'applique aux inputs portant la classe .myColorPicker :

<script type="text/javascript">
    $(function() {
        $('input.myColorPicker').myColorPicker();
    });
</script>

Ainsi, tout input de ce type :

<input class="myColorPicker" type="text" />

se transformera en un joli sélecteur de couleurs.

Conclusion

Voilà ! Tout y est. Un fichier zip comprenant la totalité des éléments est disponible en téléchargement.

Télécharger ce plugin

MISE A JOUR le Jeudi 9 Juillet 2009 :

MISE A JOUR le Jeudi 9 Juillet 2009 : Cet article a été mis a jour.