JSGestureRecognizer

About

JSGestureRecognizer allows you to add gesture recognizers to DOM objects for Mobile Safari similarly to UIGestureRecognizer in iOS. I decided to write this because:

1. I got sick of writing touchstart/touchmove/touchend events to support Mobile Safari
2. I didn't see any implementation out there that I liked
3. I like how UIGestureRecognizer works in iOS and wanted to handle gestures on Mobile Safari similarly
4. I wanted to easily create my own gestures

Just like UIGestureRecognizer, there are two steps to enable gestures on a DOM element.

1. Create an instance of a gesture recognizer, set its properties and initialize with a callback function.
2. Attach the gesture recognizer to a DOM element.

How to use

Of course the initention is to make this library independent, but this relies heavily on custom events and I didn't want to implement another event handling system. For now we require either Prototype.js or jQuery.

Download the newest version of JSGestureRecognizer from Github, and include prototype.js or jquery.js and gesturerecognizer.js on your page:

Create an instance of a JSGestureRecognizer, set up optional properties and initialize with a callback function. For example, to create a new Tap Gesture: Every time you tap on foo, the gesture will be recognized.

Callback Function

In iOS, you specify a target and action for the gesture recognizer. With JSGestureRecognizer, we instead specify a callback function. The callback function is called anytime the JSGestureRecognizer dispatches an event, which strictly follows UIGestureRecognizer's action messages. The callback function passes the recognizer instance as an argument, and to handle the callback, you should do what you do similarly to iOS's implementation.

1) Check the state of the recognizer (ie. JSGestureRecognizerStateBegan / JSGestureRecognizerStateChanged / JSGestureRecognizerStateEnded).
2) Handle updates according to the state of the recognizer. You mostly want to do stuff during JSGestureRecognizerStateChanged / JSGestureRecognizerStateEnded.

Value Accumulation

I tried to make the behavior of JSGestureRecognizer as close to UIGestureRecognizer as possible. This means the scale/rotation/translation values accumulate, meaning that if you want to animate scale/rotation/transformation you will have to set the value to 0 (or in case of scale to 1) after every event, which will return delta values. The examples below all do that.

Rotation Value

Rotation value in JSRotationGestureRecognizer is given in degrees and NOT radians. Why? Because webkitTransformation accepts degrees and gesturechange event on Mobile Safari returns degrees. I thought the extra transformation into radians would just be unnecessary, apologies to all the purests out there.

View Wrapper

Most of the time, you probably want to manipulate the dom object's transformation (ie. position, scale, rotation.) In order to preserve the transformation over events, we need to keep internal states of the position, scale and rotation values. You can do this by using (set/get)Attribute, but JSGestureRecognizer also includes JSGestureView which will keep track of transformation properties for you. The JSGestureView object will be accessible as the view property of the gesture recognizer instance. All examples below use JSGestureView.

Single Gesture Examples

Alert: For the examples to work properly, you need to visit this page using Mobile Safari.

Combination Gesture Examples