Raphael.js et comportement différent avec variable GET

**oraya** · 10/11/2015, 13h15

Bonjour

J'ai récemment découvert l'API Raphael.js qui permet de tracer des diagrammes facilement et j'ai voulu la tester.
Seulement voila, je suis tombé sur une buche et j'arrive vraiment pas à comprendre d'où viens le problème

Grosso modo, pour le même page (strictement la même d'un point de vue HTML), j'ai un comportement différent si une variable $_GET est définie ou non...

Sans plus attendre, un exemple en screenshot :
http://imgur.com/HGNgJGT
http://imgur.com/0YnSp1Q

Voici le code de cette page:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
	<head>
		<meta ttp-equiv="Content-Type" content="text/html" charset="utf-8">
	</head>
	<body>
		<?php if(isset($_GET['page'])) {include 'includes/wtf.php';} else {include 'includes/wtf.php';}?>
	</body>
</html>

le code de wtf.php:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
 
<div>
	<script src="js/Raphael.js" charset="utf-8"></script>
	<script src="https://code.jquery.com/jquery-2.1.4.js" charset="utf-8"></script>
	<script src="js/pie.js" charset="utf-8"></script>
	<script type="text/javascript">
		$(function () {
 
		    var values = [],
		        labels = [];
		    $("tr").each(function () {
		        values.push(parseInt($("td", this).text(), 10));
		        labels.push($("th", this).text());
		    });
		    $("table").hide();
 
		    Raphael("holder", 600, 500).pieChart(300, 170, 100, values, labels, "#000");
		});
	</script>
 
	<table>
		<tbody>
		<tr>
			<th scope="row">Test</th>
			<td>56%</td>
		</tr>
		<tr>
			<th scope="row">Test</th>
			<td>33%</td>
		</tr>
		<tr>
			<th scope="row">Test</th>
			<td>10%</td>
		</tr>
		<tr>
			<th scope="row">Test</th>
			<td>1%</td>
		</tr>
		</tbody>
	</table>
	<center><div id="holder"></div></center>
</div>
 
<style media="screen">
    #holder {
    	border: 1px solid rgb(150, 203, 0);
        width: 600px;
        height: 350px;
    }
</style>

et pie.js:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
 
Raphael.fn.pieChart = function (cx, cy, r, values, labels, stroke) {
    var paper = this,
        rad = Math.PI / 180,
        chart = this.set();
    function sector(cx, cy, r, startAngle, endAngle, params) {
        var x1 = cx + r * Math.cos(-startAngle * rad),
            x2 = cx + r * Math.cos(-endAngle * rad),
            y1 = cy + r * Math.sin(-startAngle * rad),
            y2 = cy + r * Math.sin(-endAngle * rad);
        return paper.path(["M", cx, cy, "L", x1, y1, "A", r, r, 0, +(endAngle - startAngle > 180), 0, x2, y2, "z"]).attr(params);
    }
    var angle = 0,
        total = 0,
        start = 0,
        process = function (j) {
            var value = values[j],
                angleplus = 360 * value / total,
                popangle = angle + (angleplus / 2),
                color = Raphael.hsb(start, .75, 1),
                ms = 500,
                delta = 30,
                bcolor = Raphael.hsb(start, 1, 1),
                p = sector(cx, cy, r, angle, angle + angleplus, {fill: "90-" + bcolor + "-" + color, stroke: stroke, "stroke-width": 3}),
                txt = paper.text(cx + (r + delta + 55) * Math.cos(-popangle * rad), cy + (r + delta + 25) * Math.sin(-popangle * rad), labels[j]).attr({fill: bcolor, stroke: "none", opacity: 0, "font-size": 20});
            p.mouseover(function () {
                p.stop().animate({transform: "s1.1 1.1 " + cx + " " + cy}, ms, "elastic");
                txt.stop().animate({opacity: 1}, ms, "elastic");
            }).mouseout(function () {
                p.stop().animate({transform: ""}, ms, "elastic");
                txt.stop().animate({opacity: 0}, ms);
            });
            angle += angleplus;
            chart.push(p);
            chart.push(txt);
            start += .1;
        };
    for (var i = 0, ii = values.length; i < ii; i++) {
        total += values[i];
    }
    for (i = 0; i < ii; i++) {
        process(i);
    }
    return chart;
};

Si ya besoin de Raphael.js, je peut donner le code, mais c'est le même que celui téléchargeable sur le site officiel (http://raphaeljs.com/)

J'ai d'abord pensé que c'était dû à un problème de caractères mais aparemment non (ou alors il est bien caché).
Le problème se situe au niveau du "if" en PHP. Si je l'enleve et que je met simplement un "include", ça fonctionne sans problème.
Mais bon, j'ai besoin de cette condition

Et franchement, je suis comprend vraiment pas en quoi une variable $_GET en plus ou en moins changerais le comportement d'un script Javascript

Suis-je le seul, ou quelqu'un d'autre obtient le même problème ?
Merci de votre aide

PS: Pour les modos, si je ne suis pas dans le bon forum je m'en excuse

Je me suis dit que vu que le comportement change au niveau Javascript, il fallait que je m'adresse ici

**NoSmoking** · 10/11/2015, 20h33

Bonjour,
on peut s'interroger sur l'utilité d'un tel code

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<?php
if (isset($_GET['page'])) {
    include 'includes/wtf.php';
} else {
    include 'includes/wtf.php';
}
?>

Regarde le code HTML généré (ctrl + U) il devrait surement t'apporter des informations.

**oraya** · 12/11/2015, 09h07

Oui en effet, ce code est strictement inutile. Mais je l'ai écrit uniquement pour mettre en évidence ce problème.
Si j'ai besoin de cette condition, c'est en fait pour générer du contenu dynamique en fonction d'une variable GET. L'ennui, c'est que je ne peux pas mettre cette page en dynamique justement à cause de ce problème. Et c'est embêtant car j'aimerai ne pas avoir à sortir de cette mécanique.
Comme je l'ai dit, le code HTML est strictement le même, c'est ça qui est étrange...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
 
 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
	<head>
		<meta ttp-equiv="Content-Type" content="text/html" charset="utf-8">
	</head>
	<body>
		<div>
 
	<script src="js/Raphael.js" charset="utf-8"></script>
	<script src="https://code.jquery.com/jquery-2.1.4.js" charset="utf-8"></script>
	<script src="js/pie.js" charset="utf-8"></script>
	<script type="text/javascript">
		$(function () {
 
		    var values = [],
		        labels = [];
		    $("tr").each(function () {
		        values.push(parseInt($("td", this).text(), 10));
		        labels.push($("th", this).text());
		    });
		    $("table").hide();
 
		    Raphael("holder", 600, 500).pieChart(300, 170, 100, values, labels, "#000");
		});
	</script>
 
	<table>
		<tbody>
		<tr>
			<th scope="row">Test</th>
			<td>56%</td>
		</tr>
		<tr>
			<th scope="row">Test</th>
			<td>33%</td>
		</tr>
		<tr>
			<th scope="row">Test</th>
			<td>10%</td>
		</tr>
		<tr>
			<th scope="row">Test</th>
			<td>1%</td>
		</tr>
		</tbody>
	</table>
	<center><div id="holder"></div></center>
 
</div>
 
<style media="screen">
    #holder {
    	border: 1px solid rgb(150, 203, 0);
        width: 600px;
        height: 350px;
    }
</style>	</body>
</html>

Je ne l'ai pas précisé, mais si ça peux être utile je suis sur Mac OS X Yosemite et je développe sur Chrome (derniere version)

**NoSmoking** · 14/11/2015, 17h45

Il n'y a aucune raison que cela soit différent entre les 2 appels si le HTML rendu est le même.

**oraya** · 16/11/2015, 09h57

Tout à fait d'accord, c'est pour ça que je trouve ça bizarre xD

**NoSmoking** · 16/11/2015, 20h57

Le mieux serait quand même de disposer d'une page test en ligne reproduisant ce phénomène.

**oraya** · 17/11/2015, 09h27

Bonjour,

Ce ne sera pas necessaire ^^

J'ai un ami qui a trouvé la source du problème dans le code de l'API Raphael.js.
Il s'agit en fait d'un ligne de code (ligne 5934) où pour remplir une section, il fait appel a une ressource par URL (surement pour généraliser et permettre d'aller chercher qqchose sur un autre site). Seulement voila, pour aller chercher cette ressource, il récupère la valeur de l'url via l'instruction document.location.origin + document.location.pathname ce qui omet d'inclure d'éventuelles variables. Le lien n'étant pas bon il ne peut donc aller chercher cette ressource.

Je pense que mon explication est hyper bancale

Mais bon vu que j'ai pas tout compris ce qu'on m'a expliqué, c'est le mieux que je puisse dire

Par la suite on a trouvé ce bug dans la liste des problèmes identifiés sur le projet GitHub :
https://github.com/DmitryBaranovskiy/raphael/issues/999

il suffit donc simplement de changer cette instruction et le tour est joué ^^
Dans la version complète de l'API, il faut regarder ligne 5934

Merci quand même à toi NoSmoking pour t'être penché sur cette histoire

A la prochaine !

**NoSmoking** · 17/11/2015, 22h14

Merci à toi pour ce retour

Raphael.js et comportement différent avec variable GET

JavaScript

Discussions similaires

Partager

Partager