PJ1: modals.css.txt

Le besoin 

Aujourd'hui, nous allons voir comment procéder pour ajouter une fenêtre modale dans notre console d'administration du CMS joomla.
Ce besoin, certes très professionnel, j'en ai besoin pour pouvoir afficher du côté console d'administration, (sans écrire de composant !) un nom de fichier formaté et surtout normalisé. (nouis devons suivre une norme pour nommer nos fichiers de notre documentation
Pour générer ce nom, étant absolument très mauvais en Javascript, je n'ai pas intégré un code JavaScript à un élément Joomla comme un module ou un plugin, mais j'ai véritablement fait un simple fichier HTML, en me basant sur des exemples existants sur Internet. Comme disait Georges Brassens "&wmode=transparent" class="modal_link" data-modal-video="true" data-modal-iframe="true" data-modal-inner-width="95%" data-modal-inner-height="95%" data-modal-class-name="is_video no_title">qu'on ai 20 ans, qu'on soit grand père, quand on est c..."
Nous avons en effet fabriqué une norme de nom de fichier, chacun des fichiers que nous souhaitons mettre à disposition à nos utilisateurs doivent être normés ainsi. Cela permet, s'il y a personne ne connaît pas exactement le nom, de pouvoir quand même faire une recherche avec le moteur de recherche de Joomla RokAjaxSearch sur des morceau du nom du potentiel fichier recherché

Ma réalisation Joomla 

Avant toute chose, je tiens à préciser que ma template utilisée pour ma console d'administration est Isis.
Pour parvenir à répondre à mon besoin, voilà comment j'ai procédé :
 
  1. J'ai commencé par faire un héritage, un fork, une extension, ou tout autre terme que vous souhaitez, du composant cpanel se trouvant dans le dossier de l'administration joomla 3
  2. Ensuite, j'ai édité le fichier de vue suivant : administrator/templates/isis/html/com_panel/panel/default.php afin d'apporter les modifications à la lignes 16.
  3. Je me suis rendu sur le site codepen.io afin de récupérer un exemple de fenêtre modale qui est écrite en pure CSS (ce qui évite d'avoir du javascript à trainer) : codepen.io/ldered/pen/DdeceW pour la fenêtre modale, j'intègre le CSS dans le fichier de template Isis administrator/isis/css/template.css, puis j'intègre ensuite dans le fichier default.php le code HTML correspondant.
  4. Je procède à la modification du code HTML inutile de la description et récupérée dans le modèle de CSS, pour ne garder que les boutons.
  5. Dans les fenêtres modales, j'intègre les fichiers HTML que je souhaite voir afficher. Comme ces fichiers de contiennent que du javascript, une iframe fait parfaitement l'affaire dans la modale. Étant donné qu'il n'y a aucun aller-retour sur le serveur puisque je suis en Javascript, je peux mettre tout ce que je veux dans mes fichiers. Et quand bien même j'aurais besoin d'un aller-retour avec le serveur, je pourrais utiliser la technologie JavaScript Ajax, donc basé côté client, pour combler mon besoin.
  6. Enfin, je corrige où je modifie au besoin et à feuille de style intégrée, de manière à ce que l'intégration ne jure pas trop niveau infographie dans mon code.

Je vous conseille de retoucher le CSS car j'ai l'impression que les boutons natifs de joomla s'appliquent sur le CSS rajouté. Rien de grave mais le style change...

 Fenêtre modale avec formulaire dans la console administration de Joomla - Joomla administrator modal windows
 
 



Mon Github

slhuilli1's GitHub repositories