[tor-commits] [atlas/master] Disable SVG plotting when not supported

[irl at torproject.org]

commit 5ba1a5bc8f963de92c9f79fe8dffe09fe9b33357
Author: Iain R. Learmonth <irl at fsfe.org>
Date:   Sat Dec 2 22:08:14 2017 +0000

    Disable SVG plotting when not supported
---
 css/atlas.css                |  3 +++
 js/views/aggregate/map.js    | 23 +++++++++++++----------
 templates/aggregate/map.html | 10 +++++++++-
 3 files changed, 25 insertions(+), 11 deletions(-)

diff --git a/css/atlas.css b/css/atlas.css
index 89a1def..2a2064f 100644
--- a/css/atlas.css
+++ b/css/atlas.css
@@ -98,3 +98,6 @@ label.radio-inline {
     width: auto;
 }
 
+#no-svg {
+    display: none;
+}
diff --git a/js/views/aggregate/map.js b/js/views/aggregate/map.js
index 4026ebc..4b0b943 100644
--- a/js/views/aggregate/map.js
+++ b/js/views/aggregate/map.js
@@ -140,16 +140,19 @@ define([
                                      relaysPublished: this.relaysPublished,
                                      bridgesPublished: this.bridgesPublished}));
 
-      this.plot();
-
-      var thisView = this;
-
-      $('input[name="aggregate-property"]').bind('change', function(){
-        thisView.plot();
-      });
-      $('#save_svg').bind('click', function(){
-        thisView.save();
-      });
+      canSvg = !!(document.createElementNS && document.createElementNS('http://www.w3.org/2000/svg','svg').createSVGRect);
+      if (canSvg) {
+        this.plot();
+        var thisView = this;
+        $('input[name="aggregate-property"]').bind('change', function(){
+          thisView.plot();
+        });
+        $('#save_svg').bind('click', function(){
+          thisView.save();
+        });
+      } else {
+        $('#no-svg').show();
+      }
     },
     renderError: function(){
       var compiledTemplate = _.template(aggregateSearchTemplate);
diff --git a/templates/aggregate/map.html b/templates/aggregate/map.html
index 1beac01..88224ff 100644
--- a/templates/aggregate/map.html
+++ b/templates/aggregate/map.html
@@ -35,7 +35,15 @@
     </div>
     <% } %>
 <% } else { %>
-   <div id="aggregate-map"></div>
+   <div id="aggregate-map">
+    <div class="alert alert-danger" id="no-svg">
+        <strong>SVG Not Supported!</strong>
+        <p>Your browser does not support Scalable Vector Graphics. This support
+        is required in order to produce the map view. If you are using Tor
+        Browser on high-security mode, you will need to use either medium- or
+        low-security mode instead to view the map.</p>
+    </div>
+   </div>
    <div class="panel panel-default">
    <div class="panel-body">
    <form id="map-radio-buttons">