From f053a4e0c8da061df012fcb636475198c018d418 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=89ric=20Lemoine?= Date: Tue, 15 Jan 2008 12:54:47 +0000 Subject: [PATCH] Add hover handler. With this handler user-defined actions can be triggered as the mouse moves over the map and pauses. An example of use is send WMS/GetFeatureInfo requests. r=crschmidt,tschaub (closes #1255) git-svn-id: http://svn.openlayers.org/trunk/openlayers@5746 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf --- examples/hover-handler.html | 209 ++++++++++++++++++++++++++++++++ lib/OpenLayers.js | 1 + lib/OpenLayers/Handler/Hover.js | 178 +++++++++++++++++++++++++++ tests/Handler/test_Hover.html | 136 +++++++++++++++++++++ tests/list-tests.html | 1 + 5 files changed, 525 insertions(+) create mode 100644 examples/hover-handler.html create mode 100644 lib/OpenLayers/Handler/Hover.js create mode 100644 tests/Handler/test_Hover.html diff --git a/examples/hover-handler.html b/examples/hover-handler.html new file mode 100644 index 0000000000..112aa56f86 --- /dev/null +++ b/examples/hover-handler.html @@ -0,0 +1,209 @@ + + + OpenLayers Hover Handler Example + + + + + + + +

Hover Handler Example

+
+ +
+
+ +

+ This example shows the use of the hover handler. +

+ +
+

+ The hover handler is to be used to emulate mouseovers on + objects on the map that aren't DOM elements. For example + one can use the hover hander to send WMS/GetFeatureInfo + requests as the user moves the mouse over the map. +

+

+ The "delay" option specifies the number of milliseconds + before the event is considered a hover. Default is 500 + milliseconds. +

+

+ The "pixelTolerance" option specifies the maximum number + of pixels between mousemoves for an event to be + considered a hover. Default is null, which means no + pixel tolerance. +

+

+ The "stopMove" option specifies whether other mousemove + listeners registered before the hover handler listener must + be notified on mousemoves or not. Default is false (meaning + that the other mousemove listeners will be notified on + mousemove). +

+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Controls with hover handlers (toggle on/off to clear output)
long delay (2 sec)
short delay (100 msec)
tolerant (6 pixels)
untolerant (1 pixel)
stop propagation
+
+ + diff --git a/lib/OpenLayers.js b/lib/OpenLayers.js index 738973c18b..10ab9c4c74 100644 --- a/lib/OpenLayers.js +++ b/lib/OpenLayers.js @@ -117,6 +117,7 @@ "OpenLayers/Feature/WFS.js", "OpenLayers/Handler.js", "OpenLayers/Handler/Click.js", + "OpenLayers/Handler/Hover.js", "OpenLayers/Handler/Point.js", "OpenLayers/Handler/Path.js", "OpenLayers/Handler/Polygon.js", diff --git a/lib/OpenLayers/Handler/Hover.js b/lib/OpenLayers/Handler/Hover.js new file mode 100644 index 0000000000..1d04e2708a --- /dev/null +++ b/lib/OpenLayers/Handler/Hover.js @@ -0,0 +1,178 @@ +/* Copyright (c) 2006-2008 MetaCarta, Inc., published under the clear BSD license. + * See http://svn.openlayers.org/trunk/openlayers/license.txt + * for the full text of the license. */ + +/** + * @requires OpenLayers/Handler.js + */ + +/** + * Class: OpenLayers.Handler.Hover + * The hover handler is to be used to emulate mouseovers on objects + * on the map that aren't DOM elements. For example one can use + * this handler to send WMS/GetFeatureInfo requests as the user + * moves the mouve over the map. + * + * Inherits from: + * - + */ +OpenLayers.Handler.Hover = OpenLayers.Class(OpenLayers.Handler, { + + /** + * APIProperty: delay + * {Integer} - Number of milliseconds between mousemoves before + * the event is considered a hover. Default is 500. + */ + delay: 500, + + /** + * APIProperty: pixelTolerance + * {Integer} - Maximum number of pixels between mousemoves for + * an event to be considered a hover. Default is null. + */ + pixelTolerance: null, + + /** + * APIProperty: stopMove + * {Boolean} Stop other listeners from being notified on mousemoves. + * Default is false. + */ + stopMove: false, + + /** + * Property: px + * {} The location of the last mousemove, expressed + * in pixels. + */ + px: null, + + /** + * Property: timerId + * {Number} The id of the timer. + */ + timerId: null, + + /** + * Constructor: OpenLayers.Handler.Hover + * Construct a hover handler. + * + * Parameters: + * control - {} The control that initialized this + * handler. The control is assumed to have a valid map property; that + * map is used in the handler's own setMap method. + * callbacks - {Object} An object whose properties correspond to abstracted + * events or sequences of browser events. The values for these + * properties are functions defined by the control that get called by + * the handler. + * options - {Object} An optional object whose properties will be set on + * the handler. + */ + initialize: function(control, callbacks, options) { + OpenLayers.Handler.prototype.initialize.apply(this, arguments); + }, + + /** + * Method: mousemove + * Called when the mouse moves on the map. + * + * Parameters: + * evt - {} + * + * Returns: + * {Boolean} Continue propagating this event. + */ + mousemove: function(evt) { + if(this.passesTolerance(evt.xy)) { + this.clearTimer(); + this.callback('move', [evt]); + this.px = evt.xy; + this.timerId = window.setTimeout( + OpenLayers.Function.bind(this.delayedCall, this, evt), + this.delay + ); + } + return !this.stopMove; + }, + + /** + * Method: mouseout + * Called when the mouse goes out of the map. + * + * Parameters: + * evt - {} + * + * Returns: + * {Boolean} Continue propagating this event. + */ + mouseout: function(evt) { + if (OpenLayers.Util.mouseLeft(evt, this.map.div)) { + this.clearTimer(); + this.callback('move', [evt]); + } + return true; + }, + + /** + * Method: passesTolerance + * Determine whether the mouse move is within the optional pixel tolerance. + * + * Parameters: + * px - {} + * + * Returns: + * {Boolean} The mouse move is within the pixel tolerance. + */ + passesTolerance: function(px) { + var passes = true; + if(this.pixelTolerance && this.px) { + var dpx = Math.sqrt( + Math.pow(this.px.x - px.x, 2) + + Math.pow(this.px.y - px.y, 2) + ); + if(dpx < this.pixelTolerance) { + passes = false; + } + } + return passes; + }, + + /** + * Method: clearTimer + * Clear the timer and set to null. + */ + clearTimer: function() { + if(this.timerId != null) { + window.clearTimeout(this.timerId); + this.timerId = null; + } + }, + + /** + * Method: delayedCall + * Triggers pause callback. + * + * Parameters: + * evt - {} + */ + delayedCall: function(evt) { + this.callback('pause', [evt]); + }, + + /** + * APIMethod: deactivate + * Deactivate the handler. + * + * Returns: + * {Boolean} The handler was successfully deactivated. + */ + deactivate: function() { + var deactivated = false; + if(OpenLayers.Handler.prototype.deactivate.apply(this, arguments)) { + this.clearTimer(); + deactivated = true; + } + return deactivated; + }, + + CLASS_NAME: "OpenLayers.Handler.Hover" +}); diff --git a/tests/Handler/test_Hover.html b/tests/Handler/test_Hover.html new file mode 100644 index 0000000000..630b9123e0 --- /dev/null +++ b/tests/Handler/test_Hover.html @@ -0,0 +1,136 @@ + + + + + + +
+ + diff --git a/tests/list-tests.html b/tests/list-tests.html index a522a29743..1f5bd4cafc 100644 --- a/tests/list-tests.html +++ b/tests/list-tests.html @@ -88,6 +88,7 @@
  • Control/test_SelectFeature.html
  • test_Handler.html
  • Handler/test_Click.html
    • +
  • Handler/test_Hover.html
  • Handler/test_Drag.html
  • Handler/test_Feature.html
  • Handler/test_Keyboard.html