Il y a quelques semaine je vous présentais un plugin note-it.
Pas super fier de mon travail je l'avoue, j'ai remodelé l'ensemble du plugin (je l'ai réécrit). Toutes les explications sont dans mon précédent article, sauf peut être la manière de s'en servir. Il y a deux type de post-it : l'un au fond vert (paramètre green), l'autre au font jaune (paramètre yellow)
{notedoc,titre1,green}
note1 en html
{/notedoc}
{notedoc,titre2,yellow}
note2 en html
{/notedoc}
{notedoc,titre3,yellow}
note3 en html
{/notedoc}
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 (titre)"}
ceci est le libellé de ma note
{/note}
*/
$document = JFactory::getDocument();
$document->addStyleSheet('plugins/content/noteit/style.css');
$re = '/\{.*notedoc.*,(.*),(.*)}(.*){\/notedoc}/sU';
preg_match_all($re, $article->text, $matches, PREG_SET_ORDER, 0);
//Comme j'ai besoin de savoir le premier et dernier elemnt pour mettre mon premier div "les-post-it", je We en comptant
$nb = count($matches);
foreach($matches as $P)
{
//Pour chaque occurence trouvee, on remplace le truc
if ($i==0) //Si c'est le premier tour de boucle, il faut ouvrir la zonr de post it
{
$STR = '<div class="les-post-it">';
}
//Puis je cree les post-it
if($P[2]=="green")
{
$STR .= '<div class="notes-article-vert">
<div class="titre-sticky">'.$P[1].'</div>
<div class="contenu-sticky">TOTO '.$P[2].' - '.$P[3].' </div>
';//Le DIV se ferme dans i=0 ? En tout cas pas ici !
}
else
{
$STR .= '<div class="notes-article">
<div class="titre-sticky">'.$P[1].'</div>
<div class="contenu-sticky">Toto '.$P[2].' - '.$P[3].' </div>
';//Le DIV se ferme dans i=0 ? En tout cas pas ici !
}
if ($i==0) //Si c'est le premier tour de boucle, il faut ouvrir la zonr de post it
{
$STR .= '</div>';
}
$article->text = str_replace($P[0],$STR,$article->text);
//$i++;
}
//$article->text =str_replace($ligne[0],$a, $article->text);
}
}
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="note1" type="note" class="alert" label="Mode d'emploi" description='{noteit "titre" vert}ma note{/noteit} ou {noteit "titre"}ma note{/noteit}. Si vert (en minuscule!) est absent, la couleur de fond du post-it sera jaune' />
<field name="note2" type="note" class="alert" label="Exemple" description='{notedoc,titre1,green}
note1 en html
{/notedoc}'/>
</fieldset>
</fields>
</config>
</extension>
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;
}
