stear/extra/Pages/prompt.js
2022-12-19 23:03:37 +01:00

80 lines
No EOL
2.1 KiB
JavaScript

import { SFrame, _ } from "../../main.js";
import { fadein, fadeout, subCancel } from "../../utils.js";
const call = async (stear, { find, resolve, render, call, event }, { text, autoFill = "" }) => {
event.onloaded = () => {
fadein(find.main, 200, true);
find.input._.focus();
}
event.onresolve = async () => await fadeout(find.main);
const cancel = subCancel(() => {
resolve(false);
});
return _({
find: "main",
class: "stear_prompt",
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",
display: "grid",
gridGap: "0.5rem"
}
}, [
_({ type: "p", style: { gridRow: "1", gridColumn: "1/3", marginBottom: "0" } }, text),
_({
type: "input",
find: "input",
attr: { type: "text" },
event: {
keydown: (e) => {
if(e.code=="Enter")find.btn._.click();
}
},
style: {
height: "1rem",
border: "2px solid",
borderRadius: "0.5rem",
gridRow: "2",
padding:"0.5rem"
}
}, autoFill),
_({
type: "button",
find: "btn",
event: {
click: () => {
resolve(find.input._.value);
cancel();
}
},
style: {
borderRadius: "0.5rem",
gridRow: "2",
}
}, "OK"),
]));
};
export default new SFrame({
preRender: true, call
});