Add new steps, refactoring, promises, markdown rendering, and more.

app.js

@@ -1,37 +1,64 @@
 'use strict';
 
-var dataText = require('raw!./data.txt');
+require('classlist-polyfill');
+var Promise = require('bluebird');
+var md = require('markdown').markdown.toHTML;
+var workText = require('raw!./work.txt');
 var pgpText = require('raw!./pgp.txt');
-var styleText = require('raw!./styles.css');
-var prefix = require('./lib/getPrefix')();
+var styleText = [0,1,2,3].map(function(i) { return require('raw!./styles' + i + '.css'); });
 var replaceURLs = require('./lib/replaceURLs');
-styleText = styleText.replace(/-webkit-/g, prefix);
 
-document.addEventListener("DOMContentLoaded", doWork);
+// Ghetto per-browser prefixing
+var prefix = require('./lib/getPrefix')();
+styleText = styleText.map(function(text) {
+  return text.replace(/-webkit-/g, prefix);
+});
 
-var isDev = window.location.hostname === 'localhost';
-var speed = isDev ? 4 : 16;
-var style, styleEl, dataEl, pgpEl;
+// Wait for load to get started.
+document.addEventListener("DOMContentLoaded", doWork);
 
+// Vars that will help us get er done
+var isDev = window.location.hostname === 'localhost' && false;
+var speed = isDev ? 0 : 16;
+var style, styleEl, workEl, pgpEl;
 function doWork(){
   style = document.getElementById('style-tag');
   styleEl = document.getElementById('style-text');
-  dataEl = document.getElementById('data-text');
+  workEl = document.getElementById('work-text');
   pgpEl = document.getElementById('pgp-text');
 
   // Mirror user edits back to the style element.
   styleEl.addEventListener('input', function() {
     style.textContent = styleEl.textContent;
   });
 
-  // starting it off
-  writeTo(styleEl, styleText, 0, speed, true, 1, function() {
-    writeTo(dataEl, dataText, 0, speed, false, 1, function() {
-      writeTo(pgpEl, pgpText, 0, speed, false, 16);
+  if (!isDev) {
+    writeTo(styleEl, styleText[0], 0, speed, true, 1)()
+    .then(writeTo(workEl, workText, 0, speed, false, 1))
+    .then(writeTo(styleEl, styleText[1], 0, speed, true, 1))
+    .then(setWorkListener)
+    .delay(500)
+    .then(writeTo(styleEl, styleText[2], 0, speed, true, 1))
+    .then(writeTo(pgpEl, pgpText, 0, speed, false, 16))
+    .then(writeTo(styleEl, styleText[3], 0, speed, true, 1));
+  } else {
+    styleText.forEach(function(text) {
+      styleEl.innerHTML += text;
+      style.textContent += text;
     });
-  });
+    setWorkListener();
+    pgpEl.innerHTML = pgpText;
+  }
 }
 
+/**
+ * Helpers
+ */
+
+//
+// Writing to boxes
+//
+
 var openComment = false;
 var styleBuffer = '';
 function writeChar(el, char){
@@ -67,45 +94,73 @@ function writeChar(el, char){
 
 function writeSimpleChar(el, char) {
   el.innerHTML += char;
-  if (char === '\n') {
-    var tryURLs = replaceURLs(el.innerHTML);
-    if (tryURLs !== el.innerHTML) {
-      el.innerHTML = tryURLs;
-    }
-  }
 }
 
 var endOfSentence = /[\.\?\!]\s$/;
 var endOfBlock = /[^\/]\n\n$/;
-function writeTo(el, message, index, interval, mirrorToStyle, charsPerInterval, callback){
-  if (index < message.length) {
+function writeTo(el, message, index, interval, mirrorToStyle, charsPerInterval){
+  return function() {
+    return Promise.try(function() {
+      // Write a character or multiple characters to the buffer.
+      var chars = message.slice(index, index + charsPerInterval);
+      index += charsPerInterval;
 
-    // Write a character or multiple characters to the buffer.
-    var chars = message.slice(index, index + charsPerInterval);
-    index += charsPerInterval;
+      // Ensure we stay scrolled to the bottom.
+      el.scrollTop = el.scrollHeight;
 
-    // Ensure we stay scrolled to the bottom.
-    el.scrollTop = el.scrollHeight;
+      // If this is going to <style> it's more complex; otherwise, just write.
+      if (mirrorToStyle) {
+        writeChar(el, chars);
+      } else {
+        writeSimpleChar(el, chars);
+      }
+    })
+    .then(function() {
+      if (index < message.length) {
+        // Schedule another write.
+        var thisInterval = interval;
+        var thisSlice = message.slice(index - 2, index + 1);
+        if (!isDev) {
+          if (endOfSentence.test(thisSlice)) thisInterval *= 70;
+          if (endOfBlock.test(thisSlice)) thisInterval *= 50;
+        }
 
-    // If this is going to <style> it's more complex; otherwise, just write.
-    if (mirrorToStyle) {
-      writeChar(el, chars);
-    } else {
-      writeSimpleChar(el, chars);
-    }
+        return Promise.delay(thisInterval)
+        .then(writeTo(el, message, index, interval, mirrorToStyle, charsPerInterval));
+      }
+    });
+  };
+}
+
+//
+// Fire a listener when scrolling the 'work' box.
+//
+function setWorkListener() {
+  workEl.innerHTML = '<div class="text">' + replaceURLs(workText) + '</div>' +
+                     '<div class="md">' + replaceURLs(md(workText)) + '<div>';
 
-    // Schedule another write.
-    var thisInterval = interval;
-    var thisSlice = message.slice(index - 2, index + 1);
-    if (!isDev) {
-      if (endOfSentence.test(thisSlice)) thisInterval *= 70;
-      if (endOfBlock.test(thisSlice)) thisInterval *= 50;
+  workEl.classList.add('flipped');
+  workEl.scrollTop = 9999;
+
+  // flippy floppy
+  var flipping = 0;
+  require('mouse-wheel')(workEl, function(dx, dy) {
+    if (flipping) return;
+    var flipped = workEl.classList.contains('flipped');
+    var half = (workEl.scrollHeight - workEl.clientHeight) / 2;
+    var pastHalf = flipped ? workEl.scrollTop < half : workEl.scrollTop > half;
+
+    // If we're past half, flip the el.
+    if (pastHalf) {
+      workEl.classList.toggle('flipped');
+      flipping = true;
+      setTimeout(function() {
+        workEl.scrollTop = flipped ? 0 : 9999;
+        flipping = false;
+      }, 250);
     }
 
-    setTimeout(function() {
-      writeTo(el, message, index, interval, mirrorToStyle, charsPerInterval, callback);
-    }, thisInterval);
-  } else {
-    callback && callback();
-  }
+    // Scroll. If we've flipped, flip the scroll direction.
+    workEl.scrollTop += (dy * (flipped ? -1 : 1));
+  }, true);
 }