commit 5ba1a5bc8f963de92c9f79fe8dffe09fe9b33357 Author: Iain R. Learmonth irl@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%27,%27svg%27).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">