new slideRatio option for Control.Pan and Control.PanPanel. r=bartvde (closes #3039)

git-svn-id: http://svn.openlayers.org/trunk/openlayers@11070 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf

lib/OpenLayers/Control/Pan.js

@@ -20,10 +20,20 @@ OpenLayers.Control.Pan = OpenLayers.Class(OpenLayers.Control, {
     /** 
      * APIProperty: slideFactor
      * {Integer} Number of pixels by which we'll pan the map in any direction 
-     *     on clicking the arrow buttons, defaults to 50.
+     *     on clicking the arrow buttons, defaults to 50.  If you want to pan
+     *     by some ratio of the map dimensions, use <slideRatio> instead.
      */
     slideFactor: 50,
 
+    /** 
+     * APIProperty: slideRatio
+     * {Number} The fraction of map width/height by which we'll pan the map            
+     *     on clicking the arrow buttons.  Default is null.  If set, will
+     *     override <slideFactor>. E.g. if slideRatio is .5, then Pan Up will
+     *     pan up half the map height. 
+     */
+    slideRatio: null,
+
     /** 
      * Property: direction
      * {String} in {'North', 'South', 'East', 'West'}
@@ -61,18 +71,24 @@ OpenLayers.Control.Pan = OpenLayers.Class(OpenLayers.Control, {
      */
     trigger: function(){
     
+        var getSlideFactor = OpenLayers.Function.bind(function (dim) {
+            return this.slideRatio ?
+                this.map.getSize()[dim] * this.slideRatio :
+                this.slideFactor;
+        }, this);
+
         switch (this.direction) {
             case OpenLayers.Control.Pan.NORTH: 
-                this.map.pan(0, -this.slideFactor);
+                this.map.pan(0, -getSlideFactor("h"));
                 break;
             case OpenLayers.Control.Pan.SOUTH: 
-                this.map.pan(0, this.slideFactor);
+                this.map.pan(0, getSlideFactor("h"));
                 break;
             case OpenLayers.Control.Pan.WEST: 
-                this.map.pan(-this.slideFactor, 0);
+                this.map.pan(-getSlideFactor("w"), 0);
                 break;
             case OpenLayers.Control.Pan.EAST: 
-                this.map.pan(this.slideFactor, 0);
+                this.map.pan(getSlideFactor("w"), 0);
                 break;
         }
     },

lib/OpenLayers/Control/PanPanel.js

@@ -33,10 +33,20 @@ OpenLayers.Control.PanPanel = OpenLayers.Class(OpenLayers.Control.Panel, {
     /** 
      * APIProperty: slideFactor
      * {Integer} Number of pixels by which we'll pan the map in any direction 
-     *     on clicking the arrow buttons, defaults to 50.
+     *     on clicking the arrow buttons, defaults to 50.  If you want to pan
+     *     by some ratio of the map dimensions, use <slideRatio> instead.
      */
     slideFactor: 50,
 
+    /** 
+     * APIProperty: slideRatio
+     * {Number} The fraction of map width/height by which we'll pan the map            
+     *     on clicking the arrow buttons.  Default is null.  If set, will
+     *     override <slideFactor>. E.g. if slideRatio is .5, then Pan Up will
+     *     pan up half the map height. 
+     */
+    slideRatio: null,
+
     /**
      * Constructor: OpenLayers.Control.PanPanel 
      * Add the four directional pan buttons.
@@ -47,15 +57,15 @@ OpenLayers.Control.PanPanel = OpenLayers.Class(OpenLayers.Control.Panel, {
      */
     initialize: function(options) {
         OpenLayers.Control.Panel.prototype.initialize.apply(this, [options]);
+        var options = {
+            slideFactor: this.slideFactor,
+            slideRatio: this.slideRatio
+        };
         this.addControls([
-            new OpenLayers.Control.Pan(OpenLayers.Control.Pan.NORTH,
+            new OpenLayers.Control.Pan(OpenLayers.Control.Pan.NORTH, options),
-                                       {slideFactor: this.slideFactor}),
+            new OpenLayers.Control.Pan(OpenLayers.Control.Pan.SOUTH, options),
-            new OpenLayers.Control.Pan(OpenLayers.Control.Pan.SOUTH,
+            new OpenLayers.Control.Pan(OpenLayers.Control.Pan.EAST, options),
-                                       {slideFactor: this.slideFactor}),
+            new OpenLayers.Control.Pan(OpenLayers.Control.Pan.WEST, options)
-            new OpenLayers.Control.Pan(OpenLayers.Control.Pan.EAST,
-                                       {slideFactor: this.slideFactor}),
-            new OpenLayers.Control.Pan(OpenLayers.Control.Pan.WEST,
-                                       {slideFactor: this.slideFactor})
         ]);
     },
 

tests/Control/PanPanel.html

@@ -3,7 +3,7 @@
   <script src="../../lib/OpenLayers.js"></script>
   <script type="text/javascript">
     function test_constructor (t) {
-        t.plan(1);
+        t.plan(2);
         
         // set up
         var control;
@@ -15,9 +15,47 @@
              control.controls[2].slideFactor == 200 &&
              control.controls[3].slideFactor == 200,
              "ctor sets slideFactor in all Pan controls");
+        
+        control.destroy();
+
+        control = new OpenLayers.Control.PanPanel({slideRatio: .5});
+        t.ok(control.controls[0].slideRatio == .5 &&
+             control.controls[1].slideRatio == .5 &&
+             control.controls[2].slideRatio == .5 &&
+             control.controls[3].slideRatio == .5,
+             "ctor sets slideRatio in all Pan controls");
+        
+        control.destroy();
+    }
+    
+    function test_slide(t) {
+        t.plan(2);
+        var map = new OpenLayers.Map("map", {
+            panMethod: null,
+            controls: [
+                new OpenLayers.Control.PanPanel(),
+                new OpenLayers.Control.PanPanel({slideRatio: .5})
+            ],
+            layers: [new OpenLayers.Layer(null, {isBaseLayer: true})],
+            center: new OpenLayers.LonLat(0, 0),
+            zoom: 1
+        });
+        
+        map.controls[0].controls[0].trigger();
+        map.controls[0].controls[2].trigger();
+        map.pan(-50, 50);
+        t.eq(map.getCenter().toShortString(), "0, 0", "correct pan distance with slideFactor");
+        
+        map.controls[1].controls[0].trigger();
+        map.controls[1].controls[2].trigger();
+        map.pan(-128, 64);
+        t.eq(map.getCenter().toShortString(), "0, 0", "correct pan distance with slideRatio");        
+
+        map.destroy();
     }
   </script>
 </head>
 <body>
+    <div id="map" style="width: 256px; height: 128px;"></div>
 </body>
 </html>