tutorials/chat-system/chat-system.html at master · Karlo-Emilo/tutorials · 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
<html>
<head>
<style>
body {
	font: 85% helvtica, sans-serif;
}
#chatWindow {
	width: 100%;
	border-bottom: 1px solid #eee;
}
#chatWindow .entry {
	padding: 2px;
}
#chatWindow .entry .timestamp {
	font-size: 80%;
	color: #999;
}
#chatWindow .entry .username {
	display: inline-block;
	width: 100px;
	text-align: right;
	font-weight: bold;
}
transient .chatEntry {
	color: #a00;
}
</style>
<script>
webstrate.on("loaded", function(webstrateId, clientId, user) {
	var userName = prompt("Enter name:", "Anonymous");
	var chatWindow = document.getElementById("chatWindow");
	var recipientBox = document.createElement("transient");
	recipientBox.setAttribute("id", "recipientBox");
	var inputField = document.getElementById("inputField");
	var submitButton = document.getElementById("submitButton");

	document.body.insertBefore(recipientBox, inputField);

	submitButton.addEventListener("click", function() {
		var recipientId = recipientBox.getAttribute("clientid");
		var recipient = recipientBox.innerText;
		var timestamp = new Date().toISOString().substr(11,8);

		if (recipientId) {
			chatWindow.webstrate.signal({ userName: userName, text: inputField.value }, [recipientId]);
			chatWindow.insertAdjacentHTML('beforeend', '<transient>' +
				'<div class="private chatEntry" ' +
				'title="clientId: ' + clientId +'" clientid="' + clientId + '">' +
					'<span class="timestamp">' + timestamp + '</span> ' +
					'<span class="username">To: ' + recipient + '</span>: ' +
					'<span class="message">' + inputField.value + '</span>' +
				'</div>' +
			'</transient>\n');
		} else {
			chatWindow.insertAdjacentHTML('beforeend', '<div class="chatEntry" ' +
				'title="clientId: ' + clientId + '" clientid="' + clientId + '">' +
				'<span class="timestamp">' + timestamp + '</span> ' +
				'<span class="username">' + userName + '</span>: ' +
				'<span class="message">' + inputField.value + '</span>' +
			'</div>\n');
		}
		inputField.value = "";
	});

	chatWindow.addEventListener("dblclick", function(e) {
		if (e.target.className === "username") {
			recipientBox.setAttribute("clientid", e.target.parentElement.getAttribute("clientid"));
			recipientBox.innerText = e.target.parentElement.querySelector(".username").innerText;
		} else {
			recipientBox.removeAttribute("clientid");
			recipientBox.innerText = "";
		}
	});

	chatWindow.webstrate.on("signal", function(message, senderId, node) {
		var timestamp = new Date().toISOString().substr(11,8);
		chatWindow.insertAdjacentHTML('beforeend', '<transient>' +
			'<div class="private chatEntry" ' +
			'title="clientId: ' + senderId + '" clientid="' + senderId + '">' +
				'<span class="timestamp">' + timestamp + '</span> ' +
				'<span class="username">From: ' + message.userName + '</span>: ' +
				'<span class="message">' + message.text + '</span>' +
			'</div>' +
		'</transient>\n');
	});
});
</script>
</head>
<body>
<div id="chatWindow">

</div>
<input type="text" id="inputField">
<button id="submitButton">Submit</button>
</body>
</html>