fix(timepicker): added wheel event to enable mousewheel on Firefox

Closes angular-ui#669

Author: lazychino

src/timepicker/test/timepicker.spec.js

@@ -64,6 +64,12 @@ describe('timepicker directive', function () {
     e.wheelDelta = delta;
     return e;
   }
+  
+  function wheelThatOtherMouse(delta) {
+    var e = $.Event('wheel');
+    e.deltaY = delta;
+    return e;
+  }
 
   it('contains three row & three input elements', function() {
     expect(element.find('tr').length).toBe(3);
@@ -304,6 +310,58 @@ describe('timepicker directive', function () {
     expect(getModelState()).toEqual([14, 40]);
   });
 
+  it('responds properly on "wheel" events', function() {
+    var inputs = element.find('input');
+    var hoursEl = inputs.eq(0), minutesEl = inputs.eq(1);
+    var upMouseWheelEvent = wheelThatOtherMouse(-1);
+    var downMouseWheelEvent = wheelThatOtherMouse(1);
+
+    expect(getTimeState()).toEqual(['02', '40', 'PM']);
+    expect(getModelState()).toEqual([14, 40]);
+
+    // UP
+    hoursEl.trigger( upMouseWheelEvent );
+    $rootScope.$digest();
+    expect(getTimeState()).toEqual(['03', '40', 'PM']);
+    expect(getModelState()).toEqual([15, 40]);
+
+    hoursEl.trigger( upMouseWheelEvent );
+    $rootScope.$digest();
+    expect(getTimeState()).toEqual(['04', '40', 'PM']);
+    expect(getModelState()).toEqual([16, 40]);
+
+    minutesEl.trigger( upMouseWheelEvent );
+    $rootScope.$digest();
+    expect(getTimeState()).toEqual(['04', '41', 'PM']);
+    expect(getModelState()).toEqual([16, 41]);
+
+    minutesEl.trigger( upMouseWheelEvent );
+    $rootScope.$digest();
+    expect(getTimeState()).toEqual(['04', '42', 'PM']);
+    expect(getModelState()).toEqual([16, 42]);
+
+    // DOWN
+    minutesEl.trigger( downMouseWheelEvent );
+    $rootScope.$digest();
+    expect(getTimeState()).toEqual(['04', '41', 'PM']);
+    expect(getModelState()).toEqual([16, 41]);
+
+    minutesEl.trigger( downMouseWheelEvent );
+    $rootScope.$digest();
+    expect(getTimeState()).toEqual(['04', '40', 'PM']);
+    expect(getModelState()).toEqual([16, 40]);
+
+    hoursEl.trigger( downMouseWheelEvent );
+    $rootScope.$digest();
+    expect(getTimeState()).toEqual(['03', '40', 'PM']);
+    expect(getModelState()).toEqual([15, 40]);
+
+    hoursEl.trigger( downMouseWheelEvent );
+    $rootScope.$digest();
+    expect(getTimeState()).toEqual(['02', '40', 'PM']);
+    expect(getModelState()).toEqual([14, 40]);
+  });
+
   describe('attributes', function () {
     beforeEach(function() {
       $rootScope.hstep = 2;
@@ -413,6 +471,38 @@ describe('timepicker directive', function () {
       expect(getTimeState()).toEqual(['02', '00', 'PM']);
       expect(getModelState()).toEqual([14, 0]);
     });
+    
+    it('responds properly on "wheel" events with configurable steps', function() {
+      var inputs = element.find('input');
+      var hoursEl = inputs.eq(0), minutesEl = inputs.eq(1);
+      var upMouseWheelEvent = wheelThatOtherMouse(-1);
+      var downMouseWheelEvent = wheelThatOtherMouse(1);
+
+      expect(getTimeState()).toEqual(['02', '00', 'PM']);
+      expect(getModelState()).toEqual([14, 0]);
+
+      // UP
+      hoursEl.trigger( upMouseWheelEvent );
+      $rootScope.$digest();
+      expect(getTimeState()).toEqual(['04', '00', 'PM']);
+      expect(getModelState()).toEqual([16, 0]);
+
+      minutesEl.trigger( upMouseWheelEvent );
+      $rootScope.$digest();
+      expect(getTimeState()).toEqual(['04', '30', 'PM']);
+      expect(getModelState()).toEqual([16, 30]);
+
+      // DOWN
+      minutesEl.trigger( downMouseWheelEvent );
+      $rootScope.$digest();
+      expect(getTimeState()).toEqual(['04', '00', 'PM']);
+      expect(getModelState()).toEqual([16, 0]);
+
+      hoursEl.trigger( downMouseWheelEvent );
+      $rootScope.$digest();
+      expect(getTimeState()).toEqual(['02', '00', 'PM']);
+      expect(getModelState()).toEqual([14, 0]);
+    });
 
     it('can handle strings as steps', function() {
       var upHours = getHoursButton(true);

src/timepicker/timepicker.js

@@ -90,20 +90,22 @@ angular.module('ui.bootstrap.timepicker', [])
       // Respond on mousewheel spin
       var mousewheel = (angular.isDefined(attrs.mousewheel)) ? scope.$eval(attrs.mousewheel) : timepickerConfig.mousewheel;
       if ( mousewheel ) {
-
+        
         var isScrollingUp = function(e) {
           if (e.originalEvent) {
             e = e.originalEvent;
           }
-          return (e.detail || e.wheelDelta > 0);
+          //pick correct delta variable depending on event
+          var delta = (e.wheelDelta) ? e.wheelDelta : -e.deltaY;
+          return (e.detail || delta > 0);
         };
-
-        hoursInputEl.bind('mousewheel', function(e) {
+        
+        hoursInputEl.bind('mousewheel wheel', function(e) {
           scope.$apply( (isScrollingUp(e)) ? scope.incrementHours() : scope.decrementHours() );
           e.preventDefault();
         });
 
-        minutesInputEl.bind('mousewheel', function(e) {
+        minutesInputEl.bind('mousewheel wheel', function(e) {
           scope.$apply( (isScrollingUp(e)) ? scope.incrementMinutes() : scope.decrementMinutes() );
           e.preventDefault();
         });
@@ -212,4 +214,4 @@ angular.module('ui.bootstrap.timepicker', [])
       };
     }
   };
-}]);
+}]);