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

@@ -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 <OpenLayers.Bounds>} 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 = "<div class='" + this.contentDisplayClass+ "'>" + this.contentHTML + "<div>";
+ 
             // 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, 

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;
     },
 
     /** 

lib/OpenLayers/Util.js

@@ -1374,15 +1374,19 @@ OpenLayers.Util.getBrowserName = function() {
  *     scrollbars do not flicker
  *     
  * Parameters:
+ * contentHTML
  * size - {<OpenLayers.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");

tests/manual/rendered-dimensions.html

@@ -0,0 +1,25 @@
+<html>
+<head>
+<style type="text/css">
+ .testDims p{
+    padding: 20px; 
+}     
+</style>
+<script src="../../lib/OpenLayers.js"></script>
+<script>
+function run() {
+    var out = document.getElementById("out");    
+    var size = OpenLayers.Util.getRenderedDimensions("<p>Content</p>");
+    var bigger = OpenLayers.Util.getRenderedDimensions("<p>Content</p>", null, {displayClass: 'testDims'});
+    if ((size.w + 40) == bigger.w && (size.h + 40) == bigger.h) {
+        out.innerHTML = "Pass:  " + size + ", " + bigger;
+    } else { 
+        out.innerHTML = "Fail:  " + size + ", " + bigger;
+    }
+} 
+</script>
+</head>
+<body onload="run()">
+<div id="out"></div>
+</body>
+</html>