ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

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)

Browse Source 
git-svn-id: http://svn.openlayers.org/trunk/openlayers@7887 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf
This commit is contained in:
euzuro
2008-08-28 22:05:46 +00:00
parent 3007b23621
commit 27526e6a0c
2 changed files with 78 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
examples/popupMatrix.html
View File

@@ -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/>

68
lib/OpenLayers/Popup.js
View File

@@ -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