fix(ui-grid-body): normalize mouse wheel events because browsers suck

Author: c0bra

Gruntfile.js

@@ -331,14 +331,14 @@ module.exports = function(grunt) {
           'node_modules/marked/lib/marked.js'
         ],
         httpScripts: [
-          process.env.TRAVIS ? '/release/<%= pkg.name %>.unstable.js' : '/release/<%= pkg.name %>.js'
-          // '/release/<%= pkg.name %>.js'
+          // process.env.TRAVIS ? '/release/<%= pkg.name %>.unstable.js' : '/release/<%= pkg.name %>.js'
+          '/release/<%= pkg.name %>.js'
         ],
         styles: [
           'misc/doc/css/prettify.css',
           'misc/doc/css/bootstrap-flatly.css',
-          process.env.TRAVIS ? '<%= dist %>/release/<%= pkg.name %>.unstable.css' : '<%= dist %>/release/<%= pkg.name %>.css'
-          // '<%= dist %>/release/<%= pkg.name %>.css'
+          // process.env.TRAVIS ? '<%= dist %>/release/<%= pkg.name %>.unstable.css' : '<%= dist %>/release/<%= pkg.name %>.css'
+          '<%= dist %>/release/<%= pkg.name %>.css'
         ],
         title: 'UI Grid',
         titleLink: 'http://<%= site %>',

src/js/directives/ui-grid-body.js

@@ -143,13 +143,16 @@ app.directive('uiGridBody', ['$log', 'GridUtil', function($log, GridUtil) {
       });
 
       // Scroll the viewport when the mousewheel is used
-      elm.bind('mousewheel', function(evt) {
+      elm.bind('wheel mousewheel DomMouseScroll MozMousePixelScroll', function(evt) {
         // use wheelDeltaY
         evt.preventDefault();
 
+        // $log.debug('evt', evt);
         // $log.debug('evt.wheelDeltaY', evt.wheelDeltaY);
 
-        var scrollAmount = evt.wheelDeltaY * -1;
+        var newEvent = GridUtil.normalizeWheelEvent(evt);
+
+        var scrollAmount = newEvent.deltaY * -120;
 
         // Get the scroll percentage
         // var scrollPercentage = (uiGridCtrl.viewport[0].scrollTop + scrollAmount) / (uiGridCtrl.viewport[0].scrollHeight - scope.options.viewportHeight);

src/js/services/ui-grid-util.js

@@ -277,6 +277,69 @@ app.service('GridUtil', ['$window', function ($window) {
     */
     elementHeight: function (elem) {
 
+    },
+
+    normalizeWheelEvent: function (event) {
+      // var toFix = ['wheel', 'mousewheel', 'DOMMouseScroll', 'MozMousePixelScroll'];
+      // var toBind = 'onwheel' in document || document.documentMode >= 9 ? ['wheel'] : ['mousewheel', 'DomMouseScroll', 'MozMousePixelScroll'];
+      var lowestDelta, lowestDeltaXY;
+      
+      var orgEvent   = event || window.event,
+          args       = [].slice.call(arguments, 1),
+          delta      = 0,
+          deltaX     = 0,
+          deltaY     = 0,
+          absDelta   = 0,
+          absDeltaXY = 0,
+          fn;
+
+      // event = $.event.fix(orgEvent);
+      // event.type = 'mousewheel';
+
+      // Old school scrollwheel delta
+      if ( orgEvent.wheelDelta ) { delta = orgEvent.wheelDelta; }
+      if ( orgEvent.detail )     { delta = orgEvent.detail * -1; }
+
+      // At a minimum, setup the deltaY to be delta
+      deltaY = delta;
+
+      // Firefox < 17 related to DOMMouseScroll event
+      if ( orgEvent.axis !== undefined && orgEvent.axis === orgEvent.HORIZONTAL_AXIS ) {
+          deltaY = 0;
+          deltaX = delta * -1;
+      }
+
+      // New school wheel delta (wheel event)
+      if ( orgEvent.deltaY ) {
+          deltaY = orgEvent.deltaY * -1;
+          delta  = deltaY;
+      }
+      if ( orgEvent.deltaX ) {
+          deltaX = orgEvent.deltaX;
+          delta  = deltaX * -1;
+      }
+
+      // Webkit
+      if ( orgEvent.wheelDeltaY !== undefined ) { deltaY = orgEvent.wheelDeltaY; }
+      if ( orgEvent.wheelDeltaX !== undefined ) { deltaX = orgEvent.wheelDeltaX * -1; }
+
+      // Look for lowest delta to normalize the delta values
+      absDelta = Math.abs(delta);
+      if ( !lowestDelta || absDelta < lowestDelta ) { lowestDelta = absDelta; }
+      absDeltaXY = Math.max(Math.abs(deltaY), Math.abs(deltaX));
+      if ( !lowestDeltaXY || absDeltaXY < lowestDeltaXY ) { lowestDeltaXY = absDeltaXY; }
+
+      // Get a whole value for the deltas
+      fn     = delta > 0 ? 'floor' : 'ceil';
+      delta  = Math[fn](delta  / lowestDelta);
+      deltaX = Math[fn](deltaX / lowestDeltaXY);
+      deltaY = Math[fn](deltaY / lowestDeltaXY);
+
+      return {
+        delta: delta,
+        deltaX: deltaX,
+        deltaY: deltaY
+      };
     }
   };