Master mysterious egg loco 1

addons/html_builder/__manifest__.py

@@ -42,6 +42,7 @@
 
             'html_builder/static/src/**/*',
             ('remove', 'html_builder/static/src/website_preview/**/*'),
+            ('remove', 'html_builder/static/src/website_builder/tests/**/*'),
         ],
         'html_builder.inside_builder_style': [
             ('include', 'web._assets_helpers'),
@@ -56,6 +57,7 @@
         'web.assets_unit_tests': [
             'html_builder/static/tests/**/*',
             ('include', 'html_builder.assets'),
+            'html_builder/static/src/website_builder/tests/**/*',
         ],
     },
     'license': 'LGPL-3',

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

@@ -77,4 +77,17 @@ export class BuilderRange extends Component {
         }
         return value;
     }
+
+    get className() {
+        const baseClasses = "p-0 border-0";
+        return this.props.min > this.props.max ? `${baseClasses} o_we_inverted_range` : baseClasses;
+    }
+
+    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,9 +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"
-            class="p-0 border-0"
-            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/utils.js

@@ -3,6 +3,7 @@ import {
     onMounted,
     onWillDestroy,
     onWillStart,
+    onWillUpdateProps,
     useComponent,
     useEffect,
     useEnv,
@@ -39,18 +40,27 @@ export function useBuilderComponent() {
     const comp = useComponent();
     const newEnv = {};
     const oldEnv = useEnv();
-    if (comp.props.applyTo) {
-        let editingElements = querySelectorAll(oldEnv.getEditingElements(), comp.props.applyTo);
-        const updateEditingElements = () => {
-            editingElements = querySelectorAll(oldEnv.getEditingElements(), comp.props.applyTo);
-        };
-        oldEnv.editorBus.addEventListener("UPDATE_EDITING_ELEMENT", updateEditingElements);
-        newEnv.getEditingElements = () => editingElements;
-        newEnv.getEditingElement = () => editingElements[0];
-        onWillDestroy(() => {
-            oldEnv.editorBus.removeEventListener("UPDATE_EDITING_ELEMENT", updateEditingElements);
-        });
-    }
+    let editingElements;
+    let applyTo = comp.props.applyTo;
+    const updateEditingElements = () => {
+        editingElements = applyTo
+            ? querySelectorAll(oldEnv.getEditingElements(), applyTo)
+            : oldEnv.getEditingElements();
+    };
+    updateEditingElements();
+    oldEnv.editorBus.addEventListener("UPDATE_EDITING_ELEMENT", updateEditingElements);
+    onWillUpdateProps((nextProps) => {
+        if (comp.props.applyTo !== nextProps.applyTo) {
+            applyTo = nextProps.applyTo;
+            oldEnv.editorBus.trigger("UPDATE_EDITING_ELEMENT");
+            oldEnv.editorBus.trigger("DOM_UPDATED");
+        }
+    });
+    onWillDestroy(() => {
+        oldEnv.editorBus.removeEventListener("UPDATE_EDITING_ELEMENT", updateEditingElements);
+    });
+    newEnv.getEditingElements = () => editingElements;
+    newEnv.getEditingElement = () => editingElements[0];
     const weContext = {};
     for (const key in basicContainerBuilderComponentProps) {
         if (key in comp.props) {
@@ -254,7 +264,6 @@ export function useSelectableItemComponent(id, { getLabel = () => {} } = {}) {
         useDependencyDefinition(id, {
             isActive: isSelectableActive,
             getActions,
-            onBeforeApplyAction: () => {},
             cleanSelectedItem: env.selectableContext?.cleanSelectedItem,
         });
     }

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,9 +13,10 @@ 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"];
+    static shared = ["changeEditingEl"];
     resources = {
         builder_actions: this.getActions(),
     };
@@ -38,7 +40,13 @@ class BackgroundImageOptionPlugin extends Plugin {
                     if (!filterEl) {
                         filterEl = document.createElement("div");
                         filterEl.classList.add("o_we_bg_filter");
-                        const lastBackgroundEl = this.getLastPreFilterLayerElement();
+                        let lastBackgroundEl;
+                        for (const fn of this.getResource("background_filter_target_providers")) {
+                            lastBackgroundEl = fn(editingElement);
+                            if (lastBackgroundEl) {
+                                break;
+                            }
+                        }
                         if (lastBackgroundEl) {
                             lastBackgroundEl.insertAdjacentElement("afterend", filterEl);
                         } else {
@@ -77,6 +85,7 @@ class BackgroundImageOptionPlugin extends Plugin {
                         loadResult: "",
                         param: { forceClean: true },
                     });
+                    this.dispatchTo("on_bg_image_hide_handlers", editingElement);
                 },
             },
             replaceBgImage: {
@@ -97,6 +106,39 @@ class BackgroundImageOptionPlugin extends Plugin {
             },
         };
     }
+    /**
+     * Transfers the background-image and the dataset information relative to
+     * this image from the old editing element to the new one.
+     * @param {HTMLElement} oldEditingEl - The old editing element.
+     * @param {HTMLElement} newEditingEl - The new editing element.
+     */
+    changeEditingEl(oldEditingEl, newEditingEl) {
+        // 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.
+        for (const [key] of filteredOldDataset) {
+            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);
+            for (const [key, value] of filteredOldDataset) {
+                newEditingEl.dataset[key] = value;
+            }
+            newEditingEl.classList.toggle("o_modified_image_to_save", isModifiedImage);
+        }
+    }
     loadReplaceBackgroundImage() {
         return new Promise((resolve) => {
             const onClose = this.dependencies.media.openMediaDialog({
@@ -154,9 +196,6 @@ class BackgroundImageOptionPlugin extends Plugin {
             value: combined,
         });
     }
-    getLastPreFilterLayerElement() {
-        return null;
-    }
 }
 
 registry

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

@@ -1,4 +1,5 @@
 import { applyFunDependOnSelectorAndExclude } from "@html_builder/plugins/utils";
+import { getSelectorParams } from "@html_builder/utils/utils";
 import { Plugin } from "@html_editor/plugin";
 import { registry } from "@web/core/registry";
 import { BackgroundOption } from "./background_option";
@@ -8,18 +9,6 @@ class BackgroundOptionPlugin extends Plugin {
     resources = {
         builder_options: [
             // TODO: add the other options that need BackgroundComponent
-            {
-                selector: "section",
-                OptionComponent: BackgroundOption,
-                props: {
-                    withColors: true,
-                    withImages: true,
-                    // todo: handle with_videos
-                    withShapes: true,
-                    withGradient: true,
-                    withColorCombinations: true,
-                },
-            },
             // Background-color only
             {
                 selector: ".s_chart",
@@ -36,15 +25,10 @@ class BackgroundOptionPlugin extends Plugin {
         system_classes: ["o_colored_level"],
     };
     setup() {
-        this.coloredLevelBackgroundParams = [];
-        for (const builderOption of this.resources.builder_options) {
-            if (builderOption.props.withColors && builderOption.props.withColorCombinations) {
-                this.coloredLevelBackgroundParams.push({
-                    selector: builderOption.selector,
-                    exclude: builderOption.exclude || "",
-                });
-            }
-        }
+        this.coloredLevelBackgroundParams = getSelectorParams(
+            this.getResource("builder_options"),
+            BackgroundOption
+        );
     }
     normalize(root) {
         for (const coloredLevelBackgroundParam of this.coloredLevelBackgroundParams) {

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

@@ -4,13 +4,11 @@
 <t t-name="html_builder.BackgroundPositionOverlay">
     <div class="o_we_background_position_overlay" t-ref="backgroundOverlay">
         <div class="o_we_overlay_content position-absolute" t-ref="overlayContent">
-            <div class="o_overlay_background" t-ref="overlayBackground">
-                <div t-on-mousedown.prevent="onDragBackgroundStart"
-                    t-ref="parentBgDragger"
-                    title="Click and drag the background to adjust its position!"
-                    >
-                    <t t-out="props.outerHtmlEditingElement"/>
-                </div>
+            <div class="o_overlay_background" t-on-mousedown.prevent="onDragBackgroundStart"
+                t-ref="parentBgDragger"
+                title="Click and drag the background to adjust its position!"
+                >
+                <t t-out="props.outerHtmlEditingElement"/>
             </div>
             <div class="o_we_overlay_buttons position-absolute d-flex m-1" style="top: 0">
                 <button class="btn btn-primary me-1 o_btn_apply" t-on-click="apply">Apply</button>

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

@@ -6,12 +6,16 @@ import { pick } from "@web/core/utils/objects";
 import { backgroundShapesDefinition } from "./background_shapes_definition";
 import { ShapeSelector } from "../shape/shape_selector";
 import { getDefaultColors } from "./background_shape_option";
+import { withSequence } from "@html_editor/utils/resource";
 
-class BackgroundShapeOptionPlugin extends Plugin {
+export class BackgroundShapeOptionPlugin extends Plugin {
     static id = "backgroundShapeOption";
     static dependencies = ["customizeTab"];
     resources = {
         builder_actions: this.getActions(),
+        background_shape_target_providers: withSequence(5, (editingElement) =>
+            editingElement.querySelector(":scope > .o_we_bg_filter")
+        ),
     };
     static shared = [
         "getShapeStyleUrl",
@@ -270,13 +274,6 @@ class BackgroundShapeOptionPlugin extends Plugin {
         colors = Object.assign(defaultColors, colors);
         return pick(colors, ...defaultKeys);
     }
-    /**
-     *
-     * @param {HTMLElement} editingElement
-     */
-    getLastPreShapeLayerElement(editingElement) {
-        return editingElement.querySelector(":scope > .o_we_bg_filter");
-    }
     /**
      * Returns the default colors for the a shape in the selector.
      *
@@ -348,9 +345,15 @@ class BackgroundShapeOptionPlugin extends Plugin {
             this.removeShapeEl(shapeContainerEl);
         }
         if (newContainer) {
-            const preShapeLayerElement = this.getLastPreShapeLayerElement(editingElement);
-            if (preShapeLayerElement) {
-                preShapeLayerElement.insertAdjacentElement("afterend", newContainer);
+            let preShapeLayerEl;
+            for (const fn of this.getResource("background_shape_target_providers")) {
+                preShapeLayerEl = fn(editingElement);
+                if (preShapeLayerEl) {
+                    break;
+                }
+            }
+            if (preShapeLayerEl) {
+                preShapeLayerEl.insertAdjacentElement("afterend", newContainer);
             } else {
                 editingElement.prepend(newContainer);
             }

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

@@ -134,3 +134,25 @@ export function toRatio(value) {
     const ratio = inputValueAsNumber >= 0 ? 1 + inputValueAsNumber : 1 / (1 - inputValueAsNumber);
     return `${ratio.toFixed(2)}x`;
 }
+
+/**
+ * Returns the list of selector, exclude and applyTo on which an option is
+ * applied.
+ * @param {Array<Object>} builderOptions - All the builder options
+ * @param {Class} optionClass - The applied option
+ */
+export function getSelectorParams(builderOptions, optionClass) {
+    const selectorParams = [];
+    const optionClassName = optionClass.name;
+    for (const builderOption of builderOptions) {
+        const { OptionComponent } = builderOption;
+        if (
+            OptionComponent &&
+            (OptionComponent.name === optionClassName ||
+                OptionComponent.prototype instanceof optionClass)
+        ) {
+            selectorParams.push(builderOption);
+        }
+    }
+    return selectorParams;
+}