This Class allows you to register and listen to mouse/touch gestures on your device. It also comes with a boundle of premade gestures, a gesture generation tool, and a gesture helper class. For the mouse, the Class uses the right mouse button. NOTE: This class can handle simple gestures, but has trouble identifying more complex ones, such as the letter S NOTE: I don't have a touch device, and so cannot test the usability of this class. If you want to hep me develop this class, pm me on github
For most applications, it's enough to have one Gestures class. Initializing it is simple:
var g = new Gestures([options]);
Possible options are:
In order for the class to be effective, you first need to register getures for it. You can either do it globaly or per Class instance. Each gesture is combined of 2 parts:
The Class recognizes 8 directions, which have a name and an angle: East (0), SouthEast(45), South(90), SouthWest(135), West(180), NorthWest(225), North(270) and NorthEast(315). These can be used either by the angle or useing Gestures.Directions for creating more readable sequences. Each sequence is an array of directions. So, for example, registering the letter Z:
[0,135,0] [Gestures.Directions.East , Gestures.Directions.SouthWest , Gestures.Directions.East]
Since the use might not be as accurate, the Class allows you to register mutiple sequences for the same gesture. The best way to do this is to use the Generator tool that is supplied with this package multiple times (maybe even in different sizes).
Registering global gestures (ones that will be available for all instances) can be done either with the Gesture Class:
var right = new Gesture('right' ,[ [Gestures.Directions.East] , [Gestures.Directions.East , Gestures.Directions.NorthEast] , [Gestures.Directions.East , Gestures.Directions.SouthEast] ]); Gestures.registerGesture(right);
Or by simple supplying it with parameters:
Gestures.registerGesture('right',[ [Gestures.Directions.East] , [Gestures.Directions.East , Gestures.Directions.NorthEast] , [Gestures.Directions.East , Gestures.Directions.SouthEast] ]);
Normaly, you won't have more than one instance per application, but if for example you want to register gestures to different elements in the same page, you can register instance-specific gestures:
//using the above right Gesture var g= new Gestures({target:el}); g.register(right);
So, after we registered some gestures, we can do:
var g = new Gestures(); g.addEvent('z',function(){/* do something */}); g.addEvent('right',function(){/* do something else */}); g.start(); //starts listening to gestures
The Class fires 2 main evens (other than the gesture ones): 1. start: fires when a gesture capture begins. 2. end: fires when a gesture capture ends. Passes the recorded gesture sequence as a parameter.
This is a list of readymade gesture recordings. Usage:
Gestures.registerGesture(Gestures.Readymade.right);
Currently available gestures:
A note on comments here: These comments are moderated. No comments will show up until they are approved. Comments that are not productive (i.e. inflammatory, rude, etc) will not be approved.
Found a bug in this plugin? Please report it this repository's Github Issues.
blog comments powered by Disqus