Je vous propose aujourd'hui un petit plugin que j'ai écrit, en m'appuyant sur le travail de l'auteur Alvaro que j'ai trouvé sur le site code Pen. Je vous mets ici le lien de référence : https://codepen.io/alvarotrigo/pen/qBpBezx
La problématique
Dans le cadre de mes fonctions de documentaliste, je suis amené à répondre de manière téléphonique, à des demandes documentaires ou techniques qui sont souvent spécifiques à certains éléments très particulier. Ces questions peuvent revenir très souvent. Aussi, le développement de cet outil a pour but de fabriquer une base de connaissance documentaire, qui pourra être disponible à l'ensemble de mes utilisateurs pour chacun des article que je gère dans Joomla.
Après interview de mes supérieurs, il a été choisi de ne pas organiser ces questions-réponses sous la forme de thématiques, dans la mesure où ce nombre de questions-réponses reste relativement faible. C'est la raison pour laquelle je ne me contente que d'un seul niveau dans la présentation : une question égale à une ou plusieurs réponses, réponses au sein d'un même paragraphe. En effet, l'idée étant d'agrémenter au fil du temps les réponses à les questions auxquelles nous sommes confrontées. Cette rubrique a pour but d'être non figée dans le temps est très dynamique et réactive.
Le plugin
Avec une formation assez ancienne d'informaticien, je suis relativement attaché à la cohérence des données qui nous retrouvons notamment dans la méthode d'analyse de bases de données MERISE 2. Partant de ce principe, je n'ai pas voulu fabriquer un module que j'intègre à chacune de mes fiches (on pourrait penser à Qlue Accordion, le lien entre le module et article étant à recréer à chaque fois, mais surtout il faudrait créer un nouveau module à la création de chacune des fiches. Je ne suis pas de ce genre-là, je suis un gros fainéant (et donc un grand garant de la cohérence des données, ca va souvent de pair !) ! c'est la raison pour laquelle je pars du principe que le rédacteur de la documentation, à savoir moi-même, va fabriquer dans chacun de ses articles, une "orthographe" particulière (c'est à dire un shortcode pour parler Joomla) qui va pouvoir présenter mes questions réponses.
Le fonctionnement
Comme je souhaite donc rédiger mes questions ainsi que leur réponse au cœur de mon article, j'ai plutot souhaité fabriquer un plugin qui, chargé en amont de l'article par le système Joomla, va savoir récupérer mes tags travaillant en couple : un tag question, un tag réponse. J'aurais pu englober comme en XML ce couple dans un tag père mais je n'y voyais pas l'interet technique, dans la mesure ou je n'opère pas de tri ou d'autres action sur mes questions-reponses.
Ainsi, mon système va pouvoir détecter l'ensemble des questions, qui vont apparaître dans un volet fermé mais visible par l'utilisateur, et sa réponse qui sera dans le volet fermé (mais ouvrable) par défaut à utilisateur. Lorsque ce dernier cliquera sur la petite icône flèche située sur la droite du titre, à ce moment-là, l'accordéon va s'ouvrir et la réponse apparaîtra à l'utilisateur.
Le contenu de la réponse sera du texte brut. En effet, l'utilisation de tag HTML de type <a fonctionne mal voire ne fonctionne pas. Dans mon cas ce n'est pas très dramatique car je n'ai pas l'intention de m'en servir, mais en procédant à quelques tests, je n'ai pas réussi à mettre en place des liens hypertextes dans les réponses à mes questions.
Toutefois, dans les réponses, vous pouvez bien entendu styliser votre texte au moyen de balises de type spam avec une classe CSS relié à cette balise.
Comme à mon habitude, je fournis à ce plugin, un fichier CSS dans lequel vous pouvez corriger et modifier votre propre style. J'ai apporté quelques modifications de sélection et de correction sur certains petits affichage, mais vous pouvez vous référer au fichier original au travers du lien que je vous ai mis, lien pointant sur le magnifique site internet codepen.
NB : dans le code récupéré de codepen, l'auteur utilise une balise <i> qui n'a rien a voir avec de l'italique, il s'en sert comme un conteneur span
qr.xml
<?xml version="1.0" encoding="utf-8"?>
<extension version="3.1" type="plugin" group="Content">
<name>QR : le plugin d'affichage des questions réponses</name>
<author>Sebastien LHUILLIER</author>
<creationDate>Janvier 2023</creationDate>
<copyright>Sébastien LHUILLIER</copyright>
<license>GNU General Public License version 2 or later; see LICENSE.txt</license>
<authorEmail>Cette adresse e-mail est protégée contre les robots spammeurs. Vous devez activer le JavaScript pour la visualiser.</authorEmail>
<authorUrl>www.sebastien-lhuillier.com</authorUrl>
<version>1.0</version>
<description>Affiche des question et leurs réponse sous la forme d'accordeons</description>
<files>
<filename plugin="qr">qr.php</filename>
<filename>qr.xml</filename>
<filename>style.css</filename>
</files>
</extension>qr.php
<?php
defined('_JEXEC') or die('Access deny');
class plgContentQR extends JPlugin
{
function onContentPrepare($content, $article, $params, $limit){
$document = JFactory::getDocument();
$document->addStyleSheet('plugins/content/qr/qr.css');
$T = array();
$re = '/{question}\r{0,}\n{0,}(.*)\r{0,}\n{0,}{\/question}\r{0,}\n{0,}{reponse}\r{0,}\n{0,}(.*)\r{0,}\n{0,}{\/reponse}/m';
$str = $article->text;
preg_match_all($re, $str, $matches, PREG_SET_ORDER, 0);
$i=0;
foreach($matches as $ligne)
{
//array_push($T,$ligne[1],$ligne[2]);
$T[$i][0] = $ligne[1];
$T[$i][1] = $ligne[2];
$i++;
}
//Maintenant que j'ai tout dans mon array, je supprime le contenu de l'article pour que ca n'apparaisse pas avec les tags
$article->text = preg_replace($re, '', $article->text);
echo '<ul class="QR">';
//la balise <i> permet de mettre l'élément d'ouverture/fermeture ET j'affiche le résultat
foreach($T as $ligne)
{
echo "<li>";
echo '<input type="checkbox" checked>';
echo '<i></i>'; //Obligatoire
echo '<h2>'.$ligne[0].'</h2>'; echo '<p class="reponse">'.$ligne[1].'</p>'; echo "</li>"; } echo '</ul>'; } }qr.css
.transition, .QR li i:before, .QR li i:after, p {
transition: all 0.25s ease-in-out;
}
.flipIn, .QR li, h1 {
animation: flipdown 0.5s ease both;
}
.no-select, h2 {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.QR {
list-style: none;
perspective: 900;
padding: 0;
margin: 0;
}
.QR li {
position: relative;
padding: 0;
margin: 0;
/*padding-bottom: 4px;*/
padding-top: 10px;
border-top: 1px dotted #dce7eb;
}
.QR li h2 {
background-color:#BFDFC2; /*Rouge SEO*/
border-radius:5px;
margin:2px;
}
.QR li:nth-of-type(1) {
animation-delay: 0.5s;
}
.QR li:nth-of-type(2) {
animation-delay: 0.75s;
}
.QR li:nth-of-type(3) {
animation-delay: 1s;
}
.QR li:last-of-type {
padding-bottom: 0;
}
.QR li i {
position: absolute;
transform: translate(-6px, 0);
margin-top: 16px;
right: 0;
top:1px;
margin-right: 3%; /*modifié par mes soins pour décaler la tick vers la gauche*/
}
.QR li i:before, .QR li i:after {
content: "";
position: absolute;
background-color: #ff6873;
width: 3px;
height: 9px;
}
.QR li i:before {
transform: translate(-2px, 0) rotate(45deg);
}
.QR li i:after {
transform: translate(2px, 0) rotate(-45deg);
}
.QR li input[type=checkbox] {
position: absolute;
cursor: pointer;
width: 100%;
height: 100%;
z-index: 1;
opacity: 0;
top:-5px;
left: -25%; /*rajouuté par mes soins**/
}
.QR li input[type=checkbox]:checked ~ p {
margin-top: 0;
max-height: 0;
opacity: 0;
transform: translate(0, 50%);
}
.QR li input[type=checkbox]:checked ~ i:before {
transform: translate(2px, 0) rotate(45deg);
}
.QR li input[type=checkbox]:checked ~ i:after {
transform: translate(-2px, 0) rotate(-45deg);
}
.QR li .reponse {
background-color: #ffe2e2;
padding: 0;
margin: 0;
border: 1px dashed;
text-align: left;
width:99%;
margin-top:0.5%;
margin-left:auto;
margin-right:auto;
margin-bottom:auto;
/*margin:auto;*/
}
@keyframes flipdown {
0% {
opacity: 0;
transform-origin: top center;
transform: rotateX(-90deg);
}
5% {
opacity: 1;
}
80% {
transform: rotateX(8deg);
}
83% {
transform: rotateX(6deg);
}
92% {
transform: rotateX(-3deg);
}
100% {
transform-origin: top center;
transform: rotateX(0deg);
}
}