Aujourd'hui, je vous propose un petit plugin pour Joomla 3, que j'avais déjà développé antérieurement sous une autre forme, dont le but est d'afficher dans une fenêtre modale, un fichier PDF.
Toute la différence de ce plugin par rapport au précédent, c'est que je m'appuie sur la bibliothèque bootstrap fournie avec Joomla.
Le grand intérêt de cette bibliothèque et d'avoir sous la main des fonctionnalités toutes prêtes pour, notamment dans mon cas, afficher le contenu du fichier PDF dans une fenêtre modale.
Autrefois, je travaillais avec le composant modals de régular lab, mais je dois dire qu'intégrer un plugin dans un plugin, je ne suis pas super fan...et comme notre Joomla 3 intègre lui-même la bibliothèque bootstrap, pourquoi s'en priver ?
Utilisation
Pour afficher mon fichier PDF dans une fenêtre modaille avec montgoline, il vous suffit d'utiliser le shortcode suivant :
{modalpdf}http://www.domaine.
Lorsque vous utiliserez ce short tag, vous verrez apparaître dans votre article, le nom du fichier PDF précédé d'une petite icône de type loupe.
Je n'avais pas prévu au moment de l'intégration dans votre article de votre PDF, la possibilité direct de procéder au téléchargement, j'ai rajoputé cette fonctionnalité mais sans la tester dans de grands cas de figures !
En revanche, si votre (vieux) navigateur est dans l'impossibilité d'afficher votre fichier PDF, ce lien de téléchargement s'affiche correctement.
Si vous regardez plus précisément dans mon code, précisément à la ligne 43, vous verrez et affichage de ce lien en cas de non affichage de votre PDF par votre navigateur. Il suffirait de recopier cette ligne entre la ligne 41 et il y a une 42 par exemple de mon code, pour forcer l'affichage de ce lien hypertexte pour que l'utilisateur puisse le télécharger sans forcément pouvoir me prévisualiser. Si je ne l'ai pas fait, c'est précisément car je n'en ai pas le besoin spécifique. Mais c'est un simple copier-coller dans mon code à corriger.
modalpdf.php
<?php
defined('_JEXEC') or die('Access deny');
class plgContentModalPDF extends JPlugin
{
function onContentPrepare($content, $article, $params, $limit){
$document = JFactory::getDocument();
$document->addStyleSheet('plugins/content/modalpdf/style.css');
$re = '/{modalpdf}(.*){\/modalpdf}/m';
preg_match_all($re, $article->text, $matches, PREG_SET_ORDER, 0);
$a =explode("/",$matches[0][1]);
$index=count($a);
$i=0;
//Tout le CSS est dans bootstrap, lui-même étant intégré dans Joomla, d'où aucun appel à une bibliothèque externe!
foreach($matches as $Y)
{
$n = end(explode('/',$Y[1]));
/*********************
* Dans la ligne suivante, $a[$index-1] permet de réafficher le nnom du fichier à afficher dans la modale
* La premiere ligne permet
*/
$subst = ' <!-- Button trigger modal --><p><button type="button" class="btnmodalSEO" data-toggle="modal" data-target="#modalePDFSEO">
&#'.$this->params->get('icone').';'.$n.'</button></p>
<!-- Modal -->
<div id="modalePDFSEO" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
// <div class="modal-content modalcontentSEO">
<div class="modal-header">
<h5 id="exampleModalLabel" class="modal-title"></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body modal-body-pdf">
<p>Si le PDF ne s\'affiche pas : .
<a href="'.$Y[1].'" class="telecharger-pdf">'.$Y[1].'</a>
</p>
<object data="$1" type="application/pdf" width="100%" height="'.$this->params->get('largeur').'" data-mce-object="object">
<embed src="'.$Y[1].'" type="application/pdf" style="width:100%;height:300%"></embed>
</object>
</div>
</div>
</div>
</div>';
$article->text = str_replace($Y[0], $subst, $article->text);
$i++;
}
}
}
modalpdf.xml
<?xml version="1.0" encoding="utf-8"?>
<extension version="1.0" type="plugin" group="Content">
<name>Modale PDF</name>
<author>Sebastien LHUILLIER</author>
<creationDate>Février 2024</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><![CDATA[Ce plugin permet d'afficher un lien d'ouverture en fenetre modale d'un fichier PDF sur une page<br/>Utilisation<br/>Il faut intégrer la modale de la façon suivante : <div style="font-weight:bold;color:red;font-family:courier;">{modalpdf}__DOCUMENTS__/Seébastien.pdf{/modalpdf}</br></div> <br>Ce plugin s'appluie sur Bootsrap, bibliothèque intégrée à Joomla 3.9]]></description>
<files>
<filename plugin="modalpdf">modalpdf.php</filename>
<filename>modalpdf.xml</filename>
</files>
<config>
<fields name="params">
<fieldset name="basic">
<field name="icone" type="text" default="" label="Icone" description="Icone UTF-8 encodée HTML numérique sans # et ; - Ex : 128269" size="10" />
<field name="largeur" type="integer" default="900" label="Largeur" description="Largeur de la fenêtre" first="50" last="20000" step="50" />
</fieldset>
</fields>
</config>
</extension>style.css
.btnmodalSEO {
background-color: transparent;
font-weight: bold;
font-size: xx-small;
height: 20px;
margin: 0;
border: 0;
}
.modal-body.modal-body-pdf {
width: 900px;
margin-left: -150px;
height:800px;
}
.modal-body-pdf object embed {
height: 100%;
}
.modalcontentSEO {
width: 120%;
top: -80px;
}
#modalePDFSEO {
background-color: lemonchiffon;
}