stear/extra/Pages/alert.js

import { SFrame, _ } from "../../main.js";
import { fadein, fadeout, subCancel } from "../../utils.js";

const call = async (stear, { find, resolve, render, call, event }, { text, titel = "" }) => {
    event.onloaded = () => {
        fadein(find.main, 200, true);
        find.btn._.focus();
    }
    event.onresolve = async () => await fadeout(find.main);

    const cancel = subCancel(() => {
        resolve(false);
    });

    return _({
        find: "main",
        class: "stear_alert",
        style: {
            position: "fixed",
            left: "0",
            top: "0",
            height: "100%",
            width: "100%",
            backgroundColor: "rgba(0,0,0,0.5)"
        }
    }, _({
        style: {
            left: "50%",
            top: "50%",
            transform: "translate(-50%, -50%)",
            padding: "1rem",
            paddingTop: "0",
            position: "absolute",
            backgroundColor: "#eee",
            minHeight: "4rem",
            minWidth: "8rem",
            borderRadius: "1rem",
            textAlign: "center"
        }
    }, [
        _({ type: "h2", style: { marginBottom: 0 } }, titel),
        _({ type: "p" }, text),
        _({
            type: "button",
            find: "btn",
            event: {
                click: () => {
                    resolve(true);
                    cancel();
                },
                input: (e) => {
                    console.log(e);
                }
            },
            style: {
                borderRadius: "0.5rem",
            }
        }, "OK"),
    ]));
}

export default new SFrame({
    preRender: true, call
});