angular-swipe-element

Small extension for AngularJS to add wider support of swipes and drags

Live Demo here.

Basic usage

Add bower dependency.

bower install --save angular-swipe-element

Include script in you html file.

<script type="text/javascript" src="bower_components/angular-swipe-element/angular-swipe-element.min.js"></script>

Define module as AngularJs dependency!

var app = angular.module('app', ['angular-swipe-element']);

Define the callbacks in controller!

app.controller(function($scope) {
    $scope.onSwipeStart = function(dir, deltaX, deltaY) { console.log('Started, direction: ' + dir + '. DeltaX: ' + deltaX + '; DeltaY: ' + deltaY); };
    $scope.onSwipeMove = function(dir, deltaX, deltaY) { console.log('Moved, direction: ' + dir + '. DeltaX: ' + deltaX + '; DeltaY: ' + deltaY); };
    $scope.onSwipeEnd = function(dir, deltaX, deltaY) { console.log('Released, direction: ' + dir + '. DeltaX: ' + deltaX + '; DeltaY: ' + deltaY); };
});

Define the directive!

<div swipe-element="onSwipeEnd(dir, deltaX, deltaY)" 
     swipe-element-move="onSwipeMove(dir, deltaX, deltaY)" 
     swipe-element-start="onSwipeStart(dir, deltaX, deltaY)"></div>

You are ready! Enjoy the plugin.

Directive attributes

Directive can be used to catch swipe(mouse drag) start/move/end events. You can pass callbacks for these events in the following attributes:

Attribute	Required	Description
swipe-element	Required	Fires when user stops swiping/dragging current element
swipe-element-start	optional	Fires when user touches/mousedowns current element
swipe-element-move	optional	Fires when user moves finger/mouse while holding current element

Callback parameter

When some event is fired, directive callback's scopes are provided with $event parameter as well as with the following properties which could be used for your needs:

Property	Description
$event	Contains all of the data properties
x	Current X coordinate of the pointer in the document
y	Current X coordinate of the pointer in the document
deltaX	Difference on the X axis, comparing to swipe/drag starting point. (currentPosition - startingPosition)
deltaX	Difference on the Y axis, comparing to swipe/drag starting point. (currentPosition - startingPosition)
dir	String value representing direction, in which swipe/drag is heading. Can be equal to '', 'u', 'd', 'l', 'r'. If deltaX and deltaY equal to each other and not equal 0 takes horizontal value.
hDir	String value representing direction, in which swipe/drag is heading on X axis. Can be equal to '', 'l', 'r'.
vDir	String value representing direction, in which swipe/drag is heading on Y axis. Can be equal to '', 'u', 'd'.
startX	X coordinate of the pointer in the document, when swipe/drag started
startY	Y coordinate of the pointer in the document, when swipe/drag started
initialElementBounds	getClientBoundingRect() executed on element when the swipe/drag started.
triggerType	Could be used to differ mouse and touch events. String value. Can be 'mouse' or 'touch'.
source	Source DOM event.

License

MIT license.

Contribution

You are welcome to contribute. Feel free to contact me.