From 86cd9c7bf73e048a9f010afc08e0ab0457154a28 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=89ric=20Lemoine?= Date: Sat, 31 Mar 2012 21:22:36 +0200 Subject: [PATCH 1/9] add class to Layer.Grid layer div --- lib/OpenLayers/Layer/Grid.js | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/lib/OpenLayers/Layer/Grid.js b/lib/OpenLayers/Layer/Grid.js index 3dc3f057f1..7d9ffd0d39 100644 --- a/lib/OpenLayers/Layer/Grid.js +++ b/lib/OpenLayers/Layer/Grid.js @@ -188,6 +188,14 @@ OpenLayers.Layer.Grid = OpenLayers.Class(OpenLayers.Layer.HTTPRequest, { */ removeBackBufferDelay: 2500, + /** + * Property: className + * {String} Name of the class added to the layer div. Default is + * "olLayerGridSingleTile" for layers, and + * "olLayerGridTile" for non- layers. + */ + className: null, + /** * Register a listener for a particular event with the following syntax: * (code) @@ -233,6 +241,11 @@ OpenLayers.Layer.Grid = OpenLayers.Class(OpenLayers.Layer.HTTPRequest, { this.grid = []; this.tileQueue = []; + if (this.className === null) { + this.className = this.singleTile ? 'olLayerGridSingleTile' : + 'olLayerGridTile'; + } + if (!OpenLayers.Animation.isNative) { this.deferMoveGriddedTiles = OpenLayers.Function.bind(function() { this.moveGriddedTiles(true); @@ -241,6 +254,17 @@ OpenLayers.Layer.Grid = OpenLayers.Class(OpenLayers.Layer.HTTPRequest, { } }, + /** + * Method: setMap + * + * Parameters: + * map - {} The map. + */ + setMap: function(map) { + OpenLayers.Layer.HTTPRequest.prototype.setMap.call(this, map); + OpenLayers.Element.addClass(this.div, this.className); + }, + /** * Method: removeMap * Called when the layer is removed from the map. From 1e5f83593c272f1f5a9755351c54997ed8990a51 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=89ric=20Lemoine?= Date: Sat, 31 Mar 2012 21:23:21 +0200 Subject: [PATCH 2/9] removeBackBufferDelay defaults to 0 for singleTile layers --- lib/OpenLayers/Layer/Grid.js | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/lib/OpenLayers/Layer/Grid.js b/lib/OpenLayers/Layer/Grid.js index 7d9ffd0d39..fda975b16e 100644 --- a/lib/OpenLayers/Layer/Grid.js +++ b/lib/OpenLayers/Layer/Grid.js @@ -184,9 +184,10 @@ OpenLayers.Layer.Grid = OpenLayers.Class(OpenLayers.Layer.HTTPRequest, { * APIProperty: removeBackBufferDelay * {Number} Delay for removing the backbuffer when all tiles have finished * loading. Can be set to 0 when no css opacity transitions for the - * olTileImage class are used. Default is 2500. + * olTileImage class are used. Default is 0 for layers, + * 2500 for tiled layers. */ - removeBackBufferDelay: 2500, + removeBackBufferDelay: null, /** * Property: className @@ -240,6 +241,10 @@ OpenLayers.Layer.Grid = OpenLayers.Class(OpenLayers.Layer.HTTPRequest, { arguments); this.grid = []; this.tileQueue = []; + + if (this.removeBackBufferDelay === null) { + this.removeBackBufferDelay = this.singleTile ? 0 : 2500; + } if (this.className === null) { this.className = this.singleTile ? 'olLayerGridSingleTile' : From 5b40ffe474ac8c4b92085f3047c237a2431020b0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=89ric=20Lemoine?= Date: Sat, 31 Mar 2012 21:24:03 +0200 Subject: [PATCH 3/9] change CSS accessor for tile transition --- examples/style.mobile.css | 2 +- theme/default/style.css | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/examples/style.mobile.css b/examples/style.mobile.css index 4d4b4703ab..1b7244d420 100644 --- a/examples/style.mobile.css +++ b/examples/style.mobile.css @@ -43,7 +43,7 @@ div.olControlZoom a:hover { background: rgba(0, 60, 136, 0.5); } } -.olTileImage { +.olLayerGridTile .olTileImage { -webkit-transition: opacity 0.2s linear; -moz-transition: opacity 0.2s linear; -o-transition: opacity 0.2s linear; diff --git a/theme/default/style.css b/theme/default/style.css index 090be08b5e..16c4a9fa6f 100644 --- a/theme/default/style.css +++ b/theme/default/style.css @@ -476,7 +476,7 @@ a.olControlZoomOut { * Animations */ -.olTileImage { +.olLayerGridTile .olTileImage { -webkit-transition: opacity 0.2s linear; -moz-transition: opacity 0.2s linear; -o-transition: opacity 0.2s linear; From 8f20ff8ca056a63552f4631cb55bc1bf961f38ec Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=89ric=20Lemoine?= Date: Sat, 31 Mar 2012 21:24:18 +0200 Subject: [PATCH 4/9] update 2.12 release notes --- notes/2.12.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/notes/2.12.md b/notes/2.12.md index f4c1f0763d..59e0878f82 100644 --- a/notes/2.12.md +++ b/notes/2.12.md @@ -63,7 +63,7 @@ Corresponding issues/pull requests: The displaying of tiles can now be animated, using CSS3 transitions. Transitions operate on the `opacity` property. Here's the CSS rule defined in OpenLayers' default theme: - .olTileImage { + .olLayerGridTile .olTileImage { -webkit-transition: opacity 0.2s linear; -moz-transition: opacity 0.2s linear; -o-transition: opacity 0.2s linear; @@ -72,7 +72,7 @@ The displaying of tiles can now be animated, using CSS3 transitions. Transitions People can override this rule to use other transition settings. To remove tile animation entirely use: - .olTileImage { + .olLayerGridTile .olTileImage { -webkit-transition: none; -moz-transition: none; -o-transition: all 0 none; From d252a6156a0c9eebdb8f2b9d1cb1ca0006037709 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=89ric=20Lemoine?= Date: Sat, 31 Mar 2012 21:24:45 +0200 Subject: [PATCH 5/9] add tests for className and removeBackBufferDelay default values --- tests/Layer/Grid.html | 32 ++++++++++++++++++++++++++++++-- 1 file changed, 30 insertions(+), 2 deletions(-) diff --git a/tests/Layer/Grid.html b/tests/Layer/Grid.html index dd716fa438..0aa279500c 100644 --- a/tests/Layer/Grid.html +++ b/tests/Layer/Grid.html @@ -24,8 +24,8 @@ */ - function test_Layer_Grid_constructor (t) { - t.plan( 6 ); + function test_constructor (t) { + t.plan( 8 ); layer = new OpenLayers.Layer.Grid(name, url, params, null); t.ok( layer instanceof OpenLayers.Layer.Grid, "returns OpenLayers.Layer.Grid object" ); @@ -33,6 +33,8 @@ t.eq( layer.ratio, 1.5, "ratio default is 1.5"); t.eq( layer.numLoadingTiles, 0, "numLoadingTiles starts at 0"); t.ok( layer.tileClass === OpenLayers.Tile.Image, "tileClass default is OpenLayers.Tile.Image"); + t.eq( layer.className, 'olLayerGridTile', "className default is olLayerGridTile"); + t.eq( layer.removeBackBufferDelay, 2500, "removeBackBufferDelay default is 2500"); var obj = {}; var func = function() {}; @@ -41,6 +43,32 @@ t.ok( layer.events.listeners['tileloaded'].length == 1, "one listener for tileloaded after register"); } + function test_constructor_singleTile(t) { + t.plan(2); + layer = new OpenLayers.Layer.Grid(name, url, params, {singleTile: true}); + t.eq( layer.className, 'olLayerGridSingleTile', "className default is olLayerGridSingleTile"); + t.eq( layer.removeBackBufferDelay, 0, "removeBackBufferDelay default is 0"); + } + + function test_setMap(t) { + t.plan(1); + var map = new OpenLayers.Map('map'); + layer = new OpenLayers.Layer.Grid(name, url, params, null); + map.addLayer(layer); + t.ok(OpenLayers.Element.hasClass(layer.div, "olLayerGridTile"), + "olLayerGridTile class assigned to layer div"); + map.destroy(); + } + + function test_setMap_singleTile(t) { + t.plan(1); + var map = new OpenLayers.Map('map'); + layer = new OpenLayers.Layer.Grid(name, url, params, {singleTile: true}); + map.addLayer(layer); + t.ok(OpenLayers.Element.hasClass(layer.div, "olLayerGridSingleTile"), + "olLayerGridSingleTile class assigned to layer div"); + map.destroy(); + } function test_Layer_Grid_inittiles (t) { t.plan( 2 ); From 8c6466bf2ae55f741af4d467dd32af89a5d9d7c1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=89ric=20Lemoine?= Date: Sat, 31 Mar 2012 21:32:49 +0200 Subject: [PATCH 6/9] move transitionEffect to Layer.Grid.prototype, and discourage the use of transitionEffect:"resize" on non-opaque layers --- lib/OpenLayers/Layer.js | 14 -------------- lib/OpenLayers/Layer/Grid.js | 16 ++++++++++++++++ 2 files changed, 16 insertions(+), 14 deletions(-) diff --git a/lib/OpenLayers/Layer.js b/lib/OpenLayers/Layer.js index 1cc11a419d..05747f2cbf 100644 --- a/lib/OpenLayers/Layer.js +++ b/lib/OpenLayers/Layer.js @@ -320,20 +320,6 @@ OpenLayers.Layer = OpenLayers.Class({ */ wrapDateLine: false, - /** - * APIProperty: transitionEffect - * {String} The transition effect to use when the map is panned or - * zoomed. - * - * There are currently two supported values: - * - *null* No transition effect (the default). - * - *resize* Existing tiles are resized on zoom to provide a visual - * effect of the zoom having taken place immediately. As the - * new tiles become available, they are drawn over top of the - * resized tiles. - */ - transitionEffect: null, - /** * Property: metadata * {Object} This object can be used to store additional information on a diff --git a/lib/OpenLayers/Layer/Grid.js b/lib/OpenLayers/Layer/Grid.js index fda975b16e..2911ddf98a 100644 --- a/lib/OpenLayers/Layer/Grid.js +++ b/lib/OpenLayers/Layer/Grid.js @@ -91,6 +91,22 @@ OpenLayers.Layer.Grid = OpenLayers.Class(OpenLayers.Layer.HTTPRequest, { */ buffer: 0, + /** + * APIProperty: transitionEffect + * {String} The transition effect to use when the map is zoomed. + * + * Two posible values: + * - *null* No transition effect (the default). + * - *resize* Existing tiles are resized on zoom to provide a visual + * effect of the zoom having taken place immediately. As the + * new tiles become available, they are drawn over top of the + * resized tiles. + * + * Using "resize" on non-opaque layers can cause undesired visual + * effects. This is therefore discouraged. + */ + transitionEffect: null, + /** * APIProperty: numLoadingTiles * {Integer} How many tiles are still loading? From d8473f9249d6cd3ed787931af66f6389ed878a42 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=89ric=20Lemoine?= Date: Mon, 2 Apr 2012 17:57:37 +0200 Subject: [PATCH 7/9] make Layer.Grid.prototype.className an API property --- lib/OpenLayers/Layer/Grid.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/OpenLayers/Layer/Grid.js b/lib/OpenLayers/Layer/Grid.js index 2911ddf98a..683b7f0fe9 100644 --- a/lib/OpenLayers/Layer/Grid.js +++ b/lib/OpenLayers/Layer/Grid.js @@ -206,7 +206,7 @@ OpenLayers.Layer.Grid = OpenLayers.Class(OpenLayers.Layer.HTTPRequest, { removeBackBufferDelay: null, /** - * Property: className + * APIProperty: className * {String} Name of the class added to the layer div. Default is * "olLayerGridSingleTile" for layers, and * "olLayerGridTile" for non- layers. From d650ba20d95e9a6b5c1b27b87c84a9b3bfd328f7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=89ric=20Lemoine?= Date: Mon, 2 Apr 2012 20:59:16 +0200 Subject: [PATCH 8/9] Layer.Grid - better docs for transitionEffect, removeBackBufferDelay, and className --- lib/OpenLayers/Layer/Grid.js | 47 ++++++++++++++++++++++++++++-------- 1 file changed, 37 insertions(+), 10 deletions(-) diff --git a/lib/OpenLayers/Layer/Grid.js b/lib/OpenLayers/Layer/Grid.js index 683b7f0fe9..4e04e4117d 100644 --- a/lib/OpenLayers/Layer/Grid.js +++ b/lib/OpenLayers/Layer/Grid.js @@ -94,13 +94,13 @@ OpenLayers.Layer.Grid = OpenLayers.Class(OpenLayers.Layer.HTTPRequest, { /** * APIProperty: transitionEffect * {String} The transition effect to use when the map is zoomed. - * * Two posible values: - * - *null* No transition effect (the default). - * - *resize* Existing tiles are resized on zoom to provide a visual - * effect of the zoom having taken place immediately. As the - * new tiles become available, they are drawn over top of the - * resized tiles. + * + * null - No transition effect (the default). + * "resize" - Existing tiles are resized on zoom to provide a visual + * effect of the zoom having taken place immediately. As the + * new tiles become available, they are drawn over top of the + * resized tiles. * * Using "resize" on non-opaque layers can cause undesired visual * effects. This is therefore discouraged. @@ -201,15 +201,42 @@ OpenLayers.Layer.Grid = OpenLayers.Class(OpenLayers.Layer.HTTPRequest, { * {Number} Delay for removing the backbuffer when all tiles have finished * loading. Can be set to 0 when no css opacity transitions for the * olTileImage class are used. Default is 0 for layers, - * 2500 for tiled layers. + * 2500 for tiled layers. See for more information on + * tile animation. */ removeBackBufferDelay: null, /** * APIProperty: className - * {String} Name of the class added to the layer div. Default is - * "olLayerGridSingleTile" for layers, and - * "olLayerGridTile" for non- layers. + * {String} Name of the class added to the layer div. If not set in the + * options passed to the constructor then className defaults to + * "olLayerGridSingleTile" for single tile layers (see ), + * and "olLayerGridTile" for non single tile layers. + * + * Note: + * + * The displaying of tiles is not animated by default for single tile + * layers - OpenLayers' default theme (style.css) includes this: + * (code) + * .olLayerGridTile .olTileImage { + * -webkit-transition: opacity 0.2s linear; + * -moz-transition: opacity 0.2s linear; + * -o-transition: opacity 0.2s linear; + * transition: opacity 0.2s linear; + * } + * (end) + * To animate tile displaying for any grid layer the following + * CSS rule can be used: + * (code) + * .olTileImage { + * -webkit-transition: opacity 0.2s linear; + * -moz-transition: opacity 0.2s linear; + * -o-transition: opacity 0.2s linear; + * transition: opacity 0.2s linear; + * } + * (end) + * In that case, to avoid flash effects, + * should not be zero. */ className: null, From 9d23b81dae238a2a3772222b26732aecde6f90eb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=89ric=20Lemoine?= Date: Mon, 2 Apr 2012 21:00:20 +0200 Subject: [PATCH 9/9] update 2.12 notes --- notes/2.12.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/notes/2.12.md b/notes/2.12.md index 59e0878f82..875cdb99c9 100644 --- a/notes/2.12.md +++ b/notes/2.12.md @@ -79,6 +79,8 @@ People can override this rule to use other transition settings. To remove tile a transition: none; } +Note that by default tile animation is not enabled for single tile layers. + Corresponding issues/pull requests: * https://github.com/openlayers/openlayers/pull/127