Ce petit plugin sur lequel je travaille depuis plusieurs semaines, de manière très épisodique car je n'ai pas le temps, m'a désormais l'air d'etre fonctionnel. Vous avez peut-être remarqué sur mon suivi github, que j'avais déjà eu des commit sur ce petit plugin mais son fonctionnement n'était que parcellaire.
Son fonctionnement permet d'afficher, sur un article donné, son "état fonctionnel" parmi une liste prédéfinie d'états dans le plugin. Ce plugin est est pensée dans un but d'être réutilisé notamment avec le fabuleux outil s de template jumia de Regular Lab : content templater.
Rappel : un code d'état fonctionnel ?
Pour ceux qui l'ignorent, mais surtout pour celles et ceux qui appellent ca autrement, j'appelle un "code d'état fonctionnel" un statut d'une élément parmi une liste d'état par laquelle un élément est forcément obligée de passée. Par exemple, si je fait une analogie avec un Homme, les codes d'états fonctionnels pourraient être : bébé, enfant, adolescent, adulescent, adultes, 3e age, 4e age. Un homme passe forcément par chacun de ses états au cours de sa vie.
Principe de fonctionnement
Ce plugin permet d'être intégré au sein d'un article ou d'un module, dans lequel vous allez spécifier l'ensemble des codes fonctionnels d'un état particulier, et mon outil va vous afficher les étapes précédents déjà terminées, l'état en cours, et les états à venir. En d'autres termes cela s'appelle un workflow. D'ailleurs Joomla 4 intégre ce fonctionnement, ce qui peut être tres partique, par exemple, si vous mettez en place pour un article donné, un rédacteur, un lecteur, un validateur et un relecteur par exemple. Tant que le relecteur n'a pas apposé sa validation, votre article ne peut être publié.
Toutefois, nous n'avons encore pas migrer en Joomla 4 et cela ne se passera pas pour le moment.
Fonctionnement
Afin de ne pas multiplier les modules dans Joomla, je suis donc parti sur un plugin à développer. Dans votre article ou votre module qui comportera le tag de ce plugin, à l'endroit où vous souhaitez intégrer l'affichage de votre workflow, vous devez spécifier l'intégration de ce workflow entre balise {cef} et {/cef}.
Et si vous vous demandez à quoi se réfère cet acronyme, c'est simplement l'acronyme de code d'état fonctionnel.
À l'endroit où vous souhaitez afficher votre workflow, vous devez donc entre ces balises ces virgule spécifier l'ensemble des état de votre workflow. Afin de spécifier l'état actuel dans lequel se trouve votre élément, vous n'avez qu'à encadrer l'État avec des crochets. Vous obtiendrez donc un code de ce type :
{cef}code1|code2|code3|[code4]|code5|code7|code7|code8{/cef}
Ecplications :
- les balises {cef} et {/cef} déterminent l'enseble du système d'affichage de l'ensemble des codes. C'est pour cette raison que je préconise l'utilisation de content templater pour "coller" un modele d'utilisation de mon système dans vos articles
- Tous l:es codes d'états fonctionnels sont affichés les un derriere les autres, dans l'ordre de votre workflow
- L'état fonctionnel dans lequel se trouve votre élément est entouré de "crochets droits" [ et ]
Si vous souhaitez simplement changer de code d'état fonctionnel dans votre élément, vous n'avez qu'à simplement corriger les crochets autour du bon code d'état fonctionnel que vous souhaitez afficher. Tout le reste est "calculé" automatiquement.
Bien entendu, si vous compter utiliser ce plugin a plusieurs endroits dans votre site, vous pouvez utiliser ce plugin dans un module affectable où vous souhaitez. Personnellement, mon cas de figure est d'afficher l'état d'unarticle donné, donc j'intègre le code de mon plugin dans mes articles.
Résultat graphique
J'ai fait très simple et reste ouver à vos personnalisétion du CSS que je vous fournis. Je ne suis pas infographiste est suis particulièrement nul dans le domaine, le résultat est donc très simple. Vous remarquerez que les étatt passés sont en gris, l'état courant en rouge, et les prochaines étapes en bleu pâle à peine visibles. C'est volontaire, charge à vous de styliser votre (mon !) CSS
Personnalisation
Je n'ai pas prévu dans l'administration du système, et la préparation de champs permettant de spécifier le titre et les explications de mon workflow. Ceci est codé en dur. Je sais ce n'est pas bien mais cela me permet d'aller beaucoup plus vite dans le projet. Charge à vous, dans le fichier cdeetaftl.php de corriger le titre et les éventuels explications que vous souhaitez afficher à votre utilisateur. Et si vous faites votre propre CSS à partir de ce projet, contactez-moi, ce sera avec plaisir que je rajouterai à cet article vos crations graphiques !
cdeetatftl.php
<?php
defined('_JEXEC') or die('Access deny');
class plgContentCdeetatftl 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/cdeetatftl/stylecdeetatftl.css');
$re = '/{cef}(|.*){\/cef}/m';
preg_match_all($re, $article->text, $matches, PREG_SET_ORDER, 0);
$b = explode('|',$matches[0][1]);
$a = '<div class="container-fluid">';
$a .= '<div class="titre">Etapes du projet</div>';
$a .= '<div class="explications">Vous trouverez ici l\'étape d\'avancement du projet. En passant la souris sur la dénomination de l\'étape, vous saurez à quoi elle se réfère</div>';
$a .= '<ul class="list-unstyled multi-steps">';
$pass = 0;//bool
foreach ($b as $ligne)
{
if ((substr($ligne,-1,1)=="]") && (substr($ligne,0,1)=="["))
{
if ($c=count($b)) //pour ne pas afficher le dernier ">"
{
$a .= "<li class=\"is-active\">".substr($ligne,1,-1) ."<span class=\"separateur\" id=\"separateur\"> > </span></li>\r\n";
}
else
{
$a .= "<li class=\"is-active\">".substr($ligne,1,-1) ."</li>\r\n";
}
$pass=1;
}
else
{
if ($pass == 0)
{
if ($c=count($b)) //pour ne pas afficher le dernier ">"
{
$a .= "<li class=\"avant\">".$ligne."<span class=\"separateur\" id=\"separateur-".$ligne."\"> > </span></li>\r\n";
}
else
{
$a .= "<li class=\"avant\">".$ligne."<span class=\"separateur\" id=\"separateur-".$ligne."\"> > </span></li>\r\n";
}
}
else
{
if ($c=count($b)) //pour ne pas afficher le dernier ">"
{
$a .= "<li class=\"apres\">".$ligne."<span class=\"separateur\" id=\"separateur-".$ligne."\"> > </span></li>\r\n";
}
else
{
$a .= "<li class=\"apres\">".$ligne."</li>\r\n";
}
}
}
}
$a .= "</ul>";
$a .= "</div>";
$article->text = preg_replace($re, $a, $article->text);
}
}
?>cdeetatftl.xml
<?xml version="1.0" encoding="utf-8"?>
<extension version="3.1" type="plugin" group="Content">
<name>Code d'état fonctionnel</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 les stats des meilleurs articles</description>
<files>
<filename plugin="cdeetatftl">cdeetatftl.php</filename>
<filename>cdeetatftl.xml</filename>
<filename>style.css</filename>
</files>
<config>
<fields name="params">
<fieldset name="basic">
<field name="separateur" type="text" default="" label="Caractere séparateur" description="" size="1" />
</fieldset>
</fields>
</config>
</extension>style.css
.multi-steps li {
display: inline;
}
.multi-steps .is-active {
color: red;
font-weight: bolder;
}
.multi-steps .is-active .separateur{
color: black;
font-weight:normal;
}
.multi-steps .avant {
color: gray;
}
.multi-steps .apres {
color: lightblue;
}
.multi-steps #separateur-8{ /*Pour masquer le dernier ">" */
display:none;
}