Giving all controls an events instance. You can now listen for activate and deactivate on any control. Panel controls do this to know when they should redraw. Navigation history control demonstrates the effect of this change. r=elemoine (closes #1346)

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

examples/navigation-history.html

@@ -36,21 +36,8 @@
             function init(){
                 map = new OpenLayers.Map('map');
                 
-                // set any application specific behavior here
+                nav = new OpenLayers.Control.NavigationHistory();
-                // this will become unnecessary when controls have better event handling
+                // parent control must be added to the map
-                var previousOptions = {
-                    onActivate: function() {panel.redraw();},
-                    onDeactivate: function() {panel.redraw();}
-                };
-                var nextOptions = {
-                    onActivate: function() {panel.redraw();},
-                    onDeactivate: function() {panel.redraw();}
-                };
-                var options = {
-                    previousOptions: previousOptions,
-                    nextOptions: nextOptions
-                };
-                nav = new OpenLayers.Control.NavigationHistory(options);
                 map.addControl(nav);
 
                 panel = new OpenLayers.Control.Panel(

lib/OpenLayers/Control.js

@@ -104,6 +104,36 @@ OpenLayers.Control = OpenLayers.Class({
      */
     handler: null,
 
+    /** 
+     * Property: events
+     * {<OpenLayers.Events>} Events instance for triggering control specific
+     *     events.
+     */
+    events: null,
+
+    /**
+     * Constant: EVENT_TYPES
+     * {Array(String)} Supported application event types.  Register a listener
+     *     for a particular event with the following syntax:
+     * (code)
+     * control.events.register(type, obj, listener);
+     * (end)
+     *
+     * Listeners will be called with a reference to an event object.  The
+     *     properties of this event depends on exactly what happened.
+     *
+     * All event objects have at least the following properties:
+     *  - *object* {Object} A reference to control.events.object (a reference
+     *      to the control).
+     *  - *element* {DOMElement} A reference to control.events.element (which
+     *      will be null unless documented otherwise).
+     *
+     * Supported map event types:
+     *  - *activate* Triggered when activated.
+     *  - *deactivate* Triggered when deactivated.
+     */
+    EVENT_TYPES: ["activate", "deactivate"],
+
     /**
      * Constructor: OpenLayers.Control
      * Create an OpenLayers Control.  The options passed as a parameter
@@ -124,6 +154,7 @@ OpenLayers.Control = OpenLayers.Class({
         
         OpenLayers.Util.extend(this, options);
         
+        this.events = new OpenLayers.Events(this, null, this.EVENT_TYPES);
         this.id = OpenLayers.Util.createUniqueID(this.CLASS_NAME + "_");
     },
 
@@ -134,6 +165,7 @@ OpenLayers.Control = OpenLayers.Class({
      * to prevent memory leaks.
      */
     destroy: function () {
+        this.events.destroy();
         // eliminate circular references
         if (this.handler) {
             this.handler.destroy();
@@ -232,6 +264,7 @@ OpenLayers.Control = OpenLayers.Class({
             this.handler.activate();
         }
         this.active = true;
+        this.events.triggerEvent("activate");
         return true;
     },
     
@@ -250,6 +283,7 @@ OpenLayers.Control = OpenLayers.Class({
                 this.handler.deactivate();
             }
             this.active = false;
+            this.events.triggerEvent("deactivate");
             return true;
         }
         return false;

lib/OpenLayers/Control/NavigationHistory.js

@@ -79,13 +79,6 @@ OpenLayers.Control.NavigationHistory = OpenLayers.Class(OpenLayers.Control, {
      */
     clearOnDeactivate: false,
 
-    /**
-     * Property: events
-     * {<OpenLayers.Events>} An events object that will be used for registering
-     *     listeners.  Defaults to the map events for this control.
-     */
-    events: null,
-
     /**
      * Property: registry
      * {Object} An object with keys corresponding to event types.  Values
@@ -144,9 +137,7 @@ OpenLayers.Control.NavigationHistory = OpenLayers.Class(OpenLayers.Control, {
 
         var previousOptions = {
             trigger: OpenLayers.Function.bind(this.previousTrigger, this),
-            displayClass: this.displayClass + "Previous",
+            displayClass: this.displayClass + "Previous"
-            onActivate: function() {},
-            onDeactivate: function() {}
         };
         if(options) {
             OpenLayers.Util.extend(previousOptions, options.previousOptions);
@@ -155,9 +146,7 @@ OpenLayers.Control.NavigationHistory = OpenLayers.Class(OpenLayers.Control, {
         
         var nextOptions = {
             trigger: OpenLayers.Function.bind(this.nextTrigger, this),
-            displayClass: this.displayClass + "Next",
+            displayClass: this.displayClass + "Next"
-            onActivate: function() {},
-            onDeactivate: function() {}
         };
         if(options) {
             OpenLayers.Util.extend(nextOptions, options.nextOptions);
@@ -179,10 +168,8 @@ OpenLayers.Control.NavigationHistory = OpenLayers.Class(OpenLayers.Control, {
     onPreviousChange: function(state, length) {
         if(state && !this.previous.active) {
             this.previous.activate();
-            this.previous.onActivate();
         } else if(!state && this.previous.active) {
             this.previous.deactivate();
-            this.previous.onDeactivate();
         }
     },
     
@@ -199,10 +186,8 @@ OpenLayers.Control.NavigationHistory = OpenLayers.Class(OpenLayers.Control, {
     onNextChange: function(state, length) {
         if(state && !this.next.active) {
             this.next.activate();
-            this.next.onActivate();
         } else if(!state && this.next.active) {
             this.next.deactivate();
-            this.next.onDeactivate();
         }
     },
     
@@ -364,11 +349,8 @@ OpenLayers.Control.NavigationHistory = OpenLayers.Class(OpenLayers.Control, {
                 if(this.listeners == null) {
                     this.setListeners();
                 }
-                if(!this.events) {
-                    this.events = this.map.events;
-                }
                 for(var type in this.listeners) {
-                    this.events.register(type, this, this.listeners[type]);
+                    this.map.events.register(type, this, this.listeners[type]);
                 }
                 activated = true;
                 if(this.previousStack.length == 0) {
@@ -402,7 +384,7 @@ OpenLayers.Control.NavigationHistory = OpenLayers.Class(OpenLayers.Control, {
         if(this.map) {
             if(OpenLayers.Control.prototype.deactivate.apply(this)) {
                 for(var type in this.listeners) {
-                    this.events.unregister(
+                    this.map.events.unregister(
                         type, this, this.listeners[type]
                     );
                 }

lib/OpenLayers/Control/Panel.js

@@ -45,6 +45,11 @@ 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--) {
+            this.controls[i].events.un({
+                "activate": this.redraw,
+                "deactivate": this.redraw,
+                scope: this
+            });
             OpenLayers.Event.stopObservingElement(this.controls[i].panel_div);
             this.controls[i].panel_div = null;
         }    
@@ -75,7 +80,6 @@ OpenLayers.Control.Panel = OpenLayers.Class(OpenLayers.Control, {
             for(var i = 0; i < this.controls.length; i++) {
                 this.controls[i].deactivate();
             }    
-            this.redraw();
             return true;
         } else {
             return false;
@@ -93,6 +97,11 @@ OpenLayers.Control.Panel = OpenLayers.Class(OpenLayers.Control, {
         for (var i = 0; i < this.controls.length; i++) {
             this.map.addControl(this.controls[i]);
             this.controls[i].deactivate();
+            this.controls[i].events.on({
+                "activate": this.redraw,
+                "deactivate": this.redraw,
+                scope: this
+            });
         }
         this.activate();
         return this.div;
@@ -145,7 +154,6 @@ OpenLayers.Control.Panel = OpenLayers.Class(OpenLayers.Control, {
                 }
             }
         }
-        this.redraw();
     },
 
     /**
@@ -185,6 +193,11 @@ OpenLayers.Control.Panel = OpenLayers.Class(OpenLayers.Control, {
             for (var i = 0; i < controls.length; i++) {
                 this.map.addControl(controls[i]);
                 controls[i].deactivate();
+                controls[i].events.on({
+                    "activate": this.redraw,
+                    "deactivate": this.redraw,
+                    scope: this
+                });
             }
             this.redraw();
         }

tests/Control/test_Navigation.html

@@ -17,7 +17,7 @@
     }
 
     function test_Control_Navigation_destroy (t) {
-        t.plan(9);
+        t.plan(10);
         
         var temp = OpenLayers.Control.prototype.destroy;
         OpenLayers.Control.prototype.destroy = function() {
@@ -26,6 +26,11 @@
         };
 
         var control = {
+            events: {
+                destroy: function() {
+                    t.ok(true, "events destroyed");
+                }
+            },
             'deactivate': function() {
                 t.ok(true, "navigation control deactivated before being destroyed");
             },