[FIX] web: Avoid open too fast zoom

Picture of employees are maximazed directly which is annoying when
you move the mouse in kanban view.

Add the ability to put a waiting time before opening the zoom in
option of the field in the view (default value is 0).

closes odoo/odoo#45229

Taskid: 2191289
X-original-commit: a264b17d8fe18464df439d896ecb7dea106caa5a
Signed-off-by: jbm-odoo <jbm-odoo@users.noreply.github.com>

2 files changed, 17 insertions, 5 deletions

diff --git a/addons/web/static/src/js/fields/basic_fields.js b/addons/web/static/src/js/fields/basic_fields.js
index 4aac42db13b..14e2cf3d37f 100644
--- a/addons/web/static/src/js/fields/basic_fields.js
+++ b/addons/web/static/src/js/fields/basic_fields.js
@@ -1917,6 +1917,10 @@ var FieldBinaryImage = AbstractFieldBinary.extend({
             } else {
                 $img = this.$('img');
             }
+            var zoomDelay = 0;
+            if (this.nodeOptions.zoom_delay) {
+                zoomDelay = this.nodeOptions.zoom_delay;
+            }
 
             if(this.recordData[imageField]) {
                 $img.attr('data-zoom', 1);
@@ -1924,6 +1928,7 @@ var FieldBinaryImage = AbstractFieldBinary.extend({
 
                 $img.zoomOdoo({
                     event: 'mouseenter',
+                    timer: zoomDelay,
                     attach: '.o_content',
                     attachToTarget: true,
                     onShow: function () {
diff --git a/addons/web/static/src/js/libs/zoomodoo.js b/addons/web/static/src/js/libs/zoomodoo.js
index cbe0511102a..b4a97c9a8ad 100644
--- a/addons/web/static/src/js/libs/zoomodoo.js
+++ b/addons/web/static/src/js/libs/zoomodoo.js
@@ -29,6 +29,9 @@ var defaults = {
     // event to trigger zoom
     event: 'click', //or mouseenter
 
+    // Timer before trigger zoom
+    timer: 0,
+
     // Prevent clicks on the zoom image link.
     preventClicks: true,
 
@@ -197,13 +200,17 @@ ZoomOdoo.prototype.show = function (e, testMouseOver) {
  * @param {Event} e
  */
 ZoomOdoo.prototype._onEnter = function (e) {
+    var self = this;
     var touches = e.originalEvent.touches;
-
+    e.preventDefault();
     this.isMouseOver = true;
-    if (!touches || touches.length === 1) {
-        e.preventDefault();
-        this.show(e, true);
-    }
+
+    setTimeout(function () {
+        if (self.isMouseOver && (!touches || touches.length === 1)) {
+            self.show(e, true);
+        }
+      }, this.opts.timer);
+
 };
 
 /**