ghosture

0.2.0 • Public • Published

ghosture.js

Simulate and automate touch gestures in your user interface unit tests. Designed to be used especially with PhantomJS.

Install

npm install ghosture

Usage

// "swipe left"
ghosture.start(200, 50)
  .moveTo(100, 50, '500ms')
  .end()
  .run();

// "tap"
ghosture.start(50, 50)
  .hold('50ms')
  .end()
  .run();

// execute functions between
ghosture.start(50, 50)
  .then(function () { console.log('started'); })
  .moveBy(50, 50)
  .then(function () { console.log('moved to (100, 100)'); })

API

ghosture

ghosture.start(x, y)

Creates and initiates a new Gesture instance. Does not emit a touchstart event until run() is called.

var g = ghosture.start(100, 20);

ghosture.endTouches()

End all ongoing ghosture-created touches.

ghosture.numTouches()

Number of ongoing ghosture-created touches.

Gesture

g.cancel()

Cancel the gesture by emitting a touchcancel. The gesture cannot be restarted.

g.end()

End the gesture by emitting a touchend. The gesture cannot be restarted.

g.hold(duration)

Keep the gesture still. Duration is a CSS time string, such as '0.5s' or '500ms'.

g.moveBy(dx, dy, [duration='50ms'], [easing='linear'])

Move the gesture in a relative manner. For available easing functions, see component/ease.

g.moveTo(x, y, [duration='50ms'], [easing='linear'])

Move the gesture to absolute clientX and clientY coordinates.

g.run([fn])

Run the gesture and execute optional fn function when finished.

g.then(fn)

Execute an arbitrary fn function during the gesture.

Future plans

Logo

Example apps

Premade gestures (Not yet implemented)

var tap = ghosture.tap(100, 200);
tap.run();
ghosture.doubletap(100, 50).run();
ghosture.tripletap(100, 50).run();
ghosture.doubletap({
  x: 100,
  y: 50,
  interval: 10 // default
}).run();

Multitouch gestures (Not yet implemented)

ghosture.transform({
  pointers: 2,
  centerXStart: 100,
  centerYStart: 50,
  duration: 500,
  ease: 'in-out',
  centerXEnd: 200,
  centerYEnd: 60,
  radiusStart: 50,
  radiusEnd: 100,
  angleStartDeg: 0,
  angleEndRad: 0
}).run();

Recording (Not yet implemented)

Train your ghost fingers by tracking a real touch gesture.

ghosture.recordNext()
  .save(function (recordedData) {
    alert(recordedData);
  });

Records the gesture from the touchstart of the first finger touching the document to the touchend of the last finger leaving the document.

The default element to track is document.body. You can track specific element by .recordNext(myElement).

Replay (Not yet implemented)

Play the recorded gesture in your unit tests by:

var gesture = "ghosture,v1;0,1,s,730,343;100,1,m,733,342;";
ghosture(gesture).end();

or

ghosture.start(gesture).end();

Format (Not yet implemented)

Example of two events:

"ghosture,v1;0,1,s,730,343;100,1,m,733,342;"

The format in the Backus-Naur notation for geeks:

<engine>          ::= <string>
<version>         ::= "v" + <positive integer>
<format-id>       ::= <engine> + "," + <version>

<elapsed-time-ms> ::= <positive integer>
<pointer-id>      ::= <positive integer>
<pointer-start>   ::= "s"
<pointer-move>    ::= "m"
<pointer-end>     ::= "e"
<pointer-cancel>  ::= "c"
<event-type>      ::= <pointer-start> | <pointer-move> |
                      <pointer-end> | <pointer-cancel>
<x>               ::= <positive integer>
<y>               ::= <positive integer>
<event>           ::= <elapsed-time-ms> + "," + <pointer-id> + "," +
                      <event-type> + "," + <x> + "," + <y>
<event-sequence>  ::= "" | <event-sequence> + <event> + ";"

<gesture>         ::= <format-id> + ";" + <event-sequence>

Additional constraints:

  • Events must be ordered by time i.e. in ascending order by elapsed-time-ms.

Versioning

Semantic Versioning 2.0.0

License

MIT License

Readme

Keywords

Package Sidebar

Install

npm i ghosture

Weekly Downloads

1

Version

0.2.0

License

MIT

Last publish

Collaborators

  • xeli