[OpenLayers-Commits] r11208 - in trunk/openlayers: examples lib
lib/OpenLayers/Control tests tests/Control
commits-20090109 at openlayers.org
commits-20090109 at openlayers.org
Mon Feb 21 12:38:11 EST 2011
Author: erilem
Date: 2011-02-21 09:38:11 -0800 (Mon, 21 Feb 2011)
New Revision: 11208
Added:
trunk/openlayers/examples/mobile-touchnavigation-control.html
trunk/openlayers/lib/OpenLayers/Control/TouchNavigation.js
trunk/openlayers/tests/Control/TouchNavigation.html
Modified:
trunk/openlayers/lib/OpenLayers.js
trunk/openlayers/tests/list-tests.html
Log:
add a touch device-specific navigation control, p=bbinet, r=me (closes #3068)
Added: trunk/openlayers/examples/mobile-touchnavigation-control.html
===================================================================
--- trunk/openlayers/examples/mobile-touchnavigation-control.html (rev 0)
+++ trunk/openlayers/examples/mobile-touchnavigation-control.html 2011-02-21 17:38:11 UTC (rev 11208)
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
+ <meta name="apple-mobile-web-app-capable" content="yes" />
+ <title>OpenLayers TouchNavigation Control</title>
+ <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
+ <link rel="stylesheet" href="style.css" type="text/css" />
+ <script src="../lib/OpenLayers.js"></script>
+ <script type="text/javascript">
+ var map, layer;
+ function init() {
+ map = new OpenLayers.Map( 'map', { controls: [
+ new OpenLayers.Control.TouchNavigation({
+ dragPanOptions: {
+ interval: 0 // non-zero kills performance on some mobile phones
+ }
+ })
+ ] });
+ layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
+ "http://vmap0.tiles.osgeo.org/wms/vmap0",
+ {layers: 'basic'} );
+ map.addLayer(layer);
+ map.setCenter(new OpenLayers.LonLat(5, 40), 2);
+ }
+ </script>
+ </head>
+ <body onload="init()">
+ <h1 id="title">TouchNavigation Control</h1>
+
+ <div id="tags">
+ mobile, touch, drag, move, zoom, navigate
+ </div>
+
+ <div id="shortdesc">Demonstrate TouchNavigation Control features</div>
+
+ <div id="map" class="smallmap"></div>
+ <div id="docs">
+ This example demonstrates a couple features of the TouchNavigation
+ control. The TouchNavigation control controls most map dragging,
+ movement, zooming, etc, optimized for mobile devices.
+ </div>
+ </body>
+</html>
Added: trunk/openlayers/lib/OpenLayers/Control/TouchNavigation.js
===================================================================
--- trunk/openlayers/lib/OpenLayers/Control/TouchNavigation.js (rev 0)
+++ trunk/openlayers/lib/OpenLayers/Control/TouchNavigation.js 2011-02-21 17:38:11 UTC (rev 11208)
@@ -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 <OpenLayers.Control.TouchNavigation> control.
+ *
+ * Inherits:
+ * - <OpenLayers.Control>
+ */
+OpenLayers.Control.TouchNavigation = OpenLayers.Class(OpenLayers.Control, {
+
+ /**
+ * Property: dragPan
+ * {<OpenLayers.Control.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"
+});
Modified: trunk/openlayers/lib/OpenLayers.js
===================================================================
--- trunk/openlayers/lib/OpenLayers.js 2011-02-21 17:31:19 UTC (rev 11207)
+++ trunk/openlayers/lib/OpenLayers.js 2011-02-21 17:38:11 UTC (rev 11208)
@@ -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",
Added: trunk/openlayers/tests/Control/TouchNavigation.html
===================================================================
--- trunk/openlayers/tests/Control/TouchNavigation.html (rev 0)
+++ trunk/openlayers/tests/Control/TouchNavigation.html 2011-02-21 17:38:11 UTC (rev 11208)
@@ -0,0 +1,109 @@
+<html>
+<head>
+ <script src="../OLLoader.js"></script>
+ <script type="text/javascript">
+
+ function test_Control_TouchNavigation_constructor (t) {
+ t.plan( 2 );
+ var options = {bar: "foo"};
+ var temp = OpenLayers.Control.prototype.initialize;
+ OpenLayers.Control.prototype.initialize = function(opt) {
+ t.eq(opt, options,
+ "constructor calls parent with the correct options");
+ };
+
+ var control = new OpenLayers.Control.TouchNavigation(options);
+ t.ok(control instanceof OpenLayers.Control.TouchNavigation,
+ "new OpenLayers.Control returns object");
+
+ OpenLayers.Control.prototype.initialize = temp;
+ }
+
+ function test_Control_TouchNavigation_destroy(t) {
+ t.plan(6);
+
+ var control = {
+ events: {
+ destroy: function() {
+ t.ok(true, "events destroyed");
+ }
+ },
+ deactivate: function() {
+ t.ok(true, "navigation control deactivated before being destroyed");
+ },
+ dragPan: {
+ destroy: function() {
+ t.ok(true, "dragPan destroyed");
+ }
+ },
+ handlers: {
+ click: {
+ destroy: function() {
+ t.ok(true, "clickHandler destroyed");
+ }
+ }
+ }
+ };
+
+ //this will also trigger one test by calling OpenLayers.Control's destroy
+ // and three more for the destruction of dragPan, zoomBox, and wheelHandler
+ OpenLayers.Control.TouchNavigation.prototype.destroy.apply(control, []);
+
+ t.eq(control.dragPan, null, "'dragPan' set to null");
+ t.eq(control.handlers, null, "handlers set to null");
+ }
+
+ function test_documentDrag(t) {
+
+ t.plan(2);
+
+ /**
+ * These tests confirm that the documentDrag property is false by
+ * default and is passed on to the DragPan control. Tests of panning
+ * while dragging outside the viewport should go in the DragPan tests.
+ * Tests of the document events and appropriate callbacks from the
+ * handler should go in the Drag handler tests.
+ */
+
+ var nav = new OpenLayers.Control.TouchNavigation();
+ t.eq(nav.documentDrag, false, "documentDrag false by default");
+
+ var map = new OpenLayers.Map({
+ div: document.body,
+ controls: [new OpenLayers.Control.TouchNavigation({documentDrag: true})]
+ });
+ nav = map.controls[0];
+
+ t.eq(nav.dragPan.documentDrag, true, "documentDrag set on the DragPan control");
+ map.destroy();
+
+ }
+
+ function test_dragPanOptions(t) {
+
+ t.plan(2);
+
+ var nav = new OpenLayers.Control.TouchNavigation();
+ t.eq(nav.dragPanOptions, null, "dragPanOptions null by default");
+
+ var map = new OpenLayers.Map({
+ div: document.body,
+ controls: [
+ new OpenLayers.Control.TouchNavigation({
+ dragPanOptions: {foo: 'bar'}
+ })
+ ]
+ });
+ nav = map.controls[0];
+
+ t.eq(nav.dragPan.foo, 'bar',
+ "foo property is set on the DragPan control");
+ map.destroy();
+
+ }
+
+ </script>
+</head>
+<body>
+</body>
+</html>
Modified: trunk/openlayers/tests/list-tests.html
===================================================================
--- trunk/openlayers/tests/list-tests.html 2011-02-21 17:31:19 UTC (rev 11207)
+++ trunk/openlayers/tests/list-tests.html 2011-02-21 17:38:11 UTC (rev 11208)
@@ -36,6 +36,7 @@
<li>Control/SelectFeature.html</li>
<li>Control/Snapping.html</li>
<li>Control/Split.html</li>
+ <li>Control/TouchNavigation.html</li>
<li>Control/TransformFeature.html</li>
<li>Control/WMSGetFeatureInfo.html</li>
<li>Control/WMTSGetFeatureInfo.html</li>
More information about the Commits
mailing list