Changeset 8025


Ignore:
Timestamp:
12/30/13 13:12:30 (6 years ago)
Author:
kent1
Message:

Pas mal d'améliorations diverses

Location:
plugins_spip/terraeco_infographie/trunk
Files:
4 added
3 edited

Legend:

Unmodified
Added
Removed
  • plugins_spip/terraeco_infographie/trunk/css/infographie.css

    r8024 r8025  
    355355        fill:#70706E;
    356356        font-size:14px;
     357        text-anchor:end;
    357358}
    358359
     
    406407.infobox .logo{
    407408        float:left;
    408         margin-right:1em;
     409        margin-right:10px;
    409410}
    410411
     
    412413        color:#fff;
    413414        font-size:1.3em;
     415}
     416
     417.infobox .contenu_anecdote{
    414418        width: 260px;
    415419        float: right;
    416420        text-align: left;
    417421}
    418 
    419422.infobox .contenu_fin{
    420423        width: 100%;
     
    449452.arrows_nav > div{
    450453        width:40px;
     454        height:30px;
    451455        background-color:#F29100;
    452456        display:inline-block;
     
    456460}
    457461
     462.arrows_nav .right{
     463        background:#F29100 url(img/fleche_droite.png) no-repeat center center;
     464}
     465.arrows_nav .left{
     466        background:#F29100 url(img/fleche_gauche.png) no-repeat center center;
     467}
    458468.arrows_nav > div.right{
    459469        padding: 7px 5px 7px 10px;
  • plugins_spip/terraeco_infographie/trunk/infographie.html

    r8023 r8025  
    4545        var date_origine = date_actuelle = [(#ENV{naissance,#GET{naissance_min}}|<{#GET{naissance_min}}|?{#GET{naissance_min},#ENV{naissance}}|intval)],
    4646                date_naissance = [(#ENV{naissance}|intval)],
    47                 date_aujourdhui = [(#ENV{date}|annee)],
    48                 ymax = ymax_origine = translate_defaut = step = 0,
    49                 arrow_left = "[(#CHEMIN{images/fleche_gauche.png}|balise_img|texte_script)]",
    50                 arrow_right = "[(#CHEMIN{images/fleche_droite.png}|balise_img|texte_script)]";
     47                date_aujourdhui = [(#ENV{date}|annee)];
    5148</script>
    5249[<script type="text/javascript" src="(#CHEMIN{javascript/infographie.js})"></script>]
  • plugins_spip/terraeco_infographie/trunk/javascript/infographie.js

    r8024 r8025  
    1 var values = [],values1 = [],values2 = [], values_commentaire= [], value_origine = [], value_actuelle = [],
     1var x,y,xAxis,yAxis,
     2        values = [],values1 = [],values2 = [], values_commentaire = [], value_origine = [], value_actuelle = [],
    23        values_perspective1_haute = [], values_perspective1_mediane = [], values_perspective_trou = [],
    34        values_perspective2_haute = [], values_perspective2_mediane = [],
    4         ligne_naissance_groupe,ligne_naissance,ligne_interactive;
    55        margin = {top: 0, right: 60, bottom: 60, left: 0},
    6         graph_width = graph_height = height = 0,
     6        graph_width = graph_height = height = ymax = ymax_origine = translate_defaut = step = 0,
    77        vitesse = 200,
    8         svg = paths = infobox = tip = tip_perspective = moving = infobox_bloquee = move_again = callback_infobox_close = progress_mousedown = perspective_ok = false;
    9 
    10 // Scales and axes. Note the inverted domain for the y-scale: bigger is up!
    11 var x,y,xAxis,yAxis;
     8        svg = paths = infobox = tip = tip_perspective = moving = move_again = callback_infobox_close = progress_mousedown = perspective_ok = infobox_fermer = infobox_open = false;
    129
    1310// Un générateur de lignes
     
    2320
    2421function climat_load_datas(file){
    25 
    2622        graph_width = jQuery('#'+containerid).width();
    2723        graph_height = jQuery('#'+containerid).height();
     
    3834                .attr("height", height + margin.top + margin.bottom)
    3935                .append("g")
    40                 .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
     36                .attr("transform", "translate("+margin.left+","+margin.top+")");
    4137
    4238        paths = svg.append("g").attr("class", "paths")
     
    4440        var defs = svg.append('defs');
    4541        var gradient_perspective1 = defs.append('linearGradient')
    46                                 .attr( 'id', 'gradient_perspective1' )
    47                                 .attr( 'x1', '0' )
    48                                 .attr( 'x2', '0' )
    49                                 .attr( 'y1', '0' )
    50                                 .attr( 'y2', '1' );
     42                                .attr('id','gradient_perspective1')
     43                                .attr('x1','0')
     44                                .attr('x2','0')
     45                                .attr('y1','0')
     46                                .attr('y2','1');
    5147
    5248        gradient_perspective1.append('stop')
     
    5551
    5652        gradient_perspective1.append( 'stop' )
    57                 .attr( 'class', 'gradient_perspective1_stop2')
    58                 .attr( 'offset', '100%' );
     53                .attr('class','gradient_perspective1_stop2')
     54                .attr('offset','100%');
    5955       
    6056        // Ajouter le tooltip que l'on cache automatiquement
    6157        tip = d3.select('#'+containerid).append("div")
    62                 .attr("class", "tooltip tooltip_normal")
    63                 .style("display", 'none');
     58                .attr("class","tooltip tooltip_normal")
     59                .style("display",'none');
    6460       
    6561        tip_perspective = d3.select('#'+containerid).append("div")
    66                 .attr("class", "tooltip tooltip_perspective")
    67                 .style("display", 'none');
     62                .attr("class","tooltip tooltip_perspective")
     63                .style("display",'none');
    6864       
    6965        // Ajout de l'infobox'
    7066        infobox = d3.select('#'+containerid).append("div")
    71                         .attr("class", infobox_class)
    72                         .style("display", 'none');
    73        
     67                        .attr("class",infobox_class)
     68                        .style("display",'none');
     69
     70        jQuery('.'+infobox_class).html('<div class="close_box"><a href="#" onclick="return false;">x</a></div><div class="contenu"></div>');
     71
    7472        // Ajouter les flÚches pour avancer et reculer
    75         arrow_nav = d3.select('#'+containerid).append("div")
    76                 .attr("class", "arrows_nav")
    77                 .html('<div class="left">'+arrow_left+'</div><div class="right">'+arrow_right+'</div>');
     73        arrow_nav = d3.select('#'+containerid).append("div").attr("class","arrows_nav")
     74                .html('<div class="left"></div><div class="right"></div>');
    7875       
    7976        /**
     
    10299
    103100                /**
     101                 * Le centre sera toujours la valeur minimale + 11 ans
     102                 * et le point d'origine la valeur min
     103                 */
     104                origine = xmin;
     105                var diff = 7-(date_origine - parseInt(xmin));
     106               
     107                /**
    104108                 * Si naissance - 7 ans est dans la visu, on part de là
    105109                 */
     
    107111                        origine = date_origine -7;
    108112                        var diff = 0;
    109                 }
    110                 /**
    111                  * Sinon le centre sera toujours la valeur minimale + 11 ans
    112                  * et le point d'origine la valeur min
    113                  */
    114                 else{
    115                         origine = xmin;
    116                         var diff = 7-(date_origine - parseInt(xmin));
    117113                }
    118114
     
    154150                }
    155151               
    156                 if(texte_debut){
    157                         infobox_update('<div class="close_box"><a href="#" onclick="return false;">x</a></div><div class="contenu contenu_fin">'+texte_debut+'</div>',function(){
    158                                 infobox_bloquee = true;
    159                                 jQuery('.'+infobox_class).fadeIn(500,function(){
    160                                         jQuery('.'+infobox_class+' .close_box').unbind('click').on('click',function(event){
    161                                                 event.preventDefault();
    162                                                 event.stopPropagation();
    163                                                 jQuery('.'+infobox_class).fadeOut(500,function(){
    164                                                         infobox_bloquee = false;
    165                                                         infobox_update('<div class="close_box"><a href="#" onclick="return false;">x</a></div><div class="contenu contenu_fin">'+infographie_lang.anecdote_scroll+'</div>')
    166                                                         jQuery('.'+infobox_class).fadeIn().trigger('infobox_open');
    167                                                 }).trigger('infobox_close');
    168                                         });
    169                                 }).trigger('infobox_open');
    170                         });
    171                 }
    172                 else{
    173                         // Ajouter l'infobox pour les anecdotes que l'on cache automatiquement
    174                         infobox_update('<div class="close_box"><a href="#" onclick="return false;">x</a></div><div class="contenu contenu_fin">'+infographie_lang.anecdote_scroll+'</div>',function(){
    175                                 jQuery('.'+infobox_class).fadeIn().trigger('infobox_open');
    176                         });
    177                 }
    178152                date_aujourdhui = parseInt(values[values.length-1].axe_x);
    179153                draw(translate_defaut);
    180154                drawlines_interaction(translate_defaut);
    181155                infographie_interactions();
     156               
     157                if(texte_debut){
     158                        infobox_update('<div class="contenu_fin">'+texte_debut+'</div>',function(){
     159                                        callback_infobox_close = function(){
     160                                                infobox_update('<div class="contenu_fin">'+infographie_lang.anecdote_scroll+'</div>',function(){
     161                                                        jQuery('.'+infobox_class).trigger('infobox_open');
     162                                                        callback_infobox_close = false;
     163                                                });
     164                                        }
     165                                });
     166                }
     167                else
     168                        // Ajouter l'infobox pour les anecdotes que l'on cache automatiquement
     169                        infobox_update('<div class="contenu_fin">'+infographie_lang.anecdote_scroll+'</div>');
    182170        });
    183171}
     
    185173function infobox_update(content,callback){
    186174        if(infobox){
     175                infobox_open = true;
    187176                // On met le contenu
    188                 jQuery('.'+infobox_class).html(content);
     177                jQuery('.'+infobox_class+' .contenu').html(content);
    189178               
    190179                // Les lien en target="_blank"
     
    203192                jQuery('.'+infobox_class).css({'margin-top':margin_top});
    204193               
    205                 // Si on a donné une fonction comme callback => on l'exécute
    206                 if(typeof(callback) == 'function') callback();
     194                jQuery('.'+infobox_class).fadeIn(500,function(){
     195                        // Si on a donné une fonction comme callback => on l'exécute
     196                        if(typeof(callback) == 'function') callback();
     197                }).trigger('infobox_open');
    207198        }
    208199}
     
    214205 */
    215206function graph_replace(valeur){
    216         console.log(parseInt(date_actuelle)+parseFloat(valeur));
    217         if((!perspective_ok && date_actuelle >= parseInt(values[values.length-1].axe_x)) || (perspective_ok && (parseInt(date_actuelle)+parseFloat(valeur)) > parseInt(values[values.length-1].axe_x))){
     207        if((!perspective_ok && date_actuelle >= parseInt(values[values.length-1].axe_x)) || (perspective_ok && (parseInt(date_actuelle)+parseFloat(valeur)) > parseInt(values[values.length-1].axe_x)) || infobox_open){
    218208                move_again = moving = false;
    219209                return false;
     
    242232        if(typeof(d.commentaire) == 'string' && d.commentaire.length > 1){
    243233                var show_info = function(){
    244                         infobox_update('<div class="close_box"><a href="#" onclick="return false;">x</a></div><div class="logo">'+d.logo+'</div><div class="contenu"><span class="annee">'+d.axe_x+'</span>'+d.commentaire+'</div>',
    245                                 function(){
    246                                         jQuery('.'+infobox_class).fadeIn(vitesse,function(){
    247                                                 jQuery('.'+infobox_class+' .close_box').unbind('click').on('click',function(event){
    248                                                         event.preventDefault();
    249                                                         event.stopPropagation();
    250                                                         jQuery('.'+infobox_class).fadeOut().trigger('infobox_close');
    251                                                 });
    252                                         }).trigger('infobox_open');
    253                                 }
    254                         );
     234                        infobox_update('<div class="logo">'+d.logo+'</div><div class="contenu_anecdote"><span class="annee">'+d.axe_x+'</span>'+d.commentaire+'</div>');
    255235                }
    256236                setTimeout(show_info,vitesse-30);
     
    265245                        jQuery('.tooltip_normal').animate({'top':tooltip_top,'left':left},vitesse);
    266246                d3.select(".paths")
    267                         .transition()
    268                         .duration(vitesse)
     247                        .transition().duration(vitesse)
    269248                        .attr("transform", "translate("+translatex+", 0)").each("end", function(){
    270                                 if(move_again && jQuery('.'+infobox_class).is(':hidden')){
     249                                if(move_again && !infobox_open){
    271250                                        move_again = false
    272251                                        graph_replace(valeur);
     
    274253                                        move_again = moving = false;
    275254                        });
    276                 d3.select(".interaction")
    277                         .attr("transform", "translate(0, 1)")
     255                d3.select(".interaction").attr("transform", "translate(0, 1)");
     256               
    278257                // Afficher le message de fin de données actuelles
    279258                if(!perspective_ok && date_actuelle == parseInt(values2[values2.length-1].axe_x)){
    280259                        var show_info = function(){
    281260                                if(date_naissance > values[0].axe_x && jeu_donnees == 1){
    282                                         var degres = (parseFloat(values[values.length-1].axe_y) - parseFloat(value_origine.axe_y)).toFixed(2);
     261                                        var degres = ((parseFloat(values[values.length-1].axe_y) - parseFloat(value_origine.axe_y)).toFixed(2)).replace('.',',');
    283262                                        if(degres.charAt(0) == '-'){
    284                                                 degres = degres.replace('-','').replace('.',',');
     263                                                degres = degres.replace('-','');
    285264                                                var texte_fin = "<p>"+infographie_lang.texte_info_temp_diminution_naissance_mnt.replace('__annee_naissance__',date_naissance).replace('__degres__',degres)+"</p>";
    286                                         }else{
    287                                                 degres = degres.replace('.',',');
     265                                        }else
    288266                                                var texte_fin = "<p>"+infographie_lang.texte_info_temp_augmentation_naissance_mnt.replace('__annee_naissance__',date_naissance).replace('__degres__',degres)+"</p>";
    289                                         }
    290267                                }
    291268                                else if(date_naissance < values[0].axe_x && jeu_donnees == 1){
    292                                         var degres = (parseFloat(values[values.length-1].axe_y) - parseFloat(value_origine.axe_y)).toFixed(2);
     269                                        var degres = ((parseFloat(values[values.length-1].axe_y) - parseFloat(value_origine.axe_y)).toFixed(2)).replace('.',',');
    293270                                        var age = (parseInt(date_naissance) - parseFloat(value_origine.axe_x)).toString().replace('-','');
    294271                                        if(degres.charAt(0) == '-'){
    295                                                 degres = degres.replace('-','').replace('.',',');
     272                                                degres = degres.replace('-','');
    296273                                                var texte_fin = "<p>"+infographie_lang.texte_info_temp_diminution_age_mnt.replace('__annee_naissance__',date_naissance).replace('__age__',age).replace('__degres__',degres)+"</p>";
    297                                         }else{
    298                                                 degres = degres.replace('.',',');
     274                                        }else
    299275                                                var texte_fin = "<p>"+infographie_lang.texte_info_temp_augmentation_age_mnt.replace('__annee_naissance__',date_naissance).replace('__age__',age).replace('__degres__',degres)+"</p>";
    300                                         }
    301276                                }
    302277                                else if(date_naissance > values[0].axe_x && jeu_donnees == 2){
    303                                         var ppm = (parseFloat(values[values.length-1].axe_y) - parseFloat(value_origine.axe_y)).toFixed(2);
    304                                         ppm = ppm.replace('.',',');
     278                                        var ppm = ((parseFloat(values[values.length-1].axe_y) - parseFloat(value_origine.axe_y)).toFixed(2)).replace('.',',');
    305279                                        var texte_fin = "<p>"+infographie_lang.texte_info_ppm_augmentation_naissance_mnt.replace('__annee_naissance__',date_naissance).replace('__ppm__',ppm)+"</p>";
    306280                                }
    307281                                else if(date_naissance < values[0].axe_x && jeu_donnees == 2){
    308                                         var ppm = (parseFloat(values[values.length-1].axe_y) - parseFloat(value_origine.axe_y)).toFixed(2);
    309                                         ppm = ppm.replace('.',',');
     282                                        var ppm = ((parseFloat(values[values.length-1].axe_y) - parseFloat(value_origine.axe_y)).toFixed(2)).replace('.',',');
    310283                                        var age = (parseInt(date_naissance) - parseFloat(value_origine.axe_x)).toString().replace('-','');
    311284                                        var texte_fin = "<p>"+infographie_lang.texte_info_ppm_augmentation_age_mnt.replace('__annee_naissance__',date_naissance).replace('__age__',age).replace('__ppm__',ppm)+"</p>";
     
    315288                               
    316289                                if(texte_fin){
    317                                         infobox_update('<div class="close_box"><a href="#" onclick="return false;">x</a></div><div class="contenu contenu_fin">'+texte_fin+'</div>',
     290                                        infobox_update('<div class="contenu_fin">'+texte_fin+'</div>',
    318291                                                function(){
    319                                                         jQuery('.'+infobox_class).fadeIn(500,function(){
    320292                                                                callback_infobox_close = function(){
    321293                                                                        jQuery('#'+containerid).fadeOut(1000,function(){
     
    329301                                                                        });
    330302                                                                }
    331                                                                 jQuery('.'+infobox_class+' .close_box').unbind('click').on('click',function(event){
    332                                                                         event.preventDefault();
    333                                                                         event.stopPropagation();
    334                                                                         jQuery('.'+infobox_class).fadeOut().trigger('infobox_close');
    335                                                                 });
    336                                                         }).trigger('infobox_open');
    337                                                 });
     303                                                        });
    338304                                }
    339305                        }
     
    347313                 */
    348314                var tooltip_left = d3.select('.ligne_interactive').node().getBBox().x+translate_interactivite-jQuery('.tooltip_normal').outerWidth();
    349                 d3.select("#clip_perspective rect")
    350                         .transition()
    351                         .duration(vitesse)
    352                         .attr("width",x(date_actuelle)-x(values_perspective1_haute[0].axe_x));
     315                if(jQuery("#clip_perspective").size() > 0){
     316                        d3.select("#clip_perspective rect")
     317                                .transition().duration(vitesse)
     318                                .attr("width",x(date_actuelle)-x(values_perspective1_haute[0].axe_x));
     319                }
     320               
    353321                d3.select(".interaction")
    354                         .transition()
    355                         .duration(vitesse)
     322                        .transition().duration(vitesse)
    356323                        .attr("transform", "translate("+translate_interactivite+", 1)").each("end", function(){
    357                                 if(move_again && jQuery('.'+infobox_class).is(':hidden')){
     324                                if(move_again && !infobox_open){
    358325                                        move_again = false
    359326                                        graph_replace(valeur);
     
    383350        // Ajout la ligne de données avant la naissance
    384351        svg.selectAll('.paths').append("path")
    385                 .attr("class", "line avtnaissance")
    386                 .attr("d", line(values1));
     352                .attr("class","line avtnaissance")
     353                .attr("d",line(values1));
    387354
    388355        // Ajout de l'axe X, on fait une rotation des textes à -270°
     
    402369                        .attr( 'class', 'axis_postnaissance' )
    403370                        .attr("x1", function( d ) { return x( d.axe_x ); })
    404                         .attr("x2",function( d ) { return x( values[values.length-1].axe_x ); }) // vertical line so same value on each
    405                         .attr("y1",0).attr("y1",0);
     371                        .attr("x2",function( d ) { return x( values[values.length-1].axe_x ); }); // vertical line so same value on each
    406372
    407373        // Ajout d'une class 'tickold' sur les labels de l'axe X plus vieux que la naissance
     
    426392                                .attr("class","bloc_yaxis")
    427393                                .attr("x", graph_width-35)
    428                                 .attr("y", 0)
    429394                                .attr("fill","#ffffff")
    430395                                .attr("width", 35)
     
    446411        // Ajout de la légende des axes
    447412        svg.append("text")
    448                 .attr("x",0)
    449413                .attr("y",height+60)
    450414                .attr("class", "legende")
     
    465429                        .on('click',function(d){
    466430                                d3.event.stopPropagation();
    467                                 if(jQuery('.'+infobox_class).is(':visible'))
    468                                         return false;
     431                                if(infobox_open) return false;
    469432                               
    470433                                jQuery('.infos_dots.active').animate({'stroke-width':3},300).attr('class','infos_dots');
    471434                                jQuery(this).animate({'stroke-width':5},300).attr('class','infos_dots active');
    472                                 infobox_update('<div class="close_box"><a href="#" onclick="return false;">x</a></div><div class="logo">'+d.logo+'</div><div class="contenu"><span class="annee">'+d.axe_x+'</span>'+d.commentaire+'</div>',
     435                                infobox_update('<div class="logo">'+d.logo+'</div><div class="contenu_anecdote"><span class="annee">'+d.axe_x+'</span>'+d.commentaire+'</div>',
    473436                                        function(){
    474                                                 jQuery('.'+infobox_class).fadeIn(500,function(){
    475                                                         jQuery(this).find('.close_box').on('click',function(){
    476                                                                 event.preventDefault();
    477                                                                 event.stopPropagation();
    478                                                                 jQuery('.infos_dots.active').attr('class','infos_dots')
    479                                                                         .animate({'stroke-width':'3'},300);
    480                                                                 jQuery('.'+infobox_class).fadeOut().trigger('infobox_close');
    481                                                         });
    482                                                 }).trigger('infobox_open');
     437                                                callback_infobox_close = function(){
     438                                                        jQuery('.infos_dots.active').attr('class','infos_dots')
     439                                                                .animate({'stroke-width':'3'},300);
     440                                                }
    483441                                        }
    484442                                );
     
    487445        if(date_naissance > parseInt(values[0].axe_x)){
    488446                // Ajout du groupe qui contiendra les éléments de la date de naissance
    489                 ligne_naissance_groupe = svg.select('.paths').append("g")
    490                         .attr("class", "birth-line");
     447                ligne_naissance_groupe = svg.select('.paths').append("g").attr("class", "birth-line");
    491448
    492449                // Ajout de la ligne de naissance
    493450                ligne_naissance = ligne_naissance_groupe
    494                         .datum( value_origine )
     451                        .datum(value_origine)
    495452                        .append("line")
    496453                                .attr( 'class', 'ligne_naissance second_plan' )
    497454                                .attr("x1", function( d ) { return x( d.axe_x ); })
    498455                                .attr("x2",function( d ) { return x( d.axe_x ); }) // vertical line so same value on each
    499                                 .attr("y1",80).attr("y2", height);
     456                                .attr("y1",image_naissance_height+10).attr("y2", height);
    500457
    501458                // Ajout de l'image de la bougie
     
    504461                        .append("svg:image")
    505462                                .attr("xlink:href", image_naissance)
    506                                 .attr("x", function(d){
    507                                         return x(value_origine.axe_x)-(image_naissance_width/2);
    508                                 })
    509                                 .attr("y", "2")
     463                                .attr("x", function(d){return x(value_origine.axe_x)-(image_naissance_width/2);})
    510464                                .attr("width", image_naissance_width)
    511465                                .attr("height", image_naissance_height);
     
    520474                .append("line")
    521475                        .attr("class","ligne_depart second_plan")
    522                         .attr("x1", function( d ) { return x( d.axe_x ); })
    523                         .attr("x2",function( d ) { return x( d.axe_x ); })
     476                        .attr("x1", function(d){ return x(d.axe_x); })
     477                        .attr("x2",function(d){ return x(d.axe_x); })
    524478                        .attr("y1",image_depart_height+10).attr("y2", height);
    525479
     
    529483                .append("svg:image")
    530484                        .attr("xlink:href", image_depart)
    531                         .attr("x", function(d){
    532                                 return x(d.axe_x)-(image_depart_width/2);
    533                         })
    534                         .attr("y", "2")
     485                        .attr("x", function(d){ return x(d.axe_x)-(image_depart_width/2);})
    535486                        .attr("width", image_depart_width)
    536487                        .attr("height", image_depart_height);
     
    544495                .append("line")
    545496                        .attr("class","ligne_aujd second_plan")
    546                         .attr("x1", function( d ) { return x(d.axe_x);})
    547                         .attr("x2",function( d ) { return x(d.axe_x); })
     497                        .attr("x1", function(d){ return x(d.axe_x);})
     498                        .attr("x2",function(d){ return x(d.axe_x);})
    548499                        .attr("y1",image_aujd_height+10).attr("y2", height);
    549500
     
    553504                .append("svg:image")
    554505                        .attr("xlink:href", image_aujd)
    555                         .attr("x", function(d){
    556                                 return x(d.axe_x)-(image_aujd_width/2);
    557                         })
    558                         .attr("y", "2")
     506                        .attr("x", function(d){return x(d.axe_x)-(image_aujd_width/2);})
    559507                        .attr("width", image_aujd_width)
    560508                        .attr("height", image_aujd_height);
     
    568516function drawlines_interaction(translatex){
    569517        d3.selectAll(".interaction").remove();
     518       
    570519        ligne_interactive_groupe = svg.append("g")
    571                 .attr("class", "interaction")
    572                 .attr("transform","translate(0,1)");
     520                .attr("class", "interaction").attr("transform","translate(0,1)");
    573521               
    574522        /**
     
    579527                        .append("line")
    580528                                .attr('class', 'ligne_interactive')
    581                                 .attr("x1", function(d) { return x( d.axe_x )+parseFloat(translatex); })
     529                                .attr("x1", function(d) { return x(d.axe_x)+parseFloat(translatex);})
    582530                                .attr("x2",function(d) { return x(d.axe_x)+parseFloat(translatex);})
    583                                 .attr("y1",image_naissance_height+10)
    584                                 .attr("y2", height);
     531                                .attr("y1",image_naissance_height+10).attr("y2", height);
    585532        /**
    586533         * Ajouter le triangle
    587534         */
    588         ligne_interactive_groupe.append('path')
    589                 .attr('class','triangle')
     535        ligne_interactive_groupe.append('path').attr('class','triangle')
    590536                .attr('d', function(d) {
    591537                        var x1 = (x( value_actuelle.axe_x )+parseFloat(translatex)-14), x2 = x( value_actuelle.axe_x)+parseFloat(translatex)+14,x3 = x( value_actuelle.axe_x )+parseFloat(translatex);
     
    598544        // Au click sur les fleches on avance d'un cran ou on recule
    599545        jQuery('.arrows_nav > div')
    600                 .on('click',function(event){
    601                         event.stopPropagation();
    602                 })
     546                .on('click',function(event){ event.stopPropagation(); })
    603547                .on('mouseenter',function(event){
    604548                        event.stopPropagation();
    605                         if(jQuery('.'+infobox_class).is(':hidden') && moving == false){
    606                                 if(jQuery(this).is('.left')){
    607                                         graph_replace(-1);
    608                                         progress_mousedown = setInterval(function(){
    609                                                                                         if(jQuery('.'+infobox_class).is(':hidden'))
    610                                                                                                 graph_replace(-1);
    611                                                                                 }, vitesse);
    612                                 }else{
    613                                         graph_replace(1);
    614                                         progress_mousedown = setInterval(function(){
    615                                                                                         if(jQuery('.'+infobox_class).is(':hidden'))
    616                                                                                                 graph_replace(1);
    617                                                                                 }, vitesse);
    618                                 }
     549                        if(!infobox_open && moving == false){
     550                                var direction = jQuery(this).is('.left') ? -1:1;
     551                                graph_replace(direction);
     552                                progress_mousedown = setInterval(function(){
     553                                                                                if(!infobox_open) graph_replace(direction);
     554                                                                        }, vitesse);
     555                        }else if(infobox_open && infobox_fermer){
     556                                jQuery('.'+infobox_class).trigger('infobox_close');
    619557                        }
    620558                })
     
    632570                                 */
    633571                                clearInterval(progress_mousedown);
    634                                 if(jQuery('.'+infobox_class).is(':visible'))
    635                                         jQuery('.'+infobox_class).fadeOut().trigger('infobox_close');
     572                                if(infobox_open)
     573                                        jQuery('.'+infobox_class).trigger('infobox_close');
    636574                                e.preventDefault();
    637575                                break;
    638                         case 32 :
    639                                  /**
    640                                   * Touche Space : avance sur la ligne de temps
    641                                   */
    642                                 clearInterval(progress_mousedown);
    643                                 if(jQuery('.'+infobox_class).is(':hidden') && moving == false){
    644                                         graph_replace(1);
    645                                         progress_mousedown = setInterval(function(){
    646                                                                                         if(jQuery('.'+infobox_class).is(':hidden'))
    647                                                                                                 graph_replace(1);
    648                                                                                 }, vitesse);
    649                                 }
    650                                 e.preventDefault();
    651                                 break;
    652                         case 37 : case 39 : case 38 : case 40 :
     576                        case 32 : case 37 : case 39 : case 38 : case 40 :
    653577                                /**
    654                                  * Gauche (37), droite (39), haut (38), bas (40)
     578                                 * Space (32) Gauche (37), droite (39), haut (38), bas (40)
    655579                                 * Avance ou recule sur la ligne de temps
    656580                                 */
    657581                                clearInterval(progress_mousedown);
    658                                 if(jQuery('.'+infobox_class).is(':hidden') && moving == false){
    659                                         if(e.keyCode == 37 || e.keyCode == 40){
    660                                                 graph_replace(-1);
    661                                                 progress_mousedown = setInterval(function(){
    662                                                                                                 if(jQuery('.'+infobox_class).is(':hidden'))
    663                                                                                                         graph_replace(-1);
    664                                                                                         }, vitesse);
    665                                         }else{
    666                                                 graph_replace(1);
    667                                                 progress_mousedown = setInterval(function(){
    668                                                                                                 if(jQuery('.'+infobox_class).is(':hidden'))
    669                                                                                                         graph_replace(1);
    670                                                                                         }, vitesse);
    671                                         }
    672                                 }
     582                                if(!infobox_open && moving == false){
     583                                        var direction = (e.keyCode == 37 || e.keyCode == 40) ? -1 : 1;
     584                                        graph_replace(direction);
     585                                        progress_mousedown = setInterval(function(){
     586                                                                                        if(!infobox_open) graph_replace(direction);
     587                                                                                }, vitesse);
     588                                }else if(infobox_open && infobox_fermer)
     589                                        jQuery('.'+infobox_class).trigger('infobox_close')
    673590                                e.preventDefault();
    674591                                break;
     
    685602                }
    686603        });
     604
    687605        jQuery('#'+containerid).on('mousewheel', function(event) {
    688                 if(jQuery('.'+infobox_class).is(':hidden') && moving == false){
    689                         if(event.deltaY < 0 || event.deltaX > 0)
    690                                 var val = 1;
    691                         else if(event.deltaY > 0 || event.deltaX > 0)
    692                                 var val = -1;
    693                         graph_replace(val);
    694                 }else if(jQuery('.'+infobox_class).is(':hidden') && move_again == false)
     606                if(!infobox_open && moving == false){
     607                        var direction = (event.deltaY < 0 || event.deltaX > 0) ? 1 : -1;
     608                        graph_replace(direction);
     609                }else if(!infobox_open && !infobox_fermer && move_again == false)
    695610                        move_again = true;
     611                else if(infobox_open && infobox_fermer)
     612                        jQuery('.'+infobox_class).trigger('infobox_close')
    696613                return false;
    697614        });
    698615       
    699616        // Au click sur le graph, on cache l'infobox si visible
    700         jQuery('#'+containerid).on('click',function(event){
     617        jQuery('#'+containerid+',.'+infobox_class+' .close_box').on('click',function(event){
    701618                event.preventDefault();
    702619                event.stopPropagation();
    703                 if(jQuery('.'+infobox_class).is(':visible')){
    704                         if(infobox_bloquee){
    705                                 jQuery('.'+infobox_class).fadeOut(500,function(){
    706                                         infobox_bloquee = false;
    707                                         infobox_update('<div class="close_box"><a href="#" onclick="return false;">x</a></div><div class="contenu contenu_fin">'+infographie_lang.anecdote_scroll+'</div>',function(){
    708                                                 jQuery('.'+infobox_class).fadeIn().trigger('infobox_open');
    709                                         });
    710                                        
    711                                 }).trigger('infobox_close');
    712                         }
    713                         else jQuery('.'+infobox_class).fadeOut().trigger('infobox_close');
    714                 }
    715         });
     620                if(infobox_open && infobox_fermer)
     621                        jQuery('.'+infobox_class).trigger('infobox_close');
     622        });
     623
    716624        jQuery('.'+infobox_class).on('infobox_close',function(){
    717                 if(typeof(callback_infobox_close) == 'function')
    718                         callback_infobox_close()
     625                if(infobox_open && infobox_fermer){
     626                        jQuery(this).fadeOut(500,function(){
     627                                infobox_fermer = infobox_open = false;
     628                                if(typeof(callback_infobox_close) == 'function') callback_infobox_close();
     629                        });
     630                }
     631        });
     632
     633        jQuery('.'+infobox_class).on('infobox_open',function(){
     634                moving = move_again = false;
     635                setTimeout(function(){infobox_fermer=true;},1200);
     636                clearInterval(progress_mousedown);
    719637        });
    720638}
     
    736654                                        var axe_x = (parseFloat(values[values.length-1].axe_x)+1)
    737655                                        new_row_mediane =       {
    738                                                                                         'axe_x':axe_x,
     656                                                                                        'axe_x':parseFloat(axe_x),
    739657                                                                                        'axe_y':parseFloat(value_mediane.axe_y)+(parseFloat(mediane)*parseInt(j))
    740658                                                                                };
    741659                                        values_perspective1_haute.push({
    742                                                                                 'axe_x':axe_x,
     660                                                                                'axe_x':parseFloat(axe_x),
    743661                                                                                'axe_y':parseFloat(value_haute.axe_y)+(parseFloat(moyenne_haute)*parseInt(j)),
    744662                                                                                'axe_y1':parseFloat(value_haute.axe_y1)+(parseFloat(moyenne_basse)*parseInt(j))
     
    771689                x.range([0, real_width]).domain([xmin,xmax]);
    772690                y.domain([ymin, ymax]).nice();
    773                
     691
    774692                step = x(values2[1].axe_x)-x(values2[0].axe_x);
    775693                axis_translate = Math.ceil(30/step);
     
    791709                                if((values_perspective2_haute.length > 0) && (values_perspective2_haute[values_perspective2_haute.length-1].axe_x+1) < row[0]){
    792710                                        j =  1;
    793                                         i = row[0] - values_perspective2_haute[values_perspective2_haute.length-1].axe_x;
     711                                        i = parseInt(row[0]) - values_perspective2_haute[values_perspective2_haute.length-1].axe_x;
    794712                                        var value_haute = values_perspective2_haute[values_perspective2_haute.length-1];
    795713                                        var value_mediane = values_perspective2_mediane[values_perspective2_mediane.length-1];
     
    811729                                        }
    812730                                }
    813                                 values_perspective2_haute.push({'axe_x': parseFloat(row[0]).toFixed(),'axe_y':row[3],'axe_y1':row[1]});
    814                                 values_perspective2_mediane.push({'axe_x': parseFloat(row[0]).toFixed(),'axe_y':row[2]});
     731                                values_perspective2_haute.push({'axe_x': parseFloat(row[0]).toFixed(),'axe_y':parseFloat(row[3]),'axe_y1':parseFloat(row[1])});
     732                                values_perspective2_mediane.push({'axe_x': parseFloat(row[0]).toFixed(),'axe_y':parseFloat(row[2])});
    815733                        });
    816734                       
     
    838756                                .attr("id", "clip_perspective")
    839757                                .append("rect")
    840                                         .attr("width", x(date_actuelle)-x(values_perspective1_haute[0].axe_x))
    841                                         .attr("height", height)
     758                                        .attr("width",x(date_actuelle)-x(values_perspective1_haute[0].axe_x))
     759                                        .attr("height",height)
    842760                                        .attr("transform", "translate(" + x(values_perspective1_haute[0].axe_x) + ",0)");
    843761                        perspectives.append("path")
     
    871789
    872790                        // Ajout du groupe pour Aujourd'hui
    873                         ligne_demain_groupe = svg.select('.paths').append("g").attr("class", "tomorrow-line");
     791                        ligne_demain_groupe = svg.select('.paths').append("g").attr("class","tomorrow-line");
    874792
    875793                        // Ajout de la ligne d'aujourd'hui
     
    877795                                .datum(values[values.length-1])
    878796                                .append("line")
    879                                         .attr( 'class', 'ligne_demain second_plan' )
    880                                         .attr("x1", function( d ) { return x( d.axe_x ); })
    881                                         .attr("x2",function( d ) { return x( d.axe_x ); })
    882                                         .attr("y1",(image_demain_height+10)).attr("y2", height);
     797                                        .attr('class','ligne_demain second_plan')
     798                                        .attr("x1",function(d) { return x(d.axe_x); })
     799                                        .attr("x2",function(d) { return x(d.axe_x); })
     800                                        .attr("y1",(image_demain_height+10)).attr("y2",height);
    883801
    884802                        // Ajout de l'image de la bougie
     
    887805                                .append("svg:image")
    888806                                        .attr("xlink:href", image_demain)
    889                                         .attr("x", function(d){
    890                                                 return x(d.axe_x)-(image_demain_width/2);
    891                                         })
    892                                         .attr("y", "2")
     807                                        .attr("x", function(d){ return x(d.axe_x)-(image_demain_width/2);})
    893808                                        .attr("width", image_demain_width)
    894809                                        .attr("height", image_demain_height);
     810
    895811                        var rectangle = svg.select('.paths').append("rect")
    896812                                .attr("class","legende_perspective")
    897                                 .attr("x", x(values2[values2.length-1].axe_x)+12)
    898                                 .attr("y", height)
     813                                .attr("x",x(values2[values2.length-1].axe_x)+12)
     814                                .attr("y",height)
    899815                                .attr("width", x(values[values.length-1].axe_x)-x(values2[values2.length-1].axe_x)-20)
    900816                                .attr("height", 35);
     
    905821                                .style("text-anchor", "end")
    906822                                .text(infographie_lang.texte_estimations_ncdc);
    907                         var texte_fin = "<div class='close_box'><a href='#' onclick='return false;'>x</a></div><div class='contenu contenu_fin'>"+infographie_lang.texte_infos_giec+"</div>";
    908                                 infobox_update(texte_fin,function(){
    909                                         jQuery('.'+infobox_class).fadeIn(500).trigger('infobox_open');
    910                                 });
     823                        var texte_fin = "<div class='contenu_fin'>"+infographie_lang.texte_infos_giec+"</div>";
     824                       
     825                        infobox_update(texte_fin);
    911826                       
    912827                        step = x(values[values.length-1].axe_x)-x(values[values.length-2].axe_x);
     
    990905                                        .attr("x1", function( d ) { return x( d.axe_x ); })
    991906                                        .attr("x2",function( d ) { return x( d.axe_x ); })
    992                                         .attr("y1",80).attr("y2", height);
     907                                        .attr("y1",image_demain_height+10).attr("y2", height);
    993908
    994909                        // Ajout de l'image de la bougie
     
    997912                                .append("svg:image")
    998913                                        .attr("xlink:href", image_demain)
    999                                         .attr("x", function(d){
    1000                                                 return x(d.axe_x)-(image_demain_width/2);
    1001                                         })
    1002                                         .attr("y", "2")
     914                                        .attr("x", function(d){return x(d.axe_x)-(image_demain_width/2);})
    1003915                                        .attr("width", image_demain_width)
    1004916                                        .attr("height", image_demain_height);
    1005917                        var rectangle = svg.select('.paths').append("rect")
    1006918                                .attr("class","legende_perspective")
    1007                                 .attr("x", x(values2[values2.length-1].axe_x)+12)
    1008                                 .attr("y", height)
    1009                                 .attr("width", x(values[values.length-1].axe_x)-x(values2[values2.length-1].axe_x)-20)
    1010                                 .attr("height", 35);
     919                                .attr("x",x(values2[values2.length-1].axe_x)+12)
     920                                .attr("y",height)
     921                                .attr("width",x(values[values.length-1].axe_x)-x(values2[values2.length-1].axe_x)-20)
     922                                .attr("height",35);
    1011923                        var text_rectangle = svg.select('.paths').append("text")
    1012924                                .attr("x",x(values[values.length-1].axe_x)-20)
    1013925                                .attr("y",(height+20))
    1014                                 .attr("class", "legende_perspective_text")
    1015                                 .style("text-anchor", "end")
     926                                .attr("class","legende_perspective_text")
    1016927                                .text(infographie_lang.texte_estimations_ncdc);
    1017                         var texte_fin = "<div class='close_box'><a href='#' onclick='return false;'>x</a></div><div class='contenu contenu_fin'>Le Groupe d’experts intergouvernemental sur l’évolution du climat (Giec) travaille sur les changements climatiques depuis 1988. Voici les deux scénarios extrêmes de ses estimations pour l'évolution des températures à la surface du globe entre 2012 et 2100.</div>";
    1018                                 infobox_update(texte_fin,function(){
    1019                                         jQuery('.'+infobox_class).fadeIn().trigger('infobox_open');
    1020                                 });
     928                        var texte_fin = "<div class='contenu_fin'>"+infographie_lang.texte_infos_giec+"</div>";
     929                                infobox_update(texte_fin);
    1021930                       
    1022931                        perspective_ok = true;
Note: See TracChangeset for help on using the changeset viewer.