diff --git a/stear/extra/Elements/loading1.js b/stear/extra/Elements/loading1.js deleted file mode 100644 index 8b18fa4..0000000 --- a/stear/extra/Elements/loading1.js +++ /dev/null @@ -1,55 +0,0 @@ -import { class_, Stear, _ } from "../../main.js"; - -export class loading1 extends class_{ - constructor(color){ - super({ class: "box" }, [ - _({ style: { backgroundColor: color}}), - _({ style: { backgroundColor: color}}), - _({ style: { backgroundColor: color}}), - ]); - } -} - -export const l1 = (color="black") => new loading1(color); - -export default l1; - -var animation = Stear.addAnimation({ - "0%": { left: "4%", top: "4%" }, - "8.33%": { left: "52%", top: "4%" }, - "25%": { left: "52%", top: "4%" }, - "33.33%": { left: "52%", top: "52%" }, - "50%": { left: "52%", top: "52%" }, - "58.33%": { left: "4%", top: "52%" }, - "75%": { left: "4%", top: "52%" }, - "83.33%": { left: "4%", top: "4%" }, - "100%": { left: "4%", top: "4%" }, -}); - -Stear.addGlobalStyleJSON({ - display: "inline-block", - position: "relative", - width: "80px", - height: "80px", -}, ".box"); - -Stear.addGlobalStyleJSON({ - position: "absolute", - height: "44%", - width: "44%", - borderRadius: "25%", - animation: `${animation} 6s linear infinite`, -}, ".box div"); - -Stear.addGlobalStyleJSON({ - animationDelay: "0s" -}, ".box div:nth-child(1)"); - -Stear.addGlobalStyleJSON({ - animationDelay: "-2s" -}, ".box div:nth-child(2)"); - -Stear.addGlobalStyleJSON({ - animationDelay: "-4s" -}, ".box div:nth-child(3)"); - diff --git a/stear/extra/Pages/alert.js b/stear/extra/Pages/alert.js deleted file mode 100644 index 8552980..0000000 --- a/stear/extra/Pages/alert.js +++ /dev/null @@ -1,53 +0,0 @@ -import { SFrame, _ } from "../../main.js"; -import { fadein, fadeout } from "../../utils.js"; - -const preRender = false; - -const render = ({ }, {titel,text,callback}) => { - - return _({ - find:"main", - class:"stear_alert", - 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", find:"btn", 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._); - }}); - await fadein (find.main._, 200, true); - find.btn._.focus(); -} - -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 deleted file mode 100644 index 4c97988..0000000 --- a/stear/extra/Pages/showStatus.js +++ /dev/null @@ -1,87 +0,0 @@ -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", - webkitUserSelect: "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(); - } -} - -export default new SFrame({ - preRender, render, call -}); \ No newline at end of file diff --git a/stear/main.js b/stear/main.js deleted file mode 100644 index 2902dc0..0000000 --- a/stear/main.js +++ /dev/null @@ -1,227 +0,0 @@ -var counter = 0; - -var globalStyle = document.createElement("style"); -document.head.appendChild(globalStyle); - -String.prototype.map = Array.prototype.map; - -function toCssAttr(txt){ - return txt.map(d => (d.toUpperCase() === d && d !== d.toLowerCase()) ? "-" + d.toLowerCase(): d ).join(""); -} - -export class Stear{ - - elem; - #childs = {}; - - constructor(elem){ - this.elem = elem; - elem.style.position="relative"; - } - - style(css){ - Object.entries(css).forEach(([k, d]) => { - this.elem.style[k] = d; - }); - } - - addElement (id,elem){ - if(!(elem instanceof SFrame))throw new TypeError("Cannot add Element not extending from SFrame"); - this.#childs[id] = elem; - } - - getElement (id) { - return this.g(id); - } - - g(id){ - return this.#childs[id]; - } - - async call (elem, args, layer = 1){ - return await elem.call(this, args, layer); - } - - static addGlobalStyleText(text){ - globalStyle.innerHTML+="\n"+text; - } - - static addAnimation(steps, name = "stearAnimation_" + counter++){ - Stear.addGlobalStyleText(`@keyframes ${name} { -${ -Object.entries(steps).map(([k,d])=> -` ${k} { -${Object.entries(d).map(d => " " + toCssAttr(d[0]) + ": " + d[1] + ";").join("\n")} - }`).join("\n") -} -}`); - - return name; - } - static addGlobalStyleJSON(json, name = ".stearClass_" + counter++){ - Stear.addGlobalStyleText(` -${name} { -${Object.entries(json).map(d => " " + toCssAttr(d[0]) + ": " + d[1] + ";").join("\n")} -} - `) - return name; - } -} - -export class SFrame{ - #preRender; - #render; - #call; - - #lastRender; - constructor({ preRender, render, call }){ - this.#preRender = preRender; - this.#render = render; - this.#call = call; - if(this.#preRender){ - this.render(); - } - } - - render(args={}){ - this.#lastRender = this.#render({}, args); - this.#lastRender.render; - return this.#lastRender; - } - - 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,{ - find, - render: (args) => { - 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,close=true)=>{ - if (close&&[...(stear.elem.children)].indexOf(this.#lastRender._) >= 0) stear.elem.removeChild(this.#lastRender._); - res(r); - }, - call: (elem, args)=>{ - return stear.call(elem,args,layer+1); - } - }, args); - }); - } - -} - -export class SWindow extends SFrame{ - - #Frame; - - constructor({ preRender, render, call, backgroundColor = "transparent"}){ - var Frame = _({ - style: { - top: "0px", - left: "0px", - position: "absolute", - height: "100%", - width: "100%", - display: "block", - backgroundColor, - overflow:"scroll" - }, - find:"main" - }, []); - super({ - preRender, render: (settings, args) => { - Frame.childs = [render(settings, args)]; - return Frame; - }, call - }); - this.#Frame = Frame; - } - -} - -export class class_ { - #elem; - #childs; - #find; - - constructor(settings,childs){ - this.#elem = document.createElement(settings.type ?? "div"); - this.#childs = childs; - var keys = Object.keys(settings); - for (let i = 0; i < keys.length; i++) { - const key = keys[i]; - if(key == "type"){} else if (key == "style"){ - Object.entries(settings[key]).forEach(([k,d])=>{ - this.#elem.style[k] = d; - }); - } else if (key == "find"){ - this.#find = settings[key]; - } else if (key == "event"){ - Object.entries(settings[key]).forEach(([k, d]) => { - this.#elem.addEventListener(k,d); - }); - } else { - this.#elem.setAttribute(key,settings[key]); - } - } - } - - set childs(childs){ - this.#childs = Array.isArray(childs) ? childs : [childs]; - } - - set settings(settings){ - var keys = Object.keys(settings); - for (let i = 0; i < keys.length; i++) { - const key = keys[i]; - if (key == "type") { } else if (key == "style") { - Object.entries(settings[key]).forEach(([k, d]) => { - this.#elem.style[k] = d; - }); - } else if (key == "find") { - this.#find = settings[key]; - } else { - this.#elem.setAttribute(key, settings[key]); - } - } - } - - get render (){ - this.#elem.innerHTML = ""; - for (let i = 0; i < this.#childs.length; i++) { - const elem = this.#childs[i]; - if(typeof elem == "string"){ - this.#elem.appendChild(document.createTextNode(elem)); - }else{ - this.#elem.appendChild(elem.render); - } - } - return this.#elem; - } - - get _ (){ - return this.#elem; - } - - get find (){ - var out = {}; - this.#childs.forEach(d=>{ - Object.assign(out,d.find); - }); - if (this.#find) out[this.#find]=this; - return out; - } -} -export const _ = (settings = {}, childs = []) => new class_(settings, Array.isArray(childs) ? childs : [childs]); - - diff --git a/stear/utils.js b/stear/utils.js deleted file mode 100644 index f9e6adf..0000000 --- a/stear/utils.js +++ /dev/null @@ -1,61 +0,0 @@ -export const wait = (ms) => { - return new Promise((res, rej) => { - setTimeout(res, ms); - }); -} - -export const fadeout = async (elems, ms = 200, force = false) => { - if (!Array.isArray(elems)) elems = [elems]; - for (let i = 0; i < elems.length; i++) { - elems[i].style.transition = `opacity ${ms}ms`; - if(force){ - elems[i].style.opacity = "1"; - elems[i].style.display = ""; - } - } - await wait(10); - for (let i = 0; i < elems.length; i++) { - elems[i].style.opacity = "0"; - } - await wait(ms); - for (let i = 0; i < elems.length; i++) { - elems[i].style.display = "none"; - } -} -export const fadein = async (elems, ms = 200, force = false) => { - if (!Array.isArray(elems)) elems = [elems]; - for (let i = 0; i < elems.length; i++) { - elems[i].style.transition = `opacity ${ms}ms`; - elems[i].style.display = ""; - if (force) { - elems[i].style.opacity = "0"; - } - } - await wait(10); - for (let i = 0; i < elems.length; i++) { - elems[i].style.opacity = "1"; - } - await wait(ms); -} - -var bStack = []; -export const subCancel = (callback) => { - bStack.push(callback); - return ()=>{ - var id; - if ((id = bStack.indexOf(callback)) >= 0) { - bStack.splice(id, 1); - } - } -} - -function back() { - if (bStack.length) { - bStack.pop()(); - } -} - -document.addEventListener("backbutton", back, false); -document.addEventListener('keyup', (e)=>{ - if (e.code == "Escape")back(); -}); \ No newline at end of file