fix(Visualize): SVG clips now work again, fixes #272

Due to this issue angular/angular.js#8934 (comment) we were using absolute paths to reference clips. Unfortunately this stopped working as soon as we started using deep linking on the visualize page. Instead, an update to the issue means we can drop support for IE9 and remove some of the need for the `<base>` element. Fixes #272
QutEcoacoustics · Jun 21, 2016 · e2c4b1c · e2c4b1c
1 parent 59a0fc1
commit e2c4b1c
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 6 deletions.
diff --git a/src/app/app.js b/src/app/app.js
@@ -194,7 +194,9 @@ angular.module("baw",
                                });
 
                  // location config
-                 $locationProvider.html5Mode(true);
+                 // https://github.com/angular/angular.js/issues/8934#issuecomment-56568466
+                 // Now removing base tag and deprecating support for IE9
+                 $locationProvider.html5Mode({enabled: true, requireBase: false});
 
                  // http default configuration
                  $httpProvider.defaults.withCredentials = true;

diff --git a/src/components/services/vendorServices/externals.js b/src/components/services/vendorServices/externals.js
@@ -115,16 +115,18 @@ angular
             };
 
             d3.selection.prototype.clipPath = function (clipUrl) {
-                var funcIriRegex = /url\(#(.*)\)/;
+                var funcUriRegex = /url\(#(.*)\)/;
                 if (arguments.length === 1) {
-                    var match = funcIriRegex.exec(clipUrl),
+                    var match = funcUriRegex.exec(clipUrl),
                         newUrl = clipUrl;
                     if (match) {
                         // angular's HTML 5 mode breaks relative links for the clip-path attribute
                         // See: https://github.com/angular/angular.js/issues/8934
                         // This function take a normal clip url and absolutifies it so it will work.
-                        var absoluteUrl = window.location.href;
-                        newUrl = "url(" + absoluteUrl + "#" + match[1] + ")";
+                        // UPDATE: https://github.com/angular/angular.js/issues/8934#issuecomment-56568466
+                        // Now removing base tag and deprecating support for IE9
+                        //var absoluteUrl = window.location.href;
+                        newUrl = "url(#" + match[1] + ")";
                     }
                     return this.attr("clip-path", newUrl);
                 }

diff --git a/src/index.html b/src/index.html
@@ -5,7 +5,11 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title><%= build_configs.values.brand.title %></title>
 
-    <base href="/">
+    <%
+    // https://github.com/angular/angular.js/issues/8934#issuecomment-56568466
+    // Now removing base tag and deprecating support for IE9
+    // <base href="/">
+    %>
 
     <!-- compiled CSS -->
     <link rel="stylesheet" type="text/css" href="<%= build_configs.current.siteDir %><%= mainStyle %>"/>