Installer un sélecteur de couleur dans un formulaire BreezingForms

Vous avez la nécessité de proposer un sélecteur de couleur dans un de vos formulaires BreezingForms et n'avez pas d'idée de comment l'intégrer ?

Niveau : Avancé
Version BF minimale requise : BreezingForms Lite
Compatibilité Joomla! 4/5 : ✅

Préambule

Je me suis intéressé à l'intégration d'un ou plusieurs sélecteurs de couleur au sein d'un formulaire BreezingForms et ai testé diverses solutions pré-façonnées qui utilisent JavaScript ou jQuery. Certaines solutions s'intègrent facilement d'autres moins. J'ai porté mon choix sur Spectrum.

Si l'utilisation de Spectrum est envisageable quasiment partout et dans de nombreuses situations, elle est également et surtout aisée à installer dans un formulaire BreezingForms, facile à utiliser et à paramétrer pour obtenir rapidement le résultat souhaité, qu'il soit un sélecteur de couleur sur un panneau sur lequel on glisse un curseur ou une palette de couleurs ou les deux…

Ce plugin, de Brian Grinstead, permet une personnalisation probablement jamais atteinte avec d'autres solutions de ce type.

Téléchargement et installation

Brian propose son plugin au téléchargement et une documentation très complète depuis cette page. Vous y trouverez également un lien vers les codes sources du plugin…

L'installation peut se faire dans le répertoire que vous souhaitez.
Pour ce pas à pas, je l'installe dans le dossier includes (à la racine de Joomla!) dans lequel j'ai créé deux sous-dossiers, js et css.
Après avoir dézippé l'archive, je place, dans le dossier js le fichier spectrum.js et dans le dossier css le fichier spectrum.css.

L'installation est désormais terminée… Et oui, je vous avais dit "aisé à installer"… 😊

Utilisation

Préparation du formulaire

Préparez votre formulaire comme vous l'envisagez et, là où vous souhaitez présenter votre sélecteur de couleur, créez un élément de type champ de texte. Titrez-le et nommez-le.
Lorsque votre formulaire est terminé, enregistrez-le (bien que vous aviez pris soin de l'enregistrer régulièrement lors de sa création) et vérifiez son fonctionnement sans trop vous soucier à ce moment du champ qui recevra le sélecteur de couleur.

Tout fonctionne ? Continuons…

Relevez le nom de votre champ et rendez-vous dans les propriétés avancées du formulaire, Plus d'options afin d'accéder au panneau des scripts, pièces, etc.

Activez l'onglet Pièces de formulaire, Avant le formulaire et sélectionnez le bouton radio Personnalisé afin d'accéder à la zone de textes dans laquelle il faudra entrer les chemins vers les fichiers .js et .css précédemment chargés dans le répertoire includes.

Entrez donc ce qui suit dans cette zone de textes :

$this->execPieceByName('ff_InitLib'); // initialisation de la bibliothèque BreezingForms

echo '
<style>
.colorpicker {display: none !important;} // Contrer un affichage indésirable et inattendu du champ
</style>
<link rel="stylesheet" href="/includes/css/spectrum.css" />
<script type="text/javascript" src="/includes/js/spectrum.js"></script>
';

Ouvrez ensuite l'onglet Scripts. C'est ici que vous construirez votre sélecteur de couleur.

Sélectionnez l'option Personnalisé et cliquez le bouton Créer la structure du code pour obtenir le code de départ.

function ff_nomDuFormulaire_init()
{
} // ff_nomDuFormulaire_init

Pour fonctionner, il faut cibler l'élément que l'on voudra changer en sélecteur. Par facilité, vous lui attribuez, par JavaScript, une id différente de son originale et vous lui donnerez la classe colorpicker.

Entrez le code suivant entre les accolades du script précédent :

ff_getElementByName('nomDuChamp').classList.add('colorpicker').id = 'monID';

Remplacez nomDuChamp par le nom de votre champ. Si vous examinez l'élément dans l'inspecteur de votre navigateur, vous voyez que l'Id a changé et que la classe colorpicker a été ajoutée.

Initialisation du sélecteur de couleur

Sous le code précédent, vous initialisez le sélecteur de couleur de la manière suivante :

jQuery('monID').spectrum ({
// ici viendront les paramètres nécessaires à votre sélecteur
});

Remplacez monID par l'id que vous avez donné à votre champ à l'étape précédente.
Enregistrez votre script. À ce stade, le champ a été modifié et est déjà un sélecteur de couleur simple.

La sélection d'une couleur renverra sa valeur, selon votre format préféré, dans les données enregistrées du formulaire lors de sa validation. Le script accepte les formats Hexadécimal (#ffffff), Hexdécimal3 (#fff), HSL (120, 100%, 25%), rgb avec canal alpha (255, 0, 0, 0.5), Nom de couleur (aliceblue).

Sur la page GiHub du plugin, vous trouverez tous les paramètres disponibles et applicables à votre sélecteur avec des exemples. Chaque paramètre doit être entré entre les accolades de la fonction spectrum, séparé par une virgule et pour y voir clair, un par ligne (pas indispensable).
Les palettes de couleur se placent entre crochets [] et chaque ligne entre des crochets de sous-niveau [ ["couleur1", "couleur2", etc.], ["couleur7", "couleur8", etc.], etc.] et séparées par une virgule. Inspirez-vous des exemples pour construire votre palette.

Ci-dessous, je vous présente un formulaire avec 4 champs modifiés en sélecteurs de couleur. Je vous place ici le paramètre du premier afin que vous ayez un aperçu des possibilités.

function ff_nomDuFormulaire_init()
{
ff_getElementByName('color1').classList.add('colorpicker').id = 'selectComplete';

// Panneau complet
jQuery('#selectComplete').spectrum({
    color: '#f00',
    showAlpha: true,
    showPalette: true,
    showInput: true,
    preferredFormat: 'rgb',
    allowEmpty: true,
    togglePaletteMoreText: 'Plus',
    togglePaletteLessText: 'Moins',
    cancelText: 'Annuler',
    chooseText: 'Valider',
    clickoutFiresChange: true,
    hideAfterPaletteSelect:true,
    palette: [ // Ci-dessous les différentes pastilles de la palette de couleur, tout est personnalisable.
        ["#000","#444","#666","#999","#ccc","#eee","#f3f3f3","#fff"],
        ["#f00","#f90","#ff0","#0f0","#0ff","#00f","#90f","#f0f"],
        ["#f4cccc","#fce5cd","#fff2cc","#d9ead3","#d0e0e3","#cfe2f3","#d9d2e9","#ead1dc"],
        ["#ea9999","#f9cb9c","#ffe599","#b6d7a8","#a2c4c9","#9fc5e8","#b4a7d6","#d5a6bd"],
        ["#e06666","#f6b26b","#ffd966","#93c47d","#76a5af","#6fa8dc","#8e7cc3","#c27ba0"],
        ["#c00","#e69138","#f1c232","#6aa84f","#45818e","#3d85c6","#674ea7","#a64d79"],
        ["#900","#b45f06","#bf9000","#38761d","#134f5c","#0b5394","#351c75","#741b47"],
        ["#600","#783f04","#7f6000","#274e13","#0c343d","#073763","#20124d","#4c1130"]
    ],
});
} // ff_nomDuFormulaire_init

Ci-dessous un formulaire exemple de test.

Vous pourrez trouver d'autres solutions, plugins javascript pour l'intégration de sélecteur de couleur. Toutes ne sont pas aussi souples, faciles, utilisables et personnalisables que Spectrum. Si vous avez un besoin similaire mais souhaitez une de ces autres solutions, vous trouverez sûrement votre bonheur à l'aide d'un moteur de recherche.

Il me reste à vous souhaiter bonne construction de vos formulaires, avec ou sans sélecteur de couleur… 😉