Fix map page popstate / mobile nav menu bug

Previously, pressing the mobile menu icon would change the location
hash, which fired a history popstate event with an empty state object,
causing trouble for our map page JavaScript.

Now, pressing the mobile menu icon triggers a pushState, instead of
changing the location hash. This means our map page popstate logic is
unaffected, but mobile users can still use their browser's Back button
to escape out of the mobile menu.

1 files changed, 15 insertions, 1 deletions

diff --git a/web/cobrands/fixmystreet/fixmystreet.js b/web/cobrands/fixmystreet/fixmystreet.js
index 264d20df1..911931d9b 100644
--- a/web/cobrands/fixmystreet/fixmystreet.js
+++ b/web/cobrands/fixmystreet/fixmystreet.js
@@ -313,7 +313,18 @@ $.extend(fixmystreet.set_up, {
         e.preventDefault();
         var offset = $('#main-nav').offset().top;
         $('html, body').animate({scrollTop:offset}, 1000);
-        window.location.hash = 'main-nav';
+
+        // Registering a pushState here means that mobile users can
+        // press their browser's Back button to return out of the
+        // mobile menu (easier than scrolling all the way back up
+        // the page). However, to show the map page popstate listener
+        // that this was a special state, we set hashchange to true in
+        // the event state, so we can detect it, and ignore it, later.
+        if ('pushState' in history) {
+            history.pushState({
+                hashchange: true
+            }, null);
+        }
     });
   },
 
@@ -513,6 +524,9 @@ $.extend(fixmystreet.set_up, {
             fixmystreet.display.report(e.state.reportPageUrl, e.state.reportId);
         } else if ('newReportAtLonlat' in e.state) {
             fixmystreet.display.begin_report(e.state.newReportAtLonlat, false);
+        } else if ('hashchange' in e.state) {
+            // This popstate was just here because the hash changed.
+            // (eg: mobile nav click.) We want to ignore it.
         }
     });
   }