stear/extra/Pages/alert.js

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

const preRender = false;

const render = ({ }, {titel,text,callback}) => {

    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: callback}, style:{
            borderRadius:"0.5rem",
        }},"OK"),
    ]));
}

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

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