Changeset 8078 for plugins_spip


Ignore:
Timestamp:
01/18/14 11:46:33 (6 years ago)
Author:
kent1
Message:

Améliorations, notamment utiliser les transitions de d3.js, plus performantes que celles de jQuery

File:
1 edited

Legend:

Unmodified
Added
Removed
  • plugins_spip/terraeco_infographie/trunk/javascript/infographie.js

    r8077 r8078  
    77        height = ymax = ymax_origine = translate_defaut = step = 0,
    88        vitesse = vitesse_origine = 200,
    9         svg = paths = infobox = tip = tip_perspective = moving = move_again = callback_infobox_close = second_callback = progress = perspective_ok = infobox_fermer = infobox_open = false;
     9        svg = paths = infobox = tip = tip_perspective = moving = move_again = callback_infobox_close = second_callback = progress = perspective_ok = infobox_fermer = infobox_opened = false;
    1010
    1111// Un générateur de lignes
    1212var line = d3.svg.line()
    13         .x(function(d) {return x(d.axe_x);})
    14         .y(function(d) {return y(d.axe_y);});
     13                        .x(function(d) {return x(d.axe_x);})
     14                        .y(function(d) {return y(d.axe_y);});
    1515
    1616// Un générateur de zones
    1717var area = d3.svg.area()
    18         .x(function(d)  {return x(d.axe_x);})
    19         .y0(function(d) {return y(d.axe_y);})
    20         .y1(function(d) {return y(d.axe_y1);});
     18                        .x(function(d)  {return x(d.axe_x);})
     19                        .y0(function(d) {return y(d.axe_y);})
     20                        .y1(function(d) {return y(d.axe_y1);});
    2121
    2222/**
     
    5151        var gradient_perspective1 = defs.append('linearGradient')
    5252                                .attr('id','gradient_perspective1')
    53                                 .attr('x1','0')
    54                                 .attr('x2','0')
    55                                 .attr('y1','0')
    56                                 .attr('y2','1');
     53                                .attr('x1','0').attr('x2','0').attr('y1','0').attr('y2','1');
    5754
    5855        gradient_perspective1.append('stop')
    59                 .attr('class','gradient_perspective1_stop1')
    60                 .attr('offset','0%');
     56                .attr('class','gradient_perspective1_stop1').attr('offset','0%');
    6157
    6258        gradient_perspective1.append( 'stop' )
    63                 .attr('class','gradient_perspective1_stop2')
    64                 .attr('offset','100%');
     59                .attr('class','gradient_perspective1_stop2').attr('offset','100%');
    6560       
    6661        // Ajouter le tooltip que l'on cache automatiquement
    6762        tip = d3.select('#'+container_id).append("div")
    68                 .attr("class","tooltip tooltip_normal")
    69                 .style("display",'none');
     63                        .attr("class","tooltip tooltip_normal").style("display",'none');
    7064       
    7165        tip_perspective = d3.select('#'+container_id).append("div")
    72                 .attr("class","tooltip tooltip_perspective")
    73                 .style("display",'none');
     66                                                .attr("class","tooltip tooltip_perspective")
     67                                                .style("display",'none');
    7468       
    7569        // Ajout de l'infobox'
    7670        infobox = d3.select('#'+container_id).append("div")
    77                         .attr("class",infobox_class)
    78                         .style("display",'none');
    79 
    80         jQuery('.'+infobox_class).html('<div class="close_box"><a href="#" onclick="return false;">x</a></div><div class="contenu"></div>');
     71                                .attr("class",infobox_class)
     72                                .html('<div class="close_box"><a href="#" onclick="return false;">x</a></div><div class="contenu"></div>')
     73                                .style("display",'none');
    8174
    8275        // Ajouter les flÚches pour avancer et reculer
    83         arrow_nav = d3.select('#'+container_id).append("div").attr("class","arrows_nav")
    84                 .html('<div class="left"></div><div class="right"></div>');
     76        arrow_nav       = d3.select('#'+container_id).append("div").attr("class","arrows_nav")
     77                                        .html('<div class="left"></div><div class="right"></div>');
    8578       
    8679        /**
     
    8982        d3.json(file, function(error, data) {
    9083                values = data;
    91                 values.forEach(function(row, i){
     84                values.forEach(function(row,i){
    9285                        row.axe_x = parseFloat(row.axe_x).toFixed();
    9386                        row.axe_y = parseFloat(row.axe_y.replace(',','.')).toFixed(2);
     
    115108                 * et le point d'origine la valeur min
    116109                 */
    117                 var origine = xmin;
    118                 var diff = 7-(date_origine - parseInt(xmin));
    119                
     110                var origine = xmin,
     111                        diff = 7-(date_origine - parseInt(xmin));
     112
    120113                /**
    121114                 * Si naissance - 7 ans est dans la visu, on part de là
     
    129122                x.range([0, real_width]).domain([parseInt(xmin), parseInt(xmax)]);
    130123                y.domain([ymin, ymax]).nice();
    131                
     124
    132125                // Utilisation de every pour couper lorsque l'on a trouvé
    133126                values.every(function(row,i){
     
    138131                        return true;
    139132                });
    140                
     133
    141134                step = x(values2[1].axe_x)-x(values2[0].axe_x);
    142135                translate_defaut = '-'+x(d.axe_x);
     
    157150                }
    158151                else if(date_naissance > values[0].axe_x && jeu_donnees == 2){
    159                         var ppm = (parseFloat(value_origine.axe_y) - parseFloat(values[0].axe_y)).toFixed(2);
    160                         ppm = ppm.replace('-','').replace('.',',');
     152                        var ppm = (parseFloat(value_origine.axe_y) - parseFloat(values[0].axe_y)).toFixed(2).replace('-','').replace('.',',');
    161153                        var texte_debut = "<p>"+infographie_lang.texte_info_ppm_augmentation_debut_naissance.replace('__annee_debut__',annee_debut).replace('__ppm__',ppm)+"</p><p><small>"+infographie_lang.texte_info_temp_debut_releves+"</small></p>";
    162154                }
     
    172164                                        callback_infobox_close = function(){
    173165                                                climat_infobox_update('<div class="contenu_fin">'+infographie_lang.anecdote_scroll+'</div>',function(){
    174                                                         jQuery('.'+infobox_class).trigger('infobox_open');
     166                                                        infobox_open();
    175167                                                        callback_infobox_close = false;
    176168                                                });
     
    185177function climat_infobox_update(content,callback){
    186178        if(infobox){
    187                 infobox_open = true;
     179                clearInterval(progress);
     180                infobox_opened = true;
    188181                // On met le contenu
    189                 jQuery('.'+infobox_class+' .contenu').html(content);
     182                d3.select('.'+infobox_class+' .contenu').html(content);
    190183
    191184                // Les lien en target="_blank"
     
    201194               
    202195                // On la replace en hauteur
    203                 var xdata_height = d3.select('.x.axis').node().getBBox().height;
    204                 var margin_top = (jQuery('#'+container_id+' svg').outerHeight()-jQuery('.legende').height()-xdata_height-jQuery('.'+infobox_class).outerHeight())/2;
    205                 jQuery('.'+infobox_class).css({'margin-top':margin_top});
     196                var xdata_height = d3.select('.x.axis').node().getBBox().height,
     197                        margin_top = (d3.select('#'+container_id+' svg').node().getBBox().height-d3.select('.legende').node().getBBox().height-xdata_height-jQuery('.'+infobox_class).outerHeight())/2;
     198                d3.select('.'+infobox_class).style('margin-top',margin_top+'px');
    206199
    207200                jQuery('.'+infobox_class).fadeIn(500,function(){
    208201                        // Si on a donné une fonction comme callback => on l'exécute
    209202                        if(typeof(callback) == 'function') callback();
    210                 }).trigger('infobox_open');
     203                        infobox_open();
     204                });
    211205        }
    212206}
     
    222216function climat_graph_replace(valeur){
    223217        date_actuelle = date_actuelle+valeur;
    224         if((!perspective_ok && date_actuelle > parseInt(values[values.length-1].axe_x)) || (date_actuelle < parseInt(values[0].axe_x)) || (perspective_ok && parseInt(date_actuelle) > parseInt(values[values.length-1].axe_x)) || infobox_open){
     218        if((!perspective_ok && date_actuelle > parseInt(values[values.length-1].axe_x)) || (date_actuelle < parseInt(values[0].axe_x)) || (perspective_ok && parseInt(date_actuelle) > parseInt(values[values.length-1].axe_x)) || infobox_opened){
    225219                move_again = moving = false;
    226220                if(date_actuelle < parseInt(values[0].axe_x))
     
    247241        // Si on a un commentaire, on l'affiche à peu prÚs au moment de l'arrivée sur le point en question
    248242        if(typeof(d.commentaire) == 'string' && d.commentaire.length > 1){
    249                 infobox_open = true;
     243                infobox_opened = true;
    250244                var show_info = function(){
    251245                        climat_infobox_update('<div class="logo">'+d.logo+'</div><div class="contenu_anecdote"><span class="annee">'+d.axe_x+'</span>'+d.commentaire+'</div>');
     
    260254                var left = x(value_origine.axe_x)+parseFloat(translate_defaut)-jQuery('.tooltip_normal').outerWidth();
    261255                if(jQuery('.tooltip_normal').is(':hidden'))
    262                         jQuery('.tooltip_normal').css({'top':tooltip_top,'left':left}).fadeIn();
     256                        d3.select('.tooltip_normal').transition().duration(vitesse)
     257                                .style("top",tooltip_top+'px').style("left",left+'px').style("display","block");
    263258                else
    264                         jQuery('.tooltip_normal').animate({'top':tooltip_top,'left':left},vitesse);
     259                        d3.select('.tooltip_normal').transition().duration(vitesse)
     260                                .style("top",tooltip_top+'px').style("left",left+'px');
     261
    265262                d3.select(".paths")
    266263                        .transition().duration(vitesse)
    267264                        .attr("transform", "translate("+translatex+", 0)").each("end", function(){
    268                                 if(move_again && !infobox_open){
    269                                         move_again = false
     265                                if(move_again && !infobox_opened){
     266                                        move_again = false;
    270267                                        climat_graph_replace(valeur);
    271268                                }else
     
    328325                                                                                        var texte_fin = "<div class='contenu_fin'>"+infographie_lang.texte_infos_giec_co2+"</div>";
    329326                                                                                climat_infobox_update(texte_fin,function(){
    330                                                                                         jQuery('.'+infobox_class).trigger('infobox_open');
     327                                                                                        infobox_open();
    331328                                                                                        callback_infobox_close = false;
    332329                                                                                });
     
    342339        else{
    343340                vitesse = (vitesse_origine/3);
    344                 valeur_tooltip_perspective = '';
    345                 var tooltip_perspective_top = 0, tooltip_perspective_left = 0,translate_interactivite = ((date_actuelle-date_aujourdhui)*step);
     341                var tooltip_perspective_top = 0, tooltip_perspective_left = 0,translate_interactivite = ((date_actuelle-date_aujourdhui)*step),valeur_tooltip_perspective = '';
    346342                values_perspective2_mediane.every(function(row, i){
    347343                        if(parseInt(row.axe_x) == date_actuelle){
     
    353349                });
    354350
    355                 jQuery('.tooltip_perspective').text(valeur_tooltip_perspective+''+infographie_lang.unite);
     351                d3.select('.tooltip_perspective').text(valeur_tooltip_perspective+''+infographie_lang.unite);
    356352
    357353                /**
     
    374370               
    375371                if(jQuery('.tooltip_normal').is(':hidden'))
    376                         jQuery('.tooltip_normal').css({'top':tooltip_top,'left':tooltip_left}).fadeIn(vitesse/1.2);
     372                        d3.select('.tooltip_normal').transition().duration(vitesse)
     373                                .style("top",tooltip_top+'px').style("left",tooltip_left+'px').style("display","block");
    377374                else
    378                         jQuery('.tooltip_normal').animate({'top':tooltip_top,'left':tooltip_left},vitesse/1.2);
     375                        d3.select('.tooltip_normal').transition().duration(vitesse)
     376                                .style("top",tooltip_top+'px').style("left",tooltip_left+'px');
    379377                if(jQuery('.tooltip_perspective').is(':hidden'))
    380                         jQuery('.tooltip_perspective').css({'top':tooltip_perspective_top,'left':tooltip_perspective_left}).fadeIn(vitesse/1.2);
     378                        d3.select('.tooltip_perspective').transition().duration(vitesse)
     379                                .style("top",tooltip_perspective_top+'px').style("left",tooltip_perspective_left+'px').style("display","block");
    381380                else
    382                         jQuery('.tooltip_perspective').animate({'top':tooltip_perspective_top,'left':tooltip_perspective_left},vitesse/1.2);
    383                
     381                        d3.selectAll('.tooltip_perspective').transition().duration(vitesse)
     382                                .style("top",tooltip_perspective_top+'px').style("left",tooltip_perspective_left+'px');
     383
    384384                d3.select(".interaction")
    385385                        .transition().duration(vitesse)
    386386                        .attr("transform", "translate("+translate_interactivite+", 1)").each("end", function(){
    387                                 if(move_again && !infobox_open){
     387                                if(move_again && !infobox_opened){
    388388                                        move_again = false
    389389                                        climat_graph_replace(valeur);
     
    403403                        if(texte_fin)
    404404                                climat_infobox_update('<div class="contenu_fin">'+texte_fin+'</div>',function(){
    405                                         jQuery('.'+infobox_class).trigger('infobox_open');
     405                                        infobox_open();
    406406                                        callback_infobox_close = false;
    407407                                });
     
    485485                        .append("line")
    486486                                .attr('class','ligne_naissance second_plan')
    487                                 .attr("x1", function( d ) { return x(d.axe_x); })
    488                                 .attr("x2",function( d ) { return x(d.axe_x); }) // vertical line so same value on each
     487                                .attr("x1", function(d) { return x(d.axe_x); })
     488                                .attr("x2",function(d) { return x(d.axe_x); }) // vertical line so same value on each
    489489                                .attr("y1",image_naissance.height+10).attr("y2", height);
    490490
     
    502502
    503503        // Ajout de la ligne de depart
    504         ligne_depart_aujd = ligne_depart_groupe
    505                 .datum(values[0])
     504        ligne_depart_aujd = ligne_depart_groupe.datum(values[0])
    506505                .append("line")
    507506                        .attr("class","ligne_depart second_plan")
    508                         .attr("x1", function(d){ return x(d.axe_x); })
     507                        .attr("x1",function(d){ return x(d.axe_x); })
    509508                        .attr("x2",function(d){ return x(d.axe_x); })
    510509                        .attr("y1",image_depart.height+10).attr("y2", height);
    511510
    512511        // Ajout de l'image de depart
    513         ligne_depart_groupe
    514                 .datum(values[0])
     512        ligne_depart_groupe.datum(values[0])
    515513                .append("svg:image")
    516514                        .attr("xlink:href", image_depart.url)
    517                         .attr("x", function(d){ return x(d.axe_x)-(image_depart.width/2);})
     515                        .attr("x",function(d){ return x(d.axe_x)-(image_depart.width/2);})
    518516                        .attr("width", image_depart.width).attr("height", image_depart.height);
    519517
     
    522520
    523521        // Ajout de la ligne d'aujourd'hui
    524         ligne_aujd = ligne_aujd_groupe
    525                 .datum(values2[values2.length-1])
     522        ligne_aujd = ligne_aujd_groupe.datum(values2[values2.length-1])
    526523                .append("line")
    527524                        .attr("class","ligne_aujd second_plan")
     
    531528
    532529        // Ajout de l'image de la bougie
    533         ligne_aujd_groupe
    534                 .datum(values2[values2.length-1])
     530        ligne_aujd_groupe.datum(values2[values2.length-1])
    535531                .append("svg:image")
    536532                        .attr("xlink:href", image_aujd.url)
     
    553549         * Ajouter la ligne d'interaction
    554550         */
    555         ligne_interactive =  ligne_interactive_groupe
    556                 .datum(value_actuelle)
    557                         .append("line")
    558                                 .attr('class', 'ligne_interactive')
    559                                 .attr("x1", function(d) { return x(d.axe_x)+parseFloat(translatex);})
    560                                 .attr("x2",function(d) { return x(d.axe_x)+parseFloat(translatex);})
    561                                 .attr("y1",image_naissance.height+10).attr("y2", height);
     551        ligne_interactive = ligne_interactive_groupe.datum(value_actuelle)
     552                                                        .append("line")
     553                                                        .attr('class', 'ligne_interactive')
     554                                                        .attr("x1", function(d) { return x(d.axe_x)+parseFloat(translatex);})
     555                                                        .attr("x2",function(d) { return x(d.axe_x)+parseFloat(translatex);})
     556                                                        .attr("y1",image_naissance.height+10).attr("y2", height);
    562557        /**
    563558         * Ajouter le triangle
     
    583578                        .on('click',function(d){
    584579                                d3.event.stopPropagation();
    585                                 if(infobox_open) return false;
     580                                if(infobox_opened) return false;
    586581                                jQuery('.infos_dots.active').attr('class','infos_dots');
    587582                                jQuery(this).attr('class','infos_dots active');
     
    595590                        });
    596591}
     592
    597593function climat_infographie_interactions(){
    598         jQuery('.arrows_nav').on('taphold',function(event){
    599                 event.preventDefault();
     594        jQuery('.arrows_nav').on('taphold',function(e){
     595                e.preventDefault();
    600596        });
    601597        // Au click sur les fleches on avance d'un cran ou on recule
    602598        jQuery('.arrows_nav > div')
    603                 .on('tap',function(event){
    604                         event.stopPropagation();
    605                         event.preventDefault();
     599                .on('tap',function(e){
     600                        e.stopPropagation();
     601                        e.preventDefault();
    606602                        clearInterval(progress);
    607603                })
    608                 .on('taphold',function(event){
    609                         event.stopPropagation();
    610                         event.preventDefault();
     604                .on('taphold',function(e){
     605                        e.stopPropagation();
     606                        e.preventDefault();
    611607                        var direction = jQuery(this).is('.left') ? -1:1;
    612                         if(infobox_open && infobox_fermer){
     608                        if(infobox_opened && infobox_fermer){
    613609                                callback_infobox_close = function(){
    614                                         if(!infobox_open && moving == false){
     610                                        if(!infobox_opened && moving == false){
    615611                                                climat_graph_replace(direction);
    616612                                                progress = setInterval(function(){
    617                                                                                                 if(!infobox_open) climat_graph_replace(direction);
     613                                                                                                if(!infobox_opened) climat_graph_replace(direction);
     614                                                                                                return false;
    618615                                                                                        }, vitesse);
    619616                                        }
     
    622619                                jQuery('.'+infobox_class).trigger('infobox_close');
    623620                        }
    624                         if(!infobox_open && moving == false){
     621                        if(!infobox_opened && moving == false){
    625622                                climat_graph_replace(direction);
    626623                                progress = setInterval(function(){
    627                                                                                 if(!infobox_open) climat_graph_replace(direction);
     624                                                                                if(!infobox_opened) climat_graph_replace(direction);
     625                                                                                return false;
    628626                                                                        }, vitesse);
    629627                        }
    630628                })
    631                 .on('click',function(event){
    632                         event.stopPropagation();
    633                         if(infobox_open && infobox_fermer){
     629                .on('click',function(e){
     630                        e.stopPropagation();
     631                        if(infobox_opened && infobox_fermer){
    634632                                if(typeof(callback_infobox_close) == 'function')
    635633                                        second_callback = callback_infobox_close;
     
    641639                                                second_callback = false;
    642640                                        }
    643                                         if(!infobox_open && moving == false){
     641                                        if(!infobox_opened && moving == false){
    644642                                                climat_graph_replace(direction);
    645643                                                progress = setInterval(function(){
    646                                                                                                 if(!infobox_open) climat_graph_replace(direction);
     644                                                                                                if(!infobox_opened) climat_graph_replace(direction);
     645                                                                                                return false;
    647646                                                                                        }, vitesse);
    648647                                        }
     
    651650                        }
    652651                })
    653                 .on('mouseenter',function(event){
    654                         event.stopPropagation();
     652                .on('mouseenter',function(e){
     653                        e.stopPropagation();
     654                        clearInterval(progress);
    655655                        var direction = jQuery(this).is('.left') ? -1:1;
    656                         if(!infobox_open && moving == false){
     656                        if(!infobox_opened && moving == false){
    657657                                climat_graph_replace(direction);
    658658                                progress = setInterval(function(){
    659                                                                                 if(!infobox_open) climat_graph_replace(direction);
     659                                                                                if(!infobox_opened) climat_graph_replace(direction);
     660                                                                                return false;
    660661                                                                        }, vitesse);
    661                         }else if(infobox_open && infobox_fermer){
     662                        }else if(infobox_opened && infobox_fermer){
    662663                                if(typeof(callback_infobox_close) == 'function')
    663664                                        second_callback = callback_infobox_close;
     
    668669                                                second_callback = false;
    669670                                        }
    670                                         if(!infobox_open && moving == false){
     671                                        if(!infobox_opened && moving == false){
    671672                                                climat_graph_replace(direction);
    672673                                                progress = setInterval(function(){
    673                                                                                                 if(!infobox_open) climat_graph_replace(direction);
     674                                                                                                if(!infobox_opened) climat_graph_replace(direction);
     675                                                                                                return false;
    674676                                                                                        }, vitesse);
    675677                                        }
     
    678680                        }
    679681                })
    680                 .on('mouseleave',function(event){
    681                         event.stopPropagation();
     682                .on('mouseleave',function(e){
     683                        e.stopPropagation();
    682684                        clearInterval(progress);
    683685                });
     
    690692                                 * Touche esc : ferme les anecdotes
    691693                                 */
     694                                e.preventDefault();
    692695                                clearInterval(progress);
    693                                 if(infobox_open)
     696                                if(infobox_opened)
    694697                                        jQuery('.'+infobox_class).trigger('infobox_close');
    695                                 e.preventDefault();
    696698                                break;
    697699                        case 32 : case 37 : case 39 : case 38 : case 40 :
     
    700702                                 * Avance ou recule sur la ligne de temps
    701703                                 */
     704                                e.preventDefault();
    702705                                clearInterval(progress);
    703                                 if(!infobox_open && moving == false){
     706                                if(!infobox_opened && moving == false){
    704707                                        var direction = (e.keyCode == 37 || e.keyCode == 40) ? -1 : 1;
    705708                                        climat_graph_replace(direction);
    706709                                        progress = setInterval(function(){
    707                                                                                         if(!infobox_open) climat_graph_replace(direction);
     710                                                                                        if(!infobox_opened) climat_graph_replace(direction);
     711                                                                                        return false;
    708712                                                                                }, vitesse);
    709                                 }else if(infobox_open && infobox_fermer)
     713                                }else if(infobox_opened && infobox_fermer)
    710714                                        jQuery('.'+infobox_class).trigger('infobox_close')
    711                                 e.preventDefault();
    712715                                break;
    713716                }
     
    718721                         */
    719722                        case 37 : case 38 : case 40 : case 39 : case 32 : case 27 :
     723                                e.preventDefault();
    720724                                clearInterval(progress);
    721                                 e.preventDefault();
    722725                        break;
    723726                }
    724727        });
    725728       
    726         jQuery('#'+container_id).on('mousewheel', function(event) {
    727                 event.preventDefault();
    728                 if(!infobox_open && moving == false){
    729                         var direction = (event.deltaY < 0 || event.deltaX > 0) ? 1 : -1;
    730                         climat_graph_replace(direction);
    731                 }else if(!infobox_open && !infobox_fermer && move_again == false)
     729        jQuery('#'+container_id).on('mousewheel', function(e) {
     730                e.preventDefault();
     731                clearInterval(progress);
     732                if(!infobox_opened && moving == false){
     733                        climat_graph_replace((e.deltaY < 0 || e.deltaX > 0) ? 1 : -1);
     734                }else if(!infobox_opened && !infobox_fermer && move_again == false)
    732735                        move_again = true;
    733                 else if(infobox_open && infobox_fermer)
     736                else if(infobox_opened && infobox_fermer)
    734737                        jQuery('.'+infobox_class).trigger('infobox_close')
    735738                return false;
    736         }).on("swipeleft",function(event){
    737                 event.preventDefault();
     739        }).on("swipeleft",function(e){
     740                e.preventDefault();
    738741                clearInterval(progress);
    739                 if(!infobox_open && moving == false){
     742                if(!infobox_opened && moving == false){
    740743                        climat_graph_replace(1);
    741744                        progress = setInterval(function(){
    742                                 if(!infobox_open) climat_graph_replace(1);
     745                                if(!infobox_opened) climat_graph_replace(1);
     746                                return false;
    743747                        }, vitesse);
    744748                        setTimeout(function(){clearInterval(progress);},vitesse*5);
    745                 }else if(!infobox_open && !infobox_fermer && move_again == false)
     749                }else if(!infobox_opened && !infobox_fermer && move_again == false)
    746750                        move_again = true;
    747                 else if(infobox_open && infobox_fermer)
     751                else if(infobox_opened && infobox_fermer)
    748752                        jQuery('.'+infobox_class).trigger('infobox_close')
    749753                return false;
    750         }).on("swiperight",function(event){
    751                 event.preventDefault();
     754        }).on("swiperight",function(e){
     755                e.preventDefault();
    752756                clearInterval(progress);
    753                 if(!infobox_open && moving == false){
     757                if(!infobox_opened && moving == false){
    754758                        climat_graph_replace(-1);
    755759                        progress = setInterval(function(){
    756                                 if(!infobox_open) climat_graph_replace(-1);
     760                                if(!infobox_opened) climat_graph_replace(-1);
     761                                return false;
    757762                        }, vitesse);
    758763                        setTimeout(function(){clearInterval(progress);},vitesse*5);
    759                 }else if(!infobox_open && !infobox_fermer && move_again == false)
     764                }else if(!infobox_opened && !infobox_fermer && move_again == false)
    760765                        move_again = true;
    761                 else if(infobox_open && infobox_fermer)
     766                else if(infobox_opened && infobox_fermer)
    762767                        jQuery('.'+infobox_class).trigger('infobox_close')
    763768                return false;
     
    765770       
    766771        // Au click sur le graph, on cache l'infobox si visible
    767         jQuery('#'+container_id+',.'+infobox_class+' .close_box').on('click',function(event){
    768                 event.preventDefault();
    769                 event.stopPropagation();
    770                 if(infobox_open && infobox_fermer)
     772        jQuery('#'+container_id+',.'+infobox_class+' .close_box').on('click',function(e){
     773                e.preventDefault();
     774                e.stopPropagation();
     775                if(infobox_opened && infobox_fermer)
    771776                        jQuery('.'+infobox_class).trigger('infobox_close');
    772777        });
    773778
    774         jQuery('.'+infobox_class).on('infobox_close',function(){
    775                 if(infobox_open && infobox_fermer){
    776                         jQuery(this).fadeOut(500,function(){
    777                                 infobox_fermer = infobox_open = false;
    778                                 if(typeof(callback_infobox_close) == 'function') callback_infobox_close();
    779                         });
    780                 }
    781         });
    782 
    783         jQuery('.'+infobox_class).on('infobox_open',function(){
    784                 moving = move_again = false;
    785                 setTimeout(function(){infobox_fermer=true;},700);
    786                 clearInterval(progress);
    787         });
    788 }
    789 
     779        jQuery('.'+infobox_class).on('infobox_close',infobox_close);
     780}
     781
     782function infobox_close(){
     783        if(infobox_opened && infobox_fermer){
     784                jQuery(this).fadeOut(500,function(){
     785                        infobox_fermer = infobox_opened = false;
     786                        if(typeof(callback_infobox_close) == 'function') callback_infobox_close();
     787                });
     788        }
     789}
     790
     791function infobox_open(){
     792        moving = move_again = false;
     793        setTimeout(function(){infobox_fermer=true;},700);
     794        clearInterval(progress);
     795}
    790796function climat_drawline_demain(){
    791797        // Ajout du groupe pour Aujourd'hui
     
    879885                 * - 3 années à la fin pour voir le "DEMAIN"
    880886                 */
    881                 real_width = (graph.width/(parseInt(values[values.length-1].axe_x)-date_origine+12))*(xmax-xmin);
     887                real_width = (graph.width/(parseInt(values[values.length-1].axe_x)-date_origine+18))*(xmax-xmin);
    882888                x.range([0, real_width]).domain([xmin,xmax]);
    883889                y.domain([ymin, ymax]).nice();
     
    885891                step = x(values2[1].axe_x)-x(values2[0].axe_x);
    886892                axis_translate = Math.ceil(30/step);
    887                 translate_defaut = x(date_origine-((date_aujourdhui-date_origine)+7-axis_translate));
     893                birth_width = d3.select('.birth-line').node().getBBox().width;
     894                var move = parseInt(((birth_width/step)+3).toFixed());
     895                translate_defaut = x(date_origine-((date_aujourdhui-date_origine)+move-axis_translate));
    888896                translate_defaut = (translate_defaut < 0) ? (translate_defaut*-1) : '-'+translate_defaut;
    889                 translate_new = x(date_origine-7+axis_translate);
     897                translate_new = x(date_origine-move+axis_translate);
    890898                translate_new = (translate_new < 0) ? (translate_new * -1) : '-'+translate_new;
    891899               
     
    10591067                        var perspectives = svg.selectAll('.paths').append("g").attr('class','perspectives');
    10601068                        perspectives.append("clipPath")
    1061                         .attr("id", "clip_perspective")
    1062                         .append("rect")
    1063                                 .attr("width",x(date_actuelle)-x(values_perspective1_mediane[0].axe_x))
    1064                                 .attr("height",height)
    1065                                 .attr("transform", "translate(" + x(values_perspective1_mediane[0].axe_x) + ",0)");
     1069                                .attr("id", "clip_perspective")
     1070                                .append("rect")
     1071                                        .attr("width",x(date_actuelle)-x(values_perspective1_mediane[0].axe_x))
     1072                                        .attr("height",height)
     1073                                        .attr("transform", "translate(" + x(values_perspective1_mediane[0].axe_x) + ",0)");
    10661074                        perspectives.append("path")
    10671075                                .attr("class", "area perspective perspective_trou")
     
    10691077                                .attr("d", area(values_perspective_trou));
    10701078                        perspectives.append("path")
    1071                                         .attr("class", "line perspective perspective1_mediane")
    1072                                         .attr("d", line(values_perspective1_mediane));
     1079                                .attr("class", "line perspective perspective1_mediane")
     1080                                .attr("d", line(values_perspective1_mediane));
    10731081                        perspectives.append("path")
    1074                                         .attr("class", "line perspective perspective2_mediane")
    1075                                         .attr("d", line(values_perspective2_mediane));
     1082                                .attr("class", "line perspective perspective2_mediane")
     1083                                .attr("d", line(values_perspective2_mediane));
    10761084                       
    10771085                        climat_draw_dots();
Note: See TracChangeset for help on using the changeset viewer.