e7107b96cb
For PanZoomBar, this fixes the slider behavior. Now the buttonclick listener argument also includes a buttonXY property, and PanZoomPanel does not need an Events instance for the zoombarDiv any more.
For Panel, this fixes events for panels outside the map. Just setting the element on the Events instance was no longer enough after e70569b2bb. Events::attachToElement is now used, and it needed to be modified to also work if the Events instance had no element previously.
Finally, I renamed the button property of the buttonclick listener argument to buttonElement, to not confuse it with the browser event button property, and added some more tests and documentation.
234 lines
6.5 KiB
JavaScript
234 lines
6.5 KiB
JavaScript
/* Copyright (c) 2006-2012 by OpenLayers Contributors (see authors.txt for
|
|
* full list of contributors). Published under the Clear BSD license.
|
|
* See http://svn.openlayers.org/trunk/openlayers/license.txt for the
|
|
* full text of the license. */
|
|
|
|
|
|
/**
|
|
* @requires OpenLayers/Control.js
|
|
* @requires OpenLayers/Events/buttonclick.js
|
|
*/
|
|
|
|
/**
|
|
* Class: OpenLayers.Control.PanZoom
|
|
* The PanZoom is a visible control, composed of a
|
|
* <OpenLayers.Control.PanPanel> and a <OpenLayers.Control.ZoomPanel>. By
|
|
* default it is drawn in the upper left corner of the map.
|
|
*
|
|
* Inherits from:
|
|
* - <OpenLayers.Control>
|
|
*/
|
|
OpenLayers.Control.PanZoom = OpenLayers.Class(OpenLayers.Control, {
|
|
|
|
/**
|
|
* APIProperty: slideFactor
|
|
* {Integer} Number of pixels by which we'll pan the map in any direction
|
|
* on clicking the arrow buttons. If you want to pan by some ratio
|
|
* of the map dimensions, use <slideRatio> instead.
|
|
*/
|
|
slideFactor: 50,
|
|
|
|
/**
|
|
* APIProperty: slideRatio
|
|
* {Number} The fraction of map width/height by which we'll pan the map
|
|
* on clicking the arrow buttons. Default is null. If set, will
|
|
* override <slideFactor>. E.g. if slideRatio is .5, then the Pan Up
|
|
* button will pan up half the map height.
|
|
*/
|
|
slideRatio: null,
|
|
|
|
/**
|
|
* Property: buttons
|
|
* {Array(DOMElement)} Array of Button Divs
|
|
*/
|
|
buttons: null,
|
|
|
|
/**
|
|
* Property: position
|
|
* {<OpenLayers.Pixel>}
|
|
*/
|
|
position: null,
|
|
|
|
/**
|
|
* Constructor: OpenLayers.Control.PanZoom
|
|
*
|
|
* Parameters:
|
|
* options - {Object}
|
|
*/
|
|
initialize: function(options) {
|
|
this.position = new OpenLayers.Pixel(OpenLayers.Control.PanZoom.X,
|
|
OpenLayers.Control.PanZoom.Y);
|
|
OpenLayers.Control.prototype.initialize.apply(this, arguments);
|
|
},
|
|
|
|
/**
|
|
* APIMethod: destroy
|
|
*/
|
|
destroy: function() {
|
|
if (this.map) {
|
|
this.map.events.unregister("buttonclick", this, this.onButtonClick);
|
|
}
|
|
this.removeButtons();
|
|
this.buttons = null;
|
|
this.position = null;
|
|
OpenLayers.Control.prototype.destroy.apply(this, arguments);
|
|
},
|
|
|
|
/**
|
|
* Method: setMap
|
|
*
|
|
* Properties:
|
|
* map - {<OpenLayers.Map>}
|
|
*/
|
|
setMap: function(map) {
|
|
OpenLayers.Control.prototype.setMap.apply(this, arguments);
|
|
this.map.events.register("buttonclick", this, this.onButtonClick);
|
|
},
|
|
|
|
/**
|
|
* Method: draw
|
|
*
|
|
* Parameters:
|
|
* px - {<OpenLayers.Pixel>}
|
|
*
|
|
* Returns:
|
|
* {DOMElement} A reference to the container div for the PanZoom control.
|
|
*/
|
|
draw: function(px) {
|
|
// initialize our internal div
|
|
OpenLayers.Control.prototype.draw.apply(this, arguments);
|
|
px = this.position;
|
|
|
|
// place the controls
|
|
this.buttons = [];
|
|
|
|
var sz = {w: 18, h: 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);
|
|
this._addButton("zoomworld", "zoom-world-mini.png",
|
|
centered.add(0, sz.h*4+5), sz);
|
|
this._addButton("zoomout", "zoom-minus-mini.png",
|
|
centered.add(0, sz.h*5+5), sz);
|
|
return this.div;
|
|
},
|
|
|
|
/**
|
|
* Method: _addButton
|
|
*
|
|
* Parameters:
|
|
* id - {String}
|
|
* img - {String}
|
|
* xy - {<OpenLayers.Pixel>}
|
|
* sz - {<OpenLayers.Size>}
|
|
*
|
|
* Returns:
|
|
* {DOMElement} A Div (an alphaImageDiv, to be precise) that contains the
|
|
* image of the button, and has all the proper event handlers set.
|
|
*/
|
|
_addButton:function(id, img, xy, sz) {
|
|
var imgLocation = OpenLayers.Util.getImageLocation(img);
|
|
var btn = OpenLayers.Util.createAlphaImageDiv(
|
|
this.id + "_" + id,
|
|
xy, sz, imgLocation, "absolute");
|
|
btn.style.cursor = "pointer";
|
|
//we want to add the outer div
|
|
this.div.appendChild(btn);
|
|
btn.action = id;
|
|
btn.className = "olButton";
|
|
|
|
//we want to remember/reference the outer div
|
|
this.buttons.push(btn);
|
|
return btn;
|
|
},
|
|
|
|
/**
|
|
* Method: _removeButton
|
|
*
|
|
* Parameters:
|
|
* btn - {Object}
|
|
*/
|
|
_removeButton: function(btn) {
|
|
this.div.removeChild(btn);
|
|
OpenLayers.Util.removeItem(this.buttons, btn);
|
|
},
|
|
|
|
/**
|
|
* Method: removeButtons
|
|
*/
|
|
removeButtons: function() {
|
|
for(var i=this.buttons.length-1; i>=0; --i) {
|
|
this._removeButton(this.buttons[i]);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Method: onButtonClick
|
|
*
|
|
* Parameters:
|
|
* evt - {Event}
|
|
*/
|
|
onButtonClick: function(evt) {
|
|
var btn = evt.buttonElement;
|
|
switch (btn.action) {
|
|
case "panup":
|
|
this.map.pan(0, -this.getSlideFactor("h"));
|
|
break;
|
|
case "pandown":
|
|
this.map.pan(0, this.getSlideFactor("h"));
|
|
break;
|
|
case "panleft":
|
|
this.map.pan(-this.getSlideFactor("w"), 0);
|
|
break;
|
|
case "panright":
|
|
this.map.pan(this.getSlideFactor("w"), 0);
|
|
break;
|
|
case "zoomin":
|
|
this.map.zoomIn();
|
|
break;
|
|
case "zoomout":
|
|
this.map.zoomOut();
|
|
break;
|
|
case "zoomworld":
|
|
this.map.zoomToMaxExtent();
|
|
break;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Method: getSlideFactor
|
|
*
|
|
* Parameters:
|
|
* dim - {String} "w" or "h" (for width or height).
|
|
*
|
|
* Returns:
|
|
* {Number} The slide factor for panning in the requested direction.
|
|
*/
|
|
getSlideFactor: function(dim) {
|
|
return this.slideRatio ?
|
|
this.map.getSize()[dim] * this.slideRatio :
|
|
this.slideFactor;
|
|
},
|
|
|
|
CLASS_NAME: "OpenLayers.Control.PanZoom"
|
|
});
|
|
|
|
/**
|
|
* Constant: X
|
|
* {Integer}
|
|
*/
|
|
OpenLayers.Control.PanZoom.X = 4;
|
|
|
|
/**
|
|
* Constant: Y
|
|
* {Integer}
|
|
*/
|
|
OpenLayers.Control.PanZoom.Y = 4;
|