Utilisateur:Pinocchio/infographie.js
De BoyWiki
Note : après avoir publié vos modifications, il se peut que vous deviez forcer le rechargement complet du cache de votre navigateur pour voir les changements.
- Firefox / Safari : maintenez la touche Maj (Shift) en cliquant sur le bouton Actualiser ou appuyez sur Ctrl + F5 ou Ctrl + R (⌘ + R sur un Mac).
- Google Chrome : appuyez sur Ctrl + Maj + R (⌘ + Shift + R sur un Mac).
- Internet Explorer / Edge : maintenez la touche Ctrl en cliquant sur le bouton Actualiser ou pressez Ctrl + F5.
- Opera : appuyez sur Ctrl + F5.
/*
* Création d'une représentation infographique (une seule par page) dans une page article si présence
* d'un conteneur (div) adéquat après lecture de la configuration/description spécifiée.
*/
/* Init infographie */
var infographicadjust = new Array();
function infographic_init() {
var infdsc = document.getElementById('infographic-json-descr');
if (!infdsc) return;
// lecture description
var buf = infdsc.innerHTML;
// remplace car. interdit (doubles quotes) et filtrage
buf = buf.replace(/"/g, '‴');
buf = buf.replace(/∥/g, '"');
buf = buf.replace(/<p>|<P>|<\/p>|<\/P>/g, '');
infdsc.style.display = 'block';
var def = JSON.parse(buf);
infdsc.style.display = 'none';
delete (buf);
// chargmt image de fond et suite differee
if (!def.map || !def.map[0].src || !def.map[0].width) return;
var imgfond = new Image();
imgfond.onload = function() {infographic_init2(def,imgfond);}
imgfond.src = def.map[0].src;
}
/* Creation infographie (suite apres chargmt img) */
function infographic_init2(def,imgfond) {
var infgrf = document.getElementById('infographic');
var infwin = document.getElementById('infographic-win');
var infimg = document.getElementById('infographic-img');
if (!infgrf) return;
// param a conserver
infographicadjust['def'] = new Array();
infographicadjust['def']['ow'] = imgfond.width;
infographicadjust['def']['oh'] = imgfond.height;
infographicadjust['def']['dw'] = parseInt(def.map[0].width);
infographicadjust['def']['dh'] = parseInt(def.map[0].height);
infographicadjust['lst'] = new Array();
infographicadjust['ftz'] = new Array();
// auto width
if (def.map[0].width == 'auto') {
infographicadjust['def']['dw'] = infgrf.offsetWidth - 40;
infographicadjust['def']['dh'] = infographicadjust['def']['dw'] / imgfond.width * imgfond.height;
}
// dim cadre
infgrf.style.width = infographicadjust['def']['dw']+'px';
infwin.style.width = infographicadjust['def']['dw']+'px';
infwin.style.height = infographicadjust['def']['dh']+'px';
// aff image de fond
infimg.innerHTML = '<img id="infmap" src="'+imgfond.src+'" />';
infimg.style.width = infographicadjust['def']['dw']+'px';
infimg.style.height = infographicadjust['def']['dh']+'px';
document.getElementById('infmap').style.width = infographicadjust['def']['dw']+'px';
document.getElementById('infmap').style.height = infographicadjust['def']['dh']+'px';
/* bouton zoom */
if (infographicadjust['def']['ow'] / infographicadjust['def']['dw'] > 1.1) {
var btz = document.createElement('div');
btz.innerHTML = '<button id="infbtz" onclick="infographic_change_scale(this)">Zoom</button>';
infimg.appendChild(btz);
}
/* aires sensibles */
var n = 0;
while (def.areas && def.areas[n]) {
// transforme coords en %
if (def.areas[n].x1.match(/px$/)) {
var posx1 = 100 * parseInt(def.areas[n].x1) / imgfond.width;
var posy1 = 100 * parseInt(def.areas[n].y1) / imgfond.height;
} else {
var posx1 = parseInt(def.areas[n].x1);
var posy1 = parseInt(def.areas[n].y1);
}
if (def.areas[n].x2.match(/px$/)) {
var posx2 = 100 * parseInt(def.areas[n].x2) / imgfond.width;
var posy2 = 100 * parseInt(def.areas[n].y2) / imgfond.height;
} else {
var posx2 = parseInt(def.areas[n].x2);
var posy2 = parseInt(def.areas[n].y2);
}
// img 1x1 vide pour IE
if (navigator.appName.match('Explorer')) var img = '<img style="width:100%;height:100%;" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A%2FwD%2FoL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAA1JREFUCNdj%2BP%2F%2FPwMACPwC%2Flyfz9oAAAAASUVORK5CYII%3D" />';
else var img = '';
var content = '<div id="area_'+def.areas[n].id+'" class="area" onmouseover="infographic_view(event,this)"';
content += 'style="top:'+posy1+'%; left:'+posx1+'%; width:'+(posx2-posx1)+'%; height:'+(posy2-posy1)+'%;">'+img+'</div>';
infimg.innerHTML += content;
n++;
}
/* legendes */
// probleme positionnement opera
if (navigator.appName == 'Opera') {
var stsh = document.styleSheets[0];
stsh.insertRule ('#infographic .icn3T {margin-top:-5px !important;}', stsh.cssRules.length);
stsh.insertRule ('#infographic .icn3B {margin-bottom:-3px !important;}', stsh.cssRules.length);
}
var n = 0;
while (def.legends && def.legends[n]) {
if (def.legends[n].id) {
switch (def.legends[n].mode) {
case 'b':
case 'B':
var id = 'lgpb_'+def.legends[n].id;
var content = '<span id="'+id+'" onclick="infographic_view(event,this)"';
break;
default:
var id = 'lgpt_'+def.legends[n].id;
var content = '<span id="'+id+'" onclick="infographic_view(event,this)"';
break;
}
} else {
var id = 'lgpn_'+n;
var content = '<span id="'+id+'"';
}
content += ' class="legend';
// transforme coords en %
if (def.legends[n].x.match(/px$/)) var posx = 100 * parseInt(def.legends[n].x) / imgfond.width;
else var posx = parseInt(def.legends[n].x);
if (def.legends[n].y.match(/px$/)) var posy = 100 * parseInt(def.legends[n].y) / imgfond.height;
else var posy = parseInt(def.legends[n].y);
if (def.legends[n].icon && def.legends[n].icon > 0) {
switch (def.legends[n].color) {
case 'rg':
content += ' icnrg'; break;
case 'bl':
content += ' icnbl'; break;
case 'bc':
content += ' icnbc'; break;
case 'jn':
content += ' icnjn'; break;
case 'mv':
content += ' icnmv'; break;
case 'og':
content += ' icnog'; break;
case 'rz':
content += ' icnrz'; break;
case 'vr':
content += ' icnvr'; break;
case 'vc':
content += ' icnvc'; break;
case 'br':
content += ' icnbr'; break;
case 'gr':
default:
content += ' icngr';
}
switch (def.legends[n].pos) {
case 'right':
content += ' icn'+def.legends[n].icon+'R" style="top:'+posy+'%;right:'+(100 - posx)+'%;';
break;
case 'top':
content += ' icn'+def.legends[n].icon+'T" style="top:'+posy+'%;left:'+posx+'%;';
infographicadjust['lst'][infographicadjust['lst'].length] = id;
break;
case 'bottom':
content += ' icn'+def.legends[n].icon+'B" style="left:'+posx+'%;bottom:'+(100 - posy)+'%;';
infographicadjust['lst'][infographicadjust['lst'].length] = id;
break;
case 'left':
default:
content += ' icn'+def.legends[n].icon+'L" style="top:'+posy+'%;left:'+posx+'%;';
}
} else {
// sans puce
content += ' noicn" style="top:'+posy+'%;left:'+posx+'%;';
infographicadjust['lst'][infographicadjust['lst'].length] = id;
}
if (def.legends[n].bold && def.legends[n].bold == true) {
content += 'font-weight:bold;';
}
if (def.legends[n].italic && def.legends[n].italic == true) {
content += 'font-style:italic;';
}
if (def.legends[n].size) {
if (def.legends[n].size.match(/px$/)) var sz = 100 * parseInt(def.legends[n].size) / (15 * 15 / 13);
else var sz = parseInt(def.legends[n].size) / (15 / 13);
content += 'font-size:'+sz+'%;';
}
if (def.legends[n].colortext) {
content += 'color:'+def.legends[n].colortext+';';
}
var txt = def.legends[n].text.replace(/‴/g, '"');
content += '">'+txt+'</span>';
infimg.innerHTML += content;
n++;
}
/* popups */
var n = 0;
while (def.popups && def.popups[n]) {
// transforme coords en %
if (def.popups[n].x.match(/px$/)) var posx = 100 * parseInt(def.popups[n].x) / imgfond.width;
else var posx = parseInt(def.popups[n].x);
if (def.popups[n].y.match(/px$/)) var posy = 100 * parseInt(def.popups[n].y) / imgfond.height;
else var posy = parseInt(def.popups[n].y);
var content = '<span class="popu" id="if_'+def.popups[n].id+'" onclick="infographic_hide(this)"';
content += ' style="top:'+posy+'%;left:'+posx+'%;';
if (def.popups[n].fgcolor) {
content += 'color:'+def.popups[n].fgcolor+';';
}
if (def.popups[n].bgcolor) {
content += 'background-color:'+def.popups[n].bgcolor+';';
}
content += '">';
var txt = def.popups[n].text.replace(/‴/g, '"');
content += txt+'</span>';
//infgrf.innerHTML += content;
infimg.innerHTML += content;
n++;
}
/* boutons */
var n = 0;
var g = 0;
var sz = new Array();
sz[0] = 40;
// boite boutons haut
var btt = document.createElement("div");
btt.id = 'spacebtn-t';
infgrf.insertBefore (btt, infwin);
var infbtn = document.getElementById('spacebtn-t');
while (def.buttons && def.buttons[n]) {
if (def.buttons[n].top && def.buttons[n].id != 'break') {
var content = '<button id="butt_'+def.buttons[n].id+'" onclick="infographic_view(event,this)"';
content += 'class="group'+g+'">'+def.buttons[n].title+'</button>';
infbtn.innerHTML += content;
var elem = document.getElementById('butt_'+def.buttons[n].id);
sz[g] = Math.max(elem.offsetWidth, sz[g]);
}
if (def.buttons[n].top && def.buttons[n].id == 'break') {
g++;
sz[g] = 40;
infbtn.innerHTML += '<br>';
}
n++;
}
// ajuste largeur boutons par groupe
var elem = document.styleSheets[0];
for (var g = 0; g < sz.length ; g++) {
if (elem.insertRule) elem.insertRule('#infographic #spacebtn-t .group'+g+' {width: '+sz[g]+'px !important;}',elem.cssRules.length);
else if (elem.addRule) elem.addRule('#infographic #spacebtn-t .group'+g , 'width: '+sz[g]+'px !important;');
}
// boite boutons bas
n = 0;
g = 0;
sz = new Array();
sz[0] = 40;
var btb = document.createElement("div");
btb.id = 'spacebtn-b';
infgrf.appendChild (btb);
//infgrf.innerHTML += '<div id="spacebtn-b"></div>';
infbtn = document.getElementById('spacebtn-b');
while (def.buttons && def.buttons[n]) {
if (!def.buttons[n].top && def.buttons[n].id != 'break') {
var content = '<button id="butn_'+def.buttons[n].id+'" onclick="infographic_view(event,this)"';
content += 'class="group'+g+'">'+def.buttons[n].title+'</button>';
infbtn.innerHTML += content;
var elem = document.getElementById('butn_'+def.buttons[n].id);
sz[g] = Math.max(elem.offsetWidth, sz[g]);
}
if (!def.buttons[n].top && def.buttons[n].id == 'break') {
g++;
sz[g] = 40;
infbtn.innerHTML += '<br>';
}
n++;
}
// ajuste largeur boutons par groupe
var elem = document.styleSheets[0];
for (var g = 0; g < sz.length ; g++) {
if (elem.insertRule) elem.insertRule('#infographic #spacebtn-b .group'+g+' {width: '+sz[g]+'px !important;}',elem.cssRules.length);
else if (elem.addRule) elem.addRule('#infographic #spacebtn-b .group'+g , 'width: '+sz[g]+'px !important;');
}
/* centrage legendes */
infographic_adjust();
}
/* Affiche popups et legendes mode B */
function infographic_view(evt,elem) {
var dat = elem.id.substr(5).replace(/,/g,'|');
var str1 = new RegExp("if_("+dat+')');
var str2 = new RegExp("lgpb_("+dat+')');
// affiche nouveaux popups et legendes mode B:
var tablgpb = new Array();
var pb = 0;
var infos = document.getElementById('infographic').getElementsByTagName('span');
// si lance par bouton
if (elem.id.match(/^butn/) || elem.id.match(/^butt/)) {
// efface affich precedent:
infographic_hide('all');
// indic bouton actif
elem.style.borderStyle = 'inset';
elem.style.borderColor = '#D40';
for (var i = 0; i < infos.length ; i++) {
// si legende mode B
if (infos[i].id.match(str2)) {
tablgpb[pb++] = infos[i].id.substr(5);
infos[i].style.visibility = 'visible';
}
}
// affiche popups direct seulement (pas si legende mode B intermediaire)
for (var i = 0; i < infos.length ; i++) {
// si popup
if (infos[i].id.match(str1)) {
for (var pb = 0; pb < tablgpb.length ; pb++) {
if (infos[i].id.match(tablgpb[pb])) break;
}
// si popup direct
if (pb == tablgpb.length) infos[i].style.visibility = 'visible';
// exception si shift + bouton bas : affiche tout popups
if (evt.shiftKey && elem.id.match(/^butn/)) infos[i].style.visibility = 'visible';
}
}
} else {
// si lance par legende
for (var i = 0; i < infos.length ; i++) {
if (infos[i].id.match(str1)) infos[i].style.visibility = 'visible';
}
// garde legende affichee
elem.style.visibility = 'visible';
}
}
/* Efface tout les popups et legendes mode B */
function infographic_hide(elem) {
var infos = document.getElementById('infographic').getElementsByTagName('span');
if (elem == 'all') {
// si lance par bouton
for (var i = 0; i < infos.length ; i++) {
if (infos[i].className == 'popu' || infos[i].id.match(/^lgpb/)) infos[i].style.visibility = 'hidden';
}
// efface indic bouton actif
var btnb = document.getElementById('spacebtn-b').getElementsByTagName('button');
var btnt = (document.getElementById('spacebtn-t').getElementsByTagName('button'));
for (var i = 0; i < btnb.length ; i++) {
btnb[i].style.borderStyle = '';
btnb[i].style.borderColor = '';
}
for (var i = 0; i < btnt.length ; i++) {
btnt[i].style.borderStyle = '';
btnt[i].style.borderColor = '';
}
} else {
// si lance par sortie popup
elem.style.visibility = 'hidden';
// ou efface tout
//for (var i = 0; i < infos.length ; i++) {
// if (infos[i].className == 'popu') infos[i].style.visibility = 'hidden';
//}
}
}
/* Recalage additionnel position (centrage) */
function infographic_adjust() {
for (var i = 0; i < infographicadjust['lst'].length ; i++) {
var elem = document.getElementById(infographicadjust['lst'][i]);
// probleme positionnement opera
if (navigator.appName == 'Opera') elem.style.marginLeft = (elem.offsetWidth /-2)+1 +'px';
else elem.style.marginLeft = (elem.offsetWidth /-2) +'px';
}
}
/* Fonction zoom */
function infographic_change_scale(btz) {
var elem = document.styleSheets[0];
if (btz.style.textDecoration == 'line-through') {
btz.style.textDecoration = 'none';
// reduit image
document.getElementById('infmap').style.width = infographicadjust['def']['dw']+'px';
document.getElementById('infmap').style.height = infographicadjust['def']['dh']+'px';
document.getElementById('infographic-img').style.width = infographicadjust['def']['dw']+'px';
document.getElementById('infographic-img').style.height = infographicadjust['def']['dh']+'px';
// police
if (elem.deleteRule) elem.deleteRule(infographicadjust['ftz']);
else if (elem.removeRule) elem.removeRule(infographicadjust['ftz']);
infographic_adjust();
} else {
btz.style.textDecoration = 'line-through';
// zoom image
document.getElementById('infmap').style.width = infographicadjust['def']['ow']+'px';
document.getElementById('infmap').style.height = infographicadjust['def']['oh']+'px';
document.getElementById('infographic-img').style.width = infographicadjust['def']['ow']+'px';
document.getElementById('infographic-img').style.height = infographicadjust['def']['oh']+'px';
// police
if (elem.insertRule) infographicadjust['ftz'] = elem.insertRule('#infographic {font-size: 15px !important;}',elem.cssRules.length);
else if (elem.addRule) infographicadjust['ftz'] = elem.addRule('#infographic', 'font-size: 15px !important;');
infographic_adjust();
}
btz.blur();
}