28th March, 2014

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: