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