/* 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 . Popup's don't require their own * layer and are added the the map using the * 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 * {} custom event manager */ events: null, /** Property: id * {String} the unique identifier assigned to this popup. */ id: "", /** * Property: lonlat * {} the position of this popup on the map */ lonlat: null, /** * Property: div * {DOMElement} the div that contains this popup. */ div: null, /** * Property: 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 */ groupDiv: null, /** * Property: padding * {int} the internal padding of the content div. */ padding: 5, /** * Property: 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 - {} The position on the map the popup will * be shown. * 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 - {} 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 - {} 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 - {} 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";