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/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,12 @@ 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(),
     };
 
     setup() {
@@ -20,17 +20,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/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

@@ -16,7 +16,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),
@@ -70,20 +69,12 @@ class ImageGalleryOption extends Plugin {
     }
 
     cleanForSave({ root }) {
+        // TODO This should not be needed if interaction's lifecycle worked.
         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");

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;