public/reader/index.html
<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(" "); }
}
// 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>