status and fixes

example/connect.js

@@ -1,5 +1,6 @@
 import l1 from "../stear/extra/Elements/loading1.js";
 import alert from "../stear/extra/Pages/alert.js";
+import showStatus from "../stear/extra/Pages/showStatus.js";
 import { _ } from "../stear/main.js";
 import { fadein, fadeout, wait } from "../stear/utils.js";
 
@@ -28,13 +29,19 @@ export const call = async (stear, { find, resolve, render, call }, {name,id}) =>
     await fadein(find.main._, 200, true);  
     //do connection
     await wait(1000);
-    var success = Math.random()>0.25;
-    if(success){
-        await call(alert, { text: "success" });
+    if (Math.random() > 0.25){
+        
+        /*await call(alert, { text: "success" });*/
+
+        call(showStatus, { text: "Connected" });
+
         await fadeout(find.main._);
         return resolve(true);
     }else{
-        await call(alert, { text: "error" });
+
+        call(showStatus, { text: "Error while Connecting to: "+name, color:"red" });
+
+        /*await call(alert, { text: "error" });*/
         await fadeout(find.main._);
         return resolve(false);
     }

example/start.js

@@ -35,7 +35,7 @@ export const call = (stear, { find, resolve, render, call }, args) => {
     document.addEventListener('deviceready', async ()=>{
         await wait(Math.max(1, 1000 - performance.now()));
         await fadeout(find.main._);
-        call(stear.g("connect"),{id:"id",name:"name"});
+        call(stear.g("connect"),{id:"123-456",name:"Device"});
         resolve();
     }, false);
 }

stear/extra/Pages/alert.js

@@ -7,7 +7,7 @@ const render = ({ }, {titel,text,callback}) => {
 
     return _({
         find:"main",
-        class:"alert",
+        class:"stear_alert",
         style: {
             position:"fixed",
             left: "0",
@@ -33,7 +33,7 @@ const render = ({ }, {titel,text,callback}) => {
     }, [
         _({ type: "h2", style: { marginBottom: 0 }}, titel),
         _({ type: "p"}, text),
-        _({ type: "button", event: {click: callback}, style:{
+        _({ type: "button", find:"btn", event: {click: callback}, style:{
             borderRadius:"0.5rem",
         }},"OK"),
     ]));
@@ -44,9 +44,10 @@ const call = async (stear, { find, resolve, render, call }, {text,titel=""}) =>
         resolve();
         fadeout(find.main._);
     }});
-    fadein (find.main._, 200, true);
+    await fadein (find.main._, 200, true);
+    find.btn._.focus();
 }
 
-export default alert = new SFrame({
+export default new SFrame({
     preRender, render, call
 });

stear/extra/Pages/showStatus.js

@@ -0,0 +1,111 @@
+import { SFrame, Stear, _ } from "../../main.js";
+import { fadein, fadeout, wait } from "../../utils.js";
+
+const preRender = true;
+
+Stear.addGlobalStyleJSON({
+    position: "fixed",
+    left: "50%",
+    bottom: "1rem",
+    transform: "translate(-50%, -50%)",
+    textAlign: "center",
+    border: `2px soild transparent`,
+    borderRadius: "1rem",
+    padding: "1rem",
+    transition: "background-color 200ms",
+    backgroundColor: "#212121",
+    color:"#fafafa",
+    "-webkit-user-select": "none",
+
+},".stear_status");
+
+const render = ({ }, { }) => {
+
+    return _({
+        find:"main",
+        class:"stear_status",
+    });
+}
+
+const statusList = [];
+var statusActive = false;
+
+const call = async (stear, { find, resolve, render, call }, { text, color="grey" }) => {
+    statusList.push({ text, color, resolve});
+    if (statusActive) return;
+    statusActive = true;
+
+    var next = statusList.shift();
+    var last;
+
+    find.main.settings = {style:{
+        border: "2px solid " + next.color
+    }};
+    find.main._.innerText = next.text;
+
+    await fadein(find.main._, 200, true);
+    find.main._.style.transition = "";
+
+    async function loop(){
+        last = next;
+        next = statusList.shift();
+        if (next == null) return finish();
+        last.resolve(null, false);
+
+        find.main.settings = { style: { backgroundColor: "#555" } };
+        await wait(200);
+        find.main.settings = {
+            style: {
+                backgroundColor: "",
+                border: "2px solid " + next.color
+            }
+        };
+        find.main._.innerText = next.text;
+        timeoutId = setTimeout(loop,3000);
+    }
+    var timeoutId = setTimeout(loop, 3000);
+    find.main._.onclick = ()=>{
+        if(timeoutId<0)return;
+        clearTimeout(timeoutId);
+        timeoutId = -1;
+        loop();
+    };
+
+    async function finish(){
+        if (timeoutId >= 0)clearTimeout(timeoutId);
+        timeoutId = -1;
+        statusActive = false;
+
+        await fadeout(find.main._);
+
+        last.resolve();
+    }
+   /* while (true) {
+        await wait(3000);
+
+        last = next;
+        next = statusList.shift();
+        if (next == null) break;
+        last.resolve(null,false);
+
+        find.main.settings = {style:{backgroundColor: "#555"}};
+        await wait(200);
+        find.main.settings = {style:{
+            backgroundColor: "",
+            border: "2px solid " + next.color
+        }};
+        find.main._.innerText = next.text;        
+    }*/
+
+    
+    /*statusActive = false;
+
+    await fadeout(find.main._);
+
+    last.resolve();*/
+    //fadein(find.main._, 200, true);
+}
+
+export default new SFrame({
+    preRender, render, call
+});

stear/main.js

@@ -107,8 +107,8 @@ export class SFrame{
                     this.#lastRender._.style.zIndex = layer;
                     return find;
                 },
-                resolve: (r)=>{
-                    if ([...(stear.elem.children)].indexOf(this.#lastRender._) >= 0) stear.elem.removeChild(this.#lastRender._);
+                resolve: (r,close=true)=>{
+                    if (close&&[...(stear.elem.children)].indexOf(this.#lastRender._) >= 0) stear.elem.removeChild(this.#lastRender._);
                     res(r);
                 },
                 call: (elem, args)=>{
@@ -174,7 +174,7 @@ export class class_ {
     }
 
     set childs(childs){
-        this.#childs = childs;
+        this.#childs = Array.isArray(childs) ? childs : [childs];
     }
     
     set settings(settings){