• Stars
    star
    513
  • Rank 86,178 (Top 2 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 11 years ago
  • Updated over 4 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

AngularJS directive that adds support for multi touch gestures to your app. Based on hammer.js.

angular-gestures

AngularJS directive that adds support for multi touch gestures to your app, based on hammer.js.

Usage

  • Include gestures.js or gestures.min.js into your page
  • Declare 'angular-gestures' as a dependency for your angular app: angular.module('myApp', ['angular-gestures']);
  • Config the recognizers before you use the directive like this: hammerDefaultOptsProvider.set({recognizers: [[Hammer.Tap, {time: 250}]] });
  • Use attributes on containers the same way you use ng-click: e.g. hm-tap
<button hm-tap="add_something()">Tap me</button>
  • You can use angular interpolations like this : hm-swipe="remove_something({{ id }})"
  • You can also use Hammer.js options by e.g. hm-tap-opts="{hold: false}"

Note that hammer.js is an additional requirement and is not included in angular-gestures.

Event data

Pass the $event object in the usual way e.g. hm-drag="myDrag($event)" then access its internals like so:

$scope.myDrag = function(event) {
	console.log(event.gesture);
}

Refer to the Hammer.js docs for more details on the properties of event.

Supported events

  • hmDoubleTap : 'doubletap',
  • hmDragstart : 'dragstart',
  • hmDrag : 'drag',
  • hmDragUp : 'dragup',
  • hmDragDown : 'dragdown',
  • hmDragLeft : 'dragleft',
  • hmDragRight : 'dragright',
  • hmDragend : 'dragend',
  • hmHold : 'hold',
  • hmPinch : 'pinch',
  • hmPinchIn : 'pinchin',
  • hmPinchOut : 'pinchout',
  • hmRelease : 'release',
  • hmRotate : 'rotate',
  • hmSwipe : 'swipe',
  • hmSwipeUp : 'swipeup',
  • hmSwipeDown : 'swipedown',
  • hmSwipeLeft : 'swipeleft',
  • hmSwipeRight : 'swiperight',
  • hmTap : 'tap',
  • hmTouch : 'touch',
  • hmTransformstart : 'transformstart',
  • hmTransform : 'transform',
  • hmTransformend : 'transformend'

All Hammerjs events are supported. The corresponding Angularjs attribute has hm- prepended to the name. So for example, the 'doubletap' event becomes hm-double-tap etc.

Attention : *end and *start events are NOT CamelCased because of issues caused by $animate interference.

Default options

To set recognizer default options you can use hammerDefaultOptsProvider. Access it like in the demo:

angular.module('angularGesturesDemoApp', ['angular-gestures', 'ngRoute'])
  .config(function ($routeProvider, hammerDefaultOptsProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/main.html',
        controller: 'MainCtrl'
      })
      .otherwise({
        redirectTo: '/'
      });
    hammerDefaultOptsProvider.set({
        recognizers: [[Hammer.Tap, {time: 250}]]
    });
  });

Bower

If you want to use angular-momentum-scroll with bower, add the following dependency to your component.json

"angular-gestures": "latest"

Require.js/AMD/Node.js

angular-gestures has support for Require.js/AMD/Node.js. When using AMD modules, make sure that you define hammer.js using Hammer, same goes for node.js. If you are not using Require.js/AMD/Node.js, angular-gestures will fall back to using the global Hammer/angular objects.

More Repositories

1

angular-momentum-scroll

Momentum scroll for AngularJS based on iScroll
JavaScript
65
star
2

rsi.server

This project implements the Volkswagen Infotainment Web Interface as published under https://www.w3.org/Submission/2016/01/. The viwi is now called RESTful service interface (rsi)
TypeScript
62
star
3

tesla-lightshow

Repo to collect lightshow sequences
12
star
4

grunt-closure-linter

Grunt integration of google closure linter
JavaScript
12
star
5

node.express.webpack.starter

JavaScript
10
star
6

bower-angular-momentum-scroll

bower repo for angular-momentum-scroll
JavaScript
6
star
7

bower-angular-gestures

JavaScript
5
star
8

node.koa.webpack.starter

A starter project for folks who want to use koa with webpack and typescript
JavaScript
4
star
9

rsi-plugins.media

This project implements the media interfaces of the Volkswagen Infotainment Web Interface (viwi/RSI) as published under https://www.w3.org/Submission/2016/01/
TypeScript
3
star
10

rsi.cli

Command line interface tooling for working with RSI schema files
JavaScript
3
star
11

if9simu

This is a small simulation of JLRs IF9. It is far from complete and was developed to suport the "Connected Car: From APIs to Zecurity" class.
TypeScript
3
star
12

rsi.demo

This project implements the Volkswagen Infotainment Web Interface (viwi/RSI) as published under https://www.w3.org/Submission/2016/01/. It uses the base modules @RSI/server @RSI/medialibrary
TypeScript
3
star
13

WebSocketvsMQTT

A smaller helper tool to analyse WebSocket vs MQTT performance
JavaScript
2
star
14

rsi.serviceregistry

This project implements a service registry mock for the Volkswagen Infotainment Web Interface (viwi/RSI) as published under https://www.w3.org/Submission/2016/01/.
TypeScript
1
star
15

rsi.core

The core for all RSI related projects
TypeScript
1
star
16

rsi.schema

A JSON validation schema for RSI schema files
TypeScript
1
star
17

wzr1337.github.com

JavaScript
1
star
18

rsi.player.ui

A small demo for controlling the rsi media server
TypeScript
1
star