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

inital commit: layout idee

Browse source
This commit is contained in:
jusax23 2022-06-09 15:29:53 +02:00
parent 399a849835
commit 93b6c02acb
8 changed files with 451 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

44
connect.js Normal file
View file

@ -0,0 +1,44 @@
import { _ } from "./stear/main.js";
import { fadein, fadeout, wait } from "./stear/utils.js";
import "./waitStyle.js";
export const preRender = true;
export const render = ({},{}) =>
_({find:"main"},[
_({type:"p",find:"text",style:{
position: "absolute",
minWidth: "90%",
textAlign: "center",
top: "25%",
left: "50%",
transform: "translate(-50%,-50%)",
}}),
_({style:{
position: "absolute",
left: "50%",
top: "50%",
transform: "translate(-50%, -50%)",
}},[
_({class:"box"},[
_(), _(), _()
])
])
]);
export const call = async (stear,{find,resolve,render},{id,name}) => {
find.text._.innerText = "Connecting to: " + name + " (" + id + ")";
await fadein(find.main._, 200, true);
//do connection
await wait(1000);
var success = Math.random()>0.25;
if(success){
alert("success");
await fadeout(find.main._);
return resolve(true);
}else{
alert("error");
await fadeout(find.main._);
return resolve(false);
}
}

16
empty.js Normal file
View file

@ -0,0 +1,16 @@
import { _ } from "./stear/main.js";
import { fadein, fadeout, wait } from "./stear/utils.js";
export const preRender = true;
export const render = ({}, {}) => {
return _({}, [
]);
}
export const call = async (stear, { find, resolve, render }, { }) => {
}

27
index.html Normal file
View file

@ -0,0 +1,27 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Stear</title>
<style>
html,body{
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
#stear{
height: 100%;
width: 100%;
top: 0;
left:0;
}
</style>
</head>
<body>
<div id="stear"></div>
<script src="index.js" type="module"></script>
</body>
</html>

28
index.js Normal file
View file

@ -0,0 +1,28 @@
import { Stear, SWindow } from "./stear/main.js";
import * as connect from "./connect.js";
import * as start from "./start.js";
var stear = new Stear(document.querySelector("#stear"));
stear.style({
backgroundColor: "#dde",
fontFamily: "Helvetica Neue",
fontWeight: "lighter",
fontSize: "0.9em",
color: "#2a2a2a",
});
stear.addElement("connect", new SWindow(connect));
stear.addElement("start", new SWindow(start));
stear.call(stear.g("start"), {});
setTimeout(()=>{
document.dispatchEvent(new Event("deviceready"));
},10);
window.s = stear;

41
start.js Normal file
View file

@ -0,0 +1,41 @@
import { Stear, _ } from "./stear/main.js";
import { fadein, fadeout, wait } from "./stear/utils.js";
export const preRender = true;
export const render = ({},{}) => {
var wobel = Stear.addAnimation({
"0%":{
transform: "translate(-50%, -50%) scale(100%)"
},
"50%": {
transform: "translate(-50%, -50%) scale(110%)"
},
"100%": {
transform: "translate(-50%, -50%) scale(100%)"
}
});
console.log(wobel)
return _({style:{zindex:1000},find:"main"}, [
_({type:"img",src:"http://localhost:82/images/logo.png",style:{
width: "80vw",
maxWidth: "75vh",
position: "absolute",
left: "50%",
top: "50%",
transform: "translate(-50%, -50%)",
animation: `${wobel} 2s ease-in-out 0s infinite`,
}})
]);
}
export const call = (stear, { find, resolve, render, call }, args) => {
document.addEventListener('deviceready', async ()=>{
await wait(Math.max(1, 1000 - performance.now()));
await fadeout(find.main._);
call(stear.g("connect"),{id:"id",name:"name"});
resolve();
}, false);
}

214
stear/main.js Normal file
View file

@ -0,0 +1,214 @@
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{
#find = {};
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 = "animation_" + 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 = ".class_" + 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){
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) ?? {});
return find;
},
resolve: (r)=>{
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 }){
var Frame = _({
style: {
top:"0px",
left:"0px",
position: "absolute",
height: "100%",
width: "100%",
display: "block"
}
}, []);
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{
this.#elem.setAttribute(key,settings[key]);
}
}
}
set childs(childs){
this.#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,childs);

39
stear/utils.js Normal file
View file

@ -0,0 +1,39 @@
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);
}

42
waitStyle.js Normal file
View file

@ -0,0 +1,42 @@
import { Stear } from "./stear/main.js";
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%",
backgroundColor: "#000",
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)");