temp

odoo-dev · Jan 16, 2025 · b40b921 · b40b921
1 parent 85b69ea
commit b40b921
Show file tree

Hide file tree

Showing 23 changed files with 122 additions and 81 deletions.
diff --git a/addons/html_builder/static/src/builder/builder_components/builder_button.xml b/addons/html_builder/static/src/builder/builder_components/builder_button.xml
@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
 
 <t t-name="html_builder.BuilderButton">
-    <BuilderComponent dependencies="props.dependencies">
+    <BuilderComponent isVisible="props.isVisible">
         <button type="button" class="btn btn-primary"
             t-att-data-action-id="this.props.action"
             t-att-data-class-action="this.props.classAction"

diff --git a/addons/html_builder/static/src/builder/builder_components/builder_button_group.js b/addons/html_builder/static/src/builder/builder_components/builder_button_group.js
@@ -12,7 +12,6 @@ export class BuilderButtonGroup extends Component {
     static props = {
         ...basicContainerBuilderComponentProps,
         id: { type: String, optional: true },
-        dependencies: { type: [String, Array], optional: true },
         slots: { type: Object, optional: true },
     };
     static components = { BuilderComponent };

diff --git a/addons/html_builder/static/src/builder/builder_components/builder_button_group.xml b/addons/html_builder/static/src/builder/builder_components/builder_button_group.xml
@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
 
 <t t-name="html_builder.BuilderButtonGroup">
-    <BuilderComponent dependencies="props.dependencies">
+    <BuilderComponent isVisible="props.isVisible">
         <div class="btn-group w-100" t-ref="root">
             <t t-slot="default"/>
         </div>

diff --git a/addons/html_builder/static/src/builder/builder_components/builder_checkbox.xml b/addons/html_builder/static/src/builder/builder_components/builder_checkbox.xml
@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
 
 <t t-name="html_builder.BuilderCheckbox">
-    <BuilderComponent dependencies="props.dependencies">
+    <BuilderComponent isVisible="props.isVisible">
         <div t-att-data-action-id="this.props.action">
             <CheckBox className="getClassName()" onChange="onChange" value="state.isActive"/>
         </div>

diff --git a/addons/html_builder/static/src/builder/builder_components/builder_colorpicker.xml b/addons/html_builder/static/src/builder/builder_components/builder_colorpicker.xml
@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
 
 <t t-name="html_builder.BuilderColorPicker">
-    <BuilderComponent dependencies="props.dependencies">
+    <BuilderComponent isVisible="props.isVisible">
         <div>
             <ColorSelector
                 type="this.colorType"

diff --git a/addons/html_builder/static/src/builder/builder_components/builder_context.js b/addons/html_builder/static/src/builder/builder_components/builder_context.js
@@ -7,7 +7,7 @@ import {
 
 export class BuilderContext extends Component {
     static template = xml`
-        <BuilderComponent dependencies="props.dependencies">
+        <BuilderComponent isVisible="props.isVisible">
             <t t-slot="default"/>
         </BuilderComponent>
     `;

diff --git a/addons/html_builder/static/src/builder/builder_components/builder_number_input.xml b/addons/html_builder/static/src/builder/builder_components/builder_number_input.xml
@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
 
 <t t-name="html_builder.BuilderNumberInput">
-    <BuilderComponent dependencies="props.dependencies">
+    <BuilderComponent isVisible="props.isVisible">
         <div class="d-flex flex-row flex-nowrap align-items-center" t-att-data-action-id="props.action" style="width: 60px">
             <input type="text" autocomplete="chrome-off" class="text-end" t-on-change="this.onChange" t-on-blur="this.onChange" t-on-input="this.onInput" t-att-value="this.state.value" />
             <span t-out="props.unit" />

diff --git a/addons/html_builder/static/src/builder/builder_components/builder_range.xml b/addons/html_builder/static/src/builder/builder_components/builder_range.xml
@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
 
 <t t-name="html_builder.BuilderRange">
-    <BuilderComponent dependencies="props.dependencies">
+    <BuilderComponent isVisible="props.isVisible">
         <div class="d-flex flex-row flex-nowrap align-items-center" t-att-data-action-id="props.action" style="width: 60px">
             <input
             type="range"

diff --git a/addons/html_builder/static/src/builder/builder_components/builder_row.js b/addons/html_builder/static/src/builder/builder_components/builder_row.js
@@ -13,7 +13,6 @@ export class BuilderRow extends Component {
     static props = {
         ...basicContainerBuilderComponentProps,
         label: String,
-        dependencies: { type: [String, Array], optional: true },
         tooltip: { type: String, optional: true },
         slots: { type: Object, optional: true },
         extraClassName: { type: String, optional: true },

diff --git a/addons/html_builder/static/src/builder/builder_components/builder_row.xml b/addons/html_builder/static/src/builder/builder_components/builder_row.xml
@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
 
 <t t-name="html_builder.BuilderRow">
-    <BuilderComponent dependencies="props.dependencies">
+    <BuilderComponent isVisible="props.isVisible">
         <div class="d-flex p-1 px-2 hb-row" t-att-class="this.props.extraClassName || ''" t-ref="root">
             <div class="d-flex" style="flex-grow: 0.4; flex-basis: 0; min-width: 0;" t-att-data-tooltip="props.tooltip">
                 <span class="text-nowrap text-truncate" t-out="props.label"/>

diff --git a/addons/html_builder/static/src/builder/builder_components/builder_select.xml b/addons/html_builder/static/src/builder/builder_components/builder_select.xml
@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
 
 <t t-name="html_builder.BuilderSelect">
-    <BuilderComponent dependencies="props.dependencies">
+    <BuilderComponent isVisible="props.isVisible">
         <!-- Render the SelectItem(s) into an invisible node to ensure the label of the
         button is being set. -->
         <div t-ref="root">

diff --git a/addons/html_builder/static/src/builder/builder_components/builder_select_item.xml b/addons/html_builder/static/src/builder/builder_components/builder_select_item.xml
@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
 
 <t t-name="html_builder.BuilderSelectItem">
-    <BuilderComponent dependencies="props.dependencies">
+    <BuilderComponent isVisible="props.isVisible">
         <div
             class="d-flex flex-column cursor-pointer"
             t-att-class="{'active': this.state.isActive}"

diff --git a/addons/html_builder/static/src/builder/builder_components/builder_text_input.xml b/addons/html_builder/static/src/builder/builder_components/builder_text_input.xml
@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
 
 <t t-name="html_builder.BuilderTextInput">
-    <BuilderComponent dependencies="props.dependencies">
+    <BuilderComponent isVisible="props.isVisible">
         <div class="d-flex flex-row flex-nowrap align-items-center" t-att-data-action-id="props.action" style="width: 60px">
             <input
                 type="text"

diff --git a/addons/html_builder/static/src/builder/builder_components/utils.js b/addons/html_builder/static/src/builder/builder_components/utils.js
@@ -24,32 +24,32 @@ export function useDomState(getState) {
 }
 
 export class BuilderComponent extends Component {
-    static template = xml`<div t-att-class="this.state.isVisible ? 'd-contents' : 'd-none'"><t t-slot="default"/></div>`;
+    static template = xml`<div t-att-class="this.props.isVisible === false ? 'd-none' : 'd-contents'"><t t-slot="default"/></div>`;
     static props = {
-        dependencies: { type: [String, { type: Array, element: String }], optional: true },
+        isVisible: { type: Boolean, optional: true },
         slots: { type: Object },
     };
 
-    setup() {
-        const isDependenciesVisible = useDependencies(this.props.dependencies);
-        const isVisible = () =>
-            !!this.env.getEditingElement() && (!this.props.dependencies || isDependenciesVisible());
-        this.state = useDomState(() => ({
-            isVisible: isVisible(),
-        }));
-        useBus(this.env.dependencyManager, "dependency-updated", () => {
-            this.state.isVisible = isVisible();
-        });
-        if (this.props.dependencies?.length) {
-            const listener = () => {
-                this.state.isVisible = isVisible();
-            };
-            this.env.dependencyManager.addEventListener("dependency-updated", listener);
-            onWillDestroy(() => {
-                this.env.dependencyManager.removeEventListener("dependency-updated", listener);
-            });
-        }
-    }
+    // setup() {
+    //     // const isDependenciesVisible = useDependencies(this.props.dependencies);
+    //     // const isVisible = () =>
+    //     //     !!this.env.getEditingElement() && (!this.props.dependencies || isDependenciesVisible());
+    //     // this.state = useDomState(() => ({
+    //     //     isVisible: isVisible(),
+    //     // }));
+    //     // useBus(this.env.dependencyManager, "dependency-updated", () => {
+    //     //     this.state.isVisible = isVisible();
+    //     // });
+    //     // if (this.props.dependencies?.length) {
+    //     //     const listener = () => {
+    //     //         this.state.isVisible = isVisible();
+    //     //     };
+    //     //     this.env.dependencyManager.addEventListener("dependency-updated", listener);
+    //     //     onWillDestroy(() => {
+    //     //         this.env.dependencyManager.removeEventListener("dependency-updated", listener);
+    //     //     });
+    //     // }
+    // }
 }
 
 function querySelectorAll(targets, selector) {
@@ -112,6 +112,56 @@ export function useDependencies(dependencies) {
     return isDependenciesVisible;
 }
 
+export function useIsActiveItem({ log } = {}) {
+    const env = useEnv();
+    const tempState = {};
+    const warn = (...args) => {
+        if (log) {
+            console.warn(...args);
+        }
+    };
+    window.d = env.dependencyManager;
+
+    function isActive(itemId) {
+        const isActiveFn = env.dependencyManager.get(itemId)?.isActive;
+
+        // warn(`env.dependencyManager.get(itemId):`, env.dependencyManager.get(itemId));
+        // warn(`isActiveFn:`, isActiveFn);
+        if (!isActiveFn) {
+            warn(`itemId`, itemId, env.dependencyManager.get(itemId));
+            return false;
+        }
+        warn(`itemId:`, itemId, isActiveFn());
+        return isActiveFn();
+    }
+
+    const getState = () => {
+        for (const itemId of Object.keys(tempState)) {
+            tempState[itemId] = isActive(itemId);
+        }
+        return tempState;
+    };
+    const state = useDomState(getState);
+    // const debouncedGetState = useDebounced(getState, 0);
+    const listener = () => {
+        const newState = getState();
+        console.warn("updated!!", newState);
+        Object.assign(state, newState);
+    };
+    env.dependencyManager.addEventListener("dependency-updated", listener);
+    onWillDestroy(() => {
+        env.dependencyManager.removeEventListener("dependency-updated", listener);
+    });
+    return function isActiveItem(itemId) {
+        if (state[itemId] === undefined) {
+            // Use a temporary state to avoid re-rendering the component.
+            tempState[itemId] = isActive(itemId);
+            return tempState[itemId];
+        }
+        return state[itemId];
+    };
+}
+
 export function useSelectableComponent(id, { onItemChange } = {}) {
     useBuilderComponent();
     const selectableItems = [];
@@ -544,7 +594,7 @@ export function useVisibilityObserver(contentName, callback) {
 export const basicContainerBuilderComponentProps = {
     applyTo: { type: String, optional: true },
     preview: { type: Boolean, optional: true },
-    dependencies: { type: [String, Array], optional: true },
+    isVisible: { type: [String, Array], optional: true },
     inheritedActions: { type: Array, element: String, optional: true },
     // preview: { type: Boolean, optional: true },
     // reloadPage: { type: Boolean, optional: true },

diff --git a/addons/html_builder/static/src/builder/components/option_container.js b/addons/html_builder/static/src/builder/components/option_container.js
@@ -1,6 +1,10 @@
 import { Component, useSubEnv } from "@odoo/owl";
 import { defaultBuilderComponents } from "../builder_components/default_builder_components";
-import { useVisibilityObserver, useApplyVisibility } from "../builder_components/utils";
+import {
+    useVisibilityObserver,
+    useApplyVisibility,
+    useIsActiveItem,
+} from "../builder_components/utils";
 import { DependencyManager } from "../plugins/dependency_manager";
 import { getSnippetName } from "@html_builder/builder/utils/utils";
 
@@ -20,6 +24,7 @@ export class OptionsContainer extends Component {
             getEditingElements: () => [this.props.editingElement],
             weContext: {},
         });
+        this.isActiveItem = useIsActiveItem();
         useVisibilityObserver("content", useApplyVisibility("root"));
     }
 

diff --git a/addons/html_builder/static/src/builder/options/animate_option.js b/addons/html_builder/static/src/builder/options/animate_option.js
@@ -3,7 +3,7 @@ import { Component, onWillDestroy, useEnv } from "@odoo/owl";
 import { registry } from "@web/core/registry";
 import { defaultBuilderComponents } from "../builder_components/default_builder_components";
 import { withSequence } from "@html_editor/utils/resource";
-import { useDomState } from "../builder_components/utils";
+import { useDomState, useIsActiveItem } from "../builder_components/utils";
 import { getScrollingElement } from "@web/core/utils/scrolling";
 
 class AnimateOptionPlugin extends Plugin {
@@ -183,6 +183,7 @@ class AnimateOption extends Component {
 
     setup() {
         const env = useEnv();
+        this.isActiveItem = useIsActiveItem({ log: true });
 
         const dependencyManager = env.dependencyManager;
 

diff --git a/addons/html_builder/static/src/builder/options/animate_option.xml b/addons/html_builder/static/src/builder/options/animate_option.xml
@@ -3,7 +3,7 @@
 
 <t t-name="html_builder.AnimateOption">
     <BuilderRow label.translate="Animation">
-        <BuilderSelect dependencies="'!transformImage'" preview="false">
+        <BuilderSelect isVisible="!this.isActiveItem('transformImage')" preview="false">
             <BuilderSelectItem action="'setAnimationMode'" actionValue="''"
                         classAction="''"
                         id="'no_animation_opt'">None</BuilderSelectItem>
@@ -18,11 +18,11 @@
             <BuilderSelectItem action="'setAnimationMode'" actionValue="'onHover'"
                         classAction="'o_animate_on_hover'"
                         id="'animation_on_hover_opt'"
-                        t-if="state.canHover">On Hover</BuilderSelectItem>
+                        isVisible="state.canHover">On Hover</BuilderSelectItem>
         </BuilderSelect>
     </BuilderRow>
     <BuilderRow label.translate="Effect">
-        <BuilderSelect t-if="this.state.hasAnimateClass" dependencies="'!animation_on_hover_opt'" id="'animation_effect_opt'">
+        <BuilderSelect isVisible="state.hasAnimateClass and !this.isActiveItem('animation_on_hover_opt')" id="'animation_effect_opt'">
             <!-- Default value -->
             <!-- <div class="d-none"><BuilderSelectItem classAction="''">None</BuilderSelectItem></div> -->
             <BuilderSelectItem classAction="'o_anim_fade_in'"
@@ -36,7 +36,7 @@
                                    classAction="'o_anim_rotate_in'">Rotate</BuilderSelectItem>
                 <BuilderSelectItem classAction="'o_anim_zoom_out'">Zoom Out</BuilderSelectItem>
                 <BuilderSelectItem classAction="'o_anim_zoom_in'">Zoom In</BuilderSelectItem>
-                <BuilderContext dependencies="'animation_on_appearance_opt'">
+                <BuilderContext isVisible="this.isActiveItem('animation_on_appearance_opt')">
                     <BuilderSelectItem classAction="'o_anim_flash'">Flash</BuilderSelectItem>
                     <BuilderSelectItem classAction="'o_anim_pulse'">Pulse</BuilderSelectItem>
                     <BuilderSelectItem classAction="'o_anim_shake'">Shake</BuilderSelectItem>
@@ -46,42 +46,22 @@
                 </BuilderContext>
             </BuilderContext>
         </BuilderSelect>
-        <!-- <div id="o_hover_effects_options" t-elif="state.canHover">
-            <BuilderSelect string="Effect" class="o_we_sublevel_1" data-attribute-name="hoverEffect"
-                data-set-img-shape-hover-effect="true">
-                <we-button data-select-data-attribute="" data-name="hover_effect_none_opt">None</we-button>
-                <we-button data-select-data-attribute="overlay" data-name="hover_effect_overlay_opt">Overlay</we-button>
-                <we-button data-select-data-attribute="image_zoom_in" data-name="hover_effect_zoom_in_opt">Zoom In</we-button>
-                <we-button data-select-data-attribute="image_zoom_out" data-name="hover_effect_zoom_out_opt">Zoom Out</we-button>
-                <we-button data-select-data-attribute="dolly_zoom" data-name="hover_effect_dolly_zoom_opt">Dolly Zoom</we-button>
-                <we-button data-select-data-attribute="outline" data-name="hover_effect_outline_opt">Outline</we-button>
-                <we-button data-select-data-attribute="image_mirror_blur" data-name="hover_effect_mirror_blur_opt">Mirror Blur</we-button>
-            </BuilderSelect>
-            <we-range string="Intensity" class="o_we_sublevel_2" data-select-data-attribute="" data-attribute-name="hoverEffectIntensity"
-                data-dependencies="hover_effect_zoom_in_opt, hover_effect_zoom_out_opt, hover_effect_mirror_blur_opt, hover_effect_dolly_zoom_opt"
-                data-min="1" data-max="100" data-step="1" data-display-range-value="true" data-no-preview="true"/>
-            <we-colorpicker string="Color" class="o_we_sublevel_2" data-set-hover-effect-color="true" data-excluded="theme, common"
-                data-dependencies="hover_effect_dolly_zoom_opt, hover_effect_overlay_opt, hover_effect_zoom_in_opt, hover_effect_zoom_out_opt, hover_effect_outline_opt"
-                data-no-preview="true" data-name="hover_effect_color_opt"/>
-            <we-input string="Stroke Width" class="o_we_sublevel_2" data-select-data-attribute="" data-attribute-name="hoverEffectStrokeWidth"
-                data-step="1" data-min="1" data-unit="px" data-dependencies="hover_effect_outline_opt" data-no-preview="true"/>
-        </div> -->
     </BuilderRow>
-    <BuilderRow label.translate="Direction" extraClassName="(state.hasAnimateClass and !state.isLimitedAnimation) ? '' : 'd-none'">
+    <BuilderRow label.translate="Direction" isVisible="state.hasAnimateClass and !state.isLimitedAnimation">
         <BuilderSelect id="'animation_direction_opt'" action="'forceAnimation'">
             <BuilderSelectItem classAction="''"
                        id="'animation_direction_in_place_opt'"
-                       dependencies="'!o_anim_slide_in_opt'">In Place</BuilderSelectItem>
+                       isVisible="!this.isActiveItem('o_anim_slide_in_opt')">In Place</BuilderSelectItem>
 
-            <BuilderContext dependencies="'!o_anim_rotate_opt'">
+            <BuilderContext isVisible="!this.isActiveItem('o_anim_rotate_opt')">
                 <BuilderSelectItem id="'animation_direction_from_right_opt'"
                                    classAction="'o_anim_from_right'">From Right</BuilderSelectItem>
                 <BuilderSelectItem classAction="'o_anim_from_left'">From Left</BuilderSelectItem>
                 <BuilderSelectItem classAction="'o_anim_from_bottom'">From Bottom</BuilderSelectItem>
                 <BuilderSelectItem classAction="'o_anim_from_top'">From Top</BuilderSelectItem>
             </BuilderContext>
 
-            <BuilderContext dependencies="'o_anim_rotate_opt'">
+            <BuilderContext isVisible="this.isActiveItem('o_anim_rotate_opt')">
                 <BuilderSelectItem classAction="'o_anim_from_top_right'">From Top Right</BuilderSelectItem>
                 <BuilderSelectItem classAction="'o_anim_from_top_left'">From Top Left</BuilderSelectItem>
                 <BuilderSelectItem classAction="'o_anim_from_bottom_right'">From Bottom Right</BuilderSelectItem>
@@ -91,13 +71,13 @@
     </BuilderRow>
     <!-- Trigger -->
     <BuilderRow label.translate="Trigger">
-        <BuilderSelect dependencies="'animation_on_appearance_opt'" id="'animation_trigger_opt'">
+        <BuilderSelect isVisible="this.isActiveItem('animation_on_appearance_opt')" id="'animation_trigger_opt'">
             <BuilderSelectItem classAction="''">First Time Only</BuilderSelectItem>
             <BuilderSelectItem classAction="'o_animate_both_scroll'">Every Time</BuilderSelectItem>
         </BuilderSelect>
     </BuilderRow>
     <!-- Intensity -->
-    <BuilderRow label.translate="Intensity" t-if="state.showIntensity">
+    <BuilderRow label.translate="Intensity" isVisible="state.showIntensity">
         <BuilderRange id="'animation_intensity_opt'"
             action="'setAnimateIntensity'"
             preview="false"
@@ -106,7 +86,7 @@
             step="1"
             displayRangeValue="true"/>
     </BuilderRow>
-    <BuilderContext dependencies="'animation_on_appearance_opt'">
+    <BuilderContext isVisible="this.isActiveItem('animation_on_appearance_opt')">
         <!-- Start After -->
         <BuilderRow label.translate="Start After">
             <BuilderNumberInput styleAction="'animation-delay'" default="0" unit="'s'" />

diff --git a/addons/html_builder/static/src/builder/options/block_alignment_option.xml b/addons/html_builder/static/src/builder/options/block_alignment_option.xml
@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
 
 <t t-name="html_builder.BlockAlignmentOption">
-    <BuilderRow label.translate="Alignment" dependencies="'!so_width_100'">
+    <BuilderRow label.translate="Alignment" isVisible="!this.isActiveItem('so_width_100')">
         <BuilderButtonGroup>
             <BuilderButton icon="'fa-align-left'" title.translate="Left" classAction="'me-auto'"/>
             <BuilderButton icon="'fa-align-center'" title.translate="Center" classAction="'mx-auto'"/>