Changeset 7999


Ignore:
Timestamp:
12/22/13 13:00:11 (6 years ago)
Author:
kent1
Message:

On a modifié pas mal de choses suite aux premiers retours

Location:
plugins_spip/terraeco_infographie/trunk
Files:
2 edited

Legend:

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

    r7991 r7999  
    3030                        <div class="menu_top">
    3131                                <a href="[(#SELF|parametre_url{naissance,''}|parametre_url{donnees,''})]" title="<:terraeco:title_lien_home|attribut_html:>" class="spip_out">[(#CHEMIN{images/image_home.png}|balise_img{home}|inserer_attribut{onMouseOver,[this.src="(#CHEMIN{images/image_home_hover.png})"]}|inserer_attribut{onMouseOut,[this.src="(#CHEMIN{images/image_home.png})"]})]</a>
    32                                 <a href="http://www.terraeco.net" title="<:terraeco:title_lien_terraeco|attribut_html:>" class="spip_out">[(#CHEMIN{images/image_terraeco.png}|balise_img{terraeco}|inserer_attribut{onMouseOver,[this.src="(#CHEMIN{images/image_terraeco_hover.png})"]}|inserer_attribut{onMouseOut,[this.src="(#CHEMIN{images/image_terraeco.png})"]})]</a>
    33                                 <a href="http://www.twitter.com" title="<:terraeco:title_lien_twitter|attribut_html:>" class="spip_out">[(#CHEMIN{images/image_twitter.png}|balise_img{twitter}|inserer_attribut{onMouseOver,[this.src="(#CHEMIN{images/image_twitter_hover.png})"]}|inserer_attribut{onMouseOut,[this.src="(#CHEMIN{images/image_twitter.png})"]})]</a>
    34                                 <a href="http://www.facebook.com" title="<:terraeco:title_lien_facebook|attribut_html:>" class="spip_out">[(#CHEMIN{images/image_facebook.png}|balise_img{facebook}|inserer_attribut{onMouseOver,[this.src="(#CHEMIN{images/image_facebook_hover.png})"]}|inserer_attribut{onMouseOut,[this.src="(#CHEMIN{images/image_facebook.png})"]})]</a>
     32                                <a href="http://www.terraeco.net" title="<:terraeco:title_lien_terraeco|attribut_html:>" class="spip_out" target="_blank">[(#CHEMIN{images/image_terraeco.png}|balise_img{terraeco}|inserer_attribut{onMouseOver,[this.src="(#CHEMIN{images/image_terraeco_hover.png})"]}|inserer_attribut{onMouseOut,[this.src="(#CHEMIN{images/image_terraeco.png})"]})]</a>
     33                                <a href="http://www.twitter.com" title="<:terraeco:title_lien_twitter|attribut_html:>" class="spip_out" target="_blank">[(#CHEMIN{images/image_twitter.png}|balise_img{twitter}|inserer_attribut{onMouseOver,[this.src="(#CHEMIN{images/image_twitter_hover.png})"]}|inserer_attribut{onMouseOut,[this.src="(#CHEMIN{images/image_twitter.png})"]})]</a>
     34                                <a href="http://www.facebook.com" title="<:terraeco:title_lien_facebook|attribut_html:>" class="spip_out" target="_blank">[(#CHEMIN{images/image_facebook.png}|balise_img{facebook}|inserer_attribut{onMouseOver,[this.src="(#CHEMIN{images/image_facebook_hover.png})"]}|inserer_attribut{onMouseOut,[this.src="(#CHEMIN{images/image_facebook.png})"]})]</a>
    3535                        </div>
    3636                        <BOUCLE_si_pas_naissance(CONDITION){si #ENV{naissance}|non|ou{#ENV{naissance}|<{1900}}|ou{#ENV{naissance}|>{2010}}|oui}>
     
    6868                                <div class="infographie[ (#CSS_CLASS)]">
    6969                                        <div class="description_donnees">
    70                                                 [<h3>(#TITRE)</h3>]
    71                                                 [<div class="texte">
     70                                                [<h3 class="#EDIT{titre}">(#TITRE)</h3>]
     71                                                [<div class="texte #EDIT{texte}">
    7272                                                (#TEXTE)
    7373                                                </div>]
    74                                                 [<div class="credits">
     74                                                [<div class="credits #EDIT{credits}">
    7575                                                (#CREDITS)
    7676                                                </div>]
     
    113113                                                                        var val = -1;
    114114                                                                graph_replace(val);
    115                                                         }else if($('.infobox').is(':visible')){
    116                                                                
    117115                                                        }
    118116                                                        return false;
    119117                                                });
    120118                                               
    121                                                 // Avance le graph de 1 ou le recule de -1
     119                                                // Avance le graph de 1 ou le recule de -1 (en année)
    122120                                                function graph_replace(valeur){
    123121                                                        if(((valeur == '+1') && date_origine == values[values.length-1].axe_x) || ((valeur == '-1') && date_origine  == values[0].axe_x))
     
    142140                                                        var translatex = x(value_origine.axe_x)-x(d.axe_x)-translate_defaut;
    143141
    144                                                         $('.tooltip').html(+d.axe_y+'#UNITE');
    145                                                         var left = x(value_naissance.axe_x)-translate_defaut-$('.tooltip').outerWidth()-14;
     142                                                        $('.tooltip').text(+parseFloat(d.axe_y).toFixed(2)+'#UNITE');
     143                                                        console.log(parseFloat(d.axe_y).toFixed(2)+'#UNITE');
     144                                                        var left = x(value_naissance.axe_x)-translate_defaut-$('.tooltip').outerWidth()+5;
    146145                                                        var top = y(d.axe_y) - ($('.tooltip').outerHeight()/2);
    147146                                                        if($('.tooltip').is(':hidden'))
    148147                                                                $('.tooltip').css({'top':top,'left':left}).show();
    149148                                                        else
    150                                                                 $('.tooltip').animate({'top':top,'left':left},800);
     149                                                                $('.tooltip').animate({'top':top,'left':left},400);
    151150                                                       
    152151                                                        // Si on a un commentaire, on l'affiche
     
    154153                                                                var show_info = function(){
    155154                                                                        infobox
    156                                                                                 .html('<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>')
    157                                                                                         .transition()
    158                                                                                         .duration(800)
    159                                                                                         .style("display", 'block').each("end", function(){
    160                                                                                                 d3.select("#"+containerid).select('.infobox .close_box').on('click',function(){
    161                                                                                                         infobox
    162                                                                                                                 .transition()
    163                                                                                                                 .duration(500)
    164                                                                                                                         .style("display", 'none');
    165                                                                                                 });
     155                                                                                .html('<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>');
     156                                                                        jQuery('.contenu a').click(function(){
     157                                                                                jQuery(this).attr('target','_blank');
     158                                                                        });
     159                                                                        jQuery('iframe').each(function(){
     160                                                                                var ratio = jQuery(this).parents('div').width()/jQuery(this).width();
     161                                                                                jQuery(this).width('100%').height(jQuery(this).height()*ratio);
     162                                                                        });
     163                                                                        margin_top = (jQuery('#'+containerid+' svg').outerHeight()-$('.legende').height()-35-jQuery('.infobox').outerHeight())/2;
     164                                                                        jQuery('.infobox').css({'margin-top':margin_top});
     165                                                                        infobox
     166                                                                                .transition()
     167                                                                                .duration(800)
     168                                                                                .style("display", 'block').each("end", function(){
     169                                                                                        d3.select("#"+containerid).select('.infobox .close_box').on('click',function(){
     170                                                                                                infobox
     171                                                                                                        .transition()
     172                                                                                                        .duration(500)
     173                                                                                                                .style("display", 'none');
    166174                                                                                        });
     175                                                                                });
    167176                                                                        }
    168177                                                                setTimeout(show_info,400);
     
    170179                                                       
    171180                                                        d3.select(".paths").transition()
    172                                                                 .duration(700)
     181                                                                .duration(400)
    173182                                                                .attr("transform", "translate("+translatex+", 0)").each("end", function(){
    174183                                                                        moving = false;
     
    180189                                                                        if([(#ENV{naissance})] > values[0].axe_x && [(#ENV{donnees,1})] == 1){
    181190                                                                                var degres = (parseFloat(values[values.length-1].axe_y) - parseFloat(value_naissance.axe_y)).toFixed(2);
    182                                                                                 var texte_fin = "Vous êtes né(e) en "+[(#ENV{naissance})]+". Depuis votre naissance, la température à la surface du globe a augmenté de "+degres+" degrés.";
     191                                                                                if(degres.charAt(0) == '-'){
     192                                                                                        degres = degres.replace('-','');
     193                                                                                        var texte_fin = "Vous êtes né(e) en "+[(#ENV{naissance})]+". Depuis votre naissance,<br /> la température à la surface du globe<br />a diminué de "+degres+" degrés.";
     194                                                                                }else
     195                                                                                        var texte_fin = "Vous êtes né(e) en "+[(#ENV{naissance})]+". Depuis votre naissance,<br /> la température à la surface du globe<br />a augmenté de "+degres+" degrés.";
    183196                                                                        }
    184197                                                                        else if([(#ENV{naissance})] < values[0].axe_x && [(#ENV{donnees,1})] == 1){
    185198                                                                                var degres = (parseFloat(values[values.length-1].axe_y) - parseFloat(value_naissance.axe_y)).toFixed(2);
    186199                                                                                var age = (parseInt([(#ENV{naissance})]) - parseFloat(value_naissance.axe_x)).toString().replace('-','');
    187                                                                                 var texte_fin = "Vous êtes né(e) en "+[(#ENV{naissance})]+". Depuis vos "+age+" ans, la température à la surface du globe a augmenté de "+degres+" degrés.";
     200                                                                                if(degres.charAt(0) == '-'){
     201                                                                                        degres = degres.replace('-','');
     202                                                                                        var texte_fin = "Vous êtes né(e) en "+[(#ENV{naissance})]+". Depuis vos "+age+" ans,<br /> la température à la surface du globe<br />a diminué de "+degres+" degrés.";
     203                                                                                }else
     204                                                                                        var texte_fin = "Vous êtes né(e) en "+[(#ENV{naissance})]+". Depuis vos "+age+" ans,<br /> la température à la surface du globe<br />a augmenté de "+degres+" degrés.";
    188205                                                                        }
    189206                                                                        else if([(#ENV{naissance})] > values[0].axe_x && [(#ENV{donnees,1})] == 2){
    190207                                                                                var ppm = (parseFloat(values[values.length-1].axe_y) - parseFloat(value_naissance.axe_y)).toFixed(2);
    191                                                                                 var texte_fin = "Vous êtes né(e) en "+[(#ENV{naissance})]+". Depuis votre naissance, la concentration de CO2 dans l'atmosphÚre a augmenté de "+ppm+" PPM (en particules par millions).";
     208                                                                                var texte_fin = "Vous êtes né(e) en "+[(#ENV{naissance})]+". Depuis votre naissance,<br /> la concentration de CO2 dans l'atmosphÚre<br />a augmenté de "+ppm+" particules par millions.";
    192209                                                                        }
    193210                                                                        else if([(#ENV{naissance})] < values[0].axe_x && [(#ENV{donnees,1})] == 2){
    194211                                                                                var ppm = (parseFloat(values[values.length-1].axe_y) - parseFloat(value_naissance.axe_y)).toFixed(2);
    195212                                                                                var age = (parseInt([(#ENV{naissance})]) - parseFloat(value_naissance.axe_x)).toString().replace('-','');
    196                                                                                 var texte_fin = "Vous êtes né(e) en "+[(#ENV{naissance})]+". Depuis vos "+age+" ans, la concentration de CO2 dans l'atmosphÚre a augmenté de "+ppm+" PPM (en particules par millions).";
     213                                                                                var texte_fin = "Vous êtes né(e) en "+[(#ENV{naissance})]+". Depuis vos "+age+" ans,<br /> la concentration de CO2 dans l'atmosphÚre<br />a augmenté de "+ppm+" en particules par millions.";
    197214                                                                        }
    198215
    199216                                                                        if(texte_fin){
    200217                                                                                infobox
    201                                                                                         .html('<div class="close_box"><a href="#" onclick="return false;">x</a></div><div class="contenu contenu_fin">'+texte_fin+'</div>')
    202                                                                                                 .transition()
     218                                                                                        .html('<div class="close_box"><a href="#" onclick="return false;">x</a></div><div class="contenu contenu_fin">'+texte_fin+'</div>');
     219                                                                                jQuery('.contenu a').click(function(){
     220                                                                                        jQuery(this).attr('target','_blank');
     221                                                                                });
     222                                                                                margin_top = (jQuery('#'+containerid+' svg').outerHeight()-$('.legende').height()-35-jQuery('.infobox').outerHeight())/2;
     223                                                                                jQuery('.infobox').css({'margin-top':margin_top});
     224                                                                                infobox
     225                                                                                        .transition()
    203226                                                                                                .duration(800)
    204227                                                                                                .style("display", 'block').each("end", function(){
     
    210233                                                                                                        });
    211234                                                                                                });
    212                                                                                 }
    213235                                                                        }
     236                                                                }
    214237                                                                setTimeout(show_info,400);
    215238                                                        }
     
    245268                                                        .attr("class", "infobox")
    246269                                                        .html('<div class="close_box"><a href="#" onclick="return false;">x</a></div><div class="contenu contenu_fin"><:terraeco:anecdote_scroll:></div>');
    247                                                
     270                                                jQuery('.contenu a').click(function(){
     271                                                        jQuery(this).attr('target','_blank');
     272                                                });
     273                                               
     274                                                margin_top = (jQuery('#'+containerid+' svg').outerHeight()-$('.legende').height()-35-jQuery('.infobox').outerHeight())/2;
     275                                                jQuery('.infobox').css({'margin-top':margin_top});
     276
    248277                                                // Au click sur le graph, on cache l'infobox si visible
    249                                                 $('#'+containerid).on('click',function(){
    250                                                         if($('.infobox').is(':visible'))
    251                                                                 $('.infobox').fadeOut();
     278                                                jQuery('#'+containerid).on('click',function(){
     279                                                        if(jQuery('.infobox').is(':visible'))
     280                                                                jQuery('.infobox').fadeOut();
    252281                                                });
    253282                                               
     
    327356                                                        x.range([0, real_width]).domain([parseInt(xmin), parseInt(xmax)]);
    328357                                                        y.domain([ymin, ymax]).nice();
     358
    329359                                                        translate_defaut = x(d.axe_x);
    330                                                        
     360
    331361                                                        draw(translate_defaut);
    332362                                                        drawlines_interaction(translate_defaut);
     
    395425                                                                                        .transition().duration(400).attr('stroke-width','5');
    396426                                                                                infobox
    397                                                                                         .html('<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>')
    398                                                                                                 .transition()
    399                                                                                                 .duration(1000)
    400                                                                                                 .style("display", 'block');
     427                                                                                        .html('<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>');
     428                                                                                jQuery('.contenu a').click(function(){
     429                                                                                        jQuery(this).attr('target','_blank');
     430                                                                                });
     431                                                                                jQuery('iframe').each(function(){
     432                                                                                        var ratio = jQuery(this).parents('div').width()/jQuery(this).width();
     433                                                                                        jQuery(this).width('100%').height(jQuery(this).height()*ratio);
     434                                                                                });
     435                                                                                margin_top = (jQuery('#'+containerid+' svg').outerHeight()-$('.legende').height()-35-jQuery('.infobox').outerHeight())/2;
     436                                                                                jQuery('.infobox').css({'margin-top':margin_top});
     437                                                                                infobox
     438                                                                                        .transition()
     439                                                                                        .duration(1000)
     440                                                                                        .style("display", 'block');
    401441                                                                                d3.select("#"+containerid).select('.infobox .close_box').on('click',function(){
    402442                                                                                        d3.select('.infos_dots .active').classed("active", false)
     
    424464                                                                        }) // vertical line so same value on each
    425465                                                                        .attr("y1",80).attr("y2", height);
    426        
    427                                                         // Ajout du cercle en haut de la ligne de naissance
    428                                                         ligne_naissance_groupe
    429                                                                 .datum(value_naissance)
    430                                                                 .append("circle")
    431                                                                         .attr('class','circle_naissance')
    432                                                                         .attr( 'r', 20 )
    433                                                                         .attr("cx", function( d ) {
    434                                                                                 return x( d.axe_x );
    435                                                                         })
    436                                                                         .attr("cy",20);
    437 
    438                                                         // Ajout du texte "Votre naissance"
    439                                                         ligne_naissance_groupe
    440                                                                 .datum(value_naissance)
    441                                                                 .append("text")
    442                                                                         .attr('class','texte_naissance')
    443                                                                         .text('VOTRE NAISSANCE')
    444                                                                         .attr("x", function(d){
    445                                                                                 return x(d.axe_x);
    446                                                                         })
    447                                                                         .attr("y",60);
    448                                                        
     466
     467                                                        [(#SET{image_naissance,[(#CHEMIN{images/naissance_[(#CSS_CLASS).png]}|balise_img)]})]
    449468                                                        // Ajout de l'image de la bougie
    450469                                                        ligne_naissance_groupe
    451470                                                                .datum(value_naissance)
    452471                                                                .append("svg:image")
    453                                                                         .attr("xlink:href", "[(#CHEMIN{images/bougie.png}|timestamp)]")
     472                                                                        .attr("xlink:href", "[(#GET{image_naissance}|extraire_attribut{src})]")
    454473                                                                        .attr("x", function(d){
    455                                                                                 return x(value_naissance.axe_x)-17;
     474                                                                                return x(value_naissance.axe_x)-[(#GET{image_naissance}|extraire_attribut{width}|div{2})];
    456475                                                                        })
    457476                                                                        .attr("y", "2")
    458                                                                         .attr("width", "35")
    459                                                                         .attr("height", "35");
     477                                                                        .attr("width", "[(#GET{image_naissance}|extraire_attribut{width})]")
     478                                                                        .attr("height", "[(#GET{image_naissance}|extraire_attribut{height})]");
    460479                                                                       
    461480                                                       
     
    475494                                                                        }) // vertical line so same value on each
    476495                                                                        .attr("y1",80).attr("y2", height);
    477        
    478                                                         // Ajout du cercle en haut de la ligne de naissance
     496
     497                                                        [(#SET{image_aujd,[(#CHEMIN{images/aujourdhui_[(#CSS_CLASS).png]}|balise_img)]})]
     498                                                        // Ajout de l'image de la bougie
    479499                                                        ligne_aujd_groupe
    480500                                                                .datum(values[values.length-1])
    481                                                                 .append("circle")
    482                                                                         .attr('class','circle_aujd_main')
    483                                                                         .attr( 'r', 15 )
    484                                                                         .attr("cx", function( d ) {
    485                                                                                 return x( d.axe_x );
     501                                                                .append("svg:image")
     502                                                                        .attr("xlink:href", "[(#GET{image_aujd}|extraire_attribut{src})]")
     503                                                                        .attr("x", function(d){
     504                                                                                return x(d.axe_x)-[(#GET{image_aujd}|extraire_attribut{width}|div{2})];
    486505                                                                        })
    487                                                                         .attr("cy",20);
    488                                                        
    489                                                         // Ajout du cercle en haut de la ligne de naissance
    490                                                         ligne_aujd_groupe
    491                                                                 .datum(values[values.length-1])
    492                                                                 .append("circle")
    493                                                                         .attr('class','circle_aujd_small')
    494                                                                         .attr( 'r', 6 )
    495                                                                         .attr("cx", function( d ) {
    496                                                                                 return x( d.axe_x );
    497                                                                         })
    498                                                                         .attr("cy",20);
    499                                                         // Ajout du texte "Aujourd'hui"
    500                                                         ligne_aujd_groupe
    501                                                                 .datum(values[values.length-1])
    502                                                                 .append("text")
    503                                                                         .attr('class','texte_aujd')
    504                                                                         .text("AUJOURD'HUI")
    505                                                                         .attr("x", function(d){
    506                                                                                 return x(d.axe_x);
    507                                                                         })
    508                                                                         .attr("y",60);
     506                                                                        .attr("y", "2")
     507                                                                        .attr("width", "[(#GET{image_aujd}|extraire_attribut{width})]")
     508                                                                        .attr("height", "[(#GET{image_aujd}|extraire_attribut{height})]");
    509509                                                       
    510510                                                }
     
    544544                                </div>
    545545                                [<div class="logo_terraeco">
    546                                         <a href="http://www.terraeco.net">(#CHEMIN{images/logo_terraeco_normal.jpg}|image_reduire{100,20})</a>
     546                                        <a href="http://www.terraeco.net" class="spip_out" target="_blank">(#CHEMIN{images/logo_terraeco_normal.jpg}|image_reduire{100,20})</a>
    547547                                </div>]
    548548                                </BOUCLE_jeu_selectionne>
     
    552552                                <div class="liste_infographies">
    553553                                <BOUCLE_jeux(INFOGRAPHIES_DATAS spip_infographies_datas_liens){objet=infographie}{id_objet=#ID_INFOGRAPHIE}>
    554                                 <a href="[(#SELF|parametre_url{donnees,#ID_INFOGRAPHIES_DATA})]">[(#LOGO_INFOGRAPHIES_DATA|image_reduire{300,300})]</a>
     554                                <a href="[(#SELF|parametre_url{donnees,#ID_INFOGRAPHIES_DATA})]">[(#LOGO_INFOGRAPHIES_DATA|image_reduire{250,250})]</a>
    555555                                </BOUCLE_jeux>
    556556                                </div>
     
    562562                </div>
    563563        </div>
    564         [(#ENV{donnees}|non)[<footer class="footer clearfix">
     564        [(#ENV{donnees}|non)[<footer class="footer clearfix #EDIT{credits}">
    565565                (#CREDITS|image_reduire{100,100})
    566566        </footer>]]
  • plugins_spip/terraeco_infographie/trunk/lang/terraeco_fr.php

    r7991 r7999  
    2222        'title_lien_twitter' => 'Suivez-nous sur Twitter',
    2323        'title_lien_facebook' => 'Suivez-nous sur Facebook',
     24        'title_lien_terraeco' => 'Terraeco.net'
    2425
    2526);
Note: See TracChangeset for help on using the changeset viewer.