diff --git a/example/connect.js b/example/connect.js index b3243a8..10a19f0 100644 --- a/example/connect.js +++ b/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); } diff --git a/example/start.js b/example/start.js index 8eb4ca8..bb1a338 100644 --- a/example/start.js +++ b/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); } diff --git a/stear/extra/Pages/alert.js b/stear/extra/Pages/alert.js index ff5be32..8552980 100644 --- a/stear/extra/Pages/alert.js +++ b/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 }); \ No newline at end of file diff --git a/stear/extra/Pages/showStatus.js b/stear/extra/Pages/showStatus.js new file mode 100644 index 0000000..1ae6038 --- /dev/null +++ b/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 +}); \ No newline at end of file diff --git a/stear/main.js b/stear/main.js index 1a78d5d..ac52aee 100644 --- a/stear/main.js +++ b/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){