Raphael.js et comportement différent avec variable GET

Version imprimable

Bonjour :mrgreen:

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 8O
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:

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:

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:

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 :P Et franchement, je suis comprend vraiment pas en quoi une variable $_GET en plus ou en moins changerais le comportement d'un script Javascript 8O

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

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

10/11/2015, 20h33
NoSmoking
Bonjour,
on peut s'interroger sur l'utilité d'un tel code
Code:

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.

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:

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)

14/11/2015, 17h45
NoSmoking

Il n'y a aucune raison que cela soit différent entre les 2 appels si le HTML rendu est le même.
16/11/2015, 09h57
oraya

Tout à fait d'accord, c'est pour ça que je trouve ça bizarre xD
16/11/2015, 20h57
NoSmoking

Le mieux serait quand même de disposer d'une page test en ligne reproduisant ce phénomène.
17/11/2015, 09h27
oraya

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 :aie:
Mais bon vu que j'ai pas tout compris ce qu'on m'a expliqué, c'est le mieux que je puisse dire :mrgreen:

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 :D
A la prochaine !
17/11/2015, 22h14
NoSmoking

Merci à toi pour ce retour :ccool: