Merge pull request #2897 from fredj/longclick

Remove pointerup listener on controls

build.py

@@ -290,6 +290,7 @@ def examples_star_json(name, match):
               "externs/bootstrap.js",
               "externs/closure-compiler.js",
               "externs/example.js",
+              "externs/fastclick.js",
               "externs/geojson.js",
               "externs/jquery-1.9.js",
               "externs/proj4js.js",

config/examples-all.json

@@ -15,6 +15,7 @@
       "externs/bootstrap.js",
       "externs/closure-compiler.js",
       "externs/example.js",
+      "externs/fastclick.js",
       "externs/geojson.js",
       "externs/jquery-1.9.js",
       "externs/proj4js.js",

examples/mobile-full-screen.html

@@ -18,6 +18,7 @@
     <div id="map" class="map"></div>
     <script src="../resources/jquery.min.js" type="text/javascript"></script>
     <script src="../resources/example-behaviour.js" type="text/javascript"></script>
+    <script src="http://cdnjs.cloudflare.com/ajax/libs/fastclick/1.0.3/fastclick.js" type="text/javascript"></script>
     <script src="loader.js?id=mobile-full-screen" type="text/javascript"></script>
 
     <div style="display: none;">

examples/mobile-full-screen.js

@@ -32,3 +32,11 @@ geolocation.once('change:position', function() {
   view.setCenter(geolocation.getPosition());
   view.setResolution(2.388657133911758);
 });
+
+// Use FastClick to eliminate the 300ms delay between a physical tap
+// and the firing of a click event on mobile browsers.
+// See http://updates.html5rocks.com/2013/12/300ms-tap-delay-gone-away
+// for more information.
+$(function() {
+  FastClick.attach(document.body);
+});

externs/fastclick.js

@@ -0,0 +1,25 @@
+/**
+ * @fileoverview Externs for FastClick 1.0.3
+ * @see https://github.com/ftlabs/fastclick
+ * @externs
+ */
+
+/**
+ * @type {Object}
+ * @const
+ */
+var FastClick = {};
+
+/**
+ * @typedef {{
+ *   touchBoundary: (number|undefined),
+ *   tapDelay: (number|undefined)
+ * }}
+ */
+FastClick.AttachOptions;
+
+/**
+ * @param {Element} layer
+ * @param {FastClick.AttachOptions=} opt_options
+ */
+FastClick.attach = function(layer, opt_options) {};

src/ol/control/attributioncontrol.js

@@ -12,7 +12,6 @@ goog.require('goog.style');
 goog.require('ol.Attribution');
 goog.require('ol.control.Control');
 goog.require('ol.css');
-goog.require('ol.pointer.PointerEventHandler');
 
 
 
@@ -97,10 +96,6 @@ ol.control.Attribution = function(opt_options) {
     'title': tipLabel
   }, this.labelSpan_);
 
-  var buttonHandler = new ol.pointer.PointerEventHandler(button);
-  this.registerDisposable(buttonHandler);
-  goog.events.listen(buttonHandler, ol.pointer.EventType.POINTERUP,
-      this.handlePointerUp_, false, this);
   goog.events.listen(button, goog.events.EventType.CLICK,
       this.handleClick_, false, this);
 
@@ -330,19 +325,7 @@ ol.control.Attribution.prototype.insertLogos_ = function(frameState) {
  * @private
  */
 ol.control.Attribution.prototype.handleClick_ = function(event) {
-  if (event.screenX !== 0 && event.screenY !== 0) {
+  event.preventDefault();
-    return;
-  }
-  this.handleToggle_();
-};
-
-
-/**
- * @param {ol.pointer.PointerEvent} pointerEvent The event to handle
- * @private
- */
-ol.control.Attribution.prototype.handlePointerUp_ = function(pointerEvent) {
-  pointerEvent.browserEvent.preventDefault();
   this.handleToggle_();
 };
 

src/ol/control/fullscreencontrol.js

@@ -10,7 +10,6 @@ goog.require('goog.events');
 goog.require('goog.events.EventType');
 goog.require('ol.control.Control');
 goog.require('ol.css');
-goog.require('ol.pointer.PointerEventHandler');
 
 
 
@@ -45,10 +44,7 @@ ol.control.FullScreen = function(opt_options) {
     'type': 'button',
     'title': tipLabel
   });
-  var buttonHandler = new ol.pointer.PointerEventHandler(button);
+
-  this.registerDisposable(buttonHandler);
-  goog.events.listen(buttonHandler,
-      ol.pointer.EventType.POINTERUP, this.handlePointerUp_, false, this);
   goog.events.listen(button, goog.events.EventType.CLICK,
       this.handleClick_, false, this);
 
@@ -88,19 +84,7 @@ goog.inherits(ol.control.FullScreen, ol.control.Control);
  * @private
  */
 ol.control.FullScreen.prototype.handleClick_ = function(event) {
-  if (event.screenX !== 0 && event.screenY !== 0) {
+  event.preventDefault();
-    return;
-  }
-  this.handleFullScreen_();
-};
-
-
-/**
- * @param {ol.pointer.PointerEvent} pointerEvent The event to handle
- * @private
- */
-ol.control.FullScreen.prototype.handlePointerUp_ = function(pointerEvent) {
-  pointerEvent.browserEvent.preventDefault();
   this.handleFullScreen_();
 };
 

src/ol/control/overviewmapcontrol.js

@@ -19,7 +19,6 @@ goog.require('ol.control.Control');
 goog.require('ol.coordinate');
 goog.require('ol.css');
 goog.require('ol.extent');
-goog.require('ol.pointer.PointerEventHandler');
 
 
 
@@ -84,10 +83,6 @@ ol.control.OverviewMap = function(opt_options) {
     'title': tipLabel
   }, this.labelSpan_);
 
-  var buttonHandler = new ol.pointer.PointerEventHandler(button);
-  this.registerDisposable(buttonHandler);
-  goog.events.listen(buttonHandler, ol.pointer.EventType.POINTERUP,
-      this.handlePointerUp_, false, this);
   goog.events.listen(button, goog.events.EventType.CLICK,
       this.handleClick_, false, this);
 
@@ -419,19 +414,7 @@ ol.control.OverviewMap.prototype.calculateCoordinateRotate_ = function(
  * @private
  */
 ol.control.OverviewMap.prototype.handleClick_ = function(event) {
-  if (event.screenX !== 0 && event.screenY !== 0) {
+  event.preventDefault();
-    return;
-  }
-  this.handleToggle_();
-};
-
-
-/**
- * @param {ol.pointer.PointerEvent} pointerEvent The event to handle
- * @private
- */
-ol.control.OverviewMap.prototype.handlePointerUp_ = function(pointerEvent) {
-  pointerEvent.browserEvent.preventDefault();
   this.handleToggle_();
 };
 

src/ol/control/rotatecontrol.js

@@ -11,7 +11,6 @@ goog.require('ol.animation');
 goog.require('ol.control.Control');
 goog.require('ol.css');
 goog.require('ol.easing');
-goog.require('ol.pointer.PointerEventHandler');
 
 
 
@@ -49,10 +48,6 @@ ol.control.Rotate = function(opt_options) {
     'title': tipLabel
   }, this.label_);
 
-  var handler = new ol.pointer.PointerEventHandler(button);
-  this.registerDisposable(handler);
-  goog.events.listen(handler, ol.pointer.EventType.POINTERUP,
-      ol.control.Rotate.prototype.handlePointerUp_, false, this);
   goog.events.listen(button, goog.events.EventType.CLICK,
       ol.control.Rotate.prototype.handleClick_, false, this);
 
@@ -103,19 +98,7 @@ goog.inherits(ol.control.Rotate, ol.control.Control);
  * @private
  */
 ol.control.Rotate.prototype.handleClick_ = function(event) {
-  if (event.screenX !== 0 && event.screenY !== 0) {
+  event.preventDefault();
-    return;
-  }
-  this.resetNorth_();
-};
-
-
-/**
- * @param {ol.pointer.PointerEvent} pointerEvent The event to handle
- * @private
- */
-ol.control.Rotate.prototype.handlePointerUp_ = function(pointerEvent) {
-  pointerEvent.browserEvent.preventDefault();
   this.resetNorth_();
 };
 

src/ol/control/zoomcontrol.js

@@ -8,7 +8,6 @@ goog.require('ol.animation');
 goog.require('ol.control.Control');
 goog.require('ol.css');
 goog.require('ol.easing');
-goog.require('ol.pointer.PointerEventHandler');
 
 
 
@@ -47,11 +46,6 @@ ol.control.Zoom = function(opt_options) {
     'title': zoomInTipLabel
   }, zoomInLabel);
 
-  var inElementHandler = new ol.pointer.PointerEventHandler(inElement);
-  this.registerDisposable(inElementHandler);
-  goog.events.listen(inElementHandler,
-      ol.pointer.EventType.POINTERUP, goog.partial(
-          ol.control.Zoom.prototype.handlePointerUp_, delta), false, this);
   goog.events.listen(inElement,
       goog.events.EventType.CLICK, goog.partial(
           ol.control.Zoom.prototype.handleClick_, delta), false, this);
@@ -69,11 +63,6 @@ ol.control.Zoom = function(opt_options) {
     'title': zoomOutTipLabel
   }, zoomOutLabel);
 
-  var outElementHandler = new ol.pointer.PointerEventHandler(outElement);
-  this.registerDisposable(outElementHandler);
-  goog.events.listen(outElementHandler,
-      ol.pointer.EventType.POINTERUP, goog.partial(
-          ol.control.Zoom.prototype.handlePointerUp_, -delta), false, this);
   goog.events.listen(outElement,
       goog.events.EventType.CLICK, goog.partial(
           ol.control.Zoom.prototype.handleClick_, -delta), false, this);
@@ -111,20 +100,7 @@ goog.inherits(ol.control.Zoom, ol.control.Control);
  * @private
  */
 ol.control.Zoom.prototype.handleClick_ = function(delta, event) {
-  if (event.screenX !== 0 && event.screenY !== 0) {
+  event.preventDefault();
-    return;
-  }
-  this.zoomByDelta_(delta);
-};
-
-
-/**
- * @param {number} delta Zoom delta.
- * @param {ol.pointer.PointerEvent} pointerEvent The event to handle
- * @private
- */
-ol.control.Zoom.prototype.handlePointerUp_ = function(delta, pointerEvent) {
-  pointerEvent.browserEvent.preventDefault();
   this.zoomByDelta_(delta);
 };
 

src/ol/control/zoomtoextentcontrol.js

@@ -7,7 +7,6 @@ goog.require('goog.events');
 goog.require('goog.events.EventType');
 goog.require('ol.control.Control');
 goog.require('ol.css');
-goog.require('ol.pointer.PointerEventHandler');
 
 
 
@@ -40,10 +39,6 @@ ol.control.ZoomToExtent = function(opt_options) {
     'title': tipLabel
   });
 
-  var buttonHandler = new ol.pointer.PointerEventHandler(button);
-  this.registerDisposable(buttonHandler);
-  goog.events.listen(buttonHandler, ol.pointer.EventType.POINTERUP,
-      this.handlePointerUp_, false, this);
   goog.events.listen(button, goog.events.EventType.CLICK,
       this.handleClick_, false, this);
 
@@ -71,19 +66,7 @@ goog.inherits(ol.control.ZoomToExtent, ol.control.Control);
  * @private
  */
 ol.control.ZoomToExtent.prototype.handleClick_ = function(event) {
-  if (event.screenX !== 0 && event.screenY !== 0) {
+  event.preventDefault();
-    return;
-  }
-  this.handleZoomToExtent_();
-};
-
-
-/**
- * @param {ol.pointer.PointerEvent} pointerEvent The event to handle
- * @private
- */
-ol.control.ZoomToExtent.prototype.handlePointerUp_ = function(pointerEvent) {
-  pointerEvent.browserEvent.preventDefault();
   this.handleZoomToExtent_();
 };