[FIX] website[_slides]: Unhide conditional elements in fullscreen

Steps to reproduce:

  - Install `website_slides` module
  - Create a course and add a slide of type `Article`
  - Go to frontend and edit the slide
  - Add a text element and edit conditional visibility
    (e.g. visible only if user logged in)
  - Save and open the slide in fullscreen mode (with any logged user)

Issue:

  The text block is missing.

Cause:

  The slide is rendered in lazy load after that the code that unhide
  conditional elements is already executed (on event `DOMContentLoaded`)

Solution:

  Extract the concerned code so it can be called and re-executed after
  the slide is rendered also in fullscreen.

opw-3225444

closes odoo/odoo#129646

X-original-commit: 553702c99cbd90edfb509ca9e7ab0c99c73a96e6
Signed-off-by: Nasreddin Boulif (bon) <bon@odoo.com>

addons/website/static/src/js/content/inject_dom.js

@@ -3,6 +3,28 @@
 import {getCookie} from '@web/legacy/js/core/cookie_utils';
 import { session } from '@web/session';
 
+/**
+ * Unhide elements that are hidden by default and that should be visible
+ * according to the snippet visibility option.
+ */
+export function unhideConditionalElements() {
+    // Create CSS rules in a dedicated style tag according to the snippet
+    // visibility option's computed ones (saved as data attributes).
+    const styleEl = document.createElement('style');
+    styleEl.id = "conditional_visibility";
+    document.head.appendChild(styleEl);
+    const conditionalEls = document.querySelectorAll('[data-visibility="conditional"]');
+    for (const conditionalEl of conditionalEls) {
+        const selectors = conditionalEl.dataset.visibilitySelectors;
+        styleEl.sheet.insertRule(`${selectors} { display: none !important; }`);
+    }
+
+    // Now remove the classes that makes them always invisible
+    for (const conditionalEl of conditionalEls) {
+        conditionalEl.classList.remove('o_conditional_hidden');
+    }
+}
+
 document.addEventListener('DOMContentLoaded', () => {
     // Transfer cookie/session data as HTML element's attributes so that CSS
     // selectors can be based on them.
@@ -26,19 +48,5 @@ document.addEventListener('DOMContentLoaded', () => {
 
     htmlEl.dataset.logged = !session.is_website_user;
 
-    // Create CSS rules in a dedicated style tag according to the snippet
-    // visibility option's computed ones (saved as data attributes).
-    const styleEl = document.createElement('style');
-    styleEl.id = "conditional_visibility";
-    document.head.appendChild(styleEl);
-    const conditionalEls = document.querySelectorAll('[data-visibility="conditional"]');
-    for (const conditionalEl of conditionalEls) {
-        const selectors = conditionalEl.dataset.visibilitySelectors;
-        styleEl.sheet.insertRule(`${selectors} { display: none !important; }`);
-    }
-
-    // Now remove the classes that makes them always invisible
-    for (const conditionalEl of conditionalEls) {
-        conditionalEl.classList.remove('o_conditional_hidden');
-    }
+    unhideConditionalElements();
 });

addons/website_slides/static/src/js/slides_course_fullscreen_player.js

@@ -10,6 +10,7 @@
     import session from 'web.session';
     import { Quiz } from '@website_slides/js/slides_course_quiz';
     import { SlideCoursePage } from '@website_slides/js/slides_course_page';
+    import { unhideConditionalElements } from '@website/js/content/inject_dom';
     import Dialog from '@web/legacy/js/core/dialog';
     import '@website_slides/js/slides_course_join';
 
@@ -686,6 +687,7 @@
                     $target: $content,
                 });
             }
+            unhideConditionalElements();
             return Promise.resolve();
         },
         //--------------------------------------------------------------------------