source: plugins_spip/terraeco_infographie/trunk/infographie.html @ 8001

Last change on this file since 8001 was 8001, checked in by kent1, 7 years ago

On utilise l'évènement mousedown et mouseup sur les flèches en utilisant setInterval et clearInterval pour gérer quand on laisse appuyé

On utilise la même chose pour la gestion du clavier :

space ou haut ou droite avancent
gauche ou bas vont vers l'arrière
esc ferme les boites

File size: 30.7 KB
Line 
1<BOUCLE_principale(INFOGRAPHIES) {id_infographie}>
2<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3[(#REM) Cf.: http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
4]<!--[if lt IE 7 ]> <html dir="#LANG_DIR" lang="#LANG" xmlns="http://www.w3.org/1999/xhtml" xml:lang="#LANG" class="[(#LANG_DIR)][ (#LANG)] no-js ie ie6"> <![endif]-->
5<!--[if IE 7 ]> <html dir="#LANG_DIR" lang="#LANG" xmlns="http://www.w3.org/1999/xhtml" xml:lang="#LANG" class="[(#LANG_DIR)][ (#LANG)] no-js ie ie7"> <![endif]-->
6<!--[if IE 8 ]> <html dir="#LANG_DIR" lang="#LANG" xmlns="http://www.w3.org/1999/xhtml" xml:lang="#LANG" class="[(#LANG_DIR)][ (#LANG)] no-js ie ie8"> <![endif]-->
7<!--[if IE 9 ]> <html dir="#LANG_DIR" lang="#LANG" xmlns="http://www.w3.org/1999/xhtml" xml:lang="#LANG" class="[(#LANG_DIR)][ (#LANG)] no-js ie ie9"> <![endif]-->
8<!--[if (gt IE 9)|!(IE)]><!--> <html dir="#LANG_DIR" lang="#LANG" xmlns="http://www.w3.org/1999/xhtml" xml:lang="#LANG" class="[(#LANG_DIR)][ (#LANG)] no-js"> <!--<![endif]-->
9<head>
10<script type='text/javascript'>/*<![CDATA[*/(function(H){H.className=H.className.replace(/\bno-js\b/,'js')})(document.documentElement);/*]]>*/</script>
11<title>[(#TITRE|couper{80}|textebrut) - ][(#NOM_SITE_SPIP|textebrut)]</title>
12[<meta name="description" content="(#INTRODUCTION{150}|attribut_html)" />]
13[<link rel="canonical" href="(#URL_INFOGRAPHIE|url_absolue)" />]
14[<link rel="stylesheet" href="(#CHEMIN{css/reset.css}|direction_css)" type="text/css" />]
15[<link rel="stylesheet" href="(#CHEMIN{css/infographie.css}|direction_css)" type="text/css" />]
16#INSERT_HEAD
17[<script type="text/javascript" src="(#CHEMIN{javascript/jquery.mousewheel.js})"></script>]
18[<script type="text/javascript" src="(#CHEMIN{javascript/d3.v3.js})"></script>]
19</head>
20
21<body class="pas_surlignable page_infographie">
22<div class="page">
23       
24        <div class="main infographie[ (#INFO_CSS_CLASS{infographies_data,#ENV{donnees}})]">
25                <div class="wrapper hfeed">
26                <div class="content hentry" id="content">
27                        <div class="cartouche">
28                                <h1 class="#EDIT{titre} surlignable">[(#LOGO_ARTICLE_RUBRIQUE|image_reduire{40,*}) ]#TITRE</h1>
29                        </div>
30                        <div class="menu_top">
31                                <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" 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>
35                        </div>
36                        <BOUCLE_si_pas_naissance(CONDITION){si #ENV{naissance}|non|ou{#ENV{naissance}|<{1900}}|ou{#ENV{naissance}|>{2010}}|oui}>
37                        <div class="formulaire_spip[(#ENV{naissance}|strlen|et{#ENV{naissance}|<{1900}|ou{#ENV{naissance}|>{2010}}}|oui)erreur #SET{erreur_naissance,oui}]">
38                                <form  action="[(#SELF)]" method="get">
39                                        [(#SELF|form_hidden)]
40                                        <div class="champ">
41                                                <label for="naissance"><:terraeco:label_naissance:></label>
42                                                [(#GET{erreur_naissance}|=={oui}|oui)<span class="message_erreur">Êtes-vous sûr d'être né en #ENV{naissance} ?</span>]
43                                                <input type="text" class="texte" id="naissance" name="naissance" maxlength="4" size="4" value="#ENV{naissance,''}" />
44                                        </div>
45                                        <div class="boutons">
46                                                <input type="submit" class="submit" id="submit" value="OK" />
47                                        </div>
48                                </form>
49                        </div>
50                        </BOUCLE_si_pas_naissance>
51                        </B_si_pas_naissance>
52                                <BOUCLE_si_naissance_1951(CONDITION){si#ENV{naissance}|<{1951}|et{#ENV{donnees}|ou{#ENV{avt_naissance}}|non}|oui}>
53                                <div class="formulaire_spip">
54                                        <form  action="[(#SELF)]" method="get">
55                                                [(#SELF|form_hidden)]
56                                                <input type="hidden" name="avt_naissance" value="oui" />
57                                                <div class="champ">#SET{nb,#ENV{naissance}|moins{1951}|replace{'-',''}}
58                                                [<p>(#GET{nb}|singulier_ou_pluriel{terraeco:texte_1951_singulier,terraeco:texte_1951})</p>]
59                                                </div>
60                                                <div class="boutons">
61                                                        <input type="submit" class="submit" id="submit" value="OK" />
62                                                </div>
63                                        </form>
64                                </div>
65                                </BOUCLE_si_naissance_1951>
66                                </B_si_naissance_1951>
67                                <BOUCLE_jeu_selectionne(INFOGRAPHIES_DATAS){id_infographies_data=#ENV{donnees}}>
68                                <div class="infographie[ (#CSS_CLASS)]">
69                                        <div class="description_donnees">
70                                                [<h3 class="#EDIT{titre}">(#TITRE)</h3>]
71                                                [<div class="texte #EDIT{texte}">
72                                                (#TEXTE)
73                                                </div>]
74                                                [<div class="credits #EDIT{credits}">
75                                                (#CREDITS)
76                                                </div>]
77                                        </div>
78                                       
79                                        <B_infographies_logo>
80                                        <div class="infographies_logo">
81                                        <BOUCLE_infographies_logo(INFOGRAPHIES_DATAS spip_infographies_datas_liens){objet=infographie}{id_objet=#ID_INFOGRAPHIE}>
82                                        [(#ID_INFOGRAPHIES_DATA|=={#ENV{donnees}}|non)
83                                        <a href="[(#SELF|parametre_url{donnees,#ID_INFOGRAPHIES_DATA})]">[(#LOGO_INFOGRAPHIES_DATA|image_reduire{100,100})]</a>]
84                                        [(#ID_INFOGRAPHIES_DATA|=={#ENV{donnees}}|oui)
85                                        <strong class="on">[(#LOGO_INFOGRAPHIES_DATA_SURVOL|image_reduire{100,100})]</strong>]
86                                        </BOUCLE_infographies_logo>
87                                        </div>
88                                        </B_infographies_logo>
89                                        <BOUCLE_naissance_min(INFOGRAPHIES_DONNEES){id_infographies_data}{par axe_x}{0,1}>
90                                        #SET{naissance_min,#AXE_X}
91                                        </BOUCLE_naissance_min>
92                                        <div id="graph1" class="aGraph" style="position:relative;width:100%;"></div>
93                                        <script>
94                                                var containerid='graph1',infobox_class='infobox',values = [],values1 = [], values2 = [],values_commentaire= [], value_naissance = [], value_origine = [],container,tip,ligne_naissance_groupe,ligne_naissance,ligne_interactive;
95                                                var naissance = date_origine = [(#ENV{naissance,#GET{naissance_min}}|<{#GET{naissance_min}}|?{#GET{naissance_min},#ENV{naissance}}|intval)],
96                                                        centre_origine = 1962,translate_defaut = 0;
97                                                var margin = {top: 0, right: 5, bottom: 60, left: 5},
98                                                        graph_width = jQuery('#'+containerid).width() - margin.left - margin.right,
99                                                        step = graph_width/22,
100                                                        height = 450 - margin.top - margin.bottom,
101                                                        vitesse = 200,
102                                                        infobox = tip = moving = infobox_bloquee = move_again = progress_mousedown = false;
103
104                                                jQuery('#'+containerid).on('mousewheel', function(event) {
105                                                        if(jQuery('.'+infobox_class).is(':hidden') && moving == false){
106                                                                if(event.deltaX > 0 || event.deltaY > 0)
107                                                                        var val = 1;
108                                                                else if(event.deltaX < 0 || event.deltaY < 0)
109                                                                        var val = -1;
110                                                                graph_replace(val);
111                                                        }else if(jQuery('.'+infobox_class).is(':hidden') && move_again == false){
112                                                                move_again = true;
113                                                        }
114                                                        return false;
115                                                });
116                                               
117                                                // Mise à jour de l'infobox si elle existe
118                                                function infobox_update(content,callback){
119                                                        if(infobox){
120                                                                // On met le contenu
121                                                                jQuery('.'+infobox_class).html(content);
122                                                               
123                                                                // Les lien en target="_blank"
124                                                                jQuery('.'+infobox_class+' a').click(function(){
125                                                                        jQuery(this).attr('target','_blank');
126                                                                });
127                                                               
128                                                                // Les oembed en 100%
129                                                                jQuery('.'+infobox_class+' iframe').each(function(){
130                                                                        var ratio = jQuery(this).parents('div').width()/jQuery(this).width();
131                                                                        jQuery(this).width('100%').height(jQuery(this).height()*ratio);
132                                                                });
133                                                               
134                                                                // On la replace en hauteur
135                                                                var margin_top = (jQuery('#'+containerid+' svg').outerHeight()-jQuery('.legende').height()-35-jQuery('.'+infobox_class).outerHeight())/2;
136                                                                jQuery('.'+infobox_class).css({'margin-top':margin_top});
137                                                               
138                                                                // Si on a donné une fonction comme callback => on l'exécute
139                                                                if(typeof(callback) == 'function') callback();
140                                                        }
141                                                }
142
143                                                // Avance le graph de 1 ou le recule de -1 (en année)
144                                                function graph_replace(valeur){
145                                                        if(((valeur == '+1') && date_origine == values[values.length-1].axe_x) || ((valeur == '-1') && date_origine  == values[0].axe_x))
146                                                                return false;
147                                                       
148                                                        moving = true;
149                                                       
150                                                        date_origine = date_origine+valeur;
151
152                                                        /**
153                                                         * A essayer : values.filter
154                                                         * cf : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter
155                                                         */
156                                                        values.every(function(row, i){
157                                                                if(parseInt(row.axe_x) == date_origine){
158                                                                        d = row;
159                                                                        return false;
160                                                                }
161                                                                return true;
162                                                        });
163                                                       
164                                                        var translatex = x(value_origine.axe_x)-x(d.axe_x)-translate_defaut;
165
166                                                        jQuery('.tooltip').text(+parseFloat(d.axe_y).toFixed(2)+'#UNITE');
167                                                        var left = x(value_naissance.axe_x)-translate_defaut-jQuery('.tooltip').outerWidth()+5;
168                                                        var top = y(d.axe_y) - (jQuery('.tooltip').outerHeight()/2);
169                                                        if(jQuery('.tooltip').is(':hidden'))
170                                                                jQuery('.tooltip').css({'top':top,'left':left}).show();
171                                                        else
172                                                                jQuery('.tooltip').animate({'top':top,'left':left},vitesse);
173                                                       
174                                                        // Si on a un commentaire, on l'affiche à peu prÚs au moment de l'arrivée sur le point en question
175                                                        if(typeof(d.commentaire) == 'string' && d.commentaire.length > 1){
176                                                                var show_info = function(){
177                                                                        infobox_update('<div class="close_box"><a href="#" onclick="return false;">x</a></div><div class="logo">'+d.logo+'</div><div class="contenu"><span class="annee">'+d.axe_x+'</span>'+d.commentaire+'</div>',
178                                                                                function(){
179                                                                                        jQuery('.'+infobox_class).fadeIn(vitesse,function(){
180                                                                                                jQuery('.'+infobox_class+' .close_box').on('click',function(){
181                                                                                                        jQuery('.'+infobox_class).fadeOut();
182                                                                                                });
183                                                                                        });
184                                                                                }
185                                                                        );
186                                                                }
187                                                                setTimeout(show_info,vitesse-30);
188                                                        }
189                                                       
190                                                        d3.select(".paths").transition()
191                                                                .duration(vitesse)
192                                                                .attr("transform", "translate("+translatex+", 0)").each("end", function(){
193                                                                        if(move_again && jQuery('.'+infobox_class).is(':hidden')){
194                                                                                move_again = false
195                                                                                graph_replace(valeur);
196                                                                        }else{
197                                                                                move_again = false
198                                                                                moving = false;
199                                                                        }
200                                                                });
201
202                                                        // Afficher le message de fin de données actuelles
203                                                        if(date_origine == values[values.length-1].axe_x){
204                                                                var show_info = function(){
205                                                                        if([(#ENV{naissance})] > values[0].axe_x && [(#ENV{donnees,1})] == 1){
206                                                                                var degres = (parseFloat(values[values.length-1].axe_y) - parseFloat(value_naissance.axe_y)).toFixed(2);
207                                                                                if(degres.charAt(0) == '-'){
208                                                                                        degres = degres.replace('-','');
209                                                                                        var texte_fin = "<p>Vous êtes né(e) en "+[(#ENV{naissance})]+". Depuis votre naissance,<br /> la température à la surface du globe<br />a diminué de "+degres+"°.</p>";
210                                                                                }else
211                                                                                        var texte_fin = "<p>Vous êtes né(e) en "+[(#ENV{naissance})]+". Depuis votre naissance,<br /> la température à la surface du globe<br />a augmenté de "+degres+"°.</p>";
212                                                                        }
213                                                                        else if([(#ENV{naissance})] < values[0].axe_x && [(#ENV{donnees,1})] == 1){
214                                                                                var degres = (parseFloat(values[values.length-1].axe_y) - parseFloat(value_naissance.axe_y)).toFixed(2);
215                                                                                var age = (parseInt([(#ENV{naissance})]) - parseFloat(value_naissance.axe_x)).toString().replace('-','');
216                                                                                if(degres.charAt(0) == '-'){
217                                                                                        degres = degres.replace('-','');
218                                                                                        var texte_fin = "<p>Vous êtes né(e) en "+[(#ENV{naissance})]+". Depuis vos "+age+" ans,<br /> la température à la surface du globe<br />a diminué de "+degres+"°.</p>";
219                                                                                }else
220                                                                                        var texte_fin = "<p>Vous êtes né(e) en "+[(#ENV{naissance})]+". Depuis vos "+age+" ans,<br /> la température à la surface du globe<br />a augmenté de "+degres+"°.</p>";
221                                                                        }
222                                                                        else if([(#ENV{naissance})] > values[0].axe_x && [(#ENV{donnees,1})] == 2){
223                                                                                var ppm = (parseFloat(values[values.length-1].axe_y) - parseFloat(value_naissance.axe_y)).toFixed(2);
224                                                                                var texte_fin = "<p>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.</p>";
225                                                                        }
226                                                                        else if([(#ENV{naissance})] < values[0].axe_x && [(#ENV{donnees,1})] == 2){
227                                                                                var ppm = (parseFloat(values[values.length-1].axe_y) - parseFloat(value_naissance.axe_y)).toFixed(2);
228                                                                                var age = (parseInt([(#ENV{naissance})]) - parseFloat(value_naissance.axe_x)).toString().replace('-','');
229                                                                                var texte_fin = "<p>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.</p>";
230                                                                        }
231                                                                       
232                                                                        move_again = false
233                                                                        moving = false;
234                                                                       
235                                                                        if(texte_fin){
236                                                                                infobox_update('<div class="close_box"><a href="#" onclick="return false;">x</a></div><div class="contenu contenu_fin">'+texte_fin+'</div>',
237                                                                                        function(){
238                                                                                                jQuery('.'+infobox_class).fadeIn(500,function(){
239                                                                                                        jQuery('.'+infobox_class+' .close_box').on('click',function(){
240                                                                                                                jQuery('.'+infobox_class).fadeOut();
241                                                                                                        });
242                                                                                                });
243                                                                                        });
244                                                                        }
245                                                                }
246                                                                setTimeout(show_info,vitesse);
247                                                        }
248                                                }
249                                               
250                                                // Scales and axes. Note the inverted domain for the y-scale: bigger is up!
251                                                var x = d3.scale.linear(),
252                                                        y = d3.scale.linear().range([height, 0]),
253                                                        xAxis = d3.svg.axis().scale(x).ticks(56).tickFormat(d3.format(".0f")).orient("bottom");
254                                               
255                                                // A line generator, for the dark stroke.
256                                                var line = d3.svg.line()
257                                                        .x(function(d) { return x(d.axe_x); })
258                                                        .y(function(d) { return y(d.axe_y); });
259                                               
260                                                // Add an SVG element with the desired dimensions and margin.
261                                                var svg = d3.select("#"+containerid).append("svg")
262                                                        .attr("width", graph_width )
263                                                        .attr("height", height + margin.top + margin.bottom)
264                                                        .append("g")
265                                                        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
266
267                                                var paths = svg.append("g").attr("class", "paths")
268                                                       
269                                                // Ajouter le tooltip que l'on cache automatiquement
270                                                tip = d3.select('#'+containerid).append("div")
271                                                        .attr("class", "tooltip")
272                                                        .style("display", 'none');
273                                               
274                                                // Ajout de l'infobox'
275                                                infobox = d3.select('#'+containerid).append("div")
276                                                                .attr("class", infobox_class)
277                                                                .style("display", 'none');
278
279                                                // Au click sur le graph, on cache l'infobox si visible
280                                                jQuery('#'+containerid).on('click',function(){
281                                                        if(jQuery('.'+infobox_class).is(':visible')){
282                                                                if(infobox_bloquee){
283                                                                        jQuery('.'+infobox_class).fadeOut(500,function(){
284                                                                                infobox_bloquee = false;
285                                                                                infobox_update('<div class="close_box"><a href="#" onclick="return false;">x</a></div><div class="contenu contenu_fin"><:terraeco:anecdote_scroll:></div>')
286                                                                                jQuery('.'+infobox_class).fadeIn(500);
287                                                                        });
288                                                                }
289                                                                else
290                                                                        jQuery('.'+infobox_class).fadeOut();
291                                                        }
292                                                });
293                                               
294                                                // Ajouter les flÚches pour avancer et reculer
295                                                arrow_nav = d3.select('#'+containerid).append("div")
296                                                        .attr("class", "arrows_nav")
297                                                        .html('<div class="left">[(#CHEMIN{images/fleche_gauche.png}|balise_img|texte_script)]</div><div class="right">[(#CHEMIN{images/fleche_droite.png}|balise_img|texte_script)]</div>');
298                                               
299                                                /**
300                                                 * Récupération des données et on fabrique nos groupes de valeurs
301                                                 */
302                                                d3.json("[(#URL_PAGE{infographies_data}|parametre_url{id_infographies_data,#ID_INFOGRAPHIES_DATA,'&'})]", function(error, data) {
303                                                       
304                                                        values = data;
305                                                        var origine = 0;
306       
307                                                        values.forEach(function(row, i){
308                                                                row.axe_x = parseFloat(row.axe_x).toFixed();
309                                                                origine = row.axe_y = parseFloat(row.axe_y.replace(',','.')).toFixed(2);
310                                                                if(row.axe_x <= naissance)
311                                                                        values1.push(row);
312                                                                if(row.axe_x >= naissance)
313                                                                        values2.push(row);
314                                                                if(row.axe_x == naissance)
315                                                                        value_naissance = value_origine = row;
316                                                                if(typeof(row.commentaire) == 'string' && row.commentaire.length > 1)
317                                                                        values_commentaire.push(row);
318                                                        });
319
320                                                        xmin = values[0].axe_x;
321                                                        xmax = values[values.length-1].axe_x;
322                                                        if(#ENV{donnees} == 1)
323                                                                ymax = parseFloat('4.89');
324                                                        else
325                                                                ymax = 936;
326                                                               
327                                                        ymin = d3.min(values, function(d) { return parseFloat(d.axe_y); });
328                                                        ymax = d3.max(values, function(d) { return parseFloat(d.axe_y); });
329                                                       
330                                                        ymax = ymax + ((ymax-ymin)/3);
331                                                        /**
332                                                         * Si naissance - 7 ans est dans la visu, on part de là
333                                                         */
334                                                        if((naissance - 7) > xmin){
335                                                                origine = naissance -7;
336                                                                centre_origine = naissance + 4;
337                                                        }
338                                                        /**
339                                                         * Sinon le centre sera toujours la valeur minimale + 11 ans
340                                                         * et le point d'origine la valeur min
341                                                         */
342                                                        else{
343                                                                origine = xmin;
344                                                                centre_origine = parseInt(xmin)+11;
345                                                        }
346
347                                                        // Utilisation de every pour couper lorsque l'on a trouvé
348                                                        values.every(function(row,i){
349                                                                if(parseInt(row.axe_x) == origine){
350                                                                        d = row;
351                                                                        return false;
352                                                                }
353                                                                return true;
354                                                        });
355
356                                                        real_width = (graph_width/22)*(xmax-xmin);
357                                                        x.range([0, real_width]).domain([parseInt(xmin), parseInt(xmax)]);
358                                                        y.domain([ymin, ymax]).nice();
359
360                                                        translate_defaut = x(d.axe_x);
361
362                                                        // Afficher le premier slide ou les infos de scroll
363                                                        var annee_debut =  values[0].axe_x;
364                                                        if([(#ENV{naissance})] > values[0].axe_x && [(#ENV{donnees,1})] == 1){
365                                                                var degres = (parseFloat(value_naissance.axe_y) - parseFloat(values[0].axe_y)).toFixed(2);
366                                                                if(degres.charAt(0) == '-'){
367                                                                        degres = degres.replace('-','');
368                                                                        var texte_debut = "<p>Entre "+annee_debut+"* et votre naissance,<br /> la température à la surface du globe<br />a diminué de "+degres+"°.<br /></p><p><small>* Début des relevés de l'Agence américaine océanique et atmosphérique (NOAA)</small></p>";
369                                                                }else
370                                                                        var texte_debut = "<p>Entre "+annee_debut+"* et votre naissance,<br /> la température à la surface du globe<br />a augmenté de "+degres+"°.<br /></p><p><small>* Début des relevés de l'Agence américaine océanique et atmosphérique (NOAA)</small></p>";
371                                                        }
372                                                        else if([(#ENV{naissance})] > values[0].axe_x && [(#ENV{donnees,1})] == 2){
373                                                                var ppm = (parseFloat(values[values.length-1].axe_y) - parseFloat(value_naissance.axe_y)).toFixed(2);
374                                                                var texte_debut = "<p>Entre "+annee_debut+"* et votre naissance,<br /> a concentration de CO2 dans l'atmosphÚre<br />a augmenté de "+ppm+" particules par million.<br /></p><p><small>* Début des relevés de l'Agence américaine océanique et atmosphérique (NOAA)</small></p>";
375                                                        }
376                                                       
377                                                        if(texte_debut){
378                                                                infobox_update('<div class="close_box"><a href="#" onclick="return false;">x</a></div><div class="contenu contenu_fin">'+texte_debut+'</div>',function(){
379                                                                        infobox_bloquee = true;
380                                                                        jQuery('.'+infobox_class).fadeIn(500,function(){
381                                                                                jQuery('.'+infobox_class+' .close_box').on('click',function(){
382                                                                                        jQuery('.'+infobox_class).fadeOut(500,function(){
383                                                                                                infobox_bloquee = false;
384                                                                                                infobox_update('<div class="close_box"><a href="#" onclick="return false;">x</a></div><div class="contenu contenu_fin"><:terraeco:anecdote_scroll:></div>')
385                                                                                                jQuery('.'+infobox_class).fadeIn(500);
386                                                                                        });
387                                                                                });
388                                                                        });
389                                                                });
390                                                        }
391                                                        else{
392                                                                // Ajouter l'infobox pour les anecdotes que l'on cache automatiquement
393                                                                infobox_update('<div class="close_box"><a href="#" onclick="return false;">x</a></div><div class="contenu contenu_fin"><:terraeco:anecdote_scroll:></div>',function(){
394                                                                        jQuery('.'+infobox_class).fadeIn();
395                                                                });
396                                                        }
397                                                        draw(translate_defaut);
398                                                        drawlines_interaction(translate_defaut);
399                                                });
400                                               
401                                                // Au click sur les fleches on avance d'un cran ou on recule
402                                                jQuery('.arrows_nav > div')
403                                                        .on('click',function(event){
404                                                                event.stopPropagation();
405                                                        })
406                                                        .on('mousedown',function(event){
407                                                                event.stopPropagation();
408                                                                if(jQuery('.'+infobox_class).is(':hidden') && moving == false){
409                                                                        if(jQuery(this).is('.left')){
410                                                                                graph_replace(-1);
411                                                                                progress_mousedown = setInterval(function(){
412                                                                                                                                if(jQuery('.'+infobox_class).is(':hidden'))
413                                                                                                                                        graph_replace(-1);
414                                                                                                                        }, vitesse);
415                                                                        }else{
416                                                                                graph_replace(1);
417                                                                                progress_mousedown = setInterval(function(){
418                                                                                                                                if(jQuery('.'+infobox_class).is(':hidden'))
419                                                                                                                                        graph_replace(1);
420                                                                                                                        }, vitesse);
421                                                                        }
422                                                                }
423                                                        })
424                                                        .on('mouseup',function(event){
425                                                                event.stopPropagation();
426                                                                clearInterval(progress_mousedown);
427                                                        });
428                                               
429                                                jQuery(window).on('keydown',function(e) {
430                                                        var meta_key_pressed = e.ctrlKey || e.metaKey || e.altKey || e.shiftKey;
431                                                        switch (e.keyCode) {
432                                                                case 27 :
433                                                                        /**
434                                                                         * Touche esc : ferme les anecdotes
435                                                                         */
436                                                                        clearInterval(progress_mousedown);
437                                                                        if(jQuery('.'+infobox_class).is(':visible'))
438                                                                                jQuery('.'+infobox_class).fadeOut();
439                                                                        e.preventDefault();
440                                                                        break;
441                                                                case 32 :
442                                                                         /**
443                                                                          * Touche Space : avance sur la ligne de temps
444                                                                          */
445                                                                        clearInterval(progress_mousedown);
446                                                                        if(jQuery('.'+infobox_class).is(':hidden') && moving == false){
447                                                                                graph_replace(1);
448                                                                                progress_mousedown = setInterval(function(){
449                                                                                                                                if(jQuery('.'+infobox_class).is(':hidden'))
450                                                                                                                                        graph_replace(1);
451                                                                                                                        }, vitesse);
452                                                                        }
453                                                                        e.preventDefault();
454                                                                        break;
455                                                                case 37 : case 39 : case 38 : case 40 :
456                                                                        /**
457                                                                         * Gauche (37), droite (39), haut (38), bas (40)
458                                                                         * Avance ou recule sur la ligne de temps
459                                                                         */
460                                                                        clearInterval(progress_mousedown);
461                                                                        if(jQuery('.'+infobox_class).is(':hidden') && moving == false){
462                                                                                if(e.keyCode == 37 || e.keyCode == 40){
463                                                                                        graph_replace(-1);
464                                                                                        progress_mousedown = setInterval(function(){
465                                                                                                                                        if(jQuery('.'+infobox_class).is(':hidden'))
466                                                                                                                                                graph_replace(-1);
467                                                                                                                                }, vitesse);
468                                                                                }else{
469                                                                                        graph_replace(1);
470                                                                                        progress_mousedown = setInterval(function(){
471                                                                                                                                        if(jQuery('.'+infobox_class).is(':hidden'))
472                                                                                                                                                graph_replace(1);
473                                                                                                                                }, vitesse);
474                                                                                }
475                                                                        }
476                                                                        e.preventDefault();
477                                                                        break;
478                                                        }
479                                                }).on('keyup',function(e){
480                                                        switch (e.keyCode) {
481                                                                /**
482                                                                 * On arrÚte le setInterval à chaque nouvelle itération
483                                                                 */
484                                                                case 37 : case 38 : case 40 : case 39 : case 32 : case 27 :
485                                                                        clearInterval(progress_mousedown);
486                                                                        e.preventDefault();
487                                                                break;
488                                                        }
489                                                });
490                                                /**
491                                                 * Fonction de création des objets du diagramme
492                                                 */
493                                                function draw(translatex){
494                                                        d3.selectAll(".apresnaissance,.avtnaissance,.axis,.ligne_naissance,.texte_naissance,.circle_naissance,.infos_dots").remove();
495                                                        d3.select(".paths")
496                                                                .attr("transform", "translate(-"+translatex+", 0)")
497                                                       
498                                                        // On ajoute la ligne de données pour la période aprÚs naissance
499                                                        svg.selectAll('.paths').append("path")
500                                                                .attr("class", "line apresnaissance")
501                                                                .attr("d", line(values2));
502       
503                                                        // Ajout la ligne de données avant la naissance
504                                                        svg.selectAll('.paths').append("path")
505                                                                .attr("class", "line avtnaissance")
506                                                                .attr("d", line(values1));
507       
508                                                        // Ajout de l'axe X, on fait une rotation des textes à -270°
509                                                        svg.selectAll('.paths').append("g")
510                                                                .attr("class", "x axis")
511                                                                .attr("transform", "translate(0," + height + ")")
512                                                                .call(xAxis)
513                                                                .selectAll("text")
514                                                                        .style("text-anchor", "start")
515                                                                        .attr("dy", "-0.6em")
516                                                                        .attr("dx", "1em")
517                                                                        .attr("transform", function(d) { return "rotate(-270)" });
518                                                        // Ajout d'une class 'tickold' sur les labels de l'axe X plus vieux que la naissance
519                                                        jQuery('.x .tick text').each(function(){
520                                                                if(parseInt(jQuery(this).text()) < value_naissance.axe_x)
521                                                                        jQuery(this).parent('.tick').attr('class','tick tickold');
522                                                        });
523                                                       
524                                                        // Ajout de la légende des axes
525                                                        svg.append("text") 
526                                                                .attr("x",-5)
527                                                                .attr("y",445)
528                                                                .attr("class", "legende")
529                                                                .style("text-anchor", "start")
530                                                                .text("#AXE_Y");
531
532                                                        // Ajout des points d'Anecdotes cliquables
533                                                        // sera certainement à supprimer aprÚs debug
534                                                        d3.select("#"+containerid).select('.paths')
535                                                                .selectAll(".dot")
536                                                                .data(values_commentaire)
537                                                                .enter()
538                                                                        .append('circle')
539                                                                        .attr("class","infos_dots")
540                                                                        .attr("cx", function(d) { return x(d.axe_x); })
541                                                                        .attr("cy",function(d) { return y(d.axe_y); })
542                                                                        .attr('r',6)
543                                                                        .on('click',function(d){
544                                                                                d3.event.stopPropagation();
545                                                                                if(jQuery('.'+infobox_class).is(':visible'))
546                                                                                        return false;
547                                                                               
548                                                                                jQuery('.infos_dots.active').animate({'stroke-width':3},300).attr('class','infos_dots');
549                                                                                jQuery(this).animate({'stroke-width':5},300).attr('class','infos_dots active');
550                                                                                infobox_update('<div class="close_box"><a href="#" onclick="return false;">x</a></div><div class="logo">'+d.logo+'</div><div class="contenu"><span class="annee">'+d.axe_x+'</span>'+d.commentaire+'</div>',
551                                                                                        function(){
552                                                                                                jQuery('.'+infobox_class).fadeIn(500,function(){
553                                                                                                        jQuery(this).find('.close_box').on('click',function(){
554                                                                                                                jQuery('.infos_dots.active').attr('class','infos_dots')
555                                                                                                                        .animate({'stroke-width':'3'},300);
556                                                                                                                jQuery('.'+infobox_class).fadeOut();
557                                                                                                        });
558                                                                                                });
559                                                                                        }
560                                                                                );
561                                                                        });
562
563                                                        // Ajout du groupe qui contiendra les éléments de la date de naissance
564                                                        ligne_naissance_groupe = svg.select('.paths').append("g")
565                                                                .attr("class", "birth-line");
566       
567                                                        // Ajout de la ligne de naissance
568                                                        ligne_naissance = ligne_naissance_groupe
569                                                                .datum( value_naissance )
570                                                                .append("line")
571                                                                        .attr( 'class', 'ligne_naissance' )
572                                                                        .attr("x1", function( d ) { return x( d.axe_x ); })
573                                                                        .attr("x2",function( d ) { return x( d.axe_x ); }) // vertical line so same value on each
574                                                                        .attr("y1",80).attr("y2", height);
575
576                                                        [(#SET{image_naissance,[(#CHEMIN{images/naissance_[(#CSS_CLASS).png]}|balise_img)]})]
577                                                        // Ajout de l'image de la bougie
578                                                        ligne_naissance_groupe
579                                                                .datum(value_naissance)
580                                                                .append("svg:image")
581                                                                        .attr("xlink:href", "[(#GET{image_naissance}|extraire_attribut{src})]")
582                                                                        .attr("x", function(d){
583                                                                                return x(value_naissance.axe_x)-[(#GET{image_naissance}|extraire_attribut{width}|div{2})];
584                                                                        })
585                                                                        .attr("y", "2")
586                                                                        .attr("width", "[(#GET{image_naissance}|extraire_attribut{width})]")
587                                                                        .attr("height", "[(#GET{image_naissance}|extraire_attribut{height})]");
588                                                                       
589                                                       
590                                                        // Ajout du groupe pour Aujourd'hui
591                                                        ligne_aujd_groupe = svg.select('.paths').append("g").attr("class", "today-line");
592       
593                                                        // Ajout de la ligne d'aujourd'hui
594                                                        ligne_aujd = ligne_aujd_groupe
595                                                                .datum(values[values.length-1])
596                                                                .append("line")
597                                                                        .attr( 'class', 'ligne_aujd' )
598                                                                        .attr("x1", function( d ) { return x( d.axe_x ); })
599                                                                        .attr("x2",function( d ) { return x( d.axe_x ); })
600                                                                        .attr("y1",80).attr("y2", height);
601
602                                                        [(#SET{image_aujd,[(#CHEMIN{images/aujourdhui_[(#CSS_CLASS).png]}|balise_img)]})]
603                                                        // Ajout de l'image de la bougie
604                                                        ligne_aujd_groupe
605                                                                .datum(values[values.length-1])
606                                                                .append("svg:image")
607                                                                        .attr("xlink:href", "[(#GET{image_aujd}|extraire_attribut{src})]")
608                                                                        .attr("x", function(d){
609                                                                                return x(d.axe_x)-[(#GET{image_aujd}|extraire_attribut{width}|div{2})];
610                                                                        })
611                                                                        .attr("y", "2")
612                                                                        .attr("width", "[(#GET{image_aujd}|extraire_attribut{width})]")
613                                                                        .attr("height", "[(#GET{image_aujd}|extraire_attribut{height})]");
614                                                       
615                                                }
616
617                                                /**
618                                                 * Afficher le bloc d'interaction
619                                                 *
620                                                 * @param translatex
621                                                 */
622                                                function drawlines_interaction(translatex){
623                                                        ligne_interactive_groupe = svg.append("g")
624                                                                .attr("class", "interaction");
625                                                               
626                                                        /**
627                                                         * Ajouter la ligne d'interaction
628                                                         */
629                                                        ligne_interactive =  ligne_interactive_groupe
630                                                                .datum(value_origine)
631                                                                        .append("line")
632                                                                                .attr('class', 'ligne_interactive')
633                                                                                .attr("x1", function(d) { return x( d.axe_x )-translatex; })
634                                                                                .attr("x2",function(d) { return x(d.axe_x)-translatex;})
635                                                                                .attr("y1",100)
636                                                                                .attr("y2", height);
637                                                        /**
638                                                         * Ajouter le triangle
639                                                         */
640                                                        ligne_interactive_groupe.append('path')
641                                                                .attr('class','triangle')
642                                                                .attr('d', function(d) { 
643                                                                        var x1 = (x( value_origine.axe_x )-translatex-14), x2 = x( value_origine.axe_x)-translatex+14,x3 = x( value_origine.axe_x )-translatex;
644                                                                        var x4 = 'M '+ x1 +' 390 L '+x2+' 390 L '+x3+' 365 z';
645                                                                        return x4;
646                                                                });
647                                                }
648                                                </script>
649                                </div>
650                                [<div class="logo_terraeco">
651                                        <a href="http://www.terraeco.net" class="spip_out" target="_blank">(#CHEMIN{images/logo_terraeco_normal.jpg}|image_reduire{100,20})</a>
652                                </div>]
653                                </BOUCLE_jeu_selectionne>
654                                </B_jeu_selectionne>
655                                <B_jeux>
656                                <div class="texte">#TEXTE</div>
657                                <div class="liste_infographies">
658                                <BOUCLE_jeux(INFOGRAPHIES_DATAS spip_infographies_datas_liens){objet=infographie}{id_objet=#ID_INFOGRAPHIE}>
659                                <a href="[(#SELF|parametre_url{donnees,#ID_INFOGRAPHIES_DATA})]">[(#LOGO_INFOGRAPHIES_DATA|image_reduire{250,250})]</a>
660                                </BOUCLE_jeux>
661                                </div>
662                                </B_jeux>
663                                <//B_jeu_selectionne>
664                                <//B_si_naissance_1951>
665                        <//B_si_pas_naissance>
666                </div>
667                </div>
668        </div>
669        [(#ENV{donnees}|non)[<footer class="footer clearfix #EDIT{credits}">
670                (#CREDITS|image_reduire{100,100})
671        </footer>]]
672</div>
673</body>
674</html>
675</BOUCLE_principale>
Note: See TracBrowser for help on using the repository browser.