updated Readme und example

README.md

@@ -1,10 +1,10 @@
 # Stear
 
 ## Introduction
-A simple Framework. Its more a try to get a WindowManger and getting rid of self written HTML and CSS
+A simple Framework. Combine all Content in one File in an Modular way and native JavaScript.
 
 ## Getting started
-Download the stear Directory and add it to your Project.
+Download the stear Submodule and add it to your Project.
 ## Features
 ### Create Stear Instance
 ```javascript
@@ -14,45 +14,42 @@ var stear = new Stear(document.querySelector("#stear"));
 ### Addind Windows
 
 ```javascript
-stear.addElement("connect", new SWindow(connect));
+stear.addElement("connect", connect);
-stear.addElement("start", new SWindow(start));
+stear.addElement("start", start);
 ```
-Windows don't necessarily have to be add this Way, but it is recommented.
+Windows don't necessarily have to be add this Way.
 
 An SWindow is an Extendion of the SFrame class. SWindow adds an DIV Element around the page content in Fullscreen.
 
 ### Calling Windows
 ```javascript
-stear.call(stear.g("start"), {});
+import start from "./start.js";
-```
-The first Argument must be an SFrame Instance. The secound Argument can be used to pass Data to the new Window.
 
-An Window/Frame is could be build by extending SFrame or SWindow, but the recommanded way is to create an ES6 Module and passing it into the SWindow or SFrame class
+stear.call(stear.g("start"), {});
+stear.call(start, {});
+```
+The first Argument must be an SFrame Instance. The secound Argument can be used to pass Data to the new Window. 
+
+This Methode returns a Promise. When the Promise will be resolved, the return Value can be accessed. The Promise can be awaited. 
 
 ### Creating a Window
 ```javascript
-import { _ } from "./stear/main.js";
+import { Stear, SWindow, _ } from "../stear/main.js";
-import { fadein, fadeout, wait } from "./stear/utils.js";
 
+const call = async (stear, { find, resolve, render, call, event }, args) => {
 
-export const preRender = true;
+    return _({
 
-export const render = ({}, {}) => {
+    }, [
 
-    return _({}, [
-        
     ]);
 }
 
-export const call = async (stear, { find, resolve, render, call  }, args) => {
+export default new SWindow({ call, preRender:true, backgroundColor: "#dde" });
-    
-}
 ```
-**preRender**: If actived render() will only be called once. If deactived you have to call the provided render() function in the call() function yourself.
+**preRender**: This is set to true by default. When set to true the content will be rendered imidiatly. Atherwise only when called render().
 
-**render**: A sync function returning your Page Content. (for Detail look deeper) The first Argument is not used right now. The scound one can contain Args passt in the render() function inside call().
+**call**: When calling a Window this function will be called. The first Argument is the used Stear Instance. The secound Argument contains some StearingTools. The third Argument are the Arguments passt in the call request. This function must return the page Content or function which returns the page content.
-
-**call**: When calling a Window this function will be called. The first Argument is the used Stear Instance. The secound Argument contains some SterungTools. The third Argument are the Arguments passt in the call request.
 
 ### Creating Page Content / class_ class
 ```javascript
@@ -63,25 +60,34 @@ _({
         color:"#fff",
         backgroundColor:"black",
     },
+    event: {
+        click: ()=>{
+
+        }
+    }
     //other Attributes
 },[
-    //pass here other class_ Instances
+    //pass here other class_ Instances or Strings or Language Sentences
+    //or functions that generats things like this
 ])
 ```
 The function _(settings, childs) returns an class\_ Instance.
 
 Attributes of the Settings Object while be applyed as HTML-Element Attribute.
-Exeptions are find, type and style (all can be empty):
+Exeptions are find, type, style, event (all can be empty):
 
 **type**: The type Attribute determines the DOMElement Type. The Default is div.
 
-**find**: The find Attribute is an identifier for the call() function. With find.someString you can get this Element. With find.someString._ you get the underlying DOMElement.
+**find**: The find Attribute is an identifier. With find.someString you can get this Element. With find.someString._ you get the underlying DOMElement.
 
 **style**: The content of the style Attribute will be applied as css style.
 
+**event**: The content of the style Attribute will be applied with addEventListener.
+
 Other Methodes:
 ```javascript
 var element = _({},[]);
+var newRenderedHTMLElement = await element.build(someArgsInArray); //Executs functions to create dynamic Structures
 var newRenderedHTMLElement = element.render ;
 var HTMLElement = element._ ; //Same as line befor when Element was completly rendered
 element.childs = [
@@ -92,6 +98,20 @@ element.settings = {
 }
 ```
 
+### Intelligent Content / StearingTools
+
+- find: Contains all Elements labeled with find. 
+- resolve: This function resolves the call, like a regular Promise. The secound Argument determies wheser the SWindow shut be closed.
+- close: This will close the SWindow.
+- render: This function, will (re-)render the page content (executes every function in Content Tree (again).)
+- call: The way to call an other SWindow/SFrame with an appropriate zIndex.
+- event: An objects with callback functions, that can be overriden:
+    - onloaded: Called after initial Content render.
+    - onresolve: Will be awaited to execute operations on resolve or to delay it, when async.
+    - onclose: Will be executed on calling close(). It will delay the closing process if async.
+    - onBeforRerender: This will be executed befor the (re-)render while called render(). When async the render will be delayed.
+    - onAfterRerender: This will be executed befor the (re-)render while called render(). When async it will delay the resolve of the render() function.
+
 ### Globel functions
 
 #### Adding Global CSS the Oldway
@@ -128,6 +148,31 @@ var KeyframeName = Stear.addAnimation({
 }/*,name*/);
 ```
 
+#### Language 
+This Tool can be used in MultiLingual Projects.
+
+Default Schema:
+```javascript
+const pool = Stear.addLanguagePool("poolname");
+const sentences1 = pool.add("sentences1", "Some Text"); //id, default Text
+const sentences2 = pool.add("sentences2", "Some {} Text with {}.");
+
+sentences1 // Some Text
+sentences2 // Some {} Text with {}.
+sentences2.r("nice","a good flavour") // Some nice Text with a good flavour.
+```
+The Language System is a two level System. It is recomendet, to use the Name of the Window as poolname. 
+The LanguageString can be used like a normal String. The Methode .r() can repalace "{}" in the Text.
+
+When useing Stear.addLanguagePool or pool.add twise the same instance will be returned.
+
+Other Language functions
+```javascript
+var someJSON = Stear.getLanguageFile;//contains all Defaults created yet.
+Stear.lang = "de"; //change Language
+Stear.addLanguageFile(fileJSON/*like some JSON*/,lang); //Language code like.
+```
+
 ### Utils
 #### wait
 ```javascript
@@ -139,9 +184,9 @@ Simpel Methode of Timedelay in an async fcuntion
 await fadein(elems,ms,force);
 await fadeout(elems,ms,force);
 ```
-**elems**: contains Element to Fade in or an Array of Elements
+- **elems**: contains Element to Fade in or an Array of Elements
-**ms** Fade time
+- **ms** Fade time
-**force** If set to true a alredy invisible/visible Element will be refaded out/in.
+- **force** If set to true a alredy invisible/visible Element will be refaded out/in.
 ### Extras
 
 loading1.js: simple to use Loadinganimation

empty.js

@@ -1,16 +0,0 @@
-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, call }, { }) => {
-    
-}

example/connect.js

@@ -1,44 +1,57 @@
 import l1 from "../stear/extra/Elements/loading1.js";
 import showStatus from "../stear/extra/Pages/showStatus.js";
-import { _ } from "../stear/main.js";
+import { Stear, SWindow, _ } from "../stear/main.js";
 import { fadein, fadeout, wait } from "../stear/utils.js";
 
-export const preRender = true;
+const pool = Stear.addLanguagePool("connect");
+const connectingto = pool.add("connectingto", "Connecting to: {} ({})");
+const connected = pool.add("connected", "connected");
+const connecterror = pool.add("connecterror", "Error while Connecting to: {}");
 
-export const render = ({},{}) => 
+export const call = async (stear, { find, resolve, render, call, event }, {name,id}) => {
-_({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%)",
-    }}, l1())
-]);
 
-export const call = async (stear, { find, resolve, render, call }, {name,id}) => {
+    event.onloaded = async ()=>{
-    find.text._.innerText = "Connecting to: " + name + " (" + id + ")";
+        await fadein(find.main, 200, true);
-    await fadein(find.main._, 200, true);  
+        //do connection
-    //do connection
+        await wait(1000);
-    await wait(1000);
+        if (Math.random() > 0.25) {
-    if (Math.random() > 0.25){
 
-        call(showStatus, { text: "Connected" });
+            call(showStatus, { text: connected });
 
-        await fadeout(find.main._);
+            return resolve(true);
-        return resolve(true);
+        } else {
-    }else{
 
-        call(showStatus, { text: "Error while Connecting to: "+name, color:"red" });
+            call(showStatus, { text: connecterror.r(name), color: "red" });
 
-        await fadeout(find.main._);
+            return resolve(false);
-        return resolve(false);
+        }
+    };
+    event.onresolve = async ()=>{
+        await fadeout(find.main);
     }
+    
+
+    return _({ find: "main" }, [
+        _({
+            type: "p", 
+            style: {
+                position: "absolute",
+                minWidth: "90%",
+                textAlign: "center",
+                top: "25%",
+                left: "50%",
+                transform: "translate(-50%,-50%)",
+            }
+        }, connectingto.r(name, id)),
+        _({
+            style: {
+                position: "absolute",
+                left: "50%",
+                top: "50%",
+                transform: "translate(-50%, -50%)",
+            }
+        }, l1())
+    ]);
 }
+
+export default new SWindow({ preRender: true, call, backgroundColor: "#dde" });

example/empty.js

@@ -0,0 +1,18 @@
+import { Stear, SWindow, _ } from "../stear/main.js";
+
+const call = async (stear, { find, resolve, close, render, call, event }, args) => {
+
+    /*event.onloaded = () => { }*/
+    /*event.onresolve = async () => { }*/
+    /*event.onclose = async () => { }*/
+    /*event.onBeforRerender = async () => { }*/
+    /*event.onAfterRerender = async () => { }*/
+
+    return _({
+
+    }, [
+
+    ]);
+}
+
+export default new SWindow({ call, backgroundColor: "#dde" });

example/index.js

@@ -1,7 +1,6 @@
 import { Stear, SWindow } from "../stear/main.js";
 
-import * as connect from "./connect.js";
+import start from "./start.js";
-import * as start from "./start.js";
 
 
 var stear = new Stear(document.querySelector("#stear"));
@@ -14,15 +13,7 @@ stear.style({
     color: "#2a2a2a",
 });
 
-stear.addElement("connect", new SWindow(connect));
+/*stear.addElement("connect", connect);
-stear.addElement("start", new SWindow(start));
+stear.addElement("start", start);*/
 
-stear.call(stear.g("start"), {});
+stear.call(start, {});
-
-setTimeout(()=>{
-    document.dispatchEvent(new Event("deviceready"));
-},10);
-
-
-
-window.s = stear;

example/start.js

@@ -1,41 +1,44 @@
-import { Stear, _ } from "../stear/main.js";
+import { Stear, SWindow, _ } from "../stear/main.js";
 import { fadein, fadeout, wait } from "../stear/utils.js";
+import connect from "./connect.js";
 
 export const preRender = true;
 
-export const render = ({},{}) => {
+var wobel = Stear.addAnimation({
-    var wobel = Stear.addAnimation({
+    "0%": {
-        "0%":{
+        transform: "translate(-50%, -50%) scale(100%)"
-            transform: "translate(-50%, -50%) scale(100%)"
+    },
-        },
+    "50%": {
-        "50%": {
+        transform: "translate(-50%, -50%) scale(110%)"
-            transform: "translate(-50%, -50%) scale(110%)"
+    },
-        },
+    "100%": {
-        "100%": {
+        transform: "translate(-50%, -50%) scale(100%)"
-            transform: "translate(-50%, -50%) scale(100%)"
+    }
-        }
+});
-    });
-    console.log(wobel)
 
-    return _({style:{zindex:1000},find:"main"}, [
+export const call = (stear, { find, resolve, render, call, event }, args) => {
-        _({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`,
 
-        }})
+    event.onloaded = async ()=>{
+        await wait(Math.max(1, 1000 - performance.now()));
+        await fadeout(find.main);
+        call(connect, { id: "123-456", name: "Device" });
+        resolve();
+    }     
+
+    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) => {
+export default new SWindow({ preRender: true, call, backgroundColor:"#dde"});
-    document.addEventListener('deviceready', async ()=>{
-        await wait(Math.max(1, 1000 - performance.now()));
-        await fadeout(find.main._);
-        call(stear.g("connect"),{id:"123-456",name:"Device"});
-        resolve();
-    }, false);
-}

stear

@@ -1 +1 @@
-Subproject commit f2822f219f036fe4b347a780f97e474081cd917d
+Subproject commit 4bc4ca5a1651c2d6cdf684c19071d10caea3ba8b