[Commits] r1273 - in core/trunk/geoext: examples lib lib/GeoExt/widgets lib/GeoExt/widgets/tips tests tests/lib/GeoExt/widgets
commits at geoext.org
commits at geoext.org
Fri Jul 17 08:16:04 CEST 2009
Author: fredj
Date: 2009-07-17 08:16:03 +0200 (Fri, 17 Jul 2009)
New Revision: 1273
Added:
core/trunk/geoext/examples/layeropacityslider.html
core/trunk/geoext/examples/layeropacityslider.js
core/trunk/geoext/lib/GeoExt/widgets/LayerOpacitySlider.js
core/trunk/geoext/lib/GeoExt/widgets/tips/LayerOpacitySliderTip.js
core/trunk/geoext/tests/lib/GeoExt/widgets/LayerOpacitySlider.html
Modified:
core/trunk/geoext/lib/GeoExt.js
core/trunk/geoext/tests/list-tests.html
Log:
Add an opacity slider with an optional slider tip, r=elemoine (closes #75)
Added: core/trunk/geoext/examples/layeropacityslider.html
===================================================================
--- core/trunk/geoext/examples/layeropacityslider.html (rev 0)
+++ core/trunk/geoext/examples/layeropacityslider.html 2009-07-17 06:16:03 UTC (rev 1273)
@@ -0,0 +1,31 @@
+<html>
+ <head>
+ <title>GeoExt LayerOpacitySlider</title>
+
+ <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/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>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>
Added: core/trunk/geoext/examples/layeropacityslider.js
===================================================================
--- core/trunk/geoext/examples/layeropacityslider.js (rev 0)
+++ core/trunk/geoext/examples/layeropacityslider.js 2009-07-17 06:16:03 UTC (rev 1273)
@@ -0,0 +1,50 @@
+/**
+ * Copyright (c) 2008-2009 The Open Source Geospatial Foundation
+ *
+ * Published under the BSD license.
+ * See http://svn.geoext.org/core/trunk/geoext/license.txt for the full text
+ * of the license.
+ */
+
+var panel, wms, slider;
+
+Ext.onReady(function() {
+
+ wms = new OpenLayers.Layer.WMS(
+ "Global Imagery",
+ "http://demo.opengeo.org/geoserver/wms",
+ {layers: 'bluemarble'}
+ );
+
+ // create a map panel with an embedded slider
+ panel = new GeoExt.MapPanel({
+ title: "Map",
+ renderTo: "map-container",
+ height: 300,
+ width: 400,
+ map: {
+ controls: [new OpenLayers.Control.Navigation()]
+ },
+ layers: [wms],
+ extent: [-5, 35, 15, 55],
+ items: [{
+ xtype: "gx_opacityslider",
+ layer: wms,
+ vertical: true,
+ height: 120,
+ x: 10,
+ y: 10,
+ plugins: new GeoExt.LayerOpacitySliderTip()
+ }]
+ });
+
+ // create a separate slider bound to the map but displayed elsewhere
+ slider = new GeoExt.LayerOpacitySlider({
+ layer: wms,
+ aggressive: true,
+ width: 200,
+ isFormField: true,
+ fieldLabel: "opacity",
+ renderTo: document.body
+ });
+});
Added: core/trunk/geoext/lib/GeoExt/widgets/LayerOpacitySlider.js
===================================================================
--- core/trunk/geoext/lib/GeoExt/widgets/LayerOpacitySlider.js (rev 0)
+++ core/trunk/geoext/lib/GeoExt/widgets/LayerOpacitySlider.js 2009-07-17 06:16:03 UTC (rev 1273)
@@ -0,0 +1,192 @@
+/* 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.
+ */
+
+/**
+ * @include GeoExt/widgets/tips/LayerOpacitySliderTip.js
+ */
+
+/** api: (define)
+ * module = GeoExt
+ * class = LayerOpacitySlider
+ * base_link = `Ext.Slider <http://extjs.com/deploy/dev/docs/?class=Ext.Slider>`_
+ */
+Ext.namespace("GeoExt");
+
+/** api: example
+ * Sample code to render a slider outside the map viewport:
+ *
+ * .. code-block:: javascript
+ *
+ * var slider = new GeoExt.LayerOpacitySlider({
+ * renderTo: document.body,
+ * width: 200,
+ * layer: layer
+ * });
+ *
+ * Sample code to add a slider to a map panel:
+ *
+ * .. code-block:: javascript
+ *
+ * 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,
+ * width: 400,
+ * map: {
+ * controls: [new OpenLayers.Control.Navigation()]
+ * },
+ * layers: [layer],
+ * extent: [-5, 35, 15, 55],
+ * items: [{
+ * xtype: "gx_opacityslider",
+ * layer: layer,
+ * aggressive: true,
+ * vertical: true,
+ * height: 100,
+ * x: 10,
+ * y: 20
+ * }]
+ * });
+ */
+
+/** api: constructor
+ * .. class:: LayerOpacitySlider(config)
+ *
+ * Create a slider for controlling a layer's opacity.
+ */
+GeoExt.LayerOpacitySlider = Ext.extend(Ext.Slider, {
+
+ /** api: config[layer]
+ * ``OpenLayers.Layer`` or :class:`GeoExt.data.LayerRecord`
+ */
+ 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]
+ * Construct the component.
+ */
+ 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');
+ }
+ delete config.layer;
+ }
+ GeoExt.LayerOpacitySlider.superclass.constructor.call(this, config);
+ },
+
+ /** private: method[initComponent]
+ * Initialize the component.
+ */
+ 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;
+ }
+
+ GeoExt.LayerOpacitySlider.superclass.initComponent.call(this);
+
+ if (this.aggressive === true) {
+ this.on('change', this.opacityChanged, this, {
+ buffer: this.delay
+ });
+ } else {
+ this.on('changecomplete', this.opacityChanged, this);
+ }
+ },
+
+ /** private: method[opacityChanged]
+ * :param slider: :class:`GeoExt.LayerOpacitySlider`
+ * :param value: ``Number`` The slider value
+ *
+ * Updates the ``OpenLayers.Layer`` opacity value.
+ */
+ opacityChanged: function(slider, value) {
+ if (this.layer) {
+ this.layer.setOpacity(value / 100.0);
+ }
+ },
+
+ /** private: method[addToMapPanel]
+ * :param panel: :class:`GeoExt.MapPanel`
+ *
+ * Called by a MapPanel if this component is one of the items in the panel.
+ */
+ addToMapPanel: function(panel) {
+ this.on({
+ render: function() {
+ var el = this.getEl();
+ el.setStyle({
+ position: "absolute",
+ zIndex: panel.map.Z_INDEX_BASE.Control
+ });
+ el.on({
+ mousedown: this.stopMouseEvents,
+ click: this.stopMouseEvents
+ });
+ },
+ scope: this
+ });
+ },
+
+ /** private: method[removeFromMapPanel]
+ * :param panel: :class:`GeoExt.MapPanel`
+ *
+ * Called by a MapPanel if this component is one of the items in the panel.
+ */
+ removeFromMapPanel: function(panel) {
+ var el = this.getEl();
+ el.un({
+ mousedown: this.stopMouseEvents,
+ click: this.stopMouseEvents,
+ scope: this
+ });
+ },
+
+ /** private: method[stopMouseEvents]
+ * :param e: ``Object``
+ */
+ stopMouseEvents: function(e) {
+ e.stopEvent();
+ }
+});
+
+/** api: xtype = gx_opacityslider */
+Ext.reg('gx_opacityslider', GeoExt.LayerOpacitySlider);
Added: core/trunk/geoext/lib/GeoExt/widgets/tips/LayerOpacitySliderTip.js
===================================================================
--- core/trunk/geoext/lib/GeoExt/widgets/tips/LayerOpacitySliderTip.js (rev 0)
+++ core/trunk/geoext/lib/GeoExt/widgets/tips/LayerOpacitySliderTip.js 2009-07-17 06:16:03 UTC (rev 1273)
@@ -0,0 +1,78 @@
+/**
+ * Copyright (c) 2008-2009 The Open Source Geospatial Foundation
+ *
+ * Published under the BSD license.
+ * See http://svn.geoext.org/core/trunk/geoext/license.txt for the full text
+ * of the license.
+ */
+
+/**
+ * @requires GeoExt/widgets/tips/SliderTip.js
+ */
+
+/** api: (extends)
+ * GeoExt/widgets/tips/SliderTip.js
+ */
+
+/** api: (define)
+ * module = GeoExt
+ * class = LayerOpacitySliderTip
+ * base_link = `Ext.Tip <http://extjs.com/deploy/dev/docs/?class=Ext.Tip>`_
+ */
+Ext.namespace("GeoExt");
+
+/** api: example
+ * Sample code to create a slider tip to display scale and resolution:
+ *
+ * .. code-block:: javascript
+ *
+ * var slider = new GeoExt.LayerOpacitySlider({
+ * renderTo: document.body,
+ * width: 200,
+ * layer: layer,
+ * plugins: new GeoExt.LayerOpacitySliderTip({
+ * template: "Opacity: {opacity}%"
+ * })
+ * });
+ */
+
+/** api: constructor
+ * .. class:: LayerOpacitySliderTip(config)
+ *
+ * Create a slider tip displaying :class:`GeoExt.LayerOpacitySlider` values.
+ */
+GeoExt.LayerOpacitySliderTip = Ext.extend(GeoExt.SliderTip, {
+
+ /** api: config[template]
+ * ``String``
+ * Template for the tip. Can be customized using the following keywords in
+ * curly braces:
+ *
+ * * ``opacity`` - the opacity value in percent.
+ */
+ template: '<div>{opacity}%</div>',
+
+ /** private: property[compiledTemplate]
+ * ``Ext.Template``
+ * The template compiled from the ``template`` string on init.
+ */
+ compiledTemplate: null,
+
+ /** private: method[init]
+ * Called to initialize the plugin.
+ */
+ init: function(slider) {
+ this.compiledTemplate = new Ext.Template(this.template);
+ GeoExt.LayerOpacitySliderTip.superclass.init.call(this, slider);
+ },
+
+ /** private: method[getText]
+ * :param slider: ``Ext.Slider`` The slider this tip is attached to.
+ */
+ getText: function(slider) {
+ var data = {
+ opacity: slider.getValue()
+ };
+ return this.compiledTemplate.apply(data);
+ }
+});
Modified: core/trunk/geoext/lib/GeoExt.js
===================================================================
--- core/trunk/geoext/lib/GeoExt.js 2009-07-16 19:02:07 UTC (rev 1272)
+++ core/trunk/geoext/lib/GeoExt.js 2009-07-17 06:16:03 UTC (rev 1273)
@@ -84,11 +84,13 @@
"GeoExt/widgets/form/BasicForm.js",
"GeoExt/widgets/form/FormPanel.js",
"GeoExt/widgets/tips/SliderTip.js",
+ "GeoExt/widgets/tips/LayerOpacitySliderTip.js",
"GeoExt/widgets/tips/ZoomSliderTip.js",
"GeoExt/widgets/tree/LayerNode.js",
"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",
Added: core/trunk/geoext/tests/lib/GeoExt/widgets/LayerOpacitySlider.html
===================================================================
--- core/trunk/geoext/tests/lib/GeoExt/widgets/LayerOpacitySlider.html (rev 0)
+++ core/trunk/geoext/tests/lib/GeoExt/widgets/LayerOpacitySlider.html 2009-07-17 06:16:03 UTC (rev 1273)
@@ -0,0 +1,91 @@
+<!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(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(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 })
+ });
+ 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();
+ }
+
+ function test_aggressive(t) {
+ t.plan(2);
+
+ var slider1 = new GeoExt.LayerOpacitySlider({
+ renderTo: document.body,
+ layer: new OpenLayers.Layer('foo'),
+ aggressive: false
+ });
+ slider1.on({
+ changecomplete: function() {
+ t.ok(true, "changecomplete triggered in non-aggressive mode");
+ }
+ });
+
+ 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);
+
+ slider1.destroy();
+ slider2.destroy();
+ }
+ </script>
+ <body>
+ </body>
+</html>
Modified: core/trunk/geoext/tests/list-tests.html
===================================================================
--- core/trunk/geoext/tests/list-tests.html 2009-07-16 19:02:07 UTC (rev 1272)
+++ core/trunk/geoext/tests/list-tests.html 2009-07-17 06:16:03 UTC (rev 1273)
@@ -11,6 +11,7 @@
<li>lib/GeoExt/data/WMSCapabilitiesReader.html</li>
<li>lib/GeoExt/data/WMSDescribeLayerReader.html</li>
<li>lib/GeoExt/widgets/Action.html</li>
+ <li>lib/GeoExt/widgets/LayerOpacitySlider.html</li>
<li>lib/GeoExt/widgets/MapPanel.html</li>
<li>lib/GeoExt/widgets/Popup.html</li>
<li>lib/GeoExt/widgets/form.html</li>
More information about the Commits
mailing list