From ff8de20eeeb67ab4f8eeb2005cee46313f0e2e07 Mon Sep 17 00:00:00 2001
From: Andrew Brown <drusepth@gmail.com>
Date: Wed, 21 May 2014 19:40:35 +0000
Subject: [PATCH] add some labs for later

---
 public/lab/cardflip.css  |  44 ++++++++++++++
 public/lab/scribe.html   | 121 ++++++++++++++++++++++++++++++++++++++
 public/reader/index.html | 123 +++++++++++++++++++++++++++++++++++++++
 3 files changed, 288 insertions(+)
 create mode 100644 public/lab/cardflip.css
 create mode 100644 public/lab/scribe.html
 create mode 100644 public/reader/index.html
diff --git a/public/lab/cardflip.css b/public/lab/cardflip.css
new file mode 100644
index 00000000..5efec3ad
--- /dev/null
+++ b/public/lab/cardflip.css
@@ -0,0 +1,44 @@
+/* entire container, keeps perspective */
+.flip-container {
+	perspective: 1000;
+}
+/* flip the pane when hovered */
+.flip-container:hover .flipper, .flip-container.hover .flipper {
+	transform: rotateY(180deg);
+}
+
+.flip-container, .front, .back {
+	width: 320px;
+	height: 480px;
+}
+
+/* flip speed goes here */
+.flipper {
+	transition: 0.6s;
+	transform-style: preserve-3d;
+
+	position: relative;
+}
+
+/* hide back of pane during swap */
+.front, .back {
+	backface-visibility: hidden;
+
+	position: absolute;
+	top: 0;
+	left: 0;
+}
+
+/* front pane, placed above back */
+.front {
+	z-index: 2;
+}
+
+/* back, initially hidden pane */
+.back {
+	transform: rotateY(180deg);
+}
+
+.flip-container:hover .flipper, .flip-container.hover .flipper, .flip-container.flip .flipper {
+	transform: rotateY(180deg);
+}
diff --git a/public/lab/scribe.html b/public/lab/scribe.html
new file mode 100644
index 00000000..665ac76b
--- /dev/null
+++ b/public/lab/scribe.html
@@ -0,0 +1,121 @@
+<html>
+<head>
+
+<title>Scribe demo v0.1</title>
+
+<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
+<link rel="stylesheet" type="text/css" href="http://indentapp.com/assets/application.css" />
+<style>
+  #input {
+    width: 800px;
+    height: 90%;
+    float: left;
+    border: 1px solid #ccc;
+    margin: 10px 50px;
+    background: white;
+  }
+  .scribe-container {
+    width: 320px;
+    height: 100%;
+    padding: 10px;
+    
+    position: absolute;
+    right: 0px;
+    top: 0px;
+  }
+</style>
+
+<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
+<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
+<script type="text/javascript">
+  $(document).ready(function () {
+    var input  = $('#input'),
+        scribe = $('.scribe-container');
+    
+    input[0].addEventListener("input", function() {
+      var length = input.text().length;
+      
+      // if this change event was triggered by ADDING more
+      // AND the last character was a space
+      if (length > input.attr('length')
+        && input.text()[length - 1].trim().length == 0) {
+
+        // process word
+        var word = input.text().trim().split(' ').pop();
+        parseWordForObject(word);
+      }
+      
+      input.attr('length', length);
+    }, false);
+    
+    // Determine whether we should create some kind of object for this word
+    function parseWordForObject(word) {
+      var paragraphs = input.text().split("\n");
+      var words = paragraphs[paragraphs.length - 1].split(' ');
+    
+      // if the first character isn't capitalized, throw it out
+      // OR if the word is a number, throw it out
+      // OR it's just a single character (I, A, etc)
+      // OR it's the first word in its paragraph
+      // OR the word prior ended in ., ?, or !
+      if (word[0].toUpperCase() != word[0]
+        || !isNaN(word * 1)
+        || word.length < 2 // > 1-character word
+        || words.length < 2 // > 1-word paragraph
+        || (words.length > 1 && $.inArray(words[words.length - 2].slice(-1), ['.', '!', '?']) > -1)
+      ) {
+
+        return false;
+      }
+      
+      // If it passes the above tests, lets assume it is important!
+      createCardForWord(word);
+    }
+   
+    function createCardForWord(word) {
+      // Strip punctuation off the end of word
+      word = word.replace(/[\?!.:~,]+$/, "");
+   
+      var card = $('<div />').attr('class', 'card');
+
+      var front = $('<div />').attr('class', 'front'),
+          back  = $('<div />').attr('class', 'back').attr('style', 'display: none'),
+          side  = 'front';
+      
+      // toggle which side of the card is showing
+      function toggle_side() {
+        if (side == 'front') { front.fadeOut(function () { back.fadeIn(); }); }
+        else if (side == 'back') { back.fadeOut(function () { front.fadeIn(); }); }
+       
+        side = (side == 'front' ? 'back' : 'front');
+      }
+      
+      // Front of the card
+      front.append($('<img />').attr('src', 'http://mycouponbuddy.com/static/coupon_buddy_site/images/xButton.png').attr('class', 'pull-right'));
+      front.append($('<h3 />').attr('class', 'card-heading simple').text('New character?'));
+      front.append($('<div />').attr('class', 'card-body').html("Hi, I've noticed you mentioned someone (or something) named <strong>" + word + "</strong>. Do you want to create a character with that name?"));
+      front.append($('<div />').attr('class', 'card-comments').append($('<button />').attr('class', 'btn btn-primary').text('Create character').click(toggle_side)));
+
+      // Back of the card
+      back.append($('<img />').attr('src', 'http://mycouponbuddy.com/static/coupon_buddy_site/images/xButton.png').attr('class', 'pull-right'));
+      back.append($('<h3 />').attr('class', 'card-heading simple').text('Introducing ' + word));
+      back.append($('<div />').attr('class', 'card-body').html("Information about <strong>" + word + "</strong> will go here, letting you add/edit fields manually, or prompt you to verify guesses in fields made from what you write about " + word + "."));
+      back.append($('<div />').attr('class', 'card-comments').append($('<button />').attr('class', 'btn btn-primary').text('Save character').click(toggle_side)).append($('<button />').attr('class', 'btn').text('Something else')));
+     
+      front.appendTo(card);
+      back.appendTo(card);
+      card.hide();
+      card.appendTo(scribe);
+      card.fadeIn('slow');
+    }
+  });
+</script>
+
+</head>
+<body>
+
+<div id="input" contenteditable="true">Once upon a time, there was a man named</div>
+<div class="scribe-container"></div>
+
+</body>
+</html>
diff --git a/public/reader/index.html b/public/reader/index.html
new file mode 100644
index 00000000..131a1c31
--- /dev/null
+++ b/public/reader/index.html
@@ -0,0 +1,123 @@
+<html>
+<head>
+<title>FaS Reader</title>
+<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
+<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
+<script type="text/javascript">
+$(document).ready(function() {
+  // Fast as Sanic Reader
+  var left   = $('<span />').attr('id', 'left'),
+      right  = $('<span />').attr('id', 'right'),
+      center = $('<span />').attr('id', 'pivot'),
+      input  = $('<textarea />').attr('id', 'input'),
+      ready  = $('<button />').attr('id', 'go').text('Read'),
+      speed  = $('<select />').attr('id', 'speed');
+
+  // Enable word speeds 200 WPM to 600 WPM
+  for (i = 2; i < 7; i++) { // >
+    $('<option />', { value: i * 100, text: i * 100 }).appendTo(speed);
+  }
+
+  // State!
+  var active_events = [];
+
+  // Clear the display when the user clicks back to input
+  function clear_display() {
+    left.text('Re');
+    center.text('a');
+    right.text('dy');
+  };
+  input.focus(clear_display);
+  clear_display();
+
+  // Business logic, business logic
+  function display_word(word, ui) {
+    if (!word) return;
+  
+    var center_index = parseInt(word.length / 2);
+    
+    // Put the center index in the pivot chair and its prefix/affix
+    // in left/right.
+    ui['pivot'].text(word[center_index]);
+    ui['left'].text(word.substring(0, center_index));
+    ui['right'].text(word.substring(center_index + 1, word.length));
+
+    // Patch up UI on one-character words
+    if (word.length == 1) { ui['left'].html("&nbsp;"); }
+  }
+
+  // Define event handler for pressing Go!
+  ready.click(function () {
+    // Clear current active events
+    $.each(active_events, function (i, event) {
+      clearTimeout(event);
+    });
+    active_events = [];
+  
+    var words = input.val().replace(/\s\s+/g, ' ').split(/[\s\n\r]/);
+
+    // Calculate how long to display word based on specified WPM
+    var display_length = 1 / (speed.val() / 60);
+
+    // Inspired by the beauty of sleep sort
+    $.each(words, function (word_index, word) {
+      active_events.push(setTimeout(function () {
+        display_word(word, {
+          'left':  left,
+          'pivot': center,
+          'right': right
+        });
+      }, word_index * display_length * 1000));
+    });
+
+  });
+
+  // Inject our delicious UI into the page!
+  $('body').append(left)
+           .append(center)
+           .append(right)
+           .append(input)
+           .append(speed).append($("<span />").text('WPM '))
+           .append(ready)
+           .append($('<div />').text('The average person reads around 200 WPM normally.'));
+  
+  // Aaaaand... lets sneak some literature in for the interested wanderers
+  input.text('He is described as wearing a black suit strikingly similar to the visage of the notorious Men In Black, and as the name suggests, appears very thin and able to stretch his limbs and torso to inhuman lengths in order to induce fear and ensnare his prey. Once his arms are outstretched, his victims are put into something of a hypnotized state, where they are utterly helpless to stop themselves from walking into them.');
+});
+</script>
+<style type="text/css">
+  body {
+    text-align: center;
+    margin: 100 0;
+    font-family: "Courier New", Courier, monospace;
+  }
+  #left, #pivot, #right {
+    float: left;
+    font-size: 52px;
+    font-weight: bold;
+  }
+  
+  #left {
+    width: 49%;
+    text-align: right;
+  }
+  #pivot {
+    color: red;
+    width: 34px;
+  }
+  #right {
+    width: 300px;
+    text-align: left;
+  }
+  #input {
+    clear: both;
+    display: block;
+    margin: 0 auto;
+    width: 600px;
+    height: 300px;
+  }
+</style>
+</head>
+<body>
+</body>
+</html>
