angular-swing2

angular-swing

AngularJS directive for Swing: A swipeable cards interface. The swipe-left/swipe-right for yes/no input. As seen in apps like Jelly and Tinder, and many others.

Give it a swing! and please tweet it if you like it. : )

• angular-swing
  • Usage
    • Examples
  • Events
    • Event Object
  • Download

Usage

Load angular-swing2 module, e.g.

import ngSwing from 'angular-swing2';

const MODULE_NAME = 'your-module';
export default MODULE_NAME;
angular.module(MODULE_NAME, [ngSwing]);

Loading angular-swing2 module will make available the swing-stack and swing-card directives.

Prepare a Swing stack:

<ul swing-stack></ul>

Add a Card to the Swing stack:

<ul swing-stack>
    <li swing-card></li>
</ul>

Attach event listeners to the instance of Card:

<ul swing-stack>
    <li
        swing-card
        swing-on-throwout="console.log(eventName, eventObject)"
        swing-on-throwoutleft="console.log(eventName, eventObject)"
        swing-on-throwoutright="console.log(eventName, eventObject)"
        swing-on-throwin="console.log(eventName, eventObject)"
        swing-on-dragstart="console.log(eventName, eventObject)"
        swing-on-dragmove="console.log(eventName, eventObject)"
        swing-on-dragend="console.log(eventName, eventObject)"
        ></li>
</ul>

Use scope variable to change Swing Stack default options:

$scope.options = {
    throwOutConfidence: function (offset, element) {
        console.log('throwOutConfidence', offset, element.offsetWidth);
        return Math.min(Math.abs(offset) / element.offsetWidth, 1);
    },
    isThrowOut: function (offset, element, throwOutConfidence) {
        console.log('isThrowOut', offset, element.offsetWidth, throwOutConfidence);
        return throwOutConfidence === 1;
    }
};

<ul swing-stack swing-options="options">...</ul>

Use scope variables/methods to add/remove cards:

<ul swing-stack>
    <li
        swing-card
        swing-on-throwout="remove($index)"
        ng-repeat="card in cards"
        >{{card.name}}</li>
</ul>

$scope.cards = [
    {name: 'foo'},
    {name: 'bar'}
];
$scope.remove = function (index) {
    $scope.cards.splice(index, 1);
}
$scope.add = function (name) {
    $scope.cards.push({name: name});
};

Examples

• Card stack using AngularJS directive.

There are more examples that using the standalone Swing.

The code for all of the examples is in the ./examples/ folder.

Raise an issue if you are missing an example.

Events

Swing Documentation for the Events.

Swing events translate to the following attributes in the AngularJS directive:

Name	Description
throwout	swing-on-throwout
throwoutleft	swing-on-throwoutleft
throwoutright	swing-on-throwoutright
throwin	swing-on-throwin
dragstart	swing-on-dragstart
dragmove	swing-on-dragmove
dragend	swing-on-dragend

Event listener expression can use eventName and eventObject parameters.

Event Object

Swing Documentation for the Event Object.

Download

Using NPM:

npm install angular-swing2

You can of course wedge https://unpkg.com/angular-swing2/dist/angular-swing.js in a script src.