128 lines
No EOL
3.7 KiB
Markdown
128 lines
No EOL
3.7 KiB
Markdown
# Stear
|
|
|
|
# Stear
|
|
## Introduction
|
|
A simple Framework. Its more a try to get a WindowManger and getting rid of self written HTML and CSS
|
|
|
|
## Getting started
|
|
### Create Stear Instance
|
|
```javascript
|
|
import { Stear, SWindow } from "./stear/main.js";
|
|
var stear = new Stear(document.querySelector("#stear"));
|
|
```
|
|
### Addind Windows
|
|
|
|
```javascript
|
|
stear.addElement("connect", new SWindow(connect));
|
|
stear.addElement("start", new SWindow(start));
|
|
```
|
|
Windows don't necessarily have to be add this Way, but it is recommented.
|
|
|
|
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"), {});
|
|
```
|
|
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
|
|
|
|
### Creating a Window
|
|
```javascript
|
|
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 }, args) => {
|
|
|
|
}
|
|
```
|
|
**preRender**: If actived render() will only be called once. If deactived you have to call the provided render() function in the call() function yourself.
|
|
|
|
**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 SterungTools. The third Argument are the Arguments passt in the call request.
|
|
|
|
### Creating Page Content / class_ class
|
|
```javascript
|
|
_({
|
|
find:"someString",
|
|
type:"div",
|
|
style:{
|
|
color:"#fff",
|
|
backgroundColor:"black",
|
|
},
|
|
//other Attributes
|
|
},[
|
|
//pass here other class_ Instances
|
|
])
|
|
```
|
|
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):
|
|
|
|
**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.
|
|
|
|
**style**: The content of the style Attribute will be applied as css style.
|
|
|
|
Other Methodes:
|
|
```javascript
|
|
var element = _({},[]);
|
|
var newRenderedHTMLElement = element.render ;
|
|
var HTMLElement = element._ ; //Same as line befor when Element was completly rendered
|
|
element.childs = [
|
|
//Overrides the secound Argument
|
|
];
|
|
element.settings = {
|
|
//Overrides first Argument (when possible)
|
|
}
|
|
```
|
|
|
|
### Globel functions
|
|
|
|
#### Adding Global CSS the Oldway
|
|
```javascript
|
|
Stear.addGlobalStyleText(`
|
|
.cssClass {
|
|
color: #fff;
|
|
background-color:black;
|
|
}
|
|
`);
|
|
```
|
|
#### Adding Global CSS the with JSON
|
|
```javascript
|
|
var name = ".cssClass";
|
|
name = Stear.addGlobalStyleJSON({
|
|
color: "#fff",
|
|
backgroundColor: "black",
|
|
},name);
|
|
```
|
|
The Function can add CSS like CSS can be added to Elements in Pages. When leaving name empty a cssClass will be added with a sortof random name.
|
|
|
|
#### Adding CSS Animations the with JSON
|
|
```javascript
|
|
var KeyframeName = Stear.addAnimation({
|
|
"0%":{
|
|
transform: "scale(100%)",
|
|
},
|
|
"50%": {
|
|
transform: "scale(110%)",
|
|
},
|
|
"100%": {
|
|
transform: "scale(100%)",
|
|
}
|
|
}/*,name*/);
|
|
``` |