[Commits] r1274 - in sandbox/camptocamp/geobretagne: examples lib lib/GeoExt/widgets lib/GeoExt/widgets/tips tests/lib/GeoExt/widgets
commits at geoext.org
commits at geoext.org
Fri Jul 17 08:49:00 CEST 2009
Author: fredj
Date: 2009-07-17 08:49:00 +0200 (Fri, 17 Jul 2009)
New Revision: 1274
Modified:
sandbox/camptocamp/geobretagne/examples/layeropacityslider.html
sandbox/camptocamp/geobretagne/examples/layeropacityslider.js
sandbox/camptocamp/geobretagne/lib/GeoExt.js
sandbox/camptocamp/geobretagne/lib/GeoExt/widgets/LayerOpacitySlider.js
sandbox/camptocamp/geobretagne/lib/GeoExt/widgets/tips/LayerOpacitySliderTip.js
sandbox/camptocamp/geobretagne/lib/GeoExt/widgets/tips/SliderTip.js
sandbox/camptocamp/geobretagne/tests/lib/GeoExt/widgets/LayerOpacitySlider.html
Log:
svn merge -r1271:HEAD http://svn.geoext.org/core/trunk/geoext .
Modified: sandbox/camptocamp/geobretagne/examples/layeropacityslider.html
===================================================================
--- sandbox/camptocamp/geobretagne/examples/layeropacityslider.html 2009-07-17 06:16:03 UTC (rev 1273)
+++ sandbox/camptocamp/geobretagne/examples/layeropacityslider.html 2009-07-17 06:49:00 UTC (rev 1274)
@@ -5,18 +5,27 @@
<script type="text/javascript" src="http://extjs.cachefly.net/builds/ext-cdn-771.js"></script>
<link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-2.2.1/resources/css/ext-all.css" />
<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-rc2/OpenLayers.js"></script>
+ <script src="http://openlayers.org/api/2.8/OpenLayers.js"></script>
<script type="text/javascript" src="../lib/GeoExt.js"></script>
<script type="text/javascript" src="layeropacityslider.js"></script>
</head>
<body>
<h1>GeoExt.LayerOpacitySlider</h1>
- <p>The LayerOpacitySlider allows control of a layer opacity using an Ext.Slider.
- It is also possible to add a special tooltip plugin, LayerOpacitySliderTip, which
- will show the opacity value while dragging the slider
- (the content is configurable).<p>
- <p>The js is not minified so it is readable. See <a href="layeropacityslider.js">layeropacityslider.js</a>.</p>
+
+ <p>The LayerOpacitySlider allows control of a layer opacity using an
+ Ext.Slider. It is also possible to add a special tooltip plugin,
+ 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
+ released.</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>
</body>
</html>
Modified: sandbox/camptocamp/geobretagne/examples/layeropacityslider.js
===================================================================
--- sandbox/camptocamp/geobretagne/examples/layeropacityslider.js 2009-07-17 06:16:03 UTC (rev 1273)
+++ sandbox/camptocamp/geobretagne/examples/layeropacityslider.js 2009-07-17 06:49:00 UTC (rev 1274)
@@ -11,10 +11,10 @@
Ext.onReady(function() {
wms = new OpenLayers.Layer.WMS(
- "Global Imagery",
- "http://demo.opengeo.org/geoserver/wms",
- {layers: 'bluemarble'}
- );
+ "Global Imagery",
+ "http://demo.opengeo.org/geoserver/wms",
+ {layers: 'bluemarble'}
+ );
// create a map panel with an embedded slider
panel = new GeoExt.MapPanel({
@@ -41,11 +41,10 @@
// create a separate slider bound to the map but displayed elsewhere
slider = new GeoExt.LayerOpacitySlider({
layer: wms,
+ aggressive: true,
width: 200,
- plugins: new GeoExt.LayerOpacitySliderTip({
- template: "<div>{opacity}%</div>"
- }),
+ isFormField: true,
+ fieldLabel: "opacity",
renderTo: document.body
});
-
});
Modified: sandbox/camptocamp/geobretagne/lib/GeoExt/widgets/LayerOpacitySlider.js
===================================================================
--- sandbox/camptocamp/geobretagne/lib/GeoExt/widgets/LayerOpacitySlider.js 2009-07-17 06:16:03 UTC (rev 1273)
+++ sandbox/camptocamp/geobretagne/lib/GeoExt/widgets/LayerOpacitySlider.js 2009-07-17 06:49:00 UTC (rev 1274)
@@ -30,10 +30,11 @@
*
* .. code-block:: javascript
*
- * var layer = new OpenLayers.Layer.WMS("Global Imagery",
- * "http://demo.opengeo.org/geoserver/wms",
- * {layers: "bluemarble"}
- * );
+ * var layer = new OpenLayers.Layer.WMS(
+ * "Global Imagery",
+ * "http://demo.opengeo.org/geoserver/wms",
+ * {layers: "bluemarble"}
+ * );
* var panel = new GeoExt.MapPanel({
* renderTo: document.body,
* height: 300,
@@ -46,6 +47,7 @@
* items: [{
* xtype: "gx_opacityslider",
* layer: layer,
+ * aggressive: true,
* vertical: true,
* height: 100,
* x: 10,
@@ -66,7 +68,30 @@
*/
layer: 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
+ * is not set. Only applicable if aggressive is true.
+ */
+ delay: 5,
+
+ /** api: config[aggressive]
+ * ``Boolean``
+ * If set to true, the opacity is changed as soon as the thumb is moved.
+ * Otherwise when the thumb is released (default).
+ */
+ aggressive: false,
+
+ /** private: property[minValue]
+ * ``Number``
+ * The minimum slider value, layer is fully transparent
+ */
minValue: 0,
+
+ /** private: property[maxValue]
+ * ``Number``
+ * The maximum slider value, layer is fully opaque.
+ */
maxValue: 100,
/** private: method[constructor]
@@ -78,8 +103,6 @@
this.layer = config.layer;
} else if (config.layer instanceof GeoExt.data.LayerRecord) {
this.layer = config.layer.get('layer');
- } else if (config.layer instanceof GeoExt.tree.LayerNode) {
- this.layer = config.layer.layer;
}
delete config.layer;
}
@@ -91,17 +114,22 @@
*/
initComponent: function() {
// set the slider initial value
- if (this.layer && this.layer.opacity && this.layer.opacity != null) {
+ 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;
}
- // FIXME: listen to layer events (opacitychanged, see: http://trac.openlayers.org/ticket/2112)
GeoExt.LayerOpacitySlider.superclass.initComponent.call(this);
- this.on('change', this.opacityChanged, this);
+ if (this.aggressive === true) {
+ this.on('change', this.opacityChanged, this, {
+ buffer: this.delay
+ });
+ } else {
+ this.on('changecomplete', this.opacityChanged, this);
+ }
},
/** private: method[opacityChanged]
@@ -138,7 +166,7 @@
});
},
- /** private: method[removeFromMap]
+ /** private: method[removeFromMapPanel]
* :param panel: :class:`GeoExt.MapPanel`
*
* Called by a MapPanel if this component is one of the items in the panel.
@@ -160,62 +188,5 @@
}
});
+/** api: xtype = gx_opacityslider */
Ext.reg('gx_opacityslider', GeoExt.LayerOpacitySlider);
-/* Copyright (C) 2008-2009 The Open Source Geospatial Foundation
- * Published under the BSD license.
- * See http://geoext.org/svn/geoext/core/trunk/license.txt for the full text
- * of the license.
- *
- * pending approval */
-
-Ext.namespace("GeoExt");
-
-GeoExt.LayerOpacitySlider = Ext.extend(Ext.Slider, {
-
- /** api: config[layer]
- * ``OpenLayers.Layer`` or ``GeoExt.data.LayerRecord`` or ``GeoExt.tree.LayerNode``
- */
- layer: null,
-
- minValue: 0,
- maxValue: 100,
-
- /** private */
- constructor: function(config) {
- if (config.layer) {
- if (config.layer instanceof OpenLayers.Layer) {
- this.layer = config.layer;
- } else if (config.layer instanceof GeoExt.data.LayerRecord) {
- this.layer = config.layer.get('layer');
- } else if (config.layer instanceof GeoExt.tree.LayerNode) {
- this.layer = config.layer.layer;
- }
- delete config.layer;
- }
- GeoExt.LayerOpacitySlider.superclass.constructor.call(this, config);
- },
-
- initComponent: function() {
- // set the slider initial value
- if (this.layer && this.layer.opacity && this.layer.opacity != null) {
- this.value = parseInt(this.layer.opacity * 100);
- } else {
- // assume that the layer has no opacity
- this.value = 100;
- }
- // FIXME: listen to layer events (opacitychanged, see: http://trac.openlayers.org/ticket/2112)
-
- GeoExt.LayerOpacitySlider.superclass.initComponent.call(this);
-
- this.on('change', this.opacityChanged, this);
- },
-
- // private
- opacityChanged: function(slider, value) {
- if (this.layer) {
- this.layer.setOpacity(value / 100.0);
- }
- }
-});
-
-Ext.reg('gx_opacityslider', GeoExt.LayerOpacitySlider);
Modified: sandbox/camptocamp/geobretagne/lib/GeoExt/widgets/tips/LayerOpacitySliderTip.js
===================================================================
--- sandbox/camptocamp/geobretagne/lib/GeoExt/widgets/tips/LayerOpacitySliderTip.js 2009-07-17 06:16:03 UTC (rev 1273)
+++ sandbox/camptocamp/geobretagne/lib/GeoExt/widgets/tips/LayerOpacitySliderTip.js 2009-07-17 06:49:00 UTC (rev 1274)
@@ -29,7 +29,7 @@
* var slider = new GeoExt.LayerOpacitySlider({
* renderTo: document.body,
* width: 200,
- * layer: FIXME,
+ * layer: layer,
* plugins: new GeoExt.LayerOpacitySliderTip({
* template: "Opacity: {opacity}%"
* })
Modified: sandbox/camptocamp/geobretagne/lib/GeoExt/widgets/tips/SliderTip.js
===================================================================
--- sandbox/camptocamp/geobretagne/lib/GeoExt/widgets/tips/SliderTip.js 2009-07-17 06:16:03 UTC (rev 1273)
+++ sandbox/camptocamp/geobretagne/lib/GeoExt/widgets/tips/SliderTip.js 2009-07-17 06:49:00 UTC (rev 1274)
@@ -115,6 +115,7 @@
},
/** api: config[getText]
+ * :param slider: ``Ext.Slider``
* ``Function``
* Function that generates the string value to be displayed in the tip. By
* default, the return from slider.getValue() is displayed.
Modified: sandbox/camptocamp/geobretagne/lib/GeoExt.js
===================================================================
--- sandbox/camptocamp/geobretagne/lib/GeoExt.js 2009-07-17 06:16:03 UTC (rev 1273)
+++ sandbox/camptocamp/geobretagne/lib/GeoExt.js 2009-07-17 06:49:00 UTC (rev 1274)
@@ -2,7 +2,7 @@
* Copyright (c) 2008-2009 The Open Source Geospatial Foundation
*
* Published under the BSD license.
- * See http://geoext.org/svn/geoext/core/trunk/license.txt for the full text
+ * See http://svn.geoext.org/core/trunk/geoext/license.txt for the full text
* of the license.
*/
@@ -78,7 +78,6 @@
"GeoExt/data/CSWRecordsReader.js",
"GeoExt/widgets/Action.js",
"GeoExt/data/ProtocolProxy.js",
- "GeoExt/widgets/LayerOpacitySlider.js",
"GeoExt/widgets/MapPanel.js",
"GeoExt/widgets/Popup.js",
"GeoExt/widgets/form.js",
@@ -92,6 +91,7 @@
"GeoExt/widgets/tree/LayerContainer.js",
"GeoExt/widgets/tree/BaseLayerContainer.js",
"GeoExt/widgets/tree/OverlayLayerContainer.js",
+ "GeoExt/widgets/LayerOpacitySlider.js",
"GeoExt/widgets/LegendImage.js",
"GeoExt/widgets/LegendWMS.js",
"GeoExt/widgets/LegendPanel.js",
Modified: sandbox/camptocamp/geobretagne/tests/lib/GeoExt/widgets/LayerOpacitySlider.html
===================================================================
--- sandbox/camptocamp/geobretagne/tests/lib/GeoExt/widgets/LayerOpacitySlider.html 2009-07-17 06:16:03 UTC (rev 1273)
+++ sandbox/camptocamp/geobretagne/tests/lib/GeoExt/widgets/LayerOpacitySlider.html 2009-07-17 06:49:00 UTC (rev 1274)
@@ -7,61 +7,84 @@
<script type="text/javascript" src="../../../../lib/GeoExt.js"></script>
<script type="text/javascript">
+
function test_constructor(t) {
- t.plan(0);
+ t.plan(2);
+
+ var record, store, slider;
+ var layer = new OpenLayers.Layer("a");
+
+ record = new (GeoExt.data.LayerRecord.create())(
+ {layer: layer, title: layer.name}, layer.id
+ );
+ slider = new GeoExt.LayerOpacitySlider({
+ layer: record
+ });
+ t.eq(slider.layer.id, record.id, "layer parameter is a GeoExt.data.LayerRecord");
+ slider.destroy();
+
+ var slider = new GeoExt.LayerOpacitySlider({
+ layer: layer
+ });
+ t.eq(layer.id, slider.layer.id, "layer parameter is a OpenLayers.Layer.WMS");
+ slider.destroy();
}
function test_initalOpacity(t) {
- t.plan(2);
+ t.plan(3);
var slider = new GeoExt.LayerOpacitySlider({
layer: new OpenLayers.Layer('foo')
});
t.ok(slider.getValue() == 100,
"set the value to 100 if the layer has no opacity");
+ slider.destroy();
slider = new GeoExt.LayerOpacitySlider({
- layer: new OpenLayers.Layer('foo', { opacity: 0.42})
+ layer: new OpenLayers.Layer('foo', { opacity: 0 })
});
+ t.ok(slider.getValue() == 0,
+ "initial layer's opacity sets the slider value");
+ slider.destroy();
+ slider = new GeoExt.LayerOpacitySlider({
+ layer: new OpenLayers.Layer('foo', { opacity: 0.42 })
+ });
t.ok(slider.getValue() == 42,
"initial layer's opacity sets the slider value");
+ slider.destroy();
}
- </script>
- <body>
- </body>
-</html>
-<!DOCTYPE html>
-<html debug="true">
- <head>
- <script type="text/javascript" src="../../../../../openlayers/lib/OpenLayers.js"></script>
- <script type="text/javascript" src="../../../../../ext/adapter/ext/ext-base.js"></script>
- <script type="text/javascript" src="../../../../../ext/ext-all-debug.js"></script>
- <script type="text/javascript" src="../../../../lib/GeoExt.js"></script>
-
- <script type="text/javascript">
- function test_constructor(t) {
- t.plan(0);
- }
-
- function test_initalOpacity(t) {
+ function test_aggressive(t) {
t.plan(2);
- var slider = new GeoExt.LayerOpacitySlider({
- layer: new OpenLayers.Layer('foo')
+ var slider1 = new GeoExt.LayerOpacitySlider({
+ renderTo: document.body,
+ layer: new OpenLayers.Layer('foo'),
+ aggressive: false
});
- t.ok(slider.getValue() == 100,
- "set the value to 100 if the layer has no opacity");
+ slider1.on({
+ changecomplete: function() {
+ t.ok(true, "changecomplete triggered in non-aggressive mode");
+ }
+ });
- slider = new GeoExt.LayerOpacitySlider({
- layer: new OpenLayers.Layer('foo', { opacity: 0.42})
+ var slider2 = new GeoExt.LayerOpacitySlider({
+ renderTo: document.body,
+ layer: new OpenLayers.Layer('foo'),
+ aggressive: true
});
+ slider2.on({
+ change: function() {
+ t.ok(true, "change triggered in aggressive mode");
+ }
+ });
+ slider1.setValue(42, undefined, true);
+ slider2.setValue(42, undefined, true);
- t.ok(slider.getValue() == 42,
- "initial layer's opacity sets the slider value");
+ slider1.destroy();
+ slider2.destroy();
}
-
</script>
<body>
</body>
More information about the Commits
mailing list