A three pane swipeable element. Swipe right for accept. Swipe left for reject.
JavaScript CSS HTML
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
dist
example
src
.gitignore
LICENSE.md
README.md
bower.json
gulpfile.js
package.json
swipe-li.gif

README.md

Swipe-li

A three pane swipeable element. Swipe right for accept. Swipe left for reject. (AngularJS directive)

Live Demo

The code is largely based on the hammer.js carousel demo.

Developed at rangle.io

Dependencies

  • jQuery
  • AngularJS
  • Angular-touch
  • Hammerjs
  • Modernizr

Usage

bower install swipe-li --save

Include the following files in your app:

bower_components/jquery/dist/jquery.js
bower_components/modernizr/modernizr.js
bower_components/angular/angular.js
bower_components/hammerjs/hammer.js
bower_components/angular-touch/angular-touch.js
bower_components/dist/swipe-li.css
bower_components/dist/swipe-li.min.js

You then need to declare a dependency on the swipeLi module: angular.module('myApp', ['swipeLi']);

The Directive

<div
  swipe-li
  class="item"
  disabled=""
  intent="true"
  accept="done(item)"
  reject="skip(item)"
  main-content="'sample-content.html'"
  accept-content="'accept-content.html'"
  reject-content="'reject-content.html'"
  reset-to-content="false"
></div>
  • disabled: disable the swipe-li element.
  • intent: user Intent Detection. If the user drags the pane > 50% of the width the swipe will auto complete.
  • accept: accept callback.
  • reject: reject callback.
  • main-content: template for the start pane.
  • accept-content: template for the accept pane.
  • reject-content: template for the reject pane.
  • reset-to-content: should the swiped pane reset back to start pane on complete

Development

  1. Install dependencies $ npm install

  2. $ gulp dev starts a simple node server and watches for changes

  3. Go to http://localhost:3000/ to see the example app