SharedPopup + NoBackdropPopup edit

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

@@ -0,0 +1,20 @@
+import { registry } from "@web/core/registry";
+import { NoBackdropPopup } from "./no_backdrop_popup";
+
+export const NoBackdropPopupEdit = (I) => class extends I {
+    setup() {
+        super.setup();
+        if (this.el.classList.contains("show")) {
+            // Use case: When the "Backdrop" option is disabled in edit mode.
+            // The page scrollbar must be adjusted and events must be added.
+            this.addModalNoBackdropEvents();
+        }
+    }
+};
+
+registry
+    .category("website.editable_active_elements_builders")
+    .add("website.no_backdrop_popup", {
+        Interaction: NoBackdropPopup,
+        mixin: NoBackdropPopupEdit
+    });

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

@@ -4,8 +4,6 @@ import { Interaction } from "@website/core/interaction";
 
 export class NoBackdropPopup extends Interaction {
     static selector = ".s_popup_no_backdrop";
-    // TODO: handle edit mode
-    // disabledInEditableMode = false;
     dynamicContent = {
         "_root": {
             "t-on-shown.bs.modal": this.addModalNoBackdropEvents,
@@ -17,12 +15,6 @@ export class NoBackdropPopup extends Interaction {
         this.throttledUpdateScrollbar = this.throttledForAnimation(this.updateScrollbar);
         this.removeResizeListener = null;
         this.resizeObserver = null;
-        // TODO: handle edit mode
-        // if (this.editableMode && this.el.classList.contains("show")) {
-        //     // Use case: When the "Backdrop" option is disabled in edit mode.
-        //     // The page scrollbar must be adjusted and events must be added.
-        //     this.addModalNoBackdropEvents();
-        // }
     }
 
     destroy() {

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

@@ -27,6 +27,9 @@ export class Popup extends Interaction {
         this.modalEl = this.el.querySelector(".modal");
         /** @type {import("bootstrap").Modal} */
         this.bsModal = window.Modal.getOrCreateInstance(this.modalEl);
+        this.registerCleanup(() => {
+            this.bsModal.dispose();
+        });
 
         this.modalShownOnClickEl = this.el.querySelector(".modal[data-display='onClick']");
         if (this.modalShownOnClickEl) {
@@ -60,15 +63,6 @@ export class Popup extends Interaction {
         }
     }
 
-    destroy() {
-        // You cannot hide after dispose, so we do both here to make sure they
-        // trigger in order. The cleanup is not registered in setup so that the
-        // hide.bs.modal event isn't triggered (it is cleaned before destroy),
-        // and no cookie is set.
-        this.bsModal.hide();
-        this.bsModal.dispose();
-    }
-
     bindPopup() {
         let display = this.modalEl.dataset.display;
         let delay = parseInt(this.modalEl.dataset.showAfter);

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

@@ -5,8 +5,6 @@ import { Interaction } from "@website/core/interaction";
 
 export class SharedPopup extends Interaction {
     static selector = ".s_popup";
-    // TODO: support edit mode
-    disabledInEditableMode = false;
     dynamicContent = {
         // A popup element is composed of a `.s_popup` parent containing the
         // actual `.modal` BS modal. Our internal logic and events are hiding
@@ -28,16 +26,6 @@ export class SharedPopup extends Interaction {
 
     setup() {
         this.popupShown = false;
-
-        // TODO: support edit mode, maybe this can be removed completely.
-        // Popup are always closed when entering edit mode (see Popup interaction),
-        // this allows to make sure the class is sync on the .s_popup parent
-        // after that moment too.
-        // if (!this.editableMode) {
-            this.registerCleanup(() => {
-                this.popupShown = false;
-            });
-        // }
     }
 
     onModalHidden() {
@@ -52,4 +40,10 @@ export class SharedPopup extends Interaction {
     }
 }
 
-registry.category("website.active_elements").add("website.shared_popup", SharedPopup);
+registry
+    .category("website.active_elements")
+    .add("website.shared_popup", SharedPopup);
+
+registry
+    .category("website.editable_active_elements_builders")
+    .add("website.shared_popup", { Interaction: SharedPopup });