replace mutation observer with useDomState

odoo-dev · Mar 7, 2025 · f482e8e · f482e8e
1 parent 4c8f96d
commit f482e8e
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 14 deletions.
diff --git a/addons/html_builder/static/src/sidebar/theme_colors_option.js b/addons/html_builder/static/src/sidebar/theme_colors_option.js
@@ -1,24 +1,20 @@
-import { Component, useState, onMounted } from "@odoo/owl";
+import { Component, onMounted } from "@odoo/owl";
 import { getCSSVariableValue } from "@html_builder/utils/utils_css";
 import { defaultBuilderComponents } from "../core/default_builder_components";
+import { useDomState } from "@html_builder/core/building_blocks/utils";
 
 export class ThemeColorsOption extends Component {
     static template = "html_builder.ThemeColorsOption";
     static components = { ...defaultBuilderComponents };
     static props = {};
     setup() {
-        this.presets = useState([]);
         this.palettes = this.getPalettes();
-        const observer = new MutationObserver(this.updatePresets.bind(this));
+        this.state = useDomState(() => ({
+            presets: this.getPresets(),
+        }));
         onMounted(() => {
             this.iframeDocument = document.querySelector("iframe").contentWindow.document;
-            observer.observe(this.iframeDocument.documentElement, {
-                attributes: true,
-                childList: true,
-                subtree: true,
-                attributeFilter: ["style"],
-            });
-            this.updatePresets();
+            this.state.presets = this.getPresets();
         });
     }
 
@@ -42,8 +38,8 @@ export class ThemeColorsOption extends Component {
         return palettes;
     }
 
-    updatePresets() {
-        this.presets.length = 0;
+    getPresets() {
+        const presets = [];
         for (let i = 1; i <= 5; i++) {
             const preset = {
                 id: i,
@@ -63,11 +59,15 @@ export class ThemeColorsOption extends Component {
             if (preset.backgroundGradient) {
                 preset.backgroundGradient += ", url('/web/static/img/transparent.png')";
             }
-            this.presets.push(preset);
+            presets.push(preset);
         }
+        return presets;
     }
 
     getColor(color) {
+        if (!this.iframeDocument) {
+            return "";
+        }
         if (!this.iframeStyle) {
             this.iframeStyle = this.iframeDocument.defaultView.getComputedStyle(
                 this.iframeDocument.documentElement

diff --git a/addons/html_builder/static/src/sidebar/theme_colors_option.xml b/addons/html_builder/static/src/sidebar/theme_colors_option.xml
@@ -68,7 +68,7 @@
             <BuilderRow label.translate="Color Presets">
                 <div></div>     <!-- This is required, without it the row is not displayed at all -->
                 <t t-set-slot="collapse">
-                    <t t-foreach="presets" t-as="preset" t-key="preset.id">
+                    <t t-foreach="state.presets" t-as="preset" t-key="preset.id">
                         <BuilderRow>
                             <div
                                 t-attf-class="