Fix pointer event issue selecting pin on map.

On a mobile device that implements pointer events, there are two events that
can happen on an /around page – touching the map starts a new report (or goes
back to the map if already on a report page); touching a pin pulls in that
report’s page. The map touch, which uses an OpenLayers.Handler.Click, operates
on click, whereas the pin touch, which uses an OpenLayers.Handler.Feature,
operates on touchstart. Neither event cancels the other, which means you can
end up either starting a new report, and then it tries to pull in an undefined
pin ID report and errors, or the pin report loads and then you instantly go
back to the map page.

In order to work around this, we disable the map click control when the feature
control event starts, and reactivate once the report data has been loaded.

2 files changed, 7 insertions, 1 deletions

diff --git a/web/cobrands/fixmystreet/fixmystreet.js b/web/cobrands/fixmystreet/fixmystreet.js
index 33bd5e812..1b0063f48 100644
--- a/web/cobrands/fixmystreet/fixmystreet.js
+++ b/web/cobrands/fixmystreet/fixmystreet.js
@@ -1145,6 +1145,9 @@ fixmystreet.display = {
                 fixmystreet.maps.markers_resize(); // force a redraw so the selected marker gets bigger
             }
 
+            // We disabled this upon first touch to prevent it taking effect, re-enable now
+            fixmystreet.maps.click_control.activate();
+
             if (typeof callback === 'function') {
                 callback();
             }
diff --git a/web/js/map-OpenLayers.js b/web/js/map-OpenLayers.js
index 2e62336ed..868e2333e 100644
--- a/web/js/map-OpenLayers.js
+++ b/web/js/map-OpenLayers.js
@@ -311,6 +311,9 @@ $.extend(fixmystreet.utils, {
             return;
         }
 
+        // clickFeature operates on touchstart, we do not want the map click taking place on touchend!
+        fixmystreet.maps.click_control.deactivate();
+
         // All of this, just so that ctrl/cmd-click on a pin works?!
         var event;
         if (typeof window.MouseEvent === 'function') {
@@ -720,7 +723,7 @@ $.extend(fixmystreet.utils, {
         }
 
         if (document.getElementById('mapForm')) {
-            var click = new OpenLayers.Control.Click();
+            var click = fixmystreet.maps.click_control = new OpenLayers.Control.Click();
             fixmystreet.map.addControl(click);
             click.activate();
         }