{ FLASH.js }
First of all declare the script reference into your main html then write your script after the body tag.
<!doctype html>
<html>
<head>
<title>Flash</title>
<script type="text/javascript" src="path/to/flash.js"></script>
</head>
<body>
</body>
<script type="text/javascript" src="path/to/site.js"></script>
</html>/*
Flash(siteStructure [array], domElement [HTMLElement])
the second argument is optional (if not specified is body)
or if declared could be a string (element id) or HTMLElement
after that you can get callback with then method and use it
to update dom
*/
new Flash([
{}
]).then((scope)=>{
scope.find("elementId").html = "Hello Flash"; //find elementId inside dom and change his html
})- html [string] (equivalent to HTMLElement.innerHTML)
- childs [array] (equivalent to HTMLElement.appendChild)
new Flash([
{}, //this is equivalent to <div></div>,
{
tag: "input" //this is equivalent to <input/>
}
])new Flash([
{
childs: [
{}, // first div
{} // second div
]
}
])<body>
<div>
<div></div>
<div></div>
</div>
</body>new Flash([
{
html: "<input type='text' value='...'/>"
}
])<body>
<div>
<input type='text' value='...'/>
</div>
</body>| Property Name | Value Typeof |
|---|---|
| tag | string |
| html | string |
| childs | array |
| hover | object |
| focus | object |
| active | object |
| Property Name | Value Typeof | Note |
|---|---|---|
| id | string | if not declared it is auto generated |
| style | string or animation object | |
| type | string | |
| width | string or number | reserved to table, img, ... |
| height | string or number | reserved to table, img, ... |
| onclick | string | |
| onkeyup | string | |
| ... |
| Property Name | Value Typeof |
|---|---|
| element | HTMLElement |
| parent | object |
*Flash has a global object that returns after then method called globalScope where you retreive each object with element property that contains the real HTMLElement and his parent object
{
tag: "input",
type: "checkbox",
checked: true
}<input type="checkbox" checked/>:
{
tag: "button",
html: "click me!",
onclick: "alert('clicked!')"
}<button onclick="alert('clicked!')">click me!</button>/*
set initial document parameters as title and style
*/
const F = new Flash([
...
]);
F.init({
title: "Flash Page", //document.title changed
style: {
backgroundColor: "red" //document stylized
}
}) /*
you can use FlashPrettify() or __p()
stylize and removes margins from the document body
*/
const F = new Flash([
...
]);
F.prettify() /*
you can use scope.find(#id) to find object and realtime change DOM Elements
*/
new Flash([
{
id: "test",
html: "Hello World"
}
]).then((scope)=>{
scope.find("test").html = "Hello Flash"
})/*
you can use scope.findBy(property,name) to find object and realtime change DOM Elements
*/
new Flash([
{
tag: "button",
html: "don't click me"
{
tag: "button",
html: "click me"
}
]).then((scope)=>{
console.log(scope.findBy("tag","button")) //return [{...button1},{...button2}]
})/*
you can use scope.query(element) to find objects list and realtime change DOM Elements
*/
new Flash([
{
class: "main",
html: "don't search me!"
childs: [
{
id: "find-1"
},
{
id: "find-2"
}
]
{
]).then((scope)=>{
console.log(scope.query(".main #find-1")) //return [{...find-1}]
})// you can use FlashConcat() or __c()
const STYLE = {
div: {
color: "#f00",
backgroundColor: "#000"
}
}
new Flash([
{
style: FlashConcat(
STYLE.div,
{
height: 100
}
)
}
])/*
you can use FlashTransform() or __t()
FlashTransform (
htmlQueryReference [string],
movementsObject [object], // the property must be composed by numeric array [start,stop]
duration [number], // (optional) milliseconds
callback [function] // (optional)
)
*/
FlashTransform(
"#someId",
{
scale: [0,2],
translateX: [100,500]
},
1000,
()=>{
alert("Wow! transformation complete.")
}
)/*
you can use FlashModule("path/to/file") or __m("path/to/file") just inside the server
to include synchronously any external json file
*/
{
tag: "input",
style: FlashModule("path/to/file"))
}/*
you can use FlashInclude("path/to/file") or __i("path/to/file") just inside the server
to include synchronously any external javascript file
*/
FlashInclude("path/to/file")){
style: "background-color: red; color: white"
}{
style: {
backgroundColor: "red",
color: "white"
}
}{
style: {
backgroundColor: "red",
color: "white",
width: SCREEN.width
}
}| Property Name | Value Typeof | Note | Optional | default |
|---|---|---|---|---|
| range | numeric array | [n,n1,n2,n3,...] | no | |
| type | string | "px" or "deg" ... | yes | auto |
| duration | numeric | cycle duration | yes | 1000 |
| delay | numeric | cycle delay | yes | 0 |
| loop | boolean or numeric | true is infinite | yes | false |
{
style: {
width: {
range: [0,100,0],
duration: 2500,
delay: 10000
}
}
}| Property Name | Value Typeof |
|---|---|
| hover | object |
{
style: {
width: 10
},
hover: {
width: 100
}
}| Property Name | Value Typeof |
|---|---|
| focus | object |
{
style: {
width: 10
},
focus: {
width: 100
}
}| Property Name | Value Typeof |
|---|---|
| active | object |
{
style: {
width: 10
},
active: {
width: 100
}
}All properties can be used by query. To do this assign string value to the property with double curly brackets.
| Reserved Word | Typeof | Return | Where is |
|---|---|---|---|
| SCREEN | object | width:[num] | Public |
| height:[num] | |||
| SELF | object | this scope object | Private |
| width:[num] | |||
| height:[num] | |||
| PARENT | object | this parent object | Private |
| width:[num] | |||
| height:[num] |
{
html: "{{SELF.id}}",
style: {
width: SCREEN.width/2,
height: SCREEN.height
},
onclick: "console.log({{PARENT.width}})"
}<!doctype html>
<html>
<head>
<title>Flash</title>
<script type="text/javascript" src="flash.js"></script>
</head>
<body>
</body>
</html>
<script type="text/javascript" src="site.js"></script>const STYLE = {
main: {
width: SCREEN.width,
height: SCREEN.height,
display: "flex",
justifyContent: "center",
alignItems: 'center',
backgroundColor: '#333',
color: "white"
},
child: {
width: SCREEN.height/3,
height: SCREEN.height/3,
backgroundColor: '#fff',
borderRadius: {
range: [0,SCREEN.height/1.5],
duration: 300,
},
display: "flex",
justifyContent: "center",
alignItems: 'center',
color: '#222',
opacity: {
range: [0.0,0.2,1.0],
duration: 300
}
}
}
let F = new Flash([
{
id: "main",
style: STYLE.main,
childs: [
{
id: "child",
html: "Hello World",
style: STYLE.child,
hover: {
color: "red"
}
}
]
}
]);
F.then((scope)=>{
setTimeout(()=>{
scope.find("child").html = "Hello Flash"
},5000)
})
FlashTransform(
"#child",
{
scale: [10,1]
},
1500
)
F.prettify();Another working example at link