From 91f3c5e6520f18be0e844fce4c17693150b93197 Mon Sep 17 00:00:00 2001 From: crschmidt Date: Sun, 3 Aug 2008 18:47:52 +0000 Subject: [PATCH] Improve getRenderedDimensions to take into account a CSS class. Refactor some popup code to take advantage of this, to provide a better hint to the getRenderedDimensions call as to what is going on. Patch from sbenthall, r=me, includes a manual acceptance test (only because the testing framework makes these kinds of things hard). Manually confirmed to work with the sundials.html example, tested with that and manual test in IE6, IE7, FF2-Win FF3-Mac FF2-Mac Safari-Mac Opera-Win, and in all browsers it worked. (Hooray!) Nice one, sbenthall. (Closes #1500) git-svn-id: http://svn.openlayers.org/trunk/openlayers@7684 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf --- lib/OpenLayers/Popup.js | 30 +++++++++++++++++++++------ lib/OpenLayers/Popup/FramedCloud.js | 8 ++++++- lib/OpenLayers/Util.js | 11 +++++++++- tests/manual/rendered-dimensions.html | 25 ++++++++++++++++++++++ 4 files changed, 66 insertions(+), 8 deletions(-) create mode 100644 tests/manual/rendered-dimensions.html diff --git a/lib/OpenLayers/Popup.js b/lib/OpenLayers/Popup.js index 94c4eec041..c1d390842c 100644 --- a/lib/OpenLayers/Popup.js +++ b/lib/OpenLayers/Popup.js @@ -116,6 +116,18 @@ OpenLayers.Popup = OpenLayers.Class({ */ 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 } An extra opportunity to specify internal @@ -198,7 +210,7 @@ OpenLayers.Popup = OpenLayers.Class({ this.div = OpenLayers.Util.createDiv(this.id, null, null, null, null, null, "hidden"); - this.div.className = 'olPopup'; + this.div.className = this.displayClass; var groupDivId = this.id + "_GroupDiv"; this.groupDiv = OpenLayers.Util.createDiv(groupDivId, null, null, @@ -208,7 +220,7 @@ OpenLayers.Popup = OpenLayers.Class({ var id = this.div.id + "_contentDiv"; this.contentDiv = OpenLayers.Util.createDiv(id, null, this.size.clone(), null, "relative"); - this.contentDiv.className = 'olPopupContent'; + this.contentDiv.className = this.contentDisplayClass; this.groupDiv.appendChild(this.contentDiv); this.div.appendChild(this.groupDiv); @@ -498,15 +510,20 @@ OpenLayers.Popup = OpenLayers.Class({ * contentHTML - {String} HTML for the div. */ setContentHTML:function(contentHTML) { + + var preparedHTML; if (contentHTML != null) { this.contentHTML = contentHTML; } - + if (this.autoSize) { - + //fake the contentDiv for the CSS context + preparedHTML = "
" + this.contentHTML + "
"; + // determine actual render dimensions of the contents var realSize = - OpenLayers.Util.getRenderedDimensions(this.contentHTML); + OpenLayers.Util.getRenderedDimensions(preparedHTML, null, + { displayClass: this.displayClass }); // is the "real" size of the div is safe to display in our map? var safeSize = this.getSafeContentSize(realSize); @@ -535,7 +552,8 @@ 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( - this.contentHTML, fixedSize + preparedHTML, fixedSize, + { displayClass: this.contentDisplayClass } ); //if the clipped size is still the same as the safeSize, diff --git a/lib/OpenLayers/Popup/FramedCloud.js b/lib/OpenLayers/Popup/FramedCloud.js index cf3bdb3640..18697b217e 100644 --- a/lib/OpenLayers/Popup/FramedCloud.js +++ b/lib/OpenLayers/Popup/FramedCloud.js @@ -16,6 +16,12 @@ OpenLayers.Popup.FramedCloud = OpenLayers.Class(OpenLayers.Popup.Framed, { + /** + * Property: contentDisplayClass + * {String} The CSS class of the popup content div. + */ + contentDisplayClass: "olFramedCloudPopupContent", + /** * APIProperty: autoSize * {Boolean} Framed Cloud is autosizing by default. @@ -210,7 +216,7 @@ OpenLayers.Popup.FramedCloud = this.imageSrc = OpenLayers.Util.getImagesLocation() + 'cloud-popup-relative.png'; OpenLayers.Popup.Framed.prototype.initialize.apply(this, arguments); - this.contentDiv.className = "olFramedCloudPopupContent"; + this.contentDiv.className = this.contentDisplayClass; }, /** diff --git a/lib/OpenLayers/Util.js b/lib/OpenLayers/Util.js index 3ae1169a58..50b9851735 100644 --- a/lib/OpenLayers/Util.js +++ b/lib/OpenLayers/Util.js @@ -1374,15 +1374,19 @@ OpenLayers.Util.getBrowserName = function() { * scrollbars do not flicker * * Parameters: + * contentHTML * size - {} If either the 'w' or 'h' properties is * specified, we fix that dimension of the div to be measured. This is * useful in the case where we have a limit in one dimension and must * therefore meaure the flow in the other dimension. + * options - {Object} + * displayClass - {String} Optional parameter. A CSS class name(s) string + * to provide the CSS context of the rendered content. * * Returns: * {OpenLayers.Size} */ -OpenLayers.Util.getRenderedDimensions = function(contentHTML, size) { +OpenLayers.Util.getRenderedDimensions = function(contentHTML, size, options) { var w, h; @@ -1402,6 +1406,11 @@ OpenLayers.Util.getRenderedDimensions = function(contentHTML, size) { container.style.height = h + "px"; } } + + //add css classes, if specified + if (options && options.displayClass) { + container.className = options.displayClass; + } // create temp content div and assign content var content = document.createElement("div"); diff --git a/tests/manual/rendered-dimensions.html b/tests/manual/rendered-dimensions.html new file mode 100644 index 0000000000..9960d5eb5c --- /dev/null +++ b/tests/manual/rendered-dimensions.html @@ -0,0 +1,25 @@ + + + + + + + +
+ +