embed code

addons/website/__manifest__.py

@@ -1,3 +1,4 @@
+
 # Part of Odoo. See LICENSE file for full copyright and licensing details.
 
 {
@@ -293,19 +294,20 @@
             'website/static/lib/multirange/*.js',
             'website/static/src/core/**/*',
             'website/static/src/interactions/**/*',
+            'website/static/src/snippets/s_countdown/000.js',
+            'website/static/src/snippets/s_chart/000.js',
             'website/static/src/snippets/s_dynamic_snippet/000.js',
             'website/static/src/snippets/s_dynamic_snippet/000.xml',
             'website/static/src/snippets/s_dynamic_snippet_carousel/000.js',
             'website/static/src/snippets/s_dynamic_snippet_carousel/000.xml',
+            'website/static/src/snippets/s_embed_code/000.js',
             'website/static/src/snippets/s_image_gallery/000.js',
             'website/static/src/snippets/s_table_of_content/000.js',
             'website/static/src/snippets/s_table_of_content/000.scss',
             'website/static/src/snippets/s_website_form/000.js',
             'website/static/src/snippets/*/*.xml',
             'website/static/src/xml/website_form.xml',
             'google_recaptcha/static/src/js/recaptcha.js',
-            'website/static/src/snippets/s_countdown/000.js',
-            'website/static/src/snippets/s_chart/000.js',
         ],
         'web.tests_assets': [
             'website/static/tests/website_service_mock.js',

addons/website/static/src/snippets/s_embed_code/000.js

@@ -1,45 +1,41 @@
-import publicWidget from "@web/legacy/js/public/public_widget";
+import { registry } from "@web/core/registry";
+import { Interaction } from "@website/core/interaction";
 import { _t } from "@web/core/l10n/translation";
 import { cloneContentEls } from "@website/js/utils";
 
-const EmbedCodeWidget = publicWidget.Widget.extend({
-    selector: ".s_embed_code",
-    disabledInEditableMode: false,
+export class EmbedCode extends Interaction {
+    static selector = ".s_embed_code";
+    // TODO Support edit mode.
+    disabledInEditableMode = false;
 
-    /**
-     * @override
-     */
-    async start() {
+    setup() {
         this.embedCodeEl = this.el.querySelector(".s_embed_code_embedded");
+    }
 
+    start() {
+        // TODO Support edit mode.
         if (this.editableMode && this.embedCodeEl.offsetHeight === 0) {
             // Shows a placeholder message in edit mode to be able to select
             // the snippet if it's visually empty.
             const placeholderEl = document.createElement("div");
             placeholderEl.classList
                 .add("s_embed_code_placeholder", "alert", "alert-info", "pt16", "pb16");
             placeholderEl.textContent = _t("Your Embed Code snippet doesn't have anything to display. Click on Edit to modify it.");
-            this.el.querySelector(".s_embed_code_embedded").appendChild(placeholderEl);
+            this.embedCodeEl.appendChild(placeholderEl);
         }
-        return this._super(...arguments);
-    },
-    /**
-     * @override
-     */
-    destroy() {
-        this._super(...arguments);
+    }
 
+    destroy() {
         // Just before entering edit mode, reinitialize the snippet's content,
         // without <script> elements. This is both done so that scripts don't
         // affect the DOM in edit mode, and to remove elements that would have
         // been introduced by a script.
-        if (!this.editableMode) {
+        // TODO Support edit mode.
+        // if (!this.editableMode) {
             const templateContent = this.el.querySelector("template.s_embed_code_saved").content;
             this.embedCodeEl.replaceChildren(cloneContentEls(templateContent));
-        }
-    },
-});
-
-publicWidget.registry.EmbedCode = EmbedCodeWidget;
+        // }
+    }
+}
 
-export default EmbedCodeWidget;
+registry.category("website.active_elements").add("website.embed_code", EmbedCode);

addons/website/static/tests/interactions/snippets/embed_code.test.js

@@ -0,0 +1,37 @@
+import { expect, test } from "@odoo/hoot";
+import {
+    startInteractions,
+    setupInteractionWhiteList,
+} from "../../core/helpers";
+
+setupInteractionWhiteList("website.embed_code");
+
+/* TODO Requires a way to inject a script in a fixture.
+test("embed code executed only once", async () => {
+    const { core, el } = await startInteractions(`
+    <section class="s_embed_code text-center pt64 pb64 o_colored_level" data-snippet="s_embed_code" data-name="Embed Code">
+        <template class="s_embed_code_saved"><script>expect.step("template");</script></template>
+        <div class="s_embed_code_embedded container o_not_editable"><script>expect.step("div");</script></div>
+    </section>
+    `);
+    expect(core.interactions.length).toBe(1);
+    expect.verifySteps(["div"]);
+});
+*/
+
+test("embed code resets on stop", async () => {
+    const { core, el } = await startInteractions(`
+    <section class="s_embed_code text-center pt64 pb64 o_colored_level" data-snippet="s_embed_code" data-name="Embed Code">
+        <template class="s_embed_code_saved"><div>original</div></template>
+        <div class="s_embed_code_embedded container o_not_editable"><div>original</div></div>
+    </section>
+    `);
+    expect(core.interactions.length).toBe(1);
+    let embeddedEl = el.querySelector(".s_embed_code_embedded div");
+    embeddedEl.textContent = "changed";
+    expect(embeddedEl.textContent).toBe("changed");
+    core.stopInteractions();
+    expect(core.interactions.length).toBe(0);
+    embeddedEl = el.querySelector(".s_embed_code_embedded div");
+    expect(embeddedEl.textContent).toBe("original");
+});