alert + fixes

example/connect.js

@@ -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 { fadein, fadeout, wait } from "../stear/utils.js";
 //import "./waitStyle.js";
@@ -30,11 +31,11 @@ export const call = async (stear, { find, resolve, render, call }, {name,id}) =>
     await wait(1000);
     var success = Math.random()>0.25;
     if(success){
-        alert("success");
+        await call(alert, { titel: "Connecting", text: "success" });
         await fadeout(find.main._);
         return resolve(true);
     }else{
-        alert("error");
+        await call(alert, { text: "error" });
         await fadeout(find.main._);
         return resolve(false);
     }

stear/extra/Elements/loading1.js

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

stear/extra/Pages/alert.js

@@ -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
+});

stear/main.js

@@ -11,7 +11,6 @@ function toCssAttr(txt){
 
 export class Stear{
 
-    #find = {};
     elem;
     #childs = {};
 
@@ -47,7 +46,7 @@ export class Stear{
         globalStyle.innerHTML+="\n"+text;
     }
 
-    static addAnimation(steps, name = "animation_" + counter++){
+    static addAnimation(steps, name = "stearAnimation_" + counter++){
         Stear.addGlobalStyleText(`@keyframes ${name} {
 ${
 Object.entries(steps).map(([k,d])=>
@@ -59,7 +58,7 @@ ${Object.entries(d).map(d => "      " + toCssAttr(d[0]) + ": " + d[1] + ";").joi
 
         return name;
     }
-    static addGlobalStyleJSON(json, name = ".class_" + counter++){
+    static addGlobalStyleJSON(json, name = ".stearClass_" + counter++){
         Stear.addGlobalStyleText(`
 ${name} {
 ${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){
+        if(this.#preRender){
             stear.elem.appendChild(this.#lastRender._);
             this.#lastRender._.style.zIndex = layer;
+        }
         var find = (this.#lastRender?.find) ?? {};
         return new Promise((res,rej)=>{
             this.#call(stear,{
@@ -101,10 +102,13 @@ export class SFrame{
                     this.render(args);
                     for (var member in find) delete find[member];
                     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;
                 },
                 resolve: (r)=>{
-                    stear.elem.removeChild(this.#lastRender._);
+                    if ([...(stear.elem.children)].indexOf(this.#lastRender._) >= 0) stear.elem.removeChild(this.#lastRender._);
                     res(r);
                 },
                 call: (elem, args)=>{
@@ -123,18 +127,20 @@ export class SWindow extends SFrame{
     constructor({ preRender, render, call }){
         var Frame = _({
             style: {
-                 top:"0px",
+                top: "0px",
-                 left:"0px",
+                left: "0px",
                 position: "absolute",
                 height: "100%",
                 width: "100%",
                 display: "block"
             }
         }, []);
-        super({ preRender, render:(settings,args)=>{
+        super({
+            preRender, render: (settings, args) => {
                 Frame.childs = [render(settings, args)];
                 return Frame;
-        }, call });
+            }, call
+        });
         this.#Frame = Frame;
     }
     
@@ -157,7 +163,11 @@ export class class_ {
                 });
             } else if (key == "find"){
                 this.#find = settings[key];
-            }else{
+            } else if (key == "event"){
+                Object.entries(settings[key]).forEach(([k, d]) => {
+                    this.#elem.addEventListener(k,d);
+                });
+            } else {
                 this.#elem.setAttribute(key,settings[key]);
             }
         }