[OpenLayers-Dev] [jpatokal@iki.fi: OpenLayers: Patch to add
tooltips to controls]
Christopher Schmidt
crschmidt at metacarta.com
Wed Feb 25 09:01:25 EST 2009
----- Forwarded message from Jani Patokallio <jpatokal at iki.fi> -----
From: Jani Patokallio <jpatokal at iki.fi>
To: Christopher Schmidt <crschmidt at metacarta.com>
Date: Wed, 25 Feb 2009 21:55:26 +0800
Subject: OpenLayers: Patch to add tooltips to controls
Greetings,
Here's a patch that adds tooltips to nearly all mouse controls. The
logic is simple: the label in OpenLayers.i18n is used unless user
overrides it with option "title", and { 'title': "" } can be used to
disable tooltips. The implementation is equally simple, as each
affected Control subclass just plugs in the title in initialize(); this
seemed to me easier than attempting some generic hack from classname to
tooltip in the Control.js master initialize().
Two issues:
#1: All the ~10 buttons in PanZoomBar share one tooltip, which makes it
kind of useless, but the current tooltip implementation apparently
requires that each Control can only have one "title". (This also
affects the obsoleted MouseToolbar.)
#2: For composite Controls like PanPanel and ZoomPanel, it's possible to
predefine different tooltips for each sub-Control, which is good.
However, if the user defines {'title': "foobar"} for the composite
Control, that label overrides all the tooltips in the sub-Controls.
Still a lesser evil than not letting the user override the tooltips at
all though...
Let me know what you think.
Cheers,
-jani
Index: Lang/en.js
===================================================================
--- Lang/en.js (revision 8888)
+++ Lang/en.js (working copy)
@@ -82,6 +82,21 @@
'scale': "Scale = 1 : ${scaleDenom}",
+ // tooltips for mouse controls
+ 'layerSwitcherTooltip': "Switch map layers",
+ 'navigationTooltip': "Click and drag to pan map",
+ 'navToolbarTooltip': "Switch between pan mode and select mode",
+ 'overviewMapTooltip': "Toggle overview map",
+ 'panEastTooltip': "Pan right",
+ 'panNorthTooltip': "Pan up",
+ 'panSouthTooltip': "Pan south",
+ 'panWestTooltip': "Pan left",
+ 'panZoomTooltip': "Pan and zoom in/out",
+ 'zoomBoxTooltip': "Click and drag to select region to zoom into",
+ 'zoomInTooltip': "Zoom in",
+ 'zoomOutTooltip': "Zoom out",
+ 'zoomToMaxExtentTooltip': "Show entire map",
+
// console message
'layerAlreadyAdded':
"You tried to add the layer: ${layerName} to the map, but it has already been added",
Index: Control/ZoomPanel.js
===================================================================
--- Control/ZoomPanel.js (revision 8888)
+++ Control/ZoomPanel.js (working copy)
@@ -36,9 +36,9 @@
initialize: function(options) {
OpenLayers.Control.Panel.prototype.initialize.apply(this, [options]);
this.addControls([
- new OpenLayers.Control.ZoomIn(),
- new OpenLayers.Control.ZoomToMaxExtent(),
- new OpenLayers.Control.ZoomOut()
+ new OpenLayers.Control.ZoomIn(options),
+ new OpenLayers.Control.ZoomToMaxExtent(options),
+ new OpenLayers.Control.ZoomOut(options)
]);
},
Index: Control/OverviewMap.js
===================================================================
--- Control/OverviewMap.js (revision 8888)
+++ Control/OverviewMap.js (working copy)
@@ -130,6 +130,9 @@
initialize: function(options) {
this.layers = [];
this.handlers = {};
+ if(!options || !options.title) {
+ this.title = OpenLayers.i18n("overviewMapTooltip");
+ }
OpenLayers.Control.prototype.initialize.apply(this, [options]);
},
Index: Control/NavToolbar.js
===================================================================
--- Control/NavToolbar.js (revision 8888)
+++ Control/NavToolbar.js (working copy)
@@ -33,10 +33,13 @@
* to extend the control.
*/
initialize: function(options) {
+ if(!options || !options.title) {
+ this.title = OpenLayers.i18n("navToolbarTooltip");
+ }
OpenLayers.Control.Panel.prototype.initialize.apply(this, [options]);
this.addControls([
- new OpenLayers.Control.Navigation(),
- new OpenLayers.Control.ZoomBox()
+ new OpenLayers.Control.Navigation(options),
+ new OpenLayers.Control.ZoomBox(options)
]);
},
Index: Control/PanZoom.js
===================================================================
--- Control/PanZoom.js (revision 8888)
+++ Control/PanZoom.js (working copy)
@@ -41,6 +41,9 @@
* options - {Object}
*/
initialize: function(options) {
+ if(!options || !options.title) {
+ this.title = OpenLayers.i18n("panZoomTooltip");
+ }
this.position = new OpenLayers.Pixel(OpenLayers.Control.PanZoom.X,
OpenLayers.Control.PanZoom.Y);
OpenLayers.Control.prototype.initialize.apply(this, arguments);
Index: Control/LayerSwitcher.js
===================================================================
--- Control/LayerSwitcher.js (revision 8888)
+++ Control/LayerSwitcher.js (working copy)
@@ -87,7 +87,7 @@
* {Boolean}
*/
ascending: true,
-
+
/**
* Constructor: OpenLayers.Control.LayerSwitcher
*
@@ -95,6 +95,9 @@
* options - {Object}
*/
initialize: function(options) {
+ if(!options || !options.title) {
+ this.title = OpenLayers.i18n("layerSwitcherTooltip");
+ }
OpenLayers.Control.prototype.initialize.apply(this, arguments);
this.layerStates = [];
},
Index: Control/Navigation.js
===================================================================
--- Control/Navigation.js (revision 8888)
+++ Control/Navigation.js (working copy)
@@ -74,6 +74,9 @@
* the control
*/
initialize: function(options) {
+ if(!options || !options.title) {
+ this.title = OpenLayers.i18n("navigationTooltip");
+ }
this.handlers = {};
OpenLayers.Control.prototype.initialize.apply(this, arguments);
},
Index: Control/ZoomIn.js
===================================================================
--- Control/ZoomIn.js (revision 8888)
+++ Control/ZoomIn.js (working copy)
@@ -21,6 +21,21 @@
* handle our events.
*/
type: OpenLayers.Control.TYPE_BUTTON,
+
+ /**
+ * Constructor: OpenLayers.Control.ZoomIn
+ * Create a new zoom in control
+ *
+ * Parameters:
+ * options - {Object} An optional object whose properties will be set on
+ * the control
+ */
+ initialize: function(options) {
+ if(!options || !options.title) {
+ this.title = OpenLayers.i18n("zoomInTooltip");
+ }
+ OpenLayers.Control.prototype.initialize.apply(this, arguments);
+ },
/**
* Method: trigger
@@ -30,4 +45,4 @@
},
CLASS_NAME: "OpenLayers.Control.ZoomIn"
-});
\ No newline at end of file
+});
Index: Control/ZoomOut.js
===================================================================
--- Control/ZoomOut.js (revision 8888)
+++ Control/ZoomOut.js (working copy)
@@ -21,8 +21,23 @@
* handle our events.
*/
type: OpenLayers.Control.TYPE_BUTTON,
-
+
/**
+ * Constructor: OpenLayers.Control.ZoomOut
+ * Create a new zoom out control
+ *
+ * Parameters:
+ * options - {Object} An optional object whose properties will be set on
+ * the control
+ */
+ initialize: function(options) {
+ if(!options || !options.title) {
+ this.title = OpenLayers.i18n("zoomOutTooltip");
+ }
+ OpenLayers.Control.prototype.initialize.apply(this, arguments);
+ },
+
+ /**
* Method: trigger
*/
trigger: function(){
Index: Control/Pan.js
===================================================================
--- Control/Pan.js (revision 8888)
+++ Control/Pan.js (working copy)
@@ -46,6 +46,9 @@
* to extend the control.
*/
initialize: function(direction, options) {
+ if(!options || !options.title) {
+ this.title = OpenLayers.i18n("pan" + direction + "Tooltip");
+ }
this.direction = direction;
this.CLASS_NAME += this.direction;
@@ -80,4 +83,4 @@
OpenLayers.Control.Pan.NORTH = "North";
OpenLayers.Control.Pan.SOUTH = "South";
OpenLayers.Control.Pan.EAST = "East";
-OpenLayers.Control.Pan.WEST = "West";
\ No newline at end of file
+OpenLayers.Control.Pan.WEST = "West";
Index: Control/ZoomToMaxExtent.js
===================================================================
--- Control/ZoomToMaxExtent.js (revision 8888)
+++ Control/ZoomToMaxExtent.js (working copy)
@@ -23,7 +23,22 @@
* handle our events.
*/
type: OpenLayers.Control.TYPE_BUTTON,
-
+
+ /**
+ * Constructor: OpenLayers.Control.ZoomToMaxExtent
+ * Create a new zoom to max extent control
+ *
+ * Parameters:
+ * options - {Object} An optional object whose properties will be set on
+ * the control
+ */
+ initialize: function(options) {
+ if(!options || !options.title) {
+ this.title = OpenLayers.i18n("zoomToMaxExtentTooltip");
+ }
+ OpenLayers.Control.prototype.initialize.apply(this, arguments);
+ },
+
/*
* Method: trigger
* Do the zoom.
Index: Control/ZoomBox.js
===================================================================
--- Control/ZoomBox.js (revision 8888)
+++ Control/ZoomBox.js (working copy)
@@ -26,7 +26,23 @@
*/
out: false,
+
/**
+ * Constructor: OpenLayers.Control.Navigation
+ * Create a new navigation control
+ *
+ * Parameters:
+ * options - {Object} An optional object whose properties will be set on
+ * the control
+ */
+ initialize: function(options) {
+ if(!options || !options.title) {
+ this.title = OpenLayers.i18n("zoomBoxTooltip");
+ }
+ OpenLayers.Control.prototype.initialize.apply(this, arguments);
+ },
+
+ /**
* Method: draw
*/
draw: function() {
Index: Control/PanPanel.js
===================================================================
--- Control/PanPanel.js (revision 8888)
+++ Control/PanPanel.js (working copy)
@@ -30,10 +30,10 @@
initialize: function(options) {
OpenLayers.Control.Panel.prototype.initialize.apply(this, [options]);
this.addControls([
- new OpenLayers.Control.Pan(OpenLayers.Control.Pan.NORTH),
- new OpenLayers.Control.Pan(OpenLayers.Control.Pan.SOUTH),
- new OpenLayers.Control.Pan(OpenLayers.Control.Pan.EAST),
- new OpenLayers.Control.Pan(OpenLayers.Control.Pan.WEST)
+ new OpenLayers.Control.Pan(OpenLayers.Control.Pan.NORTH, options),
+ new OpenLayers.Control.Pan(OpenLayers.Control.Pan.SOUTH, options),
+ new OpenLayers.Control.Pan(OpenLayers.Control.Pan.EAST, options),
+ new OpenLayers.Control.Pan(OpenLayers.Control.Pan.WEST, options)
]);
},
----- End forwarded message -----
--
Christopher Schmidt
MetaCarta
-------------- next part --------------
A non-text attachment was scrubbed...
Name: control-tooltips.patch
Type: text/x-diff
Size: 9645 bytes
Desc: not available
Url : http://lists.osgeo.org/pipermail/openlayers-dev/attachments/20090225/39703976/control-tooltips.bin
More information about the Dev
mailing list