Skip to content

Commit 5551cd5

Browse files
liabruliabru
committed
change svg and terrain example to use fetch
1 parent 33e8fe8 commit 5551cd5

File tree

3 files changed

+80
-69
lines changed

3 files changed

+80
-69
lines changed

‎demo/index.html

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,6 @@
1515
<!-- Libs -->
1616
<script src="./lib/decomp.js"></script>
1717
<script src="./lib/pathseg.js"></script>
18-
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
1918

2019
<!-- Examples -->
2120
<script src="./js/Examples.js"></script>

‎examples/svg.js

Lines changed: 39 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -33,43 +33,44 @@ Example.svg = function() {
3333
Runner.run(runner, engine);
3434

3535
// add bodies
36-
var svgs = [
37-
'iconmonstr-check-mark-8-icon',
38-
'iconmonstr-paperclip-2-icon',
39-
'iconmonstr-puzzle-icon',
40-
'iconmonstr-user-icon'
41-
];
42-
43-
if (typeof $ !== 'undefined') {
44-
for (var i = 0; i < svgs.length; i += 1) {
45-
(function(i) {
46-
$.get('./svg/' + svgs[i] + '.svg').done(function(data) {
47-
var vertexSets = [],
48-
color = Common.choose(['#f19648', '#f5d259', '#f55a3c', '#063e7b', '#ececd1']);
49-
50-
$(data).find('path').each(function(i, path) {
51-
var points = Svg.pathToVertices(path, 30);
52-
vertexSets.push(Vertices.scale(points, 0.4, 0.4));
53-
});
54-
55-
World.add(world, Bodies.fromVertices(100 + i * 150, 200 + i * 50, vertexSets, {
56-
render: {
57-
fillStyle: color,
58-
strokeStyle: color,
59-
lineWidth: 1
60-
}
61-
}, true));
62-
});
63-
})(i);
64-
}
65-
66-
$.get('./svg/svg.svg').done(function(data) {
67-
var vertexSets = [],
68-
color = Common.choose(['#f19648', '#f5d259', '#f55a3c', '#063e7b', '#ececd1']);
69-
70-
$(data).find('path').each(function(i, path) {
71-
vertexSets.push(Svg.pathToVertices(path, 30));
36+
if (typeof fetch !== 'undefined') {
37+
var select = function(root, selector) {
38+
return Array.prototype.slice.call(root.querySelectorAll(selector));
39+
};
40+
41+
var loadSvg = function(url) {
42+
return fetch(url)
43+
.then(function(response) { return response.text(); })
44+
.then(function(raw) { return (new window.DOMParser()).parseFromString(raw, 'image/svg+xml'); });
45+
};
46+
47+
([
48+
'./svg/iconmonstr-check-mark-8-icon.svg',
49+
'./svg/iconmonstr-paperclip-2-icon.svg',
50+
'./svg/iconmonstr-puzzle-icon.svg',
51+
'./svg/iconmonstr-user-icon.svg'
52+
]).forEach(function(path, i) {
53+
loadSvg(path).then(function(root) {
54+
var color = Common.choose(['#f19648', '#f5d259', '#f55a3c', '#063e7b', '#ececd1']);
55+
56+
var vertexSets = select(root, 'path')
57+
.map(function(path) { return Vertices.scale(Svg.pathToVertices(path, 30), 0.4, 0.4); });
58+
59+
World.add(world, Bodies.fromVertices(100 + i * 150, 200 + i * 50, vertexSets, {
60+
render: {
61+
fillStyle: color,
62+
strokeStyle: color,
63+
lineWidth: 1
64+
}
65+
}, true));
7266
});
67+
});
68+
69+
loadSvg('./svg/svg.svg').then(function(root) {
70+
var color = Common.choose(['#f19648', '#f5d259', '#f55a3c', '#063e7b', '#ececd1']);
71+
72+
var vertexSets = select(root, 'path')
73+
.map(function(path) { return Svg.pathToVertices(path, 30); });
7374

7475
World.add(world, Bodies.fromVertices(400, 80, vertexSets, {
7576
render: {
@@ -79,6 +80,8 @@ Example.svg = function() {
7980
}
8081
}, true));
8182
});
83+
} else {
84+
Common.warn('Fetch is not available. Could not load SVG.');
8285
}
8386

8487
World.add(world, [

‎examples/terrain.js

Lines changed: 41 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -34,39 +34,48 @@ Example.terrain = function() {
3434
Runner.run(runner, engine);
3535

3636
// add bodies
37-
var terrain;
38-
39-
if (typeof $ !== 'undefined') {
40-
$.get('./svg/terrain.svg').done(function(data) {
41-
var vertexSets = [];
42-
43-
$(data).find('path').each(function(i, path) {
44-
vertexSets.push(Svg.pathToVertices(path, 30));
37+
if (typeof fetch !== 'undefined') {
38+
var select = function(root, selector) {
39+
return Array.prototype.slice.call(root.querySelectorAll(selector));
40+
};
41+
42+
var loadSvg = function(url) {
43+
return fetch(url)
44+
.then(function(response) { return response.text(); })
45+
.then(function(raw) { return (new window.DOMParser()).parseFromString(raw, 'image/svg+xml'); });
46+
};
47+
48+
loadSvg('./svg/terrain.svg')
49+
.then(function(root) {
50+
var paths = select(root, 'path');
51+
52+
var vertexSets = paths.map(function(path) { return Svg.pathToVertices(path, 30); });
53+
54+
var terrain = Bodies.fromVertices(400, 350, vertexSets, {
55+
isStatic: true,
56+
render: {
57+
fillStyle: '#060a19',
58+
strokeStyle: '#060a19',
59+
lineWidth: 1
60+
}
61+
}, true);
62+
63+
World.add(world, terrain);
64+
65+
var bodyOptions = {
66+
frictionAir: 0,
67+
friction: 0.0001,
68+
restitution: 0.6
69+
};
70+
71+
World.add(world, Composites.stack(80, 100, 20, 20, 10, 10, function(x, y) {
72+
if (Query.point([terrain], { x: x, y: y }).length === 0) {
73+
return Bodies.polygon(x, y, 5, 12, bodyOptions);
74+
}
75+
}));
4576
});
46-
47-
terrain = Bodies.fromVertices(400, 350, vertexSets, {
48-
isStatic: true,
49-
render: {
50-
fillStyle: '#060a19',
51-
strokeStyle: '#060a19',
52-
lineWidth: 1
53-
}
54-
}, true);
55-
56-
World.add(world, terrain);
57-
58-
var bodyOptions = {
59-
frictionAir: 0,
60-
friction: 0.0001,
61-
restitution: 0.6
62-
};
63-
64-
World.add(world, Composites.stack(80, 100, 20, 20, 10, 10, function(x, y) {
65-
if (Query.point([terrain], { x: x, y: y }).length === 0) {
66-
return Bodies.polygon(x, y, 5, 12, bodyOptions);
67-
}
68-
}));
69-
});
77+
} else {
78+
Common.warn('Fetch is not available. Could not load SVG.');
7079
}
7180

7281
// add mouse control

0 commit comments

Comments
 (0)