diff options
Diffstat (limited to 'web')
| -rw-r--r-- | web/cobrands/fixmystreet/fixmystreet.js | 80 | ||||
| -rw-r--r-- | web/js/map-OpenLayers.js | 16 |
2 files changed, 77 insertions, 19 deletions
diff --git a/web/cobrands/fixmystreet/fixmystreet.js b/web/cobrands/fixmystreet/fixmystreet.js index 9d3b9388f..15cc6b26a 100644 --- a/web/cobrands/fixmystreet/fixmystreet.js +++ b/web/cobrands/fixmystreet/fixmystreet.js @@ -935,6 +935,8 @@ $.extend(fixmystreet.set_up, { }, ajax_history: function() { + var around_map_state = null; + $('#map_sidebar').on('click', '.item-list--reports a', function(e) { if (e.metaKey || e.ctrlKey) { return; @@ -953,10 +955,30 @@ $.extend(fixmystreet.set_up, { fixmystreet.map.setCenter( marker.geometry.getBounds().getCenterLonLat(), fixmystreet.map.getNumZoomLevels() - 1 ); + // replaceState rather than pushState so the back button returns + // to the zoomed-out map with all pins. + history.replaceState({ + reportId: reportId, + reportPageUrl: reportPageUrl, + mapState: fixmystreet.maps.get_map_state() + }, null); } return; } + if (fixmystreet.page.match(/reports|around|my/)) { + around_map_state = fixmystreet.maps.get_map_state(); + // Preserve the current map state in the initial state so we can + // restore it if the user navigates back. This needs doing here, + // rather than the 'fake history' replaceState call that sets the + // initial state, because the map hasn't been loaded at that point. + if ('state' in history && history.state.initial) { + history.state.mapState = around_map_state; + // NB can't actually modify current state directly, needs a + // call to replaceState() + history.replaceState(history.state, null); + } + } fixmystreet.display.report(reportPageUrl, reportId, function() { // Since this navigation was the result of a user action, // we want to record the navigation as a state, so the user @@ -964,32 +986,44 @@ $.extend(fixmystreet.set_up, { if ('pushState' in history) { history.pushState({ reportId: reportId, - reportPageUrl: reportPageUrl + reportPageUrl: reportPageUrl, + mapState: fixmystreet.maps.get_map_state() }, null, reportPageUrl); } }); }); $('#map_sidebar').on('click', '.js-back-to-report-list', function(e) { - if (e.metaKey || e.ctrlKey) { - return; - } - - e.preventDefault(); - var reportListUrl = $(this).attr('href'); - fixmystreet.display.reports_list(reportListUrl, function() { - // Since this navigation was the result of a user action, - // we want to record the navigation as a state, so the user - // can return to it later using their Back button. - if ('pushState' in history) { - history.pushState({ initial: true }, null, reportListUrl); - } - }); + var report_list_url = $(this).attr('href'); + var map_state = around_map_state; + var set_map_state = true; + fixmystreet.back_to_reports_list(e, report_list_url, map_state, set_map_state); }); } }); +fixmystreet.back_to_reports_list = function(e, report_list_url, map_state, set_map_state) { + if (e.metaKey || e.ctrlKey) { + return; + } + e.preventDefault(); + fixmystreet.display.reports_list(report_list_url, function() { + // Since this navigation was the result of a user action, + // we want to record the navigation as a state, so the user + // can return to it later using their Back button. + if ('pushState' in history) { + history.pushState({ + initial: true, + mapState: map_state + }, null, report_list_url); + } + if (set_map_state && map_state) { + fixmystreet.maps.set_map_state(map_state); + } + }); +}; + fixmystreet.update_report_a_problem_btn = function() { var zoom = fixmystreet.map.getZoom(); var center = fixmystreet.map.getCenterWGS84(); @@ -1284,10 +1318,14 @@ fixmystreet.display = { // wrong (but what is shown is correct). $('.js-back-to-report-list').attr('href', fixmystreet.original.href); - // Problems nearby should act the same as 'Back to all reports' on around, - // but on /my and /reports should go to that around page. - if (fixmystreet.original.page == 'around') { - $sideReport.find('#key-tool-problems-nearby').addClass('js-back-to-report-list'); + // Problems nearby on /my should go to the around page, + // otherwise show reports within the current map view. + if (fixmystreet.original.page === 'around' || fixmystreet.original.page === 'reports') { + $sideReport.find('#key-tool-problems-nearby').click(function(e) { + var report_list_url = fixmystreet.original.href; + var map_state = fixmystreet.maps.get_map_state(); + fixmystreet.back_to_reports_list(e, report_list_url, map_state); + }); } fixmystreet.set_up.map_sidebar_key_tools(); fixmystreet.set_up.form_validation(); @@ -1467,6 +1505,10 @@ $(function() { // This popstate was just here because the hash changed. // (eg: mobile nav click.) We want to ignore it. } + if ('mapState' in e.state) { + fixmystreet.maps.set_map_state(e.state.mapState); + } + }); }, 0); }); diff --git a/web/js/map-OpenLayers.js b/web/js/map-OpenLayers.js index 66168925a..826c9eb6b 100644 --- a/web/js/map-OpenLayers.js +++ b/web/js/map-OpenLayers.js @@ -340,6 +340,22 @@ $.extend(fixmystreet.utils, { $('#loading-indicator').attr('aria-hidden', true); } } + }, + + get_map_state: function() { + var centre = fixmystreet.map.getCenter(); + return { + zoom: fixmystreet.map.getZoom(), + lat: centre.lat, + lon: centre.lon, + }; + }, + + set_map_state: function(state) { + fixmystreet.map.setCenter( + new OpenLayers.LonLat( state.lon, state.lat ), + state.zoom + ); } }); |