Aujourd'hui, je vous présente un module de type accordéon, déjà développé par une tierce personne sur Joomla au travers de son composant accordion.
Mais si j'ai eu envie de redévelopper ceci via un plugin, c'est pour répondre à mon besoin et sa finalité quelque peu différente. En effet, au départ, je souhaitais simplement pouvoir intégrer un accordéon au cœur d'un article. C'est la raison pour laquelle, ce plugin une fois installé, nécessite simplement deux tags : le premier s'appelle question et le deuxième réponse. Ce couple de tags peut etre intégré à l'article sans avoir a créer et multiplier des modules à foison.
Pourquoi attribuer de tel nom ?
L'idée est très simple point dans le cadre de mes fonctions, ce plugin permet d'afficher une question à laquelle nous répondons une réponse. L'idée est de monter une base de connaissances au travers de couple question-réponse.
Quel avantage par rapport à un module de type accordéon ?
Et bien le seul avantage et ce pourquoi j'ai développé ce plugin, c'est que ce plugin est justement un plugin et non un module. Ainsi vous pouvez l'utiliser quel que soit l'endroit où vous vous trouvez, et saisir au cœur même d'un article par exemple, un couple questions-réponses ou simplement un couple avec une entête qui une fois ouverte apporte un contenu.
Y a t il une base de départ ?
Bien sûr, rendons à César ce qui appartient à Jules. Je me suis basé sur un code de Monsieur Alvaro Trigo que l'on retrouve sur code Pen à l'URL https://codepen.io/alvarotrigo/pen/qBpBezx
qr.php
<?php
defined('_JEXEC') or die('Access deny');
class plgContentQR extends JPlugin //Concatener à "plg" le nom du groupe (ici Content) puis le nom du plugin ( que l'on trouve ds le XML ligne extension) : plg<Plugin Group><Plugin name>
{
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. Elle a été choisie par le développeur du Style
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);
}
}
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>qr.xml</filename>
</files>
</extension>