turtlegui/examples/tree.html at main · gomyar/turtlegui · 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
<html>

<link rel="stylesheet" type="text/css" href="../turtlegui.css"/>
<style>


</style>

<script src="../turtlegui.js"></script>

<script>

// Controller code / state
var filesystem = {files: {
    'opt': {is_directory: true, files: {
        'config.txt': {},
        'app': {is_directory: true, files: {
            'demo': {is_directory: true, files: {
                'demo.py': {},
                'demo.txt': {}
            }},
            'viewer': {is_directory: true, files: {
                'view.py': {}
            }}
        }},
        'games': {is_directory: true, files: {
            'doom': {is_directory: true, files: {
                'run.bat': {}
            }},
            'quake': {is_directory: true, files: {
                'rungl.bat': {}
            }}
        }}
    }}
}}

document.addEventListener("DOMContentLoaded", function(){
    // call turtlegui.reload() when the page loads
    turtlegui.reload();
});

</script>

<body>

<label>Filesystem:</label>

<div gui-tree="filesystem" gui-nodeitem="directory">
    <div style="margin-left: 10px" gui-list="directory.files" gui-item="file" gui-key="filename">
        <span>/</span>
        <span gui-text="filename"></span>
        <br/>
        <span gui-show="file.is_directory" gui-node="file"></span>
    </div>
</div>

</body>