Merge pull request #385 from OpenGeoscience/use-standard-wheelevent

Use the standard wheelevent

Author: jbeezley

Gruntfile.js

@@ -213,7 +213,6 @@ module.exports = function (grunt) {
         files: {
           'dist/built/geo.ext.min.js': [
             'bower_components/jquery/dist/jquery.js',
-            'bower_components/jquery-mousewheel/jquery.mousewheel.js',
             'bower_components/gl-matrix/dist/gl-matrix.js',
             'bower_components/proj4/dist/proj4-src.js',
             'bower_components/d3/d3.js',

bower.json

@@ -15,7 +15,6 @@
     "d3": "~3.3",
     "gl-matrix": "~2.1",
     "jquery": "~2.1",
-    "jquery-mousewheel": "^3.1.12",
     "proj4": "~2.2",
     "bootstrap": "~3.3.0",
     "bootswatch": "~3.3"

docs/users.rst

@@ -31,8 +31,6 @@ list of libraries used by GeoJS.
     +---------------------------+------------+---------------------------+
     | `pnltri`_                 | 2.1        | GL renderer               |
     +---------------------------+------------+---------------------------+
-    | `jQuery mousewheel`_      | 3.1        | Mouse interactor          |
-    +---------------------------+------------+---------------------------+
     | `d3`_                     | 3.3        | D3 renderer, UI widgets   |
     +---------------------------+------------+---------------------------+
 
@@ -45,7 +43,6 @@ list of libraries used by GeoJS.
 .. _proj4: http://proj4js.org/
 .. _GL matrix: http://glmatrix.net/
 .. _pnltri: https://github.com/jahting/pnltri.js/
-.. _jQuery mousewheel: https://github.com/jquery/jquery-mousewheel/
 .. _d3: http://d3js.org/
 
 

examples/layerEvents/main.js

@@ -97,7 +97,7 @@ $(function () {
   // Add a blue box that blocks the mouse wheel.
   addEventBox(3 * width / 4, height / 2, 'Blocking wheel')
     .style('fill', 'steelblue')
-    .on('mousewheel', function () {
+    .on('wheel', function () {
       d3.event.stopPropagation();
     });
 

src/core/mapInteractor.js

@@ -328,7 +328,7 @@ geo.mapInteractor = function (args) {
     $node.on('mousemove.geojs', m_this._handleMouseMove);
     $node.on('mousedown.geojs', m_this._handleMouseDown);
     $node.on('mouseup.geojs', m_this._handleMouseUp);
-    $node.on('mousewheel.geojs', m_this._handleMouseWheel);
+    $node.on('wheel.geojs', m_this._handleMouseWheel);
     if (m_options.panMoveButton === 'right' ||
         m_options.zoomMoveButton === 'right') {
       $node.on('contextmenu.geojs', function () { return false; });
@@ -794,8 +794,21 @@ geo.mapInteractor = function (args) {
   this._handleMouseWheel = function (evt) {
     var zoomFactor, direction;
 
-    // In case jquery-mousewheel isn't loaded for some reason
-    evt.deltaFactor = evt.deltaFactor || 1;
+    // try to normalize deltas using the wheel event standard:
+    //   https://developer.mozilla.org/en-US/docs/Web/API/WheelEvent
+    evt.deltaFactor = 1;
+    if (evt.originalEvent.deltaMode === 1) {
+      // DOM_DELTA_LINE -- estimate line height
+      evt.deltaFactor = 12;
+    } else if (evt.originalEvent.deltaMode === 2) {
+      // DOM_DELTA_PAGE -- get window height
+      evt.deltaFactor = $(window).height();
+    }
+
+    // If the browser doesn't support the standard then
+    // just set the delta's to zero.
+    evt.deltaX = evt.originalEvent.deltaX || 0;
+    evt.deltaY = evt.originalEvent.deltaY || 0;
 
     m_this._getMouseModifiers(evt);
     evt.deltaX = evt.deltaX * m_options.wheelScaleX * evt.deltaFactor / 120;
@@ -821,13 +834,13 @@ geo.mapInteractor = function (args) {
 
       m_this.map().pan({
         x: evt.deltaX,
-        y: evt.deltaY
+        y: -evt.deltaY
       });
 
     } else if (m_options.zoomWheelEnabled &&
                eventMatch('wheel', m_options.zoomWheelModifiers)) {
 
-      zoomFactor = evt.deltaY;
+      zoomFactor = -evt.deltaY;
       direction = m_mouse.map;
 
       m_this.map().zoom(
@@ -1014,9 +1027,11 @@ geo.mapInteractor = function (args) {
         ctrlKey: options.modifiers.indexOf('ctrl') >= 0,
         metaKey: options.modifiers.indexOf('meta') >= 0,
         shiftKey: options.modifiers.indexOf('shift') >= 0,
-        deltaX: options.wheelDelta.x,
-        deltaY: options.wheelDelta.y,
-        deltaFactor: 1
+        originalEvent: {
+          deltaX: options.wheelDelta.x,
+          deltaY: options.wheelDelta.y,
+          deltaMode: options.wheelMode
+        }
       }
     );
     $node.trigger(evt);

testing/test-cases/phantomjs-tests/mapInteractor.js

@@ -197,15 +197,16 @@ describe('mapInteractor', function () {
 
     // trigger a zoom
     interactor.simulateEvent(
-      'mousewheel',
+      'wheel',
       {
         wheelDelta: {x: 20, y: -10},
+        wheelMode: 0
       }
     );
 
     // check the zoom event was called
     expect(map.info.zoom).toBe(1);
-    expect(map.info.zoomArgs).toBe(2 - 10 / 120);
+    expect(map.info.zoomArgs).toBe(2 + 10 / 120);
   });
 
   it('Test zoom right click event propagation', function () {