Add pagination to around page.

1 files changed, 83 insertions, 17 deletions

diff --git a/web/js/map-OpenLayers.js b/web/js/map-OpenLayers.js
index 004f0c3e2..d7e692a13 100644
--- a/web/js/map-OpenLayers.js
+++ b/web/js/map-OpenLayers.js
@@ -1,5 +1,23 @@
 var fixmystreet = fixmystreet || {};
 
+fixmystreet.utils = fixmystreet.utils || {};
+
+$.extend(fixmystreet.utils, {
+    parse_query_string: function() {
+        var qs = {};
+        if (!location.search) {
+            return qs;
+        }
+        location.search.substring(1).split(/[;&]/).forEach(function(i) {
+            var s = i.split('='),
+                k = s[0],
+                v = s[1] && decodeURIComponent(s[1].replace(/\+/g, ' '));
+            qs[k] = v;
+        });
+        return qs;
+    }
+});
+
 (function() {
 
     fixmystreet.maps = fixmystreet.maps || {};
@@ -282,7 +300,7 @@ var fixmystreet = fixmystreet || {};
         if (!location.search) {
             return qs;
         }
-        location.search.substring(1).split('&').forEach(function(i) {
+        location.search.substring(1).split(/[&;]/).forEach(function(i) {
             var s = i.split('='),
                 k = s[0],
                 v = s[1] && decodeURIComponent(s[1].replace(/\+/g, ' '));
@@ -301,15 +319,7 @@ var fixmystreet = fixmystreet || {};
         return value;
     }
 
-    function categories_or_status_changed_history() {
-        if (!('pushState' in history)) {
-            return;
-        }
-        var qs = parse_query_string();
-        var filter_categories = replace_query_parameter(qs, 'filter_categories', 'filter_category');
-        var filter_statuses = replace_query_parameter(qs, 'statuses', 'status');
-        var sort_key = replace_query_parameter(qs, 'sort', 'sort');
-        delete qs.p;
+    function update_url(qs) {
         var new_url;
         if ($.isEmptyObject(qs)) {
             new_url = location.href.replace(location.search, "");
@@ -318,6 +328,37 @@ var fixmystreet = fixmystreet || {};
         } else {
             new_url = location.href + '?' + $.param(qs);
         }
+        return new_url;
+    }
+
+    function page_changed_history() {
+        if (!('pushState' in history)) {
+            return;
+        }
+        var qs = fixmystreet.utils.parse_query_string();
+
+        var page = $('.pagination').data('page');
+        if (page > 1) {
+            qs.p = page;
+        } else {
+            delete qs.p;
+        }
+        var new_url = update_url(qs);
+        history.pushState({
+            page_change: { 'page': page }
+        }, null, new_url);
+    }
+
+    function categories_or_status_changed_history() {
+        if (!('pushState' in history)) {
+            return;
+        }
+        var qs = fixmystreet.utils.parse_query_string();
+        var filter_categories = replace_query_parameter(qs, 'filter_categories', 'filter_category');
+        var filter_statuses = replace_query_parameter(qs, 'statuses', 'status');
+        var sort_key = replace_query_parameter(qs, 'sort', 'sort');
+        delete qs.p;
+        var new_url = update_url(qs);
         history.pushState({
             filter_change: { 'filter_categories': filter_categories, 'statuses': filter_statuses, 'sort': sort_key }
         }, null, new_url);
@@ -387,7 +428,7 @@ var fixmystreet = fixmystreet || {};
                     f.geometry = new_geometry;
                     this.removeAllFeatures();
                     this.addFeatures([f]);
-                    var qs = parse_query_string();
+                    var qs = fixmystreet.utils.parse_query_string();
                     if (!qs.bbox) {
                         zoomToBounds(extent);
                     }
@@ -484,7 +525,7 @@ var fixmystreet = fixmystreet || {};
             pin_layer_options.strategies = [ fixmystreet.bbox_strategy ];
         }
         if (fixmystreet.page == 'reports') {
-            pin_layer_options.strategies = [ new OpenLayers.Strategy.FixMyStreetRefreshOnZoom() ];
+            pin_layer_options.strategies = [ new OpenLayers.Strategy.FixMyStreetNoLoad() ];
         }
         if (fixmystreet.page == 'my') {
             pin_layer_options.strategies = [ new OpenLayers.Strategy.FixMyStreetFixed() ];
@@ -544,9 +585,22 @@ var fixmystreet = fixmystreet || {};
             $("#filter_categories").on("change.filters", categories_or_status_changed);
             $("#statuses").on("change.filters", categories_or_status_changed);
             $("#sort").on("change.filters", categories_or_status_changed);
+            $('.js-pagination').on('change.filters', categories_or_status_changed);
+            $('.js-pagination').on('click', 'a', function(e) {
+                e.preventDefault();
+                var page = $('.pagination').data('page');
+                if ($(this).hasClass('next')) {
+                    $('.pagination').data('page', page + 1);
+                } else {
+                    $('.pagination').data('page', page - 1);
+                }
+                fixmystreet.markers.protocol.use_page = true;
+                $(this).trigger('change');
+            });
             $("#filter_categories").on("change.user", categories_or_status_changed_history);
             $("#statuses").on("change.user", categories_or_status_changed_history);
             $("#sort").on("change.user", categories_or_status_changed_history);
+            $('.js-pagination').on('click', 'a', page_changed_history);
         } else if (fixmystreet.page == 'new') {
             drag.activate();
         }
@@ -725,6 +779,8 @@ OpenLayers.Control.PermalinkFMSz = OpenLayers.Class(OpenLayers.Control.Permalink
 });
 
 OpenLayers.Strategy.FixMyStreet = OpenLayers.Class(OpenLayers.Strategy.BBOX, {
+    // Update when the zoom changes, pagination means there might be new things
+    resFactor: 1.5,
     ratio: 1,
     // The transform in Strategy.BBOX's getMapBounds could mean you end up with
     // co-ordinates too precise, which could then cause the Strategy to think
@@ -751,11 +807,8 @@ OpenLayers.Strategy.FixMyStreet = OpenLayers.Class(OpenLayers.Strategy.BBOX, {
     }
 });
 
-/* This strategy will call for updates whenever the zoom changes,
- * unlike the parent which only will if new area is included. It
- * also does not update on load, as we already have the data. */
-OpenLayers.Strategy.FixMyStreetRefreshOnZoom = OpenLayers.Class(OpenLayers.Strategy.FixMyStreet, {
-    resFactor: 1.5,
+/* This strategy additionally does not update on load, as we already have the data. */
+OpenLayers.Strategy.FixMyStreetNoLoad = OpenLayers.Class(OpenLayers.Strategy.FixMyStreet, {
     activate: function() {
         var activated = OpenLayers.Strategy.prototype.activate.call(this);
         if (activated) {
@@ -791,6 +844,9 @@ OpenLayers.Strategy.FixMyStreetFixed = OpenLayers.Class(OpenLayers.Strategy.Fixe
 // This subclass is required so we can pass the 'filter_category' and 'status' query
 // params to /around?ajax if the user has filtered the map.
 OpenLayers.Protocol.FixMyStreet = OpenLayers.Class(OpenLayers.Protocol.HTTP, {
+    initial_page: null,
+    use_page: false,
+
     read: function(options) {
         // Show the loading indicator over the map
         $('#loading-indicator').removeClass('hidden');
@@ -803,6 +859,16 @@ OpenLayers.Protocol.FixMyStreet = OpenLayers.Class(OpenLayers.Protocol.HTTP, {
                 options.params[key] = val;
             }
         });
+        if (this.use_page) {
+            var page = $('.pagination').data('page');
+            this.use_page = false;
+        } else if (this.initial_page) {
+            page = 1;
+        } else {
+            var qs = fixmystreet.utils.parse_query_string();
+            this.initial_page = page = qs.p || 1;
+        }
+        options.params.p = page;
         return OpenLayers.Protocol.HTTP.prototype.read.apply(this, [options]);
     },
     CLASS_NAME: "OpenLayers.Protocol.FixMyStreet"