[Commits] r1299 - in core/trunk/geoext: examples lib/GeoExt/widgets tests/lib/GeoExt/widgets
commits at geoext.org
commits at geoext.org
Fri Jul 31 11:50:03 CEST 2009
Author: elemoine
Date: 2009-07-31 11:50:03 +0200 (Fri, 31 Jul 2009)
New Revision: 1299
Modified:
core/trunk/geoext/examples/layeropacityslider.html
core/trunk/geoext/examples/layeropacityslider.js
core/trunk/geoext/lib/GeoExt/widgets/LayerOpacitySlider.js
core/trunk/geoext/tests/lib/GeoExt/widgets/LayerOpacitySlider.html
Log:
introduce options "changeVisibility" and "complementaryLayer" to the layer opacity slider. When "changeVisibility" is true the slider makes the layer invisible when the min value is reached. When a complementary layer is passed in the config using the "complementaryLayer" property the slider makes this layer invisible when the max value is reached. r=ahocevar (closes #104)
Modified: core/trunk/geoext/examples/layeropacityslider.html
===================================================================
--- core/trunk/geoext/examples/layeropacityslider.html 2009-07-29 17:50:35 UTC (rev 1298)
+++ core/trunk/geoext/examples/layeropacityslider.html 2009-07-31 09:50:03 UTC (rev 1299)
@@ -7,6 +7,11 @@
<link rel="stylesheet" type="text/css" href="http://extjs.com/deploy/dev/examples/shared/examples.css"></link>
<script src="http://openlayers.org/api/2.8/OpenLayers.js"></script>
<script type="text/javascript" src="../lib/GeoExt.js"></script>
+ <style type="text/css">
+ .x-tree-node-leaf .gx-tree-layer-icon {
+ width: 0px;
+ }
+ </style>
<script type="text/javascript" src="layeropacityslider.js"></script>
</head>
@@ -18,14 +23,22 @@
LayerOpacitySliderTip, which will show the opacity value while dragging
the slider (the content is configurable).<p>
- <p>In this example, the slider below the map is in aggressive mode: the
- opacity is changed as soon as the slider is moved. The slider into the
- map is not aggressive: the opacity is changed when the slider is
+ <p>In this example, the slider in below the map is in aggressive mode: the
+ opacity is changed as soon as the slider is moved. The slider inside
+ Map 1 is not aggressive: the opacity is changed when the slider is
released.</p>
+ <p>In Map 2 we have a fading effect between two layers. The slider is configured
+ with changeVisibility:true and a complementaryLayer. This avoids downloading images
+ when layer opacity is 0 or when complementaryLayer is fully covered by layer.
+ The effect on layer visibility is shown in the tree (checkboxes).</p>
+
<p>The js is not minified so it is readable. See <a
href="layeropacityslider.js">layeropacityslider.js</a>.</p>
- <div id="map-container"></div>
+ <div id="map1-container" style="float:left"></div>
+ <div id="map2-container" style="float:right"></div>
+ <div id="tree" style="float:right"></div>
+ <div id="slider" style="clear:both"></div>
</body>
</html>
Modified: core/trunk/geoext/examples/layeropacityslider.js
===================================================================
--- core/trunk/geoext/examples/layeropacityslider.js 2009-07-29 17:50:35 UTC (rev 1298)
+++ core/trunk/geoext/examples/layeropacityslider.js 2009-07-31 09:50:03 UTC (rev 1299)
@@ -6,7 +6,7 @@
* of the license.
*/
-var panel, wms, slider;
+var panel1, panel2, wms, slider;
Ext.onReady(function() {
@@ -17,9 +17,9 @@
);
// create a map panel with an embedded slider
- panel = new GeoExt.MapPanel({
- title: "Map",
- renderTo: "map-container",
+ panel1 = new GeoExt.MapPanel({
+ title: "Map 1",
+ renderTo: "map1-container",
height: 300,
width: 400,
map: {
@@ -37,7 +37,6 @@
plugins: new GeoExt.LayerOpacitySliderTip()
}]
});
-
// create a separate slider bound to the map but displayed elsewhere
slider = new GeoExt.LayerOpacitySlider({
layer: wms,
@@ -45,6 +44,47 @@
width: 200,
isFormField: true,
fieldLabel: "opacity",
- renderTo: document.body
+ renderTo: "slider"
});
+
+ var clone = wms.clone();
+ var wms2 = new OpenLayers.Layer.WMS(
+ "OpenLayers WMS",
+ "http://labs.metacarta.com/wms/vmap0",
+ {layers: 'basic'}
+ );
+ panel2 = new GeoExt.MapPanel({
+ title: "Map 2",
+ renderTo: "map2-container",
+ height: 300,
+ width: 400,
+ map: {
+ controls: [new OpenLayers.Control.Navigation()]
+ },
+ layers: [wms2, clone],
+ extent: [-5, 35, 15, 55],
+ items: [{
+ xtype: "gx_opacityslider",
+ layer: clone,
+ complementaryLayer: wms2,
+ changeVisibility: true,
+ aggressive: true,
+ vertical: true,
+ height: 120,
+ x: 10,
+ y: 10,
+ plugins: new GeoExt.LayerOpacitySliderTip()
+ }]
+ });
+
+ var tree = new Ext.tree.TreePanel({
+ width: 145,
+ height: 300,
+ renderTo: "tree",
+ root: new GeoExt.tree.LayerContainer({
+ layerStore: panel2.layers,
+ expanded: true
+ })
+ });
+
});
Modified: core/trunk/geoext/lib/GeoExt/widgets/LayerOpacitySlider.js
===================================================================
--- core/trunk/geoext/lib/GeoExt/widgets/LayerOpacitySlider.js 2009-07-29 17:50:35 UTC (rev 1298)
+++ core/trunk/geoext/lib/GeoExt/widgets/LayerOpacitySlider.js 2009-07-31 09:50:03 UTC (rev 1299)
@@ -65,9 +65,24 @@
/** api: config[layer]
* ``OpenLayers.Layer`` or :class:`GeoExt.data.LayerRecord`
+ * The layer this slider changes the opacity of. (required)
*/
+ /** private: property[layer]
+ * ``OpenLayers.Layer``
+ */
layer: null,
+ /** api: config[complementaryLayer]
+ * ``OpenLayers.Layer`` or :class:`GeoExt.data.LayerRecord`
+ * If provided, a layer that will be made invisible (its visibility is
+ * set to false) when the slider value is set to its max value. If this
+ * slider is used to fade visibility between to layers, setting
+ * ``complementaryLayer`` and ``changeVisibility`` will make sure that
+ * only visible tiles are loaded when the slider is set to its min or max
+ * value. (optional)
+ */
+ complementaryLayer: null,
+
/** api: config[delay]
* ``Number`` Time in milliseconds before setting the opacity value to the
* layer. If the value change again within that time, the original value
@@ -75,6 +90,14 @@
*/
delay: 5,
+ /** api: config[changeVisibilityDelay]
+ * ``Number`` Time in milliseconds before changing the layer's visibility.
+ * If the value changes again within that time, the layer's visibility
+ * change does not occur. Only applicable if changeVisibility is true.
+ * Defaults to 5.
+ */
+ changeVisibilityDelay: 5,
+
/** api: config[aggressive]
* ``Boolean``
* If set to true, the opacity is changed as soon as the thumb is moved.
@@ -82,17 +105,27 @@
*/
aggressive: false,
- /** private: property[minValue]
- * ``Number``
- * The minimum slider value, layer is fully transparent
+ /** api: config[changeVisibility]
+ * ``Boolean``
+ * If set to true, the layer's visibility is handled by the
+ * slider, the slider makes the layer invisible when its
+ * value is changed to the min value, and makes the layer
+ * visible again when its value goes from the min value
+ * to some other value. The layer passed to the constructor
+ * must be visible, as its visibility is fully handled by
+ * the slider. Defaults to false.
*/
- minValue: 0,
+ changeVisibility: false,
- /** private: property[maxValue]
+ /** api: config[value]
* ``Number``
- * The maximum slider value, layer is fully opaque.
+ * The value to initialize the slider with. This value is
+ * taken into account only if the layer's opacity is null.
+ * If the layer's opacity is null and this value is not
+ * defined in the config object then the slider initializes
+ * it to the max value.
*/
- maxValue: 100,
+ value: null,
/** private: method[constructor]
* Construct the component.
@@ -104,7 +137,17 @@
} else if (config.layer instanceof GeoExt.data.LayerRecord) {
this.layer = config.layer.get('layer');
}
+
+ if (config.complementaryLayer instanceof OpenLayers.Layer) {
+ this.complementaryLayer = config.complementaryLayer;
+ } else if (config.complementaryLayer instanceof
+ GeoExt.data.LayerRecord) {
+ this.complementaryLayer =
+ config.complementaryLayer.get('layer');
+ }
+
delete config.layer;
+ delete config.complementaryLayer;
}
GeoExt.LayerOpacitySlider.superclass.constructor.call(this, config);
},
@@ -115,35 +158,93 @@
initComponent: function() {
// set the slider initial value
if (this.layer && this.layer.opacity !== null) {
- this.value = parseInt(this.layer.opacity * 100);
- } else {
- // assume that the layer has no opacity
- this.value = 100;
+ this.value = parseInt(
+ this.layer.opacity * (this.maxValue - this.minValue)
+ );
+ } else if (this.value == null) {
+ this.value = this.maxValue;
}
GeoExt.LayerOpacitySlider.superclass.initComponent.call(this);
+ if (this.changeVisibility && this.layer &&
+ (this.layer.opacity == 0 || this.value == this.minValue)) {
+ this.layer.setVisibility(false);
+ }
+
+ if (this.complementaryLayer &&
+ ((this.layer && this.layer.opacity == 1) ||
+ (this.value == this.maxValue))) {
+ this.complementaryLayer.setVisibility(false);
+ }
+
if (this.aggressive === true) {
- this.on('change', this.opacityChanged, this, {
+ this.on('change', this.changeLayerOpacity, this, {
buffer: this.delay
});
} else {
- this.on('changecomplete', this.opacityChanged, this);
+ this.on('changecomplete', this.changeLayerOpacity, this);
}
+
+ if (this.changeVisibility === true) {
+ this.on('change', this.changeLayerVisibility, this, {
+ buffer: this.changeVisibilityDelay
+ });
+ }
+
+ if (this.complementaryLayer) {
+ this.on('change', this.changeComplementaryLayerVisibility, this, {
+ buffer: this.changeVisibilityDelay
+ });
+ }
},
- /** private: method[opacityChanged]
+ /** private: method[changeLayerOpacity]
* :param slider: :class:`GeoExt.LayerOpacitySlider`
* :param value: ``Number`` The slider value
*
* Updates the ``OpenLayers.Layer`` opacity value.
*/
- opacityChanged: function(slider, value) {
+ changeLayerOpacity: function(slider, value) {
if (this.layer) {
this.layer.setOpacity(value / 100.0);
}
},
+ /** private: method[changeLayerVisibility]
+ * :param slider: :class:`GeoExt.LayerOpacitySlider`
+ * :param value: ``Number`` The slider value
+ *
+ * Updates the ``OpenLayers.Layer`` visibility.
+ */
+ changeLayerVisibility: function(slider, value) {
+ var currentVisibility = this.layer.getVisibility();
+ if (value == this.minValue &&
+ currentVisibility === true) {
+ this.layer.setVisibility(false);
+ } else if (value > this.minValue &&
+ currentVisibility == false) {
+ this.layer.setVisibility(true);
+ }
+ },
+
+ /** private: method[changeComplementaryLayerVisibility]
+ * :param slider: :class:`GeoExt.LayerOpacitySlider`
+ * :param value: ``Number`` The slider value
+ *
+ * Updates the complementary ``OpenLayers.Layer`` visibility.
+ */
+ changeComplementaryLayerVisibility: function(slider, value) {
+ var currentVisibility = this.complementaryLayer.getVisibility();
+ if (value == this.maxValue &&
+ currentVisibility === true) {
+ this.complementaryLayer.setVisibility(false);
+ } else if (value < this.maxValue &&
+ currentVisibility == false) {
+ this.complementaryLayer.setVisibility(true);
+ }
+ },
+
/** private: method[addToMapPanel]
* :param panel: :class:`GeoExt.MapPanel`
*
Modified: core/trunk/geoext/tests/lib/GeoExt/widgets/LayerOpacitySlider.html
===================================================================
--- core/trunk/geoext/tests/lib/GeoExt/widgets/LayerOpacitySlider.html 2009-07-29 17:50:35 UTC (rev 1298)
+++ core/trunk/geoext/tests/lib/GeoExt/widgets/LayerOpacitySlider.html 2009-07-31 09:50:03 UTC (rev 1299)
@@ -9,7 +9,7 @@
<script type="text/javascript">
function test_constructor(t) {
- t.plan(2);
+ t.plan(8);
var record, store, slider;
var layer = new OpenLayers.Layer("a");
@@ -23,13 +23,138 @@
t.eq(slider.layer.id, record.id, "layer parameter is a GeoExt.data.LayerRecord");
slider.destroy();
- var slider = new GeoExt.LayerOpacitySlider({
+ slider = new GeoExt.LayerOpacitySlider({
layer: layer
});
t.eq(layer.id, slider.layer.id, "layer parameter is a OpenLayers.Layer.WMS");
slider.destroy();
+
+ slider = new GeoExt.LayerOpacitySlider({
+ layer: layer
+ });
+ t.eq(slider.value, 100,
+ "ctor sets value to max value if layer opacity is " +
+ "null and value isn't defined in config");
+
+ slider = new GeoExt.LayerOpacitySlider({
+ layer: layer,
+ changeVisibility: true
+ });
+ t.eq(slider.changeVisibility, true,
+ "ctor sets changeVisibility to true in instance");
+ slider.destroy();
+
+ layer.setOpacity(0.0);
+ slider = new GeoExt.LayerOpacitySlider({
+ layer: layer,
+ changeVisibility: true
+ });
+ t.eq(layer.getVisibility(), false,
+ "ctor makes layer invisible if layer opacity is 0");
+ layer.setVisibility(true);
+ slider.destroy();
+
+ layer.setOpacity(0.5);
+ slider = new GeoExt.LayerOpacitySlider({
+ layer: layer,
+ changeVisibility: true
+ });
+ t.eq(layer.getVisibility(), true,
+ "ctor does not change layer visibility if layer opacity is non 0");
+ slider.destroy();
+
+ layer.opacity = null;
+ slider = new GeoExt.LayerOpacitySlider({
+ layer: layer,
+ value: 0,
+ changeVisibility: true
+ });
+ t.eq(layer.getVisibility(), false,
+ "ctor makes layer invisible if layer opacity is " +
+ "null and value is min value");
+ layer.setVisibility(true);
+ slider.destroy();
+
+ layer.opacity = null;
+ slider = new GeoExt.LayerOpacitySlider({
+ layer: layer,
+ value: 0.5,
+ changeVisibility: true
+ });
+ t.eq(layer.getVisibility(), true,
+ "ctor does not change layer visibility if layer " +
+ "opacity is null and value is not min value");
+ layer.setVisibility(true);
+ slider.destroy();
}
+ function test_constructor_complementary(t) {
+ t.plan(5);
+
+ var layer1, layer2, record1, record2, slider;
+
+ var layer1 = new OpenLayers.Layer("1");
+ var layer2 = new OpenLayers.Layer("2");
+
+ record1 = new (GeoExt.data.LayerRecord.create())(
+ {layer: layer1, title: layer1.name}, layer1.id
+ );
+ record2 = new (GeoExt.data.LayerRecord.create())(
+ {layer: layer2, title: layer2.name}, layer2.id
+ );
+
+ slider = new GeoExt.LayerOpacitySlider({
+ layer: layer1,
+ complementaryLayer: layer2
+ });
+ t.ok(slider.complementaryLayer == layer2,
+ "ctor correctly sets complementary layer in " +
+ "the instance [layer]");
+ slider.destroy();
+
+ slider = new GeoExt.LayerOpacitySlider({
+ layer: record1,
+ complementaryLayer: record2
+ });
+ t.ok(slider.complementaryLayer == layer2,
+ "ctor correctly sets complementary layer in " +
+ "the instance [record]");
+ slider.destroy();
+
+ layer1.setOpacity(1);
+ slider = new GeoExt.LayerOpacitySlider({
+ layer: layer1,
+ complementaryLayer: layer2
+ });
+ t.eq(layer2.getVisibility(), false,
+ "ctor makes complementary layer invisible if the " +
+ "main layer opacity is 1");
+ layer2.setVisibility(true);
+ slider.destroy();
+
+ layer1.setOpacity(0.5);
+ slider = new GeoExt.LayerOpacitySlider({
+ layer: layer1,
+ complementaryLayer: layer2
+ });
+ t.eq(layer2.getVisibility(), true,
+ "ctor does not change complementary layer visibility "+
+ "if the main layer opacity is not 1");
+ slider.destroy();
+
+ layer1.opacity = null;
+ slider = new GeoExt.LayerOpacitySlider({
+ layer: layer1,
+ complementaryLayer: layer2,
+ value: 100
+ });
+ t.eq(layer2.getVisibility(), false,
+ "ctor makes complementary layer invisible if the " +
+ "main layer opacity is null but the slider " +
+ "value is set to max value in the config");
+ slider.destroy();
+ }
+
function test_initalOpacity(t) {
t.plan(3);
@@ -85,6 +210,79 @@
slider1.destroy();
slider2.destroy();
}
+
+ function test_visibility(t) {
+ t.plan(3);
+
+ var slider, layer;
+
+ layer = new OpenLayers.Layer("a");
+
+ slider = new GeoExt.LayerOpacitySlider({
+ renderTo: document.body,
+ layer: layer,
+ changeVisibility: true,
+ changeVisibilityDelay: 0
+ });
+
+ slider.setValue(slider.minValue);
+ t.eq(layer.getVisibility(), false,
+ "setting slider value to min value makes the " +
+ "layer invisible");
+
+ slider.setValue(slider.minValue + 1);
+ t.eq(layer.getVisibility(), true,
+ "setting slider value to some value different " +
+ "than min value makes the layer visible again");
+
+ slider.setValue(slider.minValue + 2);
+ t.eq(layer.getVisibility(), true,
+ "setting slider value to some other value different " +
+ "than min value does not make the layer invisible");
+
+ slider.destroy();
+ }
+
+ function test_visibility_complementary_layer(t) {
+ t.plan(4);
+
+ var layer1, layer2, slider;
+
+ var layer1 = new OpenLayers.Layer("1");
+ var layer2 = new OpenLayers.Layer("2");
+
+ slider = new GeoExt.LayerOpacitySlider({
+ renderTo: document.body,
+ layer: layer1,
+ complementaryLayer: layer2,
+ changeVisibilityDelay: 0
+ });
+
+ slider.value = 99;
+ slider.setValue(slider.maxValue);
+ t.eq(layer2.getVisibility(), false,
+ "setting slider value to max value makes " +
+ "complementary layer invisible");
+
+ slider.setValue(slider.maxValue - 1);
+ t.eq(layer2.getVisibility(), true,
+ "setting slider value to some value different " +
+ "than max value makes the complementary layer " +
+ "visible again");
+
+ slider.setValue(slider.maxValue - 2);
+ t.eq(layer2.getVisibility(), true,
+ "setting slider value to some other value different " +
+ "than max value does not make the complementary layer " +
+ "invisible");
+
+ slider.setValue(slider.minValue);
+ t.eq(layer2.getVisibility(), true,
+ "setting slider value to min value does not make " +
+ "the complementary layer invisible");
+
+ slider.destroy();
+ }
</script>
<body>
</body>
More information about the Commits
mailing list