[Commits] r2370 - in core/trunk/geoext: examples lib/GeoExt/widgets tests/lib/GeoExt/widgets
commits at geoext.org
commits at geoext.org
Mon Sep 20 22:11:27 CEST 2010
Author: bartvde
Date: 2010-09-20 22:11:27 +0200 (Mon, 20 Sep 2010)
New Revision: 2370
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:
LayerOpacitySlider: make it possible to use transparency instead of opacity, r=ahocevar (closes #313)
Modified: core/trunk/geoext/examples/layeropacityslider.html
===================================================================
--- core/trunk/geoext/examples/layeropacityslider.html 2010-09-20 06:55:37 UTC (rev 2369)
+++ core/trunk/geoext/examples/layeropacityslider.html 2010-09-20 20:11:27 UTC (rev 2370)
@@ -27,7 +27,8 @@
<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>
+ released. Also, the slider below the map is an inverse slider, which means
+ it uses transparency instead of opacity.</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
Modified: core/trunk/geoext/examples/layeropacityslider.js
===================================================================
--- core/trunk/geoext/examples/layeropacityslider.js 2010-09-20 06:55:37 UTC (rev 2369)
+++ core/trunk/geoext/examples/layeropacityslider.js 2010-09-20 20:11:27 UTC (rev 2370)
@@ -40,7 +40,7 @@
height: 120,
x: 10,
y: 10,
- plugins: new GeoExt.LayerOpacitySliderTip()
+ plugins: new GeoExt.LayerOpacitySliderTip({template: '<div>Opacity: {opacity}%</div>'})
}]
});
// create a separate slider bound to the map but displayed elsewhere
@@ -49,8 +49,10 @@
aggressive: true,
width: 200,
isFormField: true,
+ inverse: true,
fieldLabel: "opacity",
- renderTo: "slider"
+ renderTo: "slider",
+ plugins: new GeoExt.LayerOpacitySliderTip({template: '<div>Transparency: {opacity}%</div>'})
});
var clone = wms.clone();
Modified: core/trunk/geoext/lib/GeoExt/widgets/LayerOpacitySlider.js
===================================================================
--- core/trunk/geoext/lib/GeoExt/widgets/LayerOpacitySlider.js 2010-09-20 06:55:37 UTC (rev 2369)
+++ core/trunk/geoext/lib/GeoExt/widgets/LayerOpacitySlider.js 2010-09-20 20:11:27 UTC (rev 2370)
@@ -128,6 +128,16 @@
*/
value: null,
+ /** api: config[inverse]
+ * ``Boolean``
+ * If true, we will work with transparency instead of with opacity.
+ * Defaults to false.
+ */
+ /** private: property[inverse]
+ * ``Boolean``
+ */
+ inverse: false,
+
/** private: method[constructor]
* Construct the component.
*/
@@ -136,6 +146,10 @@
this.layer = this.getLayer(config.layer);
this.bind();
this.complementaryLayer = this.getLayer(config.complementaryLayer);
+ // before we call getOpacityValue inverse should be set
+ if (config.inverse !== undefined) {
+ this.inverse = config.inverse;
+ }
config.value = (config.value !== undefined) ?
config.value : this.getOpacityValue(this.layer);
delete config.layer;
@@ -194,11 +208,16 @@
* Returns the opacity value for the layer.
*/
getOpacityValue: function(layer) {
+ var value;
if (layer && layer.opacity !== null) {
- return parseInt(layer.opacity * (this.maxValue - this.minValue));
+ value = parseInt(layer.opacity * (this.maxValue - this.minValue));
} else {
- return this.maxValue;
+ value = this.maxValue;
}
+ if (this.inverse === true) {
+ value = (this.maxValue - this.minValue) - value;
+ }
+ return value;
},
/** private: method[getLayer]
@@ -224,13 +243,16 @@
GeoExt.LayerOpacitySlider.superclass.initComponent.call(this);
if (this.changeVisibility && this.layer &&
- (this.layer.opacity == 0 || this.value == this.minValue)) {
+ (this.layer.opacity == 0 ||
+ (this.inverse === false && this.value == this.minValue) ||
+ (this.inverse === true && this.value == this.maxValue))) {
this.layer.setVisibility(false);
}
if (this.complementaryLayer &&
((this.layer && this.layer.opacity == 1) ||
- (this.value == this.maxValue))) {
+ (this.inverse === false && this.value == this.maxValue) ||
+ (this.inverse === true && this.value == this.minValue))) {
this.complementaryLayer.setVisibility(false);
}
@@ -264,8 +286,12 @@
*/
changeLayerOpacity: function(slider, value) {
if (this.layer) {
- this.layer.setOpacity(value / 100.0);
+ value = value / (this.maxValue - this.minValue);
+ if (this.inverse === true) {
+ value = 1-value;
}
+ this.layer.setOpacity(value);
+ }
},
/** private: method[changeLayerVisibility]
@@ -276,10 +302,12 @@
*/
changeLayerVisibility: function(slider, value) {
var currentVisibility = this.layer.getVisibility();
- if (value == this.minValue &&
+ if ((this.inverse === false && value == this.minValue) ||
+ (this.inverse === true && value == this.maxValue) &&
currentVisibility === true) {
this.layer.setVisibility(false);
- } else if (value > this.minValue &&
+ } else if ((this.inverse === false && value > this.minValue) ||
+ (this.inverse === true && value < this.maxValue) &&
currentVisibility == false) {
this.layer.setVisibility(true);
}
@@ -293,10 +321,12 @@
*/
changeComplementaryLayerVisibility: function(slider, value) {
var currentVisibility = this.complementaryLayer.getVisibility();
- if (value == this.maxValue &&
+ if ((this.inverse === false && value == this.maxValue) ||
+ (this.inverse === true && value == this.minValue) &&
currentVisibility === true) {
this.complementaryLayer.setVisibility(false);
- } else if (value < this.maxValue &&
+ } else if ((this.inverse === false && value < this.maxValue) ||
+ (this.inverse === true && value > this.minValue) &&
currentVisibility == false) {
this.complementaryLayer.setVisibility(true);
}
Modified: core/trunk/geoext/tests/lib/GeoExt/widgets/LayerOpacitySlider.html
===================================================================
--- core/trunk/geoext/tests/lib/GeoExt/widgets/LayerOpacitySlider.html 2010-09-20 06:55:37 UTC (rev 2369)
+++ core/trunk/geoext/tests/lib/GeoExt/widgets/LayerOpacitySlider.html 2010-09-20 20:11:27 UTC (rev 2370)
@@ -324,6 +324,74 @@
map.destroy();
slider.destroy();
}
+
+ function test_inverse(t) {
+ t.plan(2);
+ var map = new OpenLayers.Map();
+ var layer1 = new OpenLayers.Layer("1");
+ var layer2 = new OpenLayers.Layer("2");
+
+ map.addLayers([layer1, layer2]);
+
+ slider = new GeoExt.LayerOpacitySlider({
+ layer: layer1,
+ inverse: true,
+ renderTo: document.body
+ });
+ slider.setLayer(layer1);
+ layer1.setOpacity(0.9);
+ t.eq(slider.getValue(), 10, "value set correctly from changelayer event when inverse is true");
+ slider.setValue(40, undefined, true);
+ t.eq(layer1.opacity, 0.6, "opacity set correctly through slider move when inverse is true");
+
+ map.destroy();
+ slider.destroy();
+ }
+
+ function test_inverse_visibility(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,
+ inverse: true,
+ changeVisibilityDelay: 0
+ });
+
+ slider.value = 99;
+ slider.setValue(slider.minValue);
+ t.eq(layer2.getVisibility(), false,
+ "setting slider value to min value makes " +
+ "complementary layer invisible");
+
+ slider.setValue(slider.maxValue - 1);
+ t.eq(layer2.getVisibility(), true,
+ "setting slider value to some value different " +
+ "than min 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 min value does not make the complementary layer " +
+ "invisible");
+
+ slider.setValue(slider.maxValue);
+ t.eq(layer2.getVisibility(), true,
+ "setting slider value to max value does not make " +
+ "the complementary layer invisible");
+
+ slider.destroy();
+
+ }
+
</script>
<body>
</body>
More information about the Commits
mailing list