-
Notifications
You must be signed in to change notification settings - Fork 7
/
index.html
67 lines (62 loc) · 2.16 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
<!DOCTYPE html>
<html>
<head>
<title>Hello</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width"/>
<script src="webxdc.js"></script>
<style type="text/css">
body {
font-family: Helvetica, Arial, sans-serif;
}
</style>
</head>
<body>
<h1>Hello</h1>
<form>
<input id="input" type="text" placeholder="Message" autofocus required />
<input type="submit" onclick="sendMsg(); return false;" value="Send" />
</form>
<p id="output"></p>
<p><em><small id="deviceName"></small></em></p>
<script>
var El = function (tag, text) {
var el = document.createElement(tag);
el.innerText = text || '';
return el;
};
// handle past and future state updates
window.webxdc.setUpdateListener(function (update) {
var output = document.getElementById('output');
// when appending content to an element with output.innerHTML +=
// that content is implicitly parsed, making it possible for messages
// to be interpreted as scripts. Creating elements directly,
// injecting content as plain text, and appending them to the DOM
// is a much safer practice.
[
El('strong', update.payload.name + ':'),
El('span', update.payload.msg),
El('br'),
].forEach(function (item) {
output.appendChild(item);
});
});
function sendMsg() {
msg = document.getElementById("input").value;
info = 'someone typed "' + msg + '"';
document.getElementById("input").value = '';
// send new updates
window.webxdc.sendUpdate({
payload: {
name: window.webxdc.selfName,
msg,
},
info,
});
}
(function () {
window.deviceName.innerText = 'this is ' + window.webxdc.selfName;
})()
</script>
</body>
</html>