README.textile

Mobile Gestures for Angular JS

To use with http://yeoman.io/ do the following:

1. Open bower.json or components.json
2. Add "angular-gesture": "~1.4.0" to your dependency list
3. Run bower install
4. In your application you can now add: (depending on what you need)
   • <script src="components/pointerevents-polyfill/pointerevents.dev.js"></script>
   • <script src="components/angular-gesture/ngGesture/gesture.js"></script>
   • <script src="components/angular-gesture/ngGesture/directive/ngTouch.js"></script>
   • <script src="components/angular-gesture/ngGesture/directive/ngClick.js"></script>
   • <script src="components/angular-gesture/ngGesture/directive/ngHold.js"></script>
   • <script src="components/angular-gesture/ngGesture/directive/ngSwipe.js"></script>
   • <script src="components/angular-gesture/ngGesture/directive/ngDrag.js"></script>

Supports the following gestures out of the box

• hold
• click (tap)
• double click (double tap)
• swipe (up, down, left and right)
• drag

Inspired by AngularJS Touch (API compatible)

How it works

Angular gesture takes a different approach to handling input events to most gesture libraries.
Instead of only dealing with events that fall on the element, pointers are captured so events continue to be processed by the element they originally touched.

This means if you drag too fast or your pointer falls outside the object you are interacting with the gesture isn’t cancelled.
Events are then passed up the DOM from that original touch point.

Usage

Events are assigned to DOM elements via attributes

<div ng-swipe-left="functionInScope($event, $element)"></div>

Where when the user swipes left on a touch device (or clicks and rapidly moves the mouse left) the function is called.

$event and $element are optional and can be passed to the function in any order

Event curation

Modifying default behaviour

1. Somtimes you’ll only want to events to trigger if the user directly touches the element (versus an element further up the DOM)
   • Add on-target to the element <div ng-touch="handler()" on-target>
2. Sometimes you may not want to capture the mouse pointer. This can break form interactions.
   • Add no-capture to the element
3. Sometimes you don’t want the interaction to propagate to elements below the current element
   • Add ng-stop directive to the element
   • This is a shortcut for ng-touch="$event.stopPropagation()"

Browser behaviours and event defaults are also modifyable via element attributes. Below are the defaults

• user-select="none" https://developer.mozilla.org/en-US/docs/Web/CSS/user-select
• touch-callout="none" http://css-infos.net/property/-webkit-touch-callout
• content-zooming="none" http://msdn.microsoft.com/en-us/library/windows/apps/hh441251.aspx
• user-drag="none" http://css-infos.net/property/-webkit-user-drag
• tap-highlight-color="rgba(0,0,0,0)" http://css-infos.net/property/-webkit-tap-highlight-color

Each event type has its own default settings for limits, breakpoints, etc all can be changed via attributes.