change svg and terrain example to use fetch

liabru · Jan 16, 2021 · 5551cd5 · 5551cd5
1 parent 33e8fe8
commit 5551cd5
Show file tree

Hide file tree

Showing 3 changed files with 80 additions and 69 deletions.
diff --git a/demo/index.html b/demo/index.html
@@ -15,7 +15,6 @@
     <!-- Libs -->
     <script src="./lib/decomp.js"></script>
     <script src="./lib/pathseg.js"></script>
-    <script src="https://code.jquery.com/jquery-3.1.1.js"></script>
 
     <!-- Examples -->
     <script src="./js/Examples.js"></script>

diff --git a/examples/svg.js b/examples/svg.js
@@ -33,43 +33,44 @@ Example.svg = function() {
     Runner.run(runner, engine);
 
     // add bodies
-    var svgs = [
-        'iconmonstr-check-mark-8-icon', 
-        'iconmonstr-paperclip-2-icon',
-        'iconmonstr-puzzle-icon',
-        'iconmonstr-user-icon'
-    ];
-
-    if (typeof $ !== 'undefined') {
-        for (var i = 0; i < svgs.length; i += 1) {
-            (function(i) {
-                $.get('./svg/' + svgs[i] + '.svg').done(function(data) {
-                    var vertexSets = [],
-                        color = Common.choose(['#f19648', '#f5d259', '#f55a3c', '#063e7b', '#ececd1']);
-
-                    $(data).find('path').each(function(i, path) {
-                        var points = Svg.pathToVertices(path, 30);
-                        vertexSets.push(Vertices.scale(points, 0.4, 0.4));
-                    });
-
-                    World.add(world, Bodies.fromVertices(100 + i * 150, 200 + i * 50, vertexSets, {
-                        render: {
-                            fillStyle: color,
-                            strokeStyle: color,
-                            lineWidth: 1
-                        }
-                    }, true));
-                });
-            })(i);
-        }
-
-        $.get('./svg/svg.svg').done(function(data) {
-            var vertexSets = [],
-                color = Common.choose(['#f19648', '#f5d259', '#f55a3c', '#063e7b', '#ececd1']);
-
-            $(data).find('path').each(function(i, path) {
-                vertexSets.push(Svg.pathToVertices(path, 30));
+    if (typeof fetch !== 'undefined') {
+        var select = function(root, selector) {
+            return Array.prototype.slice.call(root.querySelectorAll(selector));
+        };
+
+        var loadSvg = function(url) {
+            return fetch(url)
+                .then(function(response) { return response.text(); })
+                .then(function(raw) { return (new window.DOMParser()).parseFromString(raw, 'image/svg+xml'); });
+        };
+
+        ([
+            './svg/iconmonstr-check-mark-8-icon.svg', 
+            './svg/iconmonstr-paperclip-2-icon.svg',
+            './svg/iconmonstr-puzzle-icon.svg',
+            './svg/iconmonstr-user-icon.svg'
+        ]).forEach(function(path, i) { 
+            loadSvg(path).then(function(root) {
+                var color = Common.choose(['#f19648', '#f5d259', '#f55a3c', '#063e7b', '#ececd1']);
+
+                var vertexSets = select(root, 'path')
+                    .map(function(path) { return Vertices.scale(Svg.pathToVertices(path, 30), 0.4, 0.4); });
+
+                World.add(world, Bodies.fromVertices(100 + i * 150, 200 + i * 50, vertexSets, {
+                    render: {
+                        fillStyle: color,
+                        strokeStyle: color,
+                        lineWidth: 1
+                    }
+                }, true));
             });
+        });
+
+        loadSvg('./svg/svg.svg').then(function(root) {
+            var color = Common.choose(['#f19648', '#f5d259', '#f55a3c', '#063e7b', '#ececd1']);
+
+            var vertexSets = select(root, 'path')
+                .map(function(path) { return Svg.pathToVertices(path, 30); });
 
             World.add(world, Bodies.fromVertices(400, 80, vertexSets, {
                 render: {
@@ -79,6 +80,8 @@ Example.svg = function() {
                 }
             }, true));
         });
+    } else {
+        Common.warn('Fetch is not available. Could not load SVG.');
     }
 
     World.add(world, [

diff --git a/examples/terrain.js b/examples/terrain.js
@@ -34,39 +34,48 @@ Example.terrain = function() {
     Runner.run(runner, engine);
 
     // add bodies
-    var terrain;
-
-    if (typeof $ !== 'undefined') {
-        $.get('./svg/terrain.svg').done(function(data) {
-            var vertexSets = [];
-
-            $(data).find('path').each(function(i, path) {
-                vertexSets.push(Svg.pathToVertices(path, 30));
+    if (typeof fetch !== 'undefined') {
+        var select = function(root, selector) {
+            return Array.prototype.slice.call(root.querySelectorAll(selector));
+        };
+
+        var loadSvg = function(url) {
+            return fetch(url)
+                .then(function(response) { return response.text(); })
+                .then(function(raw) { return (new window.DOMParser()).parseFromString(raw, 'image/svg+xml'); });
+        };
+
+        loadSvg('./svg/terrain.svg')
+            .then(function(root) {
+                var paths = select(root, 'path');
+
+                var vertexSets = paths.map(function(path) { return Svg.pathToVertices(path, 30); });
+
+                var terrain = Bodies.fromVertices(400, 350, vertexSets, {
+                    isStatic: true,
+                    render: {
+                        fillStyle: '#060a19',
+                        strokeStyle: '#060a19',
+                        lineWidth: 1
+                    }
+                }, true);
+
+                World.add(world, terrain);
+
+                var bodyOptions = {
+                    frictionAir: 0, 
+                    friction: 0.0001,
+                    restitution: 0.6
+                };
+
+                World.add(world, Composites.stack(80, 100, 20, 20, 10, 10, function(x, y) {
+                    if (Query.point([terrain], { x: x, y: y }).length === 0) {
+                        return Bodies.polygon(x, y, 5, 12, bodyOptions);
+                    }
+                }));
             });
-
-            terrain = Bodies.fromVertices(400, 350, vertexSets, {
-                isStatic: true,
-                render: {
-                    fillStyle: '#060a19',
-                    strokeStyle: '#060a19',
-                    lineWidth: 1
-                }
-            }, true);
-
-            World.add(world, terrain);
-
-            var bodyOptions = {
-                frictionAir: 0, 
-                friction: 0.0001,
-                restitution: 0.6
-            };
-
-            World.add(world, Composites.stack(80, 100, 20, 20, 10, 10, function(x, y) {
-                if (Query.point([terrain], { x: x, y: y }).length === 0) {
-                    return Bodies.polygon(x, y, 5, 12, bodyOptions);
-                }
-            }));
-        });
+    } else {
+        Common.warn('Fetch is not available. Could not load SVG.');
     }
 
     // add mouse control