OpenLayers OpenLayers

Changeset 7887

Show
Ignore:
Timestamp:
08/28/08 18:05:46 (3 months ago)
Author:
euzuro
Message:

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)

Files:

Legend:

Unmodified
Added
Removed
Modified
Copied
Moved

  • trunk/openlayers/examples/popupMatrix.html

    r7236 r7887  
    880880 
    881881        <!-- preloading these images so the autosize will work correctly --> 
    882         <img src="small.jpg" style="position:absolute; top:-5000px; left: -5000px"></img> 
    883882        <img src="wideshort.jpg" style="position:absolute; top:-5000px; left: -5000px"></img> 
    884883        <img src="widelong.jpg" style="position:absolute; top:-5000px; left: -5000px"></img> 
    885884        <img src="thinlong.jpg" style="position:absolute; top:-5000px; left: -5000px"></img> 
     885 
     886       <p> All of the images in this file a pre-cached, meaning they are  
     887           loaded immediately when you load the page (they are just placed  
     888           far offscreen, that's why you don't see them).  
     889       </p> 
     890       <br>     
     891       <p> The only image that is *not* preloaded is small.jpg, the brazilian 
     892           flag. We do this in order to test out to make sure that our auto-sizing 
     893             code does in fact activate itself as the images load. To verify  
     894             this, clear your cache and reload this example page. Click on  
     895             any of the markers in the 'AutoSize' row. If the popup autosizes 
     896             to correctly contain the entire flag: golden. If the popup is  
     897             tiny and you can only see a corner of it, then this code is broken. 
     898        </p> 
    886899 
    887900      <br/>       

  • trunk/openlayers/lib/OpenLayers/Popup.js

    r7886 r7887  
    591591            (this.contentHTML != null) && 
    592592            (this.contentHTML != this.contentDiv.innerHTML)) { 
     593        
    593594            this.contentDiv.innerHTML = this.contentHTML; 
     595        
     596            if (this.autoSize) { 
     597                 
     598                //if popup has images, listen for when they finish 
     599                // loading and resize accordingly 
     600                this.registerImageListeners(); 
     601 
     602                //auto size the popup to its current contents 
     603                this.updateSize(); 
     604            } 
    594605        }     
    595606 
    596         if (this.autoSize) { 
    597             this.updateSize(); 
    598         } 
    599  
    600     }, 
    601      
     607    }, 
     608     
     609    /** 
     610     * Method: registerImageListeners 
     611     * Called when an image contained by the popup loaded. this function 
     612     *     updates the popup size, then unregisters the image load listener. 
     613     */    
     614    registerImageListeners: function() {  
     615 
     616        // As the images load, this function will call updateSize() to  
     617        // resize the popup to fit the content div (which presumably is now 
     618        // bigger than when the image was not loaded). 
     619        //  
     620        // If the 'panMapIfOutOfView' property is set, we will pan the newly 
     621        // resized popup back into view. 
     622        //  
     623        // Note that this function, when called, will have 'popup' and  
     624        // 'img' properties in the context. 
     625        // 
     626        var onImgLoad = function() { 
     627             
     628            this.popup.updateSize(); 
     629      
     630            if ( this.popup.visible() && this.popup.panMapIfOutOfView ) { 
     631                this.popup.panIntoView(); 
     632            } 
     633 
     634            OpenLayers.Event.stopObserving( 
     635                this.img, "load", this.img._onImageLoad 
     636            ); 
     637     
     638        }; 
     639 
     640        //cycle through the images and if their size is 0x0, that means that  
     641        // they haven't been loaded yet, so we attach the listener, which  
     642        // will fire when the images finish loading and will resize the  
     643        // popup accordingly to its new size. 
     644        var images = this.contentDiv.getElementsByTagName("img"); 
     645        for (var i = 0, len = images.length; i < len; i++) { 
     646            var img = images[i]; 
     647            if (img.width == 0 || img.height == 0) { 
     648 
     649                var context = { 
     650                    'popup': this, 
     651                    'img': img 
     652                }; 
     653 
     654                //expando this function to the image itself before registering 
     655                // it. This way we can easily and properly unregister it. 
     656                img._onImgLoad = OpenLayers.Function.bind(onImgLoad, context); 
     657 
     658                OpenLayers.Event.observe(img, 'load', img._onImgLoad); 
     659            }     
     660        }  
     661    }, 
    602662 
    603663    /**