drusepth/reader.html

## reader.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("&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>

	<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>