"Report a problem here" button in nav when viewing a location

Fixes #2016.

When you load a page that includes either a problem report, or is
centered on a location, the "Report a problem" button in the nav bar
(that normally takes you to the homepage) becomes a "Report a(nother)
problem here" button, that leads directly to the new report form
for the location in question.

On full map pages (/around and any /report/<id> pages loaded via it)
the reporting form will be rendered client-side, avoiding a full page
reload.

On pages lacking the full map (eg: missing fixmystreet.bbox_strategy),
namely /reports/<area> and any /report/<id> page that hasn’t been
client-side loaded via /around, we fall back to a server-side page load.

Finally, as you’d expect, the text and URL for the button dynamically
update as you move around the map, or switch between the different
client-side states of the reporting flow.

We also hide the button entirely when you’re reporting a problem,
which was something suggested a long time ago.

2 files changed, 71 insertions, 0 deletions

diff --git a/web/cobrands/fixmystreet/fixmystreet.js b/web/cobrands/fixmystreet/fixmystreet.js
index 1b863625f..c749ebcf9 100644
--- a/web/cobrands/fixmystreet/fixmystreet.js
+++ b/web/cobrands/fixmystreet/fixmystreet.js
@@ -671,6 +671,27 @@ $.extend(fixmystreet.set_up, {
     });
   },
 
+  report_a_problem_btn: function() {
+    $(fixmystreet).on('maps:update_view', fixmystreet.update_report_a_problem_btn);
+
+    // Hide button on new report page.
+    if ( fixmystreet.page === 'new' ) {
+      $('.report-a-problem-btn').hide();
+    }
+
+    $('.report-a-problem-btn').on('click', function(e){
+      var url = this.href;
+      if ( url.indexOf('report/new') > -1 ) {
+        try {
+          e.preventDefault();
+          fixmystreet.display.begin_report( fixmystreet.map.getCenter() );
+        } catch (error) {
+          window.location = url;
+        }
+      }
+    });
+  },
+
   map_controls: function() {
     //add permalink on desktop, force hide on mobile
     //add links container (if its not there)
@@ -891,6 +912,34 @@ $.extend(fixmystreet.set_up, {
 
 });
 
+fixmystreet.update_report_a_problem_btn = function() {
+    var zoom = fixmystreet.map.getZoom();
+    var center = fixmystreet.map.getCenterWGS84();
+    var new_report_url = '/report/new?longitude=' + center.lon.toFixed(6) + '&latitude=' + center.lat.toFixed(6);
+
+    var href = '/';
+    var visible = true;
+    var text = translation_strings.report_a_problem_btn.default;
+
+    if (fixmystreet.page === 'new') {
+        visible = false;
+
+    } else if (fixmystreet.page === 'report') {
+        text = translation_strings.report_a_problem_btn.another;
+        href = new_report_url;
+
+    } else if (fixmystreet.page === 'around' && zoom > 1) {
+        text = translation_strings.report_a_problem_btn.here;
+        href = new_report_url;
+
+    } else if (fixmystreet.page === 'reports' && zoom > 12) {
+        text = translation_strings.report_a_problem_btn.here;
+        href = new_report_url;
+    }
+
+    $('.report-a-problem-btn').attr('href', href).text(text).toggle(visible);
+};
+
 fixmystreet.update_councils_text = function(data) {
     $('#js-councils_text').html(data.councils_text);
     $('#js-councils_text_private').html(data.councils_text_private);
@@ -1084,6 +1133,8 @@ fixmystreet.display = {
     }
 
     fixmystreet.page = 'new';
+
+    fixmystreet.update_report_a_problem_btn();
   },
 
   report: function(reportPageUrl, reportId, callback) {
@@ -1152,6 +1203,8 @@ fixmystreet.display = {
             fixmystreet.run(fixmystreet.set_up.moderation);
             fixmystreet.run(fixmystreet.set_up.response_templates);
 
+            fixmystreet.update_report_a_problem_btn();
+
             window.selected_problem_id = reportId;
             var marker = fixmystreet.maps.get_marker_by_id(reportId);
             if (fixmystreet.map.panTo && ($('html').hasClass('mobile') || !marker.onScreen())) {
@@ -1214,6 +1267,8 @@ fixmystreet.display = {
         $('.big-hide-pins-link').show();
         fixmystreet.set_up.map_controls();
 
+        fixmystreet.update_report_a_problem_btn();
+
         window.selected_problem_id = undefined;
 
         // Perform vendor-specific map setup steps,
diff --git a/web/js/map-OpenLayers.js b/web/js/map-OpenLayers.js
index b2b74648c..6f42d13d1 100644
--- a/web/js/map-OpenLayers.js
+++ b/web/js/map-OpenLayers.js
@@ -791,6 +791,16 @@ $.extend(fixmystreet.utils, {
             fixmystreet.map.setCenter(centre, fixmystreet.zoom || 3);
         }
 
+        // map.getCenter() returns a position in "map units", but sometimes you
+        // want the center in GPS-style latitude/longitude coordinates (WGS84)
+        // for example, to pass as GET params to fixmystreet.com/report/new.
+        fixmystreet.map.getCenterWGS84 = function() {
+            return fixmystreet.map.getCenter().transform(
+                fixmystreet.map.getProjectionObject(),
+                new OpenLayers.Projection("EPSG:4326")
+            );
+        };
+
         if (document.getElementById('mapForm')) {
             var click = fixmystreet.maps.click_control = new OpenLayers.Control.Click();
             fixmystreet.map.addControl(click);
@@ -804,6 +814,12 @@ $.extend(fixmystreet.utils, {
             onload();
         }
 
+        // Allow external scripts to react to pans/zooms on the map,
+        // by subscribing to $(fixmystreet).on('maps:update_view')
+        fixmystreet.map.events.register('moveend', null, function(){
+            $(fixmystreet).trigger('maps:update_view');
+        });
+
         (function() {
             var timeout;
             $('#js-reports-list').on('mouseenter', '.item-list--reports__item', function(){