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 ?
Quel avantage par rapport à un module de type accordéon ?
Y a t il une base de départ ?
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>
