Merge #17032 - Prevent default when scrolling in gis visualization

Pull-request: #17032

Signed-off-by: William Desportes <williamdes@wdes.fr>

js/src/config.js

@@ -2,6 +2,8 @@
  * Functions used in configuration forms and on user preferences pages
  */
 
+/* exported PASSIVE_EVENT_LISTENERS */
+
 var configInlineParams;
 var configScriptLoaded;
 
@@ -877,3 +879,23 @@ function offerPrefsAutoimport () {
     });
     $cnt.show();
 }
+
+/**
+ * @type {boolean} Support for passive event listener option
+ */
+var PASSIVE_EVENT_LISTENERS = (function () {
+    var passive = false;
+    try {
+        var options = Object.defineProperty({}, 'passive', {
+            get: function () {
+                return (passive = true);
+            },
+        });
+
+        window.addEventListener('_', null, options);
+        window.removeEventListener('_', null, options);
+    } catch (error) {
+        // passive not supported
+    }
+    return passive;
+}());

js/src/table/gis_visualization.js

@@ -6,7 +6,7 @@
  * @requires    vendor/jquery/jquery.mousewheel.js
  */
 
-/* global drawOpenLayers */ // templates/table/gis_visualization/gis_visualization.twig
+/* global drawOpenLayers PASSIVE_EVENT_LISTENERS */ // templates/table/gis_visualization/gis_visualization.twig
 
 // Constants
 var zoomFactor = 1.5;
@@ -149,6 +149,22 @@ function getRelativeCoords (e) {
     };
 }
 
+function onGisMouseWheel (event) {
+    if (event.deltaY === 0) {
+        return;
+    }
+    event.preventDefault();
+
+    var relCoords = getRelativeCoords(event);
+    var factor = event.deltaY > 0 ? zoomFactor : 1 / zoomFactor;
+    // zoom
+    scale *= factor;
+    // zooming keeping the position under mouse pointer unmoved.
+    x = relCoords.x - (relCoords.x - x) * factor;
+    y = relCoords.y - (relCoords.y - y) * factor;
+    zoomAndPan();
+}
+
 /**
  * Ajax handlers for GIS visualization page
  *
@@ -167,7 +183,6 @@ function getRelativeCoords (e) {
  */
 AJAX.registerTeardown('table/gis_visualization.js', function () {
     $(document).off('click', '#choice');
-    $(document).off('mousewheel', '#placeholder');
     $(document).off('dragstart', 'svg');
     $(document).off('mouseup', 'svg');
     $(document).off('drag', 'svg');
@@ -180,6 +195,11 @@ AJAX.registerTeardown('table/gis_visualization.js', function () {
     $(document).off('click', '#up_arrow');
     $(document).off('click', '#down_arrow');
     $('.vector').off('mousemove').off('mouseout');
+    $('#placeholder').get(0).removeEventListener(
+        'wheel',
+        onGisMouseWheel,
+        PASSIVE_EVENT_LISTENERS ? { passive: false } : undefined
+    );
 });
 
 AJAX.registerOnload('table/gis_visualization.js', function () {
@@ -207,25 +227,11 @@ AJAX.registerOnload('table/gis_visualization.js', function () {
         }
     });
 
-    $(document).on('mousewheel', '#placeholder', function (event, delta) {
+    $('#placeholder').get(0).addEventListener(
-        var relCoords = getRelativeCoords(event);
+        'wheel',
-        if (delta > 0) {
+        onGisMouseWheel,
-            // zoom in
+        PASSIVE_EVENT_LISTENERS ? { passive: false } : undefined
-            scale *= zoomFactor;
+    );
-            // zooming in keeping the position under mouse pointer unmoved.
-            x = relCoords.x - (relCoords.x - x) * zoomFactor;
-            y = relCoords.y - (relCoords.y - y) * zoomFactor;
-            zoomAndPan();
-        } else {
-            // zoom out
-            scale /= zoomFactor;
-            // zooming out keeping the position under mouse pointer unmoved.
-            x = relCoords.x - (relCoords.x - x) / zoomFactor;
-            y = relCoords.y - (relCoords.y - y) / zoomFactor;
-            zoomAndPan();
-        }
-        return true;
-    });
 
     var dragX = 0;
     var dragY = 0;