[WIP] color : parse and render odoo theme class into css style in the VDOM

packages/plugin-odoo/src/Odoo.ts

@@ -33,6 +33,8 @@ import { OdooTableDomObjectRenderer } from './OdooTableDomObjectRenderer';
 import { FontAwesomeNode } from '../../plugin-fontawesome/src/FontAwesomeNode';
 import { Core } from '../../core/src/Core';
 import { LinkFormatDomObjectModifierRenderer } from './LinkFormatDomObjectModifierRenderer';
+import { OdooThemeColorDomObjectModifierRenderer } from './OdooThemeColorDomObjectModifierRenderer';
+import { OdooXmlDomParsingEngine } from './OdooXmlDomParsingEngine';
 
 export enum OdooPaddingClasses {
     NONE = 'padding-none',
@@ -182,8 +184,10 @@ export class Odoo<T extends JWPluginConfig = JWPluginConfig> extends JWPlugin<T>
             OdooStructureXmlDomParser,
             OdooTranslationXmlDomParser,
             OdooParallaxSpanXmlDomParser,
+            OdooXmlDomParsingEngine,
         ],
         renderers: [
+            OdooThemeColorDomObjectModifierRenderer,
             OdooImageDomObjectRenderer,
             OdooFontAwesomeDomObjectRenderer,
             OdooTableDomObjectRenderer,

packages/plugin-odoo/src/OdooThemeColorDomObjectModifierRenderer.ts

@@ -0,0 +1,56 @@
+import {
+    DomObjectRenderingEngine,
+    DomObject,
+    DomObjectElement,
+    DomObjectAttributes,
+} from '../../plugin-renderer-dom-object/src/DomObjectRenderingEngine';
+import { Attributes } from '../../plugin-xml/src/Attributes';
+import { AttributesDomObjectModifierRenderer } from '../../plugin-xml/src/AttributesDomObjectModifierRenderer';
+
+export class OdooThemeColorDomObjectModifierRenderer extends AttributesDomObjectModifierRenderer {
+    static odooThemeColor = /^var\(--.*\)$/g;
+    static id = DomObjectRenderingEngine.id;
+    engine: DomObjectRenderingEngine;
+    predicate = Attributes;
+
+    async render(modifier: Attributes, contents: DomObject[]): Promise<DomObject[]> {
+        contents = await super.render(modifier, contents);
+        for (const content of contents) {
+            const attributes = (content as DomObjectElement)?.attributes;
+            if (attributes) {
+                this._checkCssStyle(attributes, 'color', 'text-');
+                this._checkCssStyle(attributes, 'background-color', 'bg-');
+            }
+        }
+        return contents;
+    }
+
+    _checkCssStyle(
+        attributes: DomObjectAttributes,
+        styleKey: string,
+        odooClassPrefix: string,
+    ): void {
+        if (!attributes.style) return;
+
+        const odooClassBaseValue = this._getOdooThemeColorClassForStyleColor(
+            attributes.style[styleKey],
+        );
+        if (odooClassBaseValue !== '') {
+            delete attributes.style[styleKey];
+            if (!attributes.class) {
+                attributes.class = new Set();
+            }
+            attributes.class.add(odooClassPrefix + odooClassBaseValue);
+        }
+    }
+
+    _getOdooThemeColorClassForStyleColor(styleValue: string): string {
+        if (
+            styleValue &&
+            styleValue.match(OdooThemeColorDomObjectModifierRenderer.odooThemeColor)
+        ) {
+            return styleValue.substring(6, styleValue.length - 1);
+        }
+        return '';
+    }
+}

packages/plugin-odoo/src/OdooXmlDomParsingEngine.ts

@@ -0,0 +1,22 @@
+import { XmlDomParsingEngine } from '../../plugin-xml/src/XmlDomParsingEngine';
+import { ParsingIdentifier } from '../../plugin-parser/src/ParsingEngine';
+import { DefaultXmlDomParser } from '../../plugin-xml/src/DefaultXmlDomParser';
+import { Attributes } from '../../plugin-xml/src/Attributes';
+
+export class OdooXmlDomParsingEngine extends XmlDomParsingEngine {
+    static readonly id: ParsingIdentifier = 'dom/xml';
+    static readonly defaultParser = DefaultXmlDomParser;
+    /**
+     * Parse attributes and trasform odoo color classes to color style
+     * so JW can treat them as normal colors
+     *
+     * @param node
+     */
+    parseAttributes(node: Element): Attributes {
+        const attributes = super.parseAttributes(node);
+
+        console.log('parse attribute ici');
+
+        return attributes;
+    }
+}

packages/plugin-xml/src/Attributes.ts

@@ -28,6 +28,11 @@ export class Attributes extends Modifier {
                 this.set(key, attributes[key]);
             }
         }
+        if (attributes && (this.style.length || this.classList.length)) {
+            console.log('-------\nnew attributes');
+            if (this.style.length) console.log(this.style.keys(), this.style.values());
+            if (this.classList.length) console.log('class : ' + this.classList.className);
+        }
     }
 
     //--------------------------------------------------------------------------