Changeset 8082 for plugins_spip


Ignore:
Timestamp:
01/18/14 14:44:29 (6 years ago)
Author:
kent1
Message:

On revient un peu en arrière... et on améliore un peu

File:
1 edited

Legend:

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

    r8078 r8082  
    6464       
    6565        tip_perspective = d3.select('#'+container_id).append("div")
    66                                                 .attr("class","tooltip tooltip_perspective")
    67                                                 .style("display",'none');
     66                                                .attr("class","tooltip tooltip_perspective").style("display",'none');
    6867       
    6968        // Ajout de l'infobox'
    7069        infobox = d3.select('#'+container_id).append("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');
     70                                .attr("class",infobox_class).style("display",'none')
     71                                .html('<div class="close_box"><a href="#" onclick="return false;">x</a></div><div class="contenu"></div>');
    7472
    7573        // Ajouter les flÚches pour avancer et reculer
    7674        arrow_nav       = d3.select('#'+container_id).append("div").attr("class","arrows_nav")
    7775                                        .html('<div class="left"></div><div class="right"></div>');
    78        
     76
    7977        /**
    8078         * Récupération des données et on fabrique nos groupes de valeurs
     
    153151                        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>";
    154152                }
    155                
     153
    156154                date_aujourdhui = parseInt(values[values.length-1].axe_x);
    157155                climat_draw(translate_defaut);
     
    164162                                        callback_infobox_close = function(){
    165163                                                climat_infobox_update('<div class="contenu_fin">'+infographie_lang.anecdote_scroll+'</div>',function(){
    166                                                         infobox_open();
     164                                                        jQuery('.'+infobox_class).trigger('infobox_open');
    167165                                                        callback_infobox_close = false;
    168166                                                });
     
    177175function climat_infobox_update(content,callback){
    178176        if(infobox){
    179                 clearInterval(progress);
     177                //clearInterval(progress);
    180178                infobox_opened = true;
    181179                // On met le contenu
     
    201199                        // Si on a donné une fonction comme callback => on l'exécute
    202200                        if(typeof(callback) == 'function') callback();
    203                         infobox_open();
    204                 });
     201                }).trigger('infobox_open');
    205202        }
    206203}
     
    224221                return false;
    225222        }
    226        
     223
    227224        moving = true;
    228        
     225
    229226        values.every(function(row, i){
    230227                if(parseInt(row.axe_x) == date_actuelle){
     
    237234        var translatex = x(value_origine.axe_x)-x(d.axe_x)+parseFloat(translate_defaut),
    238235                valeur_tooltip = parseFloat(d.axe_y).toFixed(2).replace('.',',');
    239         jQuery('.tooltip_normal').text(valeur_tooltip+''+infographie_lang.unite);
     236        d3.select('.tooltip_normal').text(valeur_tooltip+''+infographie_lang.unite);
    240237
    241238        // Si on a un commentaire, on l'affiche à peu prÚs au moment de l'arrivée sur le point en question
     
    245242                        climat_infobox_update('<div class="logo">'+d.logo+'</div><div class="contenu_anecdote"><span class="annee">'+d.axe_x+'</span>'+d.commentaire+'</div>');
    246243                }
    247                 setTimeout(show_info,vitesse-30);
     244                setTimeout(show_info,vitesse-(vitesse/10));
    248245        }
    249246       
    250247        var tooltip_top = y(d.axe_y) - (jQuery('.tooltip_normal').outerHeight()/2);
    251248        if(date_actuelle <= date_aujourdhui){
    252                 jQuery('.tooltip_perspective').hide();
     249                d3.select('.tooltip_perspective').style('display','none');
    253250                vitesse = vitesse_origine;
    254251                var left = x(value_origine.axe_x)+parseFloat(translate_defaut)-jQuery('.tooltip_normal').outerWidth();
    255252                if(jQuery('.tooltip_normal').is(':hidden'))
    256                         d3.select('.tooltip_normal').transition().duration(vitesse)
    257                                 .style("top",tooltip_top+'px').style("left",left+'px').style("display","block");
     253                        d3.select('.tooltip_normal')
     254                                .style("top",tooltip_top+'px').style("left",left+'px')
     255                                .transition().duration(vitesse).style("display","block");
    258256                else
    259257                        d3.select('.tooltip_normal').transition().duration(vitesse)
     
    269267                                        move_again = moving = false;
    270268                        });
    271                 d3.select(".interaction").attr("transform", "translate(0,1)");
    272269
    273270                // Afficher le message de fin de données actuelles
    274                 if(date_actuelle == parseInt(values2[values2.length-1].axe_x)){
     271                if(date_actuelle == date_aujourdhui){
     272                        clearInterval(progress);
    275273                        var show_info = function(){
     274                                move_again = moving = false;
     275                                d3.select(".interaction").attr("transform", "translate(0,1)");
    276276                                if(date_naissance > values[0].axe_x && jeu_donnees == 1){
    277277                                        var degres = ((parseFloat(values[values.length-1].axe_y) - parseFloat(value_origine.axe_y)).toFixed(2)).replace('.',',');
     
    300300                                        var texte_fin = "<p>"+infographie_lang.texte_info_ppm_augmentation_age_mnt.replace('__annee_naissance__',date_naissance).replace('__age__',age).replace('__ppm__',ppm)+"</p>";
    301301                                }
    302 
    303                                 move_again = moving = false;
    304302
    305303                                if(texte_fin){
     
    325323                                                                                        var texte_fin = "<div class='contenu_fin'>"+infographie_lang.texte_infos_giec_co2+"</div>";
    326324                                                                                climat_infobox_update(texte_fin,function(){
    327                                                                                         infobox_open();
     325                                                                                        jQuery('.'+infobox_class).trigger('infobox_open');
    328326                                                                                        callback_infobox_close = false;
    329327                                                                                });
     
    333331                                }
    334332                        }
    335                         setTimeout(show_info,vitesse);
     333                        setTimeout(show_info,vitesse-(vitesse/10));
    336334                }
    337335        }
     
    385383                        .transition().duration(vitesse)
    386384                        .attr("transform", "translate("+translate_interactivite+", 1)").each("end", function(){
    387                                 if(move_again && !infobox_opened){
     385                                // Afficher le message de fin de données actuelles
     386                                if(perspective_ok && (date_actuelle == parseInt(values_perspective1_mediane[values_perspective1_mediane.length-1].axe_x))){
     387                                        move_again = moving = false;
     388                                        if(jeu_donnees == 1)
     389                                                var texte_fin = infographie_lang.texte_info_temp_fin_perspective.replace('__degre_min__',values_perspective2_mediane[values_perspective2_mediane.length-1].axe_y).replace('__degre_max__',values_perspective1_mediane[values_perspective1_mediane.length-1].axe_y);
     390                                        else
     391                                                var texte_fin = infographie_lang.texte_info_ppm_fin_perspective.replace('__ppm_min__',values_perspective2_mediane[values_perspective2_mediane.length-1].axe_y).replace('__ppm_max__',values_perspective1_mediane[values_perspective1_mediane.length-1].axe_y);
     392
     393                                        if(texte_fin)
     394                                                climat_infobox_update('<div class="contenu_fin">'+texte_fin+'</div>',function(){
     395                                                        jQuery('.'+infobox_class).trigger('infobox_open');
     396                                                        callback_infobox_close = false;
     397                                                });
     398                                }
     399                                else if(move_again && !infobox_opened){
    388400                                        move_again = false
    389401                                        climat_graph_replace(valeur);
     
    391403                                        move_again = moving = false;
    392404                        });
    393                
    394                 // Afficher le message de fin de données actuelles
    395                 if(perspective_ok && (date_actuelle == parseInt(values_perspective1_mediane[values_perspective1_mediane.length-1].axe_x))){
    396                         if(jeu_donnees == 1)
    397                                 var texte_fin = infographie_lang.texte_info_temp_fin_perspective.replace('__degre_min__',values_perspective2_mediane[values_perspective2_mediane.length-1].axe_y).replace('__degre_max__',values_perspective1_mediane[values_perspective1_mediane.length-1].axe_y);
    398                         else
    399                                 var texte_fin = infographie_lang.texte_info_ppm_fin_perspective.replace('__ppm_min__',values_perspective2_mediane[values_perspective2_mediane.length-1].axe_y).replace('__ppm_max__',values_perspective1_mediane[values_perspective1_mediane.length-1].axe_y);
    400 
    401                         move_again = moving = false;
    402 
    403                         if(texte_fin)
    404                                 climat_infobox_update('<div class="contenu_fin">'+texte_fin+'</div>',function(){
    405                                         infobox_open();
    406                                         callback_infobox_close = false;
    407                                 });
    408                 }
    409405        }
    410406}
     
    429425                .selectAll("text")
    430426                        .style("text-anchor", "start")
    431                         .attr("dy", "-0.6em").attr("dx", "1em")
     427                        .attr("dy","-0.6em").attr("dx", "1em")
    432428                        .attr("transform", function(d) { return "rotate(-270)" });
    433429       
     
    485481                        .append("line")
    486482                                .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
     483                                .attr("x1",function(d){return x(d.axe_x);})
     484                                .attr("x2",function(d){return x(d.axe_x);}) // vertical line so same value on each
    489485                                .attr("y1",image_naissance.height+10).attr("y2", height);
    490486
     
    494490                        .append("svg:image")
    495491                                .attr("xlink:href", image_naissance.url)
    496                                 .attr("x", function(d){return x(value_origine.axe_x)-(image_naissance.width/2);})
     492                                .attr("x",function(d){return x(value_origine.axe_x)-(image_naissance.width/2);})
    497493                                .attr("width", image_naissance.width).attr("height", image_naissance.height);
    498494        }
     
    777773        });
    778774
    779         jQuery('.'+infobox_class).on('infobox_close',infobox_close);
     775        jQuery('.'+infobox_class).on('infobox_open',function(){
     776                moving = move_again = false;
     777                setTimeout(function(){infobox_fermer=true;},vitesse*3);
     778                clearInterval(progress);
     779        });
     780        jQuery('.'+infobox_class).on('infobox_close',function(){
     781                if(infobox_opened && infobox_fermer){
     782                        jQuery(this).fadeOut(500,function(){
     783                                infobox_fermer = infobox_opened = false;
     784                                if(typeof(callback_infobox_close) == 'function') callback_infobox_close();
     785                        });
     786                }
     787        });
    780788}
    781789
    782 function 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 
    791 function infobox_open(){
    792         moving = move_again = false;
    793         setTimeout(function(){infobox_fermer=true;},700);
    794         clearInterval(progress);
    795 }
    796790function climat_drawline_demain(){
    797791        // Ajout du groupe pour Aujourd'hui
     
    897891                translate_new = x(date_origine-move+axis_translate);
    898892                translate_new = (translate_new < 0) ? (translate_new * -1) : '-'+translate_new;
    899                
     893
    900894                /**
    901895                 * On parse la perspective basse
     
    1005999                var parsedCSV = d3.csv.parseRows(datasetText);
    10061000                // On ajoute la ligne de données pour la période aprÚs naissance
    1007                 parsedCSV.forEach(function(row, i){
     1001                parsedCSV.forEach(function(row,i){
    10081002                        new_row_mediane = {'axe_x':parseFloat(row[0]).toFixed(),'axe_y':parseFloat(row[1]).toFixed(2)};
    10091003                        values.push(new_row_mediane);
     
    10241018                 */
    10251019                 
    1026                 real_width = (graph.width/(parseInt(values[values.length-1].axe_x)-date_origine+12))*(xmax-xmin);
     1020                real_width = (graph.width/(parseInt(values[values.length-1].axe_x)-date_origine+18))*(xmax-xmin);
    10271021                x.range([0, real_width]).domain([xmin,xmax]);
    10281022                y.domain([ymin, ymax]).nice();
     
    10301024                step = x(values2[1].axe_x)-x(values2[0].axe_x);
    10311025                axis_translate = Math.ceil(30/step);
    1032                
    1033                 translate_defaut = x(date_origine-((date_aujourdhui-date_origine)+7-axis_translate));
     1026                birth_width = d3.select('.birth-line').node().getBBox().width;
     1027                var move = parseInt(((birth_width/step)+3).toFixed());
     1028
     1029                translate_defaut = x(date_origine-((date_aujourdhui-date_origine)+move-axis_translate));
    10341030                translate_defaut = (translate_defaut < 0) ? (translate_defaut*-1) : '-'+translate_defaut;
    1035                 translate_new = x(date_origine-7+axis_translate);
     1031                translate_new = x(date_origine-move+axis_translate);
    10361032                translate_new = (translate_new < 0) ? (translate_new*-1) : '-'+translate_new;
    10371033               
     
    10421038                        var parsedCSV = d3.csv.parseRows(datasetText);
    10431039                        // On ajoute la ligne de données pour la période aprÚs naissance
    1044                         parsedCSV.forEach(function(row, i){
     1040                        parsedCSV.forEach(function(row,i){
    10451041                                if(parseFloat(row[1]).toFixed(2) <= values_perspective1_mediane[i].axe_y){
    10461042                                        values_perspective_trou.push({
Note: See TracChangeset for help on using the changeset viewer.