[Commits] r956 - 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
Tue Jun 2 21:43:52 CEST 2009
Author: tschaub
Date: 2009-06-02 21:43:52 +0200 (Tue, 02 Jun 2009)
New Revision: 956
Added:
core/trunk/geoext/examples/zoomslider.html
core/trunk/geoext/examples/zoomslider.js
core/trunk/geoext/lib/GeoExt/widgets/ZoomSlider.js
core/trunk/geoext/lib/GeoExt/widgets/tips/
core/trunk/geoext/lib/GeoExt/widgets/tips/SliderTip.js
core/trunk/geoext/lib/GeoExt/widgets/tips/ZoomSliderTip.js
core/trunk/geoext/tests/lib/GeoExt/widgets/ZoomSlider.html
Modified:
core/trunk/geoext/lib/GeoExt.js
core/trunk/geoext/tests/list-tests.html
Log:
Adding a zoom slider that can be added as an item in a MapPanel container. r=ahocevar (closes #16)
Added: core/trunk/geoext/examples/zoomslider.html
===================================================================
--- core/trunk/geoext/examples/zoomslider.html (rev 0)
+++ core/trunk/geoext/examples/zoomslider.html 2009-06-02 19:43:52 UTC (rev 956)
@@ -0,0 +1,22 @@
+<html>
+ <head>
+ <title>GeoExt ZoomSlider</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="zoomslider.js"></script>
+ </head>
+ <body>
+ <h1>GeoExt.ZoomSlider</h1>
+ <p>The ZoomSlider allows control of the map scale using an Ext.Slider.
+ It is also possible to add a special tooltip plugin, ZoomSliderTip, which
+ will show the zoom level, scale and resolution while dragging the slider
+ (the content is configurable).<p>
+ <p>The js is not minified so it is readable. See <a href="zoomslider.js">zoomslider.js</a>.</p>
+ <div id="map-container"></div>
+ </body>
+</html>
Added: core/trunk/geoext/examples/zoomslider.js
===================================================================
--- core/trunk/geoext/examples/zoomslider.js (rev 0)
+++ core/trunk/geoext/examples/zoomslider.js 2009-06-02 19:43:52 UTC (rev 956)
@@ -0,0 +1,40 @@
+var panel, slider;
+
+Ext.onReady(function() {
+
+ // 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: [new OpenLayers.Layer.WMS(
+ "Global Imagery",
+ "http://demo.opengeo.org/geoserver/wms",
+ {layers: 'bluemarble'}
+ )],
+ extent: [-5, 35, 15, 55],
+ items: [{
+ xtype: "gx_zoomslider",
+ vertical: true,
+ height: 100,
+ x: 10,
+ y: 20,
+ plugins: new GeoExt.ZoomSliderTip()
+ }]
+ });
+
+ // create a separate slider bound to the map but displayed elsewhere
+ slider = new GeoExt.ZoomSlider({
+ map: panel.map,
+ width: 200,
+ plugins: new GeoExt.ZoomSliderTip({
+ template: "<div>Zoom Level: {zoom}</div>"
+ }),
+ renderTo: document.body
+ });
+
+});
Added: core/trunk/geoext/lib/GeoExt/widgets/ZoomSlider.js
===================================================================
--- core/trunk/geoext/lib/GeoExt/widgets/ZoomSlider.js (rev 0)
+++ core/trunk/geoext/lib/GeoExt/widgets/ZoomSlider.js 2009-06-02 19:43:52 UTC (rev 956)
@@ -0,0 +1,261 @@
+/**
+ * Copyright (c) 2008 The Open Planning Project
+ */
+
+/**
+ * @include GeoExt/widgets/tips/ZoomSliderTip.js
+ */
+
+/** api: (define)
+ * module = GeoExt
+ * class = ZoomSlider
+ * 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.ZoomSlider({
+ * renderTo: document.body,
+ * width: 200,
+ * map: map
+ * });
+ *
+ * Sample code to add a slider to a map panel:
+ *
+ * .. code-block:: javascript
+ *
+ * var panel = new GeoExt.MapPanel({
+ * renderTo: document.body,
+ * height: 300,
+ * width: 400,
+ * map: {
+ * controls: [new OpenLayers.Control.Navigation()]
+ * },
+ * layers: [new OpenLayers.Layer.WMS(
+ * "Global Imagery",
+ * "http://demo.opengeo.org/geoserver/wms",
+ * {layers: "bluemarble"}
+ * )],
+ * extent: [-5, 35, 15, 55],
+ * items: [{
+ * xtype: "gx_zoomslider",
+ * vertical: true,
+ * height: 100,
+ * x: 10,
+ * y: 20
+ * }]
+ * });
+ */
+
+/** api: constructor
+ * .. class:: ZoomSlider(config)
+ *
+ * Create a slider for controlling a map's zoom level.
+ */
+GeoExt.ZoomSlider = Ext.extend(Ext.Slider, {
+
+ /** api: config[map]
+ * ``OpenLayers.Map`` or :class:`GeoExt.MapPanel`
+ * The map that the slider controls.
+ */
+ map: null,
+
+ /** private: config[minValue]
+ * ``Number``
+ */
+ minValue: null,
+
+ /** private: config[minValue]
+ * ``Number``
+ */
+ maxValue: null,
+
+ /** api: config[baseCls]
+ * ``String``
+ * The CSS class name for the slider elements. Default is "gx-zoomslider".
+ */
+ baseCls: "gx-zoomslider",
+
+ /** private: property[updating]
+ * ``Boolean``
+ * The slider position is being updated by itself (based on map zoomend).
+ */
+ updating: false,
+
+ /** private: method[initComponent]
+ * Initialize the component.
+ */
+ initComponent: function() {
+ GeoExt.ZoomSlider.superclass.initComponent.call(this);
+
+ if(this.map) {
+ if(this.map instanceof GeoExt.MapPanel) {
+ this.map = this.map.map;
+ }
+ this.bind(this.map);
+ }
+ this.on({
+ "changecomplete": this.changeHandler,
+ "beforedestroy": this.unbind,
+ scope: this
+ });
+
+ },
+
+ /** private: method[onRender]
+ * Override onRender to set base css class.
+ */
+ onRender: function() {
+ GeoExt.ZoomSlider.superclass.onRender.apply(this, arguments);
+ this.el.addClass(this.baseCls);
+ },
+
+ /** private: method[afterRender]
+ * Override afterRender because the render event is fired too early
+ * to call update.
+ */
+ afterRender : function(){
+ Ext.Slider.superclass.afterRender.apply(this, arguments);
+ this.update();
+ },
+
+ /** 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
+ });
+ this.bind(panel.map);
+ },
+
+ /** private: method[stopMouseEvents]
+ * :param e: ``Object``
+ */
+ stopMouseEvents: function(e) {
+ e.stopEvent();
+ },
+
+ /** 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, this);
+ el.un("click", this.stopMouseEvents, this);
+ this.unbind();
+ },
+
+ /** private: method[bind]
+ * :param map: ``OpenLayers.Map``
+ */
+ bind: function(map) {
+ this.map = map;
+ this.map.events.on({
+ zoomend: this.update,
+ changebaselayer: this.initZoomValues,
+ scope: this
+ });
+ if(this.map.baseLayer) {
+ this.initZoomValues();
+ }
+ },
+
+ /** private: method[unbind]
+ */
+ unbind: function() {
+ if(this.map) {
+ this.map.events.un({
+ zoomend: this.update,
+ changebaselayer: this.initZoomValues,
+ scope: this
+ });
+ }
+ },
+
+ /** private: method[initZoomValues]
+ * Set the min/max values for the slider if not set in the config.
+ */
+ initZoomValues: function() {
+ var layer = this.map.baseLayer;
+ if(this.initialConfig.minValue === undefined) {
+ this.minValue = layer.minZoomLevel || 0;
+ }
+ if(this.initialConfig.maxValue === undefined) {
+ this.maxValue = layer.maxZoomLevel || layer.numZoomLevels - 1;
+ }
+ },
+
+ /** api: method[getZoom]
+ * :return: ``Number`` The map zoom level.
+ *
+ * Get the zoom level for the associated map based on the slider value.
+ */
+ getZoom: function() {
+ return this.getValue();
+ },
+
+ /** api: method[getScale]
+ * :return: ``Number`` The map scale denominator.
+ *
+ * Get the scale denominator for the associated map based on the slider value.
+ */
+ getScale: function() {
+ return OpenLayers.Util.getScaleFromResolution(
+ this.map.getResolutionForZoom(this.getValue()),
+ this.map.getUnits()
+ );
+ },
+
+ /** api: method[getResolution]
+ * :return: ``Number`` The map resolution.
+ *
+ * Get the resolution for the associated map based on the slider value.
+ */
+ getResolution: function() {
+ return this.map.getResolutionForZoom(this.getValue());
+ },
+
+ /** private: method[changeHandler]
+ * Registered as a listener for slider changecomplete. Zooms the map.
+ */
+ changeHandler: function() {
+ if(this.map && !this.updating) {
+ this.map.zoomTo(this.getValue());
+ }
+ },
+
+ /** private: method[update]
+ * Registered as a listener for map zoomend. Updates the value of the slider.
+ */
+ update: function() {
+ if(this.rendered && this.map) {
+ this.updating = true;
+ this.setValue(this.map.getZoom());
+ this.updating = false;
+ }
+ }
+
+});
+
+/** api: xtype = gx_zoomslider */
+Ext.reg('gx_zoomslider', GeoExt.ZoomSlider);
Added: core/trunk/geoext/lib/GeoExt/widgets/tips/SliderTip.js
===================================================================
--- core/trunk/geoext/lib/GeoExt/widgets/tips/SliderTip.js (rev 0)
+++ core/trunk/geoext/lib/GeoExt/widgets/tips/SliderTip.js 2009-06-02 19:43:52 UTC (rev 956)
@@ -0,0 +1,122 @@
+/**
+ * Copyright (c) 2008 The Open Planning Project
+ */
+
+/** api: (define)
+ * module = GeoExt
+ * class = SliderTip
+ * 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 slider value on hover:
+ *
+ * .. code-block:: javascript
+ *
+ * var slider = new Ext.Slider({
+ * renderTo: document.body,
+ * width: 200,
+ * plugins: new GeoExt.SliderTip()
+ * });
+ */
+
+/** api: constructor
+ * .. class:: SliderTip(config)
+ *
+ * Create a slider tip displaying ``Ext.Slider`` values over slider thumbs.
+ */
+GeoExt.SliderTip = Ext.extend(Ext.Tip, {
+
+ /** api: config[hover]
+ * ``Boolean``
+ * Display the tip when hovering over the thumb. If ``false``, tip will
+ * only be displayed while dragging. Default is ``true``.
+ */
+ hover: true,
+
+ /** api: config[minWidth]
+ * ``Number``
+ * Minimum width of the tip. Default is 10.
+ */
+ minWidth: 10,
+
+ /** api: config[minWidth]
+ * ``Number``
+ * Minimum width of the tip. Default is 10.
+ */
+ minWidth: 10,
+
+ /** api: config[offsets]
+ * ``Array(Number)``
+ * A two item list that provides x, y offsets for the tip. Default is
+ * [0, -10].
+ */
+ offsets : [0, -10],
+
+ /** private: property[dragging]
+ * ``Boolean``
+ * The thumb is currently being dragged.
+ */
+ dragging: false,
+
+ /** private: method[init]
+ * :param slider: ``Ext.Slider``
+ *
+ * Called when the plugin is initialized.
+ */
+ init: function(slider) {
+ slider.on({
+ dragstart: this.onSlide,
+ drag: this.onSlide,
+ dragend: this.hide,
+ destroy: this.destroy,
+ scope: this
+ });
+ if(this.hover) {
+ slider.on("render", this.registerThumbListeners, this);
+ }
+ this.slider = slider;
+ },
+
+ /** private: method[registerThumbListeners]
+ * Set as a listener for 'render' if hover is true.
+ */
+ registerThumbListeners: function() {
+ this.slider.thumb.on({
+ "mouseover": function() {
+ this.onSlide(this.slider);
+ this.dragging = false;
+ },
+ "mouseout": function() {
+ if(!this.dragging) {
+ this.hide.apply(this, arguments);
+ }
+ },
+ scope: this
+ });
+ },
+
+ /** private: method[onSlide]
+ * :param slider: ``Ext.Slider``
+ *
+ * Listener for dragstart and drag.
+ */
+ onSlide: function(slider) {
+ this.dragging = true;
+ this.show();
+ this.body.update(this.getText(slider));
+ this.doAutoWidth();
+ this.el.alignTo(slider.thumb, 'b-t?', this.offsets);
+ },
+
+ /** api: config[getText]
+ * :return: ``String``
+ *
+ * Function that generates the value to be displayed in the tip. By
+ * default, the return from slider.getValue() is displayed.
+ */
+ getText : function(slider) {
+ return slider.getValue();
+ }
+});
Added: core/trunk/geoext/lib/GeoExt/widgets/tips/ZoomSliderTip.js
===================================================================
--- core/trunk/geoext/lib/GeoExt/widgets/tips/ZoomSliderTip.js (rev 0)
+++ core/trunk/geoext/lib/GeoExt/widgets/tips/ZoomSliderTip.js 2009-06-02 19:43:52 UTC (rev 956)
@@ -0,0 +1,80 @@
+/**
+ * Copyright (c) 2008 The Open Planning Project
+ */
+
+/**
+ * @include GeoExt/widgets/tips/SliderTip.js
+ */
+
+/** api: (extends)
+ * GeoExt/widgets/tips/SliderTip.js
+ */
+
+/** api: (define)
+ * module = GeoExt
+ * class = ZoomSliderTip
+ * 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.ZoomSlider({
+ * renderTo: document.body,
+ * width: 200,
+ * map: map,
+ * plugins: new GeoExt.ZoomSliderTip({
+ * template: "Scale: 1 : {scale}<br>Resolution: {resolution}"
+ * })
+ * });
+ */
+
+/** api: constructor
+ * .. class:: ZoomSliderTip(config)
+ *
+ * Create a slider tip displaying :class:`GeoExt.ZoomSlider` values.
+ */
+GeoExt.ZoomSliderTip = Ext.extend(GeoExt.SliderTip, {
+
+ /** api: config[template]
+ * ``String``
+ * Template for the tip. Can be customized using the following keywords in
+ * curly braces:
+ *
+ * * ``zoom`` - the zoom level
+ * * ``resolution`` - the resolution
+ * * ``scale`` - the scale denominator
+ */
+ template: '<div>Zoom Level: {zoom}</div>' +
+ '<div>Resolution: {resolution}</div>' +
+ '<div>Scale: 1 : {scale}</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.ZoomSliderTip.superclass.init.call(this, slider);
+ },
+
+ /** private: method[getText]
+ * :param slider: ``Ext.Slider`` The slider this tip is attached to.
+ */
+ getText : function(slider) {
+ var data = {
+ zoom: slider.getZoom(),
+ resolution: slider.getResolution(),
+ scale: Math.round(slider.getScale())
+ };
+ return this.compiledTemplate.apply(data);
+ }
+});
Modified: core/trunk/geoext/lib/GeoExt.js
===================================================================
--- core/trunk/geoext/lib/GeoExt.js 2009-06-02 19:34:32 UTC (rev 955)
+++ core/trunk/geoext/lib/GeoExt.js 2009-06-02 19:43:52 UTC (rev 956)
@@ -75,13 +75,16 @@
"GeoExt/widgets/form/SearchAction.js",
"GeoExt/widgets/form/BasicForm.js",
"GeoExt/widgets/form/FormPanel.js",
+ "GeoExt/widgets/tips/SliderTip.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/LegendImage.js",
"GeoExt/widgets/LegendWMS.js",
- "GeoExt/widgets/LegendPanel.js"
+ "GeoExt/widgets/LegendPanel.js",
+ "GeoExt/widgets/ZoomSlider.js"
);
var agent = navigator.userAgent;
Added: core/trunk/geoext/tests/lib/GeoExt/widgets/ZoomSlider.html
===================================================================
--- core/trunk/geoext/tests/lib/GeoExt/widgets/ZoomSlider.html (rev 0)
+++ core/trunk/geoext/tests/lib/GeoExt/widgets/ZoomSlider.html 2009-06-02 19:43:52 UTC (rev 956)
@@ -0,0 +1,65 @@
+<!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_zoomslider(t) {
+ t.plan(7);
+
+ var map = new OpenLayers.Map({
+ div: "map",
+ allOverlays: true
+ });
+ map.addLayer(new OpenLayers.Layer());
+ map.setCenter(new OpenLayers.LonLat(0, 0), 2);
+
+ var slider = new GeoExt.ZoomSlider({
+ map: map,
+ renderTo: document.body
+ });
+
+ // test range of values
+ t.eq(slider.minValue, 0, "slider min is 0");
+ t.eq(slider.maxValue, 15, "slider can go to 15");
+
+ // test initial value
+ t.eq(slider.getValue(), 2, "slider has correct value after setCenter");
+
+ // zoom in and test that value is updated
+ map.zoomIn();
+ t.eq(slider.getValue(), 3, "slider has correct value after zoomIn");
+
+ // test that zoomTo updates slider value
+ map.zoomTo(0);
+ t.eq(slider.getValue(), 0, "slider has correct value after zoomTo");
+
+ // test that slider can be destroyed
+ try {
+ slider.destroy();
+ t.ok(true, "slider.destroy does not cause problems");
+ } catch(err) {
+ t.fail("slider.destroy causes problems: " + err);
+ }
+
+ // test that map can be zoomed without trouble after slider destroy
+ try {
+ map.zoomIn();
+ t.ok(true, "map.zoomIn does not cause problems after slider.destroy");
+ } catch(err) {
+ t.fail("map.zoomIn causes problems after slider.destroy: " + err);
+ }
+
+ map.destroy();
+
+ }
+
+ </script>
+ <body>
+ <div id="map" style="width: 512px; height: 256px;"></div>
+ </body>
+</html>
Modified: core/trunk/geoext/tests/list-tests.html
===================================================================
--- core/trunk/geoext/tests/list-tests.html 2009-06-02 19:34:32 UTC (rev 955)
+++ core/trunk/geoext/tests/list-tests.html 2009-06-02 19:43:52 UTC (rev 956)
@@ -18,4 +18,5 @@
<li>lib/GeoExt/widgets/tree/LayerNode.html</li>
<li>lib/GeoExt/widgets/tree/LayerContainer.html</li>
<li>lib/GeoExt/widgets/LegendPanel.html</li>
+ <li>lib/GeoExt/widgets/ZoomSlider.html</li>
</ul>
More information about the Commits
mailing list