Complete refactoring of PanZoomBar. This changes all event handling to be through the Events class, which wasn't the case in the past: this has the result of changing the 'this' object from being the slider, div, etc. to being the Control itself, which simplifies much of the code, and probably removes a few circular references.

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

lib/OpenLayers/Control/PanZoomBar.js

@@ -49,91 +49,77 @@ OpenLayers.Control.PanZoomBar.prototype =
         return this.div;
     },
     _addZoomBar:function(centered,sz) {
-        /*** THIS METHOD IS A HAIRBALL AND SHOULD BE REFACTORED ***/
         var zoomStopSize = this.zoomStopHeight;
-        var slider = OpenLayers.Util.createImage("img/slider.png",
+        var slider = OpenLayers.Util.createImage("../img/slider.png",
                        new OpenLayers.Pixel(20,9), 
                        centered.add(-1, (this.map.getZoomLevels())*zoomStopSize), "absolute",
                        "OpenLayers_Control_PanZoomBar_Slider");
+        slider.style.zIndex = this.div.zIndex + 5;
+        this.slider = slider;
+        
+        this.sliderEvents = new OpenLayers.Events(this, slider);
+        this.sliderEvents.register("mousedown", this, this.zoomBarDown);
+        this.sliderEvents.register("mousemove", this, this.zoomBarDrag);
+        this.sliderEvents.register("mouseup", this, this.zoomBarUp);
+        this.sliderEvents.register("dblclick", this, this.doubleClick);
+        
         sz.h = zoomStopSize*(this.map.getZoomLevels()+1);
         sz.w = this.zoomStopWidth;
 
         var div = OpenLayers.Util.createDiv('OpenLayers_Control_PanZoomBar_Zoombar',centered,sz);
-        div.style.backgroundImage = "url(img/zoombar.png)";
+        div.style.backgroundImage = "url(../img/zoombar.png)";
-        div.onmousedown = this.divClick.bindAsEventListener(div);
+
-        div.ondblclick  = this.doubleClick.bindAsEventListener(div);
+        this.divEvents = new OpenLayers.Events(this, div);
-        div.slider = slider;
+        this.divEvents.register("mousedown", this, this.divClick);
-        div.getMousePosition = this.getMousePosition;
+        this.divEvents.register("mousemove", this, this.zoomBarDivDrag);
-        div.map = this.map;
+        this.divEvents.register("dblclick", this, this.doubleClick);
-        div.div = this.div;
+        
         this.div.appendChild(div);
 
-        slider.startTop = parseInt(div.style.top);
+        this.startTop = parseInt(div.style.top);
-        slider.getMousePosition = this.getMousePosition;
-        slider.onmousedown = this.zoomBarDown.bindAsEventListener(slider);
-        slider.onmousemove = this.zoomBarDrag.bindAsEventListener(slider);
-        slider.onmouseup   = this.zoomBarUp.bindAsEventListener(slider);
-        slider.ondblclick  = this.doubleClick.bindAsEventListener(slider);
-        slider.div = this.div;
-        slider.map = this.map;
-        slider.zoomStopHeight = this.zoomStopHeight;
-        slider.moveZoomBar = this.moveZoomBar;
-        slider.zIndex = this.div.zIndex + 5;
         this.div.appendChild(slider);
-        this.buttons.append(slider);
 
-        this.map.events.register("zoomend", slider, this.moveZoomBar);
+        this.map.events.register("zoomend", this, this.moveZoomBar);
 
         centered = centered.add(0, zoomStopSize*(this.map.getZoomLevels()+1));
         return centered; 
     },
     divClick: function (evt) {
-        evt.xy = this.getMousePosition(evt);
         var y = evt.xy.y;
-        var top = this.style.top;
+        var top = parseInt(this.slider.top);
-        var levels = Math.floor((y - parseInt(top))/this.zoomStopHeight);
+        var levels = Math.floor((y - top)/this.zoomStopHeight);
         this.map.zoomTo(this.map.getZoomLevels() - levels);
         Event.stop(evt);
     },
-    getMousePosition: function (evt) {
-        var offsets = Position.page(this.div); 
-        return new OpenLayers.Pixel(
-                        evt.clientX - offsets[0], 
-                        evt.clientY - offsets[1]); 
-    },
     zoomBarDown:function(evt) {
-        evt.xy = this.getMousePosition(evt);
         this.mouseDragStart = evt.xy.copyOf();
         this.zoomStart = evt.xy.copyOf();
         this.div.style.cursor = "move";
         Event.stop(evt);
     },
     zoomBarDivDrag: function(evt) {
-        this.slider.onmousemove(evt);
+        this.sliderEvents.handleBrowserEvent(evt);
     },
     zoomBarDrag:function(evt) {
         if (this.mouseDragStart != null) {
-            evt.xy = this.getMousePosition(evt);
             var deltaY = this.mouseDragStart.y - evt.xy.y
-            this.style.top = (parseInt(this.style.top)-deltaY)+"px";
+            this.slider.style.top = (parseInt(this.slider.style.top)-deltaY)+"px";
             this.mouseDragStart = evt.xy.copyOf();
         }
     },
     zoomBarUp:function(evt) {
-        evt.xy = this.getMousePosition(evt);
+        this.div.style.cursor="default";
         var deltaY = this.zoomStart.y - evt.xy.y
         this.map.zoomTo(this.map.zoom + Math.round(deltaY/this.zoomStopHeight));
         this.moveZoomBar();
-        this.div.style.cursor="default";
         this.mouseDragStart = null;
         Event.stop(evt);
     },
     moveZoomBar:function() {
-        /*** `this` is actually slider... that should be fixed at some point */
         var newTop = 
             (this.map.getZoomLevels() - this.map.getZoom()) * this.zoomStopHeight
             + this.startTop + 1;
-        this.style.top = newTop + "px";
+        this.slider.style.top = newTop + "px";
     },    
     
     destroy: function() {