From 27526e6a0ce6b2f73a4c3a0dfc46dafebbe89ab6 Mon Sep 17 00:00:00 2001
From: euzuro <euzuro@metacarta.com>
Date: Thu, 28 Aug 2008 22:05:46 +0000
Subject: [PATCH] Adding registerImageListener() function that sits around and
 waits until images load in our popups... and when they do, it calls
 updateSize() so that the popup is sized correctly. thanks for the sharp
 review cr5 (Closes #1469)

git-svn-id: http://svn.openlayers.org/trunk/openlayers@7887 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf
---
 examples/popupMatrix.html | 15 ++++++++-
 lib/OpenLayers/Popup.js   | 68 ++++++++++++++++++++++++++++++++++++---
 2 files changed, 78 insertions(+), 5 deletions(-)

diff --git a/examples/popupMatrix.html b/examples/popupMatrix.html
index 0829c44a04..c93a7bdcf2 100644
--- a/examples/popupMatrix.html
+++ b/examples/popupMatrix.html
@@ -879,11 +879,24 @@
       <div id="map" class="smallmap"></div>
 
         <!-- preloading these images so the autosize will work correctly -->
-        <img src="small.jpg" style="position:absolute; top:-5000px; left: -5000px"></img>
         <img src="wideshort.jpg" style="position:absolute; top:-5000px; left: -5000px"></img>
         <img src="widelong.jpg" style="position:absolute; top:-5000px; left: -5000px"></img>
         <img src="thinlong.jpg" style="position:absolute; top:-5000px; left: -5000px"></img>
 
+       <p> All of the images in this file a pre-cached, meaning they are 
+           loaded immediately when you load the page (they are just placed 
+           far offscreen, that's why you don't see them). 
+       </p>
+       <br>    
+       <p> The only image that is *not* preloaded is small.jpg, the brazilian
+           flag. We do this in order to test out to make sure that our auto-sizing
+             code does in fact activate itself as the images load. To verify 
+             this, clear your cache and reload this example page. Click on 
+             any of the markers in the 'AutoSize' row. If the popup autosizes
+             to correctly contain the entire flag: golden. If the popup is 
+             tiny and you can only see a corner of it, then this code is broken.
+        </p>
+
       <br/>      
 
       
diff --git a/lib/OpenLayers/Popup.js b/lib/OpenLayers/Popup.js
index 5e920b706d..b1ffab6353 100644
--- a/lib/OpenLayers/Popup.js
+++ b/lib/OpenLayers/Popup.js
@@ -590,15 +590,75 @@ OpenLayers.Popup = OpenLayers.Class({
         if ((this.contentDiv != null) && 
             (this.contentHTML != null) &&
             (this.contentHTML != this.contentDiv.innerHTML)) {
+       
             this.contentDiv.innerHTML = this.contentHTML;
-        }    
+       
+            if (this.autoSize) {
+                
+                //if popup has images, listen for when they finish
+                // loading and resize accordingly
+                this.registerImageListeners();
 
-        if (this.autoSize) {
-            this.updateSize();
-        }
+                //auto size the popup to its current contents
+                this.updateSize();
+            }
+        }    
 
     },
     
+    /**
+     * Method: registerImageListeners
+     * Called when an image contained by the popup loaded. this function
+     *     updates the popup size, then unregisters the image load listener.
+     */   
+    registerImageListeners: function() { 
+
+        // As the images load, this function will call updateSize() to 
+        // resize the popup to fit the content div (which presumably is now
+        // bigger than when the image was not loaded).
+        // 
+        // If the 'panMapIfOutOfView' property is set, we will pan the newly
+        // resized popup back into view.
+        // 
+        // Note that this function, when called, will have 'popup' and 
+        // 'img' properties in the context.
+        //
+        var onImgLoad = function() {
+            
+            this.popup.updateSize();
+     
+            if ( this.popup.visible() && this.popup.panMapIfOutOfView ) {
+                this.popup.panIntoView();
+            }
+
+            OpenLayers.Event.stopObserving(
+                this.img, "load", this.img._onImageLoad
+            );
+    
+        };
+
+        //cycle through the images and if their size is 0x0, that means that 
+        // they haven't been loaded yet, so we attach the listener, which 
+        // will fire when the images finish loading and will resize the 
+        // popup accordingly to its new size.
+        var images = this.contentDiv.getElementsByTagName("img");
+        for (var i = 0, len = images.length; i < len; i++) {
+            var img = images[i];
+            if (img.width == 0 || img.height == 0) {
+
+                var context = {
+                    'popup': this,
+                    'img': img
+                };
+
+                //expando this function to the image itself before registering
+                // it. This way we can easily and properly unregister it.
+                img._onImgLoad = OpenLayers.Function.bind(onImgLoad, context);
+
+                OpenLayers.Event.observe(img, 'load', img._onImgLoad);
+            }    
+        } 
+    },
 
     /**
      * APIMethod: getSafeContentSize