inital commit: layout idee
This commit is contained in:
parent
399a849835
commit
93b6c02acb
8 changed files with 451 additions and 0 deletions
44
connect.js
Normal file
44
connect.js
Normal 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
16
empty.js
Normal 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
27
index.html
Normal 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
28
index.js
Normal 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
41
start.js
Normal 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
214
stear/main.js
Normal 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
39
stear/utils.js
Normal 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
42
waitStyle.js
Normal 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)");
|
||||
|
||||
Loading…
Reference in a new issue