Dans la nouvelle version de ZoomCreator que nous sommes en train de réécrire, nous voulions ajouter de beaux colors pickers. Pour cela, j'ai trouvé Khromaxul, un ensemble de color pickers sous forme de composants XBL (avec du SVG), crée par Joliclic. La demo et les tests m'ont fait bonne impression, ainsi que le code en général.

Mais un souci s'est posé à l'intégration. Pour synchroniser les color pickers (mise à jour des pickers quand vous changez la couleur dans un), il faut se taper des tonnes de lignes de code javascript, avec des event listeners sur chacun des pickers. À cela il faut ajouter que chaque composant a sa propre API. Ainsi il y a des pickers pour les couleurs RGB, d'autres pour HSV etc. Et donc lors de cette synchronisation "à la main", il faut aussi se taper les conversions d'un format de couleur à un autre.

Bref, d'un point de vue du développeur, ce n'était pas très sexy à utiliser. J'ai donc décidé d'améliorer tout ça (vive les licences libres !). J'ai d'abord harcelé Joliclic pour qu'il crée un dépôt des sources quelque part, en lui proposant BitBucket. Vous pouvez ainsi accéder aux dernières modifications. Et voilà les améliorations principales que j'ai apporté :

  • uniformisation de l'API des pickers : ils héritent tous du même XBL de base que j'ai dévelopé, avec une propriété "color" contenant une chaine avec le code couleur en CSS (rgb, hsl, hexa...), et une propriété colorObject qui est un objet permettant de manipuler la couleur en question.
  • cet XBL de base intégre la communication avec un dispatcher. En fait, Joliclic a crée un broadcaster similaire au broadcaster XUL, mais spécialisé pour nos besoins. Ainsi, pour synchroniser les pickers, il suffit juste de créer une balise kh-colordispatcher, et d'indiquer son id dans un attribut "dispatcher" sur chacun des pickers. Plus une seule de code JS à écrire !
  • j'ai aussi ajouter support de la transparence dans les couleurs: rgba, hsla, hsva.
  • J'ai développé également un picker pour choisir la transparence, une colorbox affichant la transparence, un textbox pour saisir un code couleur etc....

Bref, la version 0.4 n'apportera pas de grande nouveauté pour l'utilisateur, mais un grand bouleversement pour le développeur désirant intégrer un ou plusieurs color pickers dans son application XUL.