jusax23/stear
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

include

Browse source
This commit is contained in:
jusax23 2022-10-09 16:38:50 +02:00
parent 4bc4ca5a16
commit 5068141aff
4 changed files with 255 additions and 99 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
extra/Pages/alert.js
View file

@ -1,13 +1,17 @@
import { SFrame, _ } from "../../main.js";
import { fadein, fadeout } from "../../utils.js";
import { fadein, fadeout, subCancel } from "../../utils.js";
const call = async (stear, { find, resolve, render, call, event}, {text,titel=""}) => {
event.onloaded = ()=> {
fadein (find.main, 200, true);
const call = async (stear, { find, resolve, render, call, event }, { text, titel = "" }) => {
event.onloaded = () => {
fadein(find.main, 200, true);
find.btn._.focus();
}
}
event.onresolve = async () => await fadeout(find.main);
const cancel = subCancel(() => {
resolve(false);
});
return _({
find: "main",
class: "stear_alert",
@ -37,9 +41,17 @@ const call = async (stear, { find, resolve, render, call, event}, {text,titel=""
_({ type: "h2", style: { marginBottom: 0 } }, titel),
_({ type: "p" }, text),
_({
type: "button",
find: "btn",
event: { click: ()=>resolve() },
type: "button",
find: "btn",
event: {
click: () => {
resolve(true);
cancel();
},
input: (e) => {
console.log(e);
}
},
style: {
borderRadius: "0.5rem",
}
@ -48,5 +60,5 @@ const call = async (stear, { find, resolve, render, call, event}, {text,titel=""
}
export default new SFrame({
preRender:true, call
preRender: true, call
});

81
extra/Pages/prompt.js Normal file
View file

@ -0,0 +1,81 @@
import { SFrame, _ } from "../../main.js";
import { fadein, fadeout, subCancel } from "../../utils.js";
const call = async (stear, { find, resolve, render, call, event }, { text, autoFill = "" }) => {
event.onloaded = () => {
fadein(find.main, 200, true);
console.log(find);
find.input._.focus();
}
event.onresolve = async () => await fadeout(find.main);
const cancel = subCancel(() => {
resolve(false);
});
return _({
find: "main",
class: "stear_prompt",
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",
display: "grid",
gridGap: "0.5rem"
}
}, [
_({ type: "p", style: { gridRow: "1", gridColumn: "1/3", marginBottom: "0" } }, text),
_({
type: "input",
find: "input",
attr: { type: "text" },
event: {
keydown: (e) => {
if(e.code=="Enter")find.btn._.click();
}
},
style: {
borderRadius: "0.5rem",
height: "1rem",
border: "2px solid",
borderRadius: "0.5rem",
gridRow: "2",
}
}, autoFill),
_({
type: "button",
find: "btn",
event: {
click: () => {
resolve(find.input._.value);
cancel();
}
},
style: {
borderRadius: "0.5rem",
gridRow: "2",
}
}, "OK"),
]));
};
export default new SFrame({
preRender: true, call
});

68
language.js Normal file
View file

@ -0,0 +1,68 @@
export class LanguagePool {
#pool = {};
constructor() {
}
addFile(elems, lang) {
Object.entries(elems).forEach(([k, d]) => {
if (typeof this.#pool[k] == "undefined") {
this.#pool[k] = new LanguagePoolString();
}
this.#pool[k].set(d, lang);
});
}
set lang(lang) {
Object.entries(this.#pool).forEach(([k, d]) => {
d.lang = lang;
})
}
get getFile() {
var out = {};
Object.entries(this.#pool).forEach(([k, d]) => {
out[k] = d.get("default");
});
return out;
}
add(tag, defaultText = "") {
let newS = typeof this.#pool[tag] == "undefined" ? new LanguagePoolString() : this.#pool[tag];
this.#pool[tag] = newS;
newS.set(defaultText, "default");
return newS;
}
get(tag) {
return this.#pool[tag];
}
}
export class LanguagePoolString {
#value = {
};
#lang = "en";
constructor() { }
set(v, lang) {
this.#value[lang] = v;
}
get(lang) {
return this.#value[lang];
}
set lang(lang) {
this.#lang = lang;
}
r(...str) {
var out = this.#value[this.#lang] == null ? this.#value.default : this.#value[this.#lang];
for (let i = 0; i < str.length; i++) {
out = out.replace("{}", str[i]);
}
return out;
}
toString() {
return this.#value[this.#lang] == null ? this.#value.default : this.#value[this.#lang];
}
}

175
main.js
View file

@ -1,3 +1,4 @@
import { LanguagePool, LanguagePoolString } from "./language.js"
var counter = 0;
var globalStyle = document.createElement("style");
@ -7,6 +8,19 @@ String.prototype.map = Array.prototype.map;
function toCssAttr(txt){
return txt.map(d => (d.toUpperCase() === d && d !== d.toLowerCase()) ? "-" + d.toLowerCase(): d ).join("");
};
class callPromise extends Promise{
#opts = {};
constructor(cb){
super(cb);
};
set opts(opts){
this.#opts = opts;
}
get opts(){
return this.#opts;
}
}
const pools = {
@ -46,8 +60,8 @@ export class Stear{
return await elem.call(this, args, layer);
}
async include (elem, args, layer = 1, renderParent){
return await elem.call(this, args, layer, renderParent);
include(elem, args, renderParent, layer = 1){
return elem.call(this, args, layer, renderParent);
}
static addGlobalStyleText(text){
@ -104,74 +118,6 @@ ${Object.entries(json).map(d => " " + toCssAttr(d[0]) + ": " + d[1] + ";").jo
}
}
class LanguagePool{
#pool = {};
constructor(){
}
addFile(elems,lang){
Object.entries(elems).forEach(([k,d])=>{
if(typeof this.#pool[k] == "undefined"){
this.#pool[k] = new LanguagePoolString();
}
this.#pool[k].set(d,lang);
});
}
set lang (lang){
Object.entries(this.#pool).forEach(([k, d]) => {
d.lang = lang;
})
}
get getFile(){
var out = {};
Object.entries(this.#pool).forEach(([k, d])=>{
out[k] = d.get("default");
});
return out;
}
add(tag, defaultText=""){
let newS = typeof this.#pool[tag] == "undefined" ? new LanguagePoolString() : this.#pool[tag];
this.#pool[tag] = newS;
newS.set(defaultText,"default");
return newS;
}
get(tag){
return this.#pool[tag];
}
}
class LanguagePoolString {
#value = {
};
#lang = "en";
constructor(){}
set(v,lang){
this.#value[lang] = v;
}
get(lang){
return this.#value[lang];
}
set lang(lang){
this.#lang = lang;
}
r (...str){
var out = this.#value[this.#lang] == null ? this.#value.default : this.#value[this.#lang];
for (let i = 0; i < str.length; i++) {
out = out.replace("{}",str[i]);
}
return out;
}
toString(){
return this.#value[this.#lang] == null ? this.#value.default : this.#value[this.#lang];
}
}
export class SFrame{
#preRender;
#call;
@ -181,11 +127,11 @@ export class SFrame{
this.#call = call;
}
async call(stear, args, layer = 1, renderParent = stear.elem){
call(stear, args, layer = 1, renderParent = stear.elem){
let lastRender;
let renderElem;
let event = { onloaded: () => { }, onclose: ()=>{}, onresolve: () => { }, onBeforRerender: () => { }, onAfterRerender: () => { } };
let event = { onloaded: () => { }, onclose: ()=>{}, onresolve: () => { }, onBeforRerender: () => { }, onAfterRerender: () => { }, onParentRender:()=>{} };
let find = {};
let resolved = false;
@ -207,41 +153,48 @@ export class SFrame{
Object.assign(find, now.find);
return lastRender;
}
return new Promise(async (res,rej)=>{
let firstRender = false;
renderElem = await this.#call(stear,{
const ppp = new callPromise(async (res,rej)=>{
const options = {
find,
render: async (...args) => {
await event.onBeforRerender(...args);
if(renderElem)await render(args);
if (renderElem) await render(args);
firstRender = true;
await event.onAfterRerender(...args);
return find;
},
resolve: async (r,close=true)=>{
resolve: async (r, close = true) => {
if (resolved) return;
resolved = true;
await event.onresolve();
if (close && lastRender && [...(renderParent.children)].includes(lastRender._)) renderParent.removeChild(lastRender._);
res(r);
},
call: (elem, args= {})=>{
return stear.call(elem,args,layer+1);
call: (elem, args = {}) => {
return stear.call(elem, args, layer + 1);
},
close: async ()=>{
close: async () => {
await event.onclose();
if (close && lastRender && [...(renderParent.children)].includes(lastRender._)) renderParent.removeChild(lastRender._);
},
event
}, args);
include: (frame, args = {}) => {
let iFrame = new includeFrame(stear, frame, layer + 1, args);
return iFrame;
},
event,
};
window.queueMicrotask(() => ppp.opts = options);
let firstRender = false;
renderElem = await this.#call(stear, options, args);
if(!renderElem) {
}else{
if (this.#preRender | firstRender) await render([]);
event.onloaded();
}
}
});
return ppp;
}
}
@ -290,8 +243,9 @@ export class class_ {
#childs;
#build;
#find;
#doBuild;
constructor(settings,childs){
constructor(settings,childs,doBuild = true){
this.#elem = document.createElement(settings.type ?? "div");
this.#childs = childs;
var keys = Object.keys(settings);
@ -307,13 +261,19 @@ export class class_ {
Object.entries(settings[key]).forEach(([k, d]) => {
this.#elem.addEventListener(k,d);
});
} else if (key == "attr"){
Object.entries(settings[key]).forEach(([k, d]) => {
this.#elem.setAttribute(k, d);
});
} else {
this.#elem.setAttribute(key,settings[key]);
}
}
this.#doBuild = doBuild;
}
set childs(childs){
if (!this.#doBuild) return;
this.#childs = Array.isArray(childs) ? childs : [childs];
}
@ -334,11 +294,12 @@ export class class_ {
}
async build (args) {
if(!this.#doBuild)return;
this.#build = [];
for (let i = 0; i < this.#childs.length; i++) {
let elem = this.#childs[i];
if (typeof elem == "function") elem = await elem(...args);
if (typeof elem == "function") elem = (await elem(...args))??[];
if(Array.isArray(elem)){
for (let j = 0; j < elem.length; j++) {
@ -353,6 +314,7 @@ export class class_ {
}
get render (){
if (!this.#doBuild) return this.#elem;
this.#elem.innerHTML = "";
for (let i = 0; i < this.#build.length; i++) {
const elem = this.#build[i];
@ -370,10 +332,12 @@ export class class_ {
}
get find (){
var out = {};
this.#build.forEach(d=>{
Object.assign(out,d.find);
});
var out = {};
if (this.#doBuild){
this.#build.forEach(d=>{
Object.assign(out,d.find);
});
}
if (this.#find) out[this.#find]=this;
return out;
}
@ -381,3 +345,34 @@ export class class_ {
export const _ = (settings = {}, childs = []) => new class_(settings, Array.isArray(childs) ? childs : [childs]);
class includeFrame{
#elem;
#call;
constructor(stear,frame,layer, args = {}){
this.#elem = new class_({},[],false);
this.#call = stear.include(frame, args, this.#elem._, layer);
this.#call.then(()=>{
})
.catch(()=>{
});
}
get opts(){
return this.#call.opts;
}
close(){
if(this.#call){
this.#call.opts.close();
}
}
render(settings={}){
this.#elem.settings = settings;
this.#call.opts.event.onParentRender();
return this.#elem;
}
};