From c9fe40cc3c8989ffe18fc9c58ba063d7dc72c628 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=89ric=20Lemoine?= Date: Mon, 21 Feb 2011 17:38:11 +0000 Subject: [PATCH] add a touch device-specific navigation control, p=bbinet, r=me (closes #3068) git-svn-id: http://svn.openlayers.org/trunk/openlayers@11208 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf --- examples/mobile-touchnavigation-control.html | 44 ++++++ lib/OpenLayers.js | 1 + lib/OpenLayers/Control/TouchNavigation.js | 148 +++++++++++++++++++ tests/Control/TouchNavigation.html | 109 ++++++++++++++ tests/list-tests.html | 1 + 5 files changed, 303 insertions(+) create mode 100644 examples/mobile-touchnavigation-control.html create mode 100644 lib/OpenLayers/Control/TouchNavigation.js create mode 100644 tests/Control/TouchNavigation.html diff --git a/examples/mobile-touchnavigation-control.html b/examples/mobile-touchnavigation-control.html new file mode 100644 index 0000000000..44c7402711 --- /dev/null +++ b/examples/mobile-touchnavigation-control.html @@ -0,0 +1,44 @@ + + + + + + OpenLayers TouchNavigation Control + + + + + + +

TouchNavigation Control

+ +
+ mobile, touch, drag, move, zoom, navigate +
+ +
Demonstrate TouchNavigation Control features
+ +
+
+ This example demonstrates a couple features of the TouchNavigation + control. The TouchNavigation control controls most map dragging, + movement, zooming, etc, optimized for mobile devices. +
+ + diff --git a/lib/OpenLayers.js b/lib/OpenLayers.js index 64610055b5..802b92e6e1 100644 --- a/lib/OpenLayers.js +++ b/lib/OpenLayers.js @@ -180,6 +180,7 @@ "OpenLayers/Control/ZoomToMaxExtent.js", "OpenLayers/Control/DragPan.js", "OpenLayers/Control/Navigation.js", + "OpenLayers/Control/TouchNavigation.js", "OpenLayers/Control/MouseDefaults.js", "OpenLayers/Control/MousePosition.js", "OpenLayers/Control/OverviewMap.js", diff --git a/lib/OpenLayers/Control/TouchNavigation.js b/lib/OpenLayers/Control/TouchNavigation.js new file mode 100644 index 0000000000..990242690d --- /dev/null +++ b/lib/OpenLayers/Control/TouchNavigation.js @@ -0,0 +1,148 @@ +/* Copyright (c) 2006-2010 by OpenLayers Contributors (see authors.txt for + * full list of contributors). Published under the Clear BSD license. + * See http://svn.openlayers.org/trunk/openlayers/license.txt for the + * full text of the license. */ + +/** + * @requires OpenLayers/Control/DragPan.js + * @requires OpenLayers/Handler/Click.js + */ + +/** + * Class: OpenLayers.Control.TouchNavigation + * The navigation control handles map browsing with touch events (dragging, + * double-tapping, and tap with two fingers). Create a new navigation + * control with the control. + * + * Inherits: + * - + */ +OpenLayers.Control.TouchNavigation = OpenLayers.Class(OpenLayers.Control, { + + /** + * Property: dragPan + * {} + */ + dragPan: null, + + /** + * APIProprety: dragPanOptions + * {Object} Options passed to the DragPan control. + */ + dragPanOptions: null, + + /** + * APIProperty: documentDrag + * {Boolean} Allow panning of the map by dragging outside map viewport. + * Default is false. + */ + documentDrag: false, + + /** + * APIProperty: autoActivate + * {Boolean} Activate the control when it is added to a map. Default is + * true. + */ + autoActivate: true, + + /** + * Constructor: OpenLayers.Control.TouchNavigation + * Create a new navigation control + * + * Parameters: + * options - {Object} An optional object whose properties will be set on + * the control + */ + initialize: function(options) { + this.handlers = {}; + OpenLayers.Control.prototype.initialize.apply(this, arguments); + }, + + /** + * Method: destroy + * The destroy method is used to perform any clean up before the control + * is dereferenced. Typically this is where event listeners are removed + * to prevent memory leaks. + */ + destroy: function() { + this.deactivate(); + if(this.dragPan) { + this.dragPan.destroy(); + } + this.dragPan = null; + OpenLayers.Control.prototype.destroy.apply(this,arguments); + }, + + /** + * Method: activate + */ + activate: function() { + if(OpenLayers.Control.prototype.activate.apply(this,arguments)) { + this.dragPan.activate(); + this.handlers.click.activate(); + return true; + } + return false; + }, + + /** + * Method: deactivate + */ + deactivate: function() { + if(OpenLayers.Control.prototype.deactivate.apply(this,arguments)) { + this.dragPan.deactivate(); + this.handlers.click.deactivate(); + return true; + } + return false; + }, + + /** + * Method: draw + */ + draw: function() { + var clickCallbacks = { + 'click': this.defaultClick, + 'dblclick': this.defaultDblClick + }; + var clickOptions = { + 'double': true, + 'stopDouble': true + }; + this.handlers.click = new OpenLayers.Handler.Click( + this, clickCallbacks, clickOptions + ); + this.dragPan = new OpenLayers.Control.DragPan( + OpenLayers.Util.extend({ + map: this.map, + documentDrag: this.documentDrag + }, this.dragPanOptions) + ); + this.dragPan.draw(); + }, + + /** + * Method: defaultClick + * + * Parameters: + * evt - {Event} + */ + defaultClick: function (evt) { + if(evt.lasttouches && evt.lasttouches.length == 2) { + this.map.zoomOut(); + } + }, + + /** + * Method: defaultDblClick + * + * Parameters: + * evt - {Event} + */ + defaultDblClick: function (evt) { + var newCenter = this.map.getLonLatFromViewPortPx(evt.xy); + this.map.setCenter(newCenter, this.map.zoom + 1); + }, + + CLASS_NAME: "OpenLayers.Control.TouchNavigation" +}); diff --git a/tests/Control/TouchNavigation.html b/tests/Control/TouchNavigation.html new file mode 100644 index 0000000000..52b834d350 --- /dev/null +++ b/tests/Control/TouchNavigation.html @@ -0,0 +1,109 @@ + + + + + + + + diff --git a/tests/list-tests.html b/tests/list-tests.html index 509fe5d60d..ce18c36578 100644 --- a/tests/list-tests.html +++ b/tests/list-tests.html @@ -36,6 +36,7 @@
  • Control/SelectFeature.html
  • Control/Snapping.html
  • Control/Split.html
    • +
  • Control/TouchNavigation.html
  • Control/TransformFeature.html
  • Control/WMSGetFeatureInfo.html
  • Control/WMTSGetFeatureInfo.html