turtlegui/examples/js_objects.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
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
113
114
115
116
117
118
119
<html>

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


</style>

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

<script>

// Controller code / state
var data = [
    {
        engine: {type: 'structural', name: 'Helios 1000'},
        data_core: {type: 'internal', name: 'Manual'},
        life_support: {type: 'internal', name: 'Freezer Unit'}
    },
    {
        engine: {type: 'structural', name: 'Hyperspace 4000'},
        weapons: {type: 'structural', name: 'Particle Accelerator'},
        data_core: {type: 'internal', name: 'HAL'},
        life_support: {type: 'internal', name: 'Artificial Atmosphere'}
    }
]

var popup = {
    value: "hello",
    callme: function() {
        console.log("here", this);
    },
    readme: function() {
        return this.value;
    },

    inner: {
        touch: function() {
            console.log("touched", this);
        }
    }
}


function DollClass() {
    this.name = 'doll';
}

DollClass.prototype.callme = function() {
    console.log("I am ", this.name);
    return this.name;
}

function ChildClass() {
    this.doll = new DollClass();
    this.name = 'child';
}

ChildClass.prototype.callme = function() {
    console.log("I am ", this.name);
    return this.name;
}


function ParentClass() {
    this.child = new ChildClass();
    this.name = 'parent';
}


ParentClass.prototype.callme = function() {
    console.log("I am ", this.name);
    return this.name;
}

ParentClass.prototype.wrap = function(msg) {
    return "Parent wrapped : " + msg;
}


var the_parent = new ParentClass();


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

</script>

<body>

<label>Ships:</label>

<hr/>

<!-- <div gui-list="data" gui-item="ship">
    <div gui-list="ship" gui-item="component" gui-key="component_type" gui-ordering="name">
        <span gui-text="component_type"></span>
        <span>: </span>
        <span gui-text="component.name"></span>
        <br/>
    </div>
    <br/>
</div>-->

<!--<div gui-text="popup.readme()" gui-show="popup.listvalue && popup.listvalue.length > 0"></div>
<button gui-click="popup.inner.touch()">Click</button>
<button gui-click="the_parent.child.doll.callme()">Parent</button>-->
<div gui-text="the_parent.callme()"></div>
<div gui-text="the_parent.child.callme()"></div>
<div gui-text="the_parent.child.doll.callme()"></div>
<div gui-text="the_parent.wrap(the_parent.child.doll.callme())"></div>
<div gui-text="the_parent['callme']()"></div>
<div gui-text="the_parent['child'].callme()"></div>
<div gui-text="the_parent['child']['doll'].callme()"></div>
<div gui-text="the_parent.wrap(the_parent['child']['doll'].callme())"></div>

</body>