From ad8feceedfd79a46d1ac5987eb3a8a2b283f7ff9 Mon Sep 17 00:00:00 2001
From: Benjamin Vray <bvr@odoo.com>
Date: Wed, 25 Oct 2023 09:30:01 +0200
Subject: [PATCH] [FIX] website: fix hover effect and Images Wall
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Steps to reproduce the bug:

- In Website edit mode, drag and drop an "Images Wall" snippet onto the
page.
- Click on the first image of this snippet.
- In the "Animation" options of the image, select "On Hover".
- Save the page.
- Click on the first image of the "Images Wall" snippet.
- Bug: The image in the slideshow still has the overlay that appeared
due to the hover effect.

This commit fixes this issue by resetting images to their original
source in the slideshow.

task-3562305

closes odoo/odoo#139695

Signed-off-by: Soukéina Bojabza (sobo) <sobo@odoo.com>
---
 .../src/snippets/s_image_gallery/000.js       | 32 ++++++++++++++-----
 1 file changed, 24 insertions(+), 8 deletions(-)

diff --git a/addons/website/static/src/snippets/s_image_gallery/000.js b/addons/website/static/src/snippets/s_image_gallery/000.js
index bc4912d311e..7334d992f0e 100644
--- a/addons/website/static/src/snippets/s_image_gallery/000.js
+++ b/addons/website/static/src/snippets/s_image_gallery/000.js
@@ -12,6 +12,14 @@ const GalleryWidget = publicWidget.Widget.extend({
         'click img': '_onClickImg',
     },
 
+    /**
+     * @override
+     */
+    start() {
+        this._super(...arguments);
+        this.originalSources = [...this.el.querySelectorAll("img")].map(img => img.getAttribute("src"));
+    },
+
     //--------------------------------------------------------------------------
     // Handlers
     //--------------------------------------------------------------------------
@@ -24,13 +32,23 @@ const GalleryWidget = publicWidget.Widget.extend({
      * @param {Event} ev
      */
     _onClickImg: function (ev) {
-        if (this.$modal || ev.currentTarget.matches("a > img")) {
+        const clickedEl = ev.currentTarget;
+        if (this.$modal || clickedEl.matches("a > img")) {
             return;
         }
         var self = this;
-        var $cur = $(ev.currentTarget);
 
-        var $images = $cur.closest('.s_image_gallery').find('img');
+        let imageEls = this.el.querySelectorAll("img");
+        const currentImageEl = clickedEl.closest("img");
+        const currentImageIndex = [...imageEls].indexOf(currentImageEl);
+        // We need to reset the images to their original source because it might
+        // have been changed by a mouse event (e.g. "hover effect" animation).
+        imageEls = [...imageEls].map((el, i) => {
+            const cloneEl = el.cloneNode(true);
+            cloneEl.src = this.originalSources[i];
+            return cloneEl;
+        });
+
         var size = 0.8;
         var dimensions = {
             min_width: Math.round(window.innerWidth * size * 0.9),
@@ -41,12 +59,10 @@ const GalleryWidget = publicWidget.Widget.extend({
             height: Math.round(window.innerHeight * size)
         };
 
-        var $img = ($cur.is('img') === true) ? $cur : $cur.closest('img');
-
-        const milliseconds = $cur.closest('.s_image_gallery').data('interval') || false;
+        const milliseconds = this.el.dataset.interval || false;
         this.$modal = $(renderToElement('website.gallery.slideshow.lightbox', {
-            images: $images.get(),
-            index: $images.index($img),
+            images: imageEls,
+            index: currentImageIndex,
             dim: dimensions,
             interval: milliseconds || 0,
             id: uniqueId("slideshow_"),