Don't let button controls interfer with handlers.

This change involves removal of the map's eventsDiv and introduces an OpenLayers.Events.buttonclick component that adds a buttonclick event which makes sure that only events that are not related to clicking a button propagate. This allows button controls to be on the map's viewPortDiv again.

lib/OpenLayers/Control/PanZoom.js

@@ -6,6 +6,7 @@
 
 /**
  * @requires OpenLayers/Control.js
+ * @requires OpenLayers/Events/buttonclick.js
  */
 
 /**
@@ -64,12 +65,26 @@ OpenLayers.Control.PanZoom = OpenLayers.Class(OpenLayers.Control, {
      * APIMethod: destroy
      */
     destroy: function() {
+        if (this.map) {
+            this.map.events.unregister("buttonclick", this, this.onButtonClick);
+        }
         this.removeButtons();
         this.buttons = null;
         this.position = null;
         OpenLayers.Control.prototype.destroy.apply(this, arguments);
     },
 
+    /** 
+     * Method: setMap
+     *
+     * Properties:
+     * map - {<OpenLayers.Map>} 
+     */
+    setMap: function(map) {
+        OpenLayers.Control.prototype.setMap.apply(this, arguments);
+        this.map.events.register("buttonclick", this, this.onButtonClick);
+    },
+
     /**
      * Method: draw
      *
@@ -126,30 +141,9 @@ OpenLayers.Control.PanZoom = OpenLayers.Class(OpenLayers.Control, {
         btn.style.cursor = "pointer";
         //we want to add the outer div
         this.div.appendChild(btn);
-
-        OpenLayers.Event.observe(btn, "mousedown", 
-            OpenLayers.Function.bindAsEventListener(this.buttonDown, btn));
-        OpenLayers.Event.observe(btn, "dblclick", 
-            OpenLayers.Function.bindAsEventListener(this.doubleClick, btn));
-        OpenLayers.Event.observe(btn, "click", 
-            OpenLayers.Function.bindAsEventListener(this.doubleClick, btn));
         btn.action = id;
-        btn.map = this.map;
+        btn.className = "olButton";
     
-        if(!this.slideRatio){
-            var slideFactorPixels = this.slideFactor;
-            var getSlideFactor = function() {
-                return slideFactorPixels;
-            };
-        } else {
-            var slideRatio = this.slideRatio;
-            var getSlideFactor = function(dim) {
-                return this.map.getSize()[dim] * slideRatio;
-            };
-        }
-
-        btn.getSlideFactor = getSlideFactor;
-
         //we want to remember/reference the outer div
         this.buttons.push(btn);
         return btn;
@@ -162,9 +156,6 @@ OpenLayers.Control.PanZoom = OpenLayers.Class(OpenLayers.Control, {
      * btn - {Object}
      */
     _removeButton: function(btn) {
-        OpenLayers.Event.stopObservingElement(btn);
-        btn.map = null;
-        btn.getSlideFactor = null;
         this.div.removeChild(btn);
         OpenLayers.Util.removeItem(this.buttons, btn);
     },
@@ -179,31 +170,14 @@ OpenLayers.Control.PanZoom = OpenLayers.Class(OpenLayers.Control, {
     },
     
     /**
-     * Method: doubleClick
+     * Method: onButtonClick
      *
      * Parameters:
-     * evt - {Event} 
-     *
-     * Returns:
-     * {Boolean}
+     * evt - {Event}
      */
-    doubleClick: function (evt) {
-        OpenLayers.Event.stop(evt);
-        return false;
-    },
-    
-    /**
-     * Method: buttonDown
-     *
-     * Parameters:
-     * evt - {Event} 
-     */
-    buttonDown: function (evt) {
-        if (!OpenLayers.Event.isLeftClick(evt)) {
-            return;
-        }
-
-        switch (this.action) {
+    onButtonClick: function(evt) {
+        var btn = evt.button;
+        switch (btn.action) {
             case "panup": 
                 this.map.pan(0, -this.getSlideFactor("h"));
                 break;
@@ -226,8 +200,21 @@ OpenLayers.Control.PanZoom = OpenLayers.Class(OpenLayers.Control, {
                 this.map.zoomToMaxExtent(); 
                 break;
         }
-
-        OpenLayers.Event.stop(evt);
+    },
+    
+    /**
+     * Method: getSlideFactor
+     *
+     * Parameters:
+     * dim - {String} "w" or "h" (for width or height).
+     *
+     * Returns:
+     * {Number} The slide factor for panning in the requested direction.
+     */
+    getSlideFactor: function(dim) {
+        return this.slideRatio ?
+            this.map.getSize()[dim] * this.slideRatio :
+            this.slideFactor;
     },
 
     CLASS_NAME: "OpenLayers.Control.PanZoom"