stear/extra/Pages/showStatus.js

import { SFrame, Stear, _ } from "../../main.js";
import { fadein, fadeout, wait } from "../../utils.js";


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 statusList = [];
var statusActive = false;

const call = async (stear, { find, resolve, render, close, call, event }, { text, color = "grey" }) => {
    statusList.push({ text, color, resolve });
    if (statusActive) return false;
    statusActive = true;;

    event.onloaded = () => {
        fadein(find.main, 200, true);
    };
    event.onclose = async() => {
        await fadeout(find.main);
    };
    event.onBeforRerender = async() => {
        find.main.settings = { style: { backgroundColor: "#555" } };
        await wait(200);
    };
    event.onAfterRerender = async() => {
        find.main.settings = { style: { backgroundColor: "" } };
    };

    var next = statusList.shift();

    var timeoutId = setTimeout(nextMsg,3000);

    var inProgress = false;

    async function nextMsg(){
        if(inProgress)return;
        inProgress = true;
        if (timeoutId >= 0) clearTimeout(timeoutId);
        timeoutId = -1;
        
        next.resolve(null,false);
        next = statusList.shift();
        if(next == null){
            statusActive = false;
            close();
            return;
        }
        render(false);

        timeoutId = setTimeout(nextMsg, 3000);
        inProgress = false;
    }

    return (first = true)=>_({
        find: "main",
        class: "stear_status",
        style: {
            border: "2px solid " + next.color,
            backgroundColor: first ? "":"#555",
            userSelect:"none",
            cursor:"pointer"
        },
        event: { click: nextMsg }
    },next.text);
}

/*const call = async (stear, { find, resolve, render, call, event }, { text, color="grey" }) => {
   

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

}*/
/*const call = async (stear, { find, resolve, render, call, event }, { text, color="grey" }) => {
    statusList.push({ text, color, resolve});
    if (statusActive) return false;
    statusActive = true;

    var next = statusList.shift();
    var last;

    find.main.settings = {style:{
        border: "2px solid " + next.color
    }};
    find.main._.innerText = next.text;

    event.onloaded = () => 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();
    }

    return _({
        find: "main",
        class: "stear_status",
    });
}*/

export default new SFrame({
    preRender:true, call
});