DatePicker: fix scroll direction of mouse wheel

In commit 719bddb the mouse wheel
listener of the DatePicker was changed from the legacy 'mousewheel'
event to the modern 'wheel' event. Unfortunately, the sign of the
scroll unit is different for these two event types [1]. The delta
values in the new 'wheel' event indicate the scroll amount [2], i.e.
positive numbers mean scroll down/right, while negative numbers
mean scroll up/left.

To restore the previous behavior of the date picker, the sign of the
'diff' value has to be adjusted accordingly.

[1] https://developer.mozilla.org/en-US/docs/Web/API/Element/mousewheel_event
[2] https://developer.mozilla.org/en-US/docs/Web/API/Element/wheel_event

379013

eclipse-scout-core/src/datepicker/DatePicker.ts

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2010, 2023 BSI Business Systems Integration AG
+ * Copyright (c) 2010, 2024 BSI Business Systems Integration AG
  *
  * This program and the accompanying materials are made
  * available under the terms of the Eclipse Public License 2.0
@@ -589,7 +589,7 @@ export class DatePicker extends Widget implements DatePickerModel {
   protected _onMouseWheel(event: JQueryWheelEvent) {
     let originalEvent = event.originalEvent;
     let wheelData = originalEvent.deltaY | originalEvent.deltaX;
-    let diff = (wheelData >= 0 ? -1 : 1);
+    let diff = (wheelData < 0 ? -1 : 1);
     this.shiftViewDate(0, diff, 0);
     originalEvent.preventDefault();
   }

eclipse-scout-core/test/datepicker/DatePickerSpec.ts

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2010, 2023 BSI Business Systems Integration AG
+ * Copyright (c) 2010, 2024 BSI Business Systems Integration AG
  *
  * This program and the accompanying materials are made
  * available under the terms of the Eclipse Public License 2.0
@@ -30,7 +30,41 @@ describe('DatePicker', () => {
       picker.showDate(dates.create('2016-01-12'), false);
       expect(dates.isSameMonth(picker.currentMonth.viewDate, dates.create('2016-01-01'))).toBe(true);
     });
-
   });
 
+  describe('shift view date', () => {
+
+    it('changes the displayed month', () => {
+      let picker = scout.create(DatePicker, {
+        parent: session.desktop
+      });
+      picker.render();
+      picker.showDate(dates.create('2017-04-12'), false);
+      expect(dates.isSameMonth(picker.currentMonth.viewDate, dates.create('2017-04-01'))).toBe(true);
+
+      picker.shiftViewDate(-1, -2, 17);
+      expect(dates.isSameMonth(picker.currentMonth.viewDate, dates.create('2016-02-01'))).toBe(true);
+    });
+
+    it('changes the month on wheel event', () => {
+      let picker = scout.create(DatePicker, {
+        parent: session.desktop
+      });
+      picker.render();
+      picker.showDate(dates.create('2017-04-12'), false);
+      expect(dates.isSameMonth(picker.currentMonth.viewDate, dates.create('2017-04-01'))).toBe(true);
+
+      let wheelDownEvent = new WheelEvent('wheel', {
+        deltaY: 100
+      });
+      picker.$scrollable.children('.date-picker-month-box')[0].dispatchEvent(wheelDownEvent);
+      expect(dates.isSameMonth(picker.currentMonth.viewDate, dates.create('2017-05-01'))).toBe(true);
+
+      let wheelUpEvent = new WheelEvent('wheel', {
+        deltaY: -100
+      });
+      picker.$scrollable.children('.date-picker-month-box')[0].dispatchEvent(wheelUpEvent);
+      expect(dates.isSameMonth(picker.currentMonth.viewDate, dates.create('2017-04-01'))).toBe(true);
+    });
+  });
 });