[OpenLayers-Commits] r11210 - in sandbox/bartvde/sencha/openlayers:
. examples lib lib/OpenLayers lib/OpenLayers/Control
lib/OpenLayers/Handler tests tests/Control
commits-20090109 at openlayers.org
commits-20090109 at openlayers.org
Mon Feb 21 12:47:05 EST 2011
Author: bartvde
Date: 2011-02-21 09:47:05 -0800 (Mon, 21 Feb 2011)
New Revision: 11210
Added:
sandbox/bartvde/sencha/openlayers/examples/mobile-touchnavigation-control.html
sandbox/bartvde/sencha/openlayers/lib/OpenLayers/Control/TouchNavigation.js
sandbox/bartvde/sencha/openlayers/tests/Control/TouchNavigation.html
Modified:
sandbox/bartvde/sencha/openlayers/
sandbox/bartvde/sencha/openlayers/examples/mobile.js
sandbox/bartvde/sencha/openlayers/lib/OpenLayers.js
sandbox/bartvde/sencha/openlayers/lib/OpenLayers/Control/PanZoomBar.js
sandbox/bartvde/sencha/openlayers/lib/OpenLayers/Events.js
sandbox/bartvde/sencha/openlayers/lib/OpenLayers/Handler/Drag.js
sandbox/bartvde/sencha/openlayers/tests/list-tests.html
Log:
merge with trunk
Property changes on: sandbox/bartvde/sencha/openlayers
___________________________________________________________________
Modified: svn:mergeinfo
- /sandbox/roberthl/openlayers:9745-9748
/trunk/openlayers:11179-11202
+ /sandbox/roberthl/openlayers:9745-9748
/trunk/openlayers:11179-11209
Copied: sandbox/bartvde/sencha/openlayers/examples/mobile-touchnavigation-control.html (from rev 11209, trunk/openlayers/examples/mobile-touchnavigation-control.html)
===================================================================
--- sandbox/bartvde/sencha/openlayers/examples/mobile-touchnavigation-control.html (rev 0)
+++ sandbox/bartvde/sencha/openlayers/examples/mobile-touchnavigation-control.html 2011-02-21 17:47:05 UTC (rev 11210)
@@ -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>
Modified: sandbox/bartvde/sencha/openlayers/examples/mobile.js
===================================================================
--- sandbox/bartvde/sencha/openlayers/examples/mobile.js 2011-02-21 17:45:06 UTC (rev 11209)
+++ sandbox/bartvde/sencha/openlayers/examples/mobile.js 2011-02-21 17:47:05 UTC (rev 11210)
@@ -30,7 +30,7 @@
new OpenLayers.Control.DrawFeature(
vector, OpenLayers.Handler.Polygon, {id: "poly-control"}
),
- new OpenLayers.Control.ModifyFeature(vector, {id: "mod-control"}),
+ new OpenLayers.Control.ModifyFeature(vector, {id: "mod-control"})
],
layers: [new OpenLayers.Layer.OSM(), vector],
center: new OpenLayers.LonLat(0, 0),
Modified: sandbox/bartvde/sencha/openlayers/lib/OpenLayers/Control/PanZoomBar.js
===================================================================
--- sandbox/bartvde/sencha/openlayers/lib/OpenLayers/Control/PanZoomBar.js 2011-02-21 17:45:06 UTC (rev 11209)
+++ sandbox/bartvde/sencha/openlayers/lib/OpenLayers/Control/PanZoomBar.js 2011-02-21 17:47:05 UTC (rev 11210)
@@ -73,6 +73,12 @@
mouseDragStart: null,
/**
+ * Property: deltaY
+ * {Number} The cumulative vertical pixel offset during a zoom bar drag.
+ */
+ deltaY: null,
+
+ /**
* Property: zoomStart
* {<OpenLayers.Pixel>}
*/
@@ -186,6 +192,9 @@
this.sliderEvents = new OpenLayers.Events(this, slider, null, true,
{includeXY: true});
this.sliderEvents.on({
+ "touchstart": this.zoomBarDown,
+ "touchmove": this.zoomBarDrag,
+ "touchend": this.zoomBarUp,
"mousedown": this.zoomBarDown,
"mousemove": this.zoomBarDrag,
"mouseup": this.zoomBarUp,
@@ -219,6 +228,7 @@
this.divEvents = new OpenLayers.Events(this, div, null, true,
{includeXY: true});
this.divEvents.on({
+ "touchmove": this.passEventToSlider,
"mousedown": this.divClick,
"mousemove": this.passEventToSlider,
"dblclick": this.doubleClick,
@@ -242,6 +252,7 @@
*/
_removeZoomBar: function() {
this.sliderEvents.un({
+ "touchmove": this.zoomBarDrag,
"mousedown": this.zoomBarDown,
"mousemove": this.zoomBarDrag,
"mouseup": this.zoomBarUp,
@@ -251,6 +262,7 @@
this.sliderEvents.destroy();
this.divEvents.un({
+ "touchmove": this.passEventToSlider,
"mousedown": this.divClick,
"mousemove": this.passEventToSlider,
"dblclick": this.doubleClick,
@@ -305,10 +317,11 @@
* evt - {<OpenLayers.Event>}
*/
zoomBarDown:function(evt) {
- if (!OpenLayers.Event.isLeftClick(evt)) {
+ if (!OpenLayers.Event.isLeftClick(evt) && !OpenLayers.Event.isSingleTouch(evt)) {
return;
}
this.map.events.on({
+ "touchmove": this.passEventToSlider,
"mousemove": this.passEventToSlider,
"mouseup": this.passEventToSlider,
scope: this
@@ -341,6 +354,8 @@
this.slider.style.top = newTop+"px";
this.mouseDragStart = evt.xy.clone();
}
+ // set cumulative displacement
+ this.deltaY = this.zoomStart.y - evt.xy.y;
OpenLayers.Event.stop(evt);
}
},
@@ -354,28 +369,29 @@
* evt - {<OpenLayers.Event>}
*/
zoomBarUp:function(evt) {
- if (!OpenLayers.Event.isLeftClick(evt)) {
+ if (!OpenLayers.Event.isLeftClick(evt) && evt.type !== "touchend") {
return;
}
if (this.mouseDragStart) {
this.div.style.cursor="";
this.map.events.un({
+ "touchmove": this.passEventToSlider,
"mouseup": this.passEventToSlider,
"mousemove": this.passEventToSlider,
scope: this
});
- var deltaY = this.zoomStart.y - evt.xy.y;
var zoomLevel = this.map.zoom;
if (!this.forceFixedZoomLevel && this.map.fractionalZoom) {
- zoomLevel += deltaY/this.zoomStopHeight;
+ zoomLevel += this.deltaY/this.zoomStopHeight;
zoomLevel = Math.min(Math.max(zoomLevel, 0),
this.map.getNumZoomLevels() - 1);
} else {
- zoomLevel += Math.round(deltaY/this.zoomStopHeight);
+ zoomLevel += Math.round(this.deltaY/this.zoomStopHeight);
}
this.map.zoomTo(zoomLevel);
this.mouseDragStart = null;
this.zoomStart = null;
+ this.deltaY = 0;
OpenLayers.Event.stop(evt);
}
},
Copied: sandbox/bartvde/sencha/openlayers/lib/OpenLayers/Control/TouchNavigation.js (from rev 11209, trunk/openlayers/lib/OpenLayers/Control/TouchNavigation.js)
===================================================================
--- sandbox/bartvde/sencha/openlayers/lib/OpenLayers/Control/TouchNavigation.js (rev 0)
+++ sandbox/bartvde/sencha/openlayers/lib/OpenLayers/Control/TouchNavigation.js 2011-02-21 17:47:05 UTC (rev 11210)
@@ -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: sandbox/bartvde/sencha/openlayers/lib/OpenLayers/Events.js
===================================================================
--- sandbox/bartvde/sencha/openlayers/lib/OpenLayers/Events.js 2011-02-21 17:45:06 UTC (rev 11209)
+++ sandbox/bartvde/sencha/openlayers/lib/OpenLayers/Events.js 2011-02-21 17:47:05 UTC (rev 11210)
@@ -807,6 +807,11 @@
// noone's listening, bail out
return;
}
+ // add clientX & clientY to all events - only corresponds to the first touch
+ if (evt.touches && evt.touches[0]) {
+ evt.clientX = evt.touches[0].clientX;
+ evt.clientY = evt.touches[0].clientY;
+ }
if (this.includeXY) {
evt.xy = this.getMousePosition(evt);
}
@@ -861,16 +866,11 @@
if (!this.element.offsets) {
this.element.offsets = OpenLayers.Util.pagePosition(this.element);
}
- var clientX = evt.clientX;
- var clientY = evt.clientY;
- if (evt.touches && evt.touches.length > 0) {
- clientX = evt.touches[0].clientX;
- clientY = evt.touches[0].clientY;
- }
+
return new OpenLayers.Pixel(
- (clientX + this.element.scrolls[0]) - this.element.offsets[0]
+ (evt.clientX + this.element.scrolls[0]) - this.element.offsets[0]
- this.element.lefttop[0],
- (clientY + this.element.scrolls[1]) - this.element.offsets[1]
+ (evt.clientY + this.element.scrolls[1]) - this.element.offsets[1]
- this.element.lefttop[1]
);
},
Modified: sandbox/bartvde/sencha/openlayers/lib/OpenLayers/Handler/Drag.js
===================================================================
--- sandbox/bartvde/sencha/openlayers/lib/OpenLayers/Handler/Drag.js 2011-02-21 17:45:06 UTC (rev 11209)
+++ sandbox/bartvde/sencha/openlayers/lib/OpenLayers/Handler/Drag.js 2011-02-21 17:47:05 UTC (rev 11210)
@@ -155,8 +155,11 @@
);
this.down(evt);
this.callback("down", [evt.xy]);
- OpenLayers.Event.stop(evt);
+ if (evt.type === "mousedown") {
+ OpenLayers.Event.stop(evt);
+ }
+
if(!this.oldOnselectstart) {
this.oldOnselectstart = document.onselectstart ?
document.onselectstart : OpenLayers.Function.True;
@@ -201,6 +204,9 @@
this.interval);
}
this.dragging = true;
+ if (evt.type === "touchmove") {
+ OpenLayers.Event.stop(evt);
+ }
this.move(evt);
this.callback("move", [evt.xy]);
if(!this.oldOnselectstart) {
Modified: sandbox/bartvde/sencha/openlayers/lib/OpenLayers.js
===================================================================
--- sandbox/bartvde/sencha/openlayers/lib/OpenLayers.js 2011-02-21 17:45:06 UTC (rev 11209)
+++ sandbox/bartvde/sencha/openlayers/lib/OpenLayers.js 2011-02-21 17:47:05 UTC (rev 11210)
@@ -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",
Copied: sandbox/bartvde/sencha/openlayers/tests/Control/TouchNavigation.html (from rev 11209, trunk/openlayers/tests/Control/TouchNavigation.html)
===================================================================
--- sandbox/bartvde/sencha/openlayers/tests/Control/TouchNavigation.html (rev 0)
+++ sandbox/bartvde/sencha/openlayers/tests/Control/TouchNavigation.html 2011-02-21 17:47:05 UTC (rev 11210)
@@ -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: sandbox/bartvde/sencha/openlayers/tests/list-tests.html
===================================================================
--- sandbox/bartvde/sencha/openlayers/tests/list-tests.html 2011-02-21 17:45:06 UTC (rev 11209)
+++ sandbox/bartvde/sencha/openlayers/tests/list-tests.html 2011-02-21 17:47:05 UTC (rev 11210)
@@ -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