Cette semaine, je vous présente un petit plugin que j'ai écrit, qui permet de gérer facilement dans un article Joomla, des mots et leurs définitions.
Que l'on soit bien d'accord, ce plugin n'est absolument pas fait pour gérer un petit Robert ou une encyclopédie Universalis, mais ce plugin s'inscrit notamment dans l'affichage pour un public d'un domaine bien particulier, un ensemble de définitions de mots du domaine. Prenons un exemple simple, nous pourrions sur un site d'intelligence artificielle, ne définir que des termes ayant trait à l'intelligence artificielle via mon plugin.
Fonctionnement
Pour utiliser ce plugin, vous devez dans un premier temps définir dans votre Joomla Content, un ensemble de champs texte, les fameux champs complémentaires de Joomla Content.
J'ai créé un champ qui s'appelle définitions au pluriel, qui contient 4 champs de formulaire défini de la manière suivante :
| Nom | Type | Filtre |
| def_acronyme | texte | Brut |
| def_mot | texte | safe HTML |
| def_definition | editeur | safe HTML |
| def_notes | editeur | safe HTML |
Comme mon plugin s'appuie sur le nom de ses champs, vous devez bien entendu et respecter la définition de ces noms de champs si vous utilisez cet outil.
Une fois l'ensemble des champs d'un article définis (car je pars du principe que l'article est un article de définition donc il existe qu'un seul article dans mon cas pour cette fonctionnalité), j'ai opté par l'utilisation d'une balise de type shortcode qui permet d'intégrer l'ensemble de vos définitions dans le dit article. Cette balise est
{def}
On est bien d'accord que l'utilisation d'une balise dans un seul article n'a que pour d'afficher des définitions est discutable. Toutefois, en terme de programmation, cela permet d'être sûr d'afficher les bons éléments à l'endroit où la balise existe. D'autre part, cette façon de faire (utiliser une balise dans nos propres articles qui contient des champs personnalisés de définition) vous permet d'avoir du texte ou des images ou d'autres éléments au cœur même de votre article qui affiche vos définitions. Ce ne sera pas mon cas, mais cela reste possible.
J'ai mis en dur le titre du module pour des raisons de rapidité mais bien entendu vous pouvez l'intégrer depuis la console d'admin de l'outil.
Style
Comme à mon habitude, vous savez je pense que si vous suivez mes pérégrinations sur mon site, que je suis absolument nul en infographie. Ce n'est pas mon métier. C'est la raison pour lquelle encore une fois, j'ai créé un fichier CSS de style à part dans lequel vous pourrez à votre guise personnaliser le rendu. (et si vous voulez partager vos personnalisation ici, contactze moi)
Rendons à César ce qui appartient à Jules
Comme je suis donc pas très bon en infographie, ce travail est basé sur le travail de Frederic Allen que vous pourrez retrouver sous son compte codepen.io http://www.codepen.io/frederickallen/pen/NZMEMw
Je n'aurais pas la prétention de dire que j'ai amélioré son code, mais je dois dire que j'ai adapté certaines présentations. A vous de faire de même à partir de ce plugin
definitions.php
<?php
defined('_JEXEC') or die('Access deny');
class plgContentDefinitions extends JPlugin
{
function onContentPrepare($content, $article, $params, $limit){
$re = '{def}';
$doc = JFactory::getDocument();
$doc->addStyleSheet('plugins/content/definitions/style.css');
$i=0;
JLoader::register('FieldsHelper', JPATH_ADMINISTRATOR . '/components/com_fields/helpers/fields.php');
$customFields = FieldsHelper::getFields('com_users.user', JFactory::getUser(), true);
$a = FieldsHelper::getFields('com_content.article', $article);
$t=array();
$t = (array)json_decode($a[2]->value);
$chaine = '<div class="definitions"><div class="titre">Définitions en lien avec le matériel</div>';
foreach ($t as $maligne){
$chaine .= '<details>';
$chaine .= '<summary>'.$maligne->def_mot.'<acronym>'.$maligne->def_acronyme.'</acronym></summary>';
$chaine .= '<p>';
$chaine .= $maligne->def_definition;
$chaine .= '</p>';
$chaine .= '</details>';
}
$chaine .='</div>';
$i++;
$article->text = str_replace($re, $chaine, $article->text);
}
}
definitions.xml
<?xml version="1.0" encoding="utf-8"?>
<extension version="3.1" type="plugin" group="Content">
<name>Définitions</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>Afficher les définitions du matériel</description>
<files>
<filename plugin="definitions">definitions.php</filename>
<filename>definitions.xml</filename>
<filename>style.css</filename>
</files>
</extension>style.css
.definitions {
padding-top: 4rem;
width: 100%;
margin: auto;
}
.definitions .titre {
font-size: 2rem;
font-weight: 500;
text-align:center;
color:red;
font-family:cursive;
}
.definitions details[open] summary ~ * {
animation: open 0.3s ease-in-out;
}
@keyframes open {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.definitions details summary::-webkit-details-marker {
display: none;
}
.definitions details summary {
width: 100%;
padding: 0.5rem 0;
border-top: 1px solid black;
position: relative;
cursor: pointer;
font-size: 1.25rem;
font-weight: 300;
list-style: none;
}
.definitions details summary:after {
content: "+";
color: black;
position: absolute;
font-size: 1.75rem;
line-height: 0;
margin-top: 0.75rem;
right: 0;
font-weight: 200;
transform-origin: center;
transition: 250ms linear;
}
.definitions details[open] summary:after {
transform: rotate(45deg);
font-size: 2rem;
color:red;
font-weight:bolder;
background-color:red;
}
.definitions details summary {
outline: 0;
}
.definitions details acronym {
color:blue;
}
.definitions details acronym::before {
color:blue;
content:" (";
}
.definitions details acronym::after {
color:blue;
content:")";
}
.definitions details p {
font-size: 0.95rem;
margin: 0 0 1rem;
padding-top: 1rem;
}