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.

Contents

• Usage
• Usage Examples
• Events
  • Event Object
• Download

Usage

Include ./dist/swing.js.

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>

Usage 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