<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Chat</title>
<link rel="stylesheet" href="normalize.css">
</head>
<body>
<style>
td {
padding: 5px;
background: white: ;
border-bottom: 4px solid #eee;
}
tr:nth-child(even) {
background-color: red;
}
tr:nth-child(odd) {
background-color: white;
}
</style>
<script>
/* autolink text */
(function() {
var autoLink,
__slice = [].slice;
autoLink = function() {
var k, linkAttributes, option, options, pattern, v;
options = 1 <= arguments.length ? __slice.call(arguments, 0) : [];
pattern = /(^|[\s\n]|<br\/?>)((?:https?|ftp):\/\/[\-A-Z0-9+\u0026\u2019@#\/%?=()~_|!:,.;]*[\-A-Z0-9+\u0026@#\/%=~()_|])/gi;
if (!(options.length > 0)) {
return this.replace(pattern, "$1<a href='$2'>$2</a>");
}
option = options[0];
linkAttributes = ((function() {
var _results;
_results = [];
for (k in option) {
v = option[k];
if (k !== 'callback') {
_results.push(" " + k + "='" + v + "'");
}
}
return _results;
})()).join('');
return this.replace(pattern, function(match, space, url) {
var link;
link = (typeof option.callback === "function" ? option.callback(url) : void 0) || ("<a href='" + url + "'" + linkAttributes + ">" + url + "</a>");
return "" + space + link;
});
};
String.prototype['autoLink'] = autoLink;
}).call(this);
var xhr = new XMLHttpRequest();
var config = {
url: 'export.json'
};
console.log("GET config.url: " + config.url);
xhr.open('GET', config.url, true);
xhr.send();
xhr.onreadystatechange = function() {
console.log("xhr status: " + xhr.status);
if (xhr.status == 200 && xhr.readyState == 4) {
var data = JSON.parse(xhr.responseText);
console.log("call printChat.");
printChat(data);
} else {
console.log("Error - data: " + data);
}
}
function printChat(data) {
var out = '';
for (id in data) {
var msg = data[id];
if (msg.text) {
out += '<tr><td>' + msg.name.replace(' ', ' ') + '</td><td>' + msg.text.autoLink() + '</td></tr>'
}
}
document.getElementById('chat').innerHTML = out;
}
</script>
<table cellpadding="0" cellspacing="0" border="0" id="chat"></table>
</body>
</html>