hugo site

static/assets/posts/youre-gone/vis.js

@@ -0,0 +1,132 @@
+(() => {
+  // 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);
+  };
+})();