image gallery edit interaction

Author: bso-odoo

addons/html_builder/__manifest__.py

@@ -44,6 +44,7 @@
             ('remove', 'html_builder/static/src/website_preview/**/*'),
             ('remove', 'html_builder/static/src/website_mass_mailing/**/*'),
             ('remove', 'html_builder/static/src/website_builder/plugins/website_edit_service.js'),
+            ('remove', 'html_builder/static/src/interactions/**/*'),
         ],
         'html_builder.inside_builder_style': [
             ('include', 'web._assets_helpers'),
@@ -66,6 +67,13 @@
             'html_builder/static/tests/**/*',
             ('include', 'html_builder.assets'),
         ],
+        'web.assets_frontend': [
+            'html_builder/static/src/interactions/**/*',
+            ('remove', 'html_builder/static/src/interactions/**/*.edit.*'),
+        ],
+        'website.assets_edit_frontend': [
+            'html_builder/static/src/interactions/**/*.edit.*',
+        ],
     },
     'license': 'LGPL-3',
 }

addons/html_builder/static/src/builder.js

@@ -119,6 +119,7 @@ export class Builder extends Component {
                 replaceSnippet: async (snippet) => await this.snippetModel.replaceSnippet(snippet),
                 saveSnippet: (snippetEl, cleanForSaveHandlers) =>
                     this.snippetModel.saveSnippet(snippetEl, cleanForSaveHandlers),
+                getShared: () => this.editor.shared,
             },
             this.env.services
         );

addons/html_builder/static/src/core/anchor/anchor_plugin.js

@@ -19,14 +19,14 @@ export class AnchorPlugin extends Plugin {
     static dependencies = ["history"];
     static shared = ["createOrEditAnchorLink"];
     resources = {
-        on_clone_handlers: this.onClone.bind(this),
+        on_cloned_handlers: this.onCloned.bind(this),
         get_options_container_top_buttons: withSequence(
             0,
             this.getOptionsContainerTopButtons.bind(this)
         ),
     };
 
-    onClone({ cloneEl }) {
+    onCloned({ cloneEl }) {
         const anchorEls = getElementsWithOption(cloneEl, anchorSelector, anchorExclude);
         anchorEls.forEach((anchorEl) => this.deleteAnchor(anchorEl));
     }

addons/html_builder/static/src/core/clone_plugin.js

@@ -21,6 +21,17 @@ export class ClonePlugin extends Plugin {
         get_overlay_buttons: withSequence(2, {
             getButtons: this.getActiveOverlayButtons.bind(this),
         }),
+        // Resource definitions:
+        on_will_clone_handlers: [
+            // ({ originalEl: el }) => {
+            //     called on the original element before clone
+            // }
+        ],
+        on_cloned_handlers: [
+            // ({ cloneEl: cloneEl, originalEl: el }) => {
+            //     called after an element was cloned and inserted in the DOM
+            // }
+        ],
     };
 
     setup() {
@@ -65,13 +76,13 @@ export class ClonePlugin extends Plugin {
     }
 
     cloneElement(el, { position = "afterend", scrollToClone = false } = {}) {
-        // TODO snippet_will_be_cloned ?
+        this.dispatchTo("on_will_clone_handlers", { originalEl: el });
         // TODO cleanUI resource for each option
         const cloneEl = el.cloneNode(true);
         this.cleanElement(cloneEl);
         el.insertAdjacentElement(position, cloneEl);
         this.dependencies["builder-options"].updateContainers(cloneEl);
-        this.dispatchTo("on_clone_handlers", { cloneEl: cloneEl, originalEl: el });
+        this.dispatchTo("on_cloned_handlers", { cloneEl: cloneEl, originalEl: el });
         if (scrollToClone && !isElementInViewport(cloneEl)) {
             cloneEl.scrollIntoView({ behavior: "smooth", block: "center" });
         }

addons/html_builder/static/src/core/move_plugin.js

@@ -69,7 +69,7 @@ export class MovePlugin extends Plugin {
         get_overlay_buttons: withSequence(0, {
             getButtons: this.getActiveOverlayButtons.bind(this),
         }),
-        on_clone_handlers: this.onClone.bind(this),
+        on_cloned_handlers: this.onCloned.bind(this),
         on_remove_handlers: this.onRemove.bind(this),
     };
 
@@ -113,7 +113,7 @@ export class MovePlugin extends Plugin {
         return buttons;
     }
 
-    onClone({ cloneEl, originalEl }) {
+    onCloned({ cloneEl, originalEl }) {
         if (!isMovable(originalEl)) {
             return;
         }

addons/html_builder/static/src/core/save_plugin.js

@@ -12,6 +12,23 @@ export class SavePlugin extends Plugin {
 
     resources = {
         handleNewRecords: this.handleMutations,
+        // Resource definitions:
+        before_save_handlers: [
+            // () => {
+            //     called at the very beginning of the save process
+            // }
+        ],
+        clean_for_save_handlers: [
+            // ({root, preserveSelection = false}) => {
+            //     clean DOM before save (leaving edit mode)
+            //     root is the clone of a node that was o_dirty
+            // }
+        ],
+        save_handlers: [
+            // () => {
+            //     called at the very end of the save process
+            // }
+        ],
     };
 
     async save(isTranslation) {

addons/html_builder/static/src/interactions/image_gallery.edit.js

@@ -0,0 +1,25 @@
+import { Interaction } from "@web/public/interaction";
+import { registry } from "@web/core/registry";
+
+export class ImageGalleryEdit extends Interaction {
+    static selector = ".s_image_gallery";
+    dynamicContent = {
+        ".o_empty_gallery_alert": {
+            "t-on-click": this.onAddImage.bind(this),
+        },
+    };
+    setup() {
+        const containerEl = this.el.querySelector(
+            ".container, .container-fluid, .o_container_small"
+        );
+        this.renderAt("html_builder.empty_image_gallery_alert", {}, containerEl);
+    }
+    onAddImage() {
+        const applySpec = { editingElement: this.el };
+        this.services["website_edit"].applyAction("addImage", applySpec);
+    }
+}
+
+registry.category("public.interactions.edit").add("html_builder.image_gallery_edit", {
+    Interaction: ImageGalleryEdit,
+});

addons/html_builder/static/src/interactions/image_gallery.edit.xml

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+<t t-name="html_builder.empty_image_gallery_alert">
+    <div class="alert alert-info o_empty_gallery_alert text-center o_not_editable" contentEditable="false">
+        <i class="fa fa-plus-circle"/>
+        <span class="o_add_images"> Add Images</span>
+    </div>
+</t>
+
+</templates>

addons/html_builder/static/src/website_builder/plugins/edit_interaction_plugin.js

@@ -3,12 +3,19 @@ import { registry } from "@web/core/registry";
 
 export class EditInteractionPlugin extends Plugin {
     static id = "edit_interaction";
-    static dependencies = ["history"];
 
     resources = {
         normalize_handlers: this.restartInteractions.bind(this),
         option_visibility_updated: this.restartInteractions.bind(this),
         content_manually_updated_handlers: this.restartInteractions.bind(this),
+        before_save_handlers: () => this.stopInteractions(),
+        on_will_clone_handlers: ({ originalEl }) => {
+            this.stopInteractions(originalEl);
+        },
+        on_cloned_handlers: ({ originalEl, clonedEl }) => {
+            this.restartInteractions(originalEl);
+            this.restartInteractions(clonedEl);
+        },
     };
 
     setup() {
@@ -20,17 +27,12 @@ export class EditInteractionPlugin extends Plugin {
             { once: true }
         );
         const event = new CustomEvent("edit_interaction_plugin_loaded");
-        event.historyCallbacks = {
-            ignoreDOMMutations: this.dependencies.history.ignoreDOMMutations,
-        };
+        event.shared = this.config.getShared();
         window.parent.document.dispatchEvent(event);
     }
     destroy() {
         this.websiteEditService?.uninstallPatches?.();
-    }
-
-    destroy() {
-        this.stopInteractions(this.editable);
+        this.stopInteractions();
     }
 
     updateEditInteraction({ detail: { websiteEditService } }) {

addons/html_builder/static/src/website_builder/plugins/options/button_option_plugin.js

@@ -4,11 +4,11 @@ import { registry } from "@web/core/registry";
 class ButtonOptionPlugin extends Plugin {
     static id = "buttonOption";
     resources = {
-        on_clone_handlers: this.onClone.bind(this),
+        on_cloned_handlers: this.onCloned.bind(this),
         on_add_element_handlers: this.onAddElement.bind(this),
     };
 
-    onClone({ cloneEl }) {
+    onCloned({ cloneEl }) {
         if (cloneEl.matches("a.btn[data-snippet='s_button']")) {
             this.adaptButtons(cloneEl, false);
         }

addons/html_builder/static/src/website_builder/plugins/options/image_gallery_option.inside.scss

@@ -0,0 +1,10 @@
+.s_image_gallery {
+    &:has(.img) .o_empty_gallery_alert {
+        display: none;
+    }
+    .o_empty_gallery_alert {
+        .o_add_images {
+            cursor: pointer;
+        }
+    }
+}

addons/html_builder/static/src/website_builder/plugins/options/image_gallery_option_plugin.js

@@ -1,7 +1,6 @@
 import { registry } from "@web/core/registry";
 import { Plugin } from "@html_editor/plugin";
 import { applyModifications, loadImageInfo } from "@html_editor/utils/image_processing";
-import { _t } from "@web/core/l10n/translation";
 
 class ImageGalleryOption extends Plugin {
     static id = "imageGalleryOption";
@@ -15,8 +14,6 @@ class ImageGalleryOption extends Plugin {
         ],
         builder_actions: this.getActions(),
         system_classes: ["o_empty_gallery_alert"],
-        clean_for_save_handlers: this.cleanForSave.bind(this),
-        normalize_handlers: this.updateAlertBanner.bind(this),
         on_reorder_items_handlers: this.reorderGalleryItems.bind(this),
         on_remove_handlers: this.onRemove.bind(this),
         after_remove_handlers: this.afterRemove.bind(this),
@@ -26,8 +23,15 @@ class ImageGalleryOption extends Plugin {
         return {
             addImage: this.addImageAction,
             removeAllImages: {
-                apply: ({ editingElement }) => {
-                    this.insertEmptyGalleryAlert(this.getContainer(editingElement));
+                apply: ({ editingElement: el }) => {
+                    const containerEl = el.querySelector(
+                        ".container, .container-fluid, .o_container_small"
+                    );
+                    for (const subEl of containerEl.querySelectorAll(
+                        ":scope > *:not(.o_empty_gallery_alert)"
+                    )) {
+                        subEl.remove();
+                    }
                 },
             },
             setImageGalleryLayout: {
@@ -69,21 +73,6 @@ class ImageGalleryOption extends Plugin {
         }
     }
 
-    cleanForSave({ root }) {
-        for (const emptyGalleryAlert of root.querySelectorAll(".o_empty_gallery_alert")) {
-            emptyGalleryAlert.remove();
-        }
-    }
-
-    updateAlertBanner() {
-        const imageGalleries = this.document.querySelectorAll(".s_image_gallery");
-        for (const imageGallery of imageGalleries) {
-            const container = this.getContainer(imageGallery);
-            if (!container.querySelector("img") && !container.querySelector(".alert")) {
-                this.insertEmptyGalleryAlert(container);
-            }
-        }
-    }
     reorderGalleryItems({ elementToReorder, position, optionName }) {
         if (optionName === "GalleryImageList") {
             const editingGalleryElement = elementToReorder.closest(".s_image_gallery");
@@ -145,46 +134,6 @@ class ImageGalleryOption extends Plugin {
         };
     }
 
-    insertEmptyGalleryAlert(container) {
-        const addImg = document.createElement("div");
-        addImg.classList.add(
-            "alert",
-            "alert-info",
-            "o_empty_gallery_alert",
-            "text-center",
-            "o_not_editable"
-        );
-        addImg.contentEditable = false;
-        const text = document.createElement("span");
-        text.classList.add("o_add_images");
-        text.textContent = _t(" Add Images");
-        text.style.cursor = "pointer";
-
-        const icon = document.createElement("i");
-        icon.classList.add("fa", "fa-plus-circle");
-
-        addImg.appendChild(icon);
-        addImg.appendChild(text);
-        container.replaceChildren(addImg);
-
-        this.addDomListener(addImg, "click", ({ target }) => {
-            const editingElement = target.closest(".s_image_gallery");
-            const applySpec = { editingElement };
-            this.dependencies.operation.next(
-                () => {
-                    this.addImageAction.apply(applySpec);
-                    this.dependencies.history.addStep();
-                },
-                {
-                    load: async () => {
-                        const loadResult = await this.addImageAction.load({ editingElement });
-                        applySpec.loadResult = loadResult;
-                    },
-                }
-            );
-        });
-    }
-
     /**
      * Set the images in the gallery by following the wanted layout
      * @param {Element} imageGalleryElement

addons/html_builder/static/src/website_builder/plugins/options/popup_option_plugin.js

@@ -25,7 +25,7 @@ class PopupOptionPlugin extends Plugin {
             dropIn: ":not(p).oe_structure:not(.oe_structure_solo):not([data-snippet] *), :not(.o_mega_menu):not(p)[data-oe-type=html]:not([data-snippet] *)",
         },
         builder_actions: this.getActions(),
-        on_clone_handlers: this.onClone.bind(this),
+        on_cloned_handlers: this.onCloned.bind(this),
         on_add_element_handlers: this.onAddElement.bind(this),
         target_show: this.onTargetShow.bind(this),
         target_hide: this.onTargetHide.bind(this),
@@ -102,7 +102,7 @@ class PopupOptionPlugin extends Plugin {
         };
     }
 
-    onClone({ cloneEl }) {
+    onCloned({ cloneEl }) {
         if (cloneEl.matches(".s_popup")) {
             this.assignUniqueID(cloneEl);
         }

addons/html_builder/static/src/website_builder/plugins/website_edit_service.js

@@ -50,6 +50,7 @@ registry.category("services").add("website_edit", {
         let editMode = false;
         const patches = [];
         const historyCallbacks = {};
+        const shared = {};
 
         const update = (target, mode) => {
             // editMode = true;
@@ -133,13 +134,31 @@ registry.category("services").add("website_edit", {
             }
             patches.length = 0;
         };
+        const applyAction = (actionId, spec) => {
+            const action = shared.builderActions.getAction(actionId);
+            shared.operation.next(
+                () => {
+                    action.apply(spec);
+                    shared.history.addStep();
+                },
+                {
+                    load: async () => {
+                        if (action.load) {
+                            const loadResult = await action.load(spec);
+                            spec.loadResult = loadResult;
+                        }
+                    },
+                }
+            );
+        };
 
         const websiteEditService = {
             isEditingTranslations,
             update,
             stop,
             installPatches,
             uninstallPatches,
+            applyAction,
         };
 
         // Transfer the iframe website_edit service to the EditInteractionPlugin
@@ -151,7 +170,8 @@ registry.category("services").add("website_edit", {
                     },
                 })
             );
-            Object.assign(historyCallbacks, ev.historyCallbacks);
+            Object.assign(shared, ev.shared);
+            historyCallbacks.ignoreDOMMutations = shared.history.ignoreDOMMutations;
         });
 
         return websiteEditService;