-
-
Notifications
You must be signed in to change notification settings - Fork 0
/
main.js
56 lines (50 loc) · 1.53 KB
/
main.js
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
var config = {
"name" : "comp-click-test",
"props": ['message'],
"template":
`
<style>
h3 {font-style: italic;}
</style>
<div>Click Test: <h3><b> Click Here for the current time </b></h3><br />
`,
"init" : function() {
this.getComp().addEventListener('click', e => {
this.getComp().querySelector("b").innerHTML = " DOM - Clicked: " + new Date();
});
},
watch : function(attribute) {
//no watch for this example
}
}
var config2 = {
"name" : "comp-watch-test",
"props": ['message'],
"template": `Property Watch Test: <b> Change the message property of this component</b>`,
"init" : function() {
let prop1 = this.getProp('message') ? this.getAttribute('message') : "";
},
watch : function(attribute) {
if (attribute.name == 'message') {
attribute.comp.querySelector('b').innerHTML = ` - altered value, ${attribute.newValue} `;
}
}
}
var config3 = {
"name" : "slot-test",
"props": ['message'],
"template": `Slot Test: <slot id="slot1"></slot>`,
"shadow": true,
"init" : function() {
// let prop1 = this.getProp('message') ? this.getAttribute('message') : "";
//this.slots();
},
watch : function(attribute) {
if (attribute.name == 'message') {
//attribute.comp.querySelector('b').innerHTML = ` - altered value, ${attribute.newValue} `;
}
}
}
DrowJS.register(config);
DrowJS.register(config2);
DrowJS.register(config3);