[OpenLayers-Commits] r11211 - in sandbox/cmoullet/openlayers: . examples lib lib/OpenLayers lib/OpenLayers/Control lib/OpenLayers/Handler tests tests/Control

commits-20090109 at openlayers.org commits-20090109 at openlayers.org
Tue Feb 22 03:19:05 EST 2011


Author: cmoullet
Date: 2011-02-22 00:19:05 -0800 (Tue, 22 Feb 2011)
New Revision: 11211

Added:
   sandbox/cmoullet/openlayers/examples/mobile-touchnavigation-control.html
   sandbox/cmoullet/openlayers/lib/OpenLayers/Control/TouchNavigation.js
   sandbox/cmoullet/openlayers/tests/Control/TouchNavigation.html
Modified:
   sandbox/cmoullet/openlayers/
   sandbox/cmoullet/openlayers/examples/mobile.js
   sandbox/cmoullet/openlayers/lib/OpenLayers.js
   sandbox/cmoullet/openlayers/lib/OpenLayers/Control/PanZoomBar.js
   sandbox/cmoullet/openlayers/lib/OpenLayers/Events.js
   sandbox/cmoullet/openlayers/lib/OpenLayers/Handler/Drag.js
   sandbox/cmoullet/openlayers/tests/list-tests.html
Log:
Merge with trunk



Property changes on: sandbox/cmoullet/openlayers
___________________________________________________________________
Modified: svn:mergeinfo
   - /sandbox/roberthl/openlayers:9745-9748
/trunk/openlayers:11161-11202
   + /sandbox/roberthl/openlayers:9745-9748
/trunk/openlayers:11161-11210

Copied: sandbox/cmoullet/openlayers/examples/mobile-touchnavigation-control.html (from rev 11210, trunk/openlayers/examples/mobile-touchnavigation-control.html)
===================================================================
--- sandbox/cmoullet/openlayers/examples/mobile-touchnavigation-control.html	                        (rev 0)
+++ sandbox/cmoullet/openlayers/examples/mobile-touchnavigation-control.html	2011-02-22 08:19:05 UTC (rev 11211)
@@ -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/cmoullet/openlayers/examples/mobile.js
===================================================================
--- sandbox/cmoullet/openlayers/examples/mobile.js	2011-02-21 17:47:05 UTC (rev 11210)
+++ sandbox/cmoullet/openlayers/examples/mobile.js	2011-02-22 08:19:05 UTC (rev 11211)
@@ -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/cmoullet/openlayers/lib/OpenLayers/Control/PanZoomBar.js
===================================================================
--- sandbox/cmoullet/openlayers/lib/OpenLayers/Control/PanZoomBar.js	2011-02-21 17:47:05 UTC (rev 11210)
+++ sandbox/cmoullet/openlayers/lib/OpenLayers/Control/PanZoomBar.js	2011-02-22 08:19:05 UTC (rev 11211)
@@ -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/cmoullet/openlayers/lib/OpenLayers/Control/TouchNavigation.js (from rev 11210, trunk/openlayers/lib/OpenLayers/Control/TouchNavigation.js)
===================================================================
--- sandbox/cmoullet/openlayers/lib/OpenLayers/Control/TouchNavigation.js	                        (rev 0)
+++ sandbox/cmoullet/openlayers/lib/OpenLayers/Control/TouchNavigation.js	2011-02-22 08:19:05 UTC (rev 11211)
@@ -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/cmoullet/openlayers/lib/OpenLayers/Events.js
===================================================================
--- sandbox/cmoullet/openlayers/lib/OpenLayers/Events.js	2011-02-21 17:47:05 UTC (rev 11210)
+++ sandbox/cmoullet/openlayers/lib/OpenLayers/Events.js	2011-02-22 08:19:05 UTC (rev 11211)
@@ -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/cmoullet/openlayers/lib/OpenLayers/Handler/Drag.js
===================================================================
--- sandbox/cmoullet/openlayers/lib/OpenLayers/Handler/Drag.js	2011-02-21 17:47:05 UTC (rev 11210)
+++ sandbox/cmoullet/openlayers/lib/OpenLayers/Handler/Drag.js	2011-02-22 08:19:05 UTC (rev 11211)
@@ -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/cmoullet/openlayers/lib/OpenLayers.js
===================================================================
--- sandbox/cmoullet/openlayers/lib/OpenLayers.js	2011-02-21 17:47:05 UTC (rev 11210)
+++ sandbox/cmoullet/openlayers/lib/OpenLayers.js	2011-02-22 08:19:05 UTC (rev 11211)
@@ -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/cmoullet/openlayers/tests/Control/TouchNavigation.html (from rev 11210, trunk/openlayers/tests/Control/TouchNavigation.html)
===================================================================
--- sandbox/cmoullet/openlayers/tests/Control/TouchNavigation.html	                        (rev 0)
+++ sandbox/cmoullet/openlayers/tests/Control/TouchNavigation.html	2011-02-22 08:19:05 UTC (rev 11211)
@@ -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/cmoullet/openlayers/tests/list-tests.html
===================================================================
--- sandbox/cmoullet/openlayers/tests/list-tests.html	2011-02-21 17:47:05 UTC (rev 11210)
+++ sandbox/cmoullet/openlayers/tests/list-tests.html	2011-02-22 08:19:05 UTC (rev 11211)
@@ -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