@lucsoft/webgen/bin/lib/View.js

Collection of lucsofts Components

import { createElement } from "../components/Components";
import '../css/cards.webgen.static.css';
export function View(render) {
    let appendOnElement = null;
    let hasMaxWidth = null;
    let cssClasses = [];
    let activeCompnents = [];
    let shell = createElement('article');
    const state = {};
    const renderFunction = () => {
        render({
            state,
            update: (data) => {
                Object.assign(state, data);
                renderFunction();
            },
            use: (comp) => activeCompnents.push(comp)
        });
        const newShell = createElement('article');
        if (hasMaxWidth) {
            newShell.classList.add('maxWidth');
            newShell.style.maxWidth = hasMaxWidth;
        }
        newShell.classList.add(...cssClasses);
        activeCompnents.forEach(x => newShell.append(x instanceof HTMLElement ? x : x.draw()));
        appendOnElement?.replaceChild(newShell, shell);
        activeCompnents = [];
        shell = newShell;
    };
    const options = {
        setMaxWidth: (maxWidth) => {
            hasMaxWidth = maxWidth;
            if (appendOnElement)
                renderFunction();
            return options;
        },
        unsafeViewOptions: () => {
            return {
                state,
                update: (data) => {
                    Object.assign(state, data);
                    renderFunction();
                },
                use: (comp) => activeCompnents.push(comp)
            };
        },
        addClass: (...classes) => {
            cssClasses.push(...classes);
            if (appendOnElement)
                renderFunction();
            return options;
        },
        enableCenterFromMiddle: () => {
            cssClasses.push("flex-center");
            if (appendOnElement)
                renderFunction();
            return options;
        },
        appendOn: (component) => {
            if (appendOnElement != null)
                throw new Error("appendOn can only be used once");
            appendOnElement = component;
            component.append(shell);
            renderFunction();
            return options;
        }
    };
    return options;
}