X-Git-Url: https://git.openstreetmap.org/rails.git/blobdiff_plain/b95e9d27599ee55b2fd61a444acc3264c7637265..b2b6892a4553eeaa8d601737dee440eba0c6d6a6:/public/lib/OpenLayers/Control/PanZoomBar.js diff --git a/public/lib/OpenLayers/Control/PanZoomBar.js b/public/lib/OpenLayers/Control/PanZoomBar.js new file mode 100644 index 000000000..168c928c8 --- /dev/null +++ b/public/lib/OpenLayers/Control/PanZoomBar.js @@ -0,0 +1,202 @@ +/* Copyright (c) 2006 MetaCarta, Inc., published under the BSD license. + * See http://svn.openlayers.org/trunk/openlayers/license.txt for the full + * text of the license. */ +// @require: OpenLayers/Control/PanZoom.js + +// +// default zoom/pan controls +// +OpenLayers.Control.PanZoomBar = Class.create(); +OpenLayers.Control.PanZoomBar.X = 4; +OpenLayers.Control.PanZoomBar.Y = 4; +OpenLayers.Control.PanZoomBar.prototype = + Object.extend( new OpenLayers.Control.PanZoom(), { + /** @type Array(...) */ + buttons: null, + + /** @type int */ + zoomStopWidth: 18, + + /** @type int */ + zoomStopHeight: 11, + + initialize: function() { + OpenLayers.Control.PanZoom.prototype.initialize.apply(this, arguments); + this.position = new OpenLayers.Pixel(OpenLayers.Control.PanZoomBar.X, + OpenLayers.Control.PanZoomBar.Y); + }, + + /** + * @param {OpenLayers.Pixel} px + */ + draw: function(px) { + // initialize our internal div + OpenLayers.Control.prototype.draw.apply(this, arguments); + px = this.position; + + // place the controls + this.buttons = new Array(); + + var sz = new OpenLayers.Size(18,18); + var centered = new OpenLayers.Pixel(px.x+sz.w/2, px.y); + + this._addButton("panup", "north-mini.png", centered, sz); + px.y = centered.y+sz.h; + this._addButton("panleft", "west-mini.png", px, sz); + this._addButton("panright", "east-mini.png", px.add(sz.w, 0), sz); + this._addButton("pandown", "south-mini.png", centered.add(0, sz.h*2), sz); + this._addButton("zoomin", "zoom-plus-mini.png", centered.add(0, sz.h*3+5), sz); + centered = this._addZoomBar(centered.add(0, sz.h*4 + 5)); + this._addButton("zoomout", "zoom-minus-mini.png", centered, sz); + return this.div; + }, + + /** + * @param {OpenLayers.Pixel} location where zoombar drawing is to start. + */ + _addZoomBar:function(centered) { + var imgLocation = OpenLayers.Util.getImagesLocation(); + + var id = "OpenLayers_Control_PanZoomBar_Slider" + this.map.id; + var slider = OpenLayers.Util.createAlphaImageDiv(id, + centered.add(-1, + (this.map.getZoomLevels())*this.zoomStopHeight), + new OpenLayers.Size(20,9), + imgLocation+"slider.png", + "absolute"); + 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); + this.sliderEvents.register("click", this, this.doubleClick); + + sz = new OpenLayers.Size(); + sz.h = this.zoomStopHeight*(this.map.getZoomLevels()+1); + sz.w = this.zoomStopWidth; + var div = null + + if (OpenLayers.Util.alphaHack()) { + var id = "OpenLayers_Control_PanZoomBar" + this.map.id; + div = OpenLayers.Util.createAlphaImageDiv(id, centered, + new OpenLayers.Size(sz.w, + this.zoomStopHeight), + imgLocation + "zoombar.png", + "absolute", null, "crop"); + div.style.height = sz.h; + } else { + div = OpenLayers.Util.createDiv( + 'OpenLayers_Control_PanZoomBar_Zoombar' + this.map.id, + centered, + sz, + imgLocation+"zoombar.png"); + } + + this.zoombarDiv = div; + + this.divEvents = new OpenLayers.Events(this, div); + this.divEvents.register("mousedown", this, this.divClick); + this.divEvents.register("mousemove", this, this.passEventToSlider); + this.divEvents.register("dblclick", this, this.doubleClick); + this.divEvents.register("click", this, this.doubleClick); + + this.div.appendChild(div); + + this.startTop = parseInt(div.style.top); + this.div.appendChild(slider); + + this.map.events.register("zoomend", this, this.moveZoomBar); + + centered = centered.add(0, + this.zoomStopHeight*(this.map.getZoomLevels()+1)); + return centered; + }, + /* + * @param evt + * 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. + */ + passEventToSlider:function(evt) { + this.sliderEvents.handleBrowserEvent(evt); + }, + + /* + * divClick: Picks up on clicks directly on the zoombar div + * and sets the zoom level appropriately. + */ + divClick: function (evt) { + if (!Event.isLeftClick(evt)) return; + var y = evt.xy.y; + var top = Position.page(evt.object)[1]; + var levels = Math.floor((y - top)/this.zoomStopHeight); + this.map.zoomTo(this.map.getZoomLevels() - levels); + Event.stop(evt); + }, + + /* + * @param evt + * event listener for clicks on the slider + */ + zoomBarDown:function(evt) { + if (!Event.isLeftClick(evt)) return; + this.map.events.register("mousemove", this, this.passEventToSlider); + this.map.events.register("mouseup", this, this.passEventToSlider); + this.mouseDragStart = evt.xy.copyOf(); + this.zoomStart = evt.xy.copyOf(); + this.div.style.cursor = "move"; + Event.stop(evt); + }, + + /* + * @param evt + * This is what happens when a click has occurred, and the client is dragging. + * Here we must ensure that the slider doesn't go beyond the bottom/top of the + * zoombar div, as well as moving the slider to its new visual location + */ + zoomBarDrag:function(evt) { + if (this.mouseDragStart != null) { + var deltaY = this.mouseDragStart.y - evt.xy.y + var offsets = Position.page(this.zoombarDiv); + if ((evt.clientY - offsets[1]) > 0 && + (evt.clientY - offsets[1]) < parseInt(this.zoombarDiv.style.height) - 2) { + var newTop = parseInt(this.slider.style.top) - deltaY; + this.slider.style.top = newTop+"px"; + } + this.mouseDragStart = evt.xy.copyOf(); + } + Event.stop(evt); + }, + + /* + * @param evt + * Perform cleanup when a mouseup event is received -- discover new zoom level + * and switch to it. + */ + zoomBarUp:function(evt) { + if (!Event.isLeftClick(evt)) return; + if (this.zoomStart) { + this.div.style.cursor="default"; + this.map.events.remove("mousemove"); + this.map.events.remove("mouseup"); + var deltaY = this.zoomStart.y - evt.xy.y + this.map.zoomTo(this.map.zoom + Math.round(deltaY/this.zoomStopHeight)); + this.moveZoomBar(); + this.mouseDragStart = null; + Event.stop(evt); + } + }, + + /* + * Change the location of the slider to match the current zoom level. + */ + moveZoomBar:function() { + var newTop = + (this.map.getZoomLevels() - this.map.getZoom()) * this.zoomStopHeight + + this.startTop + 1; + this.slider.style.top = newTop + "px"; + }, + + CLASS_NAME: "OpenLayers.Control.PanZoomBar" +});