Master mysterious egg loco 1

addons/html_builder/__manifest__.py

@@ -29,6 +29,7 @@
     'assets': {
         'web.assets_backend': [
             'html_builder/static/src/website_preview/**/*',
+            ('remove', 'html_builder/static/src/website_preview/plugins/**/*'),
         ],
         # this bundle is lazy loaded when the editor is ready
         'html_builder.assets': [
@@ -42,6 +43,7 @@
 
             'html_builder/static/src/**/*',
             ('remove', 'html_builder/static/src/website_preview/**/*'),
+            'html_builder/static/src/website_preview/plugins/**/*',
         ],
         'html_builder.inside_builder_style': [
             ('include', 'web._assets_helpers'),

addons/html_builder/static/src/builder.js

@@ -68,17 +68,17 @@ export class Builder extends Component {
             {
                 Plugins,
                 onChange: ({ isPreviewing }) => {
-                    this.state.canUndo = this.editor.shared.history.canUndo();
-                    this.state.canRedo = this.editor.shared.history.canRedo();
                     if (!isPreviewing) {
+                        this.state.canUndo = this.editor.shared.history.canUndo();
+                        this.state.canRedo = this.editor.shared.history.canRedo();
                         this.updateInvisibleEls();
+                        editorBus.trigger("UPDATE_EDITING_ELEMENT");
+                        editorBus.trigger("DOM_UPDATED");
                     }
-                    editorBus.trigger("UPDATE_EDITING_ELEMENT");
-                    editorBus.trigger("DOM_UPDATED", { isPreviewing });
                 },
                 resources: {
                     on_mobile_preview_clicked: () => {
-                        editorBus.trigger("DOM_UPDATED", { isPreviewing: false });
+                        editorBus.trigger("DOM_UPDATED");
                     },
                     change_current_options_containers_listeners: (currentOptionsContainers) => {
                         this.state.currentOptionsContainers = currentOptionsContainers;

addons/html_builder/static/src/core/building_blocks/builder_range.js

@@ -77,4 +77,16 @@ export class BuilderRange extends Component {
         }
         return value;
     }
+
+    get className() {
+        return this.props.min > this.props.max ? "o_we_inverted_range" : "";
+    }
+
+    get min() {
+        return this.props.min > this.props.max ? this.props.max : this.props.min;
+    }
+
+    get max() {
+        return this.props.min > this.props.max ? this.props.min : this.props.max;
+    }
 }

addons/html_builder/static/src/core/building_blocks/builder_range.scss

@@ -0,0 +1,17 @@
+input[type="range"].o_we_inverted_range {
+    // TODO: improve the style of this
+    transform: rotate(180deg);
+
+    &::-moz-range-track {
+        background-color: $o-we-sidebar-content-field-progress-active-color;
+    }
+    &::-moz-range-progress {
+        background-color: $o-we-sidebar-content-field-progress-color;
+    }
+    &::-ms-fill-lower {
+        background-color: $o-we-sidebar-content-field-progress-color;
+    }
+    &::-ms-fill-upper {
+        background-color: $o-we-sidebar-content-field-progress-active-color;
+    }
+}

addons/html_builder/static/src/core/building_blocks/builder_range.xml

@@ -6,8 +6,9 @@
         <div class="d-flex flex-row flex-nowrap align-items-center" t-att-data-action-id="props.action" style="width: 60px">
             <input
             type="range"
-            t-att-min="props.min"
-            t-att-max="props.max"
+            t-att-class="className"
+            t-att-min="min"
+            t-att-max="max"
             t-att-step="props.step"
             t-att-value="rangeInputValue"
             t-on-change="onChange"

addons/html_builder/static/src/core/building_blocks/builder_select.js

@@ -16,6 +16,7 @@ export class BuilderSelect extends Component {
         ...basicContainerBuilderComponentProps,
         id: { type: String, optional: true },
         slots: Object,
+        defaultValue: { type: String, optional: true }, // TODO, check: maybe not the best position
     };
     static components = {
         Dropdown,

addons/html_builder/static/src/core/building_blocks/utils.js

@@ -25,6 +25,9 @@ export function useDomState(getState) {
 }
 
 function querySelectorAll(targets, selector) {
+    if (!selector) {
+        return [];
+    }
     const elements = new Set();
     for (const target of targets) {
         for (const el of target.querySelectorAll(selector)) {
@@ -38,10 +41,31 @@ export function useBuilderComponent() {
     const comp = useComponent();
     const newEnv = {};
     const oldEnv = useEnv();
-    if (comp.props.applyTo) {
-        let editingElements = querySelectorAll(oldEnv.getEditingElements(), comp.props.applyTo);
+    if (comp.props.applyToIfExist || comp.props.applyTo) {
+        // There is a potential change of the editing elements
+        let editingElements;
+        const setEditingElements = () => {
+            const potentialEditingElements = querySelectorAll(
+                oldEnv.getEditingElements(),
+                comp.props.applyToIfExist
+            );
+            if (potentialEditingElements.length) {
+                // It exists elements matching 'applyToIfExist' -> use them
+                editingElements = potentialEditingElements;
+            } else if (comp.props.applyTo) {
+                // There are no elements matching 'applyToIfExist' but there is
+                // an 'applyTo' -> use the elements coming from it.
+                editingElements = querySelectorAll(oldEnv.getEditingElements(), comp.props.applyTo);
+            } else {
+                // there are not elements matching 'applyToIfExist' and no
+                // 'applyTo' -> use the old editing elements instead.
+                editingElements = oldEnv.getEditingElements();
+            }
+        };
+
+        setEditingElements();
         useBus(oldEnv.editorBus, "UPDATE_EDITING_ELEMENT", () => {
-            editingElements = querySelectorAll(oldEnv.getEditingElements(), comp.props.applyTo);
+            setEditingElements();
         });
         newEnv.getEditingElements = () => editingElements;
         newEnv.getEditingElement = () => editingElements[0];
@@ -164,6 +188,7 @@ export function useSelectableComponent(id, { onItemChange } = {}) {
     const refreshCurrentItemDebounced = useDebounced(refreshCurrentItem, 0, { immediate: true });
     let currentSelectedItem;
     const env = useEnv();
+    const comp = useComponent();
 
     function refreshCurrentItem() {
         let currentItem;
@@ -174,6 +199,14 @@ export function useSelectableComponent(id, { onItemChange } = {}) {
                 itemPriority = selectableItem.priority;
             }
         }
+        if (!currentItem && comp.props.defaultValue) {
+            // Check if the default value can be found on the selectableItems.
+            currentItem = selectableItems.find((selectableItem) =>
+                selectableItem
+                    .getActions()
+                    .find((action) => action.actionValue === comp.props.defaultValue)
+            );
+        }
         if (currentItem && currentItem !== currentSelectedItem) {
             currentSelectedItem = currentItem;
             env.dependencyManager.triggerDependencyUpdated();
@@ -191,12 +224,7 @@ export function useSelectableComponent(id, { onItemChange } = {}) {
     }
 
     onMounted(refreshCurrentItem);
-    useBus(env.editorBus, "DOM_UPDATED", (ev) => {
-        if (ev.detail.isPreviewing) {
-            return;
-        }
-        refreshCurrentItem();
-    });
+    useBus(env.editorBus, "DOM_UPDATED", refreshCurrentItem);
     function cleanSelectedItem(...args) {
         if (currentSelectedItem) {
             currentSelectedItem.clean(...args);
@@ -247,6 +275,8 @@ export function useSelectableItemComponent(id, { getLabel = () => {} } = {}) {
     }
 
     if (id) {
+        // Should be in useClickableBuilderComponent -> remove it here and in
+        // builder_checkbox
         useDependencyDefinition(id, {
             isActive: isSelectableActive,
             getActions,
@@ -487,6 +517,7 @@ export function useVisibilityObserver(contentName, callback) {
 
 export const basicContainerBuilderComponentProps = {
     applyTo: { type: String, optional: true },
+    applyToIfExist: { type: String, optional: true },
     preview: { type: Boolean, optional: true },
     inheritedActions: { type: Array, element: String, optional: true },
     // preview: { type: Boolean, optional: true },

addons/html_builder/static/src/core/plugins/drop_zone_plugin.js

@@ -134,11 +134,11 @@ export class DropZonePlugin extends Plugin {
         }
         const dropZone = position
             ? closest(touching(this.dropZoneElements, position), position) ||
-            closest(this.dropZoneElements, position)
+              closest(this.dropZoneElements, position)
             : closest(this.dropZoneElements, {
-                x: window.innerWidth / 2,
-                y: window.innerHeight / 2,
-            });
+                  x: window.innerWidth / 2,
+                  y: window.innerHeight / 2,
+              });
         if (!dropZone) {
             this.clearDropZone();
             return;
@@ -160,7 +160,6 @@ export class DropZonePlugin extends Plugin {
             this.dispatchTo("on_add_element_handlers", { elementToAdd: elementToAdd });
             scrollToWindow(elementToAdd, { behavior: "smooth", offset: 50 });
             this.dependencies.history.addStep();
-            this.dispatchTo("update_interactions", elementToAdd);
         };
     }
 }

addons/html_builder/static/src/core/plugins/replace/replace_plugin.js

@@ -50,7 +50,6 @@ export class ReplacePlugin extends Plugin {
             this.dependencies.history.addStep();
             this.dependencies["builder-options"].updateContainers(newSnippet);
             // TODO post snippet drop (onBuild,...)
-            this.dispatchTo("update_interactions", newSnippet);
         }
     }
 }

addons/html_builder/static/src/plugins/background_option/background_image_option_plugin.js

@@ -3,6 +3,7 @@ import {
     backgroundImageCssToParts,
     backgroundImagePartsToCss,
     getBgImageURLFromEl,
+    isBackgroundImageAttribute,
 } from "@html_builder/utils/utils_css";
 import { Plugin } from "@html_editor/plugin";
 import { removeOnImageChangeAttrs } from "@html_editor/utils/image_processing";
@@ -12,11 +13,12 @@ import { getBackgroundImageColor } from "./background_image_option";
 
 // TODO: support the setTarget
 
-class BackgroundImageOptionPlugin extends Plugin {
+export class BackgroundImageOptionPlugin extends Plugin {
     static id = "backgroundImageOption";
     static dependencies = ["builderActions", "media"];
     resources = {
         builder_actions: this.getActions(),
+        change_editing_el: this.onTargetChange.bind(this),
     };
     getActions() {
         return {
@@ -38,7 +40,7 @@ class BackgroundImageOptionPlugin extends Plugin {
                     if (!filterEl) {
                         filterEl = document.createElement("div");
                         filterEl.classList.add("o_we_bg_filter");
-                        const lastBackgroundEl = this.getLastPreFilterLayerElement();
+                        const lastBackgroundEl = this.getLastPreFilterLayerElement(editingElement);
                         if (lastBackgroundEl) {
                             lastBackgroundEl.insertAdjacentElement("afterend", filterEl);
                         } else {
@@ -75,6 +77,7 @@ class BackgroundImageOptionPlugin extends Plugin {
                     this.applyReplaceBackgroundImage.bind(this)({
                         editingElement: editingElement,
                         loadResult: "",
+                        param: { isCleaning: true },
                     });
                 },
             },
@@ -96,6 +99,33 @@ class BackgroundImageOptionPlugin extends Plugin {
             },
         };
     }
+    onTargetChange({ newEditingEl, oldEditingEl }) {
+        // When we change the target of this option we need to transfer the
+        // background-image and the dataset information relative to this image
+        // from the old target to the new one.
+        const oldBgURL = getBgImageURLFromEl(oldEditingEl);
+        const isModifiedImage = oldEditingEl.classList.contains("o_modified_image_to_save");
+        const filteredOldDataset = Object.entries(oldEditingEl.dataset).filter(([key]) =>
+            isBackgroundImageAttribute(key)
+        );
+        // Delete the dataset information relative to the background-image of
+        // the old target.
+        filteredOldDataset.forEach(([key]) => {
+            delete oldEditingEl.dataset[key];
+        });
+        // It is important to delete ".o_modified_image_to_save" from the old
+        // target as its image source will be deleted.
+        oldEditingEl.classList.remove("o_modified_image_to_save");
+        this.setImageBackground(oldEditingEl, "");
+        // Apply the changes on the new editing element
+        if (oldBgURL) {
+            this.setImageBackground(newEditingEl, oldBgURL);
+            filteredOldDataset.forEach(([key, value]) => {
+                newEditingEl.dataset[key] = value;
+            });
+            newEditingEl.classList.toggle("o_modified_image_to_save", isModifiedImage);
+        }
+    }
     loadReplaceBackgroundImage() {
         return new Promise((resolve) => {
             const onClose = this.dependencies.media.openMediaDialog({
@@ -107,8 +137,13 @@ class BackgroundImageOptionPlugin extends Plugin {
             onClose.then(resolve);
         });
     }
-    applyReplaceBackgroundImage({ editingElement, loadResult: imageSrc }) {
-        if (!imageSrc) {
+    applyReplaceBackgroundImage({
+        editingElement,
+        loadResult: imageSrc,
+        param: { isCleaning = false },
+    }) {
+        if (!isCleaning && !imageSrc) {
+            // Do nothing: no images has been selected on the media dialog
             return;
         }
         this.setImageBackground(editingElement, imageSrc);
@@ -148,7 +183,7 @@ class BackgroundImageOptionPlugin extends Plugin {
             value: combined,
         });
     }
-    getLastPreFilterLayerElement() {
+    getLastPreFilterLayerElement(editingElement) {
         return null;
     }
 }

addons/html_builder/static/src/plugins/background_option/background_option.js

@@ -26,4 +26,7 @@ export class BackgroundOption extends Component {
     setup() {
         this.isActiveItem = useIsActiveItem();
     }
+    showColorFilter() {
+        return this.isActiveItem("toggle_bg_image_id");
+    }
 }

addons/html_builder/static/src/plugins/background_option/background_option.xml

@@ -29,7 +29,7 @@
         <BackgroundPositionOption/>
         <!-- TODO: BackgroundOptimize-->
         <!-- Color filter -->
-        <BuilderRow t-if="isActiveItem('toggle_bg_image_id')" label.translate="Color Filter" level="2">
+        <BuilderRow t-if="this.showColorFilter()" label.translate="Color Filter" level="2">
             <!-- TODO handle all the attributes -->
             <BuilderColorPicker action="'selectFilterColor'"/>
         </BuilderRow>

addons/html_builder/static/src/plugins/background_option/background_option_plugin.js

@@ -9,7 +9,7 @@ class BackgroundOptionPlugin extends Plugin {
         builder_options: [
             // TODO: add the other options that need BackgroundComponent
             {
-                selector: "section",
+                selector: ".sectionaaa",
                 OptionComponent: BackgroundOption,
                 props: {
                     withColors: true,

addons/html_builder/static/src/plugins/background_option/background_shape_option_plugin.js

@@ -7,7 +7,7 @@ import { backgroundShapesDefinition } from "./background_shapes_definition";
 import { ShapeSelector } from "../shape/shape_selector";
 import { getDefaultColors } from "./background_shape_option";
 
-class BackgroundShapeOptionPlugin extends Plugin {
+export class BackgroundShapeOptionPlugin extends Plugin {
     static id = "backgroundShapeOption";
     static dependencies = ["customizeTab"];
     resources = {

addons/html_builder/static/src/plugins/process_steps_option_plugin.js

@@ -13,6 +13,11 @@ class ProcessStepsOptionPlugin extends Plugin {
             selector: this.selector,
         },
         builder_actions: this.getActions(),
+        // The reload of the connectors is done at the
+        // 'content_updated_handlers' (each time there is a DOM mutation) and
+        // not at the normalize as there are cases where we want to reload the
+        // connectors even if there were no step added (e.g: a column of the
+        // snippet is being resized).
         content_updated_handlers: (rootEl) =>
             applyFunDependOnSelectorAndExclude(reloadConnectors, rootEl, this.selector),
     };

addons/html_builder/static/src/sidebar/option_container.xml

@@ -41,7 +41,7 @@
         </div>
         <div class="we-bg-options-container pb-3" t-ref="content">
             <t t-foreach="props.options" t-as="option" t-key="option.id">
-                <BuilderContext applyTo="option.applyTo">
+                <BuilderContext applyTo="option.applyTo" applyToIfExist="option.applyToIfExist">
                     <t t-if="option.OptionComponent" t-component="option.OptionComponent" t-props="option.props || {}"></t>
                     <t t-else="" t-call="{{option.template}}"/>
                 </BuilderContext>