JarCastingangular-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. : )
Usage
Include ./dist/angular-swing.js..
Load gajus.swing module, e.g.
angular.module('your-module', ['gajus.swing']);
Loading gajus.swing 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 Bower:
bower install angular-swing
Using NPM:
npm install angular-swing