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

Compare commits

base: jusax23:bf9908ded12e2e68cf02feb7a051664f2e2a46b2
Branches Tags
jusax23:main
jusax23:submodule
..
compare: jusax23:18e3b13fdc0566768cdd675c6755f133894a8935
Branches Tags
jusax23:submodule
jusax23:main

No commits in common. "bf9908ded12e2e68cf02feb7a051664f2e2a46b2" and "18e3b13fdc0566768cdd675c6755f133894a8935" have entirely different histories.
bf9908ded1 ... 18e3b13fdc

1 changed files with 109 additions and 160 deletions
Show stats Expand all files Collapse all files

269
main.js
View file

@ -6,19 +6,19 @@ document.head.appendChild(globalStyle);
String.prototype.map = Array.prototype.map; String.prototype.map = Array.prototype.map;
function toCssAttr(txt) { function toCssAttr(txt){
return txt.map(d => (d.toUpperCase() === d && d !== d.toLowerCase()) ? "-" + d.toLowerCase() : d).join(""); return txt.map(d => (d.toUpperCase() === d && d !== d.toLowerCase()) ? "-" + d.toLowerCase(): d ).join("");
}; };
class callPromise extends Promise { class callPromise extends Promise{
#opts = {}; #opts = {};
constructor(cb) { constructor(cb){
super(cb); super(cb);
}; };
set opts(opts) { set opts(opts){
this.#opts = opts; this.#opts = opts;
} }
get opts() { get opts(){
return this.#opts; return this.#opts;
} }
} }
@ -27,10 +27,8 @@ const pools = {
}; };
const stears = [];
/** Stear class */ /** Stear class */
export class Stear { export class Stear{
elem; elem;
#childs = {}; #childs = {};
@ -41,16 +39,9 @@ export class Stear {
* *
* @param {HTMLElement} elem * @param {HTMLElement} elem
*/ */
constructor(elem) { constructor(elem){
this.elem = elem; this.elem = elem;
elem.style.position = "relative"; elem.style.position="relative";
stears.push(this);
}
destroy() {
let i = stears.indexOf(this);
if (i == -1) return;
stears.splice(i, 1);
delete this;
} }
/** /**
@ -58,7 +49,7 @@ export class Stear {
* *
* @param {JSON} css * @param {JSON} css
*/ */
style(css) { style(css){
Object.entries(css).forEach(([k, d]) => { Object.entries(css).forEach(([k, d]) => {
this.elem.style[k] = d; this.elem.style[k] = d;
}); });
@ -70,8 +61,8 @@ export class Stear {
* @param {string} id * @param {string} id
* @param {SFrame} elem * @param {SFrame} elem
*/ */
addElement(id, elem) { addElement (id,elem){
if (!(elem instanceof SFrame)) throw new TypeError("Cannot add Element not extending from SFrame"); if(!(elem instanceof SFrame))throw new TypeError("Cannot add Element not extending from SFrame");
this.#childs[id] = elem; this.#childs[id] = elem;
} }
@ -81,11 +72,11 @@ export class Stear {
* @param {string} id * @param {string} id
* @returns {SFrame} * @returns {SFrame}
*/ */
getElement(id) { getElement (id) {
return this.g(id); return this.g(id);
} }
g(id) { g(id){
return this.#childs[id]; return this.#childs[id];
} }
@ -97,7 +88,7 @@ export class Stear {
* @param {number} layer * @param {number} layer
* @returns {callPromise} * @returns {callPromise}
*/ */
async call(elem, args, layer = 1) { async call (elem, args, layer = 1){
return await elem.call(this, args, this.#frames, layer); return await elem.call(this, args, this.#frames, layer);
} }
@ -110,7 +101,7 @@ export class Stear {
* @param {number} layer * @param {number} layer
* @returns {callPromise} * @returns {callPromise}
*/ */
include(elem, args, renderParent, layer = 1) { include(elem, args, renderParent, layer = 1){
return elem.call(this, args, this.#frames, layer, renderParent); return elem.call(this, args, this.#frames, layer, renderParent);
} }
@ -120,20 +111,20 @@ export class Stear {
* @param {*} arg * @param {*} arg
* @returns {Promise} * @returns {Promise}
*/ */
rerenderGlobal(arg) { rerenderGlobal(arg){
return new Promise((res, rej) => { return new Promise((res,rej)=>{
if (this.#frames.length == 0) return void res(); if(this.#frames.length == 0)return void res();
let running = this.#frames.length; let running = this.#frames.length;
for (let i = 0; i < this.#frames.length; i++) { for (let i = 0; i < this.#frames.length; i++) {
const element = this.#frames[i]; const element = this.#frames[i];
element.globalRenderRequest(arg) element.globalRenderRequest(arg)
.then(() => { .then(()=>{
running--; running--;
if (running == 0) res(); if(running==0)res();
}); });
} }
}); });
} }
/** /**
@ -141,8 +132,8 @@ export class Stear {
* *
* @param {string} text * @param {string} text
*/ */
static addGlobalStyleText(text) { static addGlobalStyleText(text){
globalStyle.innerHTML += "\n" + text; globalStyle.innerHTML+="\n"+text;
} }
/** /**
@ -152,13 +143,14 @@ export class Stear {
* @param {string} name * @param {string} name
* @returns {string} name * @returns {string} name
*/ */
static addAnimation(steps, name = "stearAnimation_" + counter++) { static addAnimation(steps, name = "stearAnimation_" + counter++){
Stear.addGlobalStyleText(`@keyframes ${name} { Stear.addGlobalStyleText(`@keyframes ${name} {
${Object.entries(steps).map(([k, d]) => ${
` ${k} { Object.entries(steps).map(([k,d])=>
` ${k} {
${Object.entries(d).map(d => " " + toCssAttr(d[0]) + ": " + d[1] + ";").join("\n")} ${Object.entries(d).map(d => " " + toCssAttr(d[0]) + ": " + d[1] + ";").join("\n")}
}`).join("\n") }`).join("\n")
} }
}`); }`);
return name; return name;
@ -170,7 +162,7 @@ ${Object.entries(d).map(d => " " + toCssAttr(d[0]) + ": " + d[1] + ";").joi
* @param {string} name - e.g. .classname * @param {string} name - e.g. .classname
* @returns {string} name * @returns {string} name
*/ */
static addGlobalStyleJSON(json, name = ".stearClass_" + counter++) { static addGlobalStyleJSON(json, name = ".stearClass_" + counter++){
Stear.addGlobalStyleText(` Stear.addGlobalStyleText(`
${name} { ${name} {
${Object.entries(json).map(d => " " + toCssAttr(d[0]) + ": " + d[1] + ";").join("\n")} ${Object.entries(json).map(d => " " + toCssAttr(d[0]) + ": " + d[1] + ";").join("\n")}
@ -185,8 +177,8 @@ ${Object.entries(json).map(d => " " + toCssAttr(d[0]) + ": " + d[1] + ";").jo
* @param {string} name * @param {string} name
* @returns {LanguagePool} * @returns {LanguagePool}
*/ */
static addLanguagePool(name) { static addLanguagePool(name){
if (typeof pools[name] == "undefined") { if(typeof pools[name] == "undefined"){
pools[name] = new LanguagePool(); pools[name] = new LanguagePool();
} }
return pools[name]; return pools[name];
@ -198,27 +190,27 @@ ${Object.entries(json).map(d => " " + toCssAttr(d[0]) + ": " + d[1] + ";").jo
* @param {JSON} data * @param {JSON} data
* @param {string} lang * @param {string} lang
*/ */
static addLanguageFile(data, lang) { static addLanguageFile(data,lang){
Object.entries(data).forEach(([k, d]) => { Object.entries(data).forEach(([k,d]) => {
if (typeof pools[k] == "undefined") pools[k] = new LanguagePool(); if (typeof pools[k] == "undefined") pools[k] = new LanguagePool();
pools[k].addFile(d, lang); pools[k].addFile(d,lang);
}); });
} }
/** /**
* Used Language * Used Language
*/ */
static set lang(lang) { static set lang (lang){
Object.entries(pools).forEach(([k, d]) => { Object.entries(pools).forEach(([k, d]) => {
d.lang = lang; d.lang = lang;
}); });
stears.forEach(s => s.rerenderGlobal()); this.globalRenderRequest();
} }
/** /**
* Generate Language File with defaults * Generate Language File with defaults
*/ */
static get getLanguageFile() { static get getLanguageFile(){
var out = {}; var out = {};
Object.entries(pools).forEach(([k, d]) => { Object.entries(pools).forEach(([k, d]) => {
out[k] = d.getFile; out[k] = d.getFile;
@ -342,7 +334,7 @@ ${Object.entries(json).map(d => " " + toCssAttr(d[0]) + ": " + d[1] + ";").jo
/** /**
* SFrame class * SFrame class
*/ */
export class SFrame { export class SFrame{
#preRender; #preRender;
#call; #call;
@ -352,26 +344,26 @@ export class SFrame {
* @param {callCallback} args.call * @param {callCallback} args.call
* @param {boolean} [args.preRender] * @param {boolean} [args.preRender]
*/ */
constructor({ call, preRender = true }) { constructor({ call, preRender = true }){
this.#preRender = preRender; this.#preRender = preRender;
this.#call = call; this.#call = call;
} }
call(stear, args, frames, layer = 1, renderParent = stear.elem) { call(stear, args, frames, layer = 1, renderParent = stear.elem){
let lastRender; let lastRender;
let renderElem; let renderElem;
let event = { onloaded: () => { }, onclose: () => { }, onresolve: () => { }, onBeforRerender: () => { }, onAfterRerender: () => { }, onParentRender: () => { }, onGlobalRenderRequest: () => true }; let event = { onloaded: () => { }, onclose: ()=>{}, onresolve: () => { }, onBeforRerender: () => { }, onAfterRerender: () => { }, onParentRender:()=>{}, onGlobalRenderRequest:()=>true };
let find = {}; let find = {};
let resolved = false; let resolved = false;
async function render(args) { async function render(args){
if (!renderElem) return; if(!renderElem) return;
if (lastRender) if ([...(renderParent.children)].includes(lastRender._)) renderParent.removeChild(lastRender._); if (lastRender) if ([...(renderParent.children)].includes(lastRender._)) renderParent.removeChild(lastRender._);
let now = renderElem; let now = renderElem;
if (typeof now == "function") now = await now(); if(typeof now == "function")now = await now();
if (!(now instanceof class_)) throw new Error("The Element to render is not an instance of class_"); if(!(now instanceof class_)) throw new Error("The Element to render is not an instance of class_");
await now.build(args); await now.build(args);
renderParent.appendChild(now.render); renderParent.appendChild(now.render);
@ -384,11 +376,11 @@ export class SFrame {
return lastRender; return lastRender;
} }
const ppp = new callPromise(async (res, rej) => { const ppp = new callPromise(async (res,rej)=>{
const globalRegister = { const globalRegister = {
globalRenderRequest: async (...args) => { globalRenderRequest: async (...args)=>{
const arg = await event.onGlobalRenderRequest(...args); const arg = await event.onGlobalRenderRequest(...args);
if (arg === false) return; if(arg===false) return;
await options.render(arg); await options.render(arg);
} }
} }
@ -408,7 +400,7 @@ export class SFrame {
await event.onresolve(); await event.onresolve();
if (close && lastRender && [...(renderParent.children)].includes(lastRender._)) renderParent.removeChild(lastRender._); if (close && lastRender && [...(renderParent.children)].includes(lastRender._)) renderParent.removeChild(lastRender._);
let i = frames.indexOf(globalRegister); let i = frames.indexOf(globalRegister);
if (i > -1) frames.splice(i, 1); if(i>-1)frames.splice(i,1);
res(r); res(r);
}, },
call: (elem, args = {}) => { call: (elem, args = {}) => {
@ -424,15 +416,15 @@ export class SFrame {
}, },
event, event,
}; };
window.queueMicrotask(() => ppp.opts = options); window.queueMicrotask(() => ppp.opts = options);
let firstRender = false; let firstRender = false;
renderElem = await this.#call(stear, options, args); renderElem = await this.#call(stear, options, args);
if (!renderElem) { if(!renderElem) {
} else { }else{
if (this.#preRender | firstRender) await render([]); if (this.#preRender | firstRender) await render([]);
event.onloaded(); event.onloaded();
} }
}); });
return ppp; return ppp;
} }
@ -440,17 +432,17 @@ export class SFrame {
} }
/** Create a SWindow, a Fullscreen Frame. */ /** Create a SWindow, a Fullscreen Frame. */
export class SWindow extends SFrame { export class SWindow extends SFrame{
#Frame; #Frame;
/** /**
* *
* @param {Object} args * @param {Object} args
* @param {callCallback} args.call * @param {callCallback} args.call
* @param {boolean} [args.preRender] * @param {boolean} [args.preRender]
*/ */
constructor({ call, preRender = true, backgroundColor = "transparent" }) { constructor({ call, preRender = true, backgroundColor = "transparent"}){
/*var Frame = _({ /*var Frame = _({
style: { style: {
top: "0px", top: "0px",
@ -465,7 +457,7 @@ export class SWindow extends SFrame {
find:"main" find:"main"
}, []);*/ }, []);*/
super({ super({
call: async (...args) => _({ call: async(...args) => _({
style: { style: {
top: "0px", top: "0px",
left: "0px", left: "0px",
@ -477,12 +469,12 @@ export class SWindow extends SFrame {
//overflow:"scroll" //overflow:"scroll"
}, },
find: "main" find: "main"
}, await call(...args)), }, await call(...args)),
preRender preRender
}); });
//this.#Frame = Frame; //this.#Frame = Frame;
} }
} }
/** /**
@ -502,8 +494,6 @@ export class class_ {
#find; #find;
#doBuild; #doBuild;
#dynamicState = 0;
/** /**
* Generate a new Stear render Node. * Generate a new Stear render Node.
* *
@ -511,28 +501,28 @@ export class class_ {
* @param {Array} childs * @param {Array} childs
* @param {boolean} doBuild * @param {boolean} doBuild
*/ */
constructor(settings, childs, doBuild = true) { constructor(settings,childs,doBuild = true){
this.#elem = document.createElement(settings.type ?? "div"); this.#elem = document.createElement(settings.type ?? "div");
this.#childs = childs; this.#childs = childs;
var keys = Object.keys(settings); var keys = Object.keys(settings);
for (let i = 0; i < keys.length; i++) { for (let i = 0; i < keys.length; i++) {
const key = keys[i]; const key = keys[i];
if (key == "type") { } else if (key == "style") { if(key == "type"){} else if (key == "style"){
Object.entries(settings[key]).forEach(([k, d]) => { Object.entries(settings[key]).forEach(([k,d])=>{
this.#elem.style[k] = d; this.#elem.style[k] = d;
}); });
} else if (key == "find") { } else if (key == "find"){
this.#find = settings[key]; this.#find = settings[key];
} else if (key == "event") { } else if (key == "event"){
Object.entries(settings[key]).forEach(([k, d]) => { Object.entries(settings[key]).forEach(([k, d]) => {
this.#elem.addEventListener(k, d); this.#elem.addEventListener(k,d);
}); });
} else if (key == "attr") { } else if (key == "attr"){
Object.entries(settings[key]).forEach(([k, d]) => { Object.entries(settings[key]).forEach(([k, d]) => {
this.#elem.setAttribute(k, d); this.#elem.setAttribute(k, d);
}); });
} else { } else {
this.#elem.setAttribute(key, settings[key]); this.#elem.setAttribute(key,settings[key]);
} }
} }
this.#doBuild = doBuild; this.#doBuild = doBuild;
@ -541,16 +531,15 @@ export class class_ {
/** /**
* @param {Array} childs * @param {Array} childs
*/ */
set childs(childs) { set childs(childs){
if (!this.#doBuild) return; if (!this.#doBuild) return;
this.#childs = Array.isArray(childs) ? childs : [childs]; this.#childs = Array.isArray(childs) ? childs : [childs];
this.#dynamicState = 0;
} }
/** /**
* @param {renderNodeSettings} settings * @param {renderNodeSettings} settings
*/ */
set settings(settings) { set settings(settings){
var keys = Object.keys(settings); var keys = Object.keys(settings);
for (let i = 0; i < keys.length; i++) { for (let i = 0; i < keys.length; i++) {
const key = keys[i]; const key = keys[i];
@ -566,58 +555,29 @@ export class class_ {
} }
} }
async #syncBuild(args) {
for (let i = 0; i < this.#childs.length; i++) {
let elem = this.#childs[i];
if (Array.isArray(elem)) {
for (let j = 0; j < elem.length; j++) {
if (elem[j] instanceof class_) await elem[j].build(args);
}
} else {
if (elem instanceof class_) await elem.build(args);
}
}
}
/** /**
* Build Stear Structure * Build Stear Structure
* *
* @param {*} args * @param {*} args
*/ */
async build(args) { async build (args) {
if (!this.#doBuild) return; if(!this.#doBuild)return;
if (this.#dynamicState < 0) return void await this.#syncBuild(args);
this.#build = []; this.#build = [];
for (let i = 0; i < this.#childs.length; i++) { for (let i = 0; i < this.#childs.length; i++) {
let elem = this.#childs[i]; let elem = this.#childs[i];
if (typeof elem == "function") { if (typeof elem == "function") elem = (await elem(...args))??[];
elem = (await elem(...args)) ?? [];
this.#dynamicState = 2;
}
if (Array.isArray(elem)) { if(Array.isArray(elem)){
for (let j = 0; j < elem.length; j++) { for (let j = 0; j < elem.length; j++) {
if (elem[j] instanceof class_) await elem[j].build(args); if (elem[j] instanceof class_) await elem[j].build(args);
} }
this.#build.push(...elem); this.#build.push(...elem);
} else { }else{
if (elem instanceof class_) await elem.build(args); if(elem instanceof class_)await elem.build(args);
this.#build.push(elem); this.#build.push(elem);
} }
} }
if (this.#dynamicState <= 0) this.#dynamicState = -1;
}
#syncRender() {
let out = [];
for (let i = 0; i < this.#build.length; i++) {
const elem = this.#build[i];
if (typeof elem != "string" && !(elem instanceof LanguagePoolString)) {
out[i] = elem.render;
}
}
} }
/** /**
@ -625,51 +585,40 @@ export class class_ {
* *
* @return {HTMLElement} * @return {HTMLElement}
*/ */
get render() { get render (){
if (!this.#doBuild) return this.#elem; if (!this.#doBuild) return this.#elem;
if (this.#dynamicState < -1) { this.#elem.innerHTML = "";
this.#syncRender();
return this.#elem;
}
let out = [];
for (let i = 0; i < this.#build.length; i++) { for (let i = 0; i < this.#build.length; i++) {
const elem = this.#build[i]; const elem = this.#build[i];
if (typeof elem == "string" || elem instanceof LanguagePoolString) { if (typeof elem == "string" || elem instanceof LanguagePoolString) {
out[i] = document.createTextNode(String(elem)); this.#elem.appendChild(document.createTextNode(String(elem)));
} else { } else {
out[i] = elem.render; this.#elem.appendChild(elem.render);
} }
} }
this.#elem.replaceChildren(...out);
if (this.#dynamicState < 0) this.#dynamicState = -2;
return this.#elem; return this.#elem;
} }
/** /**
* @return {HTMLElement} * @return {HTMLElement}
*/ */
get _() { get _ (){
return this.#elem; return this.#elem;
} }
async rerender(args = []) {
await this.build(args);
this.render;
}
/** /**
* Returns find Object * Returns find Object
* *
* @return {Object} find * @return {Object} find
*/ */
get find() { get find (){
var out = {}; var out = {};
if (this.#doBuild) { if (this.#doBuild){
this.#build.forEach(d => { this.#build.forEach(d=>{
Object.assign(out, d.find); Object.assign(out,d.find);
}); });
} }
if (this.#find) out[this.#find] = this; if (this.#find) out[this.#find]=this;
return out; return out;
} }
} }
@ -681,14 +630,14 @@ export class class_ {
* @returns {class_} * @returns {class_}
*/ */
export const _ = (settings = {}, childs = []) => new class_(settings, Array.isArray(childs) ? childs : [childs]); export const _ = (settings = {}, childs = []) => new class_(settings, Array.isArray(childs) ? childs : [childs]);
export const s = (type, settings, ...childs) => { export const s = (type,settings,...childs)=>{
settings = settings ?? {}; settings = settings ?? {};
settings.type = type; settings.type = type;
return new class_(settings, childs); return new class_(settings,childs);
} }
/** includeFrame */ /** includeFrame */
class includeFrame { class includeFrame{
#elem; #elem;
#call; #call;
/** /**
@ -699,29 +648,29 @@ class includeFrame {
* @param {number} layer * @param {number} layer
* @param {*} args * @param {*} args
*/ */
constructor(stear, frame, layer, args = {}) { constructor(stear,frame,layer, args = {}){
this.#elem = new class_({}, [], false); this.#elem = new class_({},[],false);
this.#call = stear.include(frame, args, this.#elem._, layer); this.#call = stear.include(frame, args, this.#elem._, layer);
this.#call.then(() => { this.#call.then(()=>{
}) })
.catch(() => { .catch(()=>{
}); });
} }
/** /**
* @return {callUtils} utils from included Frame * @return {callUtils} utils from included Frame
*/ */
get opts() { get opts(){
return this.#call.opts; return this.#call.opts;
} }
/** /**
* Close the included Frame. * Close the included Frame.
*/ */
close() { close(){
if (this.#call) { if(this.#call){
this.#call.opts.close(); this.#call.opts.close();
} }
} }
@ -732,10 +681,10 @@ class includeFrame {
* @param {*} settings * @param {*} settings
* @returns {HTMLElement} * @returns {HTMLElement}
*/ */
render(settings = {}) { render(settings={}){
this.#elem.settings = settings; this.#elem.settings = settings;
this.#call.opts.event.onParentRender(); this.#call.opts.event.onParentRender();
return this.#elem; return this.#elem;
} }
}; };