public/lib/OpenLayers/Control/PanZoomBar.js

   1 /* Copyright (c) 2006 MetaCarta, Inc., published under the BSD license.
   2  * See http://svn.openlayers.org/trunk/openlayers/license.txt for the full
   3  * text of the license. */
   4 // @require: OpenLayers/Control/PanZoom.js
   5
   6 //
   7 // default zoom/pan controls
   8 //
   9 OpenLayers.Control.PanZoomBar = Class.create();
  10 OpenLayers.Control.PanZoomBar.X = 4;
  11 OpenLayers.Control.PanZoomBar.Y = 4;
  12 OpenLayers.Control.PanZoomBar.prototype =
  13   Object.extend( new OpenLayers.Control.PanZoom(), {
  14     /** @type Array(...) */
  15     buttons: null,
  16
  17     /** @type int */
  18     zoomStopWidth: 18,
  19
  20     /** @type int */
  21     zoomStopHeight: 11,
  22
  23     initialize: function() {
  24         OpenLayers.Control.PanZoom.prototype.initialize.apply(this, arguments);
  25         this.position = new OpenLayers.Pixel(OpenLayers.Control.PanZoomBar.X,
  26                                              OpenLayers.Control.PanZoomBar.Y);
  27     },
  28
  29     /**
  30     * @param {OpenLayers.Pixel} px
  31     */
  32     draw: function(px) {
  33         // initialize our internal div
  34         OpenLayers.Control.prototype.draw.apply(this, arguments);
  35         px = this.position;
  36
  37         // place the controls
  38         this.buttons = new Array();
  39
  40         var sz = new OpenLayers.Size(18,18);
  41         var centered = new OpenLayers.Pixel(px.x+sz.w/2, px.y);
  42
  43         this._addButton("panup", "north-mini.png", centered, sz);
  44         px.y = centered.y+sz.h;
  45         this._addButton("panleft", "west-mini.png", px, sz);
  46         this._addButton("panright", "east-mini.png", px.add(sz.w, 0), sz);
  47         this._addButton("pandown", "south-mini.png", centered.add(0, sz.h*2), sz);
  48         this._addButton("zoomin", "zoom-plus-mini.png", centered.add(0, sz.h*3+5), sz);
  49         centered = this._addZoomBar(centered.add(0, sz.h*4 + 5));
  50         this._addButton("zoomout", "zoom-minus-mini.png", centered, sz);
  51         return this.div;
  52     },
  53
  54     /**
  55     * @param {OpenLayers.Pixel} location where zoombar drawing is to start.
  56     */
  57     _addZoomBar:function(centered) {
  58         var imgLocation = OpenLayers.Util.getImagesLocation();
  59
  60         var id = "OpenLayers_Control_PanZoomBar_Slider" + this.map.id;
  61         var slider = OpenLayers.Util.createAlphaImageDiv(id,
  62                        centered.add(-1,
  63                          (this.map.getZoomLevels())*this.zoomStopHeight),
  64                        new OpenLayers.Size(20,9),
  65                        imgLocation+"slider.png",
  66                        "absolute");
  67         this.slider = slider;
  68
  69         this.sliderEvents = new OpenLayers.Events(this, slider);
  70         this.sliderEvents.register("mousedown", this, this.zoomBarDown);
  71         this.sliderEvents.register("mousemove", this, this.zoomBarDrag);
  72         this.sliderEvents.register("mouseup", this, this.zoomBarUp);
  73         this.sliderEvents.register("dblclick", this, this.doubleClick);
  74         this.sliderEvents.register("click", this, this.doubleClick);
  75
  76         sz = new OpenLayers.Size();
  77         sz.h = this.zoomStopHeight*(this.map.getZoomLevels()+1);
  78         sz.w = this.zoomStopWidth;
  79         var div = null
  80
  81         if (OpenLayers.Util.alphaHack()) {
  82             var id = "OpenLayers_Control_PanZoomBar" + this.map.id;
  83             div = OpenLayers.Util.createAlphaImageDiv(id, centered,
  84                                       new OpenLayers.Size(sz.w,
  85                                               this.zoomStopHeight),
  86                                       imgLocation + "zoombar.png",
  87                                       "absolute", null, "crop");
  88             div.style.height = sz.h;
  89         } else {
  90             div = OpenLayers.Util.createDiv(
  91                         'OpenLayers_Control_PanZoomBar_Zoombar' + this.map.id,
  92                         centered,
  93                         sz,
  94                         imgLocation+"zoombar.png");
  95         }
  96
  97         this.zoombarDiv = div;
  98
  99         this.divEvents = new OpenLayers.Events(this, div);
 100         this.divEvents.register("mousedown", this, this.divClick);
 101         this.divEvents.register("mousemove", this, this.passEventToSlider);
 102         this.divEvents.register("dblclick", this, this.doubleClick);
 103         this.divEvents.register("click", this, this.doubleClick);
 104
 105         this.div.appendChild(div);
 106
 107         this.startTop = parseInt(div.style.top);
 108         this.div.appendChild(slider);
 109
 110         this.map.events.register("zoomend", this, this.moveZoomBar);
 111
 112         centered = centered.add(0,
 113             this.zoomStopHeight*(this.map.getZoomLevels()+1));
 114         return centered;
 115     },
 116     /*
 117      * @param evt
 118      * This function is used to pass events that happen on the div, or the map,
 119      * through to the slider, which then does its moving thing.
 120      */
 121     passEventToSlider:function(evt) {
 122         this.sliderEvents.handleBrowserEvent(evt);
 123     },
 124
 125     /*
 126      * divClick: Picks up on clicks directly on the zoombar div
 127      *           and sets the zoom level appropriately.
 128      */
 129     divClick: function (evt) {
 130         if (!Event.isLeftClick(evt)) return;
 131         var y = evt.xy.y;
 132         var top = Position.page(evt.object)[1];
 133         var levels = Math.floor((y - top)/this.zoomStopHeight);
 134         this.map.zoomTo(this.map.getZoomLevels() - levels);
 135         Event.stop(evt);
 136     },
 137
 138     /*
 139      * @param evt
 140      * event listener for clicks on the slider
 141      */
 142     zoomBarDown:function(evt) {
 143         if (!Event.isLeftClick(evt)) return;
 144         this.map.events.register("mousemove", this, this.passEventToSlider);
 145         this.map.events.register("mouseup", this, this.passEventToSlider);
 146         this.mouseDragStart = evt.xy.copyOf();
 147         this.zoomStart = evt.xy.copyOf();
 148         this.div.style.cursor = "move";
 149         Event.stop(evt);
 150     },
 151
 152     /*
 153      * @param evt
 154      * This is what happens when a click has occurred, and the client is dragging.
 155      * Here we must ensure that the slider doesn't go beyond the bottom/top of the
 156      * zoombar div, as well as moving the slider to its new visual location
 157      */
 158     zoomBarDrag:function(evt) {
 159         if (this.mouseDragStart != null) {
 160             var deltaY = this.mouseDragStart.y - evt.xy.y
 161             var offsets = Position.page(this.zoombarDiv);
 162             if ((evt.clientY - offsets[1]) > 0 &&
 163                 (evt.clientY - offsets[1]) < parseInt(this.zoombarDiv.style.height) - 2) {
 164                 var newTop = parseInt(this.slider.style.top) - deltaY;
 165                 this.slider.style.top = newTop+"px";
 166             }
 167             this.mouseDragStart = evt.xy.copyOf();
 168         }
 169         Event.stop(evt);
 170     },
 171
 172     /*
 173      * @param evt
 174      * Perform cleanup when a mouseup event is received -- discover new zoom level
 175      * and switch to it.
 176      */
 177     zoomBarUp:function(evt) {
 178         if (!Event.isLeftClick(evt)) return;
 179         if (this.zoomStart) {
 180             this.div.style.cursor="default";
 181             this.map.events.remove("mousemove");
 182             this.map.events.remove("mouseup");
 183             var deltaY = this.zoomStart.y - evt.xy.y
 184             this.map.zoomTo(this.map.zoom + Math.round(deltaY/this.zoomStopHeight));
 185             this.moveZoomBar();
 186             this.mouseDragStart = null;
 187             Event.stop(evt);
 188         }
 189     },
 190
 191     /*
 192     * Change the location of the slider to match the current zoom level.
 193     */
 194     moveZoomBar:function() {
 195         var newTop =
 196             (this.map.getZoomLevels() - this.map.getZoom()) * this.zoomStopHeight
 197             + this.startTop + 1;
 198         this.slider.style.top = newTop + "px";
 199     },
 200
 201     CLASS_NAME: "OpenLayers.Control.PanZoomBar"
 202 });