further edit-mode, and some linting

addons/website/static/src/core/colibri.js

@@ -257,7 +257,7 @@ export class Colibri {
     destroy() {
         // restore t-att to their initial values
         for (const dynAttrs of this.dynamicAttrs) {
-            const { nodes, attr, definition, initialValues } = dynAttrs;
+            const { nodes, attr, initialValues } = dynAttrs;
             if (!initialValues) {
                 continue;
             }

addons/website/static/src/interactions/animation.js

@@ -129,7 +129,6 @@ export class Animation extends Interaction {
         const windowsHeight = window.innerHeight;
         const elHeight = el.offsetHeight;
         let elOffset = this.isAnimateOnScroll ? 0 : Math.max((elHeight * this.offsetRatio), this.offsetMin);
-        const elStyle = window.getComputedStyle(el);
 
         // We need to offset for the change in position from some animation.
         // So we get the top value by not taking CSS transforms into calculations.

addons/website/static/src/interactions/carousel_bootstrap_upgrade_fix.js

@@ -3,19 +3,6 @@ import { Interaction } from "@website/core/interaction";
 
 const CAROUSEL_SLIDING_CLASS = "o_carousel_sliding";
 
-/**
- * @param {HTMLElement} carouselEl
- * @returns {Promise<void>}
- */
-async function waitForCarouselToFinishSliding(carouselEl) {
-    if (!carouselEl.classList.contains(CAROUSEL_SLIDING_CLASS)) {
-        return;
-    }
-    return new Promise(resolve => {
-        carouselEl.addEventListener("slid.bs.carousel", () => resolve(), {once: true});
-    });
-}
-
 /**
  * This class is used to fix carousel auto-slide behavior in Odoo 17.4 and up.
  * It handles upgrade cases from lower versions.

addons/website/static/src/interactions/footer_slideout.js

@@ -10,8 +10,6 @@ export class FooterSlideout extends Interaction {
             }),
         },
     };
-    // TODO Support edit mode.
-    static disabledInEditableMode = false;
 
     setup() {
         const mainEl = this.el.querySelector(":scope > main");
@@ -40,3 +38,9 @@ export class FooterSlideout extends Interaction {
 registry
     .category("website.active_elements")
     .add("website.footer_slideout", FooterSlideout);
+
+registry
+    .category("website.editable_active_elements_builders")
+    .add("website.footer_slideout", {
+        Interaction: FooterSlideout,
+    });

addons/website/static/src/interactions/popup/popup.js

@@ -1,5 +1,4 @@
 import { cookie } from "@web/core/browser/cookie";
-import { _t } from "@web/core/l10n/translation";
 import { registry } from "@web/core/registry";
 import { utils as uiUtils, SIZES } from "@web/core/ui/ui_service";
 import { getTabableElements } from "@web/core/utils/ui";

addons/website/static/src/interactions/popup/shared_popup.js

@@ -1,4 +1,3 @@
-import { _t } from "@web/core/l10n/translation";
 import { registry } from "@web/core/registry";
 import { getScrollingElement } from "@web/core/utils/scrolling";
 import { Interaction } from "@website/core/interaction";

addons/website/static/src/interactions/video/background_video.js

@@ -1,7 +1,6 @@
 import { Interaction } from "@website/core/interaction";
 import { registry } from "@web/core/registry";
 
-import { _t } from "@web/core/l10n/translation";
 import { uniqueId } from "@web/core/utils/functions";
 import { renderToElement } from "@web/core/utils/render";
 

addons/website/static/src/snippets/s_image_gallery/gallery_slider.js

@@ -5,8 +5,6 @@ import { isVisible } from "@html_editor/utils/dom_info";
 
 export class GallerySlider extends Interaction {
     static selector = ".o_slideshow";
-    // TODO Support edit-mode enabled.
-    static disabledInEditableMode = false;
 
     setup() {
         this.carouselEl = this.el.classList.contains("carousel") ? this.el : this.el.querySelector(".carousel");
@@ -69,7 +67,7 @@ export class GallerySlider extends Interaction {
         }
         this.page += dispatchedEl.classList.contains("o_indicators_left") ? -1 : 1;
         this.page = Math.max(0, Math.min(this.nbPages - 1, this.page)); // should not be necessary
-        Carousel.getOrCreateInstance(this.carouselEl).to(this.page * this.realNbPerPage);
+        window.Carousel.getOrCreateInstance(this.carouselEl).to(this.page * this.realNbPerPage);
         // We dont use hide() before the slide animation in the editor because there is a traceback
         // TO DO: fix this traceback
         if (!this.editableMode) {
@@ -114,3 +112,9 @@ export class GallerySlider extends Interaction {
 }
 
 registry.category("website.active_elements").add("website.gallery_slider", GallerySlider);
+
+registry
+    .category("website.editable_active_elements_builders")
+    .add("website.gallery_slider", {
+        Interaction: GallerySlider,
+    });

addons/website/static/src/snippets/s_instagram_page/instagram_page.js

@@ -17,28 +17,28 @@ export class InstagramPage extends Interaction {
     }
 
     setup() {
-        const iframeEl = document.createElement("iframe");
-        iframeEl.setAttribute("scrolling", "no");
-        iframeEl.setAttribute("aria-label", _t("Instagram"));
-        iframeEl.classList.add("w-100");
+        this.iframeEl = document.createElement("iframe");
+        this.iframeEl.setAttribute("scrolling", "no");
+        this.iframeEl.setAttribute("aria-label", _t("Instagram"));
+        this.iframeEl.classList.add("w-100");
 
         // In the meantime Instagram doesn't send us a message with the height,
         // we use a formula to estimate the height of the iframe (the formula
         // has been found with a linear regression).
-        const iframeWidth = parseInt(getComputedStyle(iframeEl).width);
+        const iframeWidth = parseInt(getComputedStyle(this.iframeEl).width);
         // The profile picture is smaller when width < 432px.
-        iframeEl.height = 0.659 * iframeWidth + (iframeWidth < 432 ? 156 : 203);
+        this.iframeEl.height = 0.659 * iframeWidth + (iframeWidth < 432 ? 156 : 203);
 
-        // TODO : Check if the next lines can be replace by `this.insert(iframeEl, this.el.querySelector(".o_instagram_container"));`
+        // TODO : Check if the next lines can be replace by `this.insert(this.iframeEl, this.el.querySelector(".o_instagram_container"));`
 
-        this.el.querySelector(".o_instagram_container").appendChild(iframeEl);
+        this.el.querySelector(".o_instagram_container").appendChild(this.iframeEl);
         // TODO : ...observerUnactive() / ...observerActive()
-        this.registerCleanup(() => { iframeEl.remove(); });
+        this.registerCleanup(() => { this.iframeEl.remove(); });
     }
 
     start() {
         const src = `https://www.instagram.com/${this.el.dataset.instagramPage}/embed`;
-        this.services.website_cookies.manageIframeSrc(iframeEl, src);
+        this.services.website_cookies.manageIframeSrc(this.iframeEl, src);
     }
 
     /**
@@ -47,10 +47,9 @@ export class InstagramPage extends Interaction {
      * @param {Event} ev
      */
     onMessage(ev) {
-        const iframeEl = this.el.querySelector(".o_instagram_container iframe");
         // TODO Check if this issue is fixed with the new editor
         /*
-        if (!iframeEl) {
+        if (!this.iframeEl) {
             // TODO: fix this case. We should never end up here. It happens when
             // - Drop Instagram snippet
             // - Undo
@@ -61,7 +60,7 @@ export class InstagramPage extends Interaction {
             return;
         }
         */
-        if (ev.origin !== "https://www.instagram.com" || iframeEl.contentWindow !== ev.source) {
+        if (ev.origin !== "https://www.instagram.com" || this.iframeEl.contentWindow !== ev.source) {
             return;
         }
         const evDataJSON = JSON.parse(ev.data);
@@ -73,7 +72,7 @@ export class InstagramPage extends Interaction {
         // Instagram can return a height of 0 before the real height.
         if (height) {
             // this.options.wysiwyg?.odooEditor.observerUnactive();
-            iframeEl.height = height;
+            this.iframeEl.height = height;
             // this.options.wysiwyg?.odooEditor.observerActive();
         }
     }

addons/website/static/src/snippets/s_website_form/form.js

@@ -4,7 +4,6 @@ import { registry } from "@web/core/registry";
 import { Interaction } from "@website/core/interaction";
 import { user } from "@web/core/user";
 import { delay } from "@web/core/utils/concurrency";
-import { debounce } from "@web/core/utils/timing";
 import { _t } from "@web/core/l10n/translation";
 import { renderToElement } from "@web/core/utils/render";
 import { post } from "@web/core/network/http_service";

addons/website/static/tests/core/interaction.test.js

@@ -79,7 +79,7 @@ describe("adding listeners", () => {
                 },
             };
         }
-        const { el } = await startInteraction(Test, TemplateTest);
+        await startInteraction(Test, TemplateTest);
         expect(clicked).toBe(0);
         await dblclick("span");
         expect(clicked).toBe(3); // event dblclick = click + click + dblclick
@@ -230,7 +230,7 @@ describe("using selectors", () => {
                 "_myselector": { "t-att-animal": () => "colibri" },
             };
         }
-        const { el } = await startInteraction(Test, `
+        await startInteraction(Test, `
             <div class="test">
                 <span class="my-selector">coucou</span>
             </div>`);

addons/website/static/tests/core/interaction_util.test.js

@@ -3,6 +3,8 @@ import { Interaction } from "@website/core/interaction";
 import { buildEditableInteractions } from "@website/core/website_edit_service";
 
 test("buildEditableInteractions concrete", async () => {
+    const doStuff = () => {};
+
     class Base extends Interaction {
         stuff() {
             doStuff();
@@ -13,7 +15,7 @@ test("buildEditableInteractions concrete", async () => {
     };
     class Specific extends Base {
         otherStuff() {
-            doOtherStuff();
+            doStuff("other");
         }
     }
     const builders = [
@@ -31,6 +33,8 @@ test("buildEditableInteractions concrete", async () => {
 });
 
 test("buildEditableInteractions abstract", async () => {
+    const doStuff = () => {};
+
     class AbstractBase extends Interaction {
         stuff() {
             doStuff();
@@ -41,12 +45,12 @@ test("buildEditableInteractions abstract", async () => {
     };
     class AbstractIntermediate extends AbstractBase {
         moreStuff() {
-            doMoreStuff();
+            doStuff("more");
         }
     }
     class Specific extends AbstractIntermediate {
         otherStuff() {
-            doOtherStuff();
+            doStuff("other");
         }
     }
     const builders = [

addons/website/static/tests/core/website_core.test.js

@@ -4,8 +4,7 @@ import { animationFrame } from "@odoo/hoot-mock";
 import { Component, xml } from "@odoo/owl";
 import { makeMockEnv } from "@web/../tests/web_test_helpers";
 import { Interaction } from "@website/core/interaction";
-import { startInteraction, startInteractions } from "./helpers";
-import { registry } from "@web/core/registry";
+import { startInteraction } from "./helpers";
 
 test("properly handles case where we have no match for wrapwrap", async () => {
     const env = await makeMockEnv();
@@ -15,13 +14,10 @@ test("properly handles case where we have no match for wrapwrap", async () => {
 
 
 test("wait for translation before starting interactions", async () => {
-    let flag = false;
-
     class Test extends Interaction {
         static selector = ".test";
 
         setup() {
-            flag = true;
             expect("localization" in this.services).toBe(true);
         }
     }

addons/website/static/tests/interactions/anchor_slide.test.js

@@ -1,8 +1,6 @@
 import { expect, test } from "@odoo/hoot";
 import { animationFrame, click } from "@odoo/hoot-dom";
 import { advanceTime } from "@odoo/hoot-mock";
-import { patchWithCleanup } from "@web/../tests/web_test_helpers";
-import { AnchorSlide } from "@website/interactions/anchor_slide";
 import {
     isElementInViewport,
     startInteractions,

addons/website/static/tests/interactions/plausible_push.test.js

@@ -19,6 +19,6 @@ test("plausible push interaction notifies plausible if .js_plausible_push", asyn
         <input type='hidden' class='js_plausible_push' data-event-name='Lead Generation' data-event-params='{"CTA": "Contact Us"}' />
         </div>`);
     expect(core.interactions.length).toBe(1);
-    expect(plausible.q[0][0]).toBe("Lead Generation");
-    expect(plausible.q[0][1]).toEqual({ props: '{"CTA": "Contact Us"}' });
+    expect(window.plausible.q[0][0]).toBe("Lead Generation");
+    expect(window.plausible.q[0][1]).toEqual({ props: '{"CTA": "Contact Us"}' });
 });

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

@@ -1,6 +1,4 @@
 import { expect, test } from "@odoo/hoot";
-import { animationFrame, click, scroll } from "@odoo/hoot-dom";
-import { advanceTime } from "@odoo/hoot-mock";
 import { onRpc } from "@web/../tests/web_test_helpers";
 import { registry } from "@web/core/registry";
 import { Interaction } from "@website/core/interaction";

addons/website/static/tests/interactions/snippets/form.edit.test.js

@@ -66,7 +66,7 @@ test("form formats date in edit mode", async () => {
     const { core, el } = await startInteractions(formXml, { waitForStart: true, editMode: true });
     expect(core.interactions.length).toBe(1);
     const formEl = el.querySelector("form");
-    const dateEl = el.querySelector("input[name=When]");
+    const dateEl = formEl.querySelector("input[name=When]");
     expect(dateEl.value).toBe("01/01/2025 10:00:00");
     // Verify that non-edit code did not run.
     const dateField = dateEl.closest(".s_website_form_datetime");
@@ -79,7 +79,7 @@ test("form is NOT prefilled in edit mode", async () => {
     const { core, el } = await startInteractions(formXml, { waitForStart: true, editMode: true });
     expect(core.interactions.length).toBe(1);
     const formEl = el.querySelector("form");
-    const companyEl = el.querySelector("input[name=company]");
+    const companyEl = formEl.querySelector("input[name=company]");
     expect(companyEl.value).toBe("");
 });
 
@@ -89,6 +89,6 @@ test("form is NOT prefilled in translate mode", async () => {
     const { core, el } = await startInteractions(formXml, { waitForStart: true, translateMode: true });
     expect(core.interactions.length).toBe(1);
     const formEl = el.querySelector("form");
-    const companyEl = el.querySelector("input[name=company]");
+    const companyEl = formEl.querySelector("input[name=company]");
     expect(companyEl.value).toBe("");
 });

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

@@ -1,7 +1,7 @@
 import { expect, test } from "@odoo/hoot";
 import { click, fill } from "@odoo/hoot-dom";
 import { advanceTime, Deferred } from "@odoo/hoot-mock";
-import { MockServer, onRpc, patchWithCleanup, webModels } from "@web/../tests/web_test_helpers";
+import { MockServer, onRpc, patchWithCleanup } from "@web/../tests/web_test_helpers";
 import {
     startInteractions,
     setupInteractionWhiteList,
@@ -89,11 +89,11 @@ test("form checks conditions", async () => {
     `);
     expect(core.interactions.length).toBe(1);
     const formEl = el.querySelector("form");
-    const nameEl = el.querySelector("input[name=name]");
-    const mailEl = el.querySelector("input[name=email_from]");
-    const subjectEl = el.querySelector("input[name=subject]");
-    const questionEl = el.querySelector("textarea[name=description]");
-    const submitEl = el.querySelector("a.s_website_form_send");
+    const nameEl = formEl.querySelector("input[name=name]");
+    const mailEl = formEl.querySelector("input[name=email_from]");
+    const subjectEl = formEl.querySelector("input[name=subject]");
+    const questionEl = formEl.querySelector("textarea[name=description]");
+    const submitEl = formEl.querySelector("a.s_website_form_send");
 
     function checkVisibility(
         isNameVisible,
@@ -241,17 +241,9 @@ test("form prefilled conditional", async () => {
     `);
     expect(core.interactions.length).toBe(1);
     const formEl = el.querySelector("form");
-    const nameEl = el.querySelector("input[name=name]");
-    const phoneEl = el.querySelector("input[name=phone]");
+    const nameEl = formEl.querySelector("input[name=name]");
+    const phoneEl = formEl.querySelector("input[name=phone]");
 
-    function checkPhoneVisibility(isVisible) {
-        const fieldEl = field(el);
-        if (isVisible) {
-            expect(fieldEl).not.toHaveClass("d-none");
-        } else {
-            expect(fieldEl).toHaveClass("d-none");
-        }
-    }
     expect(nameEl).not.toBe(undefined);
     expect(nameEl.value).toBe("Mitchell Admin");
     expect(phoneEl).not.toBe(undefined);

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

@@ -90,7 +90,7 @@ test("searchbar triggers a search when text is entered", async () => {
 
 test("searchbar selects first result on cursor down", async () => {
     supportAutocomplete();
-    const { core, el } = await startInteractions(searchTemplate);
+    const { el } = await startInteractions(searchTemplate);
     const formEl = el.querySelector("form");
     const inputEl = formEl.querySelector("input[type=search]");
     await click(inputEl);
@@ -107,7 +107,7 @@ test("searchbar selects first result on cursor down", async () => {
 
 test("searchbar selects last result on cursor up", async () => {
     supportAutocomplete();
-    const { core, el } = await startInteractions(searchTemplate);
+    const { el } = await startInteractions(searchTemplate);
     const formEl = el.querySelector("form");
     const inputEl = formEl.querySelector("input[type=search]");
     await click(inputEl);
@@ -124,7 +124,7 @@ test("searchbar selects last result on cursor up", async () => {
 
 test("searchbar removes results on escape", async () => {
     supportAutocomplete();
-    const { core, el } = await startInteractions(searchTemplate);
+    const { el } = await startInteractions(searchTemplate);
     const formEl = el.querySelector("form");
     const inputEl = formEl.querySelector("input[type=search]");
     await click(inputEl);