[Commits] r1061 - 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 Jun 12 14:56:50 CEST 2009
Author: fredj
Date: 2009-06-12 14:56:49 +0200 (Fri, 12 Jun 2009)
New Revision: 1061
Added:
sandbox/camptocamp/geobretagne/examples/layeropacityslider.html
sandbox/camptocamp/geobretagne/examples/layeropacityslider.js
sandbox/camptocamp/geobretagne/lib/GeoExt/widgets/tips/LayerOpacitySliderTip.js
Modified:
sandbox/camptocamp/geobretagne/lib/GeoExt.js
sandbox/camptocamp/geobretagne/lib/GeoExt/widgets/LayerOpacitySlider.js
sandbox/camptocamp/geobretagne/tests/lib/GeoExt/widgets/LayerOpacitySlider.html
Log:
layer opacity slider: patch from geoext ticket
Added: sandbox/camptocamp/geobretagne/examples/layeropacityslider.html
===================================================================
--- sandbox/camptocamp/geobretagne/examples/layeropacityslider.html (rev 0)
+++ sandbox/camptocamp/geobretagne/examples/layeropacityslider.html 2009-06-12 12:56:49 UTC (rev 1061)
@@ -0,0 +1,22 @@
+<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-rc2/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>
+ <div id="map-container"></div>
+ </body>
+</html>
Added: sandbox/camptocamp/geobretagne/examples/layeropacityslider.js
===================================================================
--- sandbox/camptocamp/geobretagne/examples/layeropacityslider.js (rev 0)
+++ sandbox/camptocamp/geobretagne/examples/layeropacityslider.js 2009-06-12 12:56:49 UTC (rev 1061)
@@ -0,0 +1,51 @@
+/**
+ * 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,
+ width: 200,
+ plugins: new GeoExt.LayerOpacitySliderTip({
+ template: "<div>{opacity}%</div>"
+ }),
+ renderTo: document.body
+ });
+
+});
Modified: sandbox/camptocamp/geobretagne/lib/GeoExt/widgets/LayerOpacitySlider.js
===================================================================
--- sandbox/camptocamp/geobretagne/lib/GeoExt/widgets/LayerOpacitySlider.js 2009-06-12 00:11:43 UTC (rev 1060)
+++ sandbox/camptocamp/geobretagne/lib/GeoExt/widgets/LayerOpacitySlider.js 2009-06-12 12:56:49 UTC (rev 1061)
@@ -2,6 +2,169 @@
* 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,
+ * 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,
+
+ minValue: 0,
+ 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');
+ } else if (config.layer instanceof GeoExt.tree.LayerNode) {
+ this.layer = config.layer.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 && 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: 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[removeFromMap]
+ * :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();
+ }
+});
+
+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 */
Added: sandbox/camptocamp/geobretagne/lib/GeoExt/widgets/tips/LayerOpacitySliderTip.js
===================================================================
--- sandbox/camptocamp/geobretagne/lib/GeoExt/widgets/tips/LayerOpacitySliderTip.js (rev 0)
+++ sandbox/camptocamp/geobretagne/lib/GeoExt/widgets/tips/LayerOpacitySliderTip.js 2009-06-12 12:56:49 UTC (rev 1061)
@@ -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: FIXME,
+ * 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: sandbox/camptocamp/geobretagne/lib/GeoExt.js
===================================================================
--- sandbox/camptocamp/geobretagne/lib/GeoExt.js 2009-06-12 00:11:43 UTC (rev 1060)
+++ sandbox/camptocamp/geobretagne/lib/GeoExt.js 2009-06-12 12:56:49 UTC (rev 1061)
@@ -78,6 +78,7 @@
"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",
Modified: sandbox/camptocamp/geobretagne/tests/lib/GeoExt/widgets/LayerOpacitySlider.html
===================================================================
--- sandbox/camptocamp/geobretagne/tests/lib/GeoExt/widgets/LayerOpacitySlider.html 2009-06-12 00:11:43 UTC (rev 1060)
+++ sandbox/camptocamp/geobretagne/tests/lib/GeoExt/widgets/LayerOpacitySlider.html 2009-06-12 12:56:49 UTC (rev 1061)
@@ -32,3 +32,37 @@
<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) {
+ t.plan(2);
+
+ 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 = new GeoExt.LayerOpacitySlider({
+ layer: new OpenLayers.Layer('foo', { opacity: 0.42})
+ });
+
+ t.ok(slider.getValue() == 42,
+ "initial layer's opacity sets the slider value");
+ }
+
+ </script>
+ <body>
+ </body>
+</html>
More information about the Commits
mailing list