change Panel to avoid redrawing every control on every activate/deactivate, p=jorix, r=me (closes #2906)

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

lib/OpenLayers/Control/Panel.js

@@ -96,16 +96,16 @@ OpenLayers.Control.Panel = OpenLayers.Class(OpenLayers.Control, {
      */
     destroy: function() {
         OpenLayers.Control.prototype.destroy.apply(this, arguments);
-        for(var i = this.controls.length - 1 ; i >= 0; i--) {
+        for (var ctl, i = this.controls.length - 1; i >= 0; i--) {
-            if(this.controls[i].events) {
+            ctl = this.controls[i];
-                this.controls[i].events.un({
+            if (ctl.events) {
-                    "activate": this.redraw,
+                ctl.events.un({
-                    "deactivate": this.redraw,
+                    activate: this.iconOn,
-                    scope: this
+                    deactivate: this.iconOff
                 });
             }
-            OpenLayers.Event.stopObservingElement(this.controls[i].panel_div);
+            OpenLayers.Event.stopObservingElement(ctl.panel_div);
-            this.controls[i].panel_div = null;
+            ctl.panel_div = null;
         }
         this.activeState = null;
     },
@@ -172,13 +172,7 @@ OpenLayers.Control.Panel = OpenLayers.Class(OpenLayers.Control, {
         this.div.innerHTML = "";
         if (this.active) {
             for (var i=0, len=this.controls.length; i<len; i++) {
-                var element = this.controls[i].panel_div;
+                this.div.appendChild(this.controls[i].panel_div);
-                if (this.controls[i].active) {
-                    element.className = this.controls[i].displayClass + "ItemActive";
-                } else {    
-                    element.className = this.controls[i].displayClass + "ItemInactive";
-                }    
-                this.div.appendChild(element);
             }
         }
     },
@@ -195,7 +189,6 @@ OpenLayers.Control.Panel = OpenLayers.Class(OpenLayers.Control, {
         if (!this.active) { return false; }
         if (control.type == OpenLayers.Control.TYPE_BUTTON) {
             control.trigger();
-            this.redraw();
             return;
         }
         if (control.type == OpenLayers.Control.TYPE_TOGGLE) {
@@ -239,6 +232,7 @@ OpenLayers.Control.Panel = OpenLayers.Class(OpenLayers.Control, {
         // since they need to pass through.
         for (var i=0, len=controls.length; i<len; i++) {
             var element = document.createElement("div");
+            element.className = controls[i].displayClass + "ItemInactive";
             controls[i].panel_div = element;
             if (controls[i].title != "") {
                 controls[i].panel_div.title = controls[i].title;
@@ -277,13 +271,30 @@ OpenLayers.Control.Panel = OpenLayers.Class(OpenLayers.Control, {
                 control.deactivate();
             }
             control.events.on({
-                "activate": this.redraw,
+                activate: this.iconOn,
-                "deactivate": this.redraw,
+                deactivate: this.iconOff
-                scope: this
             });
         }  
     },
 
+    /**
+     * Method: iconOn
+     * Internal use, for use only with "controls[i].events.on/un".
+     */
+     iconOn: function() {
+        var d = this.panel_div; // "this" refers to a control on panel!
+        d.className = d.className.replace(/ItemInactive$/, "ItemActive");
+    },
+
+    /**
+     * Method: iconOff
+     * Internal use, for use only with "controls[i].events.on/un".
+     */
+     iconOff: function() {
+        var d = this.panel_div; // "this" refers to a control on panel!
+        d.className = d.className.replace(/ItemActive$/, "ItemInactive");
+    },
+
     /**
      * Method: onClick
      */

tests/Control/Panel.html

@@ -10,7 +10,7 @@
         t.eq( control.displayClass,  "olControlPanel", "displayClass is correct" );
     }
     function test_Control_Panel_constructor2 (t) {
-        t.plan(16);
+        t.plan(19);
         var map = new OpenLayers.Map('map');
         var toolControl = new OpenLayers.Control.ZoomBox();
         var AnotherToolControl = OpenLayers.Class(OpenLayers.Control, {
@@ -36,8 +36,22 @@
               "new OpenLayers.Control.Panel returns object");
         panel.redraw = function(){
             panel.redrawsCount++;
+            OpenLayers.Control.Panel.prototype.redraw.apply(this, arguments);
         };
 
+        // To get length of events.listeners error-free
+        var getListenerLength= function(events,key){
+            if(!events) {
+                return -2; // events is destroyed
+            } else if(!events.listeners) {
+                return -1; // events is destroyed
+            } else if(!events.listeners[key]) {
+                return 0; // no listener in event
+            } else {
+                return events.listeners[key].length;
+            }
+        };
+        var toolEventListenerLength = getListenerLength(toolControl.events,"activate");
         panel.addControls([toolControl, anotherToolControl, toggleControl]);
         t.eq(panel.controls.length, 3,
               "added three controls to the panel");
@@ -45,6 +59,8 @@
 
         panel.redrawsCount = 0;
         map.addControl(panel);
+        t.eq(getListenerLength(toolControl.events,"activate"), toolEventListenerLength+1,
+            "toolControl additional listener for \"activate\" after adding Panel to the map.");
         t.ok((panel.redrawsCount > 0), "Redraw called on add panel to map " +
             panel.redrawsCount + " times.");
         t.ok((panel.active),"Panel is active after add panel to map.");
@@ -65,10 +81,9 @@
         t.ok(toolControl.active && !anotherToolControl.active && !toggleControl.active && !buttonControl.active,
               "activated one tool control, the other one is inactive and the toggle & button controls also.");
 
-        panel.redrawsCount = 0;              
         panel.activateControl(toggleControl);
-        t.eq(panel.redrawsCount, 1, "Redraw called on activated toggle " +
+        t.eq(toggleControl.panel_div.className,"mbControlTestToggleItemActive",
-            panel.redrawsCount + " times.");
+            "className of icon div for toggle control is active.");
         t.ok(toolControl.active && !anotherToolControl.active && toggleControl.active,
               "activated the toggle control, which has no influence on the tool & togggle controls.");
         panel.activateControl(buttonControl);
@@ -80,15 +95,20 @@
         t.ok(buttonControl.active && toolControl.active && !anotherToolControl.active && toggleControl.active,
               "activated the button control, which has no influence on the tool & togggle controls.");
 
-        panel.redrawsCount = 0; 
         panel.activateControl(anotherToolControl);
-        t.ok((panel.redrawsCount > 0),
+        t.eq(anotherToolControl.panel_div.className,"mbControlTestToolItemActive",
-            "Redraw called on activated tool control " + panel.redrawsCount + 
+            "className of icon div for anotherToolControl is active.");
-            " times.");
+        t.eq(toolControl.panel_div.className,"olControlZoomBoxItemInactive",
+            "className of icon div for toolControl is inactive.");
         t.ok(!toolControl.active && anotherToolControl.active && toggleControl.active,
               "activated the other tool control, the first one is inactive and the toggle control still active.");
         t.ok(buttonControl.active,
               "activated the other tool control, the button control still active.");
+
+        panel.destroy();
+        t.eq(getListenerLength(toolControl.events,"activate"), toolEventListenerLength,
+            "toolControl additional listeners removed after destroy Panel.");
+        map.destroy();
     }
     function test_Control_Panel_titles (t) { 
         t.plan(2);