Mod pbpBB 3 : intégration de pédigrées et de portées dans les forums phpBB 3
Deux nouveaux BBCodes : l'un pour les pédigrées, l'autre pour les portées.
1) Ajout des BBCodes
1.1 Page de pédigrée
Dans le panneau d'administration, onglet "Posting", puis Messages, BBCodes, "Add a new BBCode".
BBCode usage :
[pedigree]{NUMBER}[/pedigree]
HTML replacement :
<script type="text/javascript">// <![CDATA[
var htmlData{NUMBER};
function updateDiv{NUMBER}() {
if (htmlData{NUMBER}.readyState != 4)
return;
var div = document.getElementById("divPedigree{NUMBER}");
if ( htmlData{NUMBER}.readyState !== 4 ) return;
if ( htmlData{NUMBER}.status !== 200 ) {
alert("Unable to parse data!\nPlease ensure that the file has a valid path.");
}
div.innerHTML = htmlData{NUMBER}.responseText;
}
function loadHTMLdata{NUMBER}( url ) {
htmlData{NUMBER} = null;
var ie = navigator.userAgent.toLowerCase().indexOf("msie");
if ( window.XMLHttpRequest ) {
htmlData{NUMBER} = new XMLHttpRequest();
}
else if (( ie !== -1 ) ) {
try {
htmlData{NUMBER} = new ActiveXObject("Msxml2.XMLHTTP");
}
catch( e ) {
htmlData{NUMBER} = new XMLHttpRequest();
}
}
if ( htmlData{NUMBER} !== null ) {
htmlData{NUMBER}.onreadystatechange = updateDiv{NUMBER};
htmlData{NUMBER}.open("GET", url, true);
htmlData{NUMBER}.send( null );
} else {
alert("Your browser do not support AJAX request!");
}
}
// ]]></script>
<div id="divPedigree{NUMBER}">
<p>Chargement...</p>
</div>
<script type="text/javascript">// <![CDATA[
loadHTMLdata{NUMBER}('/pedigree.php?RQ=http://pedigree.setter-anglais.fr/genealogie/arbre.php?id={NUMBER}');
// ]]></script>
Help line :
Insère un pédigree dans le message : [pedigree]identifiant numérique[/pedigree]
1.2 Page de portée
Dans le panneau d'administration, onglet "Posting", puis Messages, BBCodes, "Add a new BBCode".
BBCode usage :
[portee]{URL}[/portee]
HTML replacement :
<script type="text/javascript">// <![CDATA[
var idPortee;
if (idPortee == null)
idPortee = 0;
idPortee++;
document.write('<div id="divPortee' + idPortee + '"><p>Chargement...</p></div>\r\n');
function updateDivPortee(http, divName) {
if (http.readyState != 4)
return;
if ( http.status !== 200 ) {
var div = document.getElementById(divName);
div.innerHTML = "Unable to parse data!\nPlease ensure that the file has a valid path.";
return;
}
var div = document.getElementById(divName);
div.innerHTML = http.responseText;
}
function loadHTMLdataPortee( url ) {
divName = 'divPortee' + idPortee;
loadHTMLdataPorteeDiv( divName, url );
} function loadHTMLdataPorteeDiv( divName, url ) {
var htmlDataPortee = null;
url = encodeURIComponent(url);
url = url.replace(/%26amp%3B/g,'%26');
url = '/pedigree.php?RQ=' + url;
var ie = navigator.userAgent.toLowerCase().indexOf("msie");
if ( window.XMLHttpRequest ) {
htmlDataPortee = new XMLHttpRequest();
}
else if (( ie !== -1 ) ) {
try {
htmlDataPortee = new ActiveXObject("Msxml2.XMLHTTP");
}
catch( e ) {
htmlDataPortee = new XMLHttpRequest();
}
} if ( htmlDataPortee !== null ) {
htmlDataPortee.onreadystatechange = function(){if(htmlDataPortee.readyState==4){updateDivPortee(htmlDataPortee,divName)}};
htmlDataPortee.open("GET", url, true);
htmlDataPortee.send( null );
} else {
var div = document.getElementById(divName);
div.innerHTML = "Your browser do not support AJAX request!";
}
} loadHTMLdataPortee('{URL}');
// ]]></script>
Help line :
Insère une portée la page : [portee]url_portee_virtuelle[/portee]
Note : le javascript du plugin Joomla ne fonctionne pas, j'ai enlevé quelques lignes. A vérifier que le fonctionnement est correct sous IE.
2) Style CSS
Ajouter à la fin du fichier "stylesheet.css" (ou "style.css") du thème utilisé :
@import url("pedigree.css");
Créer le fichier pedigree.css dans le répertoire de stylesheet.css
/* Pedigree CSS */
table.TabGene
{
border: 1px solid #660000;
width: 100%;
}
td.TabGene
{
border: 1px solid #808080;
padding: 4px;
border-spacing: 10px;
font-family: helvetica, sans-serif;
font-size:inherit;
color: #000000;
}
.ImageArbre {
margin:0px 0px 0px 8px;
}
img.ImageArbre {
border:1px solid #fff;
}
.PhotoCopyright
{
font-size:80%;
font-style:italic;
}
.Diaporama
{
}
div.Diaporama, div .Diaporama {
vertical-align:middle;
text-align:center;
}
.Diaporama img, img.Diaporama {
vertical-align:middle;
background-color: #fff;
border: 1px solid #660000;
padding: 4px;
margin: 4px 4px 4px 4px;
}
.Diaporama
{
}
div.Diaporama, div .Diaporama {
vertical-align:middle;
text-align:center;
}
.Diaporama img, img.Diaporama {
vertical-align:middle;
background-color: #fff;
border: 1px solid #a9a9a9;
padding: 4px;
margin: 4px 4px 4px 4px;
}
.Diaporama2
{
display:block;
}
div.Diaporama2 {
vertical-align:middle;
text-align:center;
}
ul.Diaporama2 {
padding: 0;
margin: 0;
}
img.Diaporama2 {
vertical-align:middle;
background-color: #fff;
border: 1px solid #a9a9a9;
padding: 4px;
xmargin: 4px 4px 4px 4px;
margin: 0px 0px 0px -4px;
}
.DiaporamaLegende2 {
font-size:90%;
overflow:hidden;
text-wrap:normal;
padding:1px 5px 1px 5px;
max-width:120px;
height:15px;
}
.DiaporamaLegendeInfo2 {
font-size:90%;
overflow:hidden;
text-wrap:normal;
padding:1px 5px 1px 25px;
max-width:120px;
height:15px;
background-image:url(../images/i_info.png);
background-repeat:no-repeat;
text-align:left;
}
.DiaporamaCase2 {
display:inline-block;
padding: 5px 12px 5px 12px;
margin: 0;
max-width:120px;
}
.DiaporamaCase2 a {
text-decoration:none;
color:#666633;
}
.Diaporama2 li {
display: inline;
list-style:none;
}
Dans le panneau d'administration, aller dans
Administration Control Panel / Styles Tab
Pour chacun des 3 sous-onglets Template, Theme, Imageset appliquer l'action "Refresh". Nb : il semble que seul "Theme" soit utile.
3) Création du fichier de chargement intermédiaire.
A la racine du site, créer le fichier pedigree.php
<?
$Cmd = $_REQUEST['RQ'];
$T = parse_url($Cmd);
$Host = "http://pedigree.setter-anglais.fr";
$Url = $Host . $T['path'] . '?' . $T['query'] . '&' . 'HOST=' . $Host . '&EMBED=UTF-8';
// envoie les bons en-têtes
$ContentType = "text/html";
header("Content-Type: $ContentType");
$text = file_get_contents($Url);
//$text = mb_convert_encoding($text, "UTF-8", "ISO-8859-1");
echo($text);
?>
Si il y a des problèmes de caractères accentués, changer EMBED=UTF-8 par EMBED=true
Pourquoi ce fichier ? L'objet XMLHttpRequest de javascript de sait pas aller chercher des données sur un autre domaine et la base de données de pédigrées est sur un autre domaine que le forum. On passe donc par ce fichier intermédiaire en php qui va se charger de lire le pédigrée sur la base de données.
Notes : il faut que le php soit configuré pour pouvoir ouvrir des fichiers sur internet (voir la documentation php de la fonction fopen). Il faut aussi que la résolution des noms de domaine soit activée.
4) Limitations
Le nom du composant qui contient la portée est unique, il ne peut donc y avoir qu'une seule portée sur une page.
De même, le javascript est chargé à chaque BBCode et peut donc se retrouver dupliqué sur la page.
Cette limitation ne s'applique pas aux pédigrées.
5) Mode d'emploi
5.1 Page de pédigrée
Le BBCode suivant permet d'insérer la page complète de la généalogie d'un chien dans un message.
Le code à insérer est de la forme :
[pedigree]identifiant_numérique[/pedigree]
L'identifiant numérique se trouve dans l'url de la page du pédigrée, dans le champ 'id'. On le trouve aussi après une recherche dans la colone de gauche appelée 'id'. Par exemple pour le pédigrée de Negus, l'url est la suivante :
http://pedigree.setter-anglais.fr/genealogie/arbre.php?id=18&fn=pedigree&rq=NEGUS
L'identifiant numérique est 18. L’insertion du pédigrée de Negus dans un message du forum se fait donc par
[pedigree]18[/pedigree]
5.2 Portée virtuelle
Le BBCode suivant permet d'insérer la page d'une portée virtuelle dans un message.
Le code à insérer est de la forme :
[portee]url_portee[/portee]
Préparer la portée virtuelle sur le site setter-anglais.fr. Récupérer la donnée "Lien" et la mettre en paramètre du BBCode [portee].
Exemple :
[portee]http://pedigree.setter-anglais.fr/genealogie/portee_virtuelle.php?IDPERE=15900&IDMERE=1139&DESCRIPTION=[/portee]
5.3 Mises à jour et versions
Version 3, janvier 2016.
Mise à jour du fichier pedigree.css suite à une modification du site.
Version 2, mai 2012.
Le BBCode des portées virtuelles permet d'afficher plusieurs portées virtuelles sur une même page. La mise à jour est transparente (pas de changement de syntaxe, pas de modification nécessaire des données).
Mise à jour : la modification porte uniquement sur le paragraphe "1.2 Page de portée" (suivre la procédure d'installation).