Dans le cadre de mes fonctions, je suis amené à utiliser un champ personnalisé de joomla content pour y stocker une valeur sous la forme très particulière, puisque c'est une chaîne de caractère formé de chiffres groués. Chacun de ces nombre sont répartis en groupe de la manière suivante : xxxx-xx-xxx-xxxx (un peu comme les SLRN des fans de SM).

Afin de pouvoir "valider" en quelque sorte, la bonne saisie du formalisme de ce champ, j'ai dû appliquer un masque de saisie sur un champ personnalisé de type input text. Vous le savez sûrement, même HTML5 ne propose pas ce type de champ masque de saisie. Il faut appliquer un script Javascript, utiliser par exemple avec la bibliothèque jQuery, pour forcer le formalisme de saisie de ce champ dans un input type texte classique.

Bibliothèque utilisée

Après quelques recherches sur le net, j'ai trouvé une bibliothèque qui répond à ce besoin, en Javascript, que vous pouvez retrouver à l'adresse http://imask.js.org. Vous remarquerez d'ailleurs sur la page d'accueil de cette bibliothèque, tout un ensemble de codes et d'exemples répondant à différents types de besoins, que ce soit de la saisie de date, de la saisie de nombres entre deux bornes, ou encore permettre en Javascript de vérifier qu'une chaîne de caractère correspond bien à une expression régulière spécifique. (désolé mais l'auteur ne parle pas de SLRN :)  C'est la raison pour laquelle je suis parti sur cette librairie, l'utilisation des expressions rationnelles étant très répandue. D'ailleurs, c'est de cette manière que j'ai implémenté mon masque de saisie.

Intégration du masque de saisie dans la console d'administration sur un champ personnalisé.

Copie du fichier de gestion de masque

Nous en arrivons ici au cœur du problème : comment implémenter un masque de saisie sur un champ personnalisé ?

J'avais plusieurs moyens de faire, rien d'entre eux était de recréer un type de chant au format maskedit. Ceci eût été très intéressant, mais peut-être relativement long à mettre en place. Cela nécessitait pas mal de développement sur des techno que je ne maîtrise pas (encore :) ).

Afin de mettre en place cette fonctionnalité, nous avons, car mon cher cousin m'a donné un petit coup de main, mis en place dans un premier temps toute la bibliothèque JS, dans le dossier de ma template d'administration. J'ai alord copié mon fichier imask.js dans le répertoire administrator/templates/isis/js de manière à ce que ce fichier JavaScript soit bien rangé au bon endroit. Je ne l'ai pas rappelé, mais l'acronyme JS que l'on vois dans le chemin d'accès signifie bien JavaScript.

Implémentation et appel de ce fichier dans ma template

Maintenant que ce fichier est prêt à être utilisé dans Joomla, il faut lui dire de l'appeler. Pour ce faire, nous allons intégrer et appeller ce fichier directement dans notre modèle aussi appelé template Joomla. Cette intégration doit se passer en deux parties :

1. Dans joomla, nous avons fait un appel à ce fichier JavaScript de manière à ce que ce fichier soit chargé lorsque la page est appelée
2. Puis nous allons dire à jumia de charger le code propre à ce plugin de masque au moment du chargement de la page.

En effet, c'est dans ce code javascript que nous avons spécifié le format du masque. Nous allons détailler ces deux points

Appel au fichier, Javascript

Dans la section html du fichier de ma template ISIS, j'ai intégré l'accès, le chargement au "moteur" de gestion des masque de cette manière (oui je sais, on aurait pu l'intégrer autrement avec les API Joomla) :

Notez que j'utilise bien l'option defer de la balise script pour que ce chargement s'éxécute non pas au moment où le navigateur rencontre cette ligne de script, mais bien lorsque la page est entièrement chargée. (exit donc les technnologies JQuery and co qui étaient spécifiques à ce chargement, c'est intégré désormais dans javascript Vanillia). Désormais que nous avons l'appel à cette bibliothèque de gestion des masques, il faut dire au système à quel champs html appliquer ce masque.

Après avoir créé mon champs personnalisé Joomla, j'ai donc simulé la création d'en enregistrement dans l'adminsitrator de manière à avoir sous les yeux mon champ.

En inspectant le code source, j'ai retrouvé ses deux indentifiants : son nom et son id. L'exemple de maskedit proposant de travailler avec l'ID du champs, j'ai appliqué le script via la commande Javascript getElementById pour associer le formalisme du masque au champs souhaité.

Et voila, le masque est appliqué au champs. Parmi ma "mamaille", j'ai retroengeeneeré le code pour retrouver l'ID du champs de saisie. Peut être y-a-t-il dans les règles de l'art Joomla des méthodes de faire, des logiques de nommages qui m'écchappent, je n'en doute pas, mais le système fonctionnne.