Voir la source de Utilisateur:Pinocchio/infographie.js

/*
* 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();
}