Deleted stear/extra/Elements/loading1.js, stear/extra/Pages/alert.js, stear/extra/Pages/showStatus.js, stear/main.js, stear/utils.js
This commit is contained in:
parent
a72d96865c
commit
53d03e22d8
5 changed files with 0 additions and 483 deletions
|
|
@ -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)");
|
|
||||||
|
|
||||||
|
|
@ -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
|
|
||||||
});
|
|
||||||
|
|
@ -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
|
|
||||||
});
|
|
||||||
227
stear/main.js
227
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]);
|
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -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();
|
|
||||||
});
|
|
||||||
Loading…
Reference in a new issue