added option to the MouseWheel handler to trigger up/down events only
when wheel is released. r=elemoine (closes #2345) git-svn-id: http://svn.openlayers.org/trunk/openlayers@9799 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf
This commit is contained in:
ahocevar
43
examples/mousewheel-interval.html
Normal file
43
examples/mousewheel-interval.html
Normal file
@@ -0,0 +1,43 @@
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>OpenLayers Mousewheel Interval Example</title>
|
||||
<link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
|
||||
<link rel="stylesheet" href="style.css" type="text/css" />
|
||||
<script src="../lib/OpenLayers.js"></script>
|
||||
<script type="text/javascript">
|
||||
var map, layer;
|
||||
function init(){
|
||||
map = new OpenLayers.Map( 'map', {controls: [
|
||||
new OpenLayers.Control.Navigation(
|
||||
{mouseWheelOptions: {interval: 100}}
|
||||
),
|
||||
new OpenLayers.Control.PanZoom(),
|
||||
new OpenLayers.Control.ArgParser(),
|
||||
new OpenLayers.Control.Attribution()
|
||||
]} );
|
||||
layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
|
||||
"http://labs.metacarta.com/wms/vmap0",
|
||||
{layers: 'basic'} );
|
||||
map.addLayer(layer);
|
||||
map.zoomToMaxExtent();
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body onload="init()">
|
||||
<h1 id="title">OpenLayers Mousewheel Interval Example</h1>
|
||||
|
||||
<div id="tags"></div>
|
||||
|
||||
<div id="shortdesc">Let OpenLayers send less tile requests to the server when wheel-zooming.</div>
|
||||
|
||||
<div id="map" class="smallmap"></div>
|
||||
|
||||
<div id="docs">
|
||||
<p>This example shows how to configure the Navigation control to use
|
||||
the mousewheel in a less server resource consuming way: as long as you
|
||||
spin the mousewheel, no request will be sent to the server. Instead,
|
||||
the zoomlevel delta will be recorded. After a delay (in this example
|
||||
100ms), a zoom action with the cumulated delta will be performed.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -48,6 +48,13 @@ OpenLayers.Control.Navigation = OpenLayers.Class(OpenLayers.Control, {
|
||||
*/
|
||||
zoomWheelEnabled: true,
|
||||
|
||||
/**
|
||||
* Property: mouseWheelOptions
|
||||
* {Object} Options passed to the MouseWheel control (only useful if
|
||||
* <zoomWheelEnabled> is set to true)
|
||||
*/
|
||||
mouseWheelOptions: null,
|
||||
|
||||
/**
|
||||
* APIProperty: handleRightClicks
|
||||
* {Boolean} Whether or not to handle right clicks. Default is false.
|
||||
@@ -159,7 +166,8 @@ OpenLayers.Control.Navigation = OpenLayers.Class(OpenLayers.Control, {
|
||||
this.zoomBox.draw();
|
||||
this.handlers.wheel = new OpenLayers.Handler.MouseWheel(
|
||||
this, {"up" : this.wheelUp,
|
||||
"down": this.wheelDown} );
|
||||
"down": this.wheelDown},
|
||||
this.mouseWheelOptions );
|
||||
},
|
||||
|
||||
/**
|
||||
@@ -192,8 +200,11 @@ OpenLayers.Control.Navigation = OpenLayers.Class(OpenLayers.Control, {
|
||||
* deltaZ - {Integer}
|
||||
*/
|
||||
wheelChange: function(evt, deltaZ) {
|
||||
var currentZoom = this.map.getZoom();
|
||||
var newZoom = this.map.getZoom() + deltaZ;
|
||||
if (!this.map.isValidZoomLevel(newZoom)) {
|
||||
newZoom = Math.max(newZoom, 0);
|
||||
newZoom = Math.min(newZoom, this.map.getNumZoomLevels());
|
||||
if (newZoom === currentZoom) {
|
||||
return;
|
||||
}
|
||||
var size = this.map.getSize();
|
||||
@@ -213,9 +224,10 @@ OpenLayers.Control.Navigation = OpenLayers.Class(OpenLayers.Control, {
|
||||
*
|
||||
* Parameters:
|
||||
* evt - {Event}
|
||||
* delta - {Integer}
|
||||
*/
|
||||
wheelUp: function(evt) {
|
||||
this.wheelChange(evt, 1);
|
||||
wheelUp: function(evt, delta) {
|
||||
this.wheelChange(evt, delta || 1);
|
||||
},
|
||||
|
||||
/**
|
||||
@@ -224,9 +236,10 @@ OpenLayers.Control.Navigation = OpenLayers.Class(OpenLayers.Control, {
|
||||
*
|
||||
* Parameters:
|
||||
* evt - {Event}
|
||||
* delta - {Integer}
|
||||
*/
|
||||
wheelDown: function(evt) {
|
||||
this.wheelChange(evt, -1);
|
||||
wheelDown: function(evt, delta) {
|
||||
this.wheelChange(evt, delta || -1);
|
||||
},
|
||||
|
||||
/**
|
||||
|
||||
@@ -28,6 +28,23 @@ OpenLayers.Handler.MouseWheel = OpenLayers.Class(OpenLayers.Handler, {
|
||||
*/
|
||||
mousePosition: null,
|
||||
|
||||
/**
|
||||
* Property: interval
|
||||
* {Integer} In order to increase server performance, an interval (in
|
||||
* milliseconds) can be set to reduce the number of up/down events
|
||||
* called. If set, a new up/down event will not be set until the
|
||||
* interval has passed.
|
||||
* Defaults to 0, meaning no interval.
|
||||
*/
|
||||
interval: 0,
|
||||
|
||||
/**
|
||||
* Property: delta
|
||||
* {Integer} When interval is set, delta collects the mousewheel z-deltas
|
||||
* of the events that occur within the interval.
|
||||
*/
|
||||
delta: 0,
|
||||
|
||||
/**
|
||||
* Constructor: OpenLayers.Handler.MouseWheel
|
||||
*
|
||||
@@ -138,7 +155,31 @@ OpenLayers.Handler.MouseWheel = OpenLayers.Class(OpenLayers.Handler, {
|
||||
//
|
||||
if (!overScrollableDiv && overMapDiv) {
|
||||
if (overLayerDiv) {
|
||||
this.wheelZoom(e);
|
||||
var delta = 0;
|
||||
if (!e) {
|
||||
e = window.event;
|
||||
}
|
||||
if (e.wheelDelta) {
|
||||
delta = e.wheelDelta/120;
|
||||
if (window.opera && window.opera.version() < 9.2) {
|
||||
delta = -delta;
|
||||
}
|
||||
} else if (e.detail) {
|
||||
delta = -e.detail / 3;
|
||||
}
|
||||
this.delta = this.delta + delta;
|
||||
|
||||
if(this.interval) {
|
||||
window.clearTimeout(this._timeoutId);
|
||||
this._timeoutId = window.setTimeout(
|
||||
OpenLayers.Function.bind(function(){
|
||||
this.wheelZoom(e);
|
||||
}, this),
|
||||
this.interval
|
||||
);
|
||||
} else {
|
||||
this.wheelZoom(e);
|
||||
}
|
||||
}
|
||||
OpenLayers.Event.stop(e);
|
||||
}
|
||||
@@ -153,19 +194,9 @@ OpenLayers.Handler.MouseWheel = OpenLayers.Class(OpenLayers.Handler, {
|
||||
* e - {Event}
|
||||
*/
|
||||
wheelZoom: function(e) {
|
||||
var delta = this.delta;
|
||||
this.delta = 0;
|
||||
|
||||
var delta = 0;
|
||||
if (!e) {
|
||||
e = window.event;
|
||||
}
|
||||
if (e.wheelDelta) {
|
||||
delta = e.wheelDelta/120;
|
||||
if (window.opera && window.opera.version() < 9.2) {
|
||||
delta = -delta;
|
||||
}
|
||||
} else if (e.detail) {
|
||||
delta = -e.detail / 3;
|
||||
}
|
||||
if (delta) {
|
||||
// add the mouse position to the event because mozilla has
|
||||
// a bug with clientX and clientY (see
|
||||
|
||||
@@ -62,12 +62,19 @@
|
||||
}
|
||||
|
||||
function test_Handler_MouseWheel_events(t) {
|
||||
t.plan(5);
|
||||
t.plan(6);
|
||||
|
||||
var map = new OpenLayers.Map('map');
|
||||
map.addLayer(new OpenLayers.Layer.WMS("","",{}));
|
||||
map.zoomToMaxExtent();
|
||||
var control = new OpenLayers.Control();
|
||||
map.addControl(control);
|
||||
var handler = new OpenLayers.Handler.MouseWheel(control);
|
||||
var deltaZ;
|
||||
var handler = new OpenLayers.Handler.MouseWheel(control, {
|
||||
'up': function(evt, delta){
|
||||
deltaZ = delta;
|
||||
}
|
||||
}, {interval: 200});
|
||||
|
||||
// list below events that should be handled (events) and those
|
||||
// that should not be handled (nonevents) by the handler
|
||||
@@ -100,6 +107,15 @@
|
||||
|
||||
var activated = handler.activate();
|
||||
|
||||
var delta = 120;
|
||||
if (window.opera && window.opera.version() < 9.2) delta = -delta;
|
||||
handler.onWheelEvent({'target':map.layers[0].div, wheelDelta: delta});
|
||||
handler.onWheelEvent({'target':map.layers[0].div, wheelDelta: delta});
|
||||
t.delay_call(1, function() {
|
||||
t.eq(deltaZ, 2, "Multiple scroll actions triggered one event when interval is set");
|
||||
});
|
||||
|
||||
|
||||
}
|
||||
|
||||
function test_Handler_MouseWheel_deactivate(t) {
|
||||
|
||||
Reference in New Issue
Block a user