From bd941dc2fca08b9aff3d540cf5a7d90c88df9863 Mon Sep 17 00:00:00 2001 From: jusax23 Date: Thu, 9 Jun 2022 17:30:40 +0200 Subject: [PATCH] alert + fixes --- empty.js | 2 +- example/connect.js | 7 +-- stear/{extras => extra/Elements}/loading1.js | 2 +- stear/extra/Pages/alert.js | 51 ++++++++++++++++++++ stear/main.js | 50 +++++++++++-------- 5 files changed, 87 insertions(+), 25 deletions(-) rename stear/{extras => extra/Elements}/loading1.js (96%) create mode 100644 stear/extra/Pages/alert.js diff --git a/empty.js b/empty.js index 5295234..90bffd6 100644 --- a/empty.js +++ b/empty.js @@ -11,6 +11,6 @@ export const render = ({}, {}) => { ]); } -export const call = async (stear, { find, resolve, render, call }, { }) => { +export const call = async (stear, { find, resolve, render, call }, { }) => { } diff --git a/example/connect.js b/example/connect.js index 01c783a..0052fea 100644 --- a/example/connect.js +++ b/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); } diff --git a/stear/extras/loading1.js b/stear/extra/Elements/loading1.js similarity index 96% rename from stear/extras/loading1.js rename to stear/extra/Elements/loading1.js index adeb833..23cc5db 100644 --- a/stear/extras/loading1.js +++ b/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){ diff --git a/stear/extra/Pages/alert.js b/stear/extra/Pages/alert.js new file mode 100644 index 0000000..385d174 --- /dev/null +++ b/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 +}); \ No newline at end of file diff --git a/stear/main.js b/stear/main.js index 006ab8b..1a78d5d 100644 --- a/stear/main.js +++ b/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){ - stear.elem.appendChild(this.#lastRender._); - this.#lastRender._.style.zIndex = layer; + 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)=>{ @@ -122,19 +126,21 @@ export class SWindow extends SFrame{ constructor({ preRender, render, call }){ var Frame = _({ - style: { - top:"0px", - left:"0px", - position: "absolute", - height: "100%", - width: "100%", - display: "block" - } - }, []); - super({ preRender, render:(settings,args)=>{ - Frame.childs = [render(settings, args)]; - return Frame; - }, call }); + style: { + top: "0px", + left: "0px", + position: "absolute", + height: "100%", + width: "100%", + display: "block" + } + }, []); + super({ + preRender, render: (settings, args) => { + Frame.childs = [render(settings, args)]; + return Frame; + }, 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]); } }