Fix from gregers, patch cleaned up by Erik for, "Util.getRenderedSize does not
calculate with inherited style". Includes manual regression test. r=me, (Closes #1906). CLA on file. git-svn-id: http://svn.openlayers.org/trunk/openlayers@8906 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf
This commit is contained in:
crschmidt
+11
-3
@@ -484,8 +484,14 @@ OpenLayers.Popup = OpenLayers.Class({
|
|||||||
var preparedHTML = "<div class='" + this.contentDisplayClass+ "'>" +
|
var preparedHTML = "<div class='" + this.contentDisplayClass+ "'>" +
|
||||||
this.contentDiv.innerHTML +
|
this.contentDiv.innerHTML +
|
||||||
"<div>";
|
"<div>";
|
||||||
|
|
||||||
|
var containerElement = (this.map) ? this.map.layerContainerDiv
|
||||||
|
: document.body;
|
||||||
var realSize = OpenLayers.Util.getRenderedDimensions(
|
var realSize = OpenLayers.Util.getRenderedDimensions(
|
||||||
preparedHTML, null, { displayClass: this.displayClass }
|
preparedHTML, null, {
|
||||||
|
displayClass: this.displayClass,
|
||||||
|
containerElement: containerElement
|
||||||
|
}
|
||||||
);
|
);
|
||||||
|
|
||||||
// is the "real" size of the div is safe to display in our map?
|
// is the "real" size of the div is safe to display in our map?
|
||||||
@@ -514,8 +520,10 @@ OpenLayers.Popup = OpenLayers.Class({
|
|||||||
//content is clipped in only one direction, so we need to
|
//content is clipped in only one direction, so we need to
|
||||||
// run getRenderedDimensions() again with a fixed dimension
|
// run getRenderedDimensions() again with a fixed dimension
|
||||||
var clippedSize = OpenLayers.Util.getRenderedDimensions(
|
var clippedSize = OpenLayers.Util.getRenderedDimensions(
|
||||||
preparedHTML, fixedSize,
|
preparedHTML, fixedSize, {
|
||||||
{ displayClass: this.contentDisplayClass }
|
displayClass: this.contentDisplayClass,
|
||||||
|
containerElement: containerElement
|
||||||
|
}
|
||||||
);
|
);
|
||||||
|
|
||||||
//if the clipped size is still the same as the safeSize,
|
//if the clipped size is still the same as the safeSize,
|
||||||
|
|||||||
@@ -1478,6 +1478,8 @@ OpenLayers.Util.getBrowserName = function() {
|
|||||||
* options - {Object}
|
* options - {Object}
|
||||||
* displayClass - {String} Optional parameter. A CSS class name(s) string
|
* displayClass - {String} Optional parameter. A CSS class name(s) string
|
||||||
* to provide the CSS context of the rendered content.
|
* to provide the CSS context of the rendered content.
|
||||||
|
* containerElement - {DOMElement} Optional parameter. Insert the HTML to
|
||||||
|
* this node instead of the body root when calculating dimensions.
|
||||||
*
|
*
|
||||||
* Returns:
|
* Returns:
|
||||||
* {OpenLayers.Size}
|
* {OpenLayers.Size}
|
||||||
@@ -1492,6 +1494,9 @@ OpenLayers.Util.getRenderedDimensions = function(contentHTML, size, options) {
|
|||||||
container.style.position = "absolute";
|
container.style.position = "absolute";
|
||||||
container.style.left = "-9999px";
|
container.style.left = "-9999px";
|
||||||
|
|
||||||
|
var containerElement = (options && options.containerElement)
|
||||||
|
? options.containerElement : document.body;
|
||||||
|
|
||||||
//fix a dimension, if specified.
|
//fix a dimension, if specified.
|
||||||
if (size) {
|
if (size) {
|
||||||
if (size.w) {
|
if (size.w) {
|
||||||
@@ -1516,7 +1521,7 @@ OpenLayers.Util.getRenderedDimensions = function(contentHTML, size, options) {
|
|||||||
container.appendChild(content);
|
container.appendChild(content);
|
||||||
|
|
||||||
// append container to body for rendering
|
// append container to body for rendering
|
||||||
document.body.appendChild(container);
|
containerElement.appendChild(container);
|
||||||
|
|
||||||
// calculate scroll width of content and add corners and shadow width
|
// calculate scroll width of content and add corners and shadow width
|
||||||
if (!w) {
|
if (!w) {
|
||||||
@@ -1532,7 +1537,7 @@ OpenLayers.Util.getRenderedDimensions = function(contentHTML, size, options) {
|
|||||||
|
|
||||||
// remove elements
|
// remove elements
|
||||||
container.removeChild(content);
|
container.removeChild(content);
|
||||||
document.body.removeChild(container);
|
containerElement.removeChild(container);
|
||||||
|
|
||||||
return new OpenLayers.Size(w, h);
|
return new OpenLayers.Size(w, h);
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -0,0 +1,113 @@
|
|||||||
|
<html xmlns="http://www.w3.org/1999/xhtml" debug="true">
|
||||||
|
<head>
|
||||||
|
<title>OpenLayers: Popup Mayhem</title>
|
||||||
|
<link rel="stylesheet" href="../../theme/default/style.css" type="text/css" />
|
||||||
|
<style type="text/css">
|
||||||
|
#map {
|
||||||
|
width: 900px;
|
||||||
|
height: 500px;
|
||||||
|
border: 1px solid black;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<script src="../../lib/OpenLayers.js"></script>
|
||||||
|
<script type="text/javascript">
|
||||||
|
var map;
|
||||||
|
var layer, markers;
|
||||||
|
|
||||||
|
var currentPopup;
|
||||||
|
|
||||||
|
|
||||||
|
// different popup types
|
||||||
|
|
||||||
|
|
||||||
|
//disable the autosize for the purpose of our matrix
|
||||||
|
OpenLayers.Popup.FramedCloud.prototype.autoSize = false;
|
||||||
|
|
||||||
|
AutoSizeFramedCloud = OpenLayers.Class(OpenLayers.Popup.FramedCloud, {
|
||||||
|
'autoSize': true
|
||||||
|
});
|
||||||
|
|
||||||
|
function init(){
|
||||||
|
map = new OpenLayers.Map('map');
|
||||||
|
|
||||||
|
layer = new OpenLayers.Layer(
|
||||||
|
"popupMatrix",
|
||||||
|
{isBaseLayer: true}
|
||||||
|
);
|
||||||
|
map.addLayer(layer);
|
||||||
|
|
||||||
|
markers = new OpenLayers.Layer.Markers("zibo");
|
||||||
|
map.addLayer(markers);
|
||||||
|
|
||||||
|
addMarkers();
|
||||||
|
map.zoomToMaxExtent();
|
||||||
|
}
|
||||||
|
|
||||||
|
function addMarkers() {
|
||||||
|
|
||||||
|
var ll, popupClass, popupContentHTML;
|
||||||
|
|
||||||
|
//anchored bubble popup small contents autosize closebox
|
||||||
|
ll = new OpenLayers.LonLat(-35,-15);
|
||||||
|
popupClass = AutoSizeFramedCloud;
|
||||||
|
popupContentHTML = "<div>This text's line-height is affected<br/>by it's parents. Thus we have to<br/>place the content inside<br/>the correct container to get<br/>the rendered size.</div>";
|
||||||
|
addMarker(ll, popupClass, popupContentHTML, true);
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Function: addMarker
|
||||||
|
* Add a new marker to the markers layer given the following lonlat,
|
||||||
|
* popupClass, and popup contents HTML. Also allow specifying
|
||||||
|
* whether or not to give the popup a close box.
|
||||||
|
*
|
||||||
|
* Parameters:
|
||||||
|
* ll - {<OpenLayers.LonLat>} Where to place the marker
|
||||||
|
* popupClass - {<OpenLayers.Class>} Which class of popup to bring up
|
||||||
|
* when the marker is clicked.
|
||||||
|
* popupContentHTML - {String} What to put in the popup
|
||||||
|
* closeBox - {Boolean} Should popup have a close box?
|
||||||
|
* overflow - {Boolean} Let the popup overflow scrollbars?
|
||||||
|
*/
|
||||||
|
function addMarker(ll, popupClass, popupContentHTML, closeBox, overflow) {
|
||||||
|
|
||||||
|
var feature = new OpenLayers.Feature(markers, ll);
|
||||||
|
feature.closeBox = closeBox;
|
||||||
|
feature.popupClass = popupClass;
|
||||||
|
feature.data.popupContentHTML = popupContentHTML;
|
||||||
|
feature.data.overflow = (overflow) ? "auto" : "hidden";
|
||||||
|
|
||||||
|
var marker = feature.createMarker();
|
||||||
|
|
||||||
|
var markerClick = function (evt) {
|
||||||
|
if (this.popup == null) {
|
||||||
|
this.popup = this.createPopup(this.closeBox);
|
||||||
|
map.addPopup(this.popup);
|
||||||
|
this.popup.show();
|
||||||
|
} else {
|
||||||
|
this.popup.toggle();
|
||||||
|
}
|
||||||
|
currentPopup = this.popup;
|
||||||
|
OpenLayers.Event.stop(evt);
|
||||||
|
};
|
||||||
|
marker.events.register("mousedown", feature, markerClick);
|
||||||
|
|
||||||
|
markers.addMarker(marker);
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body onload="init()">
|
||||||
|
<h1 id="title">Popup Matrix</h1>
|
||||||
|
|
||||||
|
<div id="tags">
|
||||||
|
</div>
|
||||||
|
<div style="line-height: 40px;">
|
||||||
|
<div id="map" class="smallmap"></div>
|
||||||
|
</div>
|
||||||
|
Click on popup, should be able to read a full sentence, not just two lines.
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Reference in New Issue
Block a user