better cleanup for ZoomBar and PanZoomBar. Fixes a memory leak.

r=crschmidt (closes #1949)


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

lib/OpenLayers/Control/PanZoom.js

@@ -54,11 +54,7 @@ OpenLayers.Control.PanZoom = OpenLayers.Class(OpenLayers.Control, {
      */
     destroy: function() {
         OpenLayers.Control.prototype.destroy.apply(this, arguments);
-        while(this.buttons.length) {
-            var btn = this.buttons.shift();
-            btn.map = null;
-            OpenLayers.Event.stopObservingElement(btn);
-        }
+        this.removeButtons();
         this.buttons = null;
         this.position = null;
     },
@@ -135,6 +131,28 @@ OpenLayers.Control.PanZoom = OpenLayers.Class(OpenLayers.Control, {
         return btn;
     },
     
+    /**
+     * Method: _removeButton
+     * 
+     * Parameters:
+     * btn - {Object}
+     */
+    _removeButton: function(btn) {
+        OpenLayers.Event.stopObservingElement(btn);
+        btn.map = null;
+        this.div.removeChild(btn);
+        OpenLayers.Util.removeItem(this.buttons, btn);
+    },
+    
+    /**
+     * Method: removeButtons
+     */
+    removeButtons: function() {
+        for(var i=this.buttons.length-1; i>=0; --i) {
+            this._removeButton(this.buttons[i]);
+        }
+    },
+    
     /**
      * Method: doubleClick
      *

lib/OpenLayers/Control/PanZoomBar.js

@@ -70,20 +70,9 @@ OpenLayers.Control.PanZoomBar = OpenLayers.Class(OpenLayers.Control.PanZoom, {
      */
     destroy: function() {
 
-        this.div.removeChild(this.slider);
-        this.slider = null;
-
-        this.sliderEvents.destroy();
-        this.sliderEvents = null;
-        
-        this.div.removeChild(this.zoombarDiv);
-        this.zoomBarDiv = null;
-
-        this.divEvents.destroy();
-        this.divEvents = null;
+        this._removeZoomBar();
 
         this.map.events.un({
-            "zoomend": this.moveZoomBar,
             "changebaselayer": this.redraw,
             scope: this
         });
@@ -108,7 +97,8 @@ OpenLayers.Control.PanZoomBar = OpenLayers.Class(OpenLayers.Control.PanZoom, {
      */
     redraw: function() {
         if (this.div != null) {
-            this.div.innerHTML = "";
+            this.removeButtons();
+            this._removeZoomBar();
         }  
         this.draw();
     },
@@ -223,7 +213,36 @@ OpenLayers.Control.PanZoomBar = OpenLayers.Class(OpenLayers.Control.PanZoom, {
         return centered; 
     },
     
-    /*
+    /**
+     * Method: _removeZoomBar
+     */
+    _removeZoomBar: function() {
+        this.sliderEvents.un({
+            "mousedown": this.zoomBarDown,
+            "mousemove": this.zoomBarDrag,
+            "mouseup": this.zoomBarUp,
+            "dblclick": this.doubleClick,
+            "click": this.doubleClick
+        });
+        this.sliderEvents.destroy();
+
+        this.divEvents.un({
+            "mousedown": this.divClick,
+            "mousemove": this.passEventToSlider,
+            "dblclick": this.doubleClick,
+            "click": this.doubleClick
+        });
+        this.divEvents.destroy();
+        
+        this.div.removeChild(this.zoombarDiv);
+        this.zoombarDiv = null;
+        this.div.removeChild(this.slider);
+        this.slider = null;
+        
+        this.map.events.unregister("zoomend", this, this.moveZoomBar);
+    },
+    
+    /**
      * Method: passEventToSlider
      * This function is used to pass events that happen on the div, or the map,
      * through to the slider, which then does its moving thing.
@@ -235,7 +254,7 @@ OpenLayers.Control.PanZoomBar = OpenLayers.Class(OpenLayers.Control.PanZoom, {
         this.sliderEvents.handleBrowserEvent(evt);
     },
     
-    /*
+    /**
      * Method: divClick
      * Picks up on clicks directly on the zoombar div
      *           and sets the zoom level appropriately.

tests/Control/PanZoom.html

@@ -31,6 +31,16 @@
         t.eq( control2.div.style.top, "100px", "2nd control div is located correctly");
     }
     
+    function test_Control_PanZoom_removeButtons(t) {
+        t.plan(2);
+        map = new OpenLayers.Map("map");
+        control = new OpenLayers.Control.PanZoom();
+        map.addControl(control);
+        control.removeButtons();
+        t.eq(control.buttons.length, 0, "buttons array cleared correctly");
+        t.eq(contrl.div.childNodes.length, 0, "control div is empty");
+    }
+
     function test_Control_PanZoom_control_events (t) {
 
         if ( !window.document.createEvent || OpenLayers.Util.getBrowserName() == "opera" || !t.open_window) {

tests/Control/PanZoomBar.html

@@ -33,6 +33,22 @@
         map.addControl(control2, new OpenLayers.Pixel(100,100));
         t.eq( control2.div.style.top, "100px", "2nd control div is located correctly");
     }
+    
+    function test_Control_PanZoomBar_clearDiv(t) {
+        t.plan(2);
+        map = new OpenLayers.Map('map', {controls:[]});
+        var layer = new OpenLayers.Layer.WMS("Test Layer", 
+            "http://octo.metacarta.com/cgi-bin/mapserv?",
+            {map: "/mapdata/vmap_wms.map", layers: "basic"});
+        map.addLayer(layer);
+        control = new OpenLayers.Control.PanZoomBar();
+        map.addControl(control);
+        control.removeButtons();
+        control._removeZoomBar();
+        t.eq(control.div.childNodes.length, 0, "control's div cleared.");
+        t.eq(control.zoombarDiv, null, "zoombar div nullified.")
+    }
+    
     function test_Control_PanZoomBar_divClick (t) {
         t.plan(2);
         map = new OpenLayers.Map('map', {controls:[]});