stear/utils.js

import { class_ } from "./main.js";

/**
 * async wait/pause function
 * 
 * @param {number} ms 
 * @returns 
 */
export const wait = (ms) => {
    return new Promise((res, rej) => {
        setTimeout(res, ms);
    });
}

/**
 * fadeout an Element.
 * 
 * @param {HTMLElement|class_} Selems Element ot fade
 * @param {number} [ms] Duration in ms
 * @param {boolean} [force] 
 */
export const fadeout = async (Selems, ms = 200, force = false) => {
    var oldTrans = [];
    if (!Array.isArray(Selems)) Selems = [Selems];
    var elems = [];
    for (let i = 0; i < Selems.length; i++) {
        elems[i] = Selems[i] instanceof class_ ? Selems[i]._ : Selems[i];
        oldTrans[i] = elems[i].style.transition;
        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";
        elems[i].style.transition = oldTrans[i];
    }
}

/**
 * fadein an Element.
 * 
 * @param {HTMLElement|class_} Selems Element to fade
 * @param {number} [ms] Duration in ms
 * @param {boolean} [force] 
 * @param {string} [display] Set destroyed display style tag.
 */
export const fadein = async (Selems, ms = 200, force = false, display="") => {
    var oldTrans = [];
    if (!Array.isArray(Selems)) Selems = [Selems];
    var elems = [];
    for (let i = 0; i < Selems.length; i++) {
        elems[i] = (Selems[i] instanceof class_) ? Selems[i]._ : Selems[i];
        oldTrans[i] = elems[i].style.transition
        elems[i].style.transition = `opacity ${ms}ms`;
        elems[i].style.display = 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+1);
    for (let i = 0; i < elems.length; i++) {
        elems[i].style.transition = oldTrans[i];
    }
}

var bStack = [];
/**
 * The callback will be triggered when the user intends to go back.
 * 
 * @param {function} callback
 * @returns {function} cancle callback
 */
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();
});