Move to using pushState for new report.

Update the URL whenever location of pin is updated (first time, drag, or
reclick), make sure it works when clicking back.

18 files changed, 96 insertions, 95 deletions

diff --git a/templates/web/angus/maps/fms.html b/templates/web/angus/maps/fms.html
index ec4033041..658b9ff9e 100644
--- a/templates/web/angus/maps/fms.html
+++ b/templates/web/angus/maps/fms.html
@@ -4,7 +4,6 @@
 <script type="text/javascript" src="[% version('/js/map-OpenLayers.js') %]"></script>
 <script type="text/javascript" src="[% version('/js/map-bing-ol.js') %]"></script>
 <script type="text/javascript" src="[% version('/js/map-fms.js') %]"></script>
-<script type="text/javascript" src="[% version('/js/jquery.ba-hashchange.min.js') %]"></script>
 <script src="[% version('/cobrands/angus/position_map.js') %]" charset="utf-8"></script>
 [% END %]
 
diff --git a/templates/web/base/front/javascript.html b/templates/web/base/front/javascript.html
index 13aa5216c..4dcd384d6 100644
--- a/templates/web/base/front/javascript.html
+++ b/templates/web/base/front/javascript.html
@@ -9,7 +9,6 @@ Modernizr.load({
         "preload![% version('/js/OpenLayers.fixmystreet.js') %]",
         "preload![% version('/js/map-OpenLayers.js') %]",
         "preload![% version('/js/map-OpenStreetMap.js') %]",
-        "preload![% version('/js/jquery.ba-hashchange.min.js') %]"
     ]
 });
 </script>
diff --git a/templates/web/base/maps/bing.html b/templates/web/base/maps/bing.html
index 7c1942d0d..6c32b05f3 100644
--- a/templates/web/base/maps/bing.html
+++ b/templates/web/base/maps/bing.html
@@ -3,7 +3,6 @@
 <script type="text/javascript" src="[% version('/js/OpenLayers.fixmystreet.js') %]"></script>
 <script type="text/javascript" src="[% version('/js/map-OpenLayers.js') %]"></script>
 <script type="text/javascript" src="[% version('/js/map-bing-ol.js') %]"></script>
-<script type="text/javascript" src="[% version('/js/jquery.ba-hashchange.min.js') %]"></script>
 [% END %]
 
 [% map_html = INCLUDE maps/openlayers.html %]
diff --git a/templates/web/base/maps/fms.html b/templates/web/base/maps/fms.html
index ed5547227..21046332b 100644
--- a/templates/web/base/maps/fms.html
+++ b/templates/web/base/maps/fms.html
@@ -4,7 +4,6 @@
 <script type="text/javascript" src="[% version('/js/map-OpenLayers.js') %]"></script>
 <script type="text/javascript" src="[% version('/js/map-bing-ol.js') %]"></script>
 <script type="text/javascript" src="[% version('/js/map-fms.js') %]"></script>
-<script type="text/javascript" src="[% version('/js/jquery.ba-hashchange.min.js') %]"></script>
 [% END %]
 
 [% map_html = INCLUDE maps/openlayers.html include_key = 1 %]
diff --git a/templates/web/base/maps/google-ol.html b/templates/web/base/maps/google-ol.html
index 543918692..f7d79b11f 100644
--- a/templates/web/base/maps/google-ol.html
+++ b/templates/web/base/maps/google-ol.html
@@ -3,7 +3,6 @@
 <script type="text/javascript" src="[% version('/js/OpenLayers.fixmystreet.google.js') %]"></script>
 <script type="text/javascript" src="[% version('/js/map-OpenLayers.js') %]"></script>
 <script type="text/javascript" src="[% version('/js/map-google-ol.js') %]"></script>
-<script type="text/javascript" src="[% version('/js/jquery.ba-hashchange.min.js') %]"></script>
 [% END %]
 
 [% map_sub_links = BLOCK %]
diff --git a/templates/web/base/maps/google.html b/templates/web/base/maps/google.html
index 0db6af7bf..86ca51fab 100644
--- a/templates/web/base/maps/google.html
+++ b/templates/web/base/maps/google.html
@@ -9,7 +9,6 @@
 </style>
 <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
 <script type="text/javascript" src="[% version('/js/map-google.js') %]"></script>
-<script type="text/javascript" src="[% version('/js/jquery.ba-hashchange.min.js') %]"></script>
 [% END %]
 
 [% map_html = BLOCK %]
diff --git a/templates/web/base/maps/mapquest-attribution.html b/templates/web/base/maps/mapquest-attribution.html
index 58f872527..c49cb41e0 100644
--- a/templates/web/base/maps/mapquest-attribution.html
+++ b/templates/web/base/maps/mapquest-attribution.html
@@ -2,7 +2,6 @@
 <script type="text/javascript" src="[% version('/js/OpenLayers.fixmystreet.js') %]"></script>
 <script type="text/javascript" src="[% version('/js/map-OpenLayers.js') %]"></script>
 <script type="text/javascript" src="[% version('/js/map-OpenStreetMap.js') %]"></script>
-<script type="text/javascript" src="[% version('/js/jquery.ba-hashchange.min.js') %]"></script>
 [% END %]
 
 [% map_html = BLOCK %]
diff --git a/templates/web/base/maps/osm-streetview.html b/templates/web/base/maps/osm-streetview.html
index 7840884bd..39b2379c9 100644
--- a/templates/web/base/maps/osm-streetview.html
+++ b/templates/web/base/maps/osm-streetview.html
@@ -2,7 +2,6 @@
 <script type="text/javascript" src="[% version('/js/OpenLayers.fixmystreet.js') %]"></script>
 <script type="text/javascript" src="[% version('/js/map-OpenLayers.js') %]"></script>
 <script type="text/javascript" src="[% version('/js/map-streetview.js') %]"></script>
-<script type="text/javascript" src="[% version('/js/jquery.ba-hashchange.min.js') %]"></script>
 [% END %]
 
 [% map_html = BLOCK %]
diff --git a/templates/web/base/maps/osm-toner-lite.html b/templates/web/base/maps/osm-toner-lite.html
index d6d395c22..efba70a7e 100644
--- a/templates/web/base/maps/osm-toner-lite.html
+++ b/templates/web/base/maps/osm-toner-lite.html
@@ -3,7 +3,6 @@
 <script type="text/javascript" src="https://stamen-maps.a.ssl.fastly.net/js/tile.stamen.js?v1.3.0"></script>
 <script type="text/javascript" src="[% version('/js/map-OpenLayers.js') %]"></script>
 <script type="text/javascript" src="[% version('/js/map-toner-lite.js') %]"></script>
-<script type="text/javascript" src="[% version('/js/jquery.ba-hashchange.min.js') %]"></script>
 [% END %]
 
 [% map_html = BLOCK %]
diff --git a/templates/web/base/maps/osm.html b/templates/web/base/maps/osm.html
index 58f872527..c49cb41e0 100644
--- a/templates/web/base/maps/osm.html
+++ b/templates/web/base/maps/osm.html
@@ -2,7 +2,6 @@
 <script type="text/javascript" src="[% version('/js/OpenLayers.fixmystreet.js') %]"></script>
 <script type="text/javascript" src="[% version('/js/map-OpenLayers.js') %]"></script>
 <script type="text/javascript" src="[% version('/js/map-OpenStreetMap.js') %]"></script>
-<script type="text/javascript" src="[% version('/js/jquery.ba-hashchange.min.js') %]"></script>
 [% END %]
 
 [% map_html = BLOCK %]
diff --git a/templates/web/bristol/maps/fms.html b/templates/web/bristol/maps/fms.html
index a1a2a3f7b..367fe4f59 100644
--- a/templates/web/bristol/maps/fms.html
+++ b/templates/web/bristol/maps/fms.html
@@ -4,7 +4,6 @@
 <script type="text/javascript" src="[% version('/js/OpenLayers.Projection.OrdnanceSurvey.js') %]"></script>
 <script type="text/javascript" src="[% version('/js/map-OpenLayers.js') %]"></script>
 <script type="text/javascript" src="[% version('/js/map-wmts-bristol.js') %]"></script>
-<script type="text/javascript" src="[% version('/js/jquery.ba-hashchange.min.js') %]"></script>
 <!--[if lte IE 6]>
   <link rel="stylesheet" href="/js/OpenLayers-2.13.1/theme/default/ie6-style.css" type="text/css">
 <![endif]-->
diff --git a/templates/web/fixmystreet.com/front/javascript.html b/templates/web/fixmystreet.com/front/javascript.html
index 0ccaa0870..d1c48a432 100644
--- a/templates/web/fixmystreet.com/front/javascript.html
+++ b/templates/web/fixmystreet.com/front/javascript.html
@@ -9,7 +9,6 @@ Modernizr.load({
         "preload![% version('/js/map-OpenLayers.js') %]",
         "preload![% version('/js/map-bing-ol.js') %]",
         "preload![% version('/js/map-fms.js') %]",
-        "preload![% version('/js/jquery.ba-hashchange.min.js') %]"
     ]
 });
 </script>
diff --git a/templates/web/zurich/maps/zurich.html b/templates/web/zurich/maps/zurich.html
index e0c258223..873afd11a 100644
--- a/templates/web/zurich/maps/zurich.html
+++ b/templates/web/zurich/maps/zurich.html
@@ -3,7 +3,6 @@
 <script type="text/javascript" src="[% version('/js/OpenLayers.Projection.CH1903.js') %]"></script>
 <script type="text/javascript" src="[% version('/js/map-OpenLayers.js') %]"></script>
 <script type="text/javascript" src="[% version('/js/map-wmts-zurich.js') %]"></script>
-<script type="text/javascript" src="[% version('/js/jquery.ba-hashchange.min.js') %]"></script>
 [% END %]
 
 [% map_sub_links = BLOCK %]
diff --git a/web/cobrands/angus/position_map.js b/web/cobrands/angus/position_map.js
index ce4c9df20..d5d3c942f 100644
--- a/web/cobrands/angus/position_map.js
+++ b/web/cobrands/angus/position_map.js
@@ -311,18 +311,19 @@ var add_streetlights = (function() {
                 streetlight_fault_layer.setVisibility(false);
             }
         });
-
-        // Make sure the streetlights get hidden if the back button is pressed
-        $(window).on('hashchange', function() {
-            if (location.hash === '') {
-                streetlight_layer.setVisibility(false);
-                streetlight_fault_layer.setVisibility(false);
-                fixmystreet.markers.setVisibility(true);
-                fixmystreet.bbox_strategy.activate();
-                fixmystreet.markers.refresh( { force: true } );
-            }
-        });
     }
+
+    // Make sure the streetlights get hidden if the back button is pressed
+    fixmystreet.maps.display_around = (function(original) {
+        function hide_streetlights() {
+            streetlight_layer.setVisibility(false);
+            streetlight_fault_layer.setVisibility(false);
+            fixmystreet.markers.setVisibility(true);
+            original.apply(fixmystreet.maps);
+        }
+        return hide_streetlights;
+    })(fixmystreet.maps.display_around);
+
     return add_streetlights;
 })();
 
diff --git a/web/cobrands/fixmystreet/fixmystreet.js b/web/cobrands/fixmystreet/fixmystreet.js
index 0a6c57676..264d20df1 100644
--- a/web/cobrands/fixmystreet/fixmystreet.js
+++ b/web/cobrands/fixmystreet/fixmystreet.js
@@ -511,13 +511,26 @@ $.extend(fixmystreet.set_up, {
             fixmystreet.display.around(window.location.href);
         } else if ('reportId' in e.state) {
             fixmystreet.display.report(e.state.reportPageUrl, e.state.reportId);
+        } else if ('newReportAtLonlat' in e.state) {
+            fixmystreet.display.begin_report(e.state.newReportAtLonlat, false);
         }
     });
   }
 });
 
-fixmystreet.update_pin = function(lonlat) {
-    fixmystreet.maps.update_pin(lonlat);
+// The new location will be saved to a history state unless
+// savePushState is set to false.
+fixmystreet.update_pin = function(lonlat, savePushState) {
+    var lonlats = fixmystreet.maps.update_pin(lonlat);
+
+    if (savePushState !== false) {
+        if ('pushState' in history) {
+            var newReportUrl = '/report/new?longitude=' + lonlats.url.lon + '&latitude=' + lonlats.url.lat;
+            history.pushState({
+                newReportAtLonlat: lonlats.state
+            }, null, newReportUrl);
+        }
+    }
 
     $.getJSON('/report/new/ajax', {
         latitude: $('#fixmystreet\\.latitude').val(),
@@ -568,11 +581,11 @@ fixmystreet.update_pin = function(lonlat) {
 };
 
 fixmystreet.display = {
-  begin_report: function(lonlat) {
-    fixmystreet.maps.begin_report(lonlat);
+  begin_report: function(lonlat, saveHistoryState) {
+    lonlat = fixmystreet.maps.begin_report(lonlat);
 
     // Store pin location in form fields, and check coverage of point
-    fixmystreet.update_pin(lonlat);
+    fixmystreet.update_pin(lonlat, saveHistoryState);
 
     // It's possible to invoke this multiple times in a row
     // (eg: by clicking on the map multiple times, to
@@ -656,7 +669,6 @@ fixmystreet.display = {
     }
 
     fixmystreet.page = 'new';
-    location.hash = 'report';
   },
 
   report: function(reportPageUrl, reportId, callback) {
@@ -727,23 +739,30 @@ fixmystreet.display = {
     // just reveal it, rather than loading new page.
     if ($('#side').length) {
         $('#side').show();
+        $('#side-form').hide();
         $('#side-report').remove();
 
+        $('body').removeClass('with-notes');
+
         document.title = fixmystreet.original_title;
         fixmystreet.page = 'around';
         if ($('html').hasClass('mobile')) {
+            $('#mob_sub_map_links').remove();
             fixmystreet.mobile_reporting.apply_ui();
-            fixmystreet.map.updateSize();
         }
 
         if ('originalSubMapLinks' in window) {
             $('#sub_map_links').replaceWith(window.originalSubMapLinks);
             delete window.originalSubMapLinks;
         }
+        $('#sub_map_links').show();
         fixmystreet.set_up.map_controls();
 
         window.selected_problem_id = undefined;
-        fixmystreet.markers.refresh({force: true}); // force a redraw to return (de)selected marker to normal size
+
+        // Perform vendor-specific map setup steps,
+        // to get map back into "around" mode.
+        fixmystreet.maps.display_around();
 
         if (typeof callback === 'function') {
             callback();
diff --git a/web/js/jquery.ba-hashchange.min.js b/web/js/jquery.ba-hashchange.min.js
deleted file mode 100644
index 3c607bae3..000000000
--- a/web/js/jquery.ba-hashchange.min.js
+++ /dev/null
@@ -1,9 +0,0 @@
-/*
- * jQuery hashchange event - v1.3 - 7/21/2010
- * http://benalman.com/projects/jquery-hashchange-plugin/
- * 
- * Copyright (c) 2010 "Cowboy" Ben Alman
- * Dual licensed under the MIT and GPL licenses.
- * http://benalman.com/about/license/
- */
-(function($,e,b){var c="hashchange",h=document,f,g=$.event.special,i=h.documentMode,d="on"+c in e&&(i===b||i>7);function a(j){j=j||location.href;return"#"+j.replace(/^[^#]*#?(.*)$/,"$1")}$.fn[c]=function(j){return j?this.bind(c,j):this.trigger(c)};$.fn[c].delay=50;g[c]=$.extend(g[c],{setup:function(){if(d){return false}$(f.start)},teardown:function(){if(d){return false}$(f.stop)}});f=(function(){var j={},p,m=a(),k=function(q){return q},l=k,o=k;j.start=function(){p||n()};j.stop=function(){p&&clearTimeout(p);p=b};function n(){var r=a(),q=o(m);if(r!==m){l(m=r,q);$(e).trigger(c)}else{if(q!==m){location.href=location.href.replace(/#.*/,"")+q}}p=setTimeout(n,$.fn[c].delay)}$.browser.msie&&!d&&(function(){var q,r;j.start=function(){if(!q){r=$.fn[c].src;r=r&&r+a();q=$('<iframe tabindex="-1" title="empty"/>').hide().one("load",function(){r||l(a());n()}).attr("src",r||"javascript:0").insertAfter("body")[0].contentWindow;h.onpropertychange=function(){try{if(event.propertyName==="title"){q.document.title=h.title}}catch(s){}}}};j.stop=k;o=function(){return a(q.location.href)};l=function(v,s){var u=q.document,t=$.fn[c].domain;if(v!==s){u.title=h.title;u.open();t&&u.write('<script>document.domain="'+t+'"<\/script>');u.close();q.location.hash=v}}})();return j})()})(jQuery,this);
\ No newline at end of file
diff --git a/web/js/map-OpenLayers.js b/web/js/map-OpenLayers.js
index 872956716..f6e7e8a62 100644
--- a/web/js/map-OpenLayers.js
+++ b/web/js/map-OpenLayers.js
@@ -4,18 +4,43 @@ var fixmystreet = fixmystreet || {};
 
     fixmystreet.maps = {
       // This function might be passed either an OpenLayers.LonLat (so has
-      // lon and lat) or an OpenLayers.Geometry.Point (so has x and y)
+      // lon and lat), or an OpenLayers.Geometry.Point (so has x and y).
       update_pin: function(lonlat) {
-        lonlat = lonlat.clone().transform(
+        var transformedLonlat = lonlat.clone().transform(
             fixmystreet.map.getProjectionObject(),
             new OpenLayers.Projection("EPSG:4326")
         );
 
-        document.getElementById('fixmystreet.latitude').value = lonlat.lat || lonlat.y;
-        document.getElementById('fixmystreet.longitude').value = lonlat.lon || lonlat.x;
+        var lat = transformedLonlat.lat || transformedLonlat.y;
+        var lon = transformedLonlat.lon || transformedLonlat.x;
+
+        document.getElementById('fixmystreet.latitude').value = lat;
+        document.getElementById('fixmystreet.longitude').value = lon;
+        return {
+            'url': { 'lon': lon, 'lat': lat },
+            'state': { 'lon': lonlat.lon, 'lat': lonlat.lat }
+        };
+      },
+
+      display_around: function() {
+        // Required after changing the size of the map element
+        fixmystreet.map.updateSize();
+
+        // Dragging the map should fetch new local reports from server
+        fixmystreet.bbox_strategy.activate();
+
+        // Should not be able to drag normal pins!!
+        drag.deactivate();
+
+        // Force a redraw to return (de)selected marker to normal size
+        fixmystreet.markers.refresh({force: true});
       },
 
       begin_report: function(lonlat) {
+        if (typeof lonlat.clone !== 'function') {
+            lonlat = new OpenLayers.LonLat(lonlat.lon, lonlat.lat);
+        }
+
         if (fixmystreet.page == 'new') {
             /* Already have a pin */
             fixmystreet.markers.features[0].move(lonlat);
@@ -31,9 +56,9 @@ var fixmystreet = fixmystreet || {};
         // link so that it updates the text in case they go
         // back
         if ( ! fixmystreet.markers.getVisibility() ) {
-            fixmystreet.state_pins_were_hidden = true;
             $('#hide_pins_link').click();
         }
+        return lonlat;
       },
 
       markers_list: function(pins, transform) {
@@ -120,7 +145,7 @@ var fixmystreet = fixmystreet || {};
             this._drag.activate();
         },
         deactivate: function() {
-            this._drag.deactivate();
+            this._drag && this._drag.deactivate();
         }
     };
 
@@ -451,30 +476,6 @@ var fixmystreet = fixmystreet || {};
             click.activate();
         }
 
-        $(window).hashchange(function(){
-            if (location.hash && location.hash != '#') {
-                return;
-            }
-
-            // Okay, back to around view.
-            fixmystreet.bbox_strategy.activate();
-            fixmystreet.markers.refresh( { force: true } );
-            if ( fixmystreet.state_pins_were_hidden ) {
-                // If we had pins hidden when we clicked map (which had to show the pin layer as I'm doing it in one layer), hide them again.
-                $('#hide_pins_link').click();
-            }
-            drag.deactivate();
-            $('#side-form').hide();
-            $('#side').show();
-            $('body').removeClass('with-notes');
-            fixmystreet.map.updateSize(); // required after changing the size of the map element
-            $('#sub_map_links').show();
-            //only on mobile
-            $('#mob_sub_map_links').remove();
-            $('.mobile-map-banner').html('<a href="/">' + translation_strings.home + '</a> ' + translation_strings.place_pin_on_map);
-            fixmystreet.page = 'around';
-        });
-
         // Hide the pin filter submit button. Not needed because we'll use JS
         // to refresh the map when the filter inputs are changed.
         $(".report-list-filters [type=submit]").hide();
diff --git a/web/js/map-google.js b/web/js/map-google.js
index fa2b6d90e..4c3f6188e 100644
--- a/web/js/map-google.js
+++ b/web/js/map-google.js
@@ -11,11 +11,21 @@ fixmystreet.maps = {};
 (function() {
 
     fixmystreet.maps.update_pin = function(lonlat) {
-        document.getElementById('fixmystreet.latitude').value = lonlat.lat();
-        document.getElementById('fixmystreet.longitude').value = lonlat.lng();
+        var lat = lonlat.lat();
+        var lon = lonlat.lng();
+        document.getElementById('fixmystreet.latitude').value = lat;
+        document.getElementById('fixmystreet.longitude').value = lon;
+        return {
+            'url': { 'lon': lon, 'lat': lat },
+            'state': { 'lon': lon, 'lat': lat }
+        };
     };
 
     fixmystreet.maps.begin_report = function(lonlat) {
+        if (typeof lonlat.lat !== 'function') {
+            lonlat = new google.maps.LatLng(lonlat.lat, lonlat.lon);
+        }
+
         if (fixmystreet.page == 'new') {
             /* Already have a pin */
             fixmystreet.report_marker.setPosition(lonlat);
@@ -35,6 +45,15 @@ fixmystreet.maps = {};
                 fixmystreet.markers[m].setMap(null);
             }
         }
+        return lonlat;
+    };
+
+    fixmystreet.maps.display_around = function() {
+        if (fixmystreet.report_marker) {
+            fixmystreet.report_marker.setMap(null);
+        }
+        fixmystreet.event_update_map = google.maps.event.addListener(fixmystreet.map, 'idle', update_pins);
+        google.maps.event.trigger(fixmystreet.map, 'idle');
     };
 
     function PaddingControl(div) {
@@ -81,6 +100,11 @@ fixmystreet.maps = {};
     }
 
     function map_clicked(e) {
+        if ($('.js-back-to-report-list').length) {
+            $('.js-back-to-report-list').trigger('click');
+            return true;
+        }
+
         var lonlat = e.latLng;
         fixmystreet.display.begin_report(lonlat);
     }
@@ -148,28 +172,6 @@ fixmystreet.maps = {};
             var l = google.maps.event.addListener(fixmystreet.map, 'click', map_clicked);
         }
 
-        $(window).hashchange(function(){
-            if (location.hash && location.hash != '#') {
-                return;
-            }
-
-            // Okay, back to around view.
-            fixmystreet.report_marker.setMap(null);
-            fixmystreet.event_update_map = google.maps.event.addListener(fixmystreet.map, 'idle', update_pins);
-            google.maps.event.trigger(fixmystreet.map, 'idle');
-            if ( fixmystreet.state_pins_were_hidden ) {
-                // If we had pins hidden when we clicked map (which had to show the pin layer as I'm doing it in one layer), hide them again.
-                $('#hide_pins_link').click();
-            }
-            $('#side-form').hide();
-            $('#side').show();
-            $('#sub_map_links').show();
-            //only on mobile
-            $('#mob_sub_map_links').remove();
-            $('.mobile-map-banner').html('<a href="/">' + translation_strings.home + '</a> ' + translation_strings.place_pin_on_map);
-            fixmystreet.page = 'around';
-        });
-
         if ( fixmystreet.area.length ) {
             for (var i=0; i<fixmystreet.area.length; i++) {
                 var args = {