133 lines
4.2 KiB
JavaScript
133 lines
4.2 KiB
JavaScript
(() => {
|
|
// Array to contain our messages.
|
|
let messages, loaded = false;
|
|
|
|
// Elements we'll be referring to.
|
|
const log = document.getElementById('log');
|
|
const entry = document.getElementById('entryText');
|
|
const send = document.getElementById('send');
|
|
const credits = document.getElementById('credits');
|
|
const anchors = document.getElementsByTagName('a');
|
|
|
|
// Fetch the data.
|
|
fetch('vis.json').then(response => {
|
|
return response.json();
|
|
}).then(result => {
|
|
messages = result;
|
|
entry.innerHTML = messages[1].message;
|
|
entry.scrollTo(0, entry.scrollHeight);
|
|
loaded = true;
|
|
})
|
|
|
|
// Event forr clicking Send
|
|
document.getElementById('send').onclick = () => {
|
|
// Bail if we don't have messages (before we start, after we end)
|
|
if (!messages) {
|
|
return;
|
|
}
|
|
|
|
// Make the credits visible and bail, removing the event, once we're done.
|
|
if (loaded && messages.length === 0) {
|
|
credits.classList.add('visible');
|
|
document.getElementById('dismiss').onclick = (aEvt) => {
|
|
aEvt.stopPropagation();
|
|
credits.classList.remove('visible');
|
|
};
|
|
for (let i = 0; i < anchors.length; i++) {
|
|
anchors[i].onclick = (aEvt) => {
|
|
aEvt.stopPropagation();
|
|
}
|
|
};
|
|
send.onclick = null;
|
|
return;
|
|
}
|
|
|
|
// Get the most recent message.
|
|
let message = messages.shift();
|
|
|
|
// If it's a date, add the date node, then get the followinug message.
|
|
if (message.dateChange) {
|
|
// Create a date div.
|
|
const dateNode = document.createElement('div');
|
|
dateNode.classList.add('date');
|
|
const dateText = document.createTextNode(message.dateChange);
|
|
dateNode.appendChild(dateText);
|
|
log.appendChild(dateNode);
|
|
message = messages.shift();
|
|
}
|
|
|
|
// If it's a retime, add the retime node.
|
|
if (message.retime) {
|
|
// Create a retime div.
|
|
const retimeNode = document.createElement('div');
|
|
retimeNode.classList.add('retime');
|
|
const retimeInner = document.createElement('span');
|
|
const retimeText = document.createTextNode(message.time);
|
|
retimeInner.appendChild(retimeText);
|
|
retimeNode.appendChild(retimeInner);
|
|
log.appendChild(retimeNode);
|
|
}
|
|
|
|
if (message.file) {
|
|
// Create the div for the message text.
|
|
const msgTextNode = document.createElement('div');
|
|
msgTextNode.classList.add('msgText')
|
|
const msgText = document.createTextNode(`Lee ♥ sent you: ${message.file}`);
|
|
msgTextNode.appendChild(msgText);
|
|
|
|
// Create the div for the message time.
|
|
const timeNode = document.createElement('div');
|
|
timeNode.classList.add('msgTime')
|
|
const timeText = document.createTextNode(message.time);
|
|
timeNode.appendChild(timeText)
|
|
|
|
// Create the div for the full message and append to the log.
|
|
const msgNode = document.createElement('div');
|
|
msgNode.classList.add('msg')
|
|
msgNode.classList.add('file')
|
|
msgNode.appendChild(msgTextNode);
|
|
msgNode.appendChild(timeNode);
|
|
log.appendChild(msgNode);
|
|
return;
|
|
}
|
|
|
|
// Create the div for the message text.
|
|
const msgTextNode = document.createElement('div');
|
|
msgTextNode.classList.add('msgText')
|
|
const msgText = document.createTextNode(message.message);
|
|
msgTextNode.appendChild(msgText);
|
|
|
|
// Create the div for the message time.
|
|
const timeNode = document.createElement('div');
|
|
timeNode.classList.add('msgTime')
|
|
const timeText = document.createTextNode(message.time);
|
|
timeNode.appendChild(timeText)
|
|
|
|
// Create the div for the full message and append to the log.
|
|
const msgNode = document.createElement('div');
|
|
msgNode.classList.add('msg')
|
|
msgNode.appendChild(msgTextNode);
|
|
msgNode.appendChild(timeNode);
|
|
log.appendChild(msgNode);
|
|
|
|
// If we stil have messages, attempt to get the next one to display in the
|
|
// entry box.
|
|
if (messages.length > 1) {
|
|
let next = messages[0];
|
|
if (next.dateChange) {
|
|
next = messages[1];
|
|
}
|
|
if (next.file) {
|
|
next = messages[2];
|
|
}
|
|
entry.innerHTML = next.message;
|
|
entry.scrollTo(0, entry.scrollHeight);
|
|
} else {
|
|
entry.innerHTML = '';
|
|
}
|
|
|
|
// Scroll the log to the bottom.
|
|
log.scrollTo(0, log.scrollHeight);
|
|
};
|
|
})();
|