Aujourd'hui, je vous présente un petit plugin que j'ai écrit, sur la base d'un code trouvé sur internet, dont le but est de présenter les fameux post-it que nous collons partout à droite et à gauche dans la vraie vie.
Afin que nous parlions de la même chose, notez que j'ai utilisé le terme note-it dans le nom de mon plugin, mais nous parlons bien d'un post-it.
Mon besoin "métier"
Dans le cadre de la gestion de ma documentation professionnelle sur notre CMS Joomla, une fiche qui recense l'ensemble de liens vers des fichiers documentaires PDF. Ces articles Joomla peuvent posséder des informations non documentaires, devant toutefois être transmises à nos lecteurs. Par exemple, si nous regardons la fiche d'un élément dénommé A, mais que cet élément a des points communs avec un autre élément dénommé B, il peut alors être mentionné au lecteur cette relation entre deux fiche (sans aucune contrainte d'intégrité relationnelle, ce n'est qu'un exemple).
Ces post-it peuvent aussi servir à tout autre note complémentaire à nos fiches, pour le moment, nous ne voyons que ce genre d'application
Principe de fonctionnement
Le principe de fonctionnement de mon plugin repose sur l'utilisation d'un code court appelé aussi shortcode, que nous allons pouvoir placer, dans mon cas, dans un article ou éventuellement dans un module de Joomla, dans lequel nous allons pouvoir spécifier deux informations techniques ainsi qu'une 3e information de contenu relatives au post-it. Ainsi une note va prendre le formalisme suivant :
{note "Libelle de la note 1" vert} ceci est le libellé de ma note 1 {/note} Vous remarquerez que nous pouvons alors placer n'importe quelle note à n'importe quel endroit dans un article ou dans un module, dans notre cas, nous allons les intégrer dans nos articles de Joomla content, dans un <div> qui est spécifique à cette utilisation.
<div>{note "Libelle de la note 1" vert} ceci est le luibellé de ma note 1 {/note} {note "Libelle de la note 2" jaune} ceci est le luibellé de ma note 2 {/note} {note "Libelle de la note 3" jaune} ceci est le luibellé de ma note 3 {/note}</div>Mon plugin va parcourir l'article à la recherche du tag dénommé {note}. Dans ce tag, deux paramètres peuvent être présents.
Les paramètres du plugin
Lors de l'utilisation de ce plugin au sein d'un module ou d'un article, vous pouvez spécifier dans le code 2 paramètres:
- le premier paramètre correspond au titre du post-it (dans les crocherts entourés de doubles cotes obliagtoirement)
- le deuxième paramètre correspond à la couleur prédéfinie du post-it. Nous avons défini uniquement deux couleurs, vert et jaune, deux chaînes de caractère à passer en paramètre sans double cote.
Comme dans notre cas, ce contenu sera uniquement au format textuel ou image, je n'intègre pas d'objets complexes comme des fichiers encodés en base 64 ou autre information de ce type. Je n'intègre uniquement ici du texte avec éventuellement un petit peu de code HTML et CSS inline.
Voilà, rien de bien compliqué, vous pouvez donc récupérer mon plugin pour le réutiliser à votre guise. N'oubliez pas le fichier CSS, c'est vraiment lui qui donne le formalisme et impression du post-it, et je ne peux que vous encourager à le retoucher de manière plus détaillée. Rendons à César ce qui appartient à Jules, ce style du post-it a été trouvé sur le site freefrontend de mémoire, cela fait déjà plusieurs mois. En effet, au départ j'utilisais mes post-it sous la forme de copier-coller de code html, ce qui va me poser problème pour récupérer l'ensemble des notes de l'ensemble des articles. c'est la raison pour laquelle je suis passé par un plugin, ce dernier de stockant dans un article uniquement de l'information dans un style Json simple. En effet, depuis quelque temps, je travaille sur un gros proojet mais entrecoupé de pas mal d'interruptions non volontaires de ma part. Je vous présenterai ce travail lorsqu'il sera arrivé à son terne
noteit.xml
<?xml version="1.0" encoding="utf-8"?>
<extension version="1.0" type="plugin" group="Content">
<name>Note it</name>
<author>Sebastien LHUILLIER</author>
<creationDate>Octobre 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>Ce plugin génére des post it</description>
<files>
<filename plugin="noteit">noteit.php</filename>
<filename>noteit.xml</filename>
<filename>style.css</filename>
</files>
<config>
<fields name="params">
<fieldset name="basic">
<field name="note21" type="note" class="alert" label="Mode d'emploi" description='{noteit "titre" vert}ma note{/noteit} ou {noteit "titre" jaune}ma note{/noteit}' />
</fieldset>
</fields>
</config>
</extension>noteit.php
<?php
defined('_JEXEC') or die('Access deny');
class plgContentNoteIt extends JPlugin
{
function onContentPrepare($content, $article, $params, $limit){
/*UTILISATION :
{note "Libelle de la note"}
ceci est le libellé de ma note
{/note}
*/
$document = JFactory::getDocument();
$document->addStyleSheet('plugins/content/noteit/style.css');
$re = '/{note.*"(.*)" (.*)}(.*){\/note}/Us';
preg_match_all($re, $article->text, $matches, PREG_SET_ORDER, 0);
$a='';
$subst = '<div class="les-post-it">TOY'; //remplacement temporaire par une chaine
foreach($matches as $ligne){
if ($ligne[2] == "vert")
{
$couleur="notes-article-vert";
}
else
{
$couleur="notes-article";
};
$a = '<div class="notes-articles">
<div class="'.$couleur.'">
<div class="titre-sticky">'.$ligne[1].'</div>
<div class="contenu-sticky">'.$ligne[3].' - '.$ligne[2].'</div>
</div>
</div>';
$article->text =str_replace($ligne[0],$a, $article->text);
}
}
}style.css
.notes-article {
width:600px;
height:240px;
position:relative;
background:#ffa;
overflow:hidden;
margin: .9%;
padding:20px;
border-radius:0 0 0 30px/45px;
box-shadow:inset 0 -40px 40px rgba(0,0,0,0.2),inset 0 25px 10px rgba(0,0,0,0.2),0 5px 6px 5px rgba(0,0,0,0.2));
font-family:'Permanent Marker', cursive;
line-height:1.7em;
font-size:14px;
color:#130deb;
box-shadow: 2px 2px 2px 1px rgb(0, 0, 0);
float:left;
}
.notes-article li{
cursor:pointer;
}
.notes-article:before{
content:"";
display:block;
position:absolute;
width:20px;
height:25px;
background:#ffa;
box-shadow:
3px -2px 10px rgba(0,0,0,0.2),
inset 15px -15px 15px rgba(0,0,0,0.3);
left:0;
bottom:0;
z-index:2;
transform:skewX(25deg);
}
.notes-article:after{
/* content:""; *Masque ou depasque le souligné en bas (trait de crayon"**/
display:block;
position:absolute;
width:75%;
height:20px;
border-top: 3px solid #130d6b;
border-radius:50%;
bottom:0px;
left:10%;
}
.notes-article div{
font-size:25px;
position:relative;
}
.notes-article .contenu-sticky {
font-size: 120%;
margin-top: 3%;
color: red;
font-size-adjust: initial;
font-size: ;
overflow-y: scroll;
height: 90%;
padding: 5px;
scrollbar-color: yellow #ffa;
text-align:justify;
}
.notes-article .titre-sticky {
background-color: yellow;
margin-top: -17px;
padding: 5px;
margin-left: -17px;
margin-right: -18px;
width: 120%;
text-align: center;
color: black;
}
.notes-article-vert {
width:600px;
height:240px;
position:relative;
background: #ecffdc;
overflow:hidden;
margin: .9%;
padding:20px;
border-radius:0 0 0 30px/45px;
box-shadow:
inset 0 -40px 40px rgba(0,0,0,0.2),
inset 0 25px 10px rgba(0,0,0,0.2),
0 5px 6px 5px rgba(0,0,0,0.2));
font-family:'Permanent Marker', cursive;
line-height:1.7em;
font-size:14px;
color:#130deb;
box-shadow: 2px 2px 2px 1px rgb(0, 0, 0);
float:left;
}
.notes-article-vert li{
cursor:pointer;
}
.notes-article-vert:before{
content:"";
display:block;
position:absolute;
width:20px;
height:25px;
background:lightgreen;
box-shadow:
3px -2px 10px rgba(0,0,0,0.2),
inset 15px -15px 15px rgba(0,0,0,0.3);
left:0;
bottom:0;
z-index:2;
transform:skewX(25deg);
}
.notes-article-vert:after{
display:block;
position:absolute;
width:75%;
height:20px;
border-top: 3px solid #130d6b;
border-radius:50%;
bottom:0px;
left:10%;
}
.notes-article-vert div{
font-size:25px;
position:relative;
}
.notes-article-vert .contenu-sticky {
font-size: 120%;
margin-top: 3%;
color: red;
font-size-adjust: initial;
/*font-size: ;*/
overflow-y: scroll;
height: 90%;
padding: 5px;
text-align:justify;
scrollbar-color: yellow #ecffdc;
}
.notes-article-vert .titre-sticky {
background-color: green;
margin-top: -17px;
padding: 5px;
margin-left: -17px;
margin-right: -18px;
width: 120%;
text-align: center;
color: white;
}