summaryrefslogtreecommitdiff
path: root/misc/openlayers/lib/OpenLayers/Popup.js
diff options
context:
space:
mode:
Diffstat (limited to 'misc/openlayers/lib/OpenLayers/Popup.js')
-rw-r--r--misc/openlayers/lib/OpenLayers/Popup.js1065
1 files changed, 1065 insertions, 0 deletions
diff --git a/misc/openlayers/lib/OpenLayers/Popup.js b/misc/openlayers/lib/OpenLayers/Popup.js
new file mode 100644
index 0000000..290318e
--- /dev/null
+++ b/misc/openlayers/lib/OpenLayers/Popup.js
@@ -0,0 +1,1065 @@
+/* Copyright (c) 2006-2013 by OpenLayers Contributors (see authors.txt for
+ * full list of contributors). Published under the 2-clause BSD license.
+ * See license.txt in the OpenLayers distribution or repository for the
+ * full text of the license. */
+
+/**
+ * @requires OpenLayers/BaseTypes/Class.js
+ */
+
+
+/**
+ * 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: contentSize
+ * {<OpenLayers.Size>} the width and height of the content.
+ */
+ contentSize: null,
+
+ /**
+ * Property: size
+ * {<OpenLayers.Size>} the width and height of the popup.
+ */
+ size: null,
+
+ /**
+ * Property: contentHTML
+ * {String} An HTML string for this popup to display.
+ */
+ contentHTML: null,
+
+ /**
+ * 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} First and only child of 'div'. The group Div contains the
+ * 'contentDiv' and the 'closeDiv'.
+ */
+ groupDiv: null,
+
+ /**
+ * Property: closeDiv
+ * {DOMElement} the optional closer image
+ */
+ closeDiv: null,
+
+ /**
+ * APIProperty: autoSize
+ * {Boolean} Resize the popup to auto-fit the contents.
+ * Default is false.
+ */
+ autoSize: false,
+
+ /**
+ * APIProperty: minSize
+ * {<OpenLayers.Size>} Minimum size allowed for the popup's contents.
+ */
+ minSize: null,
+
+ /**
+ * APIProperty: maxSize
+ * {<OpenLayers.Size>} Maximum size allowed for the popup's contents.
+ */
+ maxSize: null,
+
+ /**
+ * Property: displayClass
+ * {String} The CSS class of the popup.
+ */
+ displayClass: "olPopup",
+
+ /**
+ * Property: contentDisplayClass
+ * {String} The CSS class of the popup content div.
+ */
+ contentDisplayClass: "olPopupContent",
+
+ /**
+ * Property: padding
+ * {int or <OpenLayers.Bounds>} An extra opportunity to specify internal
+ * padding of the content div inside the popup. This was originally
+ * confused with the css padding as specified in style.css's
+ * 'olPopupContent' class. We would like to get rid of this altogether,
+ * except that it does come in handy for the framed and anchoredbubble
+ * popups, who need to maintain yet another barrier between their
+ * content and the outer border of the popup itself.
+ *
+ * Note that in order to not break API, we must continue to support
+ * this property being set as an integer. Really, though, we'd like to
+ * have this specified as a Bounds object so that user can specify
+ * distinct left, top, right, bottom paddings. With the 3.0 release
+ * we can make this only a bounds.
+ */
+ padding: 0,
+
+ /**
+ * Property: disableFirefoxOverflowHack
+ * {Boolean} The hack for overflow in Firefox causes all elements
+ * to be re-drawn, which causes Flash elements to be
+ * re-initialized, which is troublesome.
+ * With this property the hack can be disabled.
+ */
+ disableFirefoxOverflowHack: false,
+
+ /**
+ * Method: fixPadding
+ * To be removed in 3.0, this function merely helps us to deal with the
+ * case where the user may have set an integer value for padding,
+ * instead of an <OpenLayers.Bounds> object.
+ */
+ fixPadding: function() {
+ if (typeof this.padding == "number") {
+ this.padding = new OpenLayers.Bounds(
+ this.padding, this.padding, this.padding, this.padding
+ );
+ }
+ },
+
+ /**
+ * APIProperty: panMapIfOutOfView
+ * {Boolean} When drawn, pan map such that the entire popup is visible in
+ * the current viewport (if necessary).
+ * Default is false.
+ */
+ panMapIfOutOfView: false,
+
+ /**
+ * APIProperty: keepInMap
+ * {Boolean} If panMapIfOutOfView is false, and this property is true,
+ * contrain the popup such that it always fits in the available map
+ * space. By default, this is not set on the base class. If you are
+ * creating popups that are near map edges and not allowing pannning,
+ * and especially if you have a popup which has a
+ * fixedRelativePosition, setting this to false may be a smart thing to
+ * do. Subclasses may want to override this setting.
+ *
+ * Default is false.
+ */
+ keepInMap: false,
+
+ /**
+ * APIProperty: closeOnMove
+ * {Boolean} When map pans, close the popup.
+ * Default is false.
+ */
+ closeOnMove: false,
+
+ /**
+ * 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.
+ * contentSize - {<OpenLayers.Size>} The size of the content.
+ * contentHTML - {String} An HTML string 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, contentSize, contentHTML, closeBox, closeBoxCallback) {
+ if (id == null) {
+ id = OpenLayers.Util.createUniqueID(this.CLASS_NAME + "_");
+ }
+
+ this.id = id;
+ this.lonlat = lonlat;
+
+ this.contentSize = (contentSize != null) ? contentSize
+ : 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 = this.displayClass;
+
+ var groupDivId = this.id + "_GroupDiv";
+ this.groupDiv = OpenLayers.Util.createDiv(groupDivId, null, null,
+ null, "relative", null,
+ "hidden");
+
+ var id = this.div.id + "_contentDiv";
+ this.contentDiv = OpenLayers.Util.createDiv(id, null, this.contentSize.clone(),
+ null, "relative");
+ this.contentDiv.className = this.contentDisplayClass;
+ this.groupDiv.appendChild(this.contentDiv);
+ this.div.appendChild(this.groupDiv);
+
+ if (closeBox) {
+ this.addCloseBox(closeBoxCallback);
+ }
+
+ this.registerEvents();
+ },
+
+ /**
+ * Method: destroy
+ * nullify references to prevent circular references and memory leaks
+ */
+ destroy: function() {
+
+ this.id = null;
+ this.lonlat = null;
+ this.size = null;
+ this.contentHTML = null;
+
+ this.backgroundColor = null;
+ this.opacity = null;
+ this.border = null;
+
+ if (this.closeOnMove && this.map) {
+ this.map.events.unregister("movestart", this, this.hide);
+ }
+
+ this.events.destroy();
+ this.events = null;
+
+ if (this.closeDiv) {
+ OpenLayers.Event.stopObservingElement(this.closeDiv);
+ this.groupDiv.removeChild(this.closeDiv);
+ }
+ this.closeDiv = null;
+
+ this.div.removeChild(this.groupDiv);
+ this.groupDiv = null;
+
+ if (this.map != null) {
+ this.map.removePopup(this);
+ }
+ this.map = null;
+ this.div = null;
+
+ this.autoSize = null;
+ this.minSize = null;
+ this.maxSize = null;
+ this.padding = null;
+ this.panMapIfOutOfView = 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 assumes that this.map already exists, which is okay because
+ // this.draw is only called once the popup has been added to the map.
+ if (this.closeOnMove) {
+ this.map.events.register("movestart", this, this.hide);
+ }
+
+ //listen to movestart, moveend to disable overflow (FF bug)
+ if (!this.disableFirefoxOverflowHack && OpenLayers.BROWSER_NAME == 'firefox') {
+ this.map.events.register("movestart", this, function() {
+ var style = document.defaultView.getComputedStyle(
+ this.contentDiv, null
+ );
+ var currentOverflow = style.getPropertyValue("overflow");
+ if (currentOverflow != "hidden") {
+ this.contentDiv._oldOverflow = currentOverflow;
+ this.contentDiv.style.overflow = "hidden";
+ }
+ });
+ this.map.events.register("moveend", this, function() {
+ var oldOverflow = this.contentDiv._oldOverflow;
+ if (oldOverflow) {
+ this.contentDiv.style.overflow = oldOverflow;
+ this.contentDiv._oldOverflow = null;
+ }
+ });
+ }
+
+ this.moveTo(px);
+ if (!this.autoSize && !this.size) {
+ this.setSize(this.contentSize);
+ }
+ this.setBackgroundColor();
+ this.setOpacity();
+ this.setBorder();
+ this.setContentHTML();
+
+ if (this.panMapIfOutOfView) {
+ this.panIntoView();
+ }
+
+ 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() {
+ if (this.visible()) {
+ this.hide();
+ } else {
+ this.show();
+ }
+ },
+
+ /**
+ * Method: show
+ * Makes the popup visible.
+ */
+ show: function() {
+ this.div.style.display = '';
+
+ if (this.panMapIfOutOfView) {
+ this.panIntoView();
+ }
+ },
+
+ /**
+ * Method: hide
+ * Makes the popup invisible.
+ */
+ hide: function() {
+ this.div.style.display = 'none';
+ },
+
+ /**
+ * Method: setSize
+ * Used to adjust the size of the popup.
+ *
+ * Parameters:
+ * contentSize - {<OpenLayers.Size>} the new size for the popup's
+ * contents div (in pixels).
+ */
+ setSize:function(contentSize) {
+ this.size = contentSize.clone();
+
+ // if our contentDiv has a css 'padding' set on it by a stylesheet, we
+ // must add that to the desired "size".
+ var contentDivPadding = this.getContentDivPadding();
+ var wPadding = contentDivPadding.left + contentDivPadding.right;
+ var hPadding = contentDivPadding.top + contentDivPadding.bottom;
+
+ // take into account the popup's 'padding' property
+ this.fixPadding();
+ wPadding += this.padding.left + this.padding.right;
+ hPadding += this.padding.top + this.padding.bottom;
+
+ // make extra space for the close div
+ if (this.closeDiv) {
+ var closeDivWidth = parseInt(this.closeDiv.style.width);
+ wPadding += closeDivWidth + contentDivPadding.right;
+ }
+
+ //increase size of the main popup div to take into account the
+ // users's desired padding and close div.
+ this.size.w += wPadding;
+ this.size.h += hPadding;
+
+ //now if our browser is IE, we need to actually make the contents
+ // div itself bigger to take its own padding into effect. this makes
+ // me want to shoot someone, but so it goes.
+ if (OpenLayers.BROWSER_NAME == "msie") {
+ this.contentSize.w +=
+ contentDivPadding.left + contentDivPadding.right;
+ this.contentSize.h +=
+ contentDivPadding.bottom + contentDivPadding.top;
+ }
+
+ 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 = contentSize.w + "px";
+ this.contentDiv.style.height = contentSize.h + "px";
+ }
+ },
+
+ /**
+ * APIMethod: updateSize
+ * Auto size the popup so that it precisely fits its contents (as
+ * determined by this.contentDiv.innerHTML). Popup size will, of
+ * course, be limited by the available space on the current map
+ */
+ updateSize: function() {
+
+ // determine actual render dimensions of the contents by putting its
+ // contents into a fake contentDiv (for the CSS) and then measuring it
+ var preparedHTML = "<div class='" + this.contentDisplayClass+ "'>" +
+ this.contentDiv.innerHTML +
+ "</div>";
+
+ var containerElement = (this.map) ? this.map.div : document.body;
+ var realSize = OpenLayers.Util.getRenderedDimensions(
+ preparedHTML, null, {
+ displayClass: this.displayClass,
+ containerElement: containerElement
+ }
+ );
+
+ // is the "real" size of the div is safe to display in our map?
+ var safeSize = this.getSafeContentSize(realSize);
+
+ var newSize = null;
+ if (safeSize.equals(realSize)) {
+ //real size of content is small enough to fit on the map,
+ // so we use real size.
+ newSize = realSize;
+
+ } else {
+
+ // make a new 'size' object with the clipped dimensions
+ // set or null if not clipped.
+ var fixedSize = {
+ w: (safeSize.w < realSize.w) ? safeSize.w : null,
+ h: (safeSize.h < realSize.h) ? safeSize.h : null
+ };
+
+ if (fixedSize.w && fixedSize.h) {
+ //content is too big in both directions, so we will use
+ // max popup size (safeSize), knowing well that it will
+ // overflow both ways.
+ newSize = safeSize;
+ } else {
+ //content is clipped in only one direction, so we need to
+ // run getRenderedDimensions() again with a fixed dimension
+ var clippedSize = OpenLayers.Util.getRenderedDimensions(
+ preparedHTML, fixedSize, {
+ displayClass: this.contentDisplayClass,
+ containerElement: containerElement
+ }
+ );
+
+ //if the clipped size is still the same as the safeSize,
+ // that means that our content must be fixed in the
+ // offending direction. If overflow is 'auto', this means
+ // we are going to have a scrollbar for sure, so we must
+ // adjust for that.
+ //
+ var currentOverflow = OpenLayers.Element.getStyle(
+ this.contentDiv, "overflow"
+ );
+ if ( (currentOverflow != "hidden") &&
+ (clippedSize.equals(safeSize)) ) {
+ var scrollBar = OpenLayers.Util.getScrollbarWidth();
+ if (fixedSize.w) {
+ clippedSize.h += scrollBar;
+ } else {
+ clippedSize.w += scrollBar;
+ }
+ }
+
+ newSize = this.getSafeContentSize(clippedSize);
+ }
+ }
+ this.setSize(newSize);
+ },
+
+ /**
+ * 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.contentHTML != null) &&
+ (this.contentHTML != this.contentDiv.innerHTML)) {
+
+ this.contentDiv.innerHTML = this.contentHTML;
+
+ if (this.autoSize) {
+
+ //if popup has images, listen for when they finish
+ // loading and resize accordingly
+ this.registerImageListeners();
+
+ //auto size the popup to its current contents
+ this.updateSize();
+ }
+ }
+
+ },
+
+ /**
+ * Method: registerImageListeners
+ * Called when an image contained by the popup loaded. this function
+ * updates the popup size, then unregisters the image load listener.
+ */
+ registerImageListeners: function() {
+
+ // As the images load, this function will call updateSize() to
+ // resize the popup to fit the content div (which presumably is now
+ // bigger than when the image was not loaded).
+ //
+ // If the 'panMapIfOutOfView' property is set, we will pan the newly
+ // resized popup back into view.
+ //
+ // Note that this function, when called, will have 'popup' and
+ // 'img' properties in the context.
+ //
+ var onImgLoad = function() {
+ if (this.popup.id === null) { // this.popup has been destroyed!
+ return;
+ }
+ this.popup.updateSize();
+
+ if ( this.popup.visible() && this.popup.panMapIfOutOfView ) {
+ this.popup.panIntoView();
+ }
+
+ OpenLayers.Event.stopObserving(
+ this.img, "load", this.img._onImgLoad
+ );
+
+ };
+
+ //cycle through the images and if their size is 0x0, that means that
+ // they haven't been loaded yet, so we attach the listener, which
+ // will fire when the images finish loading and will resize the
+ // popup accordingly to its new size.
+ var images = this.contentDiv.getElementsByTagName("img");
+ for (var i = 0, len = images.length; i < len; i++) {
+ var img = images[i];
+ if (img.width == 0 || img.height == 0) {
+
+ var context = {
+ 'popup': this,
+ 'img': img
+ };
+
+ //expando this function to the image itself before registering
+ // it. This way we can easily and properly unregister it.
+ img._onImgLoad = OpenLayers.Function.bind(onImgLoad, context);
+
+ OpenLayers.Event.observe(img, 'load', img._onImgLoad);
+ }
+ }
+ },
+
+ /**
+ * APIMethod: getSafeContentSize
+ *
+ * Parameters:
+ * size - {<OpenLayers.Size>} Desired size to make the popup.
+ *
+ * Returns:
+ * {<OpenLayers.Size>} A size to make the popup which is neither smaller
+ * than the specified minimum size, nor bigger than the maximum
+ * size (which is calculated relative to the size of the viewport).
+ */
+ getSafeContentSize: function(size) {
+
+ var safeContentSize = size.clone();
+
+ // if our contentDiv has a css 'padding' set on it by a stylesheet, we
+ // must add that to the desired "size".
+ var contentDivPadding = this.getContentDivPadding();
+ var wPadding = contentDivPadding.left + contentDivPadding.right;
+ var hPadding = contentDivPadding.top + contentDivPadding.bottom;
+
+ // take into account the popup's 'padding' property
+ this.fixPadding();
+ wPadding += this.padding.left + this.padding.right;
+ hPadding += this.padding.top + this.padding.bottom;
+
+ if (this.closeDiv) {
+ var closeDivWidth = parseInt(this.closeDiv.style.width);
+ wPadding += closeDivWidth + contentDivPadding.right;
+ }
+
+ // prevent the popup from being smaller than a specified minimal size
+ if (this.minSize) {
+ safeContentSize.w = Math.max(safeContentSize.w,
+ (this.minSize.w - wPadding));
+ safeContentSize.h = Math.max(safeContentSize.h,
+ (this.minSize.h - hPadding));
+ }
+
+ // prevent the popup from being bigger than a specified maximum size
+ if (this.maxSize) {
+ safeContentSize.w = Math.min(safeContentSize.w,
+ (this.maxSize.w - wPadding));
+ safeContentSize.h = Math.min(safeContentSize.h,
+ (this.maxSize.h - hPadding));
+ }
+
+ //make sure the desired size to set doesn't result in a popup that
+ // is bigger than the map's viewport.
+ //
+ if (this.map && this.map.size) {
+
+ var extraX = 0, extraY = 0;
+ if (this.keepInMap && !this.panMapIfOutOfView) {
+ var px = this.map.getPixelFromLonLat(this.lonlat);
+ switch (this.relativePosition) {
+ case "tr":
+ extraX = px.x;
+ extraY = this.map.size.h - px.y;
+ break;
+ case "tl":
+ extraX = this.map.size.w - px.x;
+ extraY = this.map.size.h - px.y;
+ break;
+ case "bl":
+ extraX = this.map.size.w - px.x;
+ extraY = px.y;
+ break;
+ case "br":
+ extraX = px.x;
+ extraY = px.y;
+ break;
+ default:
+ extraX = px.x;
+ extraY = this.map.size.h - px.y;
+ break;
+ }
+ }
+
+ var maxY = this.map.size.h -
+ this.map.paddingForPopups.top -
+ this.map.paddingForPopups.bottom -
+ hPadding - extraY;
+
+ var maxX = this.map.size.w -
+ this.map.paddingForPopups.left -
+ this.map.paddingForPopups.right -
+ wPadding - extraX;
+
+ safeContentSize.w = Math.min(safeContentSize.w, maxX);
+ safeContentSize.h = Math.min(safeContentSize.h, maxY);
+ }
+
+ return safeContentSize;
+ },
+
+ /**
+ * Method: getContentDivPadding
+ * Glorious, oh glorious hack in order to determine the css 'padding' of
+ * the contentDiv. IE/Opera return null here unless we actually add the
+ * popup's main 'div' element (which contains contentDiv) to the DOM.
+ * So we make it invisible and then add it to the document temporarily.
+ *
+ * Once we've taken the padding readings we need, we then remove it
+ * from the DOM (it will actually get added to the DOM in
+ * Map.js's addPopup)
+ *
+ * Returns:
+ * {<OpenLayers.Bounds>}
+ */
+ getContentDivPadding: function() {
+
+ //use cached value if we have it
+ var contentDivPadding = this._contentDivPadding;
+ if (!contentDivPadding) {
+
+ if (this.div.parentNode == null) {
+ //make the div invisible and add it to the page
+ this.div.style.display = "none";
+ document.body.appendChild(this.div);
+ }
+
+ //read the padding settings from css, put them in an OL.Bounds
+ contentDivPadding = new OpenLayers.Bounds(
+ OpenLayers.Element.getStyle(this.contentDiv, "padding-left"),
+ OpenLayers.Element.getStyle(this.contentDiv, "padding-bottom"),
+ OpenLayers.Element.getStyle(this.contentDiv, "padding-right"),
+ OpenLayers.Element.getStyle(this.contentDiv, "padding-top")
+ );
+
+ //cache the value
+ this._contentDivPadding = contentDivPadding;
+
+ if (this.div.parentNode == document.body) {
+ //remove the div from the page and make it visible again
+ document.body.removeChild(this.div);
+ this.div.style.display = "";
+ }
+ }
+ return contentDivPadding;
+ },
+
+ /**
+ * Method: addCloseBox
+ *
+ * Parameters:
+ * callback - {Function} The callback to be called when the close button
+ * is clicked.
+ */
+ addCloseBox: function(callback) {
+
+ this.closeDiv = OpenLayers.Util.createDiv(
+ this.id + "_close", null, {w: 17, h: 17}
+ );
+ this.closeDiv.className = "olPopupCloseBox";
+
+ // use the content div's css padding to determine if we should
+ // padd the close div
+ var contentDivPadding = this.getContentDivPadding();
+
+ this.closeDiv.style.right = contentDivPadding.right + "px";
+ this.closeDiv.style.top = contentDivPadding.top + "px";
+ this.groupDiv.appendChild(this.closeDiv);
+
+ var closePopup = callback || function(e) {
+ this.hide();
+ OpenLayers.Event.stop(e);
+ };
+ OpenLayers.Event.observe(this.closeDiv, "touchend",
+ OpenLayers.Function.bindAsEventListener(closePopup, this));
+ OpenLayers.Event.observe(this.closeDiv, "click",
+ OpenLayers.Function.bindAsEventListener(closePopup, this));
+ },
+
+ /**
+ * Method: panIntoView
+ * Pans the map such that the popup is totaly viewable (if necessary)
+ */
+ panIntoView: function() {
+
+ var mapSize = this.map.getSize();
+
+ //start with the top left corner of the popup, in px,
+ // relative to the viewport
+ var origTL = this.map.getViewPortPxFromLayerPx( new OpenLayers.Pixel(
+ parseInt(this.div.style.left),
+ parseInt(this.div.style.top)
+ ));
+ var newTL = origTL.clone();
+
+ //new left (compare to margins, using this.size to calculate right)
+ if (origTL.x < this.map.paddingForPopups.left) {
+ newTL.x = this.map.paddingForPopups.left;
+ } else
+ if ( (origTL.x + this.size.w) > (mapSize.w - this.map.paddingForPopups.right)) {
+ newTL.x = mapSize.w - this.map.paddingForPopups.right - this.size.w;
+ }
+
+ //new top (compare to margins, using this.size to calculate bottom)
+ if (origTL.y < this.map.paddingForPopups.top) {
+ newTL.y = this.map.paddingForPopups.top;
+ } else
+ if ( (origTL.y + this.size.h) > (mapSize.h - this.map.paddingForPopups.bottom)) {
+ newTL.y = mapSize.h - this.map.paddingForPopups.bottom - this.size.h;
+ }
+
+ var dx = origTL.x - newTL.x;
+ var dy = origTL.y - newTL.y;
+
+ this.map.pan(dx, dy);
+ },
+
+ /**
+ * 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. The same procedure is needed for
+ * touchmove and touchend events.
+ *
+ * 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);
+
+ function onTouchstart(evt) {
+ OpenLayers.Event.stop(evt, true);
+ }
+ this.events.on({
+ "mousedown": this.onmousedown,
+ "mousemove": this.onmousemove,
+ "mouseup": this.onmouseup,
+ "click": this.onclick,
+ "mouseout": this.onmouseout,
+ "dblclick": this.ondblclick,
+ "touchstart": onTouchstart,
+ scope: this
+ });
+
+ },
+
+ /**
+ * 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";
generated by cgit v1.2.3 (git 2.25.1) at 2024-12-22 19:31:07 +0000