Changeset 7886

Timestamp:

08/28/08 16:04:17 (3 months ago)

Author:

euzuro

Message:

Bubble out the code that handles the re-sizing of the popup into an APIMethod: updateSize(). Other change is that now instead of using the 'contentHTML' string property to autosize, we will now use the actual contentDiv's 'innerHTML' property. This is possible because in the setContentHTML() function, we switch around the order and set the conentDiv.innerHTML *before* calling updateSize(). Seemingly minor, this change actually does wonders towards distancing us from the horrendous idea that the 'contentHTML' property was in the first place. Now, if users go in and fudge with the contentDiv DOMElement directly, they can still benefit from the auto-sizing. In fact, 'contentHTML' can be totally ignored altogether. joy. All tests pass, including an eyeballing of the acceptance test examples/popupMatrix.html in ff2 and ie7. Mil gracias to cr5 for the speedy review (Closes #1708)

Files:

• trunk/openlayers/lib/OpenLayers/Popup.js (modified) (4 diffs)
• trunk/openlayers/tests/Popup.html (modified) (1 diff)
• trunk/openlayers/tests/Popup/Anchored.html (modified) (1 diff)

trunk/openlayers/lib/OpenLayers/Popup.js

@@ -56 +56 @@
-    /** 
-     * Property: contentHTML 
-The HTML that this popup displays
-
-""
+An HTML string for this popup to display
+
+null
-    
-    /** 
@@ -185 +185 @@
-    *                                 be shown.
-    * size - {<OpenLayers.Size>}      The size of the popup.
-The HTML content to display inside the
+An HTML string to display inside the  
-    *                                 popup.
-    * closeBox - {Boolean}            Whether to display a close box inside
@@ -449 +449 @@
-
-    /**
+     * 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 realSize = 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);
+
+        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 OL.Size object with the clipped dimensions 
+            // set or null if not clipped.
+            var fixedSize = new OpenLayers.Size();
+            fixedSize.w = (safeSize.w < realSize.w) ? safeSize.w : null;
+            fixedSize.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 }
+                );
+                
+                //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.
@@ -512 +584 @@
-    setContentHTML:function(contentHTML) {
-
-        var preparedHTML;
-        if (contentHTML != null) {
-            this.contentHTML = contentHTML;
-        }
-       
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
-            this.contentDiv.innerHTML = this.contentHTML;
-        }    
+
+        if (this.autoSize) {
+            this.updateSize();
+        }
+
-    },
-    

trunk/openlayers/tests/Popup.html

@@ -18 +18 @@
-        var firstID = popup.id;
-        t.ok(popup.size.equals(size), "good default popup.size");
-""
+null
-        t.eq(popup.backgroundColor, OpenLayers.Popup.COLOR, "good default popup.backgroundColor");
-        t.eq(popup.opacity, OpenLayers.Popup.OPACITY, "good default popup.opacity");

trunk/openlayers/tests/Popup/Anchored.html

@@ -14 +14 @@
-        t.ok(popup.id.startsWith("OpenLayers.Popup.Anchored"), "valid default popupid");
-        var firstID = popup.id;
-""
+null
-
-