stear/utils.js
2022-11-12 14:30:11 +01:00

103 lines
No EOL
2.6 KiB
JavaScript

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