verstak/build/dist/source/core/WebDriver.js

Verstak - Front-End Library

import { ReactiveTreeNode, ReactiveSystem, proceedSyncOrAsync } from "reactronic";
import { Constants, ElDriver, ElImpl } from "./ElDriver.js";
export class WebDriver extends ElDriver {
    assignNativeElement(node) {
    }
    runPreparation(node) {
        this.assignNativeElement(node);
        const native = node.element.native;
        const isPartition = node.driver.isPartition;
        if (native !== undefined && !isPartition)
            this.assignExtraAttributesAndProperties(node);
        const result = super.runPreparation(node);
        if (native == undefined && node.element.native !== undefined && !isPartition)
            this.assignExtraAttributesAndProperties(node);
        return result;
    }
    runFinalization(node, isLeader) {
        var _a;
        const el = node.element;
        const native = el.native;
        if (native) {
            this.clearExtraAttributesAndProperties(node);
            (_a = native.resizeObserver) === null || _a === void 0 ? void 0 : _a.unobserve(native);
            if (isLeader)
                native.remove();
        }
        super.runFinalization(node, isLeader);
        el.native = null;
        return false;
    }
    runMount(node) {
        const el = node.element;
        const native = el.native;
        if (native) {
            const sequential = node.owner.children.isStrictOrder;
            const autoHost = ReactiveTreeNode.findMatchingHost(node, n => n.element.native instanceof HTMLElement || n.element.native instanceof SVGElement);
            const automaticNativeHost = autoHost !== node.owner
                ? autoHost === null || autoHost === void 0 ? void 0 : autoHost.driver.provideHost(autoHost).element.native
                : autoHost === null || autoHost === void 0 ? void 0 : autoHost.element.native;
            if (automaticNativeHost) {
                if (sequential && !node.driver.isPartition) {
                    const after = ReactiveTreeNode.findMatchingPrevSibling(node, n => n.element.native instanceof HTMLElement || n.element.native instanceof SVGElement);
                    if (after === undefined || after.driver.isPartition) {
                        if (automaticNativeHost !== native.parentNode || !native.previousSibling)
                            automaticNativeHost.prepend(native);
                    }
                    else {
                        const nativeAfter = after.element.native;
                        if (nativeAfter instanceof Element) {
                            if (nativeAfter.nextSibling !== native)
                                automaticNativeHost.insertBefore(native, nativeAfter.nextSibling);
                        }
                    }
                }
                else
                    automaticNativeHost.appendChild(native);
            }
        }
    }
    rebuildBody(node) {
        const el = node.element;
        if (el instanceof ElImpl)
            el.prepareForUpdate();
        let result = super.rebuildBody(node);
        result = proceedSyncOrAsync(result, v => {
            if (el.place === undefined) {
                const oel = node.owner.element;
                if (oel instanceof ElImpl && oel.isTable)
                    el.place = undefined;
            }
            if (gBlinkingEffect)
                blink(el.native, ReactiveTreeNode.currentBodyPriority, node.stamp);
        }, e => {
        });
        return result;
    }
    assignExtraAttributesAndProperties(node) {
        const e = node.element.native;
        Object.defineProperty(e, Constants.ownReactiveTreeNodeKey, {
            configurable: true, enumerable: false, value: node, writable: false,
        });
        if (ReactiveSystem.isLogging)
            e.setAttribute(Constants.keyAttrName, node.key);
    }
    clearExtraAttributesAndProperties(node) {
        const e = node.element.native;
        delete e[Constants.ownReactiveTreeNodeKey];
        if (ReactiveSystem.isLogging)
            e.setAttribute(Constants.keyAttrName, "");
    }
    static getOwnNodeOfNativeElement(element) {
        return element[Constants.ownReactiveTreeNodeKey];
    }
    static findBrotherlyHost(node) {
        return ReactiveTreeNode.findMatchingHost(node, n => n.element.native instanceof HTMLElement || n.element.native instanceof SVGElement);
    }
    static findBrotherlyPrevSibling(node) {
        return ReactiveTreeNode.findMatchingPrevSibling(node, n => n.element.native instanceof HTMLElement || n.element.native instanceof SVGElement);
    }
    static get blinkingEffect() {
        return gBlinkingEffect;
    }
    static set blinkingEffect(value) {
        gBlinkingEffect = value;
    }
}
export class StaticDriver extends WebDriver {
    constructor(native, name, isPartition, initialize) {
        super(name, isPartition, initialize);
        this.native = native;
    }
    assignNativeElement(node) {
        node.element.native = this.native;
    }
}
export class HtmlDriver extends WebDriver {
    assignNativeElement(node) {
        node.element.native = document.createElement(node.driver.name);
    }
}
export class SvgDriver extends WebDriver {
    assignNativeElement(node) {
        node.element.native = document.createElementNS("http://www.w3.org/2000/svg", node.driver.name);
    }
}
function blink(element, priority, revision) {
    if (element !== undefined) {
        const n1 = revision % 2;
        const n2 = 1 >> n1;
        const bem = "v5k-";
        element.classList.toggle(`${bem}${priority}${n1}`, true);
        element.classList.toggle(`${bem}${priority}${n2}`, false);
    }
}
let gBlinkingEffect = false;