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

make Tile.Image compatible with CSS-based tile fade animation

Browse Source
This commit is contained in:
Éric Lemoine
2011-12-31 00:19:19 +01:00
parent d417231bb8
commit 5edd3d3f84
2 changed files with 111 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
lib/OpenLayers/Tile/Image.js
View File

@@ -80,7 +80,7 @@ OpenLayers.Tile.Image = OpenLayers.Class(OpenLayers.Tile, {
* transition effects are not supported if POST requests are used.
*/
maxGetUrlLength: null,
/** TBD 3.0 - reorder the parameters to the init function to remove
* URL. the getUrl() function on the layer gets called on
* each draw(), so no need to specify it here.
@@ -243,13 +243,9 @@ OpenLayers.Tile.Image = OpenLayers.Class(OpenLayers.Tile, {
style.width = "100%";
style.height = "100%";
}
style.display = "none";
style.visibility = "hidden";
style.opacity = 0;
style.position = "absolute";
if (this.layer.opacity < 1) {
OpenLayers.Util.modifyDOMElement(this.imgDiv, null, null,
null, null, null, null,
this.layer.opacity);
}
if (this.layerAlphaHack) {
// move the image out of sight
style.paddingTop = style.height;
@@ -311,7 +307,9 @@ OpenLayers.Tile.Image = OpenLayers.Class(OpenLayers.Tile, {
*/
setImgSrc: function(url) {
var img = this.imgDiv;
img.style.display = "none";
img.style.visibility = 'hidden';
img.style.opacity = 0;
img.style.filter = 'alpha(opacity=0)';
if (url) {
img.src = url;
}
@@ -360,9 +358,28 @@ OpenLayers.Tile.Image = OpenLayers.Class(OpenLayers.Tile, {
onImageLoad: function() {
var img = this.imgDiv;
OpenLayers.Event.stopObservingElement(img);
img.style.display = "";
this.isLoading = false;
this.events.triggerEvent("loadend");
var opacity = this.layer.opacity,
tileAnimation = this.layer.map.tileAnimation;
if (OpenLayers.TRANSITION && tileAnimation && opacity) {
// if the displaying of the tile is animated we delay the
// loadend event until after the end of the transition, this
// to avoid flash effects because the backbuffer is removed
// before the tile is actually displayed
OpenLayers.Event.observe(img, OpenLayers.TRANSITION_END,
OpenLayers.Function.bind(this.onTransitionEnd, this)
);
}
img.style.visibility = 'inherit';
img.style.opacity = opacity;
img.style.filter = 'alpha(opacity=' + (opacity * 100) + ')';
if (!OpenLayers.TRANSITION || !tileAnimation || !opacity) {
this.isLoading = false;
this.events.triggerEvent("loadend");
}
// IE<7 needs a reflow when the tiles are loaded because of the
// percentage based positioning. Otherwise nothing is shown
@@ -402,6 +419,16 @@ OpenLayers.Tile.Image = OpenLayers.Class(OpenLayers.Tile, {
}
},
/**
* Method: onTransitionEnd
* Handler for the transitionend event.
*/
onTransitionEnd: function() {
OpenLayers.Event.stopObservingElement(this.imgDiv);
this.isLoading = false;
this.events.triggerEvent('loadend');
},
CLASS_NAME: "OpenLayers.Tile.Image"
});

75
tests/Tile/Image.html
View File

@@ -262,14 +262,14 @@
tile = new OpenLayers.Tile.Image(layer, position, new OpenLayers.Bounds(-90,-85,-90,85), url, size);
tile.draw();
tile.moveTo(new OpenLayers.Bounds(-185,-90,-180,-80), new OpenLayers.Pixel(-180,-85), true);
t.delay_call( 1, function() { t.eq(tile.imgDiv.style.display, "none", "Tile image is invisible.") } );
t.delay_call( 1, function() { t.eq(tile.imgDiv.style.visibility, "hidden", "Tile image is invisible.") } );
var layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://labs.metacarta.com/wms/vmap0?", {layers: 'basic'}, {'alpha':true});
map.addLayer(layer);
tile = new OpenLayers.Tile.Image(layer, position, new OpenLayers.Bounds(-90,-85,-90,85), url, size);
tile.draw();
tile.moveTo(new OpenLayers.Bounds(-185,-90,-180,-80), new OpenLayers.Pixel(-180,-85), true)
t.delay_call( 1, function() { t.eq(tile.imgDiv.style.display, "none", "Alpha tile image is invisible.") } );
t.delay_call( 1, function() { t.eq(tile.imgDiv.style.visibility, "hidden", "Alpha tile image is invisible.") } );
}
@@ -342,6 +342,77 @@
t.ok(tile.imgDiv == null, "image reference removed from tile");
map.destroy();
}
function test_onImageLoad(t) {
t.plan(12);
var map = new OpenLayers.Map('map');
var layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://labs.metacarta.com/wms/vmap0?", {layers: 'basic'}, {opacity: 0.5});
map.addLayer(layer);
map.setCenter(new OpenLayers.LonLat(0,0), 5);
var tile = layer.grid[0][0];
var log;
tile.events.on({loadend: function() { log++; }});
var T = OpenLayers.TRANSITION;
var TE = OpenLayers.TRANSITION_END;
OpenLayers.TRANSITION_END = 'transitionend';
function firstObserverName() {
var cacheID = tile.imgDiv._eventCacheID,
observers = OpenLayers.Event.observers[cacheID];
return observers && observers.length > 0 ? observers[0].name : undefined;
}
OpenLayers.TRANSITION = true;
map.tileAnimation = true;
log = 0;
tile.onImageLoad();
t.eq(tile.imgDiv.style.visibility, 'inherit',
'[a] onImageLoad makes the image visible');
t.eq(tile.imgDiv.style.opacity, '0.5',
'[a] onImageLoad sets the expected opacity for the image');
t.eq(log, 0,
'[a] onImageLoad does not trigger loadend');
t.eq(firstObserverName(), 'transitionend',
'[a] onImageLoad registers a transitionend observer');
OpenLayers.Event.stopObservingElement(tile.imgDiv);
OpenLayers.TRANSITION = true;
map.tileAnimation = false;
log = 0;
tile.onImageLoad();
t.eq(tile.imgDiv.style.visibility, 'inherit',
'[b] onImageLoad makes the image visible');
t.eq(tile.imgDiv.style.opacity, '0.5',
'[b] onImageLoad sets the expected opacity for the image');
t.eq(log, 1,
'[b] onImageLoad does trigger loadend');
t.eq(firstObserverName(), undefined,
'[b] onImageLoad does not register a transitionend observer');
OpenLayers.Event.stopObservingElement(tile.imgDiv);
OpenLayers.TRANSITION = false;
map.tileAnimation = true;
log = 0;
tile.onImageLoad();
t.eq(tile.imgDiv.style.visibility, 'inherit',
'[c] onImageLoad makes the image visible');
t.eq(tile.imgDiv.style.opacity, '0.5',
'[c] onImageLoad sets the expected opacity for the image');
t.eq(log, 1,
'[c] onImageLoad does trigger loadend');
t.eq(firstObserverName(), undefined,
'[c] onImageLoad does not register a transitionend observer');
OpenLayers.Event.stopObservingElement(tile.imgDiv);
map.destroy();
OpenLayers.TRANSITION = T;
OpenLayers.TRANSITION_END = TE;
}
</script>
</head>