alert + fixes

This commit is contained in:
jusax23 2022-06-09 17:30:40 +02:00
parent 8c0bb9a40c
commit bd941dc2fc
5 changed files with 87 additions and 25 deletions

View file

@ -1,4 +1,5 @@
import { l1 } from "../stear/extras/loading1.js"; import { l1 } from "../stear/extra/Elements/loading1.js";
import alert from "../stear/extra/Pages/alert.js";
import { _ } from "../stear/main.js"; import { _ } from "../stear/main.js";
import { fadein, fadeout, wait } from "../stear/utils.js"; import { fadein, fadeout, wait } from "../stear/utils.js";
//import "./waitStyle.js"; //import "./waitStyle.js";
@ -30,11 +31,11 @@ export const call = async (stear, { find, resolve, render, call }, {name,id}) =>
await wait(1000); await wait(1000);
var success = Math.random()>0.25; var success = Math.random()>0.25;
if(success){ if(success){
alert("success"); await call(alert, { titel: "Connecting", text: "success" });
await fadeout(find.main._); await fadeout(find.main._);
return resolve(true); return resolve(true);
}else{ }else{
alert("error"); await call(alert, { text: "error" });
await fadeout(find.main._); await fadeout(find.main._);
return resolve(false); return resolve(false);
} }

View file

@ -1,4 +1,4 @@
import { class_, Stear, _ } from "../main.js"; import { class_, Stear, _ } from "../../main.js";
export class loading1 extends class_{ export class loading1 extends class_{
constructor(color){ constructor(color){

View file

@ -0,0 +1,51 @@
import { SFrame, _ } from "../../main.js";
import { fadein, fadeout } from "../../utils.js";
const preRender = false;
const render = ({ }, {titel,text,callback}) => {
return _({
find:"main",
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", 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._);
}});
fadein (find.main._, 200, true);
}
export default alert = new SFrame({
preRender, render, call
});

View file

@ -11,7 +11,6 @@ function toCssAttr(txt){
export class Stear{ export class Stear{
#find = {};
elem; elem;
#childs = {}; #childs = {};
@ -47,7 +46,7 @@ export class Stear{
globalStyle.innerHTML+="\n"+text; globalStyle.innerHTML+="\n"+text;
} }
static addAnimation(steps, name = "animation_" + counter++){ static addAnimation(steps, name = "stearAnimation_" + counter++){
Stear.addGlobalStyleText(`@keyframes ${name} { Stear.addGlobalStyleText(`@keyframes ${name} {
${ ${
Object.entries(steps).map(([k,d])=> Object.entries(steps).map(([k,d])=>
@ -59,7 +58,7 @@ ${Object.entries(d).map(d => " " + toCssAttr(d[0]) + ": " + d[1] + ";").joi
return name; return name;
} }
static addGlobalStyleJSON(json, name = ".class_" + counter++){ static addGlobalStyleJSON(json, name = ".stearClass_" + counter++){
Stear.addGlobalStyleText(` Stear.addGlobalStyleText(`
${name} { ${name} {
${Object.entries(json).map(d => " " + toCssAttr(d[0]) + ": " + d[1] + ";").join("\n")} ${Object.entries(json).map(d => " " + toCssAttr(d[0]) + ": " + d[1] + ";").join("\n")}
@ -91,8 +90,10 @@ export class SFrame{
} }
async call(stear, args, layer = 1){ async call(stear, args, layer = 1){
if(this.#preRender){
stear.elem.appendChild(this.#lastRender._); stear.elem.appendChild(this.#lastRender._);
this.#lastRender._.style.zIndex = layer; this.#lastRender._.style.zIndex = layer;
}
var find = (this.#lastRender?.find) ?? {}; var find = (this.#lastRender?.find) ?? {};
return new Promise((res,rej)=>{ return new Promise((res,rej)=>{
this.#call(stear,{ this.#call(stear,{
@ -101,10 +102,13 @@ export class SFrame{
this.render(args); this.render(args);
for (var member in find) delete find[member]; for (var member in find) delete find[member];
Object.assign(find, (this.#lastRender?.find) ?? {}); Object.assign(find, (this.#lastRender?.find) ?? {});
if ([...(stear.elem.children)].indexOf(this.#lastRender._) >= 0) stear.elem.removeChild(this.#lastRender._);
stear.elem.appendChild(this.#lastRender._);
this.#lastRender._.style.zIndex = layer;
return find; return find;
}, },
resolve: (r)=>{ resolve: (r)=>{
stear.elem.removeChild(this.#lastRender._); if ([...(stear.elem.children)].indexOf(this.#lastRender._) >= 0) stear.elem.removeChild(this.#lastRender._);
res(r); res(r);
}, },
call: (elem, args)=>{ call: (elem, args)=>{
@ -131,10 +135,12 @@ export class SWindow extends SFrame{
display: "block" display: "block"
} }
}, []); }, []);
super({ preRender, render:(settings,args)=>{ super({
preRender, render: (settings, args) => {
Frame.childs = [render(settings, args)]; Frame.childs = [render(settings, args)];
return Frame; return Frame;
}, call }); }, call
});
this.#Frame = Frame; this.#Frame = Frame;
} }
@ -157,6 +163,10 @@ export class class_ {
}); });
} else if (key == "find"){ } else if (key == "find"){
this.#find = settings[key]; this.#find = settings[key];
} else if (key == "event"){
Object.entries(settings[key]).forEach(([k, d]) => {
this.#elem.addEventListener(k,d);
});
} else { } else {
this.#elem.setAttribute(key,settings[key]); this.#elem.setAttribute(key,settings[key]);
} }