Add new ZoomPanel and PanPanel, a step towards a more easily customizable look for OpenLayers. Work on this ticket was done by a slew of contributors, and reviews as well. Thanks especially to tschaub for the ie6 trick and concomittant non-alpha images. (Closes #1400).

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

lib/OpenLayers/Control/Pan.js

@@ -0,0 +1,76 @@
+/**
+ * @requires OpenLayers/Control.js
+ */
+
+/**
+ * Class: OpenLayers.Control.Pan
+ */
+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. 
+     */
+    slideFactor: 50,
+
+    /** 
+     * Property: direction
+     * {String} in {'North', 'South', 'East', 'West'}
+     */
+    direction: null,
+
+    /**
+     * Property: type
+     * {String} The type of <OpenLayers.Control> -- When added to a 
+     *     <Control.Panel>, 'type' is used by the panel to determine how to 
+     *     handle our events.
+     */
+    type: OpenLayers.Control.TYPE_BUTTON,
+
+    /**
+     * Constructor: OpenLayers.Control.Pan 
+     * Control which handles the panning (in any of the cardinal directions)
+     *     of the map by a set px distance. 
+     *
+     * Parameters:
+     * direction - {String} The direction this button should pan.
+     * options - {Object} An optional object whose properties will be used
+     *     to extend the control.
+     */
+    initialize: function(direction, options) {
+    
+        this.direction = direction;
+        this.CLASS_NAME += this.direction;
+        
+        OpenLayers.Control.prototype.initialize.apply(this, [options]);
+    },
+    
+    /**
+     * Method: trigger
+     */
+    trigger: function(){
+    
+        switch (this.direction) {
+            case OpenLayers.Control.Pan.NORTH: 
+                this.map.pan(0, -this.slideFactor);
+                break;
+            case OpenLayers.Control.Pan.SOUTH: 
+                this.map.pan(0, this.slideFactor);
+                break;
+            case OpenLayers.Control.Pan.WEST: 
+                this.map.pan(-this.slideFactor, 0);
+                break;
+            case OpenLayers.Control.Pan.EAST: 
+                this.map.pan(this.slideFactor, 0);
+                break;
+        }
+    },
+
+    CLASS_NAME: "OpenLayers.Control.Pan"
+});
+
+OpenLayers.Control.Pan.NORTH = "North";
+OpenLayers.Control.Pan.SOUTH = "South";
+OpenLayers.Control.Pan.EAST = "East";
+OpenLayers.Control.Pan.WEST = "West";

lib/OpenLayers/Control/PanPanel.js

@@ -0,0 +1,30 @@
+/**
+ * @requires OpenLayers/Control/Panel.js
+ * @requires OpenLayers/Control/Pan.js
+ */
+
+/**
+ * Class: OpenLayers.Control.PanPanel
+ */
+OpenLayers.Control.PanPanel = OpenLayers.Class(OpenLayers.Control.Panel, {
+
+    /**
+     * Constructor: OpenLayers.Control.PanPanel 
+     * Add the four directional pan buttons.
+     *
+     * Parameters:
+     * options - {Object} An optional object whose properties will be used
+     *     to extend the control.
+     */
+    initialize: function(options) {
+        OpenLayers.Control.Panel.prototype.initialize.apply(this, [options]);
+        this.addControls([
+            new OpenLayers.Control.Pan(OpenLayers.Control.Pan.NORTH),
+            new OpenLayers.Control.Pan(OpenLayers.Control.Pan.SOUTH),
+            new OpenLayers.Control.Pan(OpenLayers.Control.Pan.EAST),
+            new OpenLayers.Control.Pan(OpenLayers.Control.Pan.WEST)
+        ]);
+    },
+
+    CLASS_NAME: "OpenLayers.Control.PanPanel"
+});

lib/OpenLayers/Control/ZoomIn.js

@@ -0,0 +1,26 @@
+/**
+ * @requires OpenLayers/Control.js
+ */
+
+/**
+ * Class: OpenLayers.Control.ZoomIn
+ */
+OpenLayers.Control.ZoomIn = OpenLayers.Class(OpenLayers.Control, {
+
+    /**
+     * Property: type
+     * {String} The type of <OpenLayers.Control> -- When added to a 
+     *     <Control.Panel>, 'type' is used by the panel to determine how to 
+     *     handle our events.
+     */
+    type: OpenLayers.Control.TYPE_BUTTON,
+    
+    /**
+     * Method: trigger
+     */
+    trigger: function(){
+        this.map.zoomIn();
+    },
+
+    CLASS_NAME: "OpenLayers.Control.ZoomIn"
+});

lib/OpenLayers/Control/ZoomOut.js

@@ -0,0 +1,26 @@
+/**
+ * @requires OpenLayers/Control.js
+ */
+
+/**
+ * Class: OpenLayers.Control.ZoomOut
+ */
+OpenLayers.Control.ZoomOut = OpenLayers.Class(OpenLayers.Control, {
+
+    /**
+     * Property: type
+     * {String} The type of <OpenLayers.Control> -- When added to a 
+     *     <Control.Panel>, 'type' is used by the panel to determine how to 
+     *     handle our events.
+     */
+    type: OpenLayers.Control.TYPE_BUTTON,
+    
+    /**
+     * Method: trigger
+     */
+    trigger: function(){
+        this.map.zoomOut();
+    },
+
+    CLASS_NAME: "OpenLayers.Control.ZoomOut"
+});

lib/OpenLayers/Control/ZoomPanel.js

@@ -0,0 +1,31 @@
+/**
+ * @requires OpenLayers/Control/Panel.js
+ * @requires OpenLayers/Control/ZoomIn.js
+ * @requires OpenLayers/Control/ZoomOut.js
+ * @requires OpenLayers/Control/ZoomToMaxExtent.js
+ */
+
+/**
+ * Class: OpenLayers.Control.ZoomPanel
+ */
+OpenLayers.Control.ZoomPanel = OpenLayers.Class(OpenLayers.Control.Panel, {
+
+    /**
+     * Constructor: OpenLayers.Control.ZoomPanel 
+     * Add the three zooming controls.
+     *
+     * Parameters:
+     * options - {Object} An optional object whose properties will be used
+     *     to extend the control.
+     */
+    initialize: function(options) {
+        OpenLayers.Control.Panel.prototype.initialize.apply(this, [options]);
+        this.addControls([
+            new OpenLayers.Control.ZoomIn(),
+            new OpenLayers.Control.ZoomToMaxExtent(),
+            new OpenLayers.Control.ZoomOut()
+        ]);
+    },
+
+    CLASS_NAME: "OpenLayers.Control.ZoomPanel"
+});

lib/OpenLayers/Control/ZoomToMaxExtent.js

@@ -15,9 +15,12 @@
  *  - <OpenLayers.Control>
  */
 OpenLayers.Control.ZoomToMaxExtent = OpenLayers.Class(OpenLayers.Control, {
+
     /**
      * Property: type
-     * TYPE_BUTTON.
+     * {String} The type of <OpenLayers.Control> -- When added to a 
+     *     <Control.Panel>, 'type' is used by the panel to determine how to 
+     *     handle our events.
      */
     type: OpenLayers.Control.TYPE_BUTTON,