From 1006cfb47e06fae093c1b47c315e1cccbcb3e7b1 Mon Sep 17 00:00:00 2001
From: "Guillaume (gdi)" <gdi@odoo.com>
Date: Thu, 25 Aug 2022 07:39:13 +0000
Subject: [PATCH] [FIX] website: prevent to have two modals for Images Wall

Before this commit, when you double-clicked on an image in the Images
Wall block, the modal appeared twice. This commit ensures that for the
block Images Wall, only one modal can be present at a time.

Steps to reproduce the problem:
- Drop the block Images Wall on a page
- Save
- Click twice quickly on the same image

-> Two modals are open (one on top of the other)

task-2937538

closes odoo/odoo#98857

X-original-commit: e21ff31c429a8bc339f527a2e4eacc0f1b2f6d7d
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
---
 .../static/src/snippets/s_image_gallery/000.js   | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 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 82b23d82864..7a57302f6a9 100644
--- a/addons/website/static/src/snippets/s_image_gallery/000.js
+++ b/addons/website/static/src/snippets/s_image_gallery/000.js
@@ -26,6 +26,9 @@ const GalleryWidget = publicWidget.Widget.extend({
      * @param {Event} ev
      */
     _onClickImg: function (ev) {
+        if (this.$modal) {
+            return;
+        }
         var self = this;
         var $cur = $(ev.currentTarget);
 
@@ -43,26 +46,27 @@ const GalleryWidget = publicWidget.Widget.extend({
         var $img = ($cur.is('img') === true) ? $cur : $cur.closest('img');
 
         const milliseconds = $cur.closest('.s_image_gallery').data('interval') || false;
-        var $modal = $(qweb.render('website.gallery.slideshow.lightbox', {
+        this.$modal = $(qweb.render('website.gallery.slideshow.lightbox', {
             images: $images.get(),
             index: $images.index($img),
             dim: dimensions,
             interval: milliseconds || 0,
             id: _.uniqueId('slideshow_'),
         }));
-        $modal.on('hidden.bs.modal', function () {
+        this.$modal.on('hidden.bs.modal', function () {
             $(this).hide();
             $(this).siblings().filter('.modal-backdrop').remove(); // bootstrap leaves a modal-backdrop
             $(this).remove();
+            self.$modal = undefined;
         });
-        $modal.one('shown.bs.modal', function () {
+        this.$modal.one('shown.bs.modal', function () {
             self.trigger_up('widgets_start_request', {
                 editableMode: false,
-                $target: $modal.find('.modal-body.o_slideshow'),
+                $target: self.$modal.find('.modal-body.o_slideshow'),
             });
         });
-        $modal.appendTo(document.body);
-        const modalBS = new Modal($modal[0], {keyboard: true, backdrop: true});
+        this.$modal.appendTo(document.body);
+        const modalBS = new Modal(this.$modal[0], {keyboard: true, backdrop: true});
         modalBS.show();
     },
 });