GithubHelp home page GithubHelp logo

track's Introduction

Usage

Track the entire document

var track = new Track();
document.addEventListener(track.up, function () {
  alert('You held down for ' + track.duration + 'ms');
}, false);

API

  • new Track(<context>) - defaults to the document returns a new track object which contains live information about the position of cursor

Mouse & Touch based information

Note that all x/y coordinates are relative to the context passed in to the Track object. If you want the x/y relative to the screen, set the context to the document.

  • track.touch - boolean to indicate touch event support
  • track.x, track.x - last knowning x/y corrdinates - these are updated on any move event on the context, and are available at all times
  • track.downX, track.downY - the x/y corrdinates on the down event
  • track.upX, track.upY - the x/y corrdinates on the up event
  • track.startTime - the time in milliseconds when the last down event occurred
  • track.duration - the duration in milliseconds between the down and up event
  • track.down - boolean to indicate whether the cursor (or finger) is down

Event names

There are three connivence strings that allow you to easily bind to the right event type depending on whether track.touch is true or not. For example track.events.up is mouseup if track.touch is false, and touchend if track.touch is true.

  • track.events.up
  • track.events.down
  • track.events.move

Momentum

  • track.weight - an arbitrary value that affects the momentum of a move event. The lower the number, the heavier the move event and therefore the lower the momentum. Higher numbers like 1500 give a sense of the move event having momentum (as seen in the demo)
  • track.momentumX, track.momentumY - values that must be subtracted from the track.x/y to get the final x/y position after momentum.

For example:

var track = new Track();
document.addEventListener(track.events.up, function () {
  animate({
    start: [track.downX, track.downY],
    end: [track.x - track.momentumX, track.y - track.momentumY]
  });
}, false);

Keyboard

Any key pressed will hold a true value whilst down with the keycode (via event.which):

For example:

if (track.key[27]) {
  // user is holding the escape key
}

Serialisation

Nothing special, just outputs to JSON:

  • track.toString() or track+'' - to get the JSON respresentation of the object

License

MIT-License: http://rem.mit-license.org

track's People

Contributors

remy avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.