09e0d3ec81
git-svn-id: http://svn.openlayers.org/trunk/openlayers@5614 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf
497 lines
14 KiB
JavaScript
497 lines
14 KiB
JavaScript
/* Copyright (c) 2006-2008 MetaCarta, Inc., published under the Clear BSD
|
|
* license. See http://svn.openlayers.org/trunk/openlayers/license.txt for the
|
|
* full text of the license. */
|
|
|
|
|
|
/**
|
|
* Class: OpenLayers.Popup
|
|
* A popup is a small div that can opened and closed on the map.
|
|
* Typically opened in response to clicking on a marker.
|
|
* See <OpenLayers.Marker>. Popup's don't require their own
|
|
* layer and are added the the map using the <OpenLayers.Map.addPopup>
|
|
* method.
|
|
*
|
|
* Example:
|
|
* (code)
|
|
* popup = new OpenLayers.Popup("chicken",
|
|
* new OpenLayers.LonLat(5,40),
|
|
* new OpenLayers.Size(200,200),
|
|
* "example popup",
|
|
* true);
|
|
*
|
|
* map.addPopup(popup);
|
|
* (end)
|
|
*/
|
|
OpenLayers.Popup = OpenLayers.Class({
|
|
|
|
/**
|
|
* Property: events
|
|
* {<OpenLayers.Events>} custom event manager
|
|
*/
|
|
events: null,
|
|
|
|
/** Property: id
|
|
* {String} the unique identifier assigned to this popup.
|
|
*/
|
|
id: "",
|
|
|
|
/**
|
|
* Property: lonlat
|
|
* {<OpenLayers.LonLat>} the position of this popup on the map
|
|
*/
|
|
lonlat: null,
|
|
|
|
/**
|
|
* Property: div
|
|
* {DOMElement} the div that contains this popup.
|
|
*/
|
|
div: null,
|
|
|
|
/**
|
|
* Property: size
|
|
* {<OpenLayers.Size>} the width and height of the popup.
|
|
*/
|
|
size: null,
|
|
|
|
/**
|
|
* Property: contentHTML
|
|
* {String} The HTML that this popup displays.
|
|
*/
|
|
contentHTML: "",
|
|
|
|
/**
|
|
* Property: backgroundColor
|
|
* {String} the background color used by the popup.
|
|
*/
|
|
backgroundColor: "",
|
|
|
|
/**
|
|
* Property: opacity
|
|
* {float} the opacity of this popup (between 0.0 and 1.0)
|
|
*/
|
|
opacity: "",
|
|
|
|
/**
|
|
* Property: border
|
|
* {String} the border size of the popup. (eg 2px)
|
|
*/
|
|
border: "",
|
|
|
|
/**
|
|
* Property: contentDiv
|
|
* {DOMElement} a reference to the element that holds the content of
|
|
* the div.
|
|
*/
|
|
contentDiv: null,
|
|
|
|
/**
|
|
* Property: groupDiv
|
|
* {DOMElement} the parent of <OpenLayers.Popup.contentDiv>
|
|
*/
|
|
groupDiv: null,
|
|
|
|
/**
|
|
* Property: padding
|
|
* {int} the internal padding of the content div.
|
|
*/
|
|
padding: 5,
|
|
|
|
|
|
/**
|
|
* Property: map
|
|
* {<OpenLayers.Map>} this gets set in Map.js when the popup is added to the map
|
|
*/
|
|
map: null,
|
|
|
|
/**
|
|
* Constructor: OpenLayers.Popup
|
|
* Create a popup.
|
|
*
|
|
* Parameters:
|
|
* id - {String} a unqiue identifier for this popup. If null is passed
|
|
* an identifier will be automatically generated.
|
|
* lonlat - {<OpenLayers.LonLat>} The position on the map the popup will
|
|
* be shown.
|
|
* size - {<OpenLayers.Size>} The size of the popup.
|
|
* contentHTML - {String} The HTML content to display inside the
|
|
* popup.
|
|
* closeBox - {Boolean} Whether to display a close box inside
|
|
* the popup.
|
|
* closeBoxCallback - {Function} Function to be called on closeBox click.
|
|
*/
|
|
initialize:function(id, lonlat, size, contentHTML, closeBox, closeBoxCallback) {
|
|
if (id == null) {
|
|
id = OpenLayers.Util.createUniqueID(this.CLASS_NAME + "_");
|
|
}
|
|
|
|
this.id = id;
|
|
this.lonlat = lonlat;
|
|
this.size = (size != null) ? size
|
|
: new OpenLayers.Size(
|
|
OpenLayers.Popup.WIDTH,
|
|
OpenLayers.Popup.HEIGHT);
|
|
if (contentHTML != null) {
|
|
this.contentHTML = contentHTML;
|
|
}
|
|
this.backgroundColor = OpenLayers.Popup.COLOR;
|
|
this.opacity = OpenLayers.Popup.OPACITY;
|
|
this.border = OpenLayers.Popup.BORDER;
|
|
|
|
this.div = OpenLayers.Util.createDiv(this.id, null, null,
|
|
null, null, null, "hidden");
|
|
this.div.className = 'olPopup';
|
|
|
|
this.groupDiv = OpenLayers.Util.createDiv(null, null, null,
|
|
null, "relative", null,
|
|
"hidden");
|
|
|
|
var id = this.div.id + "_contentDiv";
|
|
this.contentDiv = OpenLayers.Util.createDiv(id, null, this.size.clone(),
|
|
null, "relative", null,
|
|
"hidden");
|
|
this.contentDiv.className = 'olPopupContent';
|
|
this.groupDiv.appendChild(this.contentDiv);
|
|
this.div.appendChild(this.groupDiv);
|
|
|
|
if (closeBox) {
|
|
// close icon
|
|
var closeSize = new OpenLayers.Size(17,17);
|
|
var img = OpenLayers.Util.getImagesLocation() + "close.gif";
|
|
var closeImg = OpenLayers.Util.createAlphaImageDiv(this.id + "_close",
|
|
null,
|
|
closeSize,
|
|
img);
|
|
closeImg.style.right = this.padding + "px";
|
|
closeImg.style.top = this.padding + "px";
|
|
this.groupDiv.appendChild(closeImg);
|
|
|
|
var closePopup = closeBoxCallback || function(e) {
|
|
this.hide();
|
|
OpenLayers.Event.stop(e);
|
|
};
|
|
OpenLayers.Event.observe(closeImg, "click",
|
|
OpenLayers.Function.bindAsEventListener(closePopup, this));
|
|
|
|
}
|
|
|
|
this.registerEvents();
|
|
},
|
|
|
|
/**
|
|
* Method: destroy
|
|
* nullify references to prevent circular references and memory leaks
|
|
*/
|
|
destroy: function() {
|
|
if (this.map != null) {
|
|
this.map.removePopup(this);
|
|
this.map = null;
|
|
}
|
|
this.events.destroy();
|
|
this.events = null;
|
|
this.div = null;
|
|
},
|
|
|
|
/**
|
|
* Method: draw
|
|
* Constructs the elements that make up the popup.
|
|
*
|
|
* Parameters:
|
|
* px - {<OpenLayers.Pixel>} the position the popup in pixels.
|
|
*
|
|
* Returns:
|
|
* {DOMElement} Reference to a div that contains the drawn popup
|
|
*/
|
|
draw: function(px) {
|
|
if (px == null) {
|
|
if ((this.lonlat != null) && (this.map != null)) {
|
|
px = this.map.getLayerPxFromLonLat(this.lonlat);
|
|
}
|
|
}
|
|
|
|
this.setSize();
|
|
this.setBackgroundColor();
|
|
this.setOpacity();
|
|
this.setBorder();
|
|
this.setContentHTML();
|
|
this.moveTo(px);
|
|
|
|
return this.div;
|
|
},
|
|
|
|
/**
|
|
* Method: updatePosition
|
|
* if the popup has a lonlat and its map members set,
|
|
* then have it move itself to its proper position
|
|
*/
|
|
updatePosition: function() {
|
|
if ((this.lonlat) && (this.map)) {
|
|
var px = this.map.getLayerPxFromLonLat(this.lonlat);
|
|
if (px) {
|
|
this.moveTo(px);
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Method: moveTo
|
|
*
|
|
* Parameters:
|
|
* px - {<OpenLayers.Pixel>} the top and left position of the popup div.
|
|
*/
|
|
moveTo: function(px) {
|
|
if ((px != null) && (this.div != null)) {
|
|
this.div.style.left = px.x + "px";
|
|
this.div.style.top = px.y + "px";
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Method: visible
|
|
*
|
|
* Returns:
|
|
* {Boolean} Boolean indicating whether or not the popup is visible
|
|
*/
|
|
visible: function() {
|
|
return OpenLayers.Element.visible(this.div);
|
|
},
|
|
|
|
/**
|
|
* Method: toggle
|
|
* Toggles visibility of the popup.
|
|
*/
|
|
toggle: function() {
|
|
OpenLayers.Element.toggle(this.div);
|
|
},
|
|
|
|
/**
|
|
* Method: show
|
|
* Makes the popup visible.
|
|
*/
|
|
show: function() {
|
|
OpenLayers.Element.show(this.div);
|
|
},
|
|
|
|
/**
|
|
* Method: hide
|
|
* Makes the popup invisible.
|
|
*/
|
|
hide: function() {
|
|
OpenLayers.Element.hide(this.div);
|
|
},
|
|
|
|
/**
|
|
* Method: setSize
|
|
* Used to adjust the size of the popup.
|
|
*
|
|
* Parameters:
|
|
* size - {<OpenLayers.Size>} the new size of the popup in pixels.
|
|
*/
|
|
setSize:function(size) {
|
|
if (size != undefined) {
|
|
this.size = size;
|
|
}
|
|
|
|
if (this.div != null) {
|
|
this.div.style.width = this.size.w + "px";
|
|
this.div.style.height = this.size.h + "px";
|
|
}
|
|
if (this.contentDiv != null){
|
|
this.contentDiv.style.width = this.size.w + "px";
|
|
this.contentDiv.style.height = this.size.h + "px";
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Method: setBackgroundColor
|
|
* Sets the background color of the popup.
|
|
* Parameters:
|
|
* color - {String} the background color. eg "#FFBBBB"
|
|
*/
|
|
setBackgroundColor:function(color) {
|
|
if (color != undefined) {
|
|
this.backgroundColor = color;
|
|
}
|
|
|
|
if (this.div != null) {
|
|
this.div.style.backgroundColor = this.backgroundColor;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Method: setOpacity
|
|
* Sets the opacity of the popup.
|
|
*
|
|
* Parameters:
|
|
* opacity - {float} A value between 0.0 (transparent) and 1.0 (solid).
|
|
*/
|
|
setOpacity:function(opacity) {
|
|
if (opacity != undefined) {
|
|
this.opacity = opacity;
|
|
}
|
|
|
|
if (this.div != null) {
|
|
// for Mozilla and Safari
|
|
this.div.style.opacity = this.opacity;
|
|
|
|
// for IE
|
|
this.div.style.filter = 'alpha(opacity=' + this.opacity*100 + ')';
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Method: setBorder
|
|
* Sets the border style of the popup.
|
|
*
|
|
* Parameters:
|
|
* border - {String} The border style value. eg 2px
|
|
*/
|
|
setBorder:function(border) {
|
|
if (border != undefined) {
|
|
this.border = border;
|
|
}
|
|
|
|
if (this.div != null) {
|
|
this.div.style.border = this.border;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Method: setContentHTML
|
|
* Allows the user to set the HTML content of the popup.
|
|
*
|
|
* Parameters:
|
|
* contentHTML - {String} HTML for the div.
|
|
*/
|
|
setContentHTML:function(contentHTML) {
|
|
if (contentHTML != null) {
|
|
this.contentHTML = contentHTML;
|
|
}
|
|
|
|
if (this.contentDiv != null) {
|
|
this.contentDiv.innerHTML = this.contentHTML;
|
|
}
|
|
},
|
|
|
|
|
|
|
|
/**
|
|
* Method: registerEvents
|
|
* Registers events on the popup.
|
|
*
|
|
* Do this in a separate function so that subclasses can
|
|
* choose to override it if they wish to deal differently
|
|
* with mouse events
|
|
*
|
|
* Note in the following handler functions that some special
|
|
* care is needed to deal correctly with mousing and popups.
|
|
*
|
|
* Because the user might select the zoom-rectangle option and
|
|
* then drag it over a popup, we need a safe way to allow the
|
|
* mousemove and mouseup events to pass through the popup when
|
|
* they are initiated from outside.
|
|
*
|
|
* Otherwise, we want to essentially kill the event propagation
|
|
* for all other events, though we have to do so carefully,
|
|
* without disabling basic html functionality, like clicking on
|
|
* hyperlinks or drag-selecting text.
|
|
*/
|
|
registerEvents:function() {
|
|
this.events = new OpenLayers.Events(this, this.div, null, true);
|
|
|
|
this.events.register("mousedown", this, this.onmousedown);
|
|
this.events.register("mousemove", this, this.onmousemove);
|
|
this.events.register("mouseup", this, this.onmouseup);
|
|
this.events.register("click", this, this.onclick);
|
|
this.events.register("mouseout", this, this.onmouseout);
|
|
this.events.register("dblclick", this, this.ondblclick);
|
|
},
|
|
|
|
/**
|
|
* Method: onmousedown
|
|
* When mouse goes down within the popup, make a note of
|
|
* it locally, and then do not propagate the mousedown
|
|
* (but do so safely so that user can select text inside)
|
|
*
|
|
* Parameters:
|
|
* evt - {Event}
|
|
*/
|
|
onmousedown: function (evt) {
|
|
this.mousedown = true;
|
|
OpenLayers.Event.stop(evt, true);
|
|
},
|
|
|
|
/**
|
|
* Method: onmousemove
|
|
* If the drag was started within the popup, then
|
|
* do not propagate the mousemove (but do so safely
|
|
* so that user can select text inside)
|
|
*
|
|
* Parameters:
|
|
* evt - {Event}
|
|
*/
|
|
onmousemove: function (evt) {
|
|
if (this.mousedown) {
|
|
OpenLayers.Event.stop(evt, true);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Method: onmouseup
|
|
* When mouse comes up within the popup, after going down
|
|
* in it, reset the flag, and then (once again) do not
|
|
* propagate the event, but do so safely so that user can
|
|
* select text inside
|
|
*
|
|
* Parameters:
|
|
* evt - {Event}
|
|
*/
|
|
onmouseup: function (evt) {
|
|
if (this.mousedown) {
|
|
this.mousedown = false;
|
|
OpenLayers.Event.stop(evt, true);
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Method: onclick
|
|
* Ignore clicks, but allowing default browser handling
|
|
*
|
|
* Parameters:
|
|
* evt - {Event}
|
|
*/
|
|
onclick: function (evt) {
|
|
OpenLayers.Event.stop(evt, true);
|
|
},
|
|
|
|
/**
|
|
* Method: onmouseout
|
|
* When mouse goes out of the popup set the flag to false so that
|
|
* if they let go and then drag back in, we won't be confused.
|
|
*
|
|
* Parameters:
|
|
* evt - {Event}
|
|
*/
|
|
onmouseout: function (evt) {
|
|
this.mousedown = false;
|
|
},
|
|
|
|
/**
|
|
* Method: ondblclick
|
|
* Ignore double-clicks, but allowing default browser handling
|
|
*
|
|
* Parameters:
|
|
* evt - {Event}
|
|
*/
|
|
ondblclick: function (evt) {
|
|
OpenLayers.Event.stop(evt, true);
|
|
},
|
|
|
|
CLASS_NAME: "OpenLayers.Popup"
|
|
});
|
|
|
|
OpenLayers.Popup.WIDTH = 200;
|
|
OpenLayers.Popup.HEIGHT = 200;
|
|
OpenLayers.Popup.COLOR = "white";
|
|
OpenLayers.Popup.OPACITY = 1;
|
|
OpenLayers.Popup.BORDER = "0px";
|