-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
98 lines (83 loc) · 3.12 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<script src="./dist/statex.js"></script>
</head>
<body style="margin: 0;background:#000">
<div id="ui"></div>
<script>
window.onload = function() {
class TestComponent extends statex.Application {
static _template() {
return {
"Image": {type: 'img', htmlEvents: {click: "clickImage"}, events: {}, rotation: 0, pivot: 0, style: {position: 'absolute'}, attribs: {src: "https://www.metrological.com/images/logo2x.2.png"}},
"Sub": {type: SubComponent, prop: 1, events: {"ready": "ready", "rrr": "bla"}}
}
}
static _states() {
return {
"init": function() {
console.log(this)
},
"handleRight": function() {
console.log('right')
},
"clickImage": function(event) {
console.log('event fired')
this.patch({"Image": {htmlEvents: {click: undefined}}})
}
}
}
}
class SubComponent extends statex.Component {
static _template() {
return {
"Label": {x: 1000, y: 600, w: 400, h: 100, type: 'div', tag: 'te', style: {}, children: [{type: 'span', style: {color: 'red', fontSize: '200px'}, text: "Hello"}, '. How are you?']},
"Image": {t: 'img', attribs: {src: 'https://www.metrological.com/images/logo2x.2.png'}, fireHtmlEvent: {'mouseover': 'hover'}}
}
}
static _states() {
return {
"_init": function() {
//this.sel(".Label").animation({duration: 5, actions: [{p: 'x', v: {0: 0, 1: 1000}}]}).start()
this.sel(".Label").$.opacity = 1
this.sel(".Label").transform.item(500).rotate = 1
this.sel(".Label").animation({duration: 5, actions: [{p: 'transform.item(501).rotateX', v: {0: 0, 1: 10}}]}).start()
// setTimeout(() => {
// this.sel(".Label").transform.item(500).rotate = 0
// }, 1000)
},
"hover": function() {
console.log('a1')
}
}
}
get prop() {
return this._prop
}
set prop(v) {
this._prop = v
}
}
const options = {debug: true}
options.keys = {
38: "Up",
40: "Down",
37: "Left",
39: "Right",
13: "Enter",
9: "Back",
8: "Back",
93: "Back",
174: "Back",
175: "Menu",
83: "Search"
};
const app = new TestComponent(options)
window.app = app
document.getElementById('ui').appendChild(app.stage.root.e)
}
</script>
</body>
</html>