Merge branch 'main2' into 'main'

Deleted stear/extra/Elements/loading1.js, stear/extra/Pages/alert.js,...

See merge request jusax23/stear!1

.gitmodules

@@ -0,0 +1,4 @@
+[submodule "stear"]
+	path = stear
+	url = https://gitlab.com/jusax23/stear.git
+	branch = submodule

stear

@@ -0,0 +1 @@
+Subproject commit ba87efcb7c9cdcd1c897475a64fced2b95dee6f7

stear/extra/Elements/loading1.js

@@ -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)");
-

stear/extra/Pages/alert.js

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

stear/extra/Pages/showStatus.js

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

stear/main.js

@@ -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]);
-
-

stear/utils.js

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