FloronJs/floronExtended.js at main · Vigneshkumar212/FloronJs · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
import floronJs from "./floronJs.js";

class floronExtended {
    constructor(){

    }

    imageBlurBackrgound({imageUrl, imageOpacity, imageBlur, resizeImage, imageAlignItems, imageJustifyContent,  backgroundColor, children}){
        var imageStyles = {
            "position": "relative",
            "display": "flex",
            "align-items": imageAlignItems || "center",
            "justify-content": imageJustifyContent || "center",
            "background": backgroundColor,
            "opacity": imageOpacity,
            "filter": "blur("+imageBlur+"px)",
        }
        if (resizeImage){
            imageStyles.width= "100%"
            imageStyles.height= "100%"
        }else{
        }
        return floronJs.createElement({
            type: "div",
            children: [
                floronJs.createElement({
                    type: "img",
                    stylesProps: imageStyles,
                    properties:{
                        src: imageUrl,
                    }
                }),
                floronJs.createElement({
                    type: "div",
                    children: children,
                    stylesProps: {
                        "width": "100%",
                        "height": "100%",
                        "position": "absolute",
                        "top": 0,
                        "left": 0
                    },
                }),
            ],
            stylesProps: {
                "position": "relative",
                "display": "flex",
                "align-items": "center",
                "justify-content": "center",
                "background": backgroundColor,
                "width": "100%",
                "height": "100%",
                "overflow": "hidden"
            }
        })
    };

    ButtonPrimary({displayText, iconChild, color, backgroundColor, borderRadius, hoverColor}){
        return floronJs.createElement(
            {
                type: "button",
                children: [
                    ...iconChild,
                    floronJs.createElement({
                        type: "p",
                        stylesProps: {
                            "color": color,
                            "margin": "0px",
                        },
                        content: displayText,
                    })
                ],
                stylesProps:{
                    "padding": "10px 20px",
                    "border-radius": borderRadius,
                    "background-color": backgroundColor,
                    "border": "0px",
                    "display": "flex",
                    "align-items": "center",
                    "justify-content": "center"
                },
                hoverProperties:{
                    "margin-bottom": "10px",
                }
            }
        )
    }
    appBar({title = "", img = "", backgroundColor= "", boxShadow = "", leftChildren = [],}){

    }
}

export default new floronExtended();