Swipe-Li

Recently we – at rangle.io – had a chance to work on a short project. The app was largely a functional prototype built in 1 week. One of the requirements was to build an interface to allow the user to quickly accept or reject items. We came up with swipe-li: a three pane swipeable <li> element. Swipe right for accept. Swipe left for reject.

Most of the swiping code is taken from the hammer.js carousel example. To support the directive I built a hammerRemote service. This delegate service allows you to register/destroy/control multiple instances of hammer.

<div
  swipe-li
  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>

Where:

• 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