mirror of
https://github.com/indentlabs/notebook.git
synced 2025-10-26 11:19:22 +00:00
3fd6d604fe
This reverts commit 6f8ae925ba.
Conflicts:
app/assets/stylesheets/bootplus_overrides.css.less
124 lines
3.5 KiB
HTML
124 lines
3.5 KiB
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>
|