foldui-builder/index.html at main · DanishAhmedKhan/foldui-builder · 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
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>SchemaBuilder</title>
</head>

<body>
    <div id="container"></div>
    <script type="module">

        import { SchemaBuilder } from './src/index'
        import { Fold, NodeSpec } from 'foldui'

        const builder = new SchemaBuilder(NodeSpec)

        const rootId = builder.getRootId()

        // builder.transaction(() => {
        //     const t1 = builder.add('text').into(rootId)
        //     const t2 = builder.add('text').into(rootId)
        //     builder.patchPath(t1, 'style.text.color', 'red')
        //     builder.patchPath(t2, 'style.text.color', 'blue')
        //     builder.patchPath(t1, 'style.text.fontSize', '30px')
        //     const b1 = builder.add('button').into(rootId)
        // })

        Fold.use({
            beforeRender({ node, styleEngine }) {
                const parseMediaKey = (key) => {
                    const minMatch = key.match(/^min-(\d+)$/)
                    if (minMatch) return `(min-width: ${minMatch[1]}px)`

                    const maxMatch = key.match(/^max-(\d+)$/)
                    if (maxMatch) return `(max-width: ${maxMatch[1]}px)`

                    return null
                }

                const responsive = node?.responsive
                if (!responsive || !styleEngine) return

                for (const part in responsive) {
                    const config = responsive[part]

                    for (const media in config) {
                        const styleObj = config[media]
                        if (!styleObj) continue

                        const selector = `[data-fui-id="${node.id}"][data-part="${part}"]`

                        if (media === 'base') {
                            styleEngine.push(selector, styleObj)
                        } else {
                            const mediaQuery = parseMediaKey(media)
                            if (!mediaQuery) continue

                            styleEngine.push(selector, styleObj, mediaQuery)
                        }
                    }
                }
            }
        })

        const selectedNodeId = rootId
        builder.transaction(() => {
            const sectionId = builder.add('section').into(selectedNodeId)
            const rowId = builder
                .add({
                    type: 'container',
                    responsive: {
                        container: {
                            base: {
                                maxWidth: 800,
                                margin: '0 auto',
                            }
                        }
                    }
                })
                .into(sectionId)

            const columnCount = 2
            for (let i = 0; i < columnCount; i++) {
                const containerId = builder
                    .add({
                        type: 'container',
                        props: {
                            layout: {
                                display: 'flex',
                                direction: 'vetical',
                            },
                        },
                    })
                    .into(rowId)

                builder.add('text').into(containerId)
            }

        })

        const renderSchema = builder.toRenderSchema()

        const html = Fold.render(renderSchema)
        const containerEl = document.getElementById('container')
        containerEl.appendChild(html)

    </script>
</body>

</html>