Merge pull request #620 from geoadmin/fix_tooltip

Double tap/click to zoom in makes 2 identify request.

src/components/BrowserSnifferService.js

@@ -11,9 +11,12 @@
     // holds major version number for IE or NaN for real browsers
     this.$get = function($window, gaPermalink) {
       var ua = $window.navigator.userAgent;
+      var platform = $window.navigator.platform;
       var msie = +((/msie (\d+)/.exec(ua.toLowerCase()) || [])[1]);
       var ios = /(iPhone|iPad)/.test(ua);
       var iosChrome = /CriOS/.test(ua);
+      var webkit = /WebKit/.test(ua);
+      var mac = /Mac/.test(platform);
       var testSize = function(size) {
         var m = $window.matchMedia;
         return m && m('(max-width: ' + size + 'px)').matches;
@@ -34,6 +37,8 @@
 
       return {
         msie: msie,
+        webkit: webkit,
+        mac: mac,
         ios: ios,
         iosChrome: iosChrome,
         touchDevice: touchDevice,

src/components/contextpopup/ContextPopupDirective.js

@@ -36,7 +36,8 @@
               var popoverShown = false;
 
               var overlay = new ol.Overlay({
-                element: element[0]
+                element: element[0],
+                stopEvent: true
               });
               map.addOverlay(overlay);
 

src/components/tooltip/TooltipDirective.js

@@ -4,16 +4,18 @@
   goog.require('ga_browsersniffer_service');
   goog.require('ga_map_service');
   goog.require('ga_popup_service');
+  goog.require('ga_tooltip_service');
 
   var module = angular.module('ga_tooltip_directive', [
     'ga_popup_service',
     'ga_map_service',
+    'ga_tooltip_service',
     'pascalprecht.translate'
   ]);
 
   module.directive('gaTooltip',
     function($timeout, $document, $http, $q, $translate, $sce, gaPopup,
-      gaLayers, gaBrowserSniffer, gaDefinePropertiesForLayer)
+      gaLayers, gaBrowserSniffer, gaDefinePropertiesForLayer, gaMapClick)
       {
         var waitclass = 'ga-tooltip-wait',
             bodyEl = angular.element($document[0].body),
@@ -36,9 +38,14 @@
                 currentTopic,
                 vector;
 
-            map.on('click', function(evt) {
+            $scope.$on('gaTopicChange', function(event, topic) {
+              currentTopic = topic.id;
+            });
+
+            gaMapClick.listen(map, function(evt) {
               var size = map.getSize();
               var extent = map.getView().calculateExtent(size);
+              var coordinate = map.getEventCoordinate(evt);
 
               // A digest cycle is necessary for $http requests to be
               // actually sent out. Angular-1.2.0rc2 changed the $evalSync
@@ -49,14 +56,10 @@
               // digest cycle for us.
 
               $scope.$apply(function() {
-                findFeatures(evt.getCoordinate(), size, extent);
+                findFeatures(coordinate, size, extent);
               });
             });
 
-            $scope.$on('gaTopicChange', function(event, topic) {
-              currentTopic = topic.id;
-            });
-
             function findFeatures(coordinate, size, extent) {
               var identifyUrl = $scope.options.identifyUrlTemplate
                                 .replace('{Topic}', currentTopic),

src/components/tooltip/TooltipService.js

@@ -0,0 +1,114 @@
+(function() {
+  goog.provide('ga_tooltip_service');
+
+  goog.require('ga_browsersniffer_service');
+
+  var module = angular.module('ga_tooltip_service', [
+    'ga_browsersniffer_service'
+  ]);
+
+  /**
+   * This service is to be used to register a "click" listener
+   * on a OpenLayer map.
+   *
+   * Notes:
+   *
+   * - Mouse, touch and ms pointer devices are supported.
+   * - No "click" event is triggered when "move" events occur between
+   *   "down" and "up".
+   * - No "click" event is triggered on double click/tap.
+   */
+  module.provider('gaMapClick', function() {
+    this.$get = function($timeout, gaBrowserSniffer) {
+      return {
+        listen: function(map, callback) {
+
+          var viewport = map.getViewport();
+
+          var bindUnbind = true;
+
+          var down = null;
+          var moving = false;
+          var timeoutPromise = null;
+          var touchstartTime;
+
+          var isMouseAction = function(evt) {
+            var s = gaBrowserSniffer;
+            return (evt.button === 0) && !(s.webkit && s.mac && evt.ctrlKey);
+          };
+
+          var moveListener = function(evt) {
+            if (down) {
+              moving = true;
+            }
+          };
+
+          var upListener = function(evt) {
+            if (down && !moving) {
+              if (timeoutPromise) {
+                $timeout.cancel(timeoutPromise);
+                timeoutPromise = null;
+              } else {
+                var clickEvent = down;
+                timeoutPromise = $timeout(function() {
+                  callback(clickEvent);
+                  timeoutPromise = null;
+                }, 350, false);
+              }
+            }
+            moving = false;
+            down = null;
+          };
+
+          var touchendListener = function(evt) {
+            var now = (new Date()).getTime();
+            if (now - touchstartTime < 300) {
+              upListener(evt);
+            }
+          };
+
+          var mousedownListener = function(evt) {
+            if (bindUnbind) {
+              $(viewport).unbind('touchstart', touchstartListener);
+              $(viewport).unbind('MSPointerDown', mspointerdownListener);
+              $(viewport).on('mouseup', upListener);
+              $(viewport).on('mousemove', moveListener);
+              bindUnbind = false;
+            }
+            var originalEvent = evt.originalEvent;
+            if (isMouseAction(originalEvent)) {
+              down = evt.originalEvent;
+            }
+          };
+
+          var touchstartListener = function(evt) {
+            if (bindUnbind) {
+              $(viewport).unbind('mousedown', mousedownListener);
+              $(viewport).unbind('MSPointerDown', mspointerdownListener);
+              $(viewport).on('touchend', touchendListener);
+              $(viewport).on('touchmove', moveListener);
+              bindUnbind = false;
+            }
+            touchstartTime = (new Date()).getTime();
+            down = evt.originalEvent;
+          };
+
+          var mspointerdownListener = function(evt) {
+            if (bindUnbind) {
+              $(viewport).unbind('mousedown', mousedownListener);
+              $(viewport).unbind('touchstart', touchstartListener);
+              $(viewport).on('MSPointerUp', upListener);
+              $(viewport).on('MSPointerMove', moveListener);
+              bindUnbind = false;
+            }
+            down = evt.originalEvent;
+          };
+
+          $(viewport).on('mousedown', mousedownListener);
+          $(viewport).on('touchstart', touchstartListener);
+          $(viewport).on('MSPointerDown', mspointerdownListener);
+        }
+      };
+    };
+  });
+})();