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>
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