diff --git a/js/src/config.js b/js/src/config.js index afad593341..369f8a4070 100644 --- a/js/src/config.js +++ b/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; +}()); diff --git a/js/src/table/gis_visualization.js b/js/src/table/gis_visualization.js index 8ee8e7f0bb..3b007c30a2 100644 --- a/js/src/table/gis_visualization.js +++ b/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) { - var relCoords = getRelativeCoords(event); - if (delta > 0) { - // zoom in - 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; - }); + $('#placeholder').get(0).addEventListener( + 'wheel', + onGisMouseWheel, + PASSIVE_EVENT_LISTENERS ? { passive: false } : undefined + ); var dragX = 0; var dragY = 0;