Development of QuikkerJS library.

fq.js

/*

QuikkerJS Library

v0.0.3

A library written in JavaScript for creating webpage and webapp for rapid development.

Created by Yerenzter

*/

/* The state or the life cycle of the webapp */

let state = () => {

    OnCreate();

    OnOffline();

    OnOnline();

};

/* App utitily widget */

class App {

    addChild(child) {

        return document.body.appendChild(child.el());

    }

    createLayout(type) {

        let body = document.querySelector("body");

        body.style.margin = 0;

        body.style.padding = 0;

        let elem = document.createElement("div");

        elem.style.boxSizing = "border-box";

        elem.style.display = "grid";

        elem.style.width = "100vw";

        elem.style.height = "100vh";

        elem.style.textAlign = "center";

        elem.style.overflowX = "scroll";

        elem.style.overflowY = "scroll";

        switch (type) {

            case "Center":

                elem.style.justifyItems = "center",

                elem.style.alignContent = "center";

                break;

            case "TopCenter":

                elem.style.justifyItems = "center",

                elem.style.alignContent = "flex-start";

                break;

            default: elem.style.justifyItems = "center",

                elem.style.alignContent = "center";

        }

        let prop = {

            el: () => elem,

            addChild: (child) => elem.appendChild(child.el()),

            destroyChild: (child) => elem.removeChild(child.el()),

            setBgColor: (color) => elem.style.backgroundColor = color

        };

        return prop;

    }

    destroyChild(child) {

        return document.body.removeChild(child.el());

    }

}

/* Widget utility toolkit */

class Widget {

    AlertDialog(option) {

        

        let elem = document.createElement("div");

        elem.style.display = "none";

        elem.style.justifyContent = "center";

        elem.style.alignItems = "center";

        elem.style.width = "100vw";

        elem.style.height = "100vh";

        elem.style.backgroundColor = option == "NoDim" ? "#00000000" : option == "Dim" ? "#808080AA" : "#808080AA";

        elem.style.position = "fixed";

        elem.style.zIndex = 9999;

        

        let elem_dlg = document.createElement("div");

        elem_dlg.style.display = "grid";

        elem_dlg.style.justifyContent = "center";

        elem_dlg.style.alignItems = "center";

        elem_dlg.style.width = "80vw";

        elem_dlg.style.height = "20vh";

        elem_dlg.style.borderRadius = "4px";

        elem_dlg.style.backgroundColor = "#242424";

        elem_dlg.style.color = "#FFFFFF";

        elem.appendChild(elem_dlg);

        

        let prop = {

            el: () => elem,

            setBgColor: (color) => elem_dlg.style.backgroundColor = color,

            setBorderRadius: (border) => elem_dlg.style.borderRadius = `${border}px`,

            setText: (text) => elem_dlg.textContent = text,

            show: () => elem.style.display = "grid",

            hide: () => elem.style.display = "none"

        };

        

        return prop;

    }

    AppBar() {

        let elem = document.createElement("div");

        

        let prop = {

            el: () => elem,

            setBgColor: (color) => elem.style.backgroundColor = color

        };

        

        return prop;

    }

    Button() {

        let elem = document.createElement("div");

        elem.type = "button";

        elem.style.display = "flex";

        elem.style.justifyContent = "center";

        elem.style.alignItems = "center";

        elem.style.borderRadius = "4px";

        elem.style.width = "24vw";

        elem.style.height = "6vh";

        elem.style.backgroundColor = "#484848";

        elem.style.color = "#FFFFFFFF";

        

        let prop = {

            el: () => elem,

            getText: () => elem.innerText,

            setBgColor: (bgcolor) => elem.style.backgroundColor = bgcolor,

            setBorder: (border) => elem.style.border= `solid #00000000 {border}px`,

            setBorderColor: (border) => elem.style.borderColor = border,

            setBorderRadius: (border) => elem.style.borderRadius = `${border}px`,

            setColor: (color) => elem.style.color = color,

            setFontSize: (size) => elem.style.fontSize = `${size}`,

            setHeight: (height) => elem.style.height = `${height}vh`,

            setMargin: (top, right, bottom, left) => elem.style.margin = `${top}em ${right}em ${bottom}em ${left}em`,

            setOnClick: (callback) => elem.onclick = callback,

            setOnDoubleClick: (callback) => elem.ondblclick = callback,

            setPadding: (top, right, bottom, left) => elem.style.padding = `${top}em ${right}em ${bottom} ${left}`,

            setText: (text) => elem.textContent = text,

            setWidth: (width) => elem.style.width = `${width}vw`

        };

        

        return prop;

    }

    Heading(level) {

        let elem;

        

        switch (level) {

            case 1:

                elem = document.createElement("h1");

                break;

            case 2:

                elem = document.createElement("h2");

                break;

            case 3:

           	    elem = document.createElement("h3");                break;

            case 4:

           	    elem = document.createElement("h4");

                break;

            case 5:

                elem = document.createElement("h5");

                break;

            case 6:

                elem = document.createElement("h6");

                break;

            default: elem = document.createElement("h1");

        }

        let prop = {

            el: () => elem,

            getText: () => elem.innerText,

            setColor: (color) => elem.style.color = color,

            setFontSize: (size) => elem.style.fontSize = size,

            setText: (text) => elem.textContent = text

        };

        return prop;

    }

    Layout() {

        let elem = document.createElement("div");

        

        let prop = {

            el: ()=> elem,

            addChild: (child) => elem.appendChild(child.el()),

            destroyChild: (child) => elem.removeChild(child),

            setBgColor: (color) => elem.style.backgroundColor = color,

            setHeight: (height) => elem.style.height = `${height}vh`,

            setWidth: (width) => elem.style.width = `${width}vw`

        };

        

        return prop;

    }

    Paragraph() {

        let elem = document.createElement("p");

        let prop = {

            el: () => elem,

            getText: () => elem.innerText,

            setColor: (color) => elem.style.color = color,

            setFontSize: (size) => elem.style.fontSize = `${size}px`,

            setText: (text) => elem.textContent = text

        };

        return prop;

    }

    TextEdit() {

        let elem = document.createElement("input");

        elem.type = "text";

        

        let prop = {

            el: () => elem,

            getText: () => elem.value,

            setHint: (hint) => elem.placeholder = hint,

            setOnChange: (callback) => elem.onchange= callback,

            setOnKeydown: (callback) => elem.onkeydown = callback,

            setOnKeyup: (callback) => elem.onkeyup = callback,

            setText: (text) => elem.value = text

        };

        

        return prop;

    }

}

let app = new App();

let widget = new Widget();

This is the code which is not yet finished as we want to create more widgets and properties.