Load in report details on around page via ajax.

Include URL changing, using history.pushState.
Show a larger marker icon for the selected report.
Make sure title is updated, and correct sub_map_links are shown.

The /report/new template is now wrapped in a <div id="side-form">
rather than <div id="side"> for consistency with the /around page,
which keeps display_all_reports_in_area() simpler, because it can
always assume "#side" means "list of reports".

2 files changed, 45 insertions, 8 deletions

diff --git a/web/js/map-OpenLayers.js b/web/js/map-OpenLayers.js
index 345ebeced..872956716 100644
--- a/web/js/map-OpenLayers.js
+++ b/web/js/map-OpenLayers.js
@@ -38,7 +38,12 @@ var fixmystreet = fixmystreet || {};
 
       markers_list: function(pins, transform) {
         var markers = [];
-        var size = fixmystreet.maps.marker_size_for_zoom(fixmystreet.map.getZoom() + fixmystreet.zoomOffset);
+        var size = fixmystreet.maps.marker_size_for_zoom(
+            fixmystreet.map.getZoom() + fixmystreet.zoomOffset
+        );
+        var selected_size = fixmystreet.maps.selected_marker_size_for_zoom(
+            fixmystreet.map.getZoom() + fixmystreet.zoomOffset
+        );
         for (var i=0; i<pins.length; i++) {
             var pin = pins[i];
             var loc = new OpenLayers.Geometry.Point(pin[1], pin[0]);
@@ -49,9 +54,10 @@ var fixmystreet = fixmystreet || {};
                     fixmystreet.map.getProjectionObject()
                 );
             }
+            var marker_size = (pin[3] === window.selected_problem_id) ? selected_size : size;
             var marker = new OpenLayers.Feature.Vector(loc, {
                 colour: pin[2],
-                size: pin[5] || size,
+                size: pin[5] || marker_size,
                 faded: 0,
                 id: pin[3],
                 title: pin[4] || ''
@@ -62,21 +68,44 @@ var fixmystreet = fixmystreet || {};
       },
 
       markers_resize: function() {
-        var size = fixmystreet.maps.marker_size_for_zoom(fixmystreet.map.getZoom() + fixmystreet.zoomOffset);
+        var size = fixmystreet.maps.marker_size_for_zoom(
+            fixmystreet.map.getZoom() + fixmystreet.zoomOffset
+        );
+        var selected_size = fixmystreet.maps.selected_marker_size_for_zoom(
+            fixmystreet.map.getZoom() + fixmystreet.zoomOffset
+        );
         for (var i = 0; i < fixmystreet.markers.features.length; i++) {
-            fixmystreet.markers.features[i].attributes.size = size;
+            if (fixmystreet.markers.features[i].attributes.id == window.selected_problem_id) {
+                fixmystreet.markers.features[i].attributes.size = selected_size;
+            } else {
+                fixmystreet.markers.features[i].attributes.size = size;
+            }
         }
         fixmystreet.markers.redraw();
       },
 
+      get_marker_by_id: function(problem_id) {
+        return fixmystreet.markers.getFeaturesByAttribute('id', problem_id)[0];
+      },
+
       marker_size_for_zoom: function(zoom) {
         if (zoom >= 15) {
-            return 'normal';
+            return window.selected_problem_id ? 'small' : 'normal';
         } else if (zoom >= 13) {
-            return 'small';
+            return window.selected_problem_id ? 'mini' : 'small';
         } else {
             return 'mini';
         }
+      },
+
+      selected_marker_size_for_zoom: function(zoom) {
+        if (zoom >= 15) {
+            return 'big';
+        } else if (zoom >= 13) {
+            return 'normal';
+        } else {
+            return 'small';
+        }
       }
     };
 
@@ -671,8 +700,16 @@ OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, {
     },
 
     trigger: function(e) {
+        // If we are looking at an individual report, and the report was
+        // ajaxed into the DOM from the all reports page, then clicking
+        // the map background should take us back to the all reports list.
+        if ($('.js-back-to-report-list').length) {
+            $('.js-back-to-report-list').trigger('click');
+            return true;
+        }
+
         var lonlat = fixmystreet.map.getLonLatFromViewPortPx(e.xy);
-        fixmystreet.begin_report(lonlat);
+        fixmystreet.display.begin_report(lonlat);
 
         if ( typeof ga !== 'undefined' && window.cobrand == 'fixmystreet' ) {
             ga('send', 'pageview', { 'page': '/map_click' } );
diff --git a/web/js/map-google.js b/web/js/map-google.js
index a00d52ba1..fa2b6d90e 100644
--- a/web/js/map-google.js
+++ b/web/js/map-google.js
@@ -82,7 +82,7 @@ fixmystreet.maps = {};
 
     function map_clicked(e) {
         var lonlat = e.latLng;
-        fixmystreet.begin_report(lonlat);
+        fixmystreet.display.begin_report(lonlat);
     }
 
     /* Pan data handler */