Merge branch 'main2' into 'main'
Deleted stear/extra/Elements/loading1.js, stear/extra/Pages/alert.js,... See merge request jusax23/stear!1
This commit is contained in:
commit
7126448016
7 changed files with 5 additions and 483 deletions
4
.gitmodules
vendored
Normal file
4
.gitmodules
vendored
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
[submodule "stear"]
|
||||
path = stear
|
||||
url = https://gitlab.com/jusax23/stear.git
|
||||
branch = submodule
|
||||
1
stear
Submodule
1
stear
Submodule
|
|
@ -0,0 +1 @@
|
|||
Subproject commit ba87efcb7c9cdcd1c897475a64fced2b95dee6f7
|
||||
|
|
@ -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