pbpBB 3 Mod: intagration of pedigrees and virtual mating pages in phbBB3 forums
Two new bbCodes: one for the pedigree, another for for virtual mating pages.
1) Add BBCodes
1.1 Pedigree pages
In the administration control panel, tab "Posting", then Messages, BBCodes, "Add a new BBCode".
BBCode use:
[pedigree]{NUMBER}[/pedigree]
HTML replacement:<script type="text/javascript">// <![CDATA[Help line:
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>
Insert a pedigree in the message: [pedigree]numerical identifier[/pedigree]
1.2 Virtual mating page
In the administration control panel, tab "Posting", then Messages, BBCodes, "Add a new BBCode".
BBCode use:
[portee]{URL}[/portee]
HTML replacement:
<script type="text/javascript">// <![CDATA[Help line:
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>
Insert a virtual mating page: [portee]url_virtual_mating[/portee]
2) CSS style
Add at the end of the file stylesheet.css:@import url("pedigree.css");
Create a file pedigree.css in the directory of the stylesheet.css file.
/* Pedigree CSS */In the administration control pannel, go to
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;
}
Administration Control Panel / Styles Tab
For each of the three tabs Template, Theme, Imageset apply "Refresh".
3) Create the intermediate loader file
Create a file in the root directory 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);
?>
If there are problems with accented characters, change EMBED=UTF-8 by EMBED=true
Why this file? The XMLHttpRequest object in javascript can't load data on another domain and the database of pedigrees is on another domain. So it requires this intermediate file in php to load the pedigree page from the pedigree database server.
Notes: verify that php is configured to open files on the Internet (see php documentation of fopen function). It also requires that the domain name resolution is enabled.
4) Limitations
The name of the component that contains the virtual mating page is unique, so it can be only one scope on a page.
Similarly, the javascript is loaded and each BBCode can be found duplicated on the page.
This limitation does not apply to pedigrees.
5) User manual
5.1 Pedigree
To insert a pedigree in a post:
[pedigree]numerical identifier[/pedigree]
The numarical identifier is in the url of the pedigree, in the 'id' field. It is also in the left column 'id' in a search page. For example, for the Negus' pedigree, the url is:
http://pedigree.setter-anglais.fr/genealogie/arbre.php?id=18&fn=pedigree&rq=NEGUS
Numerical identifier is 18. To insert Negus' pedigree in a post, the code is:
[pedigree]18[/pedigree]
5.2 Virtual mating
To insert a virtual mating page in a post:
[portee]url_virtual_mating_page[/portee]Prepare the virtual mating page on setter-anglais.fr. Copy the "link" data and insert it in the BBCode [portee].
Sample:
[portee]http://pedigree.setter-anglais.fr/genealogie/portee_virtuelle.php?IDPERE=15900&IDMERE=1139&DESCRIPTION=[/portee]
5.3 Release and updates
Version 2, May 2012.
The BBCode for virtual mating can display multiple virtual mating in a single page. Update is transparent for users (no modification of syntax and user data).
Update: simply modify part "1.2 Virtual mating page" (HTML replacement code in the bbcode).