<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://unpkg.com/xnew@3.0.x/dist/xnew.js"></script>
</head>
<body>
<script>
xnew((self) => {
const reset = xnew(Button, 'reset');
let parent = xnew(Parent);
let console = xnew(Console);
reset.on('click', () => {
parent.finalize();
console.finalize();
parent = xnew(Parent);
console = xnew(Console);
});
});
function Parent(self) {
xnew.nest({ style: { padding: '6px', background: '#08F' }});
xnew({ tagName: 'span' }, 'parent');
const button1 = xnew(Button, 'stop');
const button2 = xnew(Button, 'finalize');
const text = xnew({ tagName: 'div' });
let isRunning = false;
button1.on('click', () => {
button1.element.textContent = isRunning ? 'start' : 'stop';
isRunning ? self.stop() : self.start();
});
button2.on('click', (event) => self.finalize());
xnew(Child);
return {
start() {
isRunning = true;
xnew.emit('+console', 'parent start');
},
update(count) {
text.element.textContent = `count ${count}`;
},
stop() {
isRunning = false;
xnew.emit('+console', 'parent stop');
},
finalize() {
xnew.emit('+console', 'parent finalize');
},
};
}
function Child(self) {
xnew.nest({ style: { padding: '6px', background: '#F80' }});
xnew({ tagName: 'span' }, 'child');
const button1 = xnew(Button, 'stop');
const button2 = xnew(Button, 'finalize');
const text = xnew({ tagName: 'div' });
let isRunning = false;
button1.on('click', (event) => {
button1.element.textContent = isRunning ? 'start' : 'stop';
isRunning ? self.stop() : self.start();
});
button2.on('click', (event) => self.finalize());
return {
start() {
isRunning = true;
xnew.emit('+console', 'child start');
},
update(count) {
text.element.textContent = `count ${count}`;
},
stop() {
isRunning = false;
xnew.emit('+console', 'child stop');
},
finalize() {
xnew.emit('+console', 'child finalize');
},
};
}
function Button(self, text) {
xnew.nest({ tagName: 'button', style: { width: '60px', margin: '6px' }});
self.element.textContent = text;
}
function Console(self) {
xnew.nest({ style: { margin: '16px 0', border: 'solid 1px #AAA' }});
xnew({ tagName: 'div', style: { background: '#DDD' } }, 'console');
const list = [];
let autoincrement = 0;
self.on('+console', (text) => {
list.push(xnew({ tagName: 'div' }, autoincrement++ + ': ' + text));
if (list.length > 6) {
list.shift().finalize();
}
});
}
</script>
</body>
</html>