[MOV] web: move ResizablePanel component to web

This component has been introduced in web_studio. We have now a
similar usecase in website, for the AceEditor component. We thus
move the component definition to web.

Part-of: odoo/odoo#139154

addons/web/static/src/core/resizable_panel/resizable_panel.js

@@ -0,0 +1,162 @@
+/** @odoo-module */
+
+import {
+    Component,
+    onMounted,
+    onWillUpdateProps,
+    onWillUnmount,
+    useEffect,
+    useExternalListener,
+    useRef,
+    useComponent,
+} from "@odoo/owl";
+
+function useResizable({
+    containerRef,
+    handleRef,
+    getMinWidth = () => 400,
+    onResize = () => {},
+    getResizeSide = () => "end",
+}) {
+    containerRef = typeof containerRef == "string" ? useRef(containerRef) : containerRef;
+    handleRef = typeof handleRef == "string" ? useRef(handleRef) : handleRef;
+    const props = useComponent().props;
+
+    let minWidth = getMinWidth(props);
+    let resizeSide = getResizeSide(props);
+    let isChangingSize = false;
+
+    useExternalListener(document, "mouseup", () => onMouseUp());
+    useExternalListener(document, "mousemove", (ev) => onMouseMove(ev));
+
+    useExternalListener(window, "resize", () => {
+        const limit = getLimitWidth();
+        if (getContainerRect().width >= limit) {
+            resize(computeFinalWidth(limit));
+        }
+    });
+
+    let docDirection;
+    useEffect(
+        (container) => {
+            if (container) {
+                docDirection = getComputedStyle(container).direction;
+            }
+        },
+        () => [containerRef.el]
+    );
+
+    onMounted(() => {
+        if (handleRef.el) {
+            resize(computeFinalWidth(minWidth));
+            handleRef.el.addEventListener("mousedown", onMouseDown);
+        }
+    });
+
+    onWillUpdateProps((nextProps) => {
+        minWidth = getMinWidth(nextProps);
+        resizeSide = getResizeSide(nextProps);
+    });
+
+    onWillUnmount(() => {
+        if (handleRef.el) {
+            handleRef.el.removeEventListener("mousedown", onMouseDown);
+        }
+    });
+
+    function onMouseDown() {
+        isChangingSize = true;
+        document.body.classList.add("pe-none", "user-select-none");
+    }
+
+    function onMouseUp() {
+        isChangingSize = false;
+        document.body.classList.remove("pe-none", "user-select-none");
+    }
+
+    function onMouseMove(ev) {
+        if (!isChangingSize || !containerRef.el) {
+            return;
+        }
+        const direction =
+            (docDirection === "ltr" && resizeSide === "end") ||
+            (docDirection === "rtl" && resizeSide === "start")
+                ? 1
+                : -1;
+        const fixedSide = direction === 1 ? "left" : "right";
+        const containerRect = getContainerRect();
+        const newWidth = (ev.clientX - containerRect[fixedSide]) * direction;
+        resize(computeFinalWidth(newWidth));
+    }
+
+    function computeFinalWidth(targetContainerWidth) {
+        const handlerSpacing = handleRef.el ? handleRef.el.offsetWidth / 2 : 10;
+        const w = Math.max(minWidth, targetContainerWidth + handlerSpacing);
+        const limit = getLimitWidth();
+        return Math.min(w, limit - handlerSpacing);
+    }
+
+    function getContainerRect() {
+        const container = containerRef.el;
+        const offsetParent = container.offsetParent;
+        let containerRect = {};
+        if (!offsetParent) {
+            containerRect = container.getBoundingClientRect();
+        } else {
+            containerRect.left = container.offsetLeft;
+            containerRect.right = container.offsetLeft + container.offsetWidth;
+            containerRect.width = container.offsetWidth;
+        }
+        return containerRect;
+    }
+
+    function getLimitWidth() {
+        const offsetParent = containerRef.el.offsetParent;
+        return offsetParent ? offsetParent.offsetWidth : window.innerWidth;
+    }
+
+    function resize(width) {
+        containerRef.el.style.setProperty("width", `${width}px`);
+        onResize(width);
+    }
+}
+
+export class ResizablePanel extends Component {
+    static template = "web_studio.ResizablePanel";
+
+    static components = {};
+    static props = {
+        onResize: { type: Function, optional: true },
+        minWidth: { type: Number, optional: true },
+        class: { type: String, optional: true },
+        slots: { type: Object },
+        handleSide: {
+            validate: (val) => ["start", "end"].includes(val),
+            optional: true,
+        },
+    };
+    static defaultProps = {
+        onResize: () => {},
+        minWidth: 400,
+        class: "",
+        handleSide: "end",
+    };
+
+    setup() {
+        useResizable({
+            containerRef: "containerRef",
+            handleRef: "handleRef",
+            onResize: this.props.onResize,
+            getMinWidth: (props) => props.minWidth,
+            getResizeSide: (props) => props.handleSide,
+        });
+    }
+
+    get class() {
+        const classes = this.props.class.split(" ");
+        if (!classes.some((cls) => cls.startsWith("position-"))) {
+            classes.push("position-relative");
+        }
+        return classes.join(" ");
+    }
+}

addons/web/static/src/core/resizable_panel/resizable_panel.scss

@@ -0,0 +1,10 @@
+.o_resizable_panel {
+    max-width: 100vw;
+    flex-grow: 0;
+}
+
+.o_resizable_panel_handle {
+    cursor: col-resize;
+    z-index: 10;
+    width: 5px;
+}

addons/web/static/src/core/resizable_panel/resizable_panel.xml

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+<templates>
+
+    <t t-name="web_studio.ResizablePanel">
+        <div class="o_resizable_panel d-flex flex-column" t-att-class="class" t-ref="containerRef">
+            <t t-slot="default" />
+            <div
+                class="o_resizable_panel_handle position-absolute top-0 bottom-0 end-0" t-att-class="props.handleSide === 'start' ? 'start-0' : 'end-0'"
+                t-ref="handleRef"
+            ></div>
+        </div>
+    </t>
+
+</templates>

addons/web/static/tests/core/resizable_panel_tests.js

@@ -0,0 +1,162 @@
+/** @odoo-module **/
+
+import { ResizablePanel } from "@web_studio/client_action/xml_resource_editor/resizable_panel/resizable_panel";
+import { Component, reactive, xml } from "@odoo/owl";
+import { browser } from "@web/core/browser/browser";
+import { makeTestEnv } from "@web/../tests/helpers/mock_env";
+import {
+    getFixture,
+    patchWithCleanup,
+    mount,
+    nextTick,
+    triggerEvents,
+} from "@web/../tests/helpers/utils";
+
+QUnit.module("Resizable Panel", ({ beforeEach }) => {
+    let env;
+    let target;
+
+    beforeEach(async () => {
+        env = await makeTestEnv();
+        target = getFixture();
+        patchWithCleanup(browser, {
+            setTimeout: (fn) => Promise.resolve().then(fn),
+        });
+    });
+
+    QUnit.test("Width cannot exceed viewport width", async (assert) => {
+        class Parent extends Component {
+            static components = { ResizablePanel };
+            static template = xml`
+                <ResizablePanel>
+                    <p>A</p>
+                    <p>Cool</p>
+                    <p>Paragraph</p>
+                </ResizablePanel>
+            `;
+        }
+
+        await mount(Parent, target, { env });
+        assert.containsOnce(target, ".o_resizable_panel");
+        assert.containsOnce(target, ".o_resizable_panel_handle");
+
+        const vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
+        const sidepanel = target.querySelector(".o_resizable_panel");
+        sidepanel.style.width = `${vw + 100}px`;
+
+        const sidepanelWidth = sidepanel.getBoundingClientRect().width;
+        assert.ok(
+            sidepanelWidth <= vw && sidepanelWidth > vw * 0.95,
+            "The sidepanel should be smaller or equal to the view width"
+        );
+    });
+
+    QUnit.test("handles right-to-left", async (assert) => {
+        class Parent extends Component {
+            static components = { ResizablePanel };
+            static template = xml`
+                <div class="d-flex parent-el" style="direction: rtl;">
+                    <div style="width: 50px;" />
+                    <ResizablePanel minWidth="20" >
+                        <div style="width: 10px;" class="text-break">
+                            A cool paragraph
+                        </div>
+                    </ResizablePanel>
+                </div>
+            `;
+        }
+        await mount(Parent, target, { env });
+        const parentEl = target.querySelector(".parent-el");
+        const resizablePanelEl = target.querySelector(".o_resizable_panel");
+        let resizablePabelRect = resizablePanelEl.getBoundingClientRect();
+        assert.strictEqual(resizablePabelRect.width, 22.5);
+
+        const handle = resizablePanelEl.querySelector(".o_resizable_panel_handle");
+        await triggerEvents(handle, null, ["mousedown", ["mousemove", { clientX: 10 }], "mouseup"]);
+        resizablePabelRect = resizablePanelEl.getBoundingClientRect();
+        assert.ok(resizablePabelRect.width > parentEl.offsetWidth - 10 - 50);
+    });
+
+    QUnit.test("handles resize handle at start in fixed position", async (assert) => {
+        class Parent extends Component {
+            static components = { ResizablePanel };
+            static template = xml`
+                <div class="d-flex parent-el">
+                    <ResizablePanel minWidth="20" handleSide="'start'" class="'position-fixed'">
+                        <div style="width: 10px;" class="text-break">
+                            A cool paragraph
+                        </div>
+                    </ResizablePanel>
+                </div>
+            `;
+        }
+        await mount(Parent, target, { env });
+        const resizablePanelEl = target.querySelector(".o_resizable_panel");
+        resizablePanelEl.style.setProperty("right", "100px");
+        let resizablePabelRect = resizablePanelEl.getBoundingClientRect();
+        assert.strictEqual(resizablePabelRect.width, 22.5);
+
+        const handle = resizablePanelEl.querySelector(".o_resizable_panel_handle");
+        await triggerEvents(handle, null, [
+            "mousedown",
+            ["mousemove", { clientX: window.innerWidth - 200 }],
+            "mouseup",
+        ]);
+        resizablePabelRect = resizablePanelEl.getBoundingClientRect();
+        assert.strictEqual(resizablePabelRect.width, 100 + handle.offsetWidth / 2);
+    });
+
+    QUnit.test("resizing the window adapts the panel", async (assert) => {
+        class Parent extends Component {
+            static components = { ResizablePanel };
+            static template = xml`
+                <div style="width: 400px;" class="parent-el position-relative">
+                    <ResizablePanel>
+                        <p>A</p>
+                        <p>Cool</p>
+                        <p>Paragraph</p>
+                    </ResizablePanel>
+                </div>
+            `;
+        }
+        await mount(Parent, target, { env });
+        const resizablePanelEl = target.querySelector(".o_resizable_panel");
+        const handle = resizablePanelEl.querySelector(".o_resizable_panel_handle");
+        await triggerEvents(handle, null, [
+            "mousedown",
+            ["mousemove", { clientX: 99999 }],
+            "mouseup",
+        ]);
+        assert.strictEqual(resizablePanelEl.offsetWidth, 398);
+        target.querySelector(".parent-el").style.setProperty("width", "200px");
+        window.dispatchEvent(new Event("resize"));
+        await nextTick();
+        assert.strictEqual(resizablePanelEl.offsetWidth, 198);
+    });
+
+    QUnit.test("minWidth props can be updated", async (assert) => {
+        class Parent extends Component {
+            static components = { ResizablePanel };
+            static template = xml`
+                <div class="d-flex">
+                    <ResizablePanel minWidth="props.state.minWidth">
+                        <div style="width: 10px;" class="text-break">
+                            A cool paragraph
+                        </div>
+                    </ResizablePanel>
+                </div>
+            `;
+        }
+        const state = reactive({ minWidth: 20 });
+        await mount(Parent, target, { env, props: { state } });
+        const resizablePanelEl = target.querySelector(".o_resizable_panel");
+        const handle = resizablePanelEl.querySelector(".o_resizable_panel_handle");
+        await triggerEvents(handle, null, ["mousedown", ["mousemove", { clientX: 15 }], "mouseup"]);
+
+        assert.strictEqual(resizablePanelEl.getBoundingClientRect().width, 20);
+        state.minWidth = 40;
+        await nextTick();
+        await triggerEvents(handle, null, ["mousedown", ["mousemove", { clientX: 15 }], "mouseup"]);
+        assert.strictEqual(resizablePanelEl.getBoundingClientRect().width, 40);
+    });
+});