Making it so the navigation control zooms out on two touch taps. r=erilem (closes #3127)

git-svn-id: http://svn.openlayers.org/trunk/openlayers@11537 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf
2011-02-25 18:35:50 +00:00
parent 5826bf5f3b
commit 76a420b278
2 changed files with 35 additions and 0 deletions
@@ -163,6 +163,7 @@ OpenLayers.Control.Navigation = OpenLayers.Class(OpenLayers.Control, {
        }

        var clickCallbacks = { 
+            'click': this.defaultClick,
            'dblclick': this.defaultDblClick, 
            'dblrightclick': this.defaultDblRightClick 
        };
@@ -189,6 +190,18 @@ OpenLayers.Control.Navigation = OpenLayers.Class(OpenLayers.Control, {
                                    this.mouseWheelOptions );
    },

+    /**
+     * Method: defaultClick
+     *
+     * Parameters:
+     * evt - {Event}
+     */
+    defaultClick: function (evt) {
+        if (evt.lastTouches && evt.lastTouches.length == 2) {
+            this.map.zoomOut();
+        }
+    },
+
    /**
     * Method: defaultDblClick 
     * 
@@ -118,6 +118,27 @@
        t.eq(nav.zoomWheelEnabled, true, "mouse wheel activated");
        t.eq(wheel.active, true, "mouse wheel handler activated");
    }
+
+    function test_touches_zoom(t) {
+        t.plan(3);
+        var nav = new OpenLayers.Control.Navigation({zoomWheelEnabled: false});
+        var map = new OpenLayers.Map({
+            div: "map",
+            controls: [nav],
+            layers: [
+                new OpenLayers.Layer(null, {isBaseLayer: true})
+            ],
+            center: new OpenLayers.LonLat(0, 0),
+            zoom: 3
+        });
+        t.eq(map.getZoom(), 3, "map zoom starts at 3");
+        nav.handlers.click.callback("click", [{lastTouches: ["foo", "bar"]}]);
+        t.eq(map.getZoom(), 2, "map zooms out with a two touch tap");
+        nav.handlers.click.callback("click", [{}]);
+        t.eq(map.getZoom(), 2, "map doesn't do anything with click");
+        
+        map.destroy();
+    }
    
    function test_documentDrag(t) {
        
@@ -149,5 +170,6 @@
  </script>
 </head>
 <body>
+    <div id="map" style="width: 256px; height: 256px"></div>
 </body>
 </html>