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.
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.
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.
I tried to make the behavior of JSGestureRecognizer as close to
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.
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.
Alert: For the examples to work properly, you need to visit this page using Mobile Safari.