From 7cbbb777465b66c4a2241f0f7e6d92435c2ac8ba Mon Sep 17 00:00:00 2001
From: "Antoine Vandevenne (anv)" <anv@odoo.com>
Date: Mon, 11 Jul 2022 15:00:05 +0000
Subject: [PATCH] [FIX] odoo_theme: only open images that have no target in
 modal

Since clicking on the image redirects the user to the target URL, it's
useless to open the image in a modal. Also, it partially broke the
layout of the /legal.html page due to the modal div being inserted into
table cells.

This commit also introduces the possibility to add the `o-no-modal`
class on images that should not open in a modal.

task-2909167

X-original-commit: 54d676c
Part-of: odoo/documentation#2461
---
 .../documentation/rst_cheat_sheet.rst         |  5 +++
 extensions/odoo_theme/static/js/layout.js     | 34 ++++++++++---------
 2 files changed, 23 insertions(+), 16 deletions(-)

diff --git a/content/contributing/documentation/rst_cheat_sheet.rst b/content/contributing/documentation/rst_cheat_sheet.rst
index 4eb876f72..ee7689c2f 100644
--- a/content/contributing/documentation/rst_cheat_sheet.rst
+++ b/content/contributing/documentation/rst_cheat_sheet.rst
@@ -454,6 +454,11 @@ The ``image`` markup allows inserting images in a document.
              :align: center
              :alt: Create an invoice.
 
+.. tip::
+   Add the :code:`:class: o-no-modal` `option
+   <https://docutils.sourceforge.io/docs/ref/rst/directives.html#common-options>`_ to an image to
+   prevent opening it in a modal.
+
 .. _contributing/alert-blocks:
 
 Alert blocks (admonitions)
diff --git a/extensions/odoo_theme/static/js/layout.js b/extensions/odoo_theme/static/js/layout.js
index dde541eaa..ada1b203c 100644
--- a/extensions/odoo_theme/static/js/layout.js
+++ b/extensions/odoo_theme/static/js/layout.js
@@ -8,24 +8,26 @@
             // Enforce the presence of the `img-fluid` class on all images.
             image.classList.add('img-fluid');
 
-            // Add a modal to each image.
-            const modalContainer = document.createElement('div');
-            modalContainer.classList.add('o_image_modal');
-            modalContainer.innerHTML = `<div class="modal fade" id="modal-${imageModalId}">
-                   <div class="modal-dialog modal-dialog-centered">
-                     <div class="modal-content">
-                       <div class="modal-body">
-                         <img src="${image.src}" alt="${image.alt}" class="img-fluid"/>
-                         <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
+            // Add a modal to each image that does not explicitly block it and has no target.
+            if (!image.classList.contains('o-no-modal') && image.parentElement.tagName !== 'A') {
+                const modalContainer = document.createElement('div');
+                modalContainer.classList.add('o_image_modal');
+                modalContainer.innerHTML = `<div class="modal fade" id="modal-${imageModalId}">
+                       <div class="modal-dialog modal-dialog-centered">
+                         <div class="modal-content">
+                           <div class="modal-body">
+                             <img src="${image.src}" alt="${image.alt}" class="o-no-modal img-fluid"/>
+                             <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
+                           </div>
+                         </div>
                        </div>
                      </div>
-                   </div>
-                 </div>
-            `;
-            image.parentNode.append(modalContainer);
-            image.setAttribute('data-bs-toggle', 'modal');
-            image.setAttribute('data-bs-target', `#modal-${imageModalId}`);
-            imageModalId++;
+                `;
+                image.parentNode.append(modalContainer);
+                image.setAttribute('data-bs-toggle', 'modal');
+                image.setAttribute('data-bs-target', `#modal-${imageModalId}`);
+                imageModalId++;
+            }
         });
 
         // Make all external links open in a new tab by default.