Skip to content

Latest commit

 

History

History
517 lines (493 loc) · 12.1 KB

README.md

File metadata and controls

517 lines (493 loc) · 12.1 KB

{ FLASH.js }

INTRODUCTION

v1.0.0 last update 03/06/2019

Develope html and css simply coding javascript

First of all declare the script reference into your main html then write your script after the body tag.

Create main html page like index.html and insert your script where you want 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>

Every DOM element is represented by an object in array like the example below.

/*
    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
})

Inside the object you can add others by two properties:

  1. html [string] (equivalent to HTMLElement.innerHTML)
  2. childs [array] (equivalent to HTMLElement.appendChild)

creating any html element

new Flash([
    {}, //this is equivalent to <div></div>,
    {
        tag: "input" //this is equivalent to <input/>
    }
])

childs property

new Flash([
    {
        childs: [
            {}, // first div
            {}  // second div
        ]
    }
])
equivalent html code
<body>
    <div>
        <div></div>
        <div></div>
    </div>
</body>

html property

new Flash([
    {
        html: "<input type='text' value='...'/>"
    }
])
equivalent html code
<body>
    <div>
        <input type='text' value='...'/>
    </div>
</body>

PROPERTIES

Flash has different properties you can use as html attributes.

All properties are optional. By defaul property tag value is div.

Special properties

not visible in the elements structure inside inspector

Property Name Value Typeof
tag string
html string
childs array
hover object
focus object
active object

Standard properties

depends on tag you would to create

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
...

Reserved* property

not visible in the elements structure (inside inspector)

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

FROM OBJECT TO HTMLElement

Flash input

{
    tag: "input",
    type: "checkbox",
    checked: true
}

equivalent HTML input tag

<input type="checkbox" checked/>

:

Flash button

{
    tag: "button",
    html: "click me!",
    onclick: "alert('clicked!')"
}

equivalent HTML button tag

<button onclick="alert('clicked!')">click me!</button>

:

PROTOTYPES

Flash.init()

/*
    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
    }
})

Flash.prettify()

/*
    you can use FlashPrettify() or __p()
    stylize and removes margins from the document body
*/
const F = new Flash([
    ...
]);

F.prettify()

SCOPE

FIND

/*
    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"
})
returns an object that contains element based on ID with self and parent properties inside scope

FIND BY

/*
    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}]
})

QUERY

/*
    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}]
})
returns an objects array of elements based on ID with self and parent properties inside scope

METHODS

Two methods allow you to compile faster your HTML page

FlashConcat

// you can use FlashConcat() or __c()

const STYLE = {
    div: {
        color: "#f00",
        backgroundColor: "#000"
    }
}

new Flash([
    {
        style: FlashConcat(
            STYLE.div,
            {
                height: 100
            }
        )
    }
])
merge two or more objects. You can use it for styles, elements and others.

FlashTransform

/* 
    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.")
    }
)
provide to animate HTMLElements by style transformation

FlashModule

/*
    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"))
}
returns an external json object

FlashInclude

/*
    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"))
load an external js file

STYLE

STYLE PROPERTY METHODS

as string value (static mode)

{
    style: "background-color: red; color: white"
}

as object value (dynamic mode)

{
    style: {
        backgroundColor: "red",
        color: "white"
    }
}

as object value (dynamic mode with query)

{
    style: {
        backgroundColor: "red",
        color: "white",
        width: SCREEN.width
    }
}

STYLE ANIMATIONS

Using an object as a property value, you can animate the style

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
        }
    }
}

PSEUDO-CLASSES

HOVER PROPERTY

you can use this to see changes when mouse gets hover the element and goes outside

Property Name Value Typeof
hover object 
{
    style: {
        width: 10
    },
    hover: {
        width: 100
    }
}

FOCUS PROPERTY

you can use this to see changes when an element is focused

Property Name Value Typeof
focus object 
{
    style: {
        width: 10
    },
    focus: {
        width: 100
    }
}

ACTIVE PROPERTY

you can use this to see changes when an element is actived

Property Name Value Typeof
active object 
{
    style: {
        width: 10
    },
    active: {
        width: 100
    }
}

QUERIES

All properties can be used by query. To do this assign string value to the property with double curly brackets.

In this case you can use the reseved object words like below

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}})"
}

EXAMPLE

index.html

<!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>

site.js

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