ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Fix from gregers, patch cleaned up by Erik for, "Util.getRenderedSize does not

Browse Source 
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
2009-02-28 18:00:10 +00:00
parent 1f39c4dbd1
commit d9e466f645
3 changed files with 131 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
lib/OpenLayers/Popup.js
View File

@@ -484,8 +484,14 @@ OpenLayers.Popup = OpenLayers.Class({
var preparedHTML = "<div class='" + this.contentDisplayClass+ "'>" +
this.contentDiv.innerHTML +
"<div>";
var containerElement = (this.map) ? this.map.layerContainerDiv
: document.body;
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?
@@ -514,8 +520,10 @@ OpenLayers.Popup = OpenLayers.Class({
//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 }
preparedHTML, fixedSize, {
displayClass: this.contentDisplayClass,
containerElement: containerElement
}
);
//if the clipped size is still the same as the safeSize,

9
lib/OpenLayers/Util.js
View File

@@ -1478,6 +1478,8 @@ OpenLayers.Util.getBrowserName = function() {
* options - {Object}
* displayClass - {String} Optional parameter. A CSS class name(s) string
* 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:
* {OpenLayers.Size}
@@ -1492,6 +1494,9 @@ OpenLayers.Util.getRenderedDimensions = function(contentHTML, size, options) {
container.style.position = "absolute";
container.style.left = "-9999px";
var containerElement = (options && options.containerElement)
? options.containerElement : document.body;
//fix a dimension, if specified.
if (size) {
if (size.w) {
@@ -1516,7 +1521,7 @@ OpenLayers.Util.getRenderedDimensions = function(contentHTML, size, options) {
container.appendChild(content);
// append container to body for rendering
document.body.appendChild(container);
containerElement.appendChild(container);
// calculate scroll width of content and add corners and shadow width
if (!w) {
@@ -1532,7 +1537,7 @@ OpenLayers.Util.getRenderedDimensions = function(contentHTML, size, options) {
// remove elements
container.removeChild(content);
document.body.removeChild(container);
containerElement.removeChild(container);
return new OpenLayers.Size(w, h);
};

113
tests/manual/renderedDimensions.html Normal file
View File

@@ -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>