rdwallis/MagicScrollWebReader — pull request #2 by shaunew (2013-01-14 09:52:56+00:00)
Title: Touch controls

Hi, I've added touch controls to the project. I tested it on a Samsung Galaxy Tab 7.1, with Android's native browser and Chrome.

[Try the touch control demo here.](http://shaunew.github.com/MagicScrollWebReader/demo.htm) The mouse controls are mapped to the touch controls for testing.

NOTE: I didn't disable text-selecting, so the act of dragging the scroll guide will select the text if you are not dragging in the margins. Interesting side effect of this is that when you are selecting text around the page break, it will scroll with you!

### Code
I kept all the code in an anonymous function call at [line 297](https://github.com/shaunew/MagicScrollWebReader/blob/master/staticScroll.js#L297). I kept my outside edits to a minimum, and did not alter any original behavior.

## Design

Listed below are the three possible states that the scroll guide can be
in before the user touches the screen.

* TOP: the scroll guide is at the very top of the screen, meaning the current page has a zero height.
* MID: the scroll guide is somewhere between the top and bottom.
* BOT: the scroll guide is at the very bottom of the screen, meaning the current page has full height.

TOP MID BOT
+========+ +--------+ +--------+ ^
| | | | | | | Top Snap/Grab Radius
| | | | | | v
| | | | | |
| | | | | | ^
| | |========| | | | Mid Grab Radius
| | | | | | | (relative to current guide)
| | | | | | v
| | | | | |
| | | | | | ^
| | | | | | | Bottom Snap/Grab Radius
+--------+ +--------+ +========+ v

### On Touch Start

A touch starting within any radii listed above will cause
the scroll guide to snap to the cursor.

In the TOP state, touching within the BOT's radius
should execute "showPrevPage", bringing us to the
BOT state of the previous page.

In the BOT state, touching within the TOP's radius
should execute "showNextPage", bringing us to the
TOP state of the next page.

Any touch starting outside the radii will defer the
scroll guide grab until the touch moves into the radii.

### On Touch Move:

Any move will drag the scroll guide if it is currently snapped to the cursor.

In the MID state, any move within the radii of the scroll guide
should cause it to snap to the cursor.

### On Touch End:

Any touch ending within the top or bottom radii will snap to that
respective edge.